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

const PILLARS = [
  {
    icon: 'stethoscope',
    title: 'Consulta completa',
    desc: 'Cada consulta tem tempo adequado para ouvir você, avaliar com critério e esclarecer suas dúvidas. Do início ao encaminhamento, o foco é inteiramente no seu caso.',
  },
  {
    icon: 'user-circle',
    title: 'Atendimento personalizado',
    desc: 'Cada paciente é único. O cuidado é adaptado às suas necessidades - seja uma consulta de rotina, um exame ou um acompanhamento de longo prazo.',
    featured: true,
  },
  {
    icon: 'graduation-cap',
    title: 'Especialização cirúrgica',
    desc: 'Procedimentos como catarata e pterígio realizados com alta técnica e suporte completo em todas as etapas: do preparo à recuperação.',
  },
];

function DifferentialCard({ icon, title, desc, featured }) {
  return (
    <div style={{
      background: featured ? 'var(--brand-navy)' : 'var(--white)',
      border: featured ? 'none' : '1px solid var(--line-1)',
      borderRadius: 20,
      padding: '36px 32px',
      boxShadow: featured ? 'var(--shadow-cove)' : 'var(--shadow-glow)',
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
      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 = featured ? 'var(--shadow-lift)' : 'var(--shadow-card)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = featured ? 'var(--shadow-cove)' : 'var(--shadow-glow)'; }}>
      <div style={{
        width: 56, height: 56, borderRadius: 16,
        background: featured ? 'rgba(0,179,164,.18)' : 'var(--teal-050)',
        color: 'var(--brand-teal)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 30,
      }}>
        <i className={`ph ph-${icon}`} />
      </div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 21,
        color: featured ? '#fff' : 'var(--brand-navy)',
        margin: 0, letterSpacing: '-.01em',
      }}>{title}</h3>
      <p style={{
        fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65,
        color: featured ? 'rgba(255,255,255,.82)' : 'var(--fg-2)',
        margin: 0,
      }}>{desc}</p>
    </div>
  );
}

function Differentials() {
  const isMobile = useIsMobile();
  const [gridRef, inView] = useInView();
  return (
    <section style={{ padding: isMobile ? '64px 20px' : '96px 32px', background: 'var(--bg-page)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
          <Eyebrow>Por que nos escolher</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 42,
            color: 'var(--brand-navy)', margin: '4px 0 16px', letterSpacing: '-.01em',
          }}>Cuidado que vai além do diagnóstico</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
            A Cuidar dos Olhos une técnica especializada e um espaço pensado para o seu bem-estar.
          </p>
        </div>
        <div ref={gridRef} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 22 }}>
          {PILLARS.map((p, i) => (
            <Reveal key={p.title} show={inView} index={i} variant="fade" style={{ height: '100%' }}>
              <DifferentialCard {...p} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Differentials });