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

const SERVICES = [
  { icon: 'eye',             title: 'Consulta oftalmológica', desc: 'Avaliação completa com ênfase em acolhimento e escuta.', feat: true },
  { icon: 'magnifying-glass',title: 'Mapeamento de retina',   desc: 'Exame detalhado do fundo do olho para diagnóstico precoce.' },
  { icon: 'scan',            title: 'Tonometria',             desc: 'Medição da pressão intraocular para prevenção do glaucoma.' },
  { icon: 'eyedropper',      title: 'Exames complementares',  desc: 'Potencial de Acuidade Macular (PAM), Teste de Sobrecarga Hídrica (TSH) e Gonioscopia.' },
  { icon: 'baby',            title: 'Oftalmologia infantil',  desc: 'Atendimento especializado desde os primeiros anos.' },
  { icon: 'syringe',         title: 'Procedimentos cirúrgicos', desc: 'Catarata, pterígio e outros, com a mais alta técnica.' },
];

function ServiceCard({ icon, title, desc, feat }) {
  return (
    <div style={{
      background: 'var(--white)',
      border: '1px solid var(--line-1)',
      borderRadius: 16,
      padding: 28,
      boxShadow: feat ? 'var(--shadow-cove)' : 'var(--shadow-glow)',
      borderTop: '2px solid var(--brand-teal)',
      height: '100%',
      boxSizing: 'border-box',
      transition: 'all .18s ease',
      cursor: 'pointer',
    }}
      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 = feat ? 'var(--shadow-cove)' : 'var(--shadow-glow)'; }}>
      <div style={{
        width: 52, height: 52, borderRadius: 14,
        background: 'var(--teal-050)', color: 'var(--brand-teal)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 28, marginBottom: 18,
      }}><i className={`ph ph-${icon}`} /></div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20,
        color: 'var(--brand-navy)', margin: '0 0 8px',
      }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 }}>{desc}</p>
    </div>
  );
}

function ServicesGrid() {
  const isMobile = useIsMobile();
  const [gridRef, inView] = useInView();
  return (
    <section id="service" style={{ background: 'var(--cream-100)', padding: isMobile ? '64px 20px' : '96px 32px', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/ChatGPT%20Image%2021_06_2026%2C%2017_55_26.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.07,
      }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
          <Eyebrow>Serviços</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 42,
            color: 'var(--brand-navy)', margin: '4px 0 16px', letterSpacing: '-.01em',
          }}>Cuidado completo para cada olhar</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
            Exames de rotina a alta complexidade, com acompanhamento contínuo e tecnologia de ponta.
          </p>
        </div>
        <div ref={gridRef} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
          {SERVICES.map((s, i) => (
            <Reveal key={s.title} show={inView} index={i} variant="pop" style={{ height: '100%' }}>
              <ServiceCard {...s} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesGrid, ServiceCard });