/* Interactive & supplementary components for Palmilha Inteligente */
/* eslint-disable react/no-unescaped-entities */

const { useState: useStateI, useEffect: useEffectI, useRef: useRefI } = React;

// ============================================================
// 1. Stats counter strip (animated on enter)
// ============================================================
function StatsStrip() {
  const stats = [
    { value: 14000, prefix: '+', suffix: '',   label: 'Atendimentos realizados' },
    { value: 4.8,  prefix: '',  suffix: '★',  label: 'Avaliação no Google', decimals: 1 },
    { value: 98,   prefix: '',  suffix: '%',  label: 'Satisfação dos pacientes' },
    { value: 34,    prefix: '',  suffix: ' anos', label: 'De experiência clínica' },
  ];
  const [vis, setVis] = useStateI(false);
  const ref = useRefI(null);
  useEffectI(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setVis(true); io.disconnect(); } });
    }, { threshold: 0.3 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <section className="relative -mt-2 -mb-2 z-10">
      <div className="max-w-6xl mx-auto px-5 lg:px-8">
        <div ref={ref} className="bg-white rounded-2xl shadow-card border border-ink-100 grid grid-cols-2 lg:grid-cols-4 divide-y lg:divide-y-0 lg:divide-x divide-ink-100 overflow-hidden">
          {stats.map((s, i) => (
            <Counter key={i} {...s} active={vis} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Counter({ value, prefix = '', suffix = '', label, decimals = 0, active }) {
  const [n, setN] = useStateI(0);
  useEffectI(() => {
    if (!active) return;
    const dur = 1400;
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - k, 3);
      setN(value * eased);
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, value]);
  const formatted = decimals ? n.toFixed(decimals) : Math.round(n).toLocaleString('pt-BR');
  return (
    <div className="px-6 py-7 text-center">
      <div className="font-display font-bold text-[clamp(24px,3.6vw,40px)] text-petrol leading-none tracking-tight">
        {prefix}{formatted}{suffix}
      </div>
      <div className="mt-2 text-[12.5px] text-ink-500 uppercase tracking-[0.12em] font-medium">{label}</div>
    </div>
  );
}

// ============================================================
// 2. Body chain (foot → knees → spine ripple)
// ============================================================
const BODY_ZONES = [
  { id: 'feet',  label: 'Pés',     y: 1500, desc: 'Tudo nasce aqui. Quando a pisada é desalinhada, o peso se concentra em pontos errados da sola — calcanhar, antepé ou borda lateral. Esse excesso de pressão gera dor local, calosidades e abre caminho para problemas como fascite plantar e esporão de calcâneo.', sol: 'Feita sob medida para o seu pé, a palmilha redistribui a pressão por toda a superfície plantar — aliviando os pontos sobrecarregados e devolvendo apoio onde o pé mais precisa.' },
  { id: 'knees', label: 'Joelhos', y: 1120, desc: 'O joelho é a primeira articulação a pagar a conta. Uma pisada que gira para dentro ou para fora muda o ângulo de impacto a cada passo, sobrecarregando cartilagem e ligamentos. Com o tempo, isso se traduz em tensão, estalos e dor ao subir escadas ou caminhar mais.', sol: 'Ao corrigir a base do apoio, a palmilha melhora o alinhamento da perna e reduz o impacto que chega ao joelho — diminuindo a tensão sobre cartilagem e ligamentos a cada passo.' },
  { id: 'hips',  label: 'Quadril', y: 830, desc: 'Para compensar o desequilíbrio que sobe dos pés e joelhos, o quadril se ajusta e trabalha de forma assimétrica. Um lado passa a fazer mais força que o outro, gerando rigidez, desconforto ao sentar ou levantar e uma sensação de cansaço na lateral da bacia.', sol: 'Com os pés bem apoiados e simétricos, o quadril para de compensar e volta a trabalhar de forma equilibrada — reduzindo a sobrecarga de um lado e a sensação de rigidez na bacia.' },
  { id: 'lumbar',label: 'Lombar',  y: 710, desc: 'A região lombar absorve todo o esforço extra que se acumula na cadeia. Sem uma base estável nos pés, a curvatura natural da coluna se altera e os músculos ficam em tensão constante — uma das causas mais comuns de dor nas costas no fim do dia.', sol: 'Uma base estável nos pés ajuda a coluna a manter sua curvatura natural — aliviando a tensão muscular acumulada na lombar e a dor que costuma aparecer no fim do dia.' },
  { id: 'back',  label: 'Coluna',  y: 500, desc: 'No topo da cadeia, a postura inteira se reorganiza para equilibrar tudo o que veio de baixo. Ombros tensos, coluna desalinhada e fadiga muscular generalizada são o reflexo final de um problema que, na maioria das vezes, começou lá embaixo: na pisada.', sol: 'Ao tratar a origem do desequilíbrio na pisada, a palmilha favorece uma postura mais alinhada de baixo para cima — aliviando a tensão nos ombros e a fadiga muscular generalizada.' },
];
function BodyChain() {
  const [active, setActive] = useStateI('feet');
  const z = BODY_ZONES.find((b) => b.id === active);
  return (
    <section className="relative py-24 lg:py-28 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="A cadeia do movimento"
          title={<>Tudo começa na <span className="text-petrol">pisada</span></>}
          lede="Uma pisada desalinhada gera reflexos que sobem por toda a cadeia muscular. Toque em cada região para entender o impacto."
        />

        <div className="mt-14 grid lg:grid-cols-12 gap-10 items-center">
          {/* Body silhouette */}
          <div className="lg:col-span-6 order-2 lg:order-1">
            <Reveal>
              <div className="relative aspect-[941/1672] max-w-[360px] mx-auto rounded-[32px] overflow-hidden bg-grad-soft border border-ink-100">
                <img src="assets/corpo.png" alt="Corpo humano — cadeia do movimento" className="absolute inset-0 w-full h-full object-contain select-none pointer-events-none" draggable="false" />
                <svg viewBox="0 0 941 1672" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid meet">
                  <defs>
                    <radialGradient id="zoneHot" cx="0.5" cy="0.5" r="0.5">
                      <stop offset="0" stopColor="#D73045" stopOpacity="0.65" />
                      <stop offset="1" stopColor="#D73045" stopOpacity="0" />
                    </radialGradient>
                  </defs>

                  {/* Animated chain — pulsing waves going up from active zone */}
                  {[0, 1, 2, 3].map((i) => (
                    <circle key={i} cx="470" cy={z.y} r="60" fill="none" stroke="#1EC7E6" strokeWidth="5" opacity="0">
                      <animate attributeName="r" from="50" to="260" dur="2.4s" begin={`${i * 0.6}s`} repeatCount="indefinite" />
                      <animate attributeName="opacity" from="0.55" to="0" dur="2.4s" begin={`${i * 0.6}s`} repeatCount="indefinite" />
                    </circle>
                  ))}

                  {/* Active zone hot dot */}
                  <ellipse cx="470" cy={z.y} rx="150" ry="90" fill="url(#zoneHot)" />
                  <circle cx="470" cy={z.y} r="20" fill="#D73045" />
                  <circle cx="470" cy={z.y} r="8" fill="#fff" />

                  {/* Pin markers for each zone */}
                  {BODY_ZONES.map((b) => (
                    <g key={b.id} className="cursor-pointer" onClick={() => setActive(b.id)}>
                      <line x1="510" y1={b.y} x2="828" y2={b.y} stroke="#0A5B7E" strokeWidth="2.5" strokeDasharray="6 6" opacity={b.id === active ? 0.7 : 0.18} />
                      <circle cx="858" cy={b.y} r="29" fill={b.id === active ? '#0A5B7E' : '#fff'} stroke="#0A5B7E" strokeWidth="4" />
                      <text x="858" y={b.y + 11} textAnchor="middle" fontSize="30" fontWeight="700" fill={b.id === active ? '#fff' : '#0A5B7E'}>
                        {BODY_ZONES.indexOf(b) + 1}
                      </text>
                    </g>
                  ))}
                </svg>
              </div>
            </Reveal>
          </div>

          {/* Zone selector + description */}
          <div className="lg:col-span-6 order-1 lg:order-2">
            <Reveal delay={1}>
              <div className="flex flex-wrap gap-2 mb-6">
                {BODY_ZONES.map((b, i) => (
                  <button
                    key={b.id}
                    onClick={() => setActive(b.id)}
                    className={`px-4 py-2 rounded-full text-[13px] font-semibold border transition-all ${
                      b.id === active
                        ? 'bg-petrol text-white border-petrol shadow-[0_8px_22px_-10px_rgba(10,91,126,0.6)]'
                        : 'bg-white text-petrol border-ink-200 hover:border-petrol/40'
                    }`}
                  >
                    <span className="opacity-50 mr-1.5">0{i+1}</span>{b.label}
                  </button>
                ))}
              </div>

              <div className="p-7 rounded-2xl bg-grad-soft border border-ink-100 shadow-soft min-h-[200px]">
                <div className="flex items-center gap-3">
                  <span className="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-accent-50 text-accent">
                    <Icon name="target" size={20} />
                  </span>
                  <div className="font-display font-semibold text-[22px] text-ink-900">{z.label}</div>
                </div>
                <p className="mt-5 text-[15px] leading-relaxed text-ink-700">{z.desc}</p>
                <p className="mt-3 text-[13.5px] text-ink-500 leading-relaxed">{z.sol}</p>
                <Button href={WHATSAPP_URL} target="_blank" variant="primary" size="sm" className="mt-6" icon={<Icon name="arrow" size={14} />}>
                  Falar com um especialista
                </Button>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 3. Before / After pressure toggle
// ============================================================
function BeforeAfter() {
  const [after, setAfter] = useStateI(false);
  // Two heatmap configurations
  const before = [
    { x: 530, y: 1190, rx: 190, ry: 160, c: '#D73045', o: 0.8 },
    { x: 435, y: 380,  rx: 140, ry: 120, c: '#D73045', o: 0.75 },
    { x: 650, y: 440,  rx: 100, ry: 90,  c: '#FFB347', o: 0.6 },
  ];
  const afterMap = [
    { x: 530, y: 1190, rx: 175, ry: 145, c: '#1EC7E6', o: 0.55 },
    { x: 435, y: 390,  rx: 120, ry: 100, c: '#1EC7E6', o: 0.5 },
    { x: 650, y: 440,  rx: 100, ry: 90,  c: '#1EC7E6', o: 0.5 },
    { x: 430, y: 820,  rx: 115, ry: 165, c: '#1EC7E6', o: 0.45 },
    { x: 650, y: 780,  rx: 105, ry: 145, c: '#1EC7E6', o: 0.45 },
  ];
  const data = after ? afterMap : before;
  return (
    <section className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="O impacto na sua pisada"
          title={<>Veja a diferença <span className="text-petrol">antes e depois</span></>}
          lede="Sem apoio adequado, a pressão se concentra em poucos pontos. Com a Palmilha Inteligente, o peso passa a se distribuir de forma mais equilibrada."
        />

        <div className="mt-14 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 order-2 lg:order-1">
            <Reveal>
              <div className="relative aspect-[5/6] max-w-[460px] mx-auto">
                <div className="absolute inset-0 rounded-[40px] bg-grad-soft border border-ink-100 overflow-hidden shadow-card">
                  <div className="absolute inset-0 bg-grid opacity-50"></div>
                  <CornerBrackets />
                  <div className="absolute top-4 left-5 right-5 flex items-center justify-between">
                    <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-petrol-700">
                      {after ? 'COM PALMILHA' : 'SEM PALMILHA'}
                    </span>
                    <span className={`px-2 py-1 rounded-full text-[10px] font-semibold tracking-wider uppercase ${after ? 'bg-turq-100 text-petrol' : 'bg-accent-50 text-accent'}`}>
                      {after ? 'Distribuído' : 'Concentrado'}
                    </span>
                  </div>
                </div>

                <FootPhoto
                  id={`ba-${after ? 'a' : 'b'}`}
                  blend="multiply"
                  edge="#0A5B7E"
                  pad="px-10 pt-14 pb-14"
                  heat={data}
                />

                {/* Toggle */}
                <div className="absolute -bottom-5 left-1/2 -translate-x-1/2 bg-white border border-ink-100 shadow-card rounded-full p-1 flex">
                  {[
                    { k: false, label: 'Sem palmilha' },
                    { k: true,  label: 'Com palmilha' },
                  ].map((opt) => (
                    <button
                      key={String(opt.k)}
                      onClick={() => setAfter(opt.k)}
                      className={`px-4 py-2 rounded-full text-[12.5px] font-semibold transition-all ${
                        after === opt.k ? 'bg-grad-turq text-white shadow-[0_6px_16px_-6px_rgba(30,199,230,0.7)]' : 'text-ink-500 hover:text-petrol'
                      }`}
                    >
                      {opt.label}
                    </button>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>

          <div className="lg:col-span-5 order-1 lg:order-2">
            <Reveal delay={1}>
              <div className="space-y-4">
                <div className={`p-5 rounded-2xl border transition-all ${!after ? 'bg-accent-50 border-accent/30 shadow-soft' : 'bg-white border-ink-100 opacity-60'}`}>
                  <div className="flex items-center gap-3">
                    <span className="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-accent text-white">
                      <Icon name="x" size={18} />
                    </span>
                    <span className="font-display font-semibold text-[16px] text-ink-900">Sem palmilha</span>
                  </div>
                  <ul className="mt-4 space-y-2.5 text-[14px] text-ink-700">
                    <li className="flex items-start gap-2"><Icon name="x" size={14} className="text-accent mt-0.5 shrink-0" /> Sobrecarga concentrada no calcâneo e antepé</li>
                    <li className="flex items-start gap-2"><Icon name="x" size={14} className="text-accent mt-0.5 shrink-0" /> Fadiga muscular em jornadas longas</li>
                    <li className="flex items-start gap-2"><Icon name="x" size={14} className="text-accent mt-0.5 shrink-0" /> Pouco apoio na região do arco</li>
                  </ul>
                </div>

                <div className={`p-5 rounded-2xl border transition-all ${after ? 'bg-turq-100 border-turq-500/40 shadow-soft' : 'bg-white border-ink-100 opacity-60'}`}>
                  <div className="flex items-center gap-3">
                    <span className="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-grad-turq text-white">
                      <Icon name="check" size={18} />
                    </span>
                    <span className="font-display font-semibold text-[16px] text-ink-900">Com Palmilha Inteligente</span>
                  </div>
                  <ul className="mt-4 space-y-2.5 text-[14px] text-ink-700">
                    <li className="flex items-start gap-2"><Icon name="check" size={14} className="text-petrol mt-0.5 shrink-0" /> Pressão distribuída em toda a superfície</li>
                    <li className="flex items-start gap-2"><Icon name="check" size={14} className="text-petrol mt-0.5 shrink-0" /> Apoio anatômico na região do arco</li>
                    <li className="flex items-start gap-2"><Icon name="check" size={14} className="text-petrol mt-0.5 shrink-0" /> Mais conforto e menos fadiga ao longo do dia</li>
                  </ul>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4. Exploded layers (camadas técnicas)
// ============================================================
function ExplodedLayers() {
  const layers = [
    { id: 'top',   title: 'Tecido superior',  desc: 'Toque macio, anti-atrito e respirável.', color: '#E6FAFE', stroke: '#1EC7E6' },
    { id: 'eva',   title: 'EVA de conforto',  desc: 'Camada de amortecimento progressivo.',    color: '#F0FAFC', stroke: '#7EE2F2' },
    { id: 'arch',  title: 'Suporte anatômico', desc: 'Modelado para sustentar o arco plantar.', color: '#DDF4FA', stroke: '#49D7EE' },
    { id: 'base',  title: 'Base estrutural',   desc: 'Estabilidade e durabilidade para o uso diário.', color: '#0A5B7E', stroke: '#062F44' },
  ];
  const [hover, setHover] = useStateI(null);
  return (
    <section 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-[600px] h-[600px] rounded-full bg-turq-100 blur-3xl opacity-50 pointer-events-none"></div>
      <div className="relative max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Construção da palmilha"
          title={<>Camadas pensadas para o seu <span className="text-petrol">conforto</span></>}
          lede="Cada camada cumpre uma função específica — combinadas, formam uma palmilha completa, anatômica e durável."
        />

        <div className="mt-16 grid lg:grid-cols-12 gap-10 items-center">
          {/* Stack visual */}
          <div className="lg:col-span-7">
            <Reveal>
              <div className="relative aspect-[4/3] max-w-[640px] mx-auto">
                {/* Exploded stack viewed at slight isometric */}
                <svg viewBox="0 0 600 460" className="absolute inset-0 w-full h-full">
                  <defs>
                    {layers.map((l, i) => (
                      <linearGradient key={l.id} id={`elFill-${i}`} x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0" stopColor={l.color} />
                        <stop offset="1" stopColor={l.stroke} stopOpacity="0.7" />
                      </linearGradient>
                    ))}
                  </defs>

                  {/* Connect dashed lines between layers (axis) */}
                  <line x1="300" y1="40" x2="300" y2="440" stroke="rgba(10,91,126,0.18)" strokeWidth="1" strokeDasharray="3 5" />

                  {layers.map((l, i) => {
                    const baseY = 80 + i * 90;
                    const isHover = hover === l.id;
                    const offsetY = isHover ? -8 : 0;
                    const offsetX = isHover ? 12 : 0;
                    // skew transform for isometric feel
                    return (
                      <g key={l.id}
                        transform={`translate(${offsetX} ${baseY + offsetY}) skewX(-30) scale(0.6 0.5)`}
                        style={{ transition: 'transform 0.35s cubic-bezier(.16,.84,.44,1)', cursor: 'pointer' }}
                        onMouseEnter={() => setHover(l.id)}
                        onMouseLeave={() => setHover(null)}
                      >
                        {/* shadow */}
                        <ellipse cx="290" cy="64" rx="160" ry="8" fill="#0A5B7E" opacity="0.18" />
                        <path d={INSOLE_PATH} fill={`url(#elFill-${i})`} stroke={l.stroke} strokeWidth="2.5" transform="translate(170 -180) scale(1.2)" />
                      </g>
                    );
                  })}
                </svg>

                {/* Layer label pills */}
                <div className="absolute inset-0 pointer-events-none">
                  {layers.map((l, i) => {
                    const top = 60 + i * 22; // percentage scale
                    return (
                      <div
                        key={l.id}
                        className={`absolute right-0 sm:right-4 transition-all duration-300 pointer-events-auto`}
                        style={{ top: `${(80 + i * 90) / 460 * 100}%` }}
                        onMouseEnter={() => setHover(l.id)}
                        onMouseLeave={() => setHover(null)}
                      >
                        <div className={`flex items-center gap-2 px-3 py-2 rounded-xl bg-white border shadow-soft transition-all ${hover === l.id ? 'border-petrol scale-105' : 'border-ink-100'}`}>
                          <span className="font-mono text-[10px] font-bold text-petrol">0{i+1}</span>
                          <span className="text-[13px] font-semibold text-ink-900">{l.title}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </Reveal>
          </div>

          {/* Layer list */}
          <div className="lg:col-span-5">
            <div className="space-y-3">
              {layers.map((l, i) => (
                <Reveal key={l.id} delay={i + 1}>
                  <div
                    onMouseEnter={() => setHover(l.id)}
                    onMouseLeave={() => setHover(null)}
                    className={`p-5 rounded-2xl border transition-all cursor-pointer ${
                      hover === l.id ? 'bg-white border-petrol shadow-card -translate-y-0.5' : 'bg-white/60 border-ink-100'
                    }`}
                  >
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 rounded-xl flex items-center justify-center font-mono font-bold text-[14px]"
                        style={{ background: l.color, color: l.stroke }}>
                        0{i+1}
                      </div>
                      <div className="flex-1">
                        <div className="font-display font-semibold text-[16px] text-ink-900">{l.title}</div>
                        <div className="text-[13.5px] text-ink-500 mt-0.5 leading-snug">{l.desc}</div>
                      </div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 5. Comparison table
// ============================================================
function Comparison() {
  const rows = [
    ['Distribuição de pressão',  'limited', 'partial', 'full'],
    ['Suporte anatômico do arco', 'none',    'partial', 'full'],
    ['Personalização ao seu pé',  'none',    'none',    'full'],
    ['Materiais técnicos',        'none',    'partial', 'full'],
    ['Acompanhamento profissional','none',   'none',    'full'],
    ['Conforto prolongado',       'limited', 'partial', 'full'],
  ];
  const headers = [
    { label: 'Sem palmilha',         sub: 'Calçado padrão',     tone: 'muted' },
    { label: 'Palmilha de prateleira', sub: 'Tamanho único',     tone: 'muted' },
    { label: 'Palmilha Inteligente',  sub: 'Sob medida + acompanhamento', tone: 'feature' },
  ];
  const sym = {
    none:    { icon: 'x', cls: 'bg-ink-100 text-ink-400' },
    limited: { icon: 'x', cls: 'bg-accent-50 text-accent' },
    partial: { icon: 'check', cls: 'bg-turq-100 text-petrol opacity-60' },
    full:    { icon: 'check', cls: 'bg-grad-turq text-white' },
  };
  return (
    <section className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-6xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Comparativo"
          title={<>Por que a Palmilha Inteligente <br className="hidden md:block" />é diferente</>}
          lede="Personalização, materiais técnicos e acompanhamento profissional fazem a diferença na rotina e no resultado."
        />

        <Reveal delay={1}>
          <div className="mt-14 overflow-x-auto no-scrollbar -mx-5 px-5 lg:mx-0 lg:px-0">
            <div className="min-w-[640px] grid grid-cols-4 gap-px bg-ink-100 rounded-2xl overflow-hidden border border-ink-100">
              {/* Top-left empty */}
              <div className="bg-white p-5"></div>
              {headers.map((h, i) => (
                <div key={i} className={`p-5 ${h.tone === 'feature' ? 'bg-grad-petrol text-white' : 'bg-ink-50 text-ink-700'}`}>
                  <div className={`font-display font-semibold text-[15px] ${h.tone === 'feature' ? 'text-white' : 'text-ink-900'}`}>{h.label}</div>
                  <div className={`text-[12px] mt-1 ${h.tone === 'feature' ? 'text-turq-500' : 'text-ink-500'}`}>{h.sub}</div>
                </div>
              ))}
              {rows.map(([label, ...cells], rIdx) => (
                <React.Fragment key={rIdx}>
                  <div className="bg-white p-5 text-[14px] font-medium text-ink-900 flex items-center">{label}</div>
                  {cells.map((c, cIdx) => {
                    const s = sym[c];
                    const isFeature = cIdx === 2;
                    return (
                      <div key={cIdx} className={`p-5 flex items-center justify-center ${isFeature ? 'bg-petrol-900/95' : 'bg-white'}`}>
                        <span className={`inline-flex items-center justify-center w-9 h-9 rounded-full ${s.cls}`}>
                          <Icon name={s.icon} size={16} strokeWidth={2.2} />
                        </span>
                      </div>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// 6. Calculator (tempo em pé)
// ============================================================
function Calculator() {
  const [hours, setHours] = useStateI(8);
  // crude estimates for storytelling
  const stepsPerHour = 900;
  const steps = Math.round(hours * stepsPerHour);
  const loadKg = (hours * 18).toFixed(0); // tons of accumulated impact
  const fatigue = Math.min(100, Math.round(hours * 7));
  const tier = hours < 4 ? 'leve' : hours < 8 ? 'moderada' : 'intensa';
  const tierColor = hours < 4 ? '#1EC7E6' : hours < 8 ? '#FFB347' : '#D73045';
  return (
    <section className="relative py-24 lg:py-32 bg-ink-50 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Quanto pesa o seu dia"
          title={<>Quanta carga seus pés <span className="text-petrol">absorvem</span> por dia?</>}
          lede="Mova o controle para ver uma estimativa do impacto acumulado. Quanto mais tempo em pé, mais sua pisada precisa de apoio."
        />

        <div className="mt-14 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7">
            <Reveal>
              <div className="p-7 lg:p-9 rounded-3xl bg-white border border-ink-100 shadow-card">
                <div className="flex items-baseline justify-between mb-2">
                  <span className="text-[12px] font-semibold tracking-[0.18em] uppercase text-petrol">Tempo em pé / caminhando</span>
                  <span className="text-[14px] font-mono text-ink-500">{hours}h por dia</span>
                </div>
                <div className="relative pt-1">
                  <input
                    type="range" min="0" max="14" step="1" value={hours}
                    onChange={(e) => setHours(Number(e.target.value))}
                    className="w-full h-2 bg-ink-100 rounded-full appearance-none cursor-pointer accent-petrol"
                    style={{
                      background: `linear-gradient(to right, ${tierColor} 0%, ${tierColor} ${(hours/14)*100}%, #EEF1F4 ${(hours/14)*100}%, #EEF1F4 100%)`
                    }}
                  />
                  <div className="mt-2 flex justify-between text-[10.5px] font-mono text-ink-400">
                    <span>0h</span><span>4h</span><span>8h</span><span>14h</span>
                  </div>
                </div>

                <div className="mt-8 grid grid-cols-3 gap-3">
                  <div className="p-4 rounded-2xl bg-ink-50 text-center">
                    <div className="text-[10.5px] uppercase tracking-[0.16em] text-ink-400 font-semibold">Passos/dia</div>
                    <div className="mt-1 font-display font-bold text-[24px] text-petrol leading-none">{steps.toLocaleString('pt-BR')}</div>
                  </div>
                  <div className="p-4 rounded-2xl bg-ink-50 text-center">
                    <div className="text-[10.5px] uppercase tracking-[0.16em] text-ink-400 font-semibold">Impacto acum.</div>
                    <div className="mt-1 font-display font-bold text-[24px] text-petrol leading-none">{loadKg} <span className="text-[12px]">ton·passo</span></div>
                  </div>
                  <div className="p-4 rounded-2xl text-center" style={{ background: `${tierColor}1A` }}>
                    <div className="text-[10.5px] uppercase tracking-[0.16em] font-semibold" style={{ color: tierColor }}>Carga</div>
                    <div className="mt-1 font-display font-bold text-[20px] capitalize leading-none" style={{ color: tierColor }}>{tier}</div>
                  </div>
                </div>

                <div className="mt-6">
                  <div className="flex items-center justify-between mb-2 text-[12px]">
                    <span className="text-ink-500">Nível de fadiga estimada</span>
                    <span className="font-mono font-semibold" style={{ color: tierColor }}>{fatigue}%</span>
                  </div>
                  <div className="h-2 rounded-full bg-ink-100 overflow-hidden">
                    <div className="h-full rounded-full transition-all duration-500" style={{ width: `${fatigue}%`, background: `linear-gradient(90deg, #1EC7E6, ${tierColor})` }}></div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>

          <div className="lg:col-span-5">
            <Reveal delay={1}>
              <div className="p-7 rounded-2xl bg-grad-petrol text-white shadow-card relative overflow-hidden">
                <div className="absolute -top-20 -right-20 w-60 h-60 rounded-full bg-turq-500/20 blur-3xl"></div>
                <div className="relative">
                  <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-turq-500">Sua pisada precisa de apoio</div>
                  <h3 className="mt-3 font-display font-semibold text-[22px] leading-tight">
                    Aproximadamente <span className="text-turq-500">{loadKg} toneladas-passo</span> passam pelos seus pés por dia.
                  </h3>
                  <p className="mt-4 text-[14px] text-white/75 leading-relaxed">
                    Uma palmilha sob medida pode ajudar a distribuir essa carga e reduzir desconfortos acumulados.
                  </p>
                  <Button href={WHATSAPP_URL} target="_blank" variant="onDark" size="md" className="mt-6 w-full sm:w-auto" icon={<Icon name="whatsapp" size={16} />}>
                    Quero uma avaliação
                  </Button>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7. Quiz diagnóstico
// ============================================================
const QUIZ = [
  {
    q: 'Onde você sente desconforto com mais frequência?',
    key: 'dor',
    options: [
      { v: 'pes',     label: 'Nos pés',          icon: 'foot' },
      { v: 'joelhos', label: 'Nos joelhos',      icon: 'knee' },
      { v: 'lombar',  label: 'Na lombar/coluna', icon: 'spine' },
      { v: 'nenhuma', label: 'Sem dor, busco prevenção', icon: 'shield' },
    ],
  },
  {
    q: 'Quanto tempo você passa em pé ou caminhando por dia?',
    key: 'tempo',
    options: [
      { v: 'pouco',  label: 'Menos de 2 horas',  icon: 'clock' },
      { v: 'medio',  label: 'Entre 2 e 6 horas', icon: 'clock' },
      { v: 'muito',  label: 'Mais de 6 horas',   icon: 'clock' },
    ],
  },
  {
    q: 'Você pratica atividade física com frequência?',
    key: 'atividade',
    options: [
      { v: 'nao',   label: 'Não pratico',           icon: 'heart' },
      { v: 'leve',  label: 'Caminhadas leves',       icon: 'walk' },
      { v: 'forte', label: 'Esporte ou treino regular', icon: 'activity' },
    ],
  },
  {
    q: 'Qual sua faixa etária?',
    key: 'idade',
    options: [
      { v: '18-34', label: '18–34 anos',  icon: 'sparkle' },
      { v: '35-54', label: '35–54 anos',  icon: 'sparkle' },
      { v: '55+',   label: '55 anos ou mais', icon: 'sparkle' },
    ],
  },
];

function Quiz() {
  const [step, setStep] = useStateI(0);
  const [answers, setAnswers] = useStateI({});
  const total = QUIZ.length;
  const done = step >= total;
  const current = QUIZ[step];

  const select = (v) => {
    const next = { ...answers, [current.key]: v };
    setAnswers(next);
    setTimeout(() => setStep(step + 1), 250);
  };
  const reset = () => { setAnswers({}); setStep(0); };

  // Build whatsapp message
  const labelFor = (key, v) => {
    const q = QUIZ.find(qq => qq.key === key);
    return q.options.find(o => o.v === v)?.label || v;
  };
  const summary = Object.entries(answers).map(([k, v]) => {
    const qLabel = { dor: 'Desconforto', tempo: 'Tempo em pé', atividade: 'Atividade física', idade: 'Faixa etária' }[k];
    return `${qLabel}: ${labelFor(k, v)}`;
  }).join(' | ');

  const message = encodeURIComponent(`Olá! Fiz o diagnóstico no site. Quero agendar uma avaliação.\n\nMeu perfil: ${summary}`);
  const whatsapp = `${WHATSAPP_URL.split('?')[0]}?text=${message}`;

  // Recommendation logic
  const rec = (() => {
    const { dor, tempo, atividade } = answers;
    if (dor === 'lombar' || dor === 'joelhos') return { tag: 'Cadeia muscular', title: 'Recomendamos uma avaliação completa da pisada', desc: 'Como o desconforto reflete em joelhos ou coluna, é importante entender a base — sua pisada — para um apoio personalizado.' };
    if (tempo === 'muito')                      return { tag: 'Jornadas longas',  title: 'Apoio reforçado para o seu dia', desc: 'Quem fica mais de 6h em pé costuma se beneficiar bastante de um apoio anatômico bem ajustado.' };
    if (atividade === 'forte')                  return { tag: 'Performance',      title: 'Apoio com foco em movimento',  desc: 'Para a prática de esportes, uma palmilha personalizada pode auxiliar no conforto e na estabilidade.' };
    if (dor === 'nenhuma')                      return { tag: 'Prevenção',        title: 'Ótimo momento para um diagnóstico preventivo', desc: 'Manter uma pisada bem apoiada ajuda a prevenir desconfortos futuros e mantém a qualidade do seu movimento.' };
    return { tag: 'Conforto diário', title: 'Vamos te indicar a melhor solução', desc: 'Com uma avaliação personalizada, indicamos a palmilha ideal para o seu perfil.' };
  })();

  return (
    <section id="quiz" className="relative py-24 lg:py-32 bg-grad-petrol text-white overflow-hidden">
      <div className="absolute inset-0 bg-grid opacity-[0.08]"></div>
      <div className="absolute -top-40 -right-40 w-[500px] h-[500px] rounded-full bg-turq-500/15 blur-3xl"></div>

      <div className="relative max-w-3xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="Diagnóstico rápido"
          title={<>Descubra a palmilha ideal <br className="hidden md:block" /><span className="text-turq-500">para o seu perfil</span></>}
          lede="Responda 4 perguntas curtas. Em menos de 1 minuto, te indicamos um próximo passo personalizado."
          tone="dark"
        />

        <Reveal delay={1}>
          <div className="mt-12 p-7 lg:p-10 rounded-3xl bg-white/[0.04] border border-white/10 backdrop-blur">
            {/* Progress */}
            <div className="flex items-center gap-2 mb-7">
              {QUIZ.map((_, i) => (
                <div key={i} className={`h-1.5 flex-1 rounded-full transition-colors ${i < (done ? total : step + 1) ? 'bg-turq-500' : 'bg-white/15'}`}></div>
              ))}
            </div>

            {!done && (
              <div>
                <div className="text-[11px] tracking-[0.18em] uppercase font-semibold text-turq-500">Pergunta {step + 1} de {total}</div>
                <h3 className="mt-3 font-display font-semibold text-[clamp(20px,3vw,28px)] leading-tight">{current.q}</h3>
                <div className="mt-7 grid sm:grid-cols-2 gap-3">
                  {current.options.map((o) => {
                    const sel = answers[current.key] === o.v;
                    return (
                      <button
                        key={o.v}
                        onClick={() => select(o.v)}
                        className={`text-left flex items-center gap-3 p-4 rounded-2xl border transition-all ${
                          sel ? 'bg-turq-500/15 border-turq-500 text-white' : 'bg-white/[0.04] border-white/10 hover:bg-white/[0.08] hover:border-turq-500/40'
                        }`}
                      >
                        <span className={`inline-flex items-center justify-center w-10 h-10 rounded-xl shrink-0 ${sel ? 'bg-turq-500 text-petrol-900' : 'bg-white/10 text-turq-500'}`}>
                          <Icon name={o.icon} size={18} />
                        </span>
                        <span className="font-semibold text-[14px]">{o.label}</span>
                      </button>
                    );
                  })}
                </div>
                <div className="mt-6 flex items-center justify-between text-[12.5px] text-white/55">
                  <button onClick={() => step > 0 && setStep(step - 1)} disabled={step === 0} className="disabled:opacity-30 hover:text-white transition-colors flex items-center gap-1">
                    <span style={{ display:'inline-block', transform:'rotate(180deg)' }}><Icon name="arrow" size={12} /></span> Voltar
                  </button>
                  <span>Suas respostas são confidenciais</span>
                </div>
              </div>
            )}

            {done && (
              <div>
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-turq-500/20 border border-turq-500/40 text-turq-500 text-[11px] font-semibold tracking-[0.18em] uppercase">
                  <Icon name="check" size={12} /> {rec.tag}
                </div>
                <h3 className="mt-4 font-display font-semibold text-[clamp(22px,3.4vw,32px)] leading-tight">{rec.title}</h3>
                <p className="mt-4 text-[15px] text-white/75 leading-relaxed">{rec.desc}</p>

                <div className="mt-6 p-5 rounded-2xl bg-white/[0.04] border border-white/10">
                  <div className="text-[11px] tracking-[0.16em] uppercase text-white/55 font-semibold mb-3">Seu perfil</div>
                  <div className="grid sm:grid-cols-2 gap-2.5">
                    {Object.entries(answers).map(([k, v]) => (
                      <div key={k} className="flex items-center gap-2 text-[13.5px]">
                        <Icon name="check" size={12} className="text-turq-500" />
                        <span className="text-white/85">{labelFor(k, v)}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="mt-7 flex flex-wrap gap-3">
                  <Button href={whatsapp} target="_blank" variant="onDark" size="lg" icon={<Icon name="whatsapp" size={18} />}>
                    Agendar com base no meu perfil
                  </Button>
                  <Button as="button" onClick={reset} variant="onDarkGhost" size="lg">
                    Refazer
                  </Button>
                </div>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// 8. Gallery (image-slot grid)
// ============================================================
function Gallery() {
  const slots = [
    { id: 'gal-1', label: 'Atendimento na clínica', shape: 'rounded' },
    { id: 'gal-2', label: 'Análise da pisada',      shape: 'rounded' },
    { id: 'gal-3', label: 'Palmilha pronta',         shape: 'rounded' },
    { id: 'gal-4', label: 'Equipe',                  shape: 'rounded' },
    { id: 'gal-5', label: 'Espaço da clínica',       shape: 'rounded' },
    { id: 'gal-6', label: 'Resultado do paciente',    shape: 'rounded' },
  ];
  return (
    <section id="galeria" className="relative py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <SectionHead
          eyebrow="A clínica por dentro"
          title={<>Nosso dia a dia em <span className="text-petrol">imagens</span></>}
          lede="Atendimento humanizado, ambiente acolhedor e tecnologia a serviço do seu conforto."
        />
        <Reveal delay={1}>
          <div className="mt-14 grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5">
            {slots.map((s, i) => (
              <div key={s.id} className={`relative ${i === 0 ? 'lg:col-span-2 lg:row-span-2' : ''} aspect-[4/3] ${i === 0 ? 'lg:aspect-auto' : ''}`}>
                <image-slot
                  id={s.id}
                  shape={s.shape}
                  radius="20"
                  placeholder={s.label}
                  style={{ width: '100%', height: '100%', display: 'block' }}
                ></image-slot>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// 9. Sticky mobile CTA bar
// ============================================================
function StickyMobileBar() {
  const [show, setShow] = useStateI(false);
  useEffectI(() => {
    const onScroll = () => setShow(window.scrollY > 500);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`fixed bottom-0 inset-x-0 z-30 lg:hidden transition-transform duration-400 ${show ? 'translate-y-0' : 'translate-y-full'}`}>
      <div className="m-3 grid grid-cols-2 gap-2 p-2 rounded-2xl bg-white border border-ink-100 shadow-[0_20px_50px_-10px_rgba(10,91,126,0.35)]">
        <a href="tel:+551636107424" className="flex items-center justify-center gap-2 py-3 rounded-xl bg-petrol text-white font-semibold text-[13.5px]">
          <Icon name="phone" size={16} /> Ligar
        </a>
        <a href={WHATSAPP_URL} target="_blank" className="flex items-center justify-center gap-2 py-3 rounded-xl bg-[#25D366] text-white font-semibold text-[13.5px]">
          <Icon name="whatsapp" size={16} /> WhatsApp
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { StatsStrip, BodyChain, BeforeAfter, ExplodedLayers, Comparison, Calculator, Quiz, Gallery, StickyMobileBar });