/* All sections for the Palmilha Inteligente site */
const { useState, useEffect, useRef } = React;

// ====== Dados oficiais da marca (manual + Google Business) ======
const CONTACT = {
  phoneDigits: '5516992166444', // WhatsApp (16) 99216-6444 — Ribeirão Preto/SP
  phoneDisplay: '(16) 99216-6444',
  email: 'contato@palmilhainteligente.com.br',
  site: 'palmilhainteligente.com.br',
  siteUrl: 'https://palmilhainteligente.com.br',
  instagram: 'https://instagram.com/palmilhainteligentebrasil',
  instagramHandle: '@palmilhainteligentebrasil',
  facebook: 'https://facebook.com/palmilhainteligente',
  addressLine1: 'R. Floriano Peixoto, 1071 — Sala 05',
  addressLine2: 'Centro · Ribeirão Preto — SP · 14010-200',
  mapsUrl: 'https://www.google.com/maps/search/?api=1&query=Palmilha+Inteligente+R.+Floriano+Peixoto+1071+Ribeir%C3%A3o+Preto',
  hoursWeek: 'Seg a Sex · 09h às 18h',
  hoursSat: 'Sábado · 09h às 13h'
};
const WHATSAPP_URL = `https://wa.me/${CONTACT.phoneDigits}?text=Ol%C3%A1!%20Quero%20agendar%20minha%20avalia%C3%A7%C3%A3o%20da%20Palmilha%20Inteligente.`;

// ============================================================
// Header
// ============================================================
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
  ['Início', '#top'], ['Benefícios', '#beneficios'], ['Como funciona', '#como-funciona'],
  ['Tecnologia', '#tecnologia'], ['Depoimentos', '#depoimentos'], ['FAQ', '#faq'], ['Contato', '#contato']];

  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/85 backdrop-blur-lg border-b border-ink-100 shadow-soft' : 'bg-transparent'}`}>
      <div className="max-w-7xl mx-auto px-5 lg:px-8 h-[68px] flex items-center justify-between">
        <Logo />
        <nav className="hidden lg:flex items-center gap-1">
          {links.map(([label, href]) =>
          <a key={href} href={href} className="px-3 py-2 text-[13.5px] font-medium text-ink-700 hover:text-petrol transition-colors relative group">
              {label}
              <span className="absolute left-3 right-3 -bottom-0.5 h-px bg-turq-500 origin-left scale-x-0 group-hover:scale-x-100 transition-transform"></span>
            </a>
          )}
        </nav>
        <div className="flex items-center gap-2">
          <Button href={WHATSAPP_URL} target="_blank" size="sm" variant="primary" className="hidden sm:inline-flex" icon={<Icon name="arrow" size={14} />}>
            Agendar avaliação
          </Button>
          <button aria-label="Menu" onClick={() => setOpen(true)} className="lg:hidden p-2 rounded-full border border-ink-200 text-petrol">
            <Icon name="menu" size={20} />
          </button>
        </div>
      </div>
      {/* Mobile menu */}
      <div className={`lg:hidden fixed inset-0 z-50 transition-opacity duration-300 ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
        <div className="absolute inset-0 bg-petrol-900/50 backdrop-blur-sm" onClick={() => setOpen(false)}></div>
        <div className={`absolute top-0 right-0 bottom-0 w-[88%] max-w-sm bg-white shadow-2xl flex flex-col transition-transform duration-300 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
          <div className="flex items-center justify-between px-5 h-[68px] border-b border-ink-100">
            <Logo />
            <button aria-label="Fechar" onClick={() => setOpen(false)} className="p-2 rounded-full border border-ink-200 text-petrol">
              <Icon name="x" size={18} />
            </button>
          </div>
          <nav className="flex-1 overflow-y-auto p-4 flex flex-col">
            {links.map(([label, href]) =>
            <a key={href} href={href} onClick={() => setOpen(false)} className="px-3 py-3.5 text-[15px] font-medium text-ink-900 border-b border-ink-100 flex items-center justify-between">
                {label}<Icon name="arrow" size={14} className="text-ink-300" />
              </a>
            )}
          </nav>
          <div className="p-4 border-t border-ink-100">
            <Button href={WHATSAPP_URL} target="_blank" variant="primary" className="w-full" icon={<Icon name="whatsapp" size={16} />}>
              Agendar avaliação
            </Button>
          </div>
        </div>
      </div>
    </header>);

}

// ============================================================
// Hero
// ============================================================
function Hero() {
  const seals = [
  { icon: 'heart', label: 'Conforto personalizado' },
  { icon: 'cpu', label: 'Tecnologia aplicada' },
  { icon: 'sparkle', label: 'Mais qualidade de vida' }];

  return (
    <section id="top" className="relative pt-32 lg:pt-36 pb-20 lg:pb-28 overflow-hidden bg-grad-hero">
      {/* Background grid */}
      <div className="absolute inset-0 bg-grid opacity-40 pointer-events-none" style={{ maskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 75%)', WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 75%)' }}></div>
      <div className="absolute -top-40 -right-40 w-[480px] h-[480px] rounded-full bg-turq-100 blur-3xl opacity-60 pointer-events-none"></div>

      <div className="relative max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-12 gap-12 items-center">
        <div className="lg:col-span-7">
          <Reveal>
            <div className="inline-flex items-center gap-2 pl-1 pr-3 py-1 rounded-full bg-white border border-ink-100 shadow-soft">
              <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-turq-100 text-petrol">
                <Icon name="sparkle" size={12} />
              </span>
              <span className="text-[11px] tracking-[0.16em] uppercase font-semibold text-petrol">Você, livre das dores</span>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <h1 className="mt-6 font-display font-bold text-[clamp(36px,6vw,68px)] leading-[1.02] text-ink-900 tracking-[-0.02em]">
              Palmilha Inteligente <br className="hidden sm:block" />
              para você viver <span className="relative inline-block">
                <span className="relative z-10 bg-clip-text text-transparent bg-grad-turq">livre das dores</span>
                <svg className="absolute -bottom-2 left-0 w-full" height="12" viewBox="0 0 300 12" preserveAspectRatio="none"><path d="M2 8 Q 80 2, 150 6 T 298 5" stroke="#1EC7E6" strokeWidth="3" fill="none" strokeLinecap="round" /></svg>
              </span>
            </h1>
          </Reveal>

          <Reveal delay={2}>
            <p className="mt-7 text-[17px] lg:text-[19px] leading-relaxed text-ink-500 max-w-xl">
              Tecnologia, conforto e precisão para melhorar sua postura, mobilidade e qualidade de vida em cada passo.
            </p>
          </Reveal>

          <Reveal delay={3}>
            <div className="mt-9 flex flex-wrap gap-3">
              <Button href={WHATSAPP_URL} target="_blank" variant="primary" size="lg" icon={<Icon name="whatsapp" size={18} />}>
                Agendar avaliação pelo WhatsApp
              </Button>
              <Button href="#beneficios" variant="ghost" size="lg" icon={<Icon name="arrow" size={16} />}>
                Conhecer benefícios
              </Button>
            </div>
          </Reveal>

          <Reveal delay={4}>
            <div className="mt-10 flex flex-wrap gap-x-6 gap-y-3">
              {seals.map((s) =>
              <div key={s.label} className="flex items-center gap-2.5">
                  <span className="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white border border-ink-100 text-petrol shadow-soft">
                    <Icon name={s.icon} size={16} />
                  </span>
                  <span className="text-[13px] font-semibold text-ink-700">{s.label}</span>
                </div>
              )}
            </div>
          </Reveal>

          {/* Mini metrics row */}
          <Reveal delay={5}>
            <div className="mt-12 flex items-center gap-6 pt-6 border-t border-ink-100 max-w-md">
              <div>
                <div className="flex items-center gap-1">
                  {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={14} className="text-amber-400" />)}
                </div>
                <div className="text-[12px] text-ink-500 mt-1">Atendimento avaliado pelos pacientes</div>
              </div>
              <div className="h-10 w-px bg-ink-100"></div>
              <div>
                <div className="font-display font-bold text-[20px] text-petrol leading-none">+14.000</div>
                <div className="text-[12px] text-ink-500 mt-1">pessoas atendidas</div>
              </div>
            </div>
          </Reveal>
        </div>

        <div className="lg:col-span-5">
          <Reveal delay={2}>
            <div className="relative animate-float">
              <FootScan withScan />
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ============================================================
// Problem
// ============================================================
function Problem() {
  const items = [
  { icon: 'foot', title: 'Dor nos pés', desc: 'Sobrecarga e desconforto que comprometem cada passo do seu dia.' },
  { icon: 'knee', title: 'Dor nos joelhos', desc: 'Alinhamento inadequado pode gerar impacto e tensão no joelho.' },
  { icon: 'spine', title: 'Dor lombar', desc: 'A pisada influencia toda a cadeia muscular até a sua coluna.' },
  { icon: 'walk', title: 'Cansaço ao caminhar', desc: 'Distribuição desigual de pressão gera fadiga precoce nas pernas.' },
  { icon: 'posture', title: 'Má postura', desc: 'Pequenos desalinhamentos no apoio afetam a postura global.' },
  { icon: 'activity', title: 'Baixo desempenho', desc: 'Sem apoio adequado, o corpo perde eficiência em cada movimento.' },
  { icon: 'foot', title: 'Esporão de calcâneo', desc: 'Dor aguda no calcanhar causada por sobrecarga e impacto repetitivo.' },
  { icon: 'scan', title: 'Fascite plantar', desc: 'Inflamação da sola do pé que provoca dor logo nos primeiros passos.' },
  { icon: 'target', title: 'Metatarsalgia', desc: 'Dor e ardência na região do antepé por má distribuição de pressão.' }];

  return (
    <section id="problema" className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="O que talvez você sinta"
          title={<>Dores nos pés, tornozelos joelhos, quadril, coluna ou má postura <br className="hidden md:block" />podem começar pela <span className="text-accent">pisada</span></>}
          lede="Uma pisada desalinhada gera sobrecarga, desconforto e limitações que se acumulam no dia a dia — muitas vezes sem você perceber a origem." />
        
        <div className="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((it, i) =>
          <Reveal key={it.title} delay={i % 3 + 1}>
              <div className="group relative h-full p-7 bg-white rounded-2xl border border-ink-100 shadow-soft hover:shadow-hover hover:-translate-y-1 transition-all duration-300">
                <div className="flex items-center gap-4">
                  <div className="relative">
                    <span className="absolute inset-0 rounded-2xl bg-accent-50 -rotate-3 group-hover:-rotate-6 transition-transform"></span>
                    <span className="relative inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-white border border-ink-100 text-accent">
                      <Icon name={it.icon} size={22} />
                    </span>
                  </div>
                  <h3 className="font-display font-semibold text-[18px] text-ink-900">{it.title}</h3>
                </div>
                <p className="mt-5 text-[14.5px] leading-relaxed text-ink-500">{it.desc}</p>
                <div className="mt-6 h-px w-full bg-gradient-to-r from-accent/40 via-ink-100 to-transparent"></div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Solution
// ============================================================
function Solution() {
  const items = [
  { icon: 'shield', title: 'Alívio de dores', desc: 'Apoio que contribui para reduzir desconfortos a cada passo.' },
  { icon: 'heart', title: 'Mais conforto ao caminhar', desc: 'Sensação de leveza e bem-estar prolongado durante o uso.' },
  { icon: 'target', title: 'Apoio personalizado', desc: 'Construída a partir das características do seu próprio pé.' },
  { icon: 'layers', title: 'Melhor distribuição de pressão', desc: 'Distribui melhor o impacto em toda a superfície plantar.' },
  { icon: 'balance', title: 'Mais estabilidade', desc: 'Apoio anatômico que auxilia o equilíbrio em cada passo.' },
  { icon: 'sparkle', title: 'Qualidade de vida', desc: 'Mais disposição para o que importa: viver com qualidade. -Bem estar diário!' }];

  return (
    <section id="solucao" className="relative py-24 lg:py-32 bg-ink-50 overflow-hidden">
      <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[800px] h-[800px] rounded-full bg-turq-100 blur-3xl opacity-40 pointer-events-none"></div>
      <div className="relative max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="A solução"
          title={<>A Palmilha Inteligente ajuda seu corpo a <br className="hidden md:block" />encontrar mais <span className="text-petrol">equilíbrio</span></>}
          lede="Com uma abordagem personalizada, a palmilha contribui para distribuir melhor a pressão, trazer mais conforto e auxiliar na mobilidade." />
        
        <div className="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((it, i) =>
          <Reveal key={it.title} delay={i % 3 + 1}>
              <div className="group relative h-full p-7 rounded-2xl bg-white border border-white shadow-card hover:shadow-hover hover:-translate-y-1 transition-all duration-300 overflow-hidden">
                <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-turq-100/60 blur-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div className="relative">
                  <span className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-grad-turq text-white shadow-[0_8px_22px_-8px_rgba(30,199,230,0.6)]">
                    <Icon name={it.icon} size={22} />
                  </span>
                  <h3 className="mt-5 font-display font-semibold text-[19px] text-ink-900">{it.title}</h3>
                  <p className="mt-3 text-[14.5px] leading-relaxed text-ink-500">{it.desc}</p>
                  <div className="mt-6 inline-flex items-center gap-1.5 text-[12px] font-semibold text-petrol opacity-70 group-hover:opacity-100 transition-opacity">
                    <Icon name="check" size={14} /> Sentido em poucos dias
                  </div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// How it works (4 steps)
// ============================================================
function HowItWorks() {
  const steps = [
  { n: '01', icon: 'phone', title: 'Avaliação da necessidade', desc: 'Conversamos sobre suas dores, rotina, calçados e objetivos.' },
  { n: '02', icon: 'scan', title: 'Análise da pisada', desc: 'Mapeamos pontos de pressão e características do seu pé.' },
  { n: '03', icon: 'target', title: 'Indicação da palmilha', desc: 'Apresentamos a solução ideal para o seu perfil específico.' },
  { n: '04', icon: 'heart', title: 'Acompanhamento', desc: 'Suporte na adaptação e ajustes para um resultado consistente.' }];

  return (
    <section id="como-funciona" className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Como funciona"
          title={<>Quatro passos simples para você <br className="hidden md:block" />começar a sentir a diferença</>}
          lede="Um processo claro, acolhedor e baseado em análise — do diagnóstico ao acompanhamento personalizado." />
        
        <div className="mt-16 relative">
          {/* Connecting line for desktop */}
          <div className="hidden lg:block absolute top-[58px] left-[8%] right-[8%] h-px bg-gradient-to-r from-transparent via-turq-500/40 to-transparent"></div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
            {steps.map((s, i) =>
            <Reveal key={s.n} delay={i + 1}>
                <div className="relative text-center group">
                  <div className="relative mx-auto w-28 h-28 mb-6">
                    <div className="absolute inset-0 rounded-full bg-grad-soft border border-ink-100 group-hover:border-turq-500/40 transition-colors"></div>
                    <div className="absolute inset-2 rounded-full bg-white border border-ink-100"></div>
                    <div className="absolute inset-0 flex items-center justify-center text-petrol">
                      <Icon name={s.icon} size={36} strokeWidth={1.6} />
                    </div>
                    <div className="absolute -top-2 -right-2 w-9 h-9 rounded-full bg-grad-turq text-white flex items-center justify-center font-display font-bold text-[12px] shadow-[0_8px_18px_-6px_rgba(30,199,230,0.6)]">
                      {s.n}
                    </div>
                  </div>
                  <h3 className="font-display font-semibold text-[17px] text-ink-900">{s.title}</h3>
                  <p className="mt-2.5 text-[14px] leading-relaxed text-ink-500 max-w-[26ch] mx-auto">{s.desc}</p>
                  {i < steps.length - 1 &&
                <div className="lg:hidden mt-4 flex justify-center">
                      <Icon name="chev" size={18} className="text-ink-300" />
                    </div>
                }
                </div>
              </Reveal>
            )}
          </div>
        </div>

        <Reveal delay={5}>
          <div className="mt-16 flex justify-center">
            <Button href={WHATSAPP_URL} target="_blank" variant="petrol" size="lg" icon={<Icon name="arrow" size={16} />}>
              Começar minha avaliação
            </Button>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ============================================================
// Technology (dark, hi-tech)
// ============================================================
function Technology() {
  const features = [
  { icon: 'scan', title: 'Mapeamento da pisada', desc: 'Análise dos pontos de apoio para entender sua biomecânica.' },
  { icon: 'layers', title: 'Distribuição de pressão', desc: 'Equilíbrio entre antepé, arco e calcâneo para mais conforto.' },
  { icon: 'foot', title: 'Design anatômico', desc: 'Modelagem que respeita as curvas naturais do seu pé.' },
  { icon: 'heart', title: 'Materiais confortáveis', desc: 'Camadas técnicas selecionadas para um uso prolongado.' },
  { icon: 'target', title: 'Precisão e personalização', desc: 'Cada palmilha é única — feita para o seu corpo, sua rotina.' }];

  return (
    <section id="tecnologia" className="relative py-24 lg:py-32 bg-grad-petrol overflow-hidden text-white">
      {/* Backdrop graphics */}
      <div className="absolute inset-0 bg-grid opacity-[0.08]"></div>
      <div className="absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full bg-turq-500/20 blur-3xl pointer-events-none"></div>
      <div className="absolute -bottom-40 -left-40 w-[500px] h-[500px] rounded-full bg-turq-500/15 blur-3xl pointer-events-none"></div>

      <div className="relative max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-12 gap-12 items-center">
        <div className="lg:col-span-5 order-2 lg:order-1">
          <Reveal>
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/15 text-turq-500">
              <span className="w-1.5 h-1.5 rounded-full bg-turq-500 animate-pulse"></span>
              <span className="text-[11px] tracking-[0.18em] uppercase font-semibold">Tecnologia aplicada</span>
            </div>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="mt-5 font-display font-semibold text-[clamp(28px,4.4vw,46px)] leading-[1.05]">
              Tecnologia <span className="text-turq-500">inteligente</span> a favor da sua mobilidade
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="mt-5 text-[16px] leading-relaxed text-white/70 max-w-md">
              Cada palmilha nasce de um processo cuidadoso que combina análise da pisada, design anatômico e materiais selecionados para acompanhar você no dia a dia.
            </p>
          </Reveal>

          <div className="mt-8 space-y-3">
            {features.map((f, i) =>
            <Reveal key={f.title} delay={i % 3 + 1}>
                <div className="group flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04] border border-white/10 hover:bg-white/[0.07] hover:border-turq-500/40 transition-all">
                  <span className="shrink-0 inline-flex items-center justify-center w-11 h-11 rounded-xl bg-turq-500/15 text-turq-500 border border-turq-500/30">
                    <Icon name={f.icon} size={20} />
                  </span>
                  <div>
                    <div className="font-display font-semibold text-[15px]">{f.title}</div>
                    <div className="text-[13.5px] text-white/65 mt-1 leading-relaxed">{f.desc}</div>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>

        <div className="lg:col-span-7 order-1 lg:order-2">
          <Reveal delay={2}>
            <InsoleTech />
          </Reveal>
        </div>
      </div>
    </section>);

}

// ============================================================
// Benefits
// ============================================================
function Benefits() {
  const items = [
  { icon: 'shield', title: 'Redução de desconfortos', desc: 'Apoio que auxilia na diminuição de incômodos do dia a dia.' },
  { icon: 'posture', title: 'Melhora da postura', desc: 'Contribui para um alinhamento mais natural do corpo.' },
  { icon: 'balance', title: 'Mais estabilidade', desc: 'Apoio firme que ajuda você a se sentir mais seguro ao caminhar.' },
  { icon: 'heart', title: 'Conforto prolongado', desc: 'Sensação de bem-estar durante longas jornadas em pé.' },
  { icon: 'activity', title: 'Apoio para atividades', desc: 'Mais suporte para suas tarefas e movimentos diários.' },
  { icon: 'sparkle', title: 'Mais confiança ao caminhar', desc: 'Reconquiste a leveza de cada passo, com tranquilidade.' }];

  return (
    <section id="beneficios" className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Benefícios principais"
          title={<>Benefícios que você sente <br className="hidden md:block" />em <span className="text-petrol">cada passo</span></>}
          lede="Resultados que aparecem na rotina — no caminhar, no trabalho, no esporte e até no momento de descansar." />
        
        <div className="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((it, i) =>
          <Reveal key={it.title} delay={i % 3 + 1}>
              <div className="group relative h-full p-1 rounded-[20px] bg-gradient-to-br from-turq-500/40 via-ink-100 to-transparent">
                <div className="h-full p-7 rounded-[18px] bg-white relative overflow-hidden">
                  <div className="absolute -right-6 -bottom-6 w-32 h-32 rounded-full bg-turq-100 opacity-0 group-hover:opacity-100 transition-opacity blur-2xl"></div>
                  <div className="relative">
                    <div className="flex items-center justify-between">
                      <span className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-petrol text-white">
                        <Icon name={it.icon} size={22} />
                      </span>
                      <span className="text-[11px] font-mono text-ink-300 tracking-widest">0{i + 1}</span>
                    </div>
                    <h3 className="mt-5 font-display font-semibold text-[18px] text-ink-900">{it.title}</h3>
                    <p className="mt-3 text-[14.5px] leading-relaxed text-ink-500">{it.desc}</p>
                  </div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Audiences (Para quem)
// ============================================================
function Audiences() {
  const items = [
  { icon: 'foot', title: 'Pessoas com dores nos pés', desc: 'Quem busca alívio e apoio sob medida.' },
  { icon: 'spine', title: 'Dores nos joelhos ou coluna', desc: 'Para quem sente reflexos da pisada na cadeia muscular.' },
  { icon: 'balance', title: 'Idosos que buscam estabilidade', desc: 'Apoio que auxilia em mais segurança ao caminhar.' },
  { icon: 'clock', title: 'Profissionais em pé', desc: 'Quem passa muitas horas em movimento ou parado.' },
  { icon: 'activity', title: 'Praticantes de atividade física', desc: 'Apoio que pode auxiliar no conforto e desempenho.' },
  { icon: 'heart', title: 'Quem busca conforto diário', desc: 'Para quem deseja mais qualidade de vida em cada passo.' }];

  return (
    <section id="para-quem" className="relative py-24 lg:py-32 bg-ink-50 overflow-hidden">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-petrol/20 to-transparent"></div>
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Para quem é indicada"
          title={<>Pensada para diferentes ritmos <br className="hidden md:block" />de <span className="text-petrol">vida e movimento</span></>}
          lede="Se você quer mais conforto, estabilidade e qualidade de vida no caminhar, a Palmilha Inteligente pode ser para você." />
        
        <div className="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((it, i) =>
          <Reveal key={it.title} delay={i % 3 + 1}>
              <div className="flex items-start gap-4 p-6 bg-white rounded-2xl border border-ink-100 hover:border-petrol/30 transition-colors hover:shadow-soft">
                <span className="shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-xl bg-turq-100 text-petrol">
                  <Icon name={it.icon} size={22} />
                </span>
                <div>
                  <div className="font-display font-semibold text-[16px] text-ink-900">{it.title}</div>
                  <div className="text-[14px] text-ink-500 mt-1.5 leading-relaxed">{it.desc}</div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Testimonials
// ============================================================
function Testimonials() {
  const items = [
  { stars: 5, text: 'Voltei a caminhar com muito mais conforto. Sinto a diferença em jornadas longas no trabalho.', name: 'Marina C.', city: 'Ribeirão Preto, SP', initial: 'M' },
  { stars: 5, text: 'Senti diferença no apoio dos pés logo nos primeiros dias. O acompanhamento foi excelente.', name: 'Roberto L.', city: 'Uberlândia, MG', initial: 'R' },
  { stars: 5, text: 'Excelente atendimento e orientação. Recomendo para quem fica muito tempo em pé.', name: 'Juliana P.', city: 'Ribeirão Preto, SP', initial: 'J' }];

  return (
    <section id="depoimentos" className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Depoimentos"
          title={<>Histórias reais de quem deu o <br className="hidden md:block" /><span className="text-petrol">primeiro passo</span></>}
          lede="A satisfação dos nossos pacientes é o que move o trabalho da Palmilha Inteligente." />
        
        <div className="mt-16 grid lg:grid-cols-3 gap-6">
          {items.map((t, i) =>
          <Reveal key={t.name} delay={i + 1}>
              <div className="relative h-full p-8 rounded-2xl bg-white border border-ink-100 shadow-soft hover:shadow-card transition-shadow flex flex-col">
                {/* Big quote */}
                <svg width="36" height="28" viewBox="0 0 36 28" className="text-turq-500/30" fill="currentColor">
                  <path d="M0 28V18C0 8 6 2 14 0v6c-4 1-7 5-7 10h7v12H0zm22 0V18c0-10 6-16 14-18v6c-4 1-7 5-7 10h7v12H22z" />
                </svg>
                <div className="mt-4 flex items-center gap-1">
                  {[...Array(t.stars)].map((_, i) => <Icon key={i} name="star" size={16} className="text-amber-400" />)}
                </div>
                <p className="mt-5 text-[15.5px] leading-relaxed text-ink-700 flex-1">"{t.text}"</p>
                <div className="mt-6 pt-6 border-t border-ink-100 flex items-center gap-3">
                  <div className="w-11 h-11 rounded-full bg-grad-turq text-white flex items-center justify-center font-display font-bold text-[15px]">{t.initial}</div>
                  <div>
                    <div className="font-semibold text-ink-900 text-[14.5px]">{t.name}</div>
                    <div className="text-[12.5px] text-ink-500 flex items-center gap-1"><Icon name="pin" size={11} /> {t.city}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// CTA mid-page
// ============================================================
function CTABlock() {
  return (
    <section className="relative py-20 lg:py-24">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <Reveal>
          <div className="relative overflow-hidden rounded-[28px] bg-grad-petrol text-white px-8 sm:px-14 py-14 sm:py-16">
            <div className="absolute inset-0 bg-grid opacity-[0.08]"></div>
            <div className="absolute -top-20 -right-20 w-[400px] h-[400px] rounded-full bg-turq-500/25 blur-3xl"></div>
            <div className="absolute -bottom-32 -left-16 w-[400px] h-[400px] rounded-full bg-accent/10 blur-3xl"></div>

            <div className="relative grid lg:grid-cols-12 gap-8 items-center">
              <div className="lg:col-span-8">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/15">
                  <span className="w-1.5 h-1.5 rounded-full bg-turq-500"></span>
                  <span className="text-[11px] tracking-[0.18em] uppercase font-semibold text-turq-500">Atendimento humanizado</span>
                </div>
                <h2 className="mt-4 font-display font-semibold text-[clamp(26px,4vw,42px)] leading-[1.05]">
                  Dê o primeiro passo para viver com mais <span className="text-turq-500">conforto</span>
                </h2>
                <p className="mt-5 text-[16px] leading-relaxed text-white/75 max-w-xl">
                  Fale com a equipe da Palmilha Inteligente e descubra qual solução combina com a sua necessidade.
                </p>
              </div>
              <div className="lg:col-span-4 lg:text-right">
                <Button href={WHATSAPP_URL} target="_blank" variant="onDark" size="lg" icon={<Icon name="whatsapp" size={18} />}>
                  Quero agendar minha avaliação
                </Button>
                <div className="mt-4 text-[12.5px] text-white/55">Resposta em horário comercial</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ============================================================
// FAQ
// ============================================================
function FAQ() {
  const items = [
  { q: 'A palmilha serve para qualquer tipo de calçado?', a: 'A maior parte dos calçados de uso diário com palmilha removível costuma acomodar bem. Na sua avaliação, conversamos sobre os modelos que você mais utiliza e indicamos a configuração ideal para o seu caso.' },
  { q: 'Quanto tempo demora para se adaptar?', a: 'A adaptação varia de pessoa para pessoa. Em geral, recomenda-se começar com algumas horas por dia e aumentar gradualmente. Muitas pessoas relatam mais conforto já nos primeiros dias de uso.' },
  { q: 'A palmilha ajuda em dor na coluna?', a: 'Como a pisada influencia toda a cadeia muscular, um melhor apoio plantar pode contribuir para reduzir sobrecargas que se refletem em joelhos, quadril e coluna. Cada caso é avaliado individualmente.' },
  { q: 'É indicada para idosos?', a: 'Sim. O apoio personalizado pode auxiliar em mais estabilidade e conforto ao caminhar, contribuindo para o bem-estar e a segurança no dia a dia.' },
  { q: 'Preciso fazer avaliação antes?', a: 'Sim. A avaliação é fundamental para entendermos o seu perfil e indicar a palmilha mais adequada — é o que diferencia uma solução sob medida de uma genérica.' },
  { q: 'Como faço para agendar?', a: 'Você pode falar com a nossa equipe pelo WhatsApp ou pelo formulário desta página. Em poucos minutos confirmamos um horário que funcione para a sua rotina.' }];

  return (
    <section id="faq" className="relative py-24 lg:py-32 bg-ink-50">
      <div className="max-w-4xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Dúvidas frequentes"
          title="Perguntas frequentes sobre a Palmilha Inteligente"
          lede="Reunimos as dúvidas mais comuns. Não encontrou a sua? Fale com a gente pelo WhatsApp." />
        
        <div className="mt-14 space-y-3">
          {items.map((it, i) =>
          <Reveal key={it.q} delay={i % 4 + 1}>
              <details className="group rounded-2xl bg-white border border-ink-100 hover:border-petrol/20 transition-colors overflow-hidden">
                <summary className="flex items-center justify-between gap-4 px-6 py-5">
                  <div className="flex items-center gap-4">
                    <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-turq-100 text-petrol font-display font-semibold text-[12px]">0{i + 1}</span>
                    <span className="font-display font-semibold text-[15.5px] text-ink-900">{it.q}</span>
                  </div>
                  <span className="chev shrink-0 inline-flex items-center justify-center w-8 h-8 rounded-full border border-ink-200 text-petrol">
                    <Icon name="chev" size={16} />
                  </span>
                </summary>
                <div className="px-6 pb-6 pl-[72px] text-[14.5px] text-ink-500 leading-relaxed">{it.a}</div>
              </details>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Contact
// ============================================================
function Contact() {
  const [form, setForm] = useState({ name: '', phone: '', city: '', message: '' });
  const [sent, setSent] = useState(false);
  const submit = (e) => {e.preventDefault();setSent(true);setTimeout(() => setSent(false), 4000);};
  const fld = (k, label, type = 'text') =>
  <label className="block">
      <span className="block text-[12px] font-semibold tracking-wide uppercase text-ink-500 mb-1.5">{label}</span>
      <input
      type={type} required
      value={form[k]} onChange={(e) => setForm({ ...form, [k]: e.target.value })}
      className="w-full px-4 py-3.5 rounded-xl bg-white border border-ink-200 focus:border-petrol focus:ring-4 focus:ring-petrol/10 outline-none text-[15px] text-ink-900 placeholder:text-ink-300 transition-all"
      placeholder={label} />
    
    </label>;

  return (
    <section id="contato" className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Contato"
          title={<>Pronto para o seu <span className="text-petrol">próximo passo</span>?</>}
          lede="Fale com a nossa equipe pelo canal que preferir. Vamos te ajudar a encontrar a solução certa para você." />
        
        <div className="mt-16 grid lg:grid-cols-12 gap-8">
          {/* Info column */}
          <div className="lg:col-span-5 space-y-4">
            <Reveal>
              <a href={WHATSAPP_URL} target="_blank" className="flex items-start gap-4 p-6 rounded-2xl bg-grad-turq text-white hover:shadow-card hover:-translate-y-0.5 transition-all">
                <span className="shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-xl bg-white/15 backdrop-blur">
                  <Icon name="whatsapp" size={22} />
                </span>
                <div>
                  <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-white/80">WhatsApp</div>
                  <div className="font-display font-semibold text-[20px] mt-1">{CONTACT.phoneDisplay}</div>
                  <div className="text-[13.5px] text-white/80 mt-1.5">Atendimento direto com a nossa equipe</div>
                </div>
              </a>
            </Reveal>

            <Reveal delay={1}>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <a href={`mailto:${CONTACT.email}`} className="flex items-start gap-3 p-5 rounded-2xl bg-white border border-ink-100 shadow-soft hover:border-petrol/30 transition-colors">
                  <span className="shrink-0 inline-flex items-center justify-center w-11 h-11 rounded-xl bg-turq-100 text-petrol">
                    <Icon name="mail" size={20} />
                  </span>
                  <div className="min-w-0">
                    <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-petrol">E-mail</div>
                    <div className="text-[13px] text-ink-700 mt-1 break-words">{CONTACT.email}</div>
                  </div>
                </a>
                <a href={CONTACT.instagram} target="_blank" rel="noopener" className="flex items-start gap-3 p-5 rounded-2xl bg-white border border-ink-100 shadow-soft hover:border-petrol/30 transition-colors">
                  <span className="shrink-0 inline-flex items-center justify-center w-11 h-11 rounded-xl bg-turq-100 text-petrol">
                    <Icon name="instagram" size={20} />
                  </span>
                  <div className="min-w-0">
                    <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-petrol">Instagram</div>
                    <div className="text-[13px] text-ink-700 mt-1 break-words">{CONTACT.instagramHandle}</div>
                  </div>
                </a>
              </div>
            </Reveal>

            <Reveal delay={1}>
              <a href={CONTACT.mapsUrl} target="_blank" rel="noopener" className="flex items-start gap-4 p-6 rounded-2xl bg-white border border-ink-100 shadow-soft hover:border-petrol/30 transition-colors">
                <span className="shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-xl bg-turq-100 text-petrol">
                  <Icon name="pin" size={22} />
                </span>
                <div>
                  <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-petrol">Endereço</div>
                  <div className="font-semibold text-ink-900 mt-1">{CONTACT.addressLine1}</div>
                  <div className="text-[13.5px] text-ink-500 mt-0.5">{CONTACT.addressLine2}</div>
                </div>
              </a>
            </Reveal>

            <Reveal delay={2}>
              <div className="flex items-start gap-4 p-6 rounded-2xl bg-white border border-ink-100 shadow-soft">
                <span className="shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-xl bg-turq-100 text-petrol">
                  <Icon name="clock" size={22} />
                </span>
                <div>
                  <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-petrol">Horário</div>
                  <div className="font-semibold text-ink-900 mt-1">{CONTACT.hoursWeek}</div>
                  <div className="text-[13.5px] text-ink-500 mt-0.5">{CONTACT.hoursSat}</div>
                </div>
              </div>
            </Reveal>

            {/* Map placeholder */}
            <Reveal delay={3}>
              <a href={CONTACT.mapsUrl} target="_blank" rel="noopener" className="relative block h-48 rounded-2xl overflow-hidden border border-ink-100 bg-grad-soft group">
                <div className="absolute inset-0 bg-grid opacity-50"></div>
                {/* Stylized map */}
                <svg viewBox="0 0 400 192" className="absolute inset-0 w-full h-full">
                  <path d="M0 80 Q 80 60, 150 90 T 400 70" stroke="#1EC7E6" strokeWidth="2.5" fill="none" opacity="0.4" />
                  <path d="M0 130 Q 100 110, 200 140 T 400 120" stroke="#0A5B7E" strokeWidth="2" fill="none" opacity="0.35" />
                  <path d="M80 0 L 100 192" stroke="#7E8494" strokeWidth="1" strokeDasharray="4 4" opacity="0.3" />
                  <path d="M280 0 L 270 192" stroke="#7E8494" strokeWidth="1" strokeDasharray="4 4" opacity="0.3" />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
                  <div className="relative">
                    <span className="absolute inset-0 -m-2 rounded-full bg-accent/30 animate-ping"></span>
                    <span className="relative inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent text-white shadow-lg">
                      <Icon name="pin" size={22} />
                    </span>
                  </div>
                  <div className="mt-3 text-[12.5px] font-semibold text-petrol">Centro · Ribeirão Preto — SP</div>
                  <div className="mt-1 inline-flex items-center gap-1 text-[11px] text-petrol/70 group-hover:text-petrol transition-colors">
                    Ver no Google Maps <Icon name="arrow" size={11} />
                  </div>
                </div>
              </a>
            </Reveal>
          </div>

          {/* Form column */}
          <div className="lg:col-span-7">
            <Reveal delay={1}>
              <form onSubmit={submit} className="p-7 lg:p-9 rounded-2xl bg-grad-soft border border-ink-100 shadow-soft">
                <div className="font-display font-semibold text-[20px] text-ink-900">Envie sua mensagem</div>
                <p className="text-[14px] text-ink-500 mt-1">Retornamos o quanto antes em horário comercial.</p>
                <div className="mt-6 grid sm:grid-cols-2 gap-4">
                  {fld('name', 'Nome')}
                  {fld('phone', 'Telefone', 'tel')}
                  <div className="sm:col-span-2">{fld('city', 'Cidade')}</div>
                  <label className="block sm:col-span-2">
                    <span className="block text-[12px] font-semibold tracking-wide uppercase text-ink-500 mb-1.5">Mensagem</span>
                    <textarea
                      required rows="4"
                      value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
                      className="w-full px-4 py-3.5 rounded-xl bg-white border border-ink-200 focus:border-petrol focus:ring-4 focus:ring-petrol/10 outline-none text-[15px] resize-none transition-all"
                      placeholder="Conte um pouco sobre o que você está sentindo ou buscando…">
                    </textarea>
                  </label>
                </div>
                <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
                  <div className="text-[12.5px] text-ink-500 flex items-center gap-2">
                    <Icon name="shield" size={14} className="text-petrol" />
                    Suas informações são tratadas com sigilo.
                  </div>
                  <Button as="button" type="submit" variant="petrol" size="lg" icon={<Icon name="send" size={16} />}>
                    {sent ? 'Mensagem enviada' : 'Enviar mensagem'}
                  </Button>
                </div>
              </form>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// Footer
// ============================================================
function Footer() {
  return (
    <footer className="relative bg-petrol-900 text-white pt-16 lg:pt-20 pb-8 overflow-hidden">
      <div className="absolute inset-0 bg-grid opacity-[0.06] pointer-events-none"></div>
      <div className="absolute -top-32 right-0 w-[400px] h-[400px] rounded-full bg-turq-500/15 blur-3xl pointer-events-none"></div>

      <div className="relative max-w-7xl mx-auto px-5 lg:px-8">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-5">
            <Logo variant="light" size="xl" />
            <p className="mt-6 text-[14px] text-white/65 leading-relaxed max-w-md">
              Tecnologia, conforto e cuidado em cada palmilha. Caminhe com mais qualidade de vida, do primeiro passo em diante.
            </p>
            <div className="mt-7 flex items-center gap-2.5">
              {[['instagram', CONTACT.instagram], ['facebook', CONTACT.facebook], ['whatsapp', WHATSAPP_URL]].map(([s, href]) =>
              <a key={s} href={href} target="_blank" rel="noopener" aria-label={s} className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-white/[0.06] border border-white/10 text-white/80 hover:text-turq-500 hover:border-turq-500/40 transition-colors">
                  <Icon name={s} size={16} />
                </a>
              )}
            </div>
          </div>

          <div className="lg:col-span-3">
            <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-turq-500 mb-4">Navegação</div>
            <ul className="space-y-2.5 text-[14px] text-white/70">
              {[['Início', '#top'], ['Benefícios', '#beneficios'], ['Como funciona', '#como-funciona'], ['Tecnologia', '#tecnologia'], ['Depoimentos', '#depoimentos'], ['FAQ', '#faq']].map(([l, h]) =>
              <li key={h}><a href={h} className="hover:text-white transition-colors">{l}</a></li>
              )}
            </ul>
          </div>

          <div className="lg:col-span-4">
            <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-turq-500 mb-4">Contato</div>
            <ul className="space-y-3 text-[14px] text-white/80">
              <li className="flex items-start gap-3"><Icon name="whatsapp" size={16} className="mt-0.5 text-turq-500" /><a href={WHATSAPP_URL} target="_blank" rel="noopener" className="hover:text-white transition-colors">{CONTACT.phoneDisplay}</a></li>
              <li className="flex items-start gap-3"><Icon name="mail" size={16} className="mt-0.5 text-turq-500" /><a href={`mailto:${CONTACT.email}`} className="hover:text-white transition-colors">{CONTACT.email}</a></li>
              <li className="flex items-start gap-3"><Icon name="instagram" size={16} className="mt-0.5 text-turq-500" /><a href={CONTACT.instagram} target="_blank" rel="noopener" className="hover:text-white transition-colors">{CONTACT.instagramHandle}</a></li>
              <li className="flex items-start gap-3"><Icon name="pin" size={16} className="mt-0.5 text-turq-500" /><a href={CONTACT.mapsUrl} target="_blank" rel="noopener" className="hover:text-white transition-colors">{CONTACT.addressLine1}<br />{CONTACT.addressLine2}</a></li>
              <li className="flex items-start gap-3"><Icon name="clock" size={16} className="mt-0.5 text-turq-500" /><span>{CONTACT.hoursWeek}</span></li>
            </ul>
          </div>
        </div>

        <div className="mt-14 pt-7 border-t border-white/10 flex flex-wrap items-center justify-between gap-4 text-[12.5px] text-white/55">
          <div>© {new Date().getFullYear()} Palmilha Inteligente. Todos os direitos reservados.</div>
          <div className="flex items-center gap-5">
            <a href="#" className="hover:text-white transition-colors">Política de privacidade</a>
            <a href="#" className="hover:text-white transition-colors">Termos de uso</a>
          </div>
        </div>
      </div>
    </footer>);

}

// ============================================================
// Floating WhatsApp button
// ============================================================
function FloatingWhatsApp() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 320);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a
      href={WHATSAPP_URL} target="_blank" aria-label="Falar no WhatsApp"
      className={`fixed bottom-6 right-6 z-40 group transition-all duration-500 ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}>
      
      <span className="absolute inset-0 rounded-full bg-[#25D366] animate-ping opacity-40"></span>
      <span className="relative flex items-center gap-3 pl-4 pr-5 py-3.5 rounded-full bg-[#25D366] text-white shadow-[0_18px_36px_-10px_rgba(37,211,102,0.5)] hover:shadow-[0_22px_44px_-10px_rgba(37,211,102,0.65)] transition-shadow">
        <Icon name="whatsapp" size={22} />
        <span className="hidden sm:inline font-semibold text-[14px]">Fale conosco</span>
      </span>
    </a>);

}

Object.assign(window, { Header, Hero, Problem, Solution, HowItWorks, Technology, Benefits, Audiences, Testimonials, CTABlock, FAQ, Contact, Footer, FloatingWhatsApp, WHATSAPP_URL });