// Result screen v4 — Thiago Finch arquitetura limpa
// Princípio: 1 tela = 1 decisão. 5 blocos. Card unico de gravidade.
// Preço: R$ 37 (Pix à vista). Anchor R$ 97.

const { CheckIcon: RC, ArrowRight: RArrow, ChevronDown } = window.UI;
const { getTier, TIER_HEADLINES, TIER_ACCENT } = window.QUIZ_DATA;

// Pixel events
function fireViewContent() {
  if (typeof window.fbq === 'function') {
    window.fbq('track', 'ViewContent', { content_name: 'pagina_oferta_gelatina', content_category: 'health' });
  }
}
function fireScrollDepth(depth) {
  if (typeof window.fbq === 'function') window.fbq('trackCustom', 'ScrollDepth', { depth });
}
function fireReachedOffer() {
  if (typeof window.fbq === 'function') window.fbq('trackCustom', 'ReachedOffer');
}

// helper: lê array OU string OU vazio e retorna array sempre
function asArray(v) {
  if (Array.isArray(v)) return v;
  if (typeof v === 'string' && v.length) return [v];
  return [];
}

// ────────────────────────────────────────────────────────────────
// BLOCO 1 — HERO COMPACTO (perfil + tier + promessa em 1 linha)
// ────────────────────────────────────────────────────────────────
function HeroBlock({ answers, tier }) {
  const tierColor = TIER_ACCENT[tier];
  const q4Arr = asArray(answers.q4);
  const q6 = answers.q6 || "";

  const hasMenopausa = q4Arr.some(x => x.includes("menopausa"));
  const hasHipertensa = q4Arr.some(x => x.includes("Pressão alta"));
  const hasDiabetica = q4Arr.some(x => x.includes("Diabetes"));

  let perfilFrase = "Mulher acima dos 45";
  if (hasMenopausa) perfilFrase = "Mulher na menopausa";
  else if (hasHipertensa) perfilFrase = "Mulher 45+ com pressão alta";
  else if (hasDiabetica) perfilFrase = "Mulher 45+ com diabetes";

  // Faixa realista de kg: déficit calórico via saciedade
  let metaTxt = "2 a 5kg";
  if (q6.includes("Até 5kg")) metaTxt = "até 5kg";
  else if (q6.includes("5 e 10kg")) metaTxt = "3 a 6kg";
  else if (q6.includes("10 e 15kg")) metaTxt = "4 a 8kg";
  else if (q6.includes("15kg")) metaTxt = "5 a 10kg";

  return (
    <section className="hero-v4">
      <div className="hero-tier-row">
        <span className="tier-pill-v4" style={{ background: tierColor + '15', color: tierColor }}>
          ● PERFIL {tier}
        </span>
      </div>

      <div className="hero-perfil">
        <div className="hero-avatar-img">
          <img src="/img/comendo-gelatina.png" alt="Mulher comendo gelatina bariátrica" />
        </div>
        <div>
          <div className="hero-perfil-label">Versão personalizada para</div>
          <div className="hero-perfil-name">{perfilFrase}</div>
        </div>
      </div>

      <h1 className="hero-promessa">
        Tire a fome <strong>igual canetinha</strong>, só que natural. Reduza a vontade de comer em até <strong>15% por refeição</strong> e desinche a barriga em 21 dias.
      </h1>
      <p className="hero-meta-info">
        Resultado esperado pro seu perfil: <strong>{metaTxt}</strong> em 21 dias com a receita + redução de açúcar.
      </p>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO 2 — 4 BENEFÍCIOS HIERÁRQUICOS
// ────────────────────────────────────────────────────────────────
function BenefitsBlockV4() {
  const benefits = [
    { icon: "💉", text: <><strong>Tira a fome igual canetinha</strong> (Ozempic, Mounjaro), só que natural, sem injeção e sem efeito colateral</> },
    { icon: "🍽️", text: <>Reduz a vontade de comer em <strong>até 15% por refeição</strong> (comprovado em estudos clínicos)</> },
    { icon: "💰", text: <>Custa <strong>R$ 37 uma vez</strong>, vs canetinha de R$ 1.200/mês. E sem rebote</> },
    { icon: "❤️", text: <>Versão segura pra <strong>hipertensa, diabética e na menopausa</strong>, com ingredientes do mercadinho</> }
  ];
  return (
    <section className="benefits-v4">
      {benefits.map((b, i) => (
        <div key={i} className="benefit-v4-item">
          <span className="benefit-v4-icon">{b.icon}</span>
          <span className="benefit-v4-text">{b.text}</span>
        </div>
      ))}
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO MECANISMO — Por que tira a fome igual canetinha (linguagem simples)
// ────────────────────────────────────────────────────────────────
function MechanismBlock() {
  return (
    <section className="mechanism-block">
      <div className="mech-kicker">COMO FUNCIONA</div>
      <h3 className="mech-title">Por que tira a fome igual canetinha</h3>

      <div className="mech-row">
        <div className="mech-num">1</div>
        <div>
          <strong>Existe um hormônio que avisa o cérebro: "já comi o suficiente".</strong>
          <p>Quando esse hormônio tá alto, a fome cai e você fica satisfeita por mais tempo. É exatamente por isso que canetinhas como Ozempic e Mounjaro funcionam.</p>
        </div>
      </div>

      <div className="mech-row">
        <div className="mech-num">2</div>
        <div>
          <strong>Canetinha injeta uma versão artificial desse hormônio.</strong>
          <p>Custa R$ 1.200 a R$ 2.000 por mês, vem com efeitos colaterais (náusea, refluxo, perda de músculo) e o efeito some no dia que você para de tomar.</p>
        </div>
      </div>

      <div className="mech-row">
        <div className="mech-num">3</div>
        <div>
          <strong>A Gelatina Bariátrica faz o seu corpo produzir esse hormônio sozinho.</strong>
          <p>Estudos mostram que a gelatina aumenta esse hormônio depois das refeições, e reduz a vontade de comer na refeição seguinte em até 15%. Junto com canela e gengibre (também comprovados em pesquisa), o efeito fica ainda mais forte. Sem injeção, sem efeito colateral.</p>
          <p className="mech-tech-note">(Nome técnico do hormônio: GLP-1)</p>
        </div>
      </div>

      <a
        className="mech-study-link"
        href="https://pmc.ncbi.nlm.nih.gov/articles/PMC12530961/"
        target="_blank"
        rel="noopener noreferrer"
      >
        Ver estudo peer-reviewed →
      </a>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO 2.5 — ANTES / DEPOIS (prova social visual)
// ────────────────────────────────────────────────────────────────
function BeforeAfterBlock() {
  return (
    <section className="before-after">
      <div className="ba-kicker">QUANDO VOCÊ COME MENOS POR ESCOLHA</div>
      <h3 className="ba-title">A diferença em 21 dias</h3>
      <div className="ba-grid">
        <figure className="ba-card">
          <div className="ba-label ba-label-before">ANTES</div>
          <img src="/img/antes.png" alt="Antes do protocolo" loading="lazy" />
          <figcaption className="ba-caption">Fome constante, comendo demais, barriga inchada</figcaption>
        </figure>
        <figure className="ba-card">
          <div className="ba-label ba-label-after">DEPOIS · 21 DIAS</div>
          <img src="/img/depois.png" alt="Depois do protocolo de 21 dias" loading="lazy" />
          <figcaption className="ba-caption">Saciedade natural, comendo menos sem esforço, roupa folgada</figcaption>
        </figure>
      </div>
      <p className="ba-disclaimer">Resultados podem variar conforme disciplina e perfil. A receita potencializa a saciedade, mas o emagrecimento depende de déficit calórico associado.</p>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO 2.7 — DEPOIMENTOS estilo Twitter (voz literal YouTube)
// ────────────────────────────────────────────────────────────────
function HeartIcon({ filled }) {
  if (filled) {
    return (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="#E0245E" stroke="#E0245E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
      </svg>
    );
  }
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5B7083" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
  );
}

function TweetCard({ id, photo, name, handle, text, initialLikes, date }) {
  const storageKey = `gb_like_${id}`;
  const [liked, setLiked] = React.useState(() => {
    try { return localStorage.getItem(storageKey) === '1'; } catch (e) { return false; }
  });
  const likes = initialLikes + (liked ? 1 : 0);

  const toggleLike = (e) => {
    e.preventDefault();
    const next = !liked;
    setLiked(next);
    try {
      if (next) localStorage.setItem(storageKey, '1');
      else localStorage.removeItem(storageKey);
    } catch (e) {}
    if (next && typeof window.fbq === 'function') {
      window.fbq('trackCustom', 'TestimonialLiked', { testimonial: id });
    }
  };

  return (
    <article className="tweet-card">
      <header className="tweet-header">
        <img src={photo} alt={name} className="tweet-avatar" loading="lazy" />
        <div className="tweet-id">
          <div className="tweet-name-row">
            <span className="tweet-name">{name}</span>
            <svg className="tweet-verified" width="16" height="16" viewBox="0 0 24 24" fill="#1DA1F2">
              <path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.354-.643.366-.012.001-.024 0-.037 0-.247 0-.48-.11-.642-.30l-2.93-3.71c-.272-.337-.232-.84.103-1.107.337-.27.838-.227 1.106.107l2.245 2.84 3.745-5.6c.222-.34.687-.43 1.022-.21.34.22.43.69.215 1.024z"></path>
            </svg>
          </div>
          <div className="tweet-handle">{handle} · {date}</div>
        </div>
      </header>

      <p className="tweet-text">{text}</p>

      <footer className="tweet-actions">
        <button
          className={"tweet-like " + (liked ? "is-liked" : "")}
          onClick={toggleLike}
          aria-label={liked ? "Descurtir" : "Curtir"}
        >
          <HeartIcon filled={liked} />
          <span className="tweet-like-count">{likes}</span>
        </button>
      </footer>
    </article>
  );
}

function TestimonialsBlock() {
  const items = [
    {
      id: "carla",
      photo: "/img/carla.jpg",
      name: "Carla Cristina",
      handle: "@carlacristinadearaujo",
      date: "há 3 meses",
      text: "Seguindo as sugestões da Patrícia, eu emagreci 10 kg, tirando açúcar e carboidratos. Não foi fácil, mas valeu cada dia. Hoje minhas taxas estão normais e a barriga desinchou.",
      initialLikes: 267
    },
    {
      id: "rosemeire",
      photo: "/img/rosimeire.jpg",
      name: "Rosemeire Ferreira",
      handle: "@rosemeireferreirafs",
      date: "há 2 meses",
      text: "Fiz a gelatina. Rendeu 20 cubos. São deliciosas. Amamos. Gratidão. Ótima e abençoada semana para todos. 🙏",
      initialLikes: 104
    }
  ];
  return (
    <section className="testimonials-block">
      <div className="testimonials-kicker">O QUE ESTÃO FALANDO</div>
      {items.map((t) => <TweetCard key={t.id} {...t} />)}
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO 3 — CARD ÚNICO DE CHECKOUT (centro de gravidade)
// Inclui produto + bônus integrados + preço + botão + selo Hotmart
// ────────────────────────────────────────────────────────────────
function CheckoutCardV4({ onCheckout }) {
  const items = [
    { text: "Receita certificada com proporções exatas", bonus: false },
    { text: "Cardápio de apoio para 21 dias", bonus: true },
    { text: "3 variações da receita (sem hibisco, com uva, com limão)", bonus: true },
    { text: "Mini-guia anti-inchaço de emergência (pra dia de evento)", bonus: true },
    { text: "Lista de substituições inteligentes (se faltar 1 ingrediente)", bonus: true }
  ];

  return (
    <section id="offer" className="checkout-v4">
      <div className="checkout-v4-card">
        <div className="checkout-hero-img">
          <img src="/img/gelatina-prato.png" alt="Gelatina Bariátrica pronta no prato" loading="lazy" />
        </div>
        <div className="checkout-v4-product">Gelatina Bariátrica · 21 Dias</div>

        <div className="checkout-v4-list-label">O que vem dentro:</div>
        <ul className="checkout-v4-list">
          {items.map((it, i) => (
            <li key={i} className={"checkout-v4-li " + (it.bonus ? "is-bonus" : "")}>
              <span className="li-check"><RC size={14} color="#15803D" /></span>
              <span className="li-text">{it.text}</span>
              {it.bonus && <span className="li-bonus-tag">BÔNUS</span>}
            </li>
          ))}
        </ul>

        <div className="checkout-v4-price">
          <span className="price-old-v4">R$ 97</span>
          <span className="price-arrow-v4">→</span>
          <span className="price-now-v4">
            <span className="price-cur">R$</span>
            <span className="price-val">37</span>
          </span>
        </div>
        <div className="price-note-v4">à vista no Pix ou cartão</div>

        <button className="btn-cta-v4" onClick={() => onCheckout("unico")}>
          QUERO COMEÇAR AGORA <RArrow size={20} />
        </button>

        <div className="hotmart-ribbon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
          <span>Compra protegida pela</span>
          <svg className="hotmart-logo-svg" width="71" height="20" viewBox="0 0 71 20" fill="white" xmlns="http://www.w3.org/2000/svg" aria-label="Hotmart">
            <path d="M69.5738 16.5306C70.0182 16.5306 70.5388 16.4547 70.9317 16.3623C70.9713 16.3529 70.9991 16.3176 70.9991 16.2771V14.7764C70.9991 14.7188 70.9441 14.6764 70.8879 14.6918C70.6708 14.7505 70.421 14.8017 70.1299 14.8017C69.4034 14.8017 69.1324 14.5612 69.1324 13.9802V11.0059H70.8832C70.9317 11.0059 70.9707 10.9671 70.9707 10.9189V9.19474C70.9707 9.14649 70.9317 9.10768 70.8832 9.10768H69.1324V6.60265C69.1324 6.55443 69.0934 6.51562 69.0449 6.51562H66.9392C66.8906 6.51562 66.8516 6.55443 66.8516 6.60265V9.10768H65.8133C65.7647 9.10768 65.7257 9.14649 65.7257 9.19474V10.9189C65.7257 10.9671 65.7647 11.0059 65.8133 11.0059H66.8516V14.136C66.8516 15.7079 67.7066 16.5293 69.5732 16.5293M60.3564 16.4318H62.4621C62.5106 16.4318 62.5496 16.393 62.5496 16.3447V12.8623C62.5496 11.6586 63.1484 11.0071 64.4879 11.0071H64.8707C64.9193 11.0071 64.9583 10.9683 64.9583 10.9201V9.15297C64.9583 9.10473 64.9193 9.06592 64.8707 9.06592H64.5447C63.462 9.06592 62.8633 9.49111 62.4928 10.4255L62.4793 9.19416C62.4793 9.14649 62.4396 9.10826 62.3917 9.10826H60.3564C60.3079 9.10826 60.2688 9.14707 60.2688 9.19531V16.3441C60.2688 16.3924 60.3079 16.4312 60.3564 16.4312V16.4318ZM55.6664 14.9869C54.9398 14.9869 54.5262 14.647 54.5262 14.1372C54.5262 13.6274 54.954 13.2452 55.8941 13.2452C56.3071 13.2452 56.6923 13.3157 57.1194 13.4716V13.7832C57.1194 14.5053 56.5065 14.9869 55.6658 14.9869M54.8682 16.6158C55.9367 16.6158 56.6923 16.1624 57.1768 15.3692L57.2691 16.3529C57.2733 16.3976 57.3111 16.4318 57.3561 16.4318H59.2554C59.3038 16.4318 59.3429 16.393 59.3429 16.3447V11.4175C59.3429 9.888 58.0886 8.92479 56.0793 8.92479C54.07 8.92479 52.8299 9.76451 52.6554 11.18C52.6489 11.2311 52.6903 11.2758 52.7424 11.2758H54.7279C54.7682 11.2758 54.8019 11.2482 54.8126 11.2094C54.9333 10.7707 55.3161 10.5396 56.0219 10.5396C56.7627 10.5396 57.1194 10.8653 57.1194 11.4034V12.2108C56.6632 11.9985 56.0651 11.8991 55.4947 11.8991C53.5855 11.8991 52.3311 12.8764 52.3311 14.3354C52.3311 15.709 53.3997 16.6158 54.8676 16.6158M40.1353 16.4318H42.2411C42.2896 16.4318 42.3286 16.393 42.3286 16.3447V12.4801C42.3286 11.2623 42.8416 10.7236 43.6256 10.7236C44.3521 10.7236 44.694 11.2335 44.694 12.2249V16.3447C44.694 16.393 44.7331 16.4318 44.7816 16.4318H46.8873C46.9359 16.4318 46.9749 16.393 46.9749 16.3447V12.4942C46.9749 11.2905 47.4452 10.7236 48.2434 10.7236C48.9558 10.7236 49.3409 11.2053 49.3409 12.2108V16.3447C49.3409 16.393 49.38 16.4318 49.4285 16.4318H51.5342C51.5827 16.4318 51.6218 16.393 51.6218 16.3447V11.7862C51.6218 10.0868 50.9094 8.92544 49.0995 8.92544C48.031 8.92544 47.2328 9.44935 46.7199 10.285C46.3495 9.34998 45.594 8.92544 44.497 8.92544C43.4001 8.92544 42.6304 9.59105 42.2884 10.2285L42.2357 9.19178C42.2333 9.14592 42.1949 9.10948 42.1488 9.10948H40.1389C40.0904 9.10948 40.0513 9.14829 40.0513 9.19646V16.3453C40.0513 16.3935 40.0904 16.4323 40.1389 16.4323L40.1353 16.4318ZM37.7682 16.5306C38.2131 16.5306 38.7337 16.4547 39.1265 16.3623C39.1656 16.3529 39.1928 16.3183 39.1928 16.2777V14.7752C39.1928 14.7182 39.1384 14.6764 39.0828 14.6918C38.8651 14.7505 38.6154 14.8023 38.3237 14.8023C37.5972 14.8023 37.3261 14.5618 37.3261 13.9808V11.0065H39.123C39.1461 11.0065 39.1644 10.9882 39.1644 10.9653V9.15002C39.1644 9.12712 39.1461 9.10891 39.123 9.10891H37.3261V6.55855C37.3261 6.53561 37.3078 6.51739 37.2848 6.51739H35.0879C35.0648 6.51739 35.0465 6.53561 35.0465 6.55855V9.10891H33.9626C33.9395 9.10891 33.9212 9.12712 33.9212 9.15002V10.9653C33.9212 10.9882 33.9395 11.0065 33.9626 11.0065H35.0465V14.1366C35.0465 15.7085 35.9015 16.53 37.7682 16.53M29.8873 14.7887C28.8897 14.7887 28.3342 14.0667 28.3342 12.7635C28.3342 11.4605 28.8897 10.7524 29.8873 10.7524C30.8848 10.7524 31.4404 11.4746 31.4404 12.7635C31.4404 14.0526 30.8848 14.7887 29.8873 14.7887ZM29.8873 16.6158C32.2101 16.6158 33.749 15.058 33.749 12.8341V12.6924C33.749 10.4831 32.2101 8.92479 29.8873 8.92479C27.5644 8.92479 26.0256 10.4825 26.0256 12.6924V12.8341C26.0256 15.0575 27.5502 16.6158 29.8873 16.6158ZM18.2044 16.4318H20.3101C20.3586 16.4318 20.3977 16.393 20.3977 16.3447V12.409C20.3977 11.3329 20.9533 10.7377 21.7798 10.7377C22.6489 10.7377 22.9625 11.3182 22.9625 12.3096V16.3441C22.9625 16.3924 23.0016 16.4312 23.0501 16.4312H25.1558C25.2043 16.4312 25.2433 16.3924 25.2433 16.3441V11.7286C25.2433 10.0997 24.5452 8.92421 22.6785 8.92421C21.51 8.92421 20.7834 9.51934 20.4125 10.142V6.60324C20.4125 6.55502 20.3735 6.51621 20.3249 6.51621H18.205C18.1565 6.51621 18.1174 6.55502 18.1174 6.60324V16.3441C18.1174 16.3924 18.1565 16.4312 18.205 16.4312L18.2044 16.4318Z"/>
            <path d="M7.30899 16.6217C5.21986 16.6217 3.52476 14.8987 3.52476 12.7742C3.52476 10.6496 5.21808 8.92663 7.30899 8.92663C9.39991 8.92663 11.0932 10.6496 11.0932 12.7742C11.0932 14.8987 9.39991 16.6217 7.30899 16.6217ZM14.1769 9.49352C13.9154 8.57085 13.5373 7.67114 12.996 6.78205C12.996 6.78205 12.4854 5.94174 12.2712 5.68711C12.2191 5.62126 12.1127 5.69417 12.1529 5.76885C12.2139 5.89411 12.2683 6.047 12.2298 6.19871C12.1671 6.38159 11.9618 6.51037 11.7719 6.44392C11.7216 6.42275 11.6743 6.39335 11.6322 6.34983C11.437 6.14991 11.3376 5.8206 11.2104 5.40133C11.0968 5.0291 10.9578 4.56455 10.7033 4.06295C10.2921 3.24851 9.80402 2.87099 9.78504 2.85511C9.76084 2.8363 9.72592 2.8363 9.69984 2.85511C9.67383 2.87452 9.66318 2.90569 9.67383 2.93685C9.67564 2.94391 9.88089 3.61545 9.48569 4.12352C9.32891 4.32698 9.08867 4.4487 8.80946 4.46634C8.52901 4.4834 8.25212 4.39166 8.08469 4.22642C7.67166 3.81421 7.62319 3.08328 7.63145 2.68458C7.65746 1.35502 8.06158 0.424161 8.27283 0.116025C8.29174 0.090151 8.29058 0.0536926 8.26928 0.0272307C8.24856 0.00253295 8.21538 -0.00746354 8.18582 0.00606119C6.5499 0.712887 5.36481 1.9166 4.76073 3.48843C4.41935 4.42283 4.27143 4.84916 4.15073 5.11731C4.0395 5.36252 3.93656 5.47601 3.83183 5.53834C3.77444 5.57304 3.70285 5.59244 3.63126 5.59597C3.52476 5.58538 2.99701 5.48836 3.45672 4.611C3.49518 4.53808 3.39401 4.46341 3.33839 4.52397L2.97571 4.9209C2.95973 4.93854 2.94257 4.95559 2.92659 4.97323L2.86566 5.03969C2.85501 5.05204 2.84672 5.06203 2.83785 5.07438C1.69477 6.37277 0.895443 8.03283 0.43513 9.56935C0.0233385 11.0477 -0.00328615 12.2255 0.0002638 12.6748V12.7742C0.0002638 14.7594 0.759951 16.6246 2.14147 18.0295C3.52121 19.432 5.35771 20.2064 7.30899 20.2064C9.2603 20.2064 11.0968 19.4337 12.4766 18.0295C13.8563 16.6253 14.6178 14.7594 14.6178 12.7736C14.6178 11.5082 14.4538 10.4785 14.1769 9.49295"/>
          </svg>
          <span>· Empresa 100% verificada</span>
        </div>

        <p className="checkout-v4-note">Após o Pix, você recebe a receita no seu e-mail em até 3 minutos.</p>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO 4 — GARANTIA EM 1 LINHA
// ────────────────────────────────────────────────────────────────
function GuaranteeLine() {
  return (
    <section className="guarantee-line">
      <span className="g-icon">🛡️</span>
      <div className="g-text">
        <strong>7 dias de garantia incondicional.</strong>
        <span>Se não funcionar, devolvo 100% sem pergunta.</span>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// BLOCO 5 — FAQ COLAPSÁVEL (4 perguntas, todas fechadas)
// ────────────────────────────────────────────────────────────────
const FAQ_ITEMS_V4 = [
  { q: "É a mesma coisa que tomar Ozempic?", a: "Não. Canetinha é um remédio injetado que coloca um hormônio artificial no seu corpo. A Gelatina faz o seu corpo produzir esse mesmo hormônio sozinho, naturalmente, comendo. O efeito é mais suave, mais sustentável e sem náusea, refluxo ou perda de músculo. E custa R$ 37 uma vez, em vez de R$ 1.200 todo mês." },
  { q: "Quanto eu posso esperar perder em 21 dias?", a: "Depende do seu perfil e disciplina. Em média, mulheres acima dos 45 que seguem a receita E reduzem ultraprocessados perdem entre 2 e 8kg em 21 dias. A receita é ferramenta de saciedade, não fórmula mágica. O resultado vem do déficit calórico que ela facilita." },
  { q: "Em quanto tempo eu recebo a receita?", a: "Na hora. Vai pro seu e-mail em 1 a 2 minutos depois do pagamento aprovado. PDF simples que você baixa e abre no celular." },
  { q: "Tenho pressão alta, posso?", a: "Sim. Você recebe a versão sem hibisco específica pra hipertensa. A perda de peso ajuda a baixar a pressão naturalmente." },
  { q: "Estou na menopausa, vai funcionar?", a: "Sim. É justamente onde mais funciona. Na menopausa, a queda do estrogênio diminui a saciedade natural e dá fome o tempo todo. A Gelatina estimula esse hormônio e compensa exatamente isso. A receita foi ajustada pro perfil hormonal feminino acima dos 45." },
  { q: "E se eu não conseguir seguir certinho?", a: "Você tem 7 dias pra testar. Se não conseguir começar ou achar que não é pra você, devolvo o dinheiro sem pergunta. Sem risco nenhum." }
];

function FAQv4() {
  const [open, setOpen] = React.useState(-1);
  return (
    <section className="faq-v4">
      <h3 className="faq-v4-title">Dúvidas frequentes</h3>
      <div className="faq-v4-list">
        {FAQ_ITEMS_V4.map((it, i) => (
          <div key={i} className={"faq-v4-item " + (open === i ? "open" : "")}>
            <button className="faq-v4-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{it.q}</span>
              <ChevronDown size={16} rotated={open === i} />
            </button>
            {open === i && <div className="faq-v4-a">{it.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────
// FOOTER MÍNIMO
// ────────────────────────────────────────────────────────────────
function FooterV4() {
  return (
    <footer className="footer-v4">
      <p>Conteúdo educacional. Não substitui consulta médica ou nutricional.</p>
      <p className="footer-v4-lgpd">Tratamos seus dados em conformidade com a LGPD.</p>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────────
// RESULT SCREEN V4 — orquestração
// ────────────────────────────────────────────────────────────────
function ResultScreen({ answers, onCheckout }) {
  const tier = getTier(answers);

  React.useEffect(() => {
    fireViewContent();
    const milestones = { 25: false, 50: false, 75: false, 100: false };
    const handleScroll = () => {
      const total = document.documentElement.scrollHeight - window.innerHeight;
      if (total <= 0) return;
      const pct = Math.round((window.scrollY / total) * 100);
      [25, 50, 75, 100].forEach(m => {
        if (pct >= m && !milestones[m]) { milestones[m] = true; fireScrollDepth(m); }
      });
    };
    window.addEventListener('scroll', handleScroll, { passive: true });

    let observer;
    const offerObserveTimer = setTimeout(() => {
      const offer = document.getElementById('offer');
      if (offer && 'IntersectionObserver' in window) {
        observer = new IntersectionObserver((entries) => {
          entries.forEach(e => {
            if (e.isIntersecting) { fireReachedOffer(); observer.disconnect(); }
          });
        }, { threshold: 0.3 });
        observer.observe(offer);
      }
    }, 500);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      clearTimeout(offerObserveTimer);
      if (observer) observer.disconnect();
    };
  }, []);

  return (
    <div className="result-v4-wrap">
      <div className="result-v4-topbar">
        <window.UI.BrandMark />
      </div>

      <div className="result-v4-inner">
        <HeroBlock answers={answers} tier={tier} />
        <BenefitsBlockV4 />
        <MechanismBlock />
        <BeforeAfterBlock />
        <TestimonialsBlock />
        <CheckoutCardV4 onCheckout={onCheckout} />
        <GuaranteeLine />
        <FAQv4 />
        <FooterV4 />
      </div>
    </div>
  );
}

window.ResultScreen = ResultScreen;