/* QUERO+ Landing — main app */
const { useState, useEffect, useRef } = React;

/* ── tweak defaults ── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": "Sinta mais",
  "palette": "bordeaux",
  "displayFont": "DMSerif",
  "showStickyMobile": true,
  "showUrgency": true,
  "ctaText": "QUERO EXPERIMENTAR AGORA",
  "price": "209",
  "priceCents": "90",
  "installments": "12x de R$ 24,66",
  "checkoutUrl": "https://pay.hest.com.br/987c0a77-9fbc-4130-b845-10e14e0d3340"
}/*EDITMODE-END*/;

const PALETTES = {
  bordeaux:{ ink:"#0E0204", bordoDeep:"#1A0408", red:"#D90000", rose:"#FFD6CC" },
  noir:    { ink:"#08060A", bordoDeep:"#100309", red:"#C30019", rose:"#F5B8B0" },
  velvet:  { ink:"#12040A", bordoDeep:"#23061A", red:"#E5174B", rose:"#FFC9D4" },
};

const FONTS = {
  Cormorant:'"Cormorant Garamond", serif',
  Playfair:'"Playfair Display", serif',
  DMSerif:'"DM Serif Display", serif',
};

const HEADLINES = {
  "Sinta mais": ["Sinta mais ", { it:"prazer" }, " na ", { br:true }, "sua ", { it:"vida" }, "!"],
  "Acenda": ["Acenda o que ", { br:true }, "anda ", { it:"adormecido" }, " ", { it:"em você" }, "."],
  "Quero+": ["Mais energia. ", { br:true }, "Mais ", { it:"desejo" }, ". ", { br:true }, "Mais ", { it:"você" }, "."],
};

/* ── helper: reveal-on-scroll ── */
function useReveal(){
  useEffect(()=>{
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(entries=>{
      entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add("in"); io.unobserve(e.target);} });
    },{threshold:0.12});
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  },[]);
}

/* ── icons (minimal line) ── */
const Ico = {
  spark:()=>(<svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M16 4v8M16 20v8M4 16h8M20 16h8M8 8l5 5M19 19l5 5M24 8l-5 5M13 19l-5 5"/></svg>),
  heart:()=>(<svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M16 27s-10-5.5-10-13c0-3.6 2.7-6.5 6-6.5 2 0 3.5 1 4 2.5.5-1.5 2-2.5 4-2.5 3.3 0 6 2.9 6 6.5 0 7.5-10 13-10 13z"/></svg>),
  leaf:()=>(<svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M26 5c-12 0-20 6-20 16 0 3 1 5 3 6 7-2 14-9 16-22zM8 27c5-9 11-14 18-17"/></svg>),
  flame:()=>(<svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M16 28c-5 0-9-3-9-9 0-4 3-6 3-10 3 1 5 4 5 8 1-2 3-3 3-6 4 2 7 6 7 11 0 4-3 6-9 6z"/></svg>),
  moon:()=>(<svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M22 21c-7 0-11-4-11-11 0-1.5.3-3 .8-4.3C7 7 4 11 4 16c0 6.6 5.4 12 12 12 5 0 9-3 11-7-1.4.5-3 .8-5 1z"/></svg>),
  drop:()=>(<svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M16 4c-5 7-9 11-9 16a9 9 0 0018 0c0-5-4-9-9-16z"/></svg>),
  check:()=>(<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 12l5 5L20 6"/></svg>),
  arrow:()=>(<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg>),
};

/* ── data ── */
const BENEFITS = [
  { i:"01", t:"Energia &", em:"disposição", d:"Auxilia o corpo a manter mais vitalidade ao longo do dia, do despertar à noite.", ico:"spark" },
  { i:"02", t:"Humor &", em:"bem-estar", d:"Apoia o equilíbrio emocional e a sensação de prazer no autocuidado diário.", ico:"heart" },
  { i:"03", t:"Vitalidade", em:"natural", d:"Combinação de ingredientes vegetais e minerais para apoiar sua rotina inteira.", ico:"leaf" },
  { i:"04", t:"Mais", em:"conexão", d:"Pensado para casais que querem reacender presença, intimidade e desejo verdadeiro.", ico:"flame" },
  { i:"05", t:"Fórmula", em:"limpa", d:"Sem glúten. Ingredientes naturais e minerais essenciais em proporção cuidadosa.", ico:"drop" },
  { i:"06", t:"Ritual", em:"simples", d:"Um scoop, um copo, um momento. Fácil de incluir na sua manhã ou na sua noite.", ico:"moon" },
];

const COMPOSITION = [
  { i:"01", n:"Feno", em:"Grego", d:"Auxilia na vitalidade, libido e equilíbrio do corpo. Tradicionalmente associado ao tônus feminino e masculino.", img:"assets/comp-feno-grego.webp" },
  { i:"02", n:"Guaraná", em:"", d:"Fonte natural de estímulo para energia, foco e disposição. Combate o cansaço físico e mental.", img:"assets/comp-guarana.webp" },
  { i:"03", n:"Gengibre", em:"", d:"Ingrediente termogênico que ajuda na circulação e na sensação de vitalidade. Aquece por dentro.", img:"assets/comp-gengibre.webp" },
  { i:"04", n:"Pimenta", em:"Vermelha", d:"Contribui para ativação metabólica e estímulo corporal. Sensação de presença e calor.", img:"assets/comp-pimenta.webp" },
  { i:"05", n:"Beterraba,", em:"Abacate & Tomate", d:"Fontes vegetais associadas ao bem-estar e à ação antioxidante. Pó concentrado de cor profunda.", img:"assets/comp-beterraba.webp" },
  { i:"06", n:"Magnésio,", em:"Zinco & Ferro", d:"Minerais essenciais. Magnésio auxilia na redução do estresse e ansiedade; Zinco é antioxidante e apoia hormônios anabólicos e rendimento físico; Ferro auxilia na redução da fadiga e do cansaço extremo.", img:"assets/comp-mzf-v5.webp" },
];

const STEPS = [
  { n:"01", t:"Um scoop.", d:"Coloque 7g do pó, exatamente uma medida cheia." },
  { n:"02", t:"100 a 200ml.", d:"Misture em água, suco ou bebida da sua preferência." },
  { n:"03", t:"Beba.", d:"Uma vez ao dia. Pode ser quente ou frio: escolha o seu ritual." },
];

const FORWHOM = [
  "Homens e mulheres adultos",
  { t:"Quem busca", em:"mais energia", d:"no dia a dia" },
  { t:"Quem quer", em:"mais disposição", d:"sem perder a leveza" },
  { t:"Quem cuida da", em:"rotina de autocuidado", d:"" },
  { t:"Casais que desejam", em:"mais conexão", d:"e intimidade" },
  { t:"Mulheres em fase de", em:"queda de vitalidade", d:"" },
];

const NUTRI_ROWS = [
  { n:"Valor Energético", u:"Kcal", a:"0,84", b:"12", vd:"1" },
  { n:"Carboidratos",     u:"g",    a:"0,21", b:"3",  vd:"1" },
  { n:"Magnésio",         u:"mg",   a:"4,41", b:"63", vd:"15" },
  { n:"Vitamina E",       u:"mg",   a:"0,7",  b:"10", vd:"66" },
  { n:"Ferro",            u:"mg",   a:"0,49", b:"7",  vd:"50" },
  { n:"Zinco",            u:"mg",   a:"0,49", b:"7",  vd:"63" },
  { n:"Vitamina B6",      u:"mg",   a:"0,09", b:"1,3", vd:"100" },
  { n:"Ácido Fólico",     u:"mcg",  a:"16,8", b:"240", vd:"100" },
  { n:"Selênio",          u:"mcg",  a:"2,38", b:"34", vd:"56" },
  { n:"Vitamina B12",     u:"mcg",  a:"0,16", b:"2,4", vd:"100" },
];

const INGREDIENTES_FULL = "Concentrado de maçã em pó, Feno grego em pó, Guaraná em pó, Beterraba em pó, Melancia em pó, Amora em pó, Gergelim em pó, Abacate em pó, Tomate em pó, Inhame em pó, Gengibre em pó, Pimenta vermelha em pó, Bisglicinato de magnésio, DL-alfa-tocoferol (Vitamina E), Bisglicinato ferroso (Ferro), Bisglicinato de zinco (Zinco), Cloridrato de piridoxina (B6), Ácido fólico, L-Selenometionina (Selênio), Cianocobalamina (B12). Agente espessante goma xantana. Aromatizante idêntico ao natural de frutas vermelhas, acidulante ácido cítrico, regulador de acidez citrato de sódio, antiumectante fosfato tricálcico, edulcorantes artificiais sucralose e acessulfame-K.";

const FAQ = [
  { q:["O que é o ", { it:"QUERO+" }, "?"], a:"É um suplemento em pó sabor frutas vermelhas para preparo de bebida, desenvolvido para apoiar energia, disposição, vitalidade e bem-estar. 210g, 30 porções por pote." },
  { q:"Como devo usar?", a:"Misture 7g (equivalente a 1 scoop) em 100ml a 200ml de água ou bebida de preferência. Pode ser consumido quente ou frio." },
  { q:"Quantas vezes ao dia?", a:"O uso sugerido é de 1 vez ao dia, de preferência no mesmo horário, para criar consistência no seu ritual." },
  { q:"Em quanto tempo posso perceber diferença?", a:"Algumas pessoas relatam percepção entre 7 a 10 dias, mas os resultados podem variar conforme o organismo e a rotina de uso." },
  { q:"Preciso tomar por quanto tempo?", a:"Geralmente após o segundo mês, o seu corpo já começa a reagir e não será necessário tomar o suplemento todos os dias." },
  { q:"Tem contraindicação?", a:"Não é recomendado para gestantes, lactantes, menores de 19 anos, pessoas sensíveis à cafeína ou pessoas com hipertensão sem acompanhamento profissional." },
  { q:"É medicamento?", a:"Não. Este produto não é medicamento. É um suplemento alimentar em pó para preparo de bebida." },
  { q:["Tem ", { it:"garantia" }, "?"], a:"Sim. O produto possui garantia de satisfação de 30 dias. Se não ficar satisfeito, basta solicitar o reembolso dentro do prazo, conforme política da marca." },
];

/* ── render helper: array of strings + {it:"..."} or {br:true} ── */
function RichText({nodes}){
  if(typeof nodes === "string") return <>{nodes}</>;
  return <>
    {nodes.map((n,i)=>{
      if(typeof n === "string") return <span key={i}>{n}</span>;
      if(n.br) return <br key={i}/>;
      if(n.it) return <em key={i}>{n.it}</em>;
      return null;
    })}
  </>;
}

/* ── Nav ── */
function Nav({onCta}){
  return (
    <header className="nav">
      <div className="nav-logo">QUERO<span className="plus">+</span></div>
      <nav className="nav-meta">
        <a href="#beneficios">Benefícios</a>
        <a href="#composicao">Composição</a>
        <a href="#depoimentos">Depoimentos</a>
        <a href="#garantia">Garantia</a>
        <a href="#faq">FAQ</a>
        <a className="nav-cta" onClick={onCta}>Comprar</a>
      </nav>
    </header>
  );
}

/* ── Hero ── */
function Hero({tweaks, scrollTo}){
  const headline = HEADLINES[tweaks.headlineVariant] || HEADLINES["Sinta mais"];
  return (
    <section className="hero hero-grain" data-screen-label="01 Hero">
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <div className="eyebrow-row">
            <span className="eyebrow">Velmora · Edição QUERO+</span>
            <span className="dot"></span>
            <span className="eyebrow">Pó · Frutas Vermelhas · 210g</span>
          </div>
          <div className="hero-image">
            <span className="swirl s1 script">sinta mais</span>
            <img className="product-float"
              src="assets/produto-hero.webp"
              srcSet="assets/produto-hero-sm.webp 400w, assets/produto-hero-600.webp 600w, assets/produto-hero.webp 760w"
              sizes="(max-width:980px) 260px, 760px"
              width="760" height="760"
              fetchPriority="high"
              alt="QUERO+ pote com rosa e frutas vermelhas"/>
            <span className="swirl s2 script">frutas vermelhas</span>
          </div>
          <h1 className="h-display hero-headline">
            <RichText nodes={headline}/>
          </h1>
          <p className="lede hero-lede">
            Um <em style={{fontFamily:"var(--f-italic)",color:"#FFB2A8"}}>suplemento</em> sabor frutas vermelhas
            criado para quem quer mais disposição no dia a dia, libido e conexão com o parceiro,
            com ingredientes naturais e minerais essenciais.
          </p>
          <div className="hero-cta-row">
            <a className="btn btn-primary" onClick={scrollTo} href={tweaks.checkoutUrl}>
              {tweaks.ctaText} <span className="arrow"><Ico.arrow/></span>
            </a>
            <span className="cta-microcopy">Compra segura · 30 dias de garantia</span>
          </div>
          <div className="hero-trust">
            <div className="item"><span className="num">30 <em>·</em></span><span className="lbl">Porções por pote</span></div>
            <div className="item"><span className="num">7g</span><span className="lbl">Por scoop diário</span></div>
            <div className="item"><span className="num">30<em>d</em></span><span className="lbl">Garantia total</span></div>
            <div className="item"><span className="num">0</span><span className="lbl">Glúten</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Benefits ── */
function Benefits({scrollTo, tweaks}){
  return (
    <section className="section benefits" id="beneficios" data-screen-label="02 Beneficios">
      <div className="wrap">
        <div className="s-label reveal">
          <span className="num">02 —</span>
          <span>Benefícios</span>
          <span className="line"></span>
        </div>
        <div className="benefits-head">
          <h2 className="h-section reveal">
            Seis razões para incluir <em>QUERO+</em> na sua rotina.
          </h2>
          <p className="lede reveal" style={{color:"#5a4a4a",maxWidth:420}}>
            Não é mágica. É um ritual diário, simples e elegante, com ingredientes que apoiam
            como você se sente: corpo, energia e desejo.
          </p>
        </div>
        <div className="benefits-grid">
          {BENEFITS.map((b,i)=>{
            const I = Ico[b.ico];
            return (
              <div key={i} className="b-card reveal">
                <span className="b-num">{b.i}</span>
                <h3>{b.t} <em>{b.em}</em></h3>
                <p>{b.d}</p>
                <div style={{position:"absolute",top:32,right:32,opacity:.25,color:"var(--bordo)"}}><I/></div>
              </div>
            );
          })}
        </div>
        <div style={{marginTop:64,display:"flex",justifyContent:"center"}}>
          <a className="btn btn-on-light reveal" onClick={scrollTo} href={tweaks.checkoutUrl}>
            Quero esses benefícios <Ico.arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Composition ── */
function Composition({scrollTo, tweaks}){
  return (
    <section className="section comp" id="composicao" data-screen-label="03 Composicao">
      <div className="wrap">
        <div className="s-label reveal" style={{color:"#FFB2A8"}}>
          <span className="num" style={{color:"#FFB2A8"}}>03 —</span>
          <span>Composição</span>
          <span className="line"></span>
        </div>
        <div className="comp-head">
          <h2 className="h-section reveal">
            Uma fórmula pensada<br/>para energia, vitalidade<br/><em>e prazer</em>.
          </h2>
          <p className="lede reveal" style={{color:"#D7C5BD",maxWidth:440}}>
            Cada ingrediente foi escolhido pela sua tradição e pela sua função.
            Juntos, criam um ritual que apoia o corpo de dentro para fora.
          </p>
        </div>
        <div className="comp-grid">
          {COMPOSITION.map((c,i)=>(
            <div key={i} className="comp-card reveal">
              <div className="ix">Ingrediente {c.i}</div>
              <h3>{c.n}{c.em?<> <em>{c.em}</em></>:null}</h3>
              <p>{c.d}</p>
              {c.img ? (
                <div className="img-wrap"><img src={c.img} alt={c.n}/></div>
              ) : (
                <div className="img-wrap" style={{
                  display:"flex",alignItems:"center",justifyContent:"center",
                  background:"linear-gradient(135deg,#2E0509,#4A0810)",
                  fontFamily:"var(--f-italic)",fontSize:64,color:"#FFB2A8",
                }}>Mg · Zn · Fe</div>
              )}
            </div>
          ))}
        </div>
        <div style={{marginTop:80,textAlign:"center"}}>
          <p style={{fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:".32em",textTransform:"uppercase",color:"#FFB2A8",opacity:.7,marginBottom:24}}>
            Sabor frutas vermelhas · 210g · 30 porções
          </p>
          <a className="btn btn-primary reveal" onClick={scrollTo} href={tweaks.checkoutUrl}>
            {tweaks.ctaText} <Ico.arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Nutrition Table ── */
function Nutrition(){
  return (
    <section className="section nutri" id="nutricional" data-screen-label="04 Nutricional">
      <div className="wrap">
        <div className="s-label reveal">
          <span className="num">04 —</span>
          <span>Tabela Nutricional</span>
          <span className="line"></span>
        </div>
        <div className="nutri-grid">
          <div>
            <h2 className="h-section reveal">
              Transparência<br/>até o último<br/><em>miligrama</em>.
            </h2>
            <p className="lede reveal" style={{color:"#5a4a4a",marginTop:24,maxWidth:420}}>
              Tudo o que entra no QUERO+ está aqui: quantidade exata por porção
              e percentual diário recomendado. Sem letras miúdas.
            </p>
            <div className="nutri-meta reveal">
              <div className="nm-item"><span className="nm-k">Porção</span><span className="nm-v">7g · 1 scoop</span></div>
              <div className="nm-item"><span className="nm-k">Porções/embalagem</span><span className="nm-v">30</span></div>
              <div className="nm-item"><span className="nm-k">Peso líquido</span><span className="nm-v">210g</span></div>
              <div className="nm-item"><span className="nm-k">Glúten</span><span className="nm-v">Não contém</span></div>
            </div>
          </div>
          <div className="nutri-table reveal">
            <div className="nt-head">
              <span>Nutriente</span>
              <span>100ml</span>
              <span>7g</span>
              <span>%VD*</span>
            </div>
            {NUTRI_ROWS.map((r,i)=>(
              <div key={i} className="nt-row">
                <span className="nt-n">{r.n} <small>({r.u})</small></span>
                <span className="nt-v">{r.a}</span>
                <span className="nt-v">{r.b}</span>
                <span className="nt-vd">{r.vd}</span>
              </div>
            ))}
            <div className="nt-foot">
              <p>* Percentual de valores diários fornecidos pela porção.</p>
              <p>Não contém quantidades significativas de proteínas, gorduras totais, gorduras saturadas, gorduras trans, fibra alimentar e sódio.</p>
            </div>
          </div>
        </div>
        <div className="ingredients-list reveal">
          <div className="il-label">Lista completa de ingredientes</div>
          <p>{INGREDIENTES_FULL} <strong>Não contém glúten.</strong></p>
        </div>
      </div>
    </section>
  );
}

/* ── How to use ── */
function HowToUse(){
  return (
    <section className="section howto" data-screen-label="05 Ritual">
      <div className="wrap">
        <div className="s-label reveal">
          <span className="num">05 —</span>
          <span>Ritual</span>
          <span className="line"></span>
        </div>
        <div className="howto-grid">
          <div>
            <h2 className="h-section reveal" style={{marginBottom:48}}>
              Simples de preparar.<br/>Fácil de incluir<br/>na <em>rotina</em>.
            </h2>
            <div className="steps">
              {STEPS.map((s,i)=>(
                <div key={i} className="step reveal">
                  <div className="num">{s.n}</div>
                  <div>
                    <h3>{s.t}</h3>
                    <p>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
            <p className="body-md reveal" style={{marginTop:32,color:"#5a4a4a",fontStyle:"italic",fontFamily:"var(--f-italic)",fontSize:20}}>
              Pode ser preparado quente ou frio: você escolhe o seu momento.
            </p>
          </div>
          <div className="howto-image reveal">
            <img src="assets/produto-principal.webp" alt="QUERO+ produto"/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── For whom ── */
function ForWhom(){
  return (
    <section className="section forwhom" data-screen-label="06 Para quem">
      <div className="wrap">
        <div className="s-label reveal" style={{color:"#FFB2A8"}}>
          <span className="num" style={{color:"#FFB2A8"}}>06 —</span>
          <span>Para quem é</span>
          <span className="line"></span>
        </div>
        <div className="forwhom-grid">
          <div>
            <h2 className="h-section reveal">
              <em>QUERO+</em> é para quem<br/>quer se sentir melhor.
            </h2>
            <p className="lede reveal" style={{color:"#D7C5BD",marginTop:24,maxWidth:420}}>
              Não é um produto para todo mundo, e tudo bem. É para quem está
              pronto para um ritual de autocuidado mais intenso e mais presente.
            </p>
          </div>
          <div>
            <div className="fw-list">
              {FORWHOM.map((f,i)=>(
                <div key={i} className="fw-item reveal">
                  <span className="ix">{String(i+1).padStart(2,"0")}</span>
                  {typeof f === "string" ? <h4>{f}</h4> : <h4>{f.t} <em>{f.em}</em> {f.d}</h4>}
                  <span className="plus">+</span>
                </div>
              ))}
            </div>
            <div className="warning reveal">
              <div className="wh">Aviso importante</div>
              <p>Não recomendado para gestantes, lactantes, menores de 19 anos, pessoas sensíveis
              à cafeína ou pessoas com hipertensão sem acompanhamento profissional.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Gallery ── */
function Gallery(){
  return (
    <section className="gallery section-tight" data-screen-label="07 Galeria">
      <div className="wrap">
        <div className="s-label reveal">
          <span className="num">07 —</span>
          <span>Galeria</span>
          <span className="line"></span>
        </div>
        <h2 className="h-section reveal" style={{marginBottom:24,maxWidth:780}}>
          O <em>objeto do desejo</em>,<br/>visto de perto.
        </h2>
        <div className="gal-grid">
          <div className="gal-cell gc-6 reveal">
            <img src="assets/ingredientes.webp" alt="Ingredientes completos"/>
            <span className="cap">Composição completa</span>
          </div>
          <div className="gal-cell gc-7 reveal">
            <img src="assets/produto-principal.webp" alt="QUERO+ pote versão rose" style={{objectFit:"contain",background:"linear-gradient(135deg,#FFE9E2,#FFD6CC)",padding:0}}/>
            <span className="cap">Pote · Versão rose</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Testimonials ── */
function VideoCard({src}){
  const ref = useRef();
  const [playing, setPlaying] = useState(false);
  const toggle = ()=>{
    if(playing){ ref.current.pause(); setPlaying(false); }
    else { ref.current.play(); setPlaying(true); }
  };
  return (
    <div className="test-card test-vid" onClick={toggle}>
      <video ref={ref} src={src} playsInline preload="metadata"
        onEnded={()=>setPlaying(false)}/>
      <div className={`play-overlay${playing?" hidden":""}`}>
        <div className="play-btn">
          <svg viewBox="0 0 24 24" fill="currentColor" width="28" height="28">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
        <span className="play-label">Depoimento em vídeo</span>
      </div>
    </div>
  );
}

function Testimonials({scrollTo, tweaks}){
  const items = [
    {type:"img", src:"assets/screens/dep-01.jpeg"},
    {type:"img", src:"assets/screens/dep-02.jpeg"},
    {type:"img", src:"assets/screens/dep-03.jpeg"},
    {type:"img", src:"assets/screens/dep-05.jpeg"},
    {type:"img", src:"assets/screens/dep-06.jpeg"},
    {type:"img", src:"assets/screens/dep-07.jpeg"},
    {type:"img", src:"assets/screens/dep-08.jpeg"},
    {type:"img", src:"assets/screens/dep-09.jpeg"},
  ];
  return (
    <section className="section testimonials" id="depoimentos" data-screen-label="08 Depoimentos">
      <div className="wrap">
        <div className="s-label reveal" style={{color:"#FFB2A8"}}>
          <span className="num" style={{color:"#FFB2A8"}}>08 —</span>
          <span>Depoimentos</span>
          <span className="line"></span>
        </div>
        <div className="test-head">
          <h2 className="h-section reveal">
            Quem já sentiu<br/><em>não para mais</em>.
          </h2>
          <p className="lede reveal" style={{color:"#D7C5BD",marginTop:24,maxWidth:460}}>
            Resultados reais de clientes que incluíram o QUERO+ na rotina
            e não abriram mão.
          </p>
        </div>
        <div className="test-grid">
          {items.map((item,i)=>
            item.type==="vid"
              ? <VideoCard key={i} src={item.src}/>
              : <div key={i} className="test-card test-img reveal">
                  <img src={item.src} alt="Depoimento QUERO+"/>
                </div>
          )}
        </div>
        <div style={{marginTop:64,display:"flex",justifyContent:"center"}}>
          <a className="btn btn-primary reveal" onClick={scrollTo} href={tweaks.checkoutUrl}>
            Quero sentir também <Ico.arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Guarantee ── */
function GuaranteeSeal(){
  // SVG text-on-path circular seal — editorial, no pasted-image feel
  const text = "GARANTIA TOTAL · 30 DIAS · SEM RISCO · QUERO+ · ";
  return (
    <div className="seal">
      <svg viewBox="0 0 400 400" className="seal-svg">
        <defs>
          <path id="seal-circle" d="M 200,200 m -160,0 a 160,160 0 1,1 320,0 a 160,160 0 1,1 -320,0"/>
          <path id="seal-circle-inner" d="M 200,200 m -120,0 a 120,120 0 1,1 240,0 a 120,120 0 1,1 -240,0"/>
        </defs>
        {/* outer ring */}
        <circle cx="200" cy="200" r="195" fill="none" stroke="rgba(255,178,168,0.35)" strokeWidth="1"/>
        <circle cx="200" cy="200" r="170" fill="none" stroke="rgba(255,178,168,0.5)" strokeWidth="1"/>
        <circle cx="200" cy="200" r="140" fill="none" stroke="rgba(217,0,0,0.6)" strokeWidth="1"/>
        <circle cx="200" cy="200" r="118" fill="rgba(217,0,0,0.08)" stroke="rgba(255,178,168,0.4)" strokeWidth="1"/>

        {/* rotating outer text */}
        <text fill="#FFD6CC" fontFamily="JetBrains Mono, monospace" fontSize="13" letterSpacing="4">
          <textPath href="#seal-circle" startOffset="0">
            {text + text + text + text}
          </textPath>
        </text>

        {/* tick marks */}
        {Array.from({length:12}).map((_,i)=>{
          const a = (i/12) * Math.PI * 2;
          const x1 = 200 + Math.cos(a)*132;
          const y1 = 200 + Math.sin(a)*132;
          const x2 = 200 + Math.cos(a)*138;
          const y2 = 200 + Math.sin(a)*138;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,178,168,0.55)" strokeWidth="1"/>;
        })}

        {/* inner ornament — small star */}
        <g transform="translate(200 88)" fill="#FFB2A8">
          <circle r="2.5"/>
        </g>
        <g transform="translate(200 312)" fill="#FFB2A8">
          <circle r="2.5"/>
        </g>
      </svg>
      <div className="seal-center">
        <span className="seal-eyebrow">Garantia</span>
        <span className="seal-num">30</span>
        <span className="seal-dias">DIAS</span>
        <span className="seal-line"></span>
        <span className="seal-foot">satisfação ou reembolso</span>
      </div>
    </div>
  );
}
function Guarantee({scrollTo, tweaks}){
  return (
    <section className="section guarantee" id="garantia" data-screen-label="08 Garantia">
      <div className="wrap-narrow">
        <div className="s-label reveal" style={{color:"#FFB2A8"}}>
          <span className="num" style={{color:"#FFB2A8"}}>08 —</span>
          <span>Garantia</span>
          <span className="line"></span>
        </div>
        <div className="guarantee-grid">
          <div className="guarantee-seal-wrap reveal">
            <GuaranteeSeal/>
          </div>
          <div>
            <span className="seal-stamp reveal">Garantia incondicional</span>
            <h2 className="h-section reveal" style={{marginTop:18}}>
              Trinta dias para<br/>sentir, sem<br/><em>nenhum risco</em>.
            </h2>
            <p className="reveal">
              Experimente o QUERO+ com tranquilidade. Caso não fique satisfeito,
              você pode solicitar reembolso dentro do prazo de garantia, conforme
              política da marca. Sem perguntas difíceis. Sem letras miúdas.
            </p>
            <a className="btn btn-primary reveal" onClick={scrollTo} href={tweaks.checkoutUrl}>
              Comprar com garantia <Ico.arrow/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Offer ── */
function Offer({tweaks}){
  return (
    <section className="section offer" id="oferta" data-screen-label="09 Oferta">
      <div className="wrap-narrow">
        <div className="s-label reveal">
          <span className="num">09 —</span>
          <span>Oferta</span>
          <span className="line"></span>
        </div>
        <div className="offer-card reveal">
          <div className="offer-photo">
            <span className="label">Edição QUERO+ · 210g</span>
            <img src="assets/produto-principal.webp" alt="QUERO+ pote"/>
          </div>
          <div className="offer-info">
            {tweaks.showUrgency && (
              <span className="eyebrow reveal" style={{color:"var(--red)",marginBottom:18,display:"block"}}>
                ● Oferta de lançamento · estoque limitado
              </span>
            )}
            <h2 className="h-section">
              Escolha sentir<br/>mais <em>prazer</em><br/>na sua rotina.
            </h2>
            <p className="lede" style={{color:"#D7C5BD",marginTop:24}}>
              Garanta agora o seu QUERO+ e comece uma nova fase de energia,
              autocuidado e vitalidade.
            </p>
            <div className="price-block">
              <div className="pb-installments">
                <div className="from">a partir de</div>
                <div className="installments-big">{tweaks.installments}</div>
                <div className="pb-total">ou R$ {tweaks.price},{tweaks.priceCents} à vista</div>
              </div>
            </div>
            <ul className="offer-bullets">
              <li>1 pote · 210g · 30 porções diárias</li>
              <li>Sabor frutas vermelhas · sem glúten</li>
              <li>Garantia incondicional de 30 dias</li>
              <li>Envio para todo o Brasil</li>
            </ul>
            <a className="btn btn-primary" href={tweaks.checkoutUrl} style={{justifyContent:"center"}}>
              Comprar agora <Ico.arrow/>
            </a>
            <p className="cta-microcopy" style={{textAlign:"center",marginTop:16}}>
              Compra segura · pagamento criptografado
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ── */
function FaqItem({q, a, open, onClick}){
  const ref = useRef();
  const renderQ = Array.isArray(q) ? q.map((n,i)=>{
    if(typeof n === "string") return <span key={i}>{n}</span>;
    if(n.it) return <em key={i}>{n.it}</em>;
    return null;
  }) : q;
  return (
    <div className={`faq-item ${open?"open":""}`}>
      <button className="faq-q" onClick={onClick}>
        <span>{renderQ}</span>
        <span className="faq-toggle">+</span>
      </button>
      <div className="faq-a" ref={ref}>
        <div className="faq-a-inner">{a}</div>
      </div>
    </div>
  );
}
function Faq({scrollTo, tweaks}){
  const [open, setOpen] = useState(-1);
  return (
    <section className="section faq" id="faq" data-screen-label="10 FAQ">
      <div className="wrap">
        <div className="s-label reveal">
          <span className="num">10 —</span>
          <span>Perguntas</span>
          <span className="line"></span>
        </div>
        <div className="faq-grid">
          <div>
            <h2 className="h-section reveal">
              Dúvidas<br/>frequentes.
            </h2>
            <p className="lede reveal" style={{color:"#5a4a4a",marginTop:24,maxWidth:360}}>
              O que você precisa saber antes de incluir o QUERO+ no seu ritual.
            </p>
            <a className="btn btn-on-light reveal" onClick={scrollTo} href={tweaks.checkoutUrl} style={{marginTop:32}}>
              Ainda quero experimentar <Ico.arrow/>
            </a>
          </div>
          <div className="faq-list">
            {FAQ.map((f,i)=>(
              <FaqItem key={i} q={f.q} a={f.a} open={open===i} onClick={()=>setOpen(open===i?-1:i)}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ── */
function Footer(){
  return (
    <footer className="footer" data-screen-label="11 Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="brand">
            <div className="logo">QUERO<span className="plus">+</span></div>
            <p>Pó para preparo de bebida sabor frutas vermelhas. Uma criação Velmora,
              feita para quem quer mais energia, vitalidade e presença no dia a dia.</p>
          </div>
          <div className="footer-col">
            <h5>Produto</h5>
            <a href="#beneficios">Benefícios</a>
            <a href="#composicao">Composição</a>
            <a href="#garantia">Garantia</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <a href="#">Sobre a Velmora</a>
            <a href="#">Contato</a>
            <a href="#">Imprensa</a>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <a href="#">Política de Privacidade</a>
            <a href="#">Termos de Uso</a>
            <a href="#">Trocas e Reembolso</a>
            <a href="#">Contato</a>
          </div>
        </div>
        <div className="legal">
          <p>
            <strong style={{color:"#cabab2"}}>Aviso obrigatório:</strong> Este produto não é um medicamento.
            Não exceder a recomendação diária de consumo indicada na embalagem.
            Mantenha fora do alcance de crianças. Imagens meramente ilustrativas.
            QUERO+ é uma marca Velmora.
          </p>
          <span className="copy">© 2026 Velmora</span>
        </div>
      </div>
    </footer>
  );
}

/* ── App ── */
function App(){
  const tweaks = TWEAK_DEFAULTS;
  useReveal();

  useEffect(()=>{
    const p = PALETTES[tweaks.palette] || PALETTES.bordeaux;
    const root = document.documentElement;
    root.style.setProperty("--ink", p.ink);
    root.style.setProperty("--bordo-deep", p.bordoDeep);
    root.style.setProperty("--red", p.red);
    root.style.setProperty("--rose", p.rose);
    root.style.setProperty("--f-serif", FONTS[tweaks.displayFont] || FONTS.Cormorant);
  },[]);

  const scrollToOffer = (e)=>{
    if(e && e.preventDefault) e.preventDefault();
    document.getElementById("oferta")?.scrollIntoView({behavior:"smooth",block:"start"});
  };

  return (
    <>
      <Nav onCta={scrollToOffer}/>
      <Hero tweaks={tweaks} scrollTo={scrollToOffer}/>
      <Benefits scrollTo={scrollToOffer} tweaks={tweaks}/>
      <Composition scrollTo={scrollToOffer} tweaks={tweaks}/>
      <Nutrition/>
      <HowToUse/>
      <ForWhom/>
      <Gallery/>
      <Testimonials scrollTo={scrollToOffer} tweaks={tweaks}/>
      <Guarantee scrollTo={scrollToOffer} tweaks={tweaks}/>
      <Offer tweaks={tweaks}/>
      <Faq scrollTo={scrollToOffer} tweaks={tweaks}/>
      <Footer/>
      {tweaks.showStickyMobile && (
        <div className="sticky-cta">
          <a className="btn btn-primary" href={tweaks.checkoutUrl}>
            Comprar agora <Ico.arrow/>
          </a>
        </div>
      )}
    </>
  );
}

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