const Pains = () => {
  const items = [
    "Você faz tudo sozinha",
    "Trabalha muito e continua estagnada",
    "Sente que seu negócio não acompanha seu potencial",
    "Falta estrutura",
    "Falta direção",
    "Falta posicionamento",
    "Você vende… mas não construiu uma empresa forte"
  ];
  return (
    <Section tone="cream" id="dores" className="ms-pains">
      <div className="ms-pains ms-pains--split">
        <div className="ms-pains__left">
          <div className="ms-pains__head">
            <div className="reveal"><Eyebrow>Se identificou?</Eyebrow></div>
            <h2 className="reveal reveal-d1">Talvez seu negócio não esteja <strong>crescendo</strong> porque…</h2>
          </div>
          <ul className="ms-pains__list" style={{ listStyle: "none", padding: 0 }}>
            {items.map((t, i) => (
              <li
                key={i}
                className={`reveal reveal-d${(i % 4) + 1}`}
                style={{
                  display: "flex",
                  alignItems: "baseline",
                  gap: "16px",
                  padding: "14px 0",
                  borderBottom: "1px solid rgba(0,0,0,0.08)",
                  fontFamily: "var(--font-display)",
                  fontSize: "clamp(18px, 2vw, 22px)",
                  lineHeight: 1.35
                }}
              >
                <svg
                  width="18" height="18" viewBox="0 0 24 24"
                  fill="none" stroke="#A0524D" strokeWidth="1.5"
                  strokeLinecap="round" strokeLinejoin="round"
                  style={{ flexShrink: 0, marginRight: "16px", transform: "translateY(4px)" }}
                  aria-hidden="true"
                >
                  <line x1="18" y1="6" x2="6" y2="18" />
                  <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
                <span className="ms-pains__txt">{t}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="ms-pains__right reveal">
          <img src="../../assets/photos/larissa-navy-arms-crossed.jpeg" alt="Larissa Otolini" />
          <span className="ms-pains__caption">postura · presença · posicionamento</span>
        </div>
      </div>
    </Section>
  );
};

// "O que é a MS Journey" — seção curta editorial entre Dor e 3 Pilares.
// Tudo dentro de um container centrado (max-width 800px, margin 0 auto).
const Intro = () => (
  <Section tone="dark" id="mentoria" className="ms-intro">
    <div style={{ maxWidth: "800px", margin: "0 auto", textAlign: "center" }}>
      <div className="reveal"><Eyebrow gold>O que é a MS Journey</Eyebrow></div>
      <h2
        className="reveal reveal-d1"
        style={{ margin: "12px auto 0", maxWidth: "22ch" }}
      >
        Uma mentoria seletiva para mulheres que decidiram <em><strong>construir</strong></em>.
      </h2>
      <p
        className="reveal reveal-d2"
        style={{
          fontFamily: "var(--font-body)",
          fontSize: "clamp(17px, 1.8vw, 20px)",
          lineHeight: 1.6,
          maxWidth: "640px",
          margin: "20px auto 0",
          opacity: 0.88
        }}
      >
        Uma mentoria seletiva de 3 meses para até 12 mulheres por edição. Encontros ao vivo, acompanhamento direto com Larissa e uma jornada estruturada em 3 pilares: Mulher, Empresária e Empresa.
      </p>
      <div className="ms-intro__triplet reveal reveal-d3" style={{ margin: "28px auto" }}>
        <div className="ms-intro__step"><span>Mulher</span> forte</div>
        <span className="ms-intro__arrow">→</span>
        <div className="ms-intro__step"><span>Empresária</span> forte</div>
        <span className="ms-intro__arrow">→</span>
        <div className="ms-intro__step"><span>Empresa</span> forte</div>
      </div>
      <p
        className="reveal reveal-d4"
        style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(22px, 2.4vw, 28px)",
          lineHeight: 1.35,
          fontStyle: "italic",
          maxWidth: "640px",
          margin: "8px auto 0"
        }}
      >
        Não é um curso. Não é só uma mentoria. <em>É uma construção.</em>
      </p>
    </div>
  </Section>
);

Object.assign(window, { Pains, Intro });