/* global React, Button, Eyebrow, useIsMobile, useInView, Counter */

const STATS = [
  { to: 8,    prefix: '+', suffix: '',  l: 'anos de atuação' },
  { to: 5000, prefix: '+', suffix: '',  l: 'consultas realizadas' },
  { to: 100,  prefix: '',  suffix: '%', l: 'foco em acolhimento' },
];

function DoctorSection({ onBook }) {
  const isMobile = useIsMobile();
  const [sectionRef, inView] = useInView({ threshold: 0.3 });
  return (
    <section ref={sectionRef} id="doctor" style={{ padding: isMobile ? '64px 20px' : '96px 32px' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr',
        gap: isMobile ? 40 : 72,
        alignItems: 'center',
      }}>
        {/* On mobile: text first, image second */}
        {isMobile && (
          <div>
            <Eyebrow>Quem cuida de você</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32,
              color: 'var(--brand-navy)', margin: '4px 0 8px', letterSpacing: '-.01em',
            }}>Dra. Bruna Bianca</h2>
            <div style={{ width: 48, height: 2, background: 'var(--brand-teal)', borderRadius: 2, margin: '0 0 24px' }} />
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', marginTop: 0 }}>
              Oftalmologista com atuação em consultas clínicas, exames complementares
              e procedimentos cirúrgicos. Acredita que um bom atendimento começa
              pelo acolhimento, e que a técnica é apenas parte do cuidado.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, margin: '24px 0' }}>
              {STATS.map(s => (
                <div key={s.l} style={{
                  background: 'var(--cream-100)', borderRadius: 12, padding: '14px 12px',
                  border: '1px solid var(--line-1)', textAlign: 'center',
                }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--brand-navy)' }}>
                    <Counter to={s.to} prefix={s.prefix} suffix={s.suffix} start={inView} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <Button variant="primary" icon="whatsapp-logo" onClick={onBook} style={{ width: '100%', justifyContent: 'center' }}>Agendar pelo WhatsApp</Button>
          </div>
        )}

        <div style={{ position: 'relative' }}>
          <div style={{
            borderRadius: 24, overflow: 'hidden',
            boxShadow: 'var(--shadow-cove)', aspectRatio: '3 / 4',
            background: 'var(--cream-200)',
          }}>
            <img src="assets/ChatGPT%20Image%2021_06_2026%2C%2018_06_45.png" alt="Dra. Bruna Bianca"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
          </div>
          {!isMobile && (
            <div style={{
              position: 'absolute', top: -16, right: -16,
              background: 'var(--brand-navy)', color: '#fff',
              padding: '12px 18px', borderRadius: 999,
              fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12,
              letterSpacing: '.18em', textTransform: 'uppercase',
              boxShadow: 'var(--shadow-card)',
            }}>CRM 15994-MA · RQE 6842</div>
          )}
        </div>

        {/* Desktop: text on the right */}
        {!isMobile && (
          <div>
            <Eyebrow>Quem cuida de você</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 44,
              color: 'var(--brand-navy)', margin: '4px 0 8px', letterSpacing: '-.01em',
            }}>Dra. Bruna Bianca</h2>
            <div style={{ width: 48, height: 2, background: 'var(--brand-teal)', borderRadius: 2, margin: '0 0 24px' }} />
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', marginTop: 0 }}>
              Oftalmologista com atuação em consultas clínicas, exames complementares
              e procedimentos cirúrgicos. Acredita que um bom atendimento começa
              pelo acolhimento, e que a técnica é apenas parte do cuidado.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, margin: '28px 0' }}>
              {STATS.map(s => (
                <div key={s.l} style={{
                  background: 'var(--cream-100)', borderRadius: 12, padding: '16px 18px',
                  border: '1px solid var(--line-1)',
                }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, color: 'var(--brand-navy)' }}>
                    <Counter to={s.to} prefix={s.prefix} suffix={s.suffix} start={inView} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600, marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <Button variant="primary" icon="whatsapp-logo" onClick={onBook}>Agendar pelo WhatsApp</Button>
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { DoctorSection });