const Modules = () => {
  const data = [
    {
      n: "01",
      title: "Mulher",
      bullets: [
        { text: "Clareza" },
        { text: "Direção" },
        { text: "Confiança" },
        { text: "Fortalecimento" }
      ]
    },
    {
      n: "02",
      title: "Empresária",
      bullets: [
        { text: "Posicionamento" },
        { text: "Comunicação" },
        { text: "Presença" },
        { text: "Rotina Estratégica" },
        { text: "Aula Bônus com Convidado Especial", bonus: true }
      ]
    },
    {
      n: "03",
      title: "Empresa",
      bullets: [
        { text: "Financeiro" },
        { text: "Estoque Estratégico" },
        { text: "Redes Sociais" },
        { text: "Campanhas" },
        { text: "CRM" },
        { text: "Escala" },
        { text: "Crescimento Sustentável" },
        { text: "Aula Bônus com Convidado Especial", bonus: true }
      ]
    }
  ];
  return (
    <Section tone="dark" id="pilares" className="ms-modules">
      <div className="ms-modules__head">
        <div className="reveal"><Eyebrow gold>Os 3 pilares</Eyebrow></div>
        <h2 className="reveal reveal-d1">Primeiro <em>você</em>. Depois a empresária. Depois a empresa.</h2>
      </div>
      <div className="ms-modules__grid">
        {data.map((m, i) => (
          <article key={m.n} className={`ms-module reveal reveal-d${i + 1}`}>
            <div className="ms-module__head">
              <span className="ms-module__num">{m.n}</span>
              <div>
                <h3 className="ms-module__title">{m.title}</h3>
              </div>
            </div>
            <ul className="ms-module__list">
              {m.bullets.map((b) => (
                <li key={b.text} className={b.bonus ? "is-bonus" : ""}>{b.text}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  );
};

const Result = () => {
  const items = [
    { strong: "Posicionamento claro",            detail: "sua cliente entende o que você vende e por que escolher você." },
    { strong: "Imagem estratégica",              detail: "sua presença comunica autoridade antes de você falar." },
    { strong: "Conteúdo que vende todos os dias", detail: "sem depender de viral." },
    { strong: "Precificação alinhada ao valor",  detail: "você para de dar desconto." },
    { strong: "Vendas no digital multicanal",    detail: "direct, stories, TikTok, WhatsApp vendendo de forma consistente." },
    { strong: "Plano de 90 dias pós-mentoria",   detail: "você sai sabendo o próximo passo." }
  ];
  return (
    <Section tone="cream" id="transforma" className="ms-result">
      <div className="reveal"><Eyebrow>O que você transforma em 90 dias</Eyebrow></div>
      <h2 className="reveal reveal-d1">Você sai da <strong>MS Journey</strong> com:</h2>
      <ul className="ms-result__list" style={{ marginTop: "32px" }}>
        {items.map((w, i) => (
          <li
            key={i}
            className={`reveal reveal-d${(i % 5) + 1}`}
            style={{
              display: "grid",
              gridTemplateColumns: "24px 1fr",
              gap: "16px",
              alignItems: "baseline",
              padding: "18px 0",
              borderBottom: "1px solid rgba(0,0,0,0.08)"
            }}
          >
            <span className="ms-result__hair" style={{ width: "24px", height: "1px", background: "var(--c-gold)", display: "inline-block", transform: "translateY(-6px)" }} />
            <span style={{ fontFamily: "var(--font-body)", fontSize: "clamp(15px, 1.5vw, 17px)", lineHeight: 1.55 }}>
              <strong style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(17px, 1.7vw, 19px)" }}>{w.strong}</strong>
              <span style={{ opacity: 0.78 }}> — {w.detail}</span>
            </span>
          </li>
        ))}
      </ul>
      <p
        className="reveal"
        style={{
          marginTop: "32px",
          marginLeft: "auto",
          marginRight: "auto",
          maxWidth: "720px",
          padding: "28px 32px",
          background: "var(--c-cream-warm, #f1ebe2)",
          borderLeft: "2px solid var(--c-gold)",
          fontFamily: "var(--font-display)",
          fontSize: "clamp(20px, 2.2vw, 26px)",
          lineHeight: 1.4,
          fontStyle: "italic",
          textAlign: "left"
        }}
      >
        E o mais importante: você sai sabendo <em>quem você é como empresária</em>. Não só o que fazer — mas quem ser para sustentar o que vem.
      </p>
    </Section>
  );
};

Object.assign(window, { Modules, Result });