// sections2.jsx — Lower-half sections (roadmap, social proof, pricing, FAQ, etc)

// ─────────────────────────────────────────────────────────────────────────────
// ROADMAP SECTION (wraps the interactive Roadmap component)
// ─────────────────────────────────────────────────────────────────────────────

function RoadmapSection() {
  return (
    <section className="section alt roadmap-section" data-screen-label="06 Roadmap">
      <div className="reveal">
        <span className="eyebrow">A trilha completa</span>
        <h2 className="serif">
          Sete habilidades.{" "}
          <span className="circled">
            Uma ordem que faz sentido.
            <CircleScribble stroke="var(--accent)" strokeWidth={3} />
          </span>
        </h2>
        <p className="lede">Toque em cada etapa pra ver o que você aprende e quando.</p>
      </div>
      <div className="reveal" data-delay="1">
        <Roadmap />
      </div>
      <div className="roadmap-callout reveal" data-delay="2">
        <span className="hand" style={{ fontSize: 22, color: "var(--primary)" }}>+ o bônus:</span>
        <span> uma trilha sequencial de conteúdos do básico até a independência — pra você continuar sem travar depois do 1º mês.</span>
      </div>
      <style>{`
        .roadmap-callout { margin-top: 28px; padding: 18px 20px; background: var(--bg); border: 1.5px dashed var(--ink); border-radius: var(--r-md); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PROVA SOCIAL
// ─────────────────────────────────────────────────────────────────────────────

const TESTIMONIALS = [
  { quote: "Pela primeira vez senti que estava estudando no caminho certo. Antes eu pulava de app em app sem saber o que fazia sentido.", name: "[Nome]", loc: "[Cidade]", avatar: "M", color: "var(--orange)" },
  { quote: "Não sabia nem por onde começar. O planner do 1º mês mudou tudo — só abrir e seguir.", name: "[Nome]", loc: "[Cidade]", avatar: "J", color: "var(--yellow)" },
  { quote: "Agora eu sei o que estudar sem precisar perguntar pra ninguém. É como ter um plano pessoal.", name: "[Nome]", loc: "[Cidade]", avatar: "A", color: "var(--blue)" },
];

function CounterNum({ to, suffix = "" }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const dur = 1200;
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / dur);
            const ease = 1 - Math.pow(1 - p, 3);
            setN(Math.round(to * ease));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{n}{suffix}</span>;
}

function ProvaSocialSection() {
  return (
    <section className="section" data-screen-label="07 Prova Social">
      <div className="reveal">
        <span className="eyebrow">A turma inicial</span>
        <h2 className="serif">Autodidatas reais, estudando agora.</h2>
      </div>

      <div className="stat-row reveal" data-delay="1" style={{ marginTop: 28 }}>
        <div className="stat">
          <span className="num">+<CounterNum to={10} /></span>
          <div className="lbl">alunos já estudando com o método</div>
        </div>
        <div className="stat">
          <span className="num"><CounterNum to={7} /></span>
          <div className="lbl">habilidades destrinchadas em aulas curtas</div>
        </div>
      </div>

      <div className="testi-stack">
        {TESTIMONIALS.map((t, i) => (
          <div key={i} className="testi reveal" data-delay={i + 1}>
            <div className="stars">★★★★★</div>
            <p className="quote">"{t.quote}"</p>
            <div className="who">
              <div className="avatar" style={{ background: t.color, color: t.color === "var(--yellow)" ? "var(--ink)" : "white" }}>{t.avatar}</div>
              <div>
                <div className="name">{t.name}</div>
                <div className="loc">{t.loc}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <p className="testi-note reveal" data-delay="4">
        <span className="hand" style={{ color: "var(--primary)", fontSize: 22 }}>nota da Mari:</span> capturando depoimentos com foco em resultado específico — print de evolução e relato de antes/depois são os mais persuasivos. Esses lugares são pra você.
      </p>

      <style>{`
        .testi-stack { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
        .testi-note { margin-top: 24px; padding: 16px 18px; background: var(--bg-2); border-radius: var(--r-md); font-size: 13px; line-height: 1.5; color: var(--ink-2); font-style: italic; border: 1px dashed var(--line); }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// OFERTA
// ─────────────────────────────────────────────────────────────────────────────

function OfertaSection({ ctaCopy, onCta }) {
  const cta = CTA_COPY[ctaCopy] || CTA_COPY.benefit;
  return (
    <section className="section alt" data-screen-label="08 Oferta">
      <div className="reveal">
        <span className="eyebrow">A oferta</span>
        <h2 className="serif">O que você recebe hoje.</h2>
      </div>

      <div className="offer reveal" data-delay="1" style={{ marginTop: 28 }}>
        <div className="seal" aria-hidden="true">
          <SquiggleLine stroke="var(--accent)" strokeWidth={4} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />
          <span style={{ position: "relative", zIndex: 1 }}>acesso<br />imediato</span>
        </div>

        <div className="offer-row">
          <div className="ck">✓</div>
          <div>
            <h4>Aulas: Por que e como estudar cada habilidade</h4>
            <p>Vocabulary, Grammar, Listening, Reading, Speaking, Writing e Pronunciation.</p>
            <span className="vl">Valor: R$ 67</span>
          </div>
        </div>

        <div className="offer-row">
          <div className="ck">✓</div>
          <div>
            <h4>Planner no Notion — Planejamento do 1º mês</h4>
            <p>Organizado por semana e habilidade. É só abrir e executar.</p>
            <span className="vl">Valor: R$ 47</span>
          </div>
        </div>

        <div className="offer-row offer-bonus">
          <div className="ck" style={{ background: "var(--primary)", color: "white" }}>★</div>
          <div>
            <h4>BÔNUS: Roadmap de Conteúdos</h4>
            <p>Lista sequencial do básico até a independência — pra você continuar sozinho sem travar.</p>
            <span className="vl">Valor: R$ 37</span>
          </div>
        </div>

        <div className="offer-total">
          <div className="ot-l">
            <span>Valor total</span>
            <s>R$ 151</s>
          </div>
          <div className="ot-l" style={{ marginTop: 2 }}>
            <span style={{ color: "var(--ink)", fontWeight: 600 }}>Hoje por</span>
            <span></span>
          </div>
          <div className="big">
            <span className="num">R$97</span>
            <span className="lbl">à vista</span>
          </div>
          <div className="parc">ou 12x de <strong>R$ 8,09</strong> no cartão</div>
        </div>

        <button className="cta" onClick={onCta} style={{ marginTop: 24 }}>
          {cta.label} {cta.price && <span style={{ opacity: 0.85, fontWeight: 600 }}>{cta.price}</span>}
          <span>→</span>
        </button>
        <div className="cta-meta">
          <span>💳 Cartão</span><span className="dot" />
          <span>⚡ Pix</span><span className="dot" />
          <span>📄 Boleto</span>
        </div>
      </div>

      <style>{`
        .offer-bonus { background: linear-gradient(to right, color-mix(in oklch, var(--accent) 14%, transparent), transparent); border-radius: 10px; padding: 14px 10px; margin: 4px -10px; border-bottom: 0 !important; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// QUEBRA DE OBJEÇÕES (accordion)
// ─────────────────────────────────────────────────────────────────────────────

const OBJECTIONS = [
  {
    q: "\"Parece barato demais pra funcionar de verdade...\"",
    a: "Entendo a desconfiança — especialmente com tantos produtos inflados no mercado. O Self-Study Map custa R$97 porque não é um curso cheio de módulos que você nunca vai assistir. É um guia enxuto, direto e aplicável. O preço reflete o que ele é: prático, sem enrolação. E se não funcionar pra você, a garantia de 7 dias está lá.",
  },
  {
    q: "\"Não tenho tempo pra estudar inglês...\"",
    a: "O guia foi feito pra quem estuda em janelas curtas. Você não precisa de horas por dia — precisa saber o que fazer com o tempo que tem. Isso é exatamente o que as aulas te ensinam: montar uma rotina realista pro seu dia, não pro dia ideal.",
  },
  {
    q: "\"Já tentei aprender sozinho antes e não consegui...\"",
    a: "A maioria das pessoas que tentou e desistiu não falhou por falta de esforço. Falhou porque não tinha um método claro. Tentou aprender tudo ao mesmo tempo, sem ordem e sem saber se estava no caminho certo. O Self-Study Map resolve exatamente isso — antes de você começar a estudar inglês, você aprende como estudar inglês.",
  },
  {
    q: "\"E se não for pra mim?\"",
    a: "Você tem 7 dias pra testar. Se abrir o material e sentir que não é o que esperava, é só pedir o reembolso. Sem burocracia, sem perguntas.",
  },
  {
    q: "\"Vou conseguir continuar depois do 1º mês?\"",
    a: "Sim. O Roadmap de Conteúdos (seu bônus) existe pra isso. Ele mostra a sequência de conteúdos do básico até a independência — então quando o planner do 1º mês acabar, você já sabe o que vem a seguir.",
  },
];

function Accordion({ items, defaultOpen = -1 }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className="acc">
      {items.map((it, i) => {
        const isOpen = i === open;
        return (
          <div key={i} className="acc-item" data-open={isOpen ? "1" : "0"}>
            <button
              className="acc-q"
              onClick={() => setOpen(isOpen ? -1 : i)}
              aria-expanded={isOpen}
            >
              <span>{it.q}</span>
              <span className="pl">+</span>
            </button>
            <div
              className="acc-a"
              style={{ maxHeight: isOpen ? "500px" : "0px" }}
            >
              <div className="acc-a-inner">
                {Array.isArray(it.a)
                  ? it.a.map((p, j) => <p key={j}>{p}</p>)
                  : <p>{it.a}</p>}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ObjectionsSection() {
  return (
    <section className="section" data-screen-label="09 Objeções">
      <div className="reveal">
        <span className="eyebrow">A real sobre as dúvidas</span>
        <h2 className="serif">
          As cinco coisas que você está{" "}
          <span className="circled">
            pensando agora.
            <CircleScribble stroke="var(--accent)" strokeWidth={3} />
          </span>
        </h2>
      </div>
      <div className="reveal" data-delay="1" style={{ marginTop: 24 }}>
        <Accordion items={OBJECTIONS} defaultOpen={0} />
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// GARANTIA
// ─────────────────────────────────────────────────────────────────────────────

function GarantiaSection() {
  return (
    <section className="section alt" data-screen-label="10 Garantia">
      <div className="guarantee reveal">
        <div className="badge">
          <div>
            <span className="d">7</span>
            <span style={{ fontSize: 11, letterSpacing: "0.08em" }}>DIAS</span>
          </div>
        </div>
        <span className="eyebrow">Garantia incondicional</span>
        <h2 className="serif" style={{ fontSize: 28, marginTop: 10 }}>
          O risco é todo meu.<br />
          <span style={{ color: "var(--primary)" }}>A decisão é sua.</span>
        </h2>
        <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)" }}>
          Compre hoje. Acesse o material. Se em até 7 dias você sentir que o Self-Study Map não é pra você, me manda uma mensagem e eu devolvo <strong>100% do valor</strong>. Sem burocracia. Sem precisar explicar nada.
        </p>
        <div className="guarantee-foot">
          <HeartDoodle stroke="var(--primary)" fill="var(--primary)" style={{ width: 18, height: 17 }} />
          <span className="hand" style={{ fontSize: 18 }}>— Mari</span>
        </div>
      </div>
      <style>{`
        .guarantee-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); color: var(--ink-2); }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// URGÊNCIA (toggleable)
// ─────────────────────────────────────────────────────────────────────────────

function UrgenciaSection() {
  return (
    <section className="section" data-screen-label="11 Urgência">
      <div className="urg-card reveal">
        <div className="urg-icon">⏳</div>
        <span className="eyebrow">Oferta de lançamento</span>
        <h3 className="serif">O preço de R$97 é o menor que vai estar disponível.</h3>
        <p>O Self-Study Map está em fase de lançamento. Quando essa fase encerrar, o valor sobe. Se você vai comprar, o melhor momento é agora.</p>
      </div>
      <style>{`
        .urg-card { background: linear-gradient(135deg, color-mix(in oklch, var(--primary) 14%, var(--bg)), var(--bg-2)); border: 1.5px dashed var(--primary); border-radius: var(--r-lg); padding: 24px; text-align: center; }
        .urg-icon { font-size: 36px; margin-bottom: 8px; }
        .urg-card h3 { font-size: 22px; line-height: 1.25; margin: 10px 0 12px; letter-spacing: -0.012em; font-weight: 500; }
        .urg-card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────────────────────

const FAQS = [
  {
    q: "Isso é um curso de inglês?",
    a: "Não. O Self-Study Map não promete te ensinar inglês do zero ao avançado em vídeo. Ele te ensina a estudar inglês sozinho — com método, organização e direção. Você vai aprender como trabalhar cada habilidade e como montar sua própria rotina de estudos.",
  },
  {
    q: "Serve pra quem nunca estudou inglês?",
    a: "Sim. O material foi pensado pra quem está começando ou retomando os estudos e não sabe por onde ir. O planner do 1º mês já está pronto — é só abrir e executar.",
  },
  {
    q: "E se eu já tiver um nível intermediário?",
    a: "Também serve. O Roadmap de Conteúdos te mostra onde você está na trilha e o que faz sentido estudar a partir daí. Você usa o guia pra organizar o que já sabe e preencher as lacunas.",
  },
  {
    q: "Quanto tempo preciso dedicar por dia?",
    a: "Não existe mínimo obrigatório. As aulas te ensinam a montar uma rotina realista pro seu tempo disponível — seja 20 minutos ou 1 hora por dia.",
  },
  {
    q: "E se eu não gostar? Existe garantia?",
    a: "Sim. Você tem 7 dias pra testar. Se não gostar, é só pedir o reembolso. 100% do valor de volta, sem perguntas.",
  },
  {
    q: "Como funciona o acesso?",
    a: "Imediatamente após o pagamento você recebe o link de acesso por e-mail. O material fica disponível pra você acessar quando quiser, sem prazo de expiração.",
  },
  {
    q: "Quais as formas de pagamento?",
    a: "Cartão de crédito (à vista ou 12x de R$8,09), Pix ou boleto bancário.",
  },
  {
    q: "Tem suporte se eu tiver dúvidas?",
    a: "Sim — você pode mandar DM no Instagram @languageswithmari ou e-mail. Respondo pessoalmente.",
  },
];

function FaqSection() {
  return (
    <section className="section alt" data-screen-label="12 FAQ">
      <div className="reveal">
        <span className="eyebrow">Perguntas frequentes</span>
        <h2 className="serif">Antes de você decidir.</h2>
      </div>
      <div className="reveal" data-delay="1" style={{ marginTop: 22 }}>
        <Accordion items={FAQS} defaultOpen={0} />
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CTA FINAL + PS
// ─────────────────────────────────────────────────────────────────────────────

function FinalCtaSection({ ctaCopy, onCta }) {
  const cta = CTA_COPY[ctaCopy] || CTA_COPY.benefit;
  return (
    <section className="section dark final-cta" data-screen-label="13 CTA Final">
      <div className="reveal">
        <span className="eyebrow">Agora você tem o mapa.</span>
        <h2 className="serif" style={{ fontSize: 36, lineHeight: 1.05, marginTop: 14 }}>
          Você já sabe que quer<br />
          aprender inglês.<br />
          <span className="hand" style={{ color: "var(--accent)", fontSize: 56, lineHeight: 0.9, display: "inline-block", marginTop: 8 }}>
            O que faltava era saber <em>como</em>.
          </span>
        </h2>
      </div>

      <div className="final-bullets reveal" data-delay="1">
        <div className="final-bullet">
          <span className="check">✓</span>
          <span>Não mais aulas aleatórias no YouTube</span>
        </div>
        <div className="final-bullet">
          <span className="check">✓</span>
          <span>Não mais semanas sem saber se está no caminho</span>
        </div>
        <div className="final-bullet">
          <span className="check">✓</span>
          <span>Uma rotina com método e direção</span>
        </div>
        <div className="final-bullet">
          <span className="check">✓</span>
          <span>Um planner com o 1º mês pronto</span>
        </div>
        <div className="final-bullet">
          <span className="check">✓</span>
          <span>Uma trilha pra continuar sozinho depois</span>
        </div>
      </div>

      <div className="final-price reveal" data-delay="2">
        <div className="final-price-l">por</div>
        <div className="final-price-big serif">R$97</div>
        <div className="final-price-r">ou 12x de R$8,09</div>
      </div>

      <button className="cta cta-on-dark reveal" data-delay="3" onClick={onCta}>
        {cta.label} {cta.price && <span style={{ opacity: 0.85, fontWeight: 600 }}>{cta.price}</span>}
        <span>→</span>
      </button>
      <div className="cta-meta cta-meta-dark reveal" data-delay="3">
        <span>⚡ Acesso imediato</span>
        <span className="dot" />
        <span>🛡 Garantia 7 dias</span>
        <span className="dot" />
        <span>Sem mensalidade</span>
      </div>

      <div className="ps-block reveal" data-delay="4">
        <span className="ps-tag hand">PS —</span>
        <p>
          Se você chegou até aqui, já sabe que esse produto foi feito pra você. A única diferença entre hoje e daqui a seis meses ainda sem avançar no inglês é essa decisão. O risco é zero — garantia de 7 dias. O acesso é imediato. E o preço de lançamento não vai durar pra sempre.
        </p>
        <button className="cta-secondary" onClick={onCta}>
          Garantir meu acesso agora →
        </button>
      </div>

      <style>{`
        .final-cta { padding: 64px 24px 48px; }
        .final-bullets { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
        .final-bullet { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(245, 239, 224, 0.92); }
        .final-bullet .check { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }

        .final-price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 36px 0 24px; padding: 22px; background: rgba(255,255,255,0.05); border-radius: var(--r-md); border: 1px dashed rgba(255,255,255,0.15); }
        .final-price-l { font-size: 14px; color: rgba(245, 239, 224, 0.7); }
        .final-price-big { font-size: 64px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
        .final-price-r { font-size: 12px; color: rgba(245, 239, 224, 0.6); }

        .cta-on-dark { background: var(--accent); color: var(--ink); box-shadow: 0 6px 0 var(--yellow-2), 0 14px 28px -10px rgba(244, 200, 74, 0.45); }
        .cta-on-dark:active { box-shadow: 0 2px 0 var(--yellow-2), 0 6px 14px -6px rgba(244, 200, 74, 0.35); }
        .cta-meta-dark { color: rgba(245, 239, 224, 0.6); }
        .cta-meta-dark .dot { background: rgba(245, 239, 224, 0.4); }

        .ps-block { margin-top: 40px; padding: 28px 0 0; border-top: 1px dashed rgba(255,255,255,0.15); }
        .ps-tag { display: block; color: var(--accent); font-size: 28px; margin-bottom: 6px; }
        .ps-block p { font-size: 15px; line-height: 1.55; color: rgba(245, 239, 224, 0.82); margin: 0 0 20px; }
        .cta-secondary { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); padding: 14px 18px; border-radius: 999px; font-family: var(--f-sans); font-weight: 600; font-size: 14px; cursor: pointer; width: 100%; transition: all 0.15s ease; }
        .cta-secondary:hover { background: var(--accent); color: var(--ink); }
      `}</style>
    </section>
  );
}

function LpFooter() {
  return (
    <footer className="lp-footer">
      <div className="serif" style={{ fontSize: 18, color: "var(--ink)", marginBottom: 4 }}>Self-Study Map</div>
      <div style={{ fontSize: 12, color: "var(--ink-3)" }} className="hand">
        <span style={{ fontSize: 14 }}>by Languages with Mari</span>
      </div>
      <div style={{ marginTop: 18, fontSize: 11, color: "var(--ink-3)" }}>
        © 2026 · Todos os direitos reservados · contato@languageswithmari.com
      </div>
    </footer>
  );
}

window.RoadmapSection = RoadmapSection;
window.ProvaSocialSection = ProvaSocialSection;
window.OfertaSection = OfertaSection;
window.ObjectionsSection = ObjectionsSection;
window.GarantiaSection = GarantiaSection;
window.UrgenciaSection = UrgenciaSection;
window.FaqSection = FaqSection;
window.FinalCtaSection = FinalCtaSection;
window.LpFooter = LpFooter;