// sections.jsx — All landing-page sections for Self-Study Map

// ─────────────────────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────────────────────

const HEADLINES = {
  A: {
    eyebrow: "Para quem estuda inglês sozinho",
    pre: "Aprenda inglês",
    mid: "sozinho",
    post: "do jeito certo",
    suffix: "— com método, rotina e direção do primeiro dia.",
    circleWord: "sozinho",
  },
  B: {
    eyebrow: "A verdade que ninguém te contou",
    pre: "Você não falta",
    mid: "disciplina.",
    post: "",
    suffix: "Falta saber o que estudar, quando e como.",
    circleWord: "disciplina.",
  },
  C: {
    eyebrow: "Seu plano de estudos pronto",
    pre: "O guia que organiza seus",
    mid: "estudos",
    post: "de inglês",
    suffix: "— e te mostra exatamente o que fazer a cada semana.",
    circleWord: "estudos",
  },
};

const CTA_COPY = {
  benefit: { label: "Começar a estudar com direção", price: "por R$97" },
  direct: { label: "Quero meu Self-Study Map agora", price: "" },
};

function HeroLogo() {
  return (
    <div className="hero-brand">
      <div className="hero-brand-mark">
        <CalendarDoodle style={{ width: 38, height: 38 }} />
      </div>
      <div className="hero-brand-text">
        <span className="hero-brand-title serif">Self-Study Map</span>
        <span className="hero-brand-sub">by Languages with Mari</span>
      </div>
    </div>
  );
}

function HeroHeadline({ variant }) {
  const h = HEADLINES[variant] || HEADLINES.C;
  return (
    <h1 className="hero-title serif">
      <span className="eyebrow hero-eyebrow">{h.eyebrow}</span>
      <span className="hero-title-line">
        {h.pre}{" "}
        <span className="circled">
          {h.mid}
          <CircleScribble stroke="var(--accent)" strokeWidth={3.2} />
        </span>{" "}
        {h.post}
      </span>
      <span className="hero-title-suffix">{h.suffix}</span>
    </h1>
  );
}

function HeroVisual({ layout }) {
  if (layout === "image-led") {
    return (
      <div className="hero-visual hero-visual-image">
        <div className="hero-planner-card">
          <div className="hpc-header">
            <div className="hpc-dot" />
            <div className="hpc-dot" style={{ background: "var(--accent)" }} />
            <div className="hpc-dot" style={{ background: "var(--orange)" }} />
            <span className="hpc-tab">📓 Planner — Semana 1</span>
          </div>
          <div className="hpc-body">
            <div className="hpc-row hpc-row-head">
              <span>Seg</span><span>Ter</span><span>Qua</span><span>Qui</span><span>Sex</span>
            </div>
            <div className="hpc-row">
              <span className="hpc-cell yellow">📚 Vocab</span>
              <span className="hpc-cell orange">🎧 Listen</span>
              <span className="hpc-cell blue">✏️ Grammar</span>
              <span className="hpc-cell orange">🗣 Speak</span>
              <span className="hpc-cell yellow">📖 Read</span>
            </div>
            <div className="hpc-row">
              <span className="hpc-cell-mini">15 min</span>
              <span className="hpc-cell-mini">20 min</span>
              <span className="hpc-cell-mini">25 min</span>
              <span className="hpc-cell-mini">15 min</span>
              <span className="hpc-cell-mini">20 min</span>
            </div>
            <div className="hpc-footer">
              <div className="hpc-progress"><div className="hpc-progress-bar" /></div>
              <span>4 / 5 dias</span>
            </div>
          </div>
        </div>
        <ArrowDoodle stroke="var(--accent)" style={{ position: "absolute", left: -14, bottom: 24, width: 64, height: 50 }} flip />
      </div>
    );
  }

  if (layout === "centered") {
    return (
      <div className="hero-visual hero-visual-centered">
        <div className="hero-visual-rings">
          <div className="ring r1" />
          <div className="ring r2" />
          <div className="ring r3" />
          <CalendarDoodle style={{ width: 120, height: 130, position: "relative", zIndex: 2 }} />
        </div>
        <HeartDoodle stroke="var(--orange)" fill="var(--orange)" style={{ position: "absolute", top: 18, right: 38, width: 26, height: 24, transform: "rotate(-12deg)" }} />
        <StarSpark fill="var(--accent)" style={{ position: "absolute", top: 80, left: 28, width: 18, height: 18 }} />
        <AsteriskDoodle stroke="var(--blue)" style={{ position: "absolute", bottom: 32, right: 22, width: 22, height: 22 }} />
      </div>
    );
  }

  // Default — split layout: notebook + path
  return (
    <div className="hero-visual hero-visual-split">
      <div className="hero-card hc-1">
        <div className="hc-eyebrow">Habilidades</div>
        <div className="hc-list">
          {["Vocabulary", "Grammar", "Listening", "Speaking", "Reading", "Writing", "Pronunciation"].map((s, i) => (
            <div key={s} className="hc-list-item" style={{ animationDelay: `${i * 80}ms` }}>
              <span className="hc-bullet" style={{ background: ["var(--orange)", "var(--yellow)", "var(--blue)", "var(--orange)", "var(--yellow)", "var(--blue)", "var(--orange)"][i] }} />
              {s}
            </div>
          ))}
        </div>
      </div>
      <div className="hero-card hc-2">
        <div className="hc-eyebrow">Semana 1</div>
        <div className="hc-week">
          {[2, 3, 1, 2, 3].map((h, i) => (
            <div key={i} className="hc-day">
              <span className="hc-day-lbl">{["S", "T", "Q", "Q", "S"][i]}</span>
              <div className="hc-day-stack">
                {Array.from({ length: h }).map((_, j) => (
                  <span key={j} className="hc-day-block" style={{
                    background: ["var(--yellow)", "var(--orange)", "var(--blue)"][(i + j) % 3]
                  }} />
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="hc-foot">
          <span>Total: 1h45 na semana</span>
          <HeartDoodle stroke="var(--orange)" fill="var(--orange)" style={{ width: 14, height: 13 }} />
        </div>
      </div>
      <DotsCluster fill="var(--ink)" style={{ position: "absolute", right: -8, top: 8, width: 64, height: 64, opacity: 0.18 }} />
      <ArrowDoodle stroke="var(--accent)" strokeWidth={2.6} style={{ position: "absolute", right: 18, bottom: -6, width: 64, height: 56 }} />
    </div>
  );
}

function Hero({ headline, ctaCopy, layout, onCta }) {
  const cta = CTA_COPY[ctaCopy] || CTA_COPY.benefit;
  return (
    <section className="hero" data-screen-label="01 Hero">
      <HeroLogo />
      <HeroHeadline variant={headline} />
      <p className="hero-sub">
        Aprenda a estudar vocabulário, gramática, escuta, fala, leitura, escrita e pronúncia — com um <strong>planejamento pronto do 1º mês</strong> e uma trilha de conteúdos pra continuar sozinho depois.
      </p>

      <HeroVisual layout={layout} />

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

      <div className="hero-microproof">
        <div className="hero-mp-avatars">
          {["M", "J", "A", "R"].map((c, i) => (
            <span key={i} className="hero-mp-avatar" style={{ background: ["var(--orange)", "var(--yellow)", "var(--blue)", "var(--ink)"][i] }}>{c}</span>
          ))}
        </div>
        <div className="hero-mp-text">
          <div className="hero-mp-stars">★★★★★</div>
          <div>+10 alunos já estudando com o método</div>
        </div>
      </div>

      <style>{`
        .hero { padding: 28px 24px 48px; position: relative; }
        .hero-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
        .hero-brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
        .hero-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
        .hero-brand-title { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
        .hero-brand-sub { font-size: 11px; color: var(--ink-3); font-family: var(--f-hand); font-size: 13px; }

        .hero-eyebrow { display: block; margin-bottom: 14px; color: var(--primary); }
        .hero-title { font-size: 38px; line-height: 1.04; margin: 0; letter-spacing: -0.022em; font-weight: 500; }
        .hero-title-line { display: block; }
        .hero-title-suffix { display: block; font-size: 18px; line-height: 1.35; color: var(--ink-2); font-weight: 400; margin-top: 14px; font-family: var(--f-sans); letter-spacing: -0.005em; }

        .hero-sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 20px 0 28px; }
        .hero-sub strong { color: var(--ink); font-weight: 600; }

        /* Visual variants */
        .hero-visual { position: relative; margin: 8px 0 28px; }
        .hero-visual-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
        .hero-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 14px; box-shadow: var(--sh-sm); position: relative; }
        .hc-1 { transform: rotate(-1.5deg); }
        .hc-2 { transform: rotate(1.5deg); margin-top: 12px; }
        .hc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
        .hc-list { display: flex; flex-direction: column; gap: 8px; }
        .hc-list-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
        .hc-bullet { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .hc-week { display: flex; gap: 6px; align-items: flex-end; height: 80px; }
        .hc-day { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 6px; }
        .hc-day-lbl { font-size: 10px; font-weight: 700; color: var(--ink-3); }
        .hc-day-stack { display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; align-items: center; }
        .hc-day-block { display: block; width: 100%; height: 12px; border-radius: 3px; }
        .hc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11px; color: var(--ink-3); font-weight: 600; }

        /* Image-led */
        .hero-visual-image { padding: 8px 0 20px; }
        .hero-planner-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); overflow: hidden; transform: rotate(-1deg); }
        .hpc-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
        .hpc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0.6; }
        .hpc-tab { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-2); }
        .hpc-body { padding: 12px; }
        .hpc-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; }
        .hpc-row-head { font-size: 10px; font-weight: 700; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
        .hpc-row-head span { padding: 4px 0; }
        .hpc-cell { font-size: 10px; font-weight: 700; text-align: center; padding: 6px 2px; border-radius: 6px; color: var(--ink); }
        .hpc-cell.yellow { background: color-mix(in oklch, var(--yellow) 50%, var(--bg)); }
        .hpc-cell.orange { background: color-mix(in oklch, var(--orange) 40%, var(--bg)); color: white; }
        .hpc-cell.blue { background: color-mix(in oklch, var(--blue) 40%, var(--bg)); color: white; }
        .hpc-cell-mini { font-size: 9px; text-align: center; color: var(--ink-3); padding: 2px 0; }
        .hpc-footer { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 8px; font-size: 11px; color: var(--ink-3); font-weight: 600; }
        .hpc-progress { flex: 1; height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
        .hpc-progress-bar { width: 80%; height: 100%; background: var(--primary); border-radius: 999px; }

        /* Centered */
        .hero-visual-centered { height: 280px; display: flex; align-items: center; justify-content: center; position: relative; }
        .hero-visual-rings { position: relative; display: flex; align-items: center; justify-content: center; }
        .ring { position: absolute; border-radius: 50%; }
        .ring.r1 { width: 220px; height: 220px; background: color-mix(in oklch, var(--accent) 18%, transparent); }
        .ring.r2 { width: 180px; height: 180px; background: color-mix(in oklch, var(--orange) 14%, transparent); }
        .ring.r3 { width: 140px; height: 140px; background: var(--bg-2); border: 1.5px dashed var(--ink); opacity: 0.5; }

        .cta-arrow { font-weight: 400; }

        .hero-microproof { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px; background: var(--bg-2); border-radius: var(--r-md); border: 1px solid var(--line); }
        .hero-mp-avatars { display: flex; }
        .hero-mp-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 12px; font-family: var(--f-serif); border: 2px solid var(--bg); margin-left: -8px; }
        .hero-mp-avatar:first-child { margin-left: 0; }
        .hero-mp-text { font-size: 12px; color: var(--ink-2); line-height: 1.3; font-weight: 500; }
        .hero-mp-stars { color: var(--accent); letter-spacing: 1px; font-size: 12px; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// OPENING / PROPOSTA DE VALOR
// ─────────────────────────────────────────────────────────────────────────────

function OpeningBlock() {
  return (
    <section className="section alt" data-screen-label="02 Abertura">
      <div className="reveal">
        <span className="eyebrow">A real é a seguinte</span>
        <h2 className="serif">Você já tentou aprender inglês por conta própria.</h2>
      </div>
      <div className="opening-body reveal" data-delay="1">
        <p>Abriu o app. Assistiu uma aula no YouTube. Comprou um livro. Começou com energia — e parou três semanas depois sem saber se estava progredindo de verdade.</p>
        <p className="opening-pull">
          Não foi falta de vontade.{" "}
          <span className="squiggle">
            Foi falta de direção.
            <SquiggleLine stroke="var(--accent)" strokeWidth={4} />
          </span>
        </p>
        <p>O Self-Study Map não é um curso de inglês tradicional. É um <strong>guia de estudos</strong> feito pra quem quer ser autodidata de verdade — mas precisa saber por onde começar, o que estudar em cada fase e como montar uma rotina que funciona na prática.</p>
        <p>Aqui você aprende o método. Aplica no planner. E continua sozinho com uma trilha clara de conteúdos à frente.</p>
      </div>

      <style>{`
        .opening-body { margin-top: 24px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
        .opening-body p { margin: 0 0 16px; }
        .opening-body p:last-child { margin-bottom: 0; }
        .opening-body strong { color: var(--ink); font-weight: 600; }
        .opening-pull { font-family: var(--f-serif); font-size: 22px !important; font-weight: 500; color: var(--ink) !important; line-height: 1.3 !important; margin: 20px 0 !important; letter-spacing: -0.012em; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// DOR
// ─────────────────────────────────────────────────────────────────────────────

const DOR_ITEMS = [
  "Você abre o YouTube e tem mil vídeos. Por qual começa?",
  "Você tenta criar uma rotina, mas não sabe se o que está estudando está na ordem certa.",
  "Você passa semanas em gramática e esquece de praticar fala. Ou o contrário.",
  "Você já desistiu pelo menos uma vez — não por preguiça, mas porque perdeu o fio.",
  "Você sente que aprende, mas não sabe se está evoluindo de verdade.",
  "Você quer ser independente no inglês, mas nunca teve um mapa de onde ir.",
];

function DorSection() {
  return (
    <section className="section" data-screen-label="03 Dor">
      <div className="reveal">
        <span className="eyebrow">O problema real</span>
        <h2 className="serif">
          Estudar inglês sozinho parece simples —{" "}
          <em style={{ fontStyle: "italic", fontWeight: 500 }}>até você tentar de verdade.</em>
        </h2>
      </div>
      <ul className="dor-list">
        {DOR_ITEMS.map((t, i) => (
          <li key={i} className="dor-item reveal" data-delay={Math.min(i, 5)}>
            <span className="num">0{i + 1}</span>
            <span>{t}</span>
          </li>
        ))}
      </ul>
      <div className="dor-conclusion reveal" data-delay="3">
        <p>Se você se identificou com algum desses pontos,{" "}
          <span className="hl">o problema não é você.</span>{" "}
          É que ninguém te ensinou <em>como</em> estudar.
        </p>
      </div>
      <style>{`
        .dor-conclusion { margin-top: 30px; padding: 22px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); position: relative; }
        .dor-conclusion p { margin: 0; font-family: var(--f-serif); font-size: 22px; line-height: 1.3; letter-spacing: -0.012em; font-weight: 500; }
        .dor-conclusion .hl { background: var(--accent); color: var(--ink); padding: 2px 8px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
        .dor-conclusion em { font-style: italic; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SOLUÇÃO
// ─────────────────────────────────────────────────────────────────────────────

function SolucaoSection() {
  return (
    <section className="section alt" data-screen-label="04 Solução">
      <div className="reveal">
        <span className="eyebrow">A solução</span>
        <h2 className="serif">
          O Self-Study Map existe pra resolver{" "}
          <span className="circled">
            exatamente isso.
            <CircleScribble stroke="var(--accent)" strokeWidth={3} />
          </span>
        </h2>
      </div>
      <div className="solucao-body reveal" data-delay="1">
        <p>Não é um curso que vai te entregar inglês mastigado em vídeo. É um guia que te ensina a <strong>estudar inglês com cabeça</strong> — por conta própria, do seu jeito, no seu ritmo.</p>
      </div>

      <div className="solucao-three reveal" data-delay="2">
        <div className="solucao-step">
          <span className="solucao-step-num serif">01</span>
          <h3 className="serif">Entenda o porquê</h3>
          <p>Por que e como trabalhar cada habilidade — vocabulário, gramática, escuta, fala, leitura, escrita e pronúncia.</p>
        </div>
        <div className="solucao-step">
          <span className="solucao-step-num serif">02</span>
          <h3 className="serif">Aplique no planner</h3>
          <p>O planejamento completo do 1º mês já montado, pra ver o método na prática. Só abrir e executar.</p>
        </div>
        <div className="solucao-step">
          <span className="solucao-step-num serif">03</span>
          <h3 className="serif">Continue sozinho</h3>
          <p>Uma trilha sequencial de conteúdos — do básico até a independência — pra continuar sem travar depois.</p>
        </div>
      </div>

      <p className="solucao-result reveal" data-delay="3">
        <span className="hand" style={{ fontSize: 24, color: "var(--primary)" }}>O resultado:</span>{" "}
        você para de estudar no achismo e começa a estudar com direção.
      </p>

      <style>{`
        .solucao-body { margin-top: 24px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
        .solucao-body strong { color: var(--ink); font-weight: 600; }
        .solucao-three { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; position: relative; }
        .solucao-three::before { content: ""; position: absolute; left: 22px; top: 28px; bottom: 28px; width: 2px; background: repeating-linear-gradient(to bottom, var(--primary), var(--primary) 4px, transparent 4px, transparent 10px); opacity: 0.4; }
        .solucao-step { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 20px 56px; position: relative; }
        .solucao-step-num { position: absolute; left: 14px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink); font-style: italic; }
        .solucao-step h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.012em; font-weight: 600; }
        .solucao-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
        .solucao-result { margin-top: 28px; padding: 20px 22px; background: var(--ink); color: var(--bg); border-radius: var(--r-md); font-size: 16px; line-height: 1.4; font-family: var(--f-serif); font-weight: 500; letter-spacing: -0.005em; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// BENEFÍCIOS
// ─────────────────────────────────────────────────────────────────────────────

const BENEFITS = [
  { h: "Saia do zero sem depender de ninguém", p: "O guia te dá o método, o planner te mostra como aplicar, e a trilha te mostra o caminho até a independência.", icon: "🗺" },
  { h: "Pare de desperdiçar tempo escolhendo o que estudar", p: "Cada habilidade tem sua lógica e sua ordem. Você vai entender isso de uma vez.", icon: "⚡" },
  { h: "Tenha um primeiro mês inteiro planejado", p: "Sem ter que montar nada do zero. É só abrir o Notion e executar.", icon: "📅" },
  { h: "Aprenda a criar sua própria rotina depois", p: "O objetivo não é te deixar dependente do guia. É te tornar autodidata de verdade.", icon: "🧭" },
  { h: "Estude no seu tempo, sem mensalidade", p: "Acesso imediato, sem cobranças futuras. Sem prazo de expiração.", icon: "⏳" },
  { h: "Saiba exatamente onde está e pra onde vai", p: "A trilha sequencial elimina a dúvida de \"o que estudo agora?\".", icon: "📍" },
];

function BeneficiosSection() {
  return (
    <section className="section" data-screen-label="05 Benefícios">
      <div className="reveal">
        <span className="eyebrow">O que muda na sua rotina</span>
        <h2 className="serif">
          Seis coisas que{" "}
          <span className="circled">
            mudam de verdade
            <CircleScribble stroke="var(--accent)" strokeWidth={3} />
          </span>
        </h2>
        <p className="lede">Não é promessa vazia. É o que muda na prática quando você para de estudar no escuro.</p>
      </div>

      <div className="benefits-grid">
        {BENEFITS.map((b, i) => (
          <div key={i} className="benefit reveal" data-delay={i % 4}>
            <div className="benefit-head">
              <span className="benefit-icon">{b.icon}</span>
              <span className="b-num">0{i + 1} / 06</span>
            </div>
            <h3>{b.h}</h3>
            <p>{b.p}</p>
          </div>
        ))}
      </div>

      <style>{`
        .benefits-grid { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
        .benefit-head { display: flex; align-items: center; justify-content: space-between; }
        .benefit-icon { font-size: 28px; line-height: 1; filter: saturate(0.85); }
        .benefit:nth-child(2n) { background: var(--bg-2); }
        .benefit:nth-child(3n) { border-color: var(--primary); border-width: 1.5px; }
      `}</style>
    </section>
  );
}

window.Hero = Hero;
window.OpeningBlock = OpeningBlock;
window.DorSection = DorSection;
window.SolucaoSection = SolucaoSection;
window.BeneficiosSection = BeneficiosSection;
window.HEADLINES = HEADLINES;
window.CTA_COPY = CTA_COPY;
