const About = () => {
  const badges = [
    "CEO Mavi Concept",
    "Embaixadora Sebrae",
    "Embaixadora TikTok Shop Moda",
    "+6 anos no varejo",
    "Coach formada"
  ];
  return (
    <Section tone="dark" id="larissa" className="ms-about">
      <div className="ms-about__grid">
        <div className="ms-about__photo reveal">
          <img src="../../assets/photos/larissa-white-desk-contract.jpeg" alt="Larissa Otolini" />
          <span className="ms-about__signature">Larissa</span>
        </div>
        <div className="ms-about__copy">
          <div className="reveal"><Eyebrow gold>Quem vai te guiar</Eyebrow></div>
          <h2 className="reveal reveal-d1">Larissa Otolini</h2>
          <p className="ms-about__lede reveal reveal-d2">
            Empresária há +6 anos no varejo e moda. CEO da Mavi Concept. Fundadora da MS Journey. Embaixadora Sebrae e TikTok Shop Moda. Formada em coach e consultoria de imagem.
          </p>
          <p className="reveal reveal-d3" style={{ fontStyle: "italic", opacity: 0.9 }}>
            Ela não ensina teoria. Ela ensina o que construiu — com erro, acerto, resultado real e negócio funcionando.
          </p>
          <p className="reveal reveal-d3">
            A MS Journey é o método que ela aplica com clientes individuais, agora estruturado para uma turma fechada de <strong>12 mulheres por edição</strong>.
          </p>
          <div
            className="reveal reveal-d4"
            style={{
              marginTop: "28px",
              display: "flex",
              flexWrap: "wrap",
              gap: "10px"
            }}
          >
            {badges.map((b) => (
              <span
                key={b}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  padding: "8px 16px",
                  border: "1px solid rgba(212, 175, 116, 0.45)",
                  borderRadius: "999px",
                  fontFamily: "var(--font-body)",
                  fontSize: "13px",
                  letterSpacing: "0.02em",
                  color: "var(--c-champagne, #d4af74)",
                  background: "rgba(212, 175, 116, 0.06)"
                }}
              >
                {b}
              </span>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
};

const Testimonials = () => {
  const quotes = [
    { name: "Natalia", role: "Cliente · Moda Feminina", img: "../../assets/testimonials/natalia-pires.jpeg" },
    { name: "Beatriz", role: "Cliente · Moda Feminina", img: "../../assets/testimonials/beatriz-troppmair.jpeg" },
    { name: "Sabrina", role: "Cliente · Moda Feminina", img: "../../assets/testimonials/sabrina-fragoso.jpeg" },
  ];
  return (
    <Section tone="cream" id="depoimentos" className="ms-testi">
      <div className="reveal"><Eyebrow>Prova social</Eyebrow></div>
      <h2 className="reveal reveal-d1">Quem já viveu a mentoria com Larissa</h2>
      <p className="ms-testi__lede reveal reveal-d2">Prints originais de mulheres que passaram pela mentoria com Larissa.</p>
      <div className="ms-testi__grid">
        {quotes.map((q, i) => (
          <figure key={q.name} className={`ms-testi__print reveal reveal-d${i + 1}`}>
            <div className="ms-testi__frame">
              <img src={q.img} alt={`Depoimento de ${q.name}`} loading="lazy" />
            </div>
            <figcaption>
              <span className="ms-testi__name">{q.name}</span>
              <span className="ms-testi__role">{q.role}</span>
            </figcaption>
          </figure>
        ))}
      </div>
      <div className="ms-testi__cta reveal">
        <a href="/candidatura" className="ms-btn ms-btn--primary">
          <span>Quero essa transformação</span><span className="ms-btn__arr">→</span>
        </a>
      </div>
    </Section>
  );
};

Object.assign(window, { About, Testimonials });