/* global React, Button, Eyebrow, Rule, useIsMobile */

function Hero({ onBook }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: isMobile ? '48px 20px 40px' : '72px 32px 64px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr',
        gap: isMobile ? 40 : 72,
        alignItems: 'center',
      }}>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <Eyebrow>Clínica Oftalmológica</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: isMobile ? 42 : 68,
            lineHeight: 1.02, letterSpacing: '-.02em', margin: 0,
          }}>
            <span style={{ color: 'var(--brand-navy)' }}>Sua visão,<br/></span>
            <span style={{ color: 'var(--brand-teal)' }}>nosso cuidado.</span>
          </h1>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: isMobile ? 16 : 18, lineHeight: 1.6,
            color: 'var(--fg-2)', marginTop: 24, marginBottom: 32, maxWidth: 480,
          }}>
            Consultas especializadas, exames completos e a tecnologia que o seu
            olhar merece, em um espaço pensado para o seu conforto.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', flexDirection: isMobile ? 'column' : 'row' }}>
            <Button variant="primary" icon="whatsapp-logo" onClick={onBook}>Agendar pelo WhatsApp</Button>
            <Button variant="ghost" icon="arrow-down" onClick={() => document.getElementById('service')?.scrollIntoView({ behavior: 'smooth' })}>Ver serviços</Button>
          </div>
          <div style={{
            display: 'flex', gap: isMobile ? 12 : 32, marginTop: 48,
            color: 'var(--fg-3)', fontSize: 13,
            flexDirection: isMobile ? 'column' : 'row',
          }}>
            <div><i className="ph ph-map-pin" style={{ color: 'var(--brand-teal)', marginRight: 6 }} />Lumier Center, Sala 123 - Maiobão</div>
            <div><i className="ph ph-clock" style={{ color: 'var(--brand-teal)', marginRight: 6 }} />Seg–Sex 08h–17h · Sáb 08h–12h</div>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            borderRadius: 28, overflow: 'hidden',
            boxShadow: 'var(--shadow-cove)',
            border: '1px solid var(--line-1)',
            aspectRatio: isMobile ? '4 / 3' : '4 / 5',
          }}>
            <img src="assets/dra-bruna-portrait.jpeg" alt="Dra. Bruna Bianca"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 35%' }}/>
          </div>
          {!isMobile && (
            <div style={{
              position: 'absolute', bottom: -22, left: -22,
              background: '#fff', padding: '14px 18px', borderRadius: 16,
              boxShadow: 'var(--shadow-lift)', display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 999, background: 'var(--teal-050)',
                color: 'var(--brand-teal)', display: 'flex', alignItems: 'center',
                justifyContent: 'center', fontSize: 22,
              }}><i className="ph ph-heart" /></div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--brand-navy)' }}>Acolhimento real</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>como você merece</div>
              </div>
            </div>
          )}
        </div>
      </div>

    </section>
  );
}

Object.assign(window, { Hero });