/* global React, Eyebrow, useIsMobile, useInView, Reveal */

const DOCTORALIA_URL = 'https://www.doctoralia.com.br/bruna-bianca-mazoro-duarte-chaves/oftalmologista/paco-do-lumiar';
const GOOGLE_REVIEW_URL = 'https://maps.app.goo.gl/tWLFPxkk53XNfefF9';

const BADGES = [
  { iconClass: 'ph ph-google-logo', label: 'Google', stat: '5,0', sub: '44 avaliações', href: GOOGLE_REVIEW_URL },
  { iconClass: 'ph-fill ph-seal-check', label: 'Doctoralia', stat: '100%', sub: 'pacientes satisfeitos', href: DOCTORALIA_URL },
  { iconClass: 'ph-fill ph-star', label: 'Doctoralia', stat: '5,0', sub: '18 opiniões', href: DOCTORALIA_URL },
];

function Stars({ size = 13 }) {
  return (
    <div style={{ display: 'flex', gap: 2, color: 'var(--brand-teal)' }}>
      {[1,2,3,4,5].map(i => <i key={i} className="ph-fill ph-star" style={{ fontSize: size }} />)}
    </div>
  );
}

// Selo de confiança compacto, construído por nós (não é o widget nativo da
// Doctoralia) — mesma altura, borda e hover em todos, e link direto para a
// fonte real (perfil Doctoralia / Google). O widget de agendamento completo
// já vive na seção "Agendamento"; aqui é só prova social resumida.
function TrustBadge({ iconClass, label, stat, sub, href }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: 'block' }}>
      <div style={{
        background: 'var(--white)', border: '1px solid var(--line-1)', borderRadius: 16,
        padding: '18px 20px', boxShadow: 'var(--shadow-glow)',
        display: 'flex', alignItems: 'center', gap: 16,
        transition: 'transform .18s ease, box-shadow .18s ease',
      }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-card)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-glow)'; }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12, flexShrink: 0,
          background: 'var(--teal-050)', color: 'var(--brand-teal)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22,
        }}><i className={iconClass} /></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, color: 'var(--fg-3)' }}>{label}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--brand-navy)' }}>{stat}</span>
            <Stars />
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--fg-3)', marginTop: 1 }}>{sub}</div>
        </div>
        <i className="ph ph-arrow-up-right" style={{ color: 'var(--fg-3)', fontSize: 16 }} />
      </div>
    </a>
  );
}

function PhotoCollage({ isMobile }) {
  const radius = 20;
  const shadow = { boxShadow: 'var(--shadow-cove)', borderRadius: radius, overflow: 'hidden' };
  return (
    <div style={{ display: 'grid', gap: 14 }}>
      <div style={{ ...shadow, aspectRatio: isMobile ? '16 / 10' : '16 / 9' }}>
        <img src="assets/consulta-refracao.jpg" alt="Consulta de refração na Cuidar dos Olhos"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div style={{ ...shadow, aspectRatio: '4 / 5' }}>
          <img src="assets/exame-biomicroscopia-1.jpg" alt="Dra. Bruna Bianca realizando exame com lâmpada de fenda"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
        </div>
        <div style={{ ...shadow, aspectRatio: '4 / 5' }}>
          <img src="assets/consulta-explicacao-modelo-olho.jpg" alt="Explicação de diagnóstico com modelo de olho"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
        </div>
      </div>
    </div>
  );
}

function Reviews() {
  const isMobile = useIsMobile();
  const [gridRef, inView] = useInView();
  return (
    <section id="depoimentos" style={{ padding: isMobile ? '64px 20px' : '96px 32px', background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
          <Eyebrow>Avaliações</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 42,
            color: 'var(--brand-navy)', margin: '4px 0 16px', letterSpacing: '-.01em',
          }}>O que dizem sobre nós</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
            Avaliações reais de pacientes, direto da Doctoralia e do Google.
          </p>
        </div>
        <div ref={gridRef} style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr',
          gap: isMobile ? 32 : 48, alignItems: 'center',
        }}>
          <Reveal show={inView} index={0} variant="fade">
            <PhotoCollage isMobile={isMobile} />
          </Reveal>
          <Reveal show={inView} index={1} variant="fade">
            <div style={{ display: 'grid', gap: 14 }}>
              {BADGES.map(b => <TrustBadge key={b.label + b.stat} {...b} />)}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reviews });