// Detetive Capi — v3 (laranja + fitas de isolamento)
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ctaCopy": "Chamar Detetive Capi no Zap",
  "headlineCopy": "Sua detetive de\npromos no zap",
  "bgColor": "#ff3a14",
  "tapeColor": "#f5dd4d"
}/*EDITMODE-END*/;

const WA_LINK = "https://wa.me/5511936236342?text=Oi%20detetive%20Capi%21%20Quero%20investigar%20promos...";

/* ============ TAPE ENGINE ============ */
const PILLS = {
  green:  'green',
  pink:   'pink',
  black:  'black',
  white:  'white',
  blue:   'blue',
};

const TAPE_SETS = {
  hero: [
    { type:'pill', color:'green', text:'DENTRO DO ZAP' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'pink',  text:'DETETIVE CAPI NÃO DORME' },
    { type:'capy', src:'assets/buying-480.webp' },
    { type:'pill', color:'black', text:'100% GRÁTIS' },
    { type:'capy', src:'assets/savings-480.webp' },
    { type:'pill', color:'white', text:'SEM ENROLAÇÃO' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'blue',  text:'CAÇA PREÇO 24/7' },
  ],
  demo: [
    { type:'pill', color:'pink',  text:'AO VIVO NO ZAP' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'black', text:'CASO ABERTO' },
    { type:'pill', color:'green', text:'CAPI EM CAMPO' },
    { type:'capy', src:'assets/buying-480.webp' },
    { type:'pill', color:'white', text:'24 H POR DIA' },
    { type:'pill', color:'blue',  text:'7 DIAS POR SEMANA' },
    { type:'capy', src:'assets/savings-480.webp' },
    { type:'pill', color:'pink',  text:'SEM SPAM' },
  ],
  compare: [
    { type:'pill', color:'green', text:'CAPI VS GRUPO' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'black', text:'SEM EXPOR SEU NÚMERO' },
    { type:'pill', color:'pink',  text:'SEM SPAM' },
    { type:'capy', src:'assets/savings-480.webp' },
    { type:'pill', color:'white', text:'COMPARA AÍ' },
    { type:'pill', color:'blue',  text:'CAPI GANHA FÁCIL' },
  ],
  steps: [
    { type:'pill', color:'black', text:'PASSO A PASSO' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'green', text:'30 SEGUNDOS PRA COMEÇAR' },
    { type:'pill', color:'pink',  text:'SEM APP · SEM CADASTRO' },
    { type:'capy', src:'assets/buying-480.webp' },
    { type:'pill', color:'white', text:'SÓ NO ZAP' },
    { type:'pill', color:'blue',  text:'CAPI FAZ O TRABALHO SUJO' },
  ],
  archive: [
    { type:'pill', color:'black', text:'ARQUIVO MORTO' },
    { type:'pill', color:'green', text:'CASOS RESOLVIDOS' },
    { type:'capy', src:'assets/savings-480.webp' },
    { type:'pill', color:'pink',  text:'ECONOMIAS REAIS' },
    { type:'pill', color:'white', text:'PREÇO CADENTE ↓' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'blue',  text:'INVESTIGADO E CONFIRMADO' },
  ],
  quotes: [
    { type:'pill', color:'pink',  text:'TRANSCRIÇÃO OFICIAL' },
    { type:'capy', src:'assets/buying-480.webp' },
    { type:'pill', color:'black', text:'TESTEMUNHAS' },
    { type:'pill', color:'green', text:'QUEM ADOTOU' },
    { type:'capy', src:'assets/investigating-480.webp' },
    { type:'pill', color:'white', text:'AMOU A CAPI' },
    { type:'pill', color:'blue',  text:'+ 47.000 ADOTARAM' },
  ],
  faq: [
    { type:'pill', color:'black', text:'INTERROGATÓRIO' },
    { type:'pill', color:'pink',  text:'PERGUNTAS FREQUENTES' },
    { type:'capy', src:'assets/savings-480.webp' },
    { type:'pill', color:'green', text:'DÚVIDA? CAPI RESPONDE' },
    { type:'pill', color:'white', text:'SEM PEGADINHA' },
    { type:'capy', src:'assets/investigating-480.webp' },
  ],
  cta: [
    { type:'pill', color:'green', text:'ABRA SEU CASO' },
    { type:'capy', src:'assets/buying-480.webp' },
    { type:'pill', color:'black', text:'ÚLTIMO AVISO' },
    { type:'pill', color:'pink',  text:'CAPI TÁ ESPERANDO' },
    { type:'capy', src:'assets/savings-480.webp' },
    { type:'pill', color:'white', text:'30 SEGUNDOS' },
    { type:'pill', color:'blue',  text:'100% GRÁTIS' },
  ],
};

function TapeTrack({ items, reverse=false, duration=44 }) {
  const all = [...items, ...items];
  return (
    <div
      className="tape-track"
      style={{
        animationDuration: `${duration}s`,
        animationDirection: reverse ? 'reverse' : 'normal'
      }}
    >
      {all.map((it, i) => {
        if (it.type === 'capy') {
          return <img key={i} className="tape-capy" src={it.src} alt="" />;
        }
        return <span key={i} className={`pill ${it.color}`}>{it.text}</span>;
      })}
    </div>
  );
}

/* Section divider — single flat tape, slightly rotated */
function TapeBand({ set='hero', rot=-1.6, reverse=false, duration=44 }) {
  const items = TAPE_SETS[set] || TAPE_SETS.hero;
  return (
    <div className="tape-band flat" style={{transform:`rotate(${rot}deg)`}} aria-hidden="true">
      <TapeTrack items={items} reverse={reverse} duration={duration} />
    </div>
  );
}

/* Reusable CTA — appears at the bottom of each content section */
function SectionCTA({ cta, label }) {
  return (
    <div className="section-cta">
      <a className="btn-chunk" href={WA_LINK} target="_blank" rel="noopener">
        <span className="btn-chunk-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4a2 2 0 0 0-2 2v15l5-5h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>
        </span>
        {cta}
      </a>
      {label && <span className="section-cta-label">{label}</span>}
    </div>
  );
}

/* ============ HERO ============ */
function HeroFull({ headline, cta }) {
  const lines = String(headline || '').split('\n');
  return (
    <section className="hero-full" id="top" data-screen-label="01 Hero">
      <div className="tape-band angled top" aria-hidden="true">
        <TapeTrack items={TAPE_SETS.hero} duration={48} />
      </div>

      <span className="hero-sticker-c s1">caso #2026</span>
      <span className="hero-sticker-c s2">capi em<br/>missão promo</span>

      <div className="hero-logo-wrap">
        <img
          className="hero-logo"
          src="assets/kapi-logo-v2.png"
          alt="Detetive Capi"
        />
        <h1 className="hero-tagline">
          {lines.map((l, i) => (
            <span key={i} className="line">{l}</span>
          ))}
        </h1>
        <div className="hero-cta-row">
          <a className="btn-chunk" href={WA_LINK} target="_blank" rel="noopener">
            <span className="btn-chunk-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4a2 2 0 0 0-2 2v15l5-5h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>
            </span>
            {cta}
          </a>
          <a className="hero-ghost-link" href="#demo">como funciona ↓</a>
        </div>
      </div>

      <div className="scroll-cue">
        provas abaixo <span className="arrow">↓</span>
      </div>
    </section>
  );
}

/* ============ DEMO (chat) ============ */
function DemoSection({ cta }) {
  return (
    <section className="section dark-on-orange" id="demo" data-screen-label="02 Demo">
      <div className="container">
        <div className="section-head">
          <span className="section-tag">ao vivo · conversa real</span>
          <h2 className="section-title">Manda o produto.<br/>Capi <span className="title-mark">faz o resto</span>.</h2>
          <p className="section-sub">Air fryer, tênis, fralda, iPhone… ela abre o caso, vigia o preço dia e noite, e te chama quando encontra promo!</p>
        </div>
        <div className="demo-grid">
          <div className="demo-left">
            <ul className="bullets">
              <li><b>1.</b> Manda um oi no zap pra capi</li>
              <li><b>2.</b> Diz o que quer monitorar</li>
              <li><b>3.</b> Ela investiga &amp; vigia 24/7</li>
              <li><b>4.</b> Te chama quando acha uma promo</li>
            </ul>
            <a className="btn-chunk" href={WA_LINK} target="_blank" rel="noopener">
              <span className="btn-chunk-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4a2 2 0 0 0-2 2v15l5-5h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>
              </span>
              {cta}
            </a>
          </div>
          <div className="demo-right">
            <span className="hero-sticker-c live">🔥 ao vivo</span>
            <KapiChat />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PASSOS ============ */
function StepsSection({ cta }) {
  const steps = [
    { n:'01', t:'Manda um oi', d:'Abre o WhatsApp e fala com a Capi. Ela já tá esperando.', emoji:'💬' },
    { n:'02', t:'Diz o que quer', d:'Produto, link, marca ou categoria. iPhone, tênis, fralda, o que for.', emoji:'🎯' },
    { n:'03', t:'Ela investiga', d:'Capi vasculha lojas, cruza histórico, ignora preço inflado.', emoji:'🔎' },
    { n:'04', t:'Você é avisado', d:'Quando o preço cair de verdade, chega alerta no zap. Só quando vale.', emoji:'🚨' },
  ];
  const rots = ['-2deg','1.4deg','-1deg','2deg'];
  return (
    <section className="section" id="como-funciona" data-screen-label="03 Passos">
      <div className="container">
        <div className="section-head">
          <span className="section-tag">passo a passo · investigação 101</span>
          <h2 className="section-title">30 segundos pra <span className="title-mark">começar</span>.</h2>
          <p className="section-sub">Ela faz o resto enquanto você vive sua vida — ou seu rolê, ou seu sono.</p>
        </div>
        <div className="step-grid">
          {steps.map((s, i) => (
            <div key={i} className="step-card" style={{transform:`rotate(${rots[i]})`}}>
              <div className="step-num">{s.n}</div>
              <div className="step-emoji">{s.emoji}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <SectionCTA cta={cta} label="— leva 30 segundos" />
      </div>
    </section>
  );
}

/* ============ COMPARATIVO ============ */
function Comparison({ cta }) {
  const rows = [
    { icon:'🔒', label:'Seu número de telefone', capi:'Conversa privada, só você e a Capi', grupo:'Exposto pra centenas de estranhos no grupo' },
    { icon:'🛡️', label:'Risco de golpe / spam direto', capi:'Zero. Ninguém vê você', grupo:'Alto. Qualquer um captura seu número' },
    { icon:'💬', label:'Quantidade de mensagens', capi:'Poucas e relevantes', grupo:'Centenas por dia' },
    { icon:'🎯', label:'Foco no que você quer', capi:'Total. Você escolhe o que monitorar', grupo:'Nenhum. É pra todo mundo' },
    { icon:'🔔', label:'Aviso de queda de preço', capi:'Sim. Na hora certa, pro item certo', grupo:'Não. Só promoções aleatórias' },
    { icon:'📬', label:'Conteúdo relevante', capi:'Só o que te interessa', grupo:'Muita coisa que você não quer' },
    { icon:'⏱️', label:'Tempo poupado', capi:'Muito. Ela faz o trabalho sujo', grupo:'Horas perdidas rolando feed' },
    { icon:'😩', label:'Estresse', capi:'Zero', grupo:'Alto' },
  ];
  return (
    <section className="section" id="comparativo" data-screen-label="04 Comparativo">
      <div className="container">
        <div className="section-head">
          <span className="section-tag">comparativo · versus</span>
          <h2 className="section-title">Capi <span className="title-mark">vs</span><br/>grupo de achadinhos.</h2>
          <p className="section-sub">Por que comprometer seu zap com 14 grupos se uma capivara faz isso por você?</p>
        </div>

        <div className="compare-wrap">
          <div className="compare-head">
            <div className="compare-head-cell label-cell"></div>
            <div className="compare-head-cell capi-cell">
              <img src="assets/kapi-logo-v2.png" alt="" />
              <span>Detetive Capi</span>
            </div>
            <div className="compare-head-cell grupo-cell">
              <span className="grupo-emoji">📣</span>
              <span>Grupo de achadinhos</span>
            </div>
          </div>
          <div className="compare-rows">
            {rows.map((r, i) => (
              <div key={i} className="compare-row">
                <div className="compare-cell label-cell">
                  <span className="row-icon">{r.icon}</span>
                  <span>{r.label}</span>
                </div>
                <div className="compare-cell capi-cell">
                  <span className="check">✓</span>
                  <span>{r.capi}</span>
                </div>
                <div className="compare-cell grupo-cell">
                  <span className="x">✗</span>
                  <span>{r.grupo}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <SectionCTA cta={cta} label="— fala com ela agora" />
      </div>
    </section>
  );
}

/* ============ ARQUIVO ============ */
function Archive({ cta }) {
  const cases = [
    { id:'#A-118', title:'Air Fryer Ninja AF150', sus:'Marketplace fingindo desconto', old:'R$ 899,90', neu:'R$ 685,90', drop:'-24%', tag:'eletro · cozinha', r:'-1.4deg' },
    { id:'#A-122', title:'Tênis Nike Pegasus 41', sus:'Preço inflado em 3 lojas', old:'R$ 749,99', neu:'R$ 519,90', drop:'-31%', tag:'corrida', r:'0.8deg' },
    { id:'#A-129', title:'Fralda Pampers Sec G · 80un', sus:'Pacote escondido', old:'R$ 52,90', neu:'R$ 39,90', drop:'-25%', tag:'bebê', r:'-0.8deg' },
    { id:'#A-141', title:'iPhone 15 128GB', sus:'Cupom escondido + cashback', old:'R$ 5.999', neu:'R$ 4.589', drop:'-23%', tag:'celular', r:'1.4deg' },
    { id:'#A-152', title:'Cafeteira Nespresso Inissia', sus:'Promo relâmpago meia-noite', old:'R$ 549,90', neu:'R$ 329,00', drop:'-40%', tag:'cozinha', r:'-0.4deg' },
    { id:'#A-167', title:'Robô aspirador Roborock Q5', sus:'Cupom regional + Pix', old:'R$ 2.299', neu:'R$ 1.679', drop:'-27%', tag:'casa', r:'1.8deg' },
  ];
  return (
    <section className="section" id="casos" data-screen-label="04 Arquivo">
      <div className="container">
        <div className="section-head">
          <span className="section-tag">arquivo · casos encerrados</span>
          <h2 className="section-title">Pasta <span className="title-mark">RESOLVIDO</span>.</h2>
          <p className="section-sub">Uma amostra das missões que a Capi já fechou. Cada caso, um produto, uma queda de preço investigada e confirmada antes do alerta.</p>
        </div>
        <div className="archive-grid">
          {cases.map((c, i) => (
            <article key={i} className="case-file" style={{'--r': c.r}}>
              <div className="case-file-head">
                <span className="id">{c.id}</span>
                <span className="case-file-stamp">RESOLVIDO</span>
              </div>
              <div className="case-file-body">
                <h4>{c.title}</h4>
                <div className="case-sus">{c.sus}</div>
                <div className="price-row">
                  <span className="price-old">{c.old}</span>
                  <span className="price-new">{c.neu}</span>
                  <span className="price-drop">{c.drop}</span>
                </div>
                <div className="case-file-meta">
                  <span>{c.tag}</span>
                  <span>encerrado · 2026</span>
                </div>
              </div>
            </article>
          ))}
        </div>
        <SectionCTA cta={cta} label="— abre o seu caso" />
      </div>
    </section>
  );
}

/* ============ DEPOIMENTOS ============ */
function Depoimentos({ cta }) {
  const items = [
    { txt:'Eu tava entrando em 14 grupos de promoção. Hoje só falo com a Capi. Ela só me chama quando vale.', who:'MARIANA · sp · adotou em fev', r:'-1.6deg' },
    { txt:'Pedi pra investigar a air fryer que minha sogra queria. Em 3 dias ela me avisou e a gente comprou R$200 mais barato.', who:'BRENO · bh · adotou em jan', r:'1deg' },
    { txt:'Achei meio meme no começo. Mas a capivara entende mais de preço do que eu. Recomendo.', who:'CAMI · pe · adotou em mar', r:'-0.6deg' },
  ];
  return (
    <section className="section" data-screen-label="05 Depoimentos">
      <div className="container">
        <div className="section-head">
          <span className="section-tag">depoimentos · transcrição</span>
          <h2 className="section-title">Quem <span className="title-mark">adotou</span>,<br/>amou a capi.</h2>
        </div>
        <div className="interrog">
          {items.map((q, i) => (
            <div key={i} className="quote-card" style={{'--r': q.r}}>
              <span className="qmark">"</span>
              <blockquote>{q.txt}</blockquote>
              <div className="who"><b>{q.who.split(' · ')[0]}</b> · {q.who.split(' · ').slice(1).join(' · ')}</div>
            </div>
          ))}
        </div>
        <SectionCTA cta={cta} label="— vira o próximo depoimento" />
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ({ cta }) {
  const [open, setOpen] = useState(0);
  const qs = [
    { q:'É grátis mesmo?', a:'Sim, 100% gratuita. Sem mensalidade, sem cartão, sem pegadinha. A Capi só te chama quando aparece uma queda relevante.' },
    { q:'Como ela encontra os preços?', a:'A Capi monitora lojas online e cruza o histórico. Quando o item que você pediu cai de verdade, ela manda alerta no WhatsApp.' },
    { q:'Posso pedir qualquer coisa?', a:'Produto, marca, categoria ou link: tênis, celular, fralda, cafeteira, robô aspirador… Se existe em loja online, ela investiga.' },
    { q:'Quantas mensagens vou receber?', a:'Poucas. A regra é: só te chamar quando algo do SEU interesse cair. O objetivo é zero spam, zero ruído.' },
    { q:'Preciso instalar um app?', a:'Não. Tudo acontece dentro do WhatsApp que você já usa. Sem download, sem cadastro chato.' },
    { q:'Meus dados ficam seguros?', a:'Seu número não fica exposto em grupos nem é compartilhado. A Capi usa a conversa só pra entender os itens que você quer monitorar.' },
  ];
  return (
    <section className="section" id="faq" data-screen-label="06 FAQ">
      <div className="container">
        <div className="section-head">
          <span className="section-tag">interrogatório · perguntas frequentes</span>
          <h2 className="section-title">Dúvidas <span className="title-mark">desvendadas</span>.</h2>
        </div>
        <div className="faq-list">
          {qs.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} role="button" tabIndex={0}
                onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') setOpen(open === i ? -1 : i); }}>
                <span className="badge">{String(i+1).padStart(2,'0')}</span>
                <span style={{flex:1}}>{it.q}</span>
                <span className="chev">▾</span>
              </div>
              <div className="faq-a">
                <p>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
        <SectionCTA cta={cta} label="— mais dúvidas? pergunta direto pra ela" />
      </div>
    </section>
  );
}

/* ============ FINAL CTA ============ */
function FinalCTA({ cta }) {
  return (
    <section className="section final-section" data-screen-label="07 Final CTA">
      <div className="container">
        <div className="final-orange">
          <img className="final-logo" src="assets/kapi-logo-v2.png" alt="Detetive Capi"/>
          <h2 className="final-title">tá esperando<br/>o quê?</h2>
          <p className="final-sub">a capivara já tá na escuta.<br/>30 segundos e ela tá em campo.</p>
          <div className="hero-cta-row">
            <a className="btn-chunk big" href={WA_LINK} target="_blank" rel="noopener">
              <span className="btn-chunk-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4a2 2 0 0 0-2 2v15l5-5h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>
              </span>
              {cta}
            </a>
          </div>
          <div className="final-meta">+ 47.000 já adotaram · 100% grátis · sem spam</div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const qrText = "https://wa.me/5511936236342?text=Oi%20detetive%20Capi%21%20Quero%20investigar%20promos...";
  const qrSrc  = "https://api.qrserver.com/v1/create-qr-code/?size=320x320&margin=12&qzone=1&color=111111&bgcolor=f7eed7&data=" + encodeURIComponent(qrText);
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <img src="assets/kapi-logo-v2.png" alt="" />
            <div>
              <div className="foot-brand-name">Detetive Capi</div>
              <div className="foot-brand-tag">investigando preços desde sempre</div>
            </div>
          </div>

          <div className="foot-qr">
            <div className="foot-qr-card">
              <img src={qrSrc} alt="QR code para falar com a Detetive Capi no WhatsApp" />
            </div>
            <div className="foot-qr-text">
              <div className="foot-qr-title">aponta o celular aí 👇</div>
              <div className="foot-qr-sub">fala com a capi direto no zap</div>
              <a className="foot-qr-link" href={WA_LINK} target="_blank" rel="noopener">+55 11 93623-6342 →</a>
            </div>
          </div>
        </div>

        <div className="foot-social">
          <a href="https://instagram.com/detetivecapi" target="_blank" rel="noopener" aria-label="Instagram">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
            </svg>
          </a>
          <a href="https://facebook.com/detetivecapi" target="_blank" rel="noopener" aria-label="Facebook">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z"/>
            </svg>
          </a>
          <a href="https://tiktok.com/@detetivecapi" target="_blank" rel="noopener" aria-label="TikTok">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.07 20.1a6.34 6.34 0 0 0 10.86-4.43V8.95a8.16 8.16 0 0 0 4.77 1.52V7.05a4.85 4.85 0 0 1-1.11-.36z"/>
            </svg>
          </a>
        </div>

        <div className="foot-legal">
          © 2026 Detetive Capi — Todos os direitos reservados ·
          {' '}Intermark Distribuição do Brasil LTDA · CNPJ 36.345.917/0001-75 ·
          {' '}Rua Pirapetininga, 80 · Anexo Lock 210 · Cidade Industrial Satélite de São Paulo ·
          {' '}Guarulhos/SP · CEP 07223-080 ·
          {' '}<a href="termos.html">termos de uso</a> · <a href="privacidade.html">política de privacidade</a>
        </div>

        <div className="foot-disclaimer">
          <span className="foot-disclaimer-label">Aviso de isenção de responsabilidade.</span>
          {' '}A Detetive Capi não faz garantias, representações ou promessas (sejam implícitas ou expressas) em relação à natureza, ao padrão, à disponibilidade de estoque ou à exatidão das informações, preços e promoções veiculados neste site, os quais estão sujeitos a alterações sem aviso prévio. Esta isenção de responsabilidade estende-se à adequação de tais informações para as suas circunstâncias específicas, sendo de responsabilidade exclusiva do usuário verificar a validade das ofertas e a disponibilidade dos produtos diretamente com os lojistas parceiros antes de realizar qualquer transação.
        </div>
      </div>
    </footer>
  );
}

/* ============ TWEAKS ============ */
function KapiTweaks() {
  const [t, setT] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--orange', t.bgColor);
    document.documentElement.style.setProperty('--tape', t.tapeColor);
  }, [t.bgColor, t.tapeColor]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Cor">
        <window.TweakColor
          label="Fundo (laranja)"
          value={t.bgColor}
          onChange={v => setT('bgColor', v)}
          options={['#ff3a14', '#ff5a1a', '#e02a08', '#ff2400']}
        />
        <window.TweakColor
          label="Cor da fita"
          value={t.tapeColor}
          onChange={v => setT('tapeColor', v)}
          options={['#f5dd4d', '#ffd23f', '#fff066', '#e8c500']}
        />
      </window.TweakSection>
      <window.TweakSection label="Copy">
        <window.TweakText
          label="Tagline (use | pra quebrar linha)"
          value={String(t.headlineCopy || '').replace(/\n/g,' | ')}
          onChange={v => setT('headlineCopy', String(v).split('|').map(s => s.trim()).join('\n'))}
        />
        <window.TweakText
          label="Texto do botão"
          value={t.ctaCopy}
          onChange={v => setT('ctaCopy', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* ============ APP ============ */
function App() {
  const [t] = window.useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <HeroFull headline={t.headlineCopy} cta={t.ctaCopy} />
      <TapeBand set="demo"    rot={-4}   duration={42} />
      <DemoSection cta={t.ctaCopy} />
      <TapeBand set="steps"   rot={1.4}  reverse duration={46} />
      <StepsSection cta={t.ctaCopy} />
      <TapeBand set="compare" rot={-1.7} duration={45} />
      <Comparison cta={t.ctaCopy} />
      <TapeBand set="archive" rot={1.8}  reverse duration={44} />
      <Archive cta={t.ctaCopy} />
      <TapeBand set="quotes"  rot={1.2}  reverse duration={48} />
      <Depoimentos cta={t.ctaCopy} />
      <TapeBand set="faq"     rot={-1.4} duration={42} />
      <FAQ cta={t.ctaCopy} />
      <TapeBand set="cta"     rot={1.6}  reverse duration={40} />
      <FinalCTA cta={t.ctaCopy} />
      <Footer />
      <KapiTweaks />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);