// "O que está incluído" — itens da jornada (sem o bônus, que ganhou seção própria).
const Bonus = () => {
  const items = [
    "3 meses de mentoria em grupo com Larissa",
    "Encontros ao vivo semanais com gravação",
    "3 módulos completos: Mulher, Empresária e Empresa",
    "Comunidade exclusiva das 12 mulheres da turma",
    "Materiais e ferramentas práticas de cada módulo",
    "Sessão de seleção 1-a-1 antes de entrar"
  ];
  return (
    <Section tone="dark" id="incluido" className="ms-bonus">
      <div className="ms-bonus__grid">
        <div className="ms-bonus__copy">
          <div className="reveal"><Eyebrow gold>O que está incluído</Eyebrow></div>
          <h2 className="reveal reveal-d1">O que está incluído na sua jornada.</h2>
          <p className="reveal reveal-d2" style={{ opacity: 0.8, fontStyle: "italic" }}>
            Tudo o que você recebe ao entrar na turma de Junho.
          </p>
        </div>
        <div className="ms-bonus__card reveal reveal-d2">
          <div className="ms-bonus__items">
            {items.map((t, i) => (
              <div key={i} className="ms-bonus__item">
                <span className="ms-bonus__num">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <strong>{t}</strong>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
};

// "Edição Fundadora" — bloco dedicado com bônus para as 10 primeiras.
// 2 cards centralizados (max-width 900px), ícones SVG dourados.
const Founder = () => {
  const iconStroke = "#C4A265";
  const cards = [
    {
      title: "Press Kit Edição Fundadora",
      description: "Apostila MS Journey, livro selecionado, chaveiro com monograma e carta escrita à mão.",
      icon: (
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={iconStroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <polyline points="20 12 20 22 4 22 4 12" />
          <rect x="2" y="7" width="20" height="5" />
          <line x1="12" y1="22" x2="12" y2="7" />
          <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
          <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
        </svg>
      )
    },
    {
      title: "1 sessão individual extra com Larissa",
      description: "Diagnóstico, direcionamento e plano de ação 1-a-1 com Larissa.",
      icon: (
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={iconStroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10" />
          <circle cx="12" cy="12" r="6" />
          <circle cx="12" cy="12" r="2" />
        </svg>
      )
    }
  ];
  return (
    <Section tone="cream" id="fundadora" className="ms-founder">
      <div style={{ textAlign: "center", maxWidth: "720px", margin: "0 auto 32px" }}>
        <div className="reveal"><Eyebrow>Edição Fundadora</Eyebrow></div>
        <h2
          className="reveal reveal-d1"
          style={{ margin: "8px auto 0", maxWidth: "22ch" }}
        >
          Edição Fundadora · Bônus para as 10 primeiras
        </h2>
        <p
          className="reveal reveal-d2"
          style={{
            margin: "12px auto 0",
            fontFamily: "var(--font-body)",
            fontSize: "clamp(16px, 1.6vw, 18px)",
            lineHeight: 1.6,
            opacity: 0.78,
            maxWidth: "520px"
          }}
        >
          Para as 10 primeiras mulheres aprovadas na turma de fundação.
        </p>
      </div>
      <div
        className="ms-founder__grid"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(min(420px, 100%), 1fr))",
          gap: "20px",
          maxWidth: "900px",
          margin: "0 auto"
        }}
      >
        {cards.map((c, i) => (
          <div
            key={i}
            className={`ms-founder__card reveal reveal-d${i + 2}`}
            style={{
              padding: "clamp(20px, 5vw, 48px)",
              background: "#1A1A1A",
              color: "#D4C4B0",
              borderRadius: "12px",
              border: "1px solid rgba(212,175,116,0.3)",
              textAlign: "center",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <div style={{ marginBottom: "20px", lineHeight: 0 }}>{c.icon}</div>
            <h3
              style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(18px, 1.8vw, 22px)",
                lineHeight: 1.25,
                fontWeight: 500,
                margin: "0 0 12px",
                color: "var(--c-champagne, #d4af74)",
                maxWidth: "100%"
              }}
            >
              {c.title}
            </h3>
            <p
              style={{
                fontFamily: "var(--font-body)",
                fontSize: "14px",
                lineHeight: 1.5,
                color: "#D4C4B0",
                opacity: 1,
                margin: "0",
                marginTop: 0,
                maxWidth: "320px"
              }}
            >
              {c.description}
            </p>
          </div>
        ))}
      </div>
      <p
        className="reveal"
        style={{
          margin: "32px auto 0",
          textAlign: "center",
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(20px, 2.2vw, 26px)",
          lineHeight: 1.4,
          color: "var(--c-gold, #b8924d)",
          maxWidth: "640px"
        }}
      >
        Não é um presente. <em>É um compromisso com a mulher que você decidiu se tornar.</em>
      </p>
    </Section>
  );
};

// "Aplicação e Seleção" — agora levando direto pro quiz em /candidatura.
const Selection = () => (
  <Section tone="cream" id="aplicacao" className="ms-selection">
    <div className="ms-selection__grid">
      <div className="ms-selection__photo reveal">
        <img src="../../assets/photos/larissa-burgundy-pearl-earrings.jpeg" alt="Larissa em sessão" />
      </div>
      <div className="ms-selection__copy">
        <div className="reveal"><Eyebrow>Aplicação e Seleção</Eyebrow></div>
        <h2 className="reveal reveal-d1">Antes da vaga, uma conversa.</h2>
        <p className="reveal reveal-d2">
          A MS Journey é uma jornada seletiva. A inscrição não garante a vaga — garante uma sessão de 15 minutos com a Larissa para análise do seu perfil e do seu momento de negócio.
        </p>
        <ul className="ms-selection__list">
          <li>Turma fechada de 12 mulheres</li>
          <li>Sessão de análise individual com Larissa</li>
          <li>Acompanhamento próximo</li>
          <li>Jornada completa de 3 meses</li>
          <li>Aplicação estratégica</li>
        </ul>
        <a href="/candidatura" className="ms-btn ms-btn--primary ms-selection__cta reveal">
          <span>Quero me candidatar à seleção</span><span className="ms-btn__arr">→</span>
        </a>
      </div>
    </div>
  </Section>
);

// Urgência — motivos para agir agora. Ícones SVG outline dourado (#C4A265).
const Urgency = () => {
  const stroke = "#C4A265";
  const svgBase = {
    width: 28,
    height: 28,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke,
    strokeWidth: 1.5,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": true
  };
  const items = [
    {
      text: "Aplicações encerram em maio",
      icon: (
        <svg {...svgBase}>
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
          <line x1="16" y1="2" x2="16" y2="6" />
          <line x1="8" y1="2" x2="8" y2="6" />
          <line x1="3" y1="10" x2="21" y2="10" />
        </svg>
      )
    },
    {
      text: "Turma fechada de 12 mulheres",
      icon: (
        <svg {...svgBase}>
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
        </svg>
      )
    },
    {
      text: "Início: 02 de junho",
      icon: (
        <svg {...svgBase}>
          <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
          <path d="M6 12v5c3 3 9 3 12 0v-5" />
        </svg>
      )
    },
    {
      text: "Edição Fundadora: bônus para as 10 primeiras",
      icon: (
        <svg {...svgBase}>
          <path d="M6 3h12l4 6-10 13L2 9z" />
          <path d="M11 3 8 9l4 13 4-13-3-6" />
          <path d="M2 9h20" />
        </svg>
      )
    }
  ];
  return (
    <Section tone="dark" id="urgencia" className="ms-urgency">
      <div className="reveal"><Eyebrow gold>Por que agir agora</Eyebrow></div>
      <h2 className="reveal reveal-d1" style={{ margin: "8px 0 28px" }}>O momento é esse.</h2>
      <div
        className="ms-urgency__grid"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))",
          gap: "16px",
          marginTop: 0
        }}
      >
        {items.map((it, i) => (
          <div
            key={i}
            className={`reveal reveal-d${(i % 4) + 1}`}
            style={{
              padding: "28px 24px",
              border: "1px solid rgba(212, 175, 116, 0.25)",
              borderRadius: "8px",
              background: "rgba(212, 175, 116, 0.04)",
              textAlign: "center"
            }}
          >
            <div style={{ display: "flex", justifyContent: "center", marginBottom: "16px", lineHeight: 0 }}>
              {it.icon}
            </div>
            <p style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: "16px", lineHeight: 1.4 }}>
              {it.text}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
};

const FAQ = () => {
  // Ordem: as 4 primeiras são as essenciais (visíveis no mobile via CSS
  // nth-child). As 4 últimas aparecem só no desktop.
  const items = [
    { q: "Como funciona a mentoria?", a: "3 meses, turma de até 12 mulheres, encontros ao vivo + materiais e comunidade exclusiva." },
    { q: "Para qual tipo de negócio serve?", a: "Empresárias que já vendem — físico, online ou híbrido. Não é para quem ainda não vende." },
    { q: "É gravado?", a: "Sim. Todos os encontros ficam disponíveis para você assistir quando precisar." },
    { q: "Qual é a diferença para outros programas?", a: "União única de imagem, posicionamento, vendas e estrutura — com mentora que vive o que ensina." },
    { q: "Quanto tempo por semana preciso dedicar?", a: "Em média 2 a 3 horas semanais. Desenhada para mulheres com negócio e rotina cheia." },
    { q: "E se eu não puder participar de algum encontro?", a: "Sem problema. A gravação fica disponível." },
    { q: "Tem garantia?", a: "A seleção existe para garantir que você está no momento certo. Sem reembolso após o início." },
    { q: "Ainda tenho dúvidas. O que faço?", a: "Preencha o formulário. Na sessão de 15 min, todas as dúvidas são respondidas." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section tone="cream" id="faq" className="ms-faq">
      <div className="ms-faq__head">
        <div className="reveal"><Eyebrow>Perguntas frequentes</Eyebrow></div>
        <h2 className="reveal reveal-d1">Perguntas frequentes</h2>
      </div>
      <div className="ms-faq__list">
        {items.map((it, i) => (
          <div key={i} className={`ms-faq__item reveal reveal-d${(i % 4) + 1} ${open === i ? "is-open" : ""}`}>
            <button className="ms-faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <span className="ms-faq__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="ms-faq__qtxt">{it.q}</span>
              <span className="ms-faq__icon" aria-hidden>{open === i ? "—" : "+"}</span>
            </button>
            <div className="ms-faq__a"><p>{it.a}</p></div>
          </div>
        ))}
      </div>
    </Section>
  );
};

Object.assign(window, { Bonus, Founder, Selection, Urgency, FAQ });