// ─────────────────────────────────────────────────────────
//  Dr. Dener Carolino – Landing Page 03 · Estilo Alef Douglas
// ─────────────────────────────────────────────────────────

const { useState, useEffect, useRef } = React;

const WA_LINK = "https://wa.me/5511968678888?text=Ol%C3%A1%2C%20gostaria%20de%20agendar%20uma%20consulta!";

// Paleta fiel ao oalefdouglas.com.br
const G         = '#4d7a3e';     // verde floresta
const G2        = '#3a6030';     // verde escuro (hover)
const GL        = '#eaf5e2';     // verde claro (fundo cards)
const HERO_BG   = '#f9ece7';     // fundo salmão/rosa hero
const FOOTER_BG = '#f0f5e8';     // creme footer
const T         = '#1a1a1a';
const T2        = '#666666';
const BG        = '#ffffff';

// ── Helpers ──────────────────────────────────────────────
function useInView(threshold = 0.12) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const check = () => {
      if (!ref.current) return false;
      const r = ref.current.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) { setVisible(true); return true; }
      return false;
    };
    setTimeout(() => {
      if (!check()) {
        const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold });
        if (ref.current) obs.observe(ref.current);
      }
    }, 50);
  }, []);
  return [ref, visible];
}

function Reveal({ children, delay = 0, style = {}, always = false }) {
  const [ref, v] = useInView();
  return (
    <div ref={ref} style={{
      opacity: (always || v) ? 1 : 0,
      transform: (always || v) ? 'translateY(0)' : 'translateY(22px)',
      transition: `opacity .6s ease ${delay}s, transform .6s ease ${delay}s`,
      ...style
    }}>{children}</div>
  );
}

function useIsMobile(bp = 768) {
  const [m, setM] = useState(() => window.innerWidth < bp);
  useEffect(() => {
    const fn = () => setM(window.innerWidth < bp);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, [bp]);
  return m;
}

// ── Navbar ───────────────────────────────────────────────
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const mobile = useIsMobile();
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      height: 70,
      padding: '0 5vw',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: '#fff',
      borderBottom: '1px solid #e0e0e0',
      boxShadow: scrolled ? '0 2px 14px rgba(0,0,0,.07)' : 'none',
      transition: 'box-shadow .3s'
    }}>
      <img src="assets/logo_nobg.png" alt="Dr. Dener Carolino"
        style={{ height: 50, width: 'auto' }} />

      <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 0 : 28 }}>
        {!mobile && ['Sobre','Método','Contato'].map(l => (
          <a key={l}
            href={`#${l.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '')}`}
            style={{
              fontSize: 12, fontWeight: 700, color: G,
              textDecoration: 'none', letterSpacing: 2,
              textTransform: 'uppercase',
              padding: '4px 0',
              borderBottom: '2px solid transparent',
              transition: 'border-color .2s'
            }}
            onMouseEnter={e => e.currentTarget.style.borderBottomColor = G}
            onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}
          >{l}</a>
        ))}
        <a href={WA_LINK} target="_blank" style={{
          marginLeft: mobile ? 0 : 6,
          padding: mobile ? '9px 18px' : '10px 24px',
          background: G, color: '#fff', borderRadius: 6,
          fontSize: 12, fontWeight: 700, textDecoration: 'none',
          letterSpacing: 1, textTransform: 'uppercase',
          transition: 'background .2s'
        }}
          onMouseEnter={e => e.currentTarget.style.background = G2}
          onMouseLeave={e => e.currentTarget.style.background = G}
        >Agendar</a>
      </div>
    </nav>
  );
}

// ── Hero (Carrossel) ─────────────────────────────────────
const SLIDES = [
  {
    tag: 'Nutrição Clínica · CRN3 93164',
    title: <>Nutrição que<br /><span style={{ color: G }}>transforma</span><br />de verdade.</>,
    desc: 'Acompanhamento nutricional individual, baseado em ciência e adaptado à sua vida. Presencial em São Paulo ou online de onde você estiver.',
    wa: 'Ol%C3%A1%2C%20gostaria%20de%20agendar%20uma%20consulta!'
  },
  {
    tag: 'Emagrecimento · CRN3 93164',
    title: <>Emagreça com<br /><span style={{ color: G }}>saúde</span><br />e sem sofrimento.</>,
    desc: 'Plano alimentar 100% personalizado, sem dietas restritivas. Você aprende a comer bem e mantém os resultados para sempre.',
    wa: 'Ol%C3%A1%2C%20gostaria%20de%20saber%20mais%20sobre%20emagrecimento!'
  },
  {
    tag: 'Saúde Metabólica · CRN3 93164',
    title: <>Controle sua<br /><span style={{ color: G }}>saúde</span><br />pela alimentação.</>,
    desc: 'Glicemia, colesterol e triglicerídeos equilibrados com nutrição clínica baseada em evidências. Cuide do seu corpo de dentro para fora.',
    wa: 'Ol%C3%A1%2C%20gostaria%20de%20saber%20mais%20sobre%20sa%C3%BAde%20metab%C3%B3lica!'
  },
  {
    tag: 'Atendimento Online · CRN3 93164',
    title: <>Consulta online<br /><span style={{ color: G }}>de onde</span><br />você estiver.</>,
    desc: 'Mesmo padrão de excelência clínica no atendimento presencial, agora acessível de qualquer cidade do Brasil pelo seu celular ou computador.',
    wa: 'Ol%C3%A1%2C%20gostaria%20de%20saber%20mais%20sobre%20atendimento%20online!'
  },
];

function Hero() {
  const mobile = useIsMobile();
  const [current, setCurrent] = useState(0);
  const [animating, setAnimating] = useState(false);
  const total = SLIDES.length;

  const goTo = (idx) => {
    if (animating) return;
    setAnimating(true);
    setTimeout(() => {
      setCurrent((idx + total) % total);
      setAnimating(false);
    }, 300);
  };

  useEffect(() => {
    const t = setInterval(() => goTo(current + 1), 6000);
    return () => clearInterval(t);
  }, [current]);

  const slide = SLIDES[current];

  return (
    <section style={{
      paddingTop: 70,
      minHeight: '92vh',
      background: HERO_BG,
      display: 'flex', alignItems: 'center',
      position: 'relative', overflow: 'hidden'
    }}>

      <div style={{
        maxWidth: 1200, margin: '0 auto', width: '100%',
        padding: mobile ? '60px 6vw 60px' : '80px 8vw',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        gap: mobile ? 48 : 60,
        alignItems: 'center',
        opacity: animating ? 0 : 1,
        transition: 'opacity .3s ease'
      }}>
        {/* Texto */}
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: 'rgba(255,255,255,.85)', borderRadius: 4,
            padding: '5px 14px', fontSize: 11, fontWeight: 700,
            color: G, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 28
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: G }} />
            {slide.tag}
          </div>

          <h1 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 900,
            fontSize: mobile ? '2.4rem' : 'clamp(2.9rem, 4.2vw, 4.6rem)',
            lineHeight: 1.08, color: T, marginBottom: 22,
            letterSpacing: '-2px'
          }}>{slide.title}</h1>

          <p style={{ fontSize: 16, lineHeight: 1.8, color: T2, maxWidth: 420, marginBottom: 36 }}>
            {slide.desc}
          </p>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href={`https://wa.me/5511968678888?text=${slide.wa}`} target="_blank" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 36px', background: G, color: '#fff',
              borderRadius: 6, fontSize: 14, fontWeight: 700,
              textDecoration: 'none', letterSpacing: 1,
              textTransform: 'uppercase', transition: 'background .2s'
            }}
              onMouseEnter={e => e.currentTarget.style.background = G2}
              onMouseLeave={e => e.currentTarget.style.background = G}
            >Agendar Consulta</a>
            {!mobile && (
              <a href="#sobre" style={{
                fontSize: 14, fontWeight: 600, color: G,
                textDecoration: 'none', letterSpacing: .5
              }}>Saiba mais &rarr;</a>
            )}
          </div>

          {/* Indicadores */}
          <div style={{ display: 'flex', gap: 8, marginTop: 40 }}>
            {SLIDES.map((_, i) => (
              <button key={i} onClick={() => goTo(i)} style={{
                width: i === current ? 24 : 8, height: 8,
                borderRadius: 50, border: 'none', cursor: 'pointer',
                background: i === current ? G : 'rgba(0,0,0,.2)',
                transition: 'all .3s', padding: 0
              }} />
            ))}
          </div>

          <div style={{
            display: 'flex', gap: 40, marginTop: 36,
            paddingTop: 32, borderTop: '1px solid rgba(0,0,0,.1)'
          }}>
            {[['500+', 'Pacientes atendidos'], ['5+', 'Anos de experiência'], ['100%', 'Personalizado']].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 30, fontWeight: 900, color: G, lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 12, color: T2, marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Foto */}
        <div style={{
          borderRadius: mobile ? '12px' : '16px',
          overflow: 'hidden',
          boxShadow: '0 24px 70px rgba(0,0,0,.18)',
          aspectRatio: '3/4'
        }}>
          <img src="assets/dr-denerval.png" alt="Dr. Dener Carolino"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
        </div>
      </div>
    </section>
  );
}

// ── Especialidades ───────────────────────────────────────
function Especialidades() {
  const mobile = useIsMobile();
  const items = [
    {
      label: 'Saúde & Bem-estar',
      href: 'saude-bem-estar.html',
      icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={G} strokeWidth="1.8"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
    },
    {
      label: 'Nutrição Clínica',
      href: 'nutricao-clinica.html',
      icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={G} strokeWidth="1.8"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7"/></svg>
    },
    {
      label: 'Emagrecimento',
      href: 'emagrecimento.html',
      icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={G} strokeWidth="1.8"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/><path d="M8 12h8M12 8v8"/></svg>
    },
    {
      label: 'Saúde Metabólica',
      href: 'saude-metabolica.html',
      icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={G} strokeWidth="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
    },
    {
      label: 'Atendimento Online',
      href: 'atendimento-online.html',
      icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={G} strokeWidth="1.8"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
    },
  ];
  return (
    <section style={{ padding: mobile ? '56px 6vw' : '72px 5vw', background: BG }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: mobile ? 'repeat(2,1fr)' : 'repeat(5,1fr)',
        gap: 16
      }}>
        {items.map(({ icon, label, href }, i) => (
          <Reveal key={label} delay={i * 0.08}>
            <a href={href} target="_blank" style={{
              display: 'block', textDecoration: 'none',
              background: GL, borderRadius: 10,
              padding: '36px 16px 28px',
              textAlign: 'center',
              cursor: 'pointer',
              transition: 'transform .2s, box-shadow .2s'
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = '0 12px 28px rgba(77,122,62,.14)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'center' }}>{icon}</div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: T, marginBottom: 14, lineHeight: 1.3 }}>{label}</div>
              <div style={{ fontSize: 12, color: G, fontWeight: 700, letterSpacing: .5 }}>
                Saiba mais &rsaquo;
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Artigos / Destaques ──────────────────────────────────
function Destaques() {
  const mobile = useIsMobile();
  const posts = [
    {
      tag: 'EMAGRECIMENTO',
      title: 'Como perder peso de forma saudável e definitiva',
      desc: 'Dietas restritivas não funcionam a longo prazo. Um plano nutricional individualizado transforma sua relação com a comida e gera resultados sustentáveis.',
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
    },
    {
      tag: 'NUTRIÇÃO CLÍNICA',
      title: 'Saúde metabólica real: além da estética',
      desc: 'Controle de glicemia, colesterol e triglicerídeos através da alimentação. O acompanhamento nutricional impacta diretamente sua saúde e qualidade de vida.',
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
    },
    {
      tag: 'ACOMPANHAMENTO',
      title: 'Suporte contínuo: a chave do seu resultado',
      desc: 'A consulta é apenas o começo. O acompanhamento entre sessões, os ajustes de plano e o suporte direto via WhatsApp fazem toda a diferença na sua jornada.',
      icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    },
  ];
  return (
    <section id="metodo" style={{ padding: mobile ? '70px 6vw' : '100px 5vw', background: BG }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Reveal>
          <h2 style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: mobile ? '1.6rem' : '2rem',
            fontWeight: 900, color: T,
            textTransform: 'uppercase', marginBottom: 40,
            letterSpacing: '-.5px'
          }}>
            <span style={{ color: G }}>SOBRE </span>O MÉTODO
          </h2>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)',
          gap: 24
        }}>
          {posts.map(({ tag, title, desc, icon }, i) => (
            <Reveal key={i} delay={i * 0.1}>
              <div style={{
                border: '1px solid #e5e5e5', borderRadius: 8,
                overflow: 'hidden', height: '100%',
                display: 'flex', flexDirection: 'column',
                transition: 'transform .2s, box-shadow .2s'
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.boxShadow = '0 16px 44px rgba(0,0,0,.1)'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
              >
                {/* Área da imagem */}
                <div style={{
                  height: 180, background: GL,
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  <div style={{
                    width: 64, height: 64, background: G, borderRadius: '50%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}>{icon}</div>
                </div>

                <div style={{ padding: '24px 24px 28px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: G, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 12 }}>{tag}</div>
                  <h3 style={{ fontSize: 17, fontWeight: 800, color: T, lineHeight: 1.35, marginBottom: 12, flex: 1 }}>{title}</h3>
                  <p style={{ fontSize: 13.5, color: T2, lineHeight: 1.75, marginBottom: 20 }}>{desc}</p>
                  <a href={WA_LINK} target="_blank" style={{
                    fontSize: 13, fontWeight: 700, color: G,
                    textDecoration: 'none', letterSpacing: .5,
                    display: 'inline-flex', alignItems: 'center', gap: 4
                  }}>AGENDAR &rsaquo;</a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <a href={WA_LINK} target="_blank" style={{
              display: 'inline-block',
              padding: '14px 48px',
              border: `2px solid ${G}`,
              borderRadius: 6, fontSize: 12, fontWeight: 700,
              color: G, textDecoration: 'none',
              letterSpacing: 2, textTransform: 'uppercase',
              transition: 'all .2s'
            }}
              onMouseEnter={e => { e.currentTarget.style.background = G; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = G; }}
            >AGENDAR CONSULTA</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Sobre / Bio ───────────────────────────────────────────
function Sobre() {
  const mobile = useIsMobile();
  return (
    <section id="sobre" style={{
      background: G,
      padding: mobile ? '80px 6vw 180px' : '100px 5vw 220px',
      borderRadius: '0 0 50% 50% / 0 0 120px 120px'
    }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1.3fr',
        gap: mobile ? 40 : 80,
        alignItems: 'center'
      }}>
        {/* Foto */}
        <Reveal delay={0.1}>
          <div style={{
            borderRadius: 12, overflow: 'hidden',
            aspectRatio: '3/4',
            boxShadow: '0 32px 80px rgba(0,0,0,.3)',
            maxWidth: 360, margin: mobile ? '0 auto' : '0'
          }}>
            <img src="assets/dr-denerval.png" alt="Dr. Dener Carolino"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
        </Reveal>

        {/* Texto */}
        <Reveal>
          <div style={{ color: '#fff' }}>
            <p style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', opacity: .7, marginBottom: 16 }}>
              Sobre o Dr. Dener
            </p>
            <h2 style={{
              fontFamily: 'Fraunces, serif', fontWeight: 700,
              fontSize: mobile ? '1.9rem' : 'clamp(1.9rem, 3.2vw, 2.8rem)',
              lineHeight: 1.2, marginBottom: 24, color: '#fff'
            }}>
              Mais de 5 anos dedicados à<br /><strong>nutrição clínica de verdade</strong>
            </h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.85, opacity: .85, marginBottom: 20 }}>
              Formado pela Universidade Uninove, com Pós-graduação em Nutrição Clínica e Hospitalar.
              Atua como nutricionista clínico com foco em acompanhamento individualizado e resultados
              sustentáveis, pautando cada decisão em <strong>estratégia, escuta ativa e ciência</strong>.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.85, opacity: .85, marginBottom: 36 }}>
              Com mais de <strong>500 pacientes atendidos</strong>, seu diferencial é unir rigor técnico
              com empatia, garantindo que cada pessoa entenda e execute seu plano alimentar com
              autonomia e confiança.
            </p>
            <a href={WA_LINK} target="_blank" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '13px 32px',
              border: '2px solid rgba(255,255,255,.65)',
              borderRadius: 6, fontSize: 13, fontWeight: 700,
              color: '#fff', textDecoration: 'none',
              letterSpacing: 1, textTransform: 'uppercase',
              transition: 'all .2s'
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,.15)'; e.currentTarget.style.borderColor = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,.65)'; }}
            >+ AGENDAR CONSULTA</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Depoimentos ───────────────────────────────────────────
function Depoimentos() {
  const mobile = useIsMobile();
  const deps = [
    { tag: 'PACIENTE · ONLINE', nome: 'Renato Alves', inicial: 'R', stars: 5, texto: 'Atendimento incrível, fez minha dieta na hora, individualizada e com várias opções. É a primeira vez que consigo falar com um Dr. direto pelo WhatsApp.' },
    { tag: 'PACIENTE · PRESENCIAL', nome: 'Patricia Dias', inicial: 'P', stars: 5, texto: 'Incrível! Isso que é dinheiro bem investido. Profissional experiente e extremamente capacitado. Recomendo de olhos fechados.' },
    { tag: 'SEU DEPOIMENTO', nome: 'Em breve...', inicial: '?', stars: 5, texto: 'À medida que mais pacientes obtêm resultados, seus relatos serão compartilhados aqui.', muted: true },
  ];
  return (
    <section style={{ padding: mobile ? '70px 6vw' : '100px 5vw', background: BG }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Reveal>
          <h2 style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: mobile ? '1.6rem' : '2rem',
            fontWeight: 900, color: T,
            textTransform: 'uppercase', marginBottom: 40,
            letterSpacing: '-.5px'
          }}>
            <span style={{ color: G }}>O QUE OS </span>PACIENTES DIZEM
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 24 }}>
          {deps.map(({ tag, nome, inicial, stars, texto, muted }, i) => (
            <Reveal key={i} delay={i * 0.1}>
              <div style={{
                border: '1px solid #e5e5e5', borderRadius: 8,
                overflow: 'hidden', height: '100%',
                opacity: muted ? 0.45 : 1,
                transition: muted ? 'none' : 'transform .2s, box-shadow .2s'
              }}
                onMouseEnter={e => { if (!muted) { e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.boxShadow = '0 14px 40px rgba(0,0,0,.09)'; } }}
                onMouseLeave={e => { if (!muted) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; } }}
              >
                {/* Header avatar strip */}
                <div style={{ background: GL, padding: '28px 24px', display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 52, height: 52, borderRadius: '50%', background: G, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, fontWeight: 700, flexShrink: 0 }}>{inicial}</div>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 800, color: T }}>{nome}</div>
                    <div style={{ color: '#f59e0b', fontSize: 16, marginTop: 2, letterSpacing: 1 }}>{'★'.repeat(stars)}</div>
                  </div>
                </div>

                <div style={{ padding: '24px 24px 28px' }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: G, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 14 }}>{tag}</div>
                  <p style={{ fontSize: 14.5, color: T2, lineHeight: 1.75, fontStyle: 'italic', marginBottom: 20 }}>"{texto}"</p>
                  {!muted && (
                    <a href={WA_LINK} target="_blank" style={{ fontSize: 13, fontWeight: 700, color: G, textDecoration: 'none', letterSpacing: .5 }}>
                      QUERO MEU PLANO &rsaquo;
                    </a>
                  )}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Preços ───────────────────────────────────────────────
function Precos() {
  const mobile = useIsMobile();
  return (
    <section id="precos" style={{ padding: mobile ? '70px 6vw' : '100px 5vw', background: GL }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        <Reveal>
          <h2 style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: mobile ? '1.6rem' : '2rem',
            fontWeight: 900, color: T,
            textTransform: 'uppercase', marginBottom: 12,
            letterSpacing: '-.5px'
          }}>
            <span style={{ color: G }}>NOSSOS </span>PLANOS
          </h2>
          <p style={{ fontSize: 15, color: T2, marginBottom: 48 }}>Escolha o plano que melhor se encaixa nos seus objetivos.</p>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 24, textAlign: 'left' }}>
          {[
            {
              nome: 'Consulta Avulsa', preco: 'R$ 250', periodo: 'por consulta',
              itens: ['Avaliação nutricional completa', 'Orientações personalizadas', 'Plano alimentar individualizado', 'Online ou presencial'],
              dest: false
            },
            {
              nome: 'Plano Trimestral', preco: 'R$ 620', periodo: 'ou 3x de R$ 217',
              badge: 'Mais escolhido',
              itens: ['3 meses de acompanhamento', 'Consultas regulares', 'Ajustes contínuos do plano', 'Suporte via WhatsApp', 'Materiais e site exclusivos', 'Online ou presencial'],
              dest: true
            },
          ].map(({ nome, preco, periodo, dest, badge, itens }) => (
            <Reveal key={nome} delay={dest ? 0.1 : 0}>
              <div style={{
                background: BG, borderRadius: 8, padding: '36px 28px',
                position: 'relative',
                border: `2px solid ${dest ? G : '#e0e0e0'}`,
                boxShadow: dest ? '0 12px 40px rgba(77,122,62,.15)' : '0 2px 8px rgba(0,0,0,.04)',
                height: '100%'
              }}>
                {badge && (
                  <div style={{
                    position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                    background: G, color: '#fff', borderRadius: 50,
                    padding: '4px 20px', fontSize: 11, fontWeight: 700,
                    letterSpacing: 1, textTransform: 'uppercase', whiteSpace: 'nowrap'
                  }}>{badge}</div>
                )}
                <div style={{ fontSize: 11, fontWeight: 700, color: T2, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 12 }}>{nome}</div>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 44, fontWeight: 900, color: T, letterSpacing: '-2px', lineHeight: 1 }}>{preco}</div>
                <div style={{ fontSize: 13, color: T2, marginTop: 6, marginBottom: 28 }}>{periodo}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
                  {itens.map(item => (
                    <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: T }}>
                      <span style={{ color: G, fontWeight: 800, fontSize: 15 }}>&#10003;</span> {item}
                    </div>
                  ))}
                </div>
                <a href={WA_LINK} target="_blank" style={{
                  display: 'block', textAlign: 'center', padding: '14px',
                  borderRadius: 6, fontSize: 12, fontWeight: 700,
                  letterSpacing: 1.5, textTransform: 'uppercase',
                  textDecoration: 'none', transition: 'all .2s',
                  background: dest ? G : 'transparent',
                  color: dest ? '#fff' : T,
                  border: dest ? 'none' : `2px solid ${T2}`
                }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = '.82'; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}
                >QUERO ESTE PLANO</a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = useState(null);
  const mobile = useIsMobile();
  const faqs = [
    { q: 'Como funciona a primeira consulta?', a: 'A consulta inicial dura aproximadamente 1h30. Fazemos uma imersão clínica completa: histórico alimentar, objetivos, avaliação da composição corporal e definição do plano alimentar personalizado.' },
    { q: 'O atendimento online tem o mesmo resultado?', a: 'Sim! O atendimento online segue o mesmo padrão de excelência clínica. A diferença está apenas no método de avaliação corporal: online utilizamos medidas, fotos e peso.' },
    { q: 'Com que frequência terei consultas?', a: 'No plano trimestral, as consultas são agendadas de acordo com sua evolução e necessidades. O suporte contínuo via WhatsApp garante acompanhamento entre as sessões.' },
    { q: 'Posso ajustar o plano alimentar durante o acompanhamento?', a: 'Com certeza. O plano é ajustado continuamente conforme sua evolução, preferências, rotina e resultados. Flexibilidade é um dos pilares do nosso método.' },
    { q: 'Como funciona o suporte via WhatsApp?', a: 'Você tem acesso direto ao Dr. Dener para dúvidas, ajustes de urgência e motivação no dia a dia, sem precisar esperar a próxima consulta.' },
  ];
  return (
    <section style={{ padding: mobile ? '70px 6vw' : '100px 5vw', background: BG }}>
      <div style={{ maxWidth: 740, margin: '0 auto' }}>
        <Reveal>
          <h2 style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: mobile ? '1.6rem' : '2rem',
            fontWeight: 900, color: T,
            textTransform: 'uppercase', marginBottom: 44,
            letterSpacing: '-.5px'
          }}>
            <span style={{ color: G }}>PERGUNTAS </span>FREQUENTES
          </h2>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {faqs.map(({ q, a }, i) => (
            <Reveal key={i} delay={i * 0.05}>
              <div style={{
                borderRadius: 8, overflow: 'hidden',
                border: `1px solid ${open === i ? G : '#e5e5e5'}`,
                transition: 'border-color .2s'
              }}>
                <button onClick={() => setOpen(open === i ? null : i)} style={{
                  width: '100%', background: open === i ? GL : '#fff',
                  border: 'none', cursor: 'pointer', padding: '18px 22px',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  transition: 'background .2s'
                }}>
                  <span style={{ fontSize: 15, fontWeight: 600, color: T, textAlign: 'left' }}>{q}</span>
                  <span style={{ fontSize: 22, color: G, fontWeight: 300, flexShrink: 0, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform .3s' }}>+</span>
                </button>
                <div style={{ maxHeight: open === i ? 200 : 0, overflow: 'hidden', transition: 'max-height .35s ease' }}>
                  <p style={{ padding: '0 22px 20px', fontSize: 14, color: T2, lineHeight: 1.8 }}>{a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Contato / CTA ─────────────────────────────────────────
function Contato() {
  const mobile = useIsMobile();
  return (
    <section id="contato" style={{ padding: mobile ? '80px 6vw' : '110px 5vw', background: G }}>
      <Reveal>
        <div style={{ maxWidth: 620, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,.65)', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Vamos começar?</div>
          <h2 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 700,
            fontSize: mobile ? '2.2rem' : 'clamp(2.2rem, 4.5vw, 3.4rem)',
            color: '#fff', lineHeight: 1.1, marginBottom: 20, letterSpacing: '-1px'
          }}>
            Sua jornada de<br />saúde começa hoje.
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,.78)', marginBottom: 42, lineHeight: 1.7 }}>
            Agende sua consulta e dê o primeiro passo para uma nutrição que realmente funciona para você.
          </p>
          <a href={WA_LINK} target="_blank" style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '16px 44px', background: '#fff', color: G,
            borderRadius: 50, fontSize: 14, fontWeight: 700,
            textDecoration: 'none', letterSpacing: .5, transition: 'all .2s'
          }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,.2)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
            Agendar via WhatsApp
          </a>
          <div style={{ marginTop: 28, fontSize: 13, color: 'rgba(255,255,255,.55)' }}>
            Instituto Atos · Av. Francisco Matarazzo, 1752, Cj 505 · Água Branca, SP
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────
function Footer() {
  const mobile = useIsMobile();
  const navLinks = [
    { label: 'Sobre', id: 'sobre' },
    { label: 'Método', id: 'metodo' },
    { label: 'Preços', id: 'precos' },
    { label: 'Contato', id: 'contato' },
  ];

  const SocialBtn = ({ href, children }) => (
    <a href={href} target="_blank" style={{
      width: 40, height: 40, background: G, borderRadius: 7,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      textDecoration: 'none', transition: 'background .2s'
    }}
      onMouseEnter={e => e.currentTarget.style.background = G2}
      onMouseLeave={e => e.currentTarget.style.background = G}
    >{children}</a>
  );

  return (
    <footer style={{ background: FOOTER_BG }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        padding: mobile ? '50px 6vw 40px' : '60px 5vw 40px',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.5fr 1fr 1fr',
        gap: 40,
        paddingBottom: 40,
        borderBottom: '1px solid #d5e8c8'
      }}>
        {/* Logo */}
        <div>
          <img src="assets/logo_nobg.png" alt="Dr. Dener Carolino"
            style={{ height: 58, width: 'auto', marginBottom: 16 }} />
          <p style={{ fontSize: 13, color: T2, lineHeight: 1.7 }}>
            Nutricionista Clínico<br />
            CRN3 93164 · Instituto Atos<br />
            São Paulo, SP
          </p>
        </div>

        {/* Links */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 800, color: T, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Navegação</div>
          {navLinks.map(({ label, id }) => (
            <a key={id} href={`#${id}`} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 14, color: T2, textDecoration: 'none',
              marginBottom: 10, transition: 'color .2s'
            }}
              onMouseEnter={e => e.currentTarget.style.color = G}
              onMouseLeave={e => e.currentTarget.style.color = T2}
            >
              <span style={{ color: G, fontSize: 16 }}>&rsaquo;</span> {label}
            </a>
          ))}
        </div>

        {/* Social */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 800, color: T, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Siga-nos</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <SocialBtn href="https://instagram.com">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r=".5" fill="#fff" /></svg>
            </SocialBtn>
            <SocialBtn href={WA_LINK}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
            </SocialBtn>
            <SocialBtn href="https://youtube.com">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z" /></svg>
            </SocialBtn>
          </div>
        </div>
      </div>

      <div style={{ padding: '20px 5vw', textAlign: 'center' }}>
        <div style={{ fontSize: 13, color: T2 }}>
          © Copyright 2026 Dr. Dener Carolino. Todos os direitos reservados.
        </div>
      </div>
    </footer>
  );
}

// ── App ──────────────────────────────────────────────────
function App() {
  return (
    <div>
      <Navbar />
      <Hero />
      <Especialidades />
      <Destaques />
      <Sobre />
      <Depoimentos />
      <FAQ />
      <Contato />
      <Footer />
    </div>
  );
}