/* ============================================
   Components: Modules, Journey, Compare
   ============================================ */

/* ============ MODULES (chapters with 26 modules) ============ */
function Modules() {
  const chapters = [
    {
      no: "Capítulo I",
      title: "Primeiros passos",
      count: "Módulos 01 – 07",
      desc: "O alfabeto, sons franceses, cumprimentos, apresentações pessoais. Bases para se sentir confortável com o idioma.",
      mods: ["01 Alphabet", "02 Salutations", "03 Présentation", "04 Nombres", "05 Articles", "06 Le/La", "07 Être & Avoir"]
    },
    {
      no: "Capítulo II",
      title: "Construindo frases",
      count: "Módulos 08 – 14",
      desc: "Verbos do dia a dia, perguntas, vocabulário de família, profissões e descrições simples. Aqui você começa a falar.",
      mods: ["08 Verbes –er", "09 Questions", "10 La famille", "11 Adjectifs", "12 Possession", "13 Décrire", "14 Lieux"]
    },
    {
      no: "Capítulo III",
      title: "Vida cotidiana",
      count: "Módulos 15 – 21",
      desc: "Horários, rotina, comida, compras, transporte. Vocabulário e estruturas para situações reais do dia a dia.",
      mods: ["15 L'heure", "16 Routine", "17 Au café", "18 Faire les courses", "19 Transports", "20 Météo", "21 Loisirs"]
    },
    {
      no: "Capítulo IV",
      title: "Rumo ao A1",
      count: "Módulos 22 – 26",
      desc: "Passado simples, planos futuros, revisões e simulado completo. Tudo o que você precisa para certificar o A1.",
      mods: ["22 Passé récent", "23 Futur proche", "24 Connecteurs", "25 Révision", "26 Simulado A1"]
    }
  ];

  return (
    <section className="modules" id="modulos">
      <div className="container">
        <div className="modules__header">
          <span className="eyebrow ink eyebrow--center">
            <OrnamentLine/> O que está incluído
          </span>
          <h2 className="modules__title">
            26 módulos.<br/>
            Quatro <em>capítulos</em>. Uma rota.
          </h2>
          <p className="modules__sub">
            Cada módulo é uma etapa de estudo, com objetivos claros e
            os recursos online que você vai usar. Tudo organizado para você não pensar.
          </p>
        </div>

        <div className="modules__chapters">
          {chapters.map((ch, i) => (
            <div className="chapter" key={i}>
              <div className="chapter__head">
                <div className="chapter__no">{ch.no}</div>
                <div className="chapter__count">{ch.count}</div>
              </div>
              <h3 className="chapter__title">{ch.title}</h3>
              <p className="chapter__desc">{ch.desc}</p>
              <div className="chapter__modules">
                {ch.mods.map((m, j) => (
                  <span key={j} className="chapter__module">{m}</span>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="modules__bonus">
          <div className="bonus-item">
            <h4>Bônus 01 — DELF A1</h4>
            <p>
              Orientações completas sobre o DELF A1: como funciona a prova,
              o que cai, e como se preparar com segurança.
            </p>
          </div>
          <div className="bonus-item">
            <h4>Bônus 02 — Passé Composé</h4>
            <p>
              Introdução à primeira parte do Passé Composé — um pé já no A2,
              para você sair na frente quando avançar.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ JOURNEY (timeline) ============ */
function Journey() {
  const steps = [
    {
      side: "left",
      phase: "Mês 1",
      title: "<em>Bonjour.</em> Os primeiros sons.",
      desc: "Você ganha confiança com o alfabeto, a pronúncia e suas primeiras frases. Já começa a entender áudios curtos.",
      level: "Pré-A1"
    },
    {
      side: "right",
      phase: "Mês 2",
      title: "Conversa <em>de verdade</em>.",
      desc: "Apresentar-se, falar da família, fazer perguntas. Vocabulário do dia a dia entra de vez.",
      level: "A1 — Início"
    },
    {
      side: "left",
      phase: "Mês 3",
      title: "Vida em <em>francês</em>.",
      desc: "Café, transporte, compras, lazer. Você começa a se imaginar usando o idioma fora dos exercícios.",
      level: "A1 — Meio"
    },
    {
      side: "right",
      phase: "Mês 4",
      title: "<em>Rumo</em> ao A1 certificado.",
      desc: "Tempos verbais, revisão completa e simulado. Você termina pronto para o DELF A1 — se quiser certificar.",
      level: "A1 — Pleno"
    }
  ];
  return (
    <section className="journey" id="jornada">
      <div className="container">
        <div className="journey__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> A jornada
          </span>
          <h2 className="journey__title">
            Do <em>zero</em> ao <em>A1</em>.<br/>Sem rodeios.
          </h2>
        </div>

        <div className="timeline">
          <div className="timeline__line"></div>
          {steps.map((s, i) => (
            <div className={`tl-step tl-step--${s.side}`} key={i}>
              <div className="tl-step__dot"></div>
              <div className="tl-step__content">
                <div className="tl-step__phase">{s.phase}</div>
                <h3 className="tl-step__title" dangerouslySetInnerHTML={{ __html: s.title }}/>
                <p className="tl-step__desc">{s.desc}</p>
                <span className="tl-step__level">{s.level}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ COMPARISON ============ */
function Compare() {
  const rows = [
    { feat: "Caminho claro do zero ao A1", apps: "cross", aulas: "mid", epona: "check" },
    { feat: "Respeita sua rotina e horário", apps: "check", aulas: "cross", epona: "check" },
    { feat: "Curadoria de conteúdo de qualidade", apps: "mid", aulas: "check", epona: "check" },
    { feat: "Preço acessível", apps: "check", aulas: "cross", epona: "check" },
    { feat: "Estrutura, não vídeos genéricos", apps: "cross", aulas: "check", epona: "check" },
    { feat: "Foco real no exame DELF A1", apps: "cross", aulas: "mid", epona: "check" },
    { feat: "Suporte direto da professora", apps: "cross", aulas: "check", epona: "check" }
  ];
  const Mark = ({ kind }) => {
    if (kind === "check") return <span className="check">●</span>;
    if (kind === "cross") return <span className="cross">○</span>;
    return <span className="mid">◐</span>;
  };
  return (
    <section className="compare">
      <div className="container">
        <div className="compare__header">
          <span className="eyebrow ink eyebrow--center">
            <OrnamentLine/> Como nos comparamos
          </span>
          <h2 className="compare__title">
            Por que <em>não</em> um app gratuito<br/>ou aulas particulares?
          </h2>
        </div>

        <div className="compare__table">
          <div className="compare__grid">
            <div className="compare__cell compare__cell--head">Critério</div>
            <div className="compare__cell compare__cell--head">Apps gratuitos</div>
            <div className="compare__cell compare__cell--head">Aulas particulares</div>
            <div className="compare__cell compare__cell--head featured">Plano Épona</div>

            {rows.map((r, i) => (
              <React.Fragment key={i}>
                <div className="compare__cell compare__cell--feat">{r.feat}</div>
                <div className="compare__cell"><Mark kind={r.apps}/></div>
                <div className="compare__cell"><Mark kind={r.aulas}/></div>
                <div className="compare__cell compare__cell--featured"><Mark kind={r.epona}/></div>
              </React.Fragment>
            ))}
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 36, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", color: "#8b7798", textTransform: "uppercase" }}>
          ● Atende  ◐ Parcial  ○ Não atende
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Modules, Journey, Compare });