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

const TESTIMONIALS = [
  {
    name: 'Maria das Graças S.',
    detail: 'Paço do Lumiar · Consulta de rotina',
    text: 'Fui com um certo receio, mas saí encantada. A Dra. Bruna é extremamente atenciosa e paciente - explicou tudo com clareza e sem pressa. O ambiente é confortável e acolhedor desde a recepção. Já indiquei para toda a família.',
  },
  {
    name: 'Rafael A.',
    detail: 'São Luís · Oftalmologia infantil',
    text: 'Levei meu filho de 6 anos para o primeiro exame de vista e fiquei impressionado com o jeito que a Dra. Bruna soube lidar com ele. Ele saiu da consulta sem medo nenhum. Diagnóstico claro, orientações precisas. Recomendo muito.',
  },
  {
    name: 'Juliana C.',
    detail: 'Paço do Lumiar · Mapeamento de retina',
    text: 'Realizei o mapeamento de retina aqui e cada etapa foi explicada com cuidado. A clínica tem equipamentos modernos e um atendimento que raramente se encontra. Me sinto segura sabendo que minha saúde ocular está em boas mãos.',
  },
];

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

function TestimonialCard({ name, detail, text }) {
  return (
    <div style={{
      background: 'var(--white)',
      border: '1px solid var(--line-1)',
      borderRadius: 20,
      padding: '32px 28px',
      boxShadow: 'var(--shadow-glow)',
      display: 'flex',
      flexDirection: 'column',
      gap: 20,
      height: '100%',
      boxSizing: 'border-box',
      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)'; }}>
      <Stars />
      <p style={{
        fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.7,
        color: 'var(--fg-2)', margin: 0, fontStyle: 'italic',
      }}>"{text}"</p>
      <div style={{ borderTop: '1px solid var(--line-1)', paddingTop: 18 }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
          color: 'var(--brand-navy)',
        }}>{name}</div>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)',
          letterSpacing: '.08em', marginTop: 2,
        }}>{detail}</div>
      </div>
    </div>
  );
}

function Testimonials() {
  const isMobile = useIsMobile();
  const [gridRef, inView] = useInView();
  return (
    <section id="depoimentos" style={{ padding: isMobile ? '64px 20px' : '96px 32px', background: 'var(--cream-100)', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/exam-child.jpeg)',
        backgroundSize: 'cover', backgroundPosition: 'center 30%',
        opacity: 0.07,
      }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
          <Eyebrow>Depoimentos</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 nossos pacientes dizem</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
            Cuidar é também ouvir. Veja a experiência de quem confiou o seu olhar a nós.
          </p>
        </div>
        <div ref={gridRef} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 22 }}>
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={t.name} show={inView} index={i} variant="fade" style={{ height: '100%' }}>
              <TestimonialCard {...t} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}


Object.assign(window, { Testimonials });