/* global React, Button, Eyebrow, Flower, Icon, Logo, GCMark, SectionHead, QuoteBand, ManifestoBand, PageHero, PlainHero, PressStrip, LaunchCTA, TriadGrid, EditorialSplit */
// Espalhe Gardênias — Início / O Movimento / Gardênia

const WRAP = { maxWidth: 1280, margin: "0 auto", padding: "clamp(64px,9vw,104px) clamp(24px,5vw,40px)" };

/* ============================================================ INÍCIO */
function HomeScreen({ onNav }) {
  return (
    <div>
      {/* 1 — HERO */}
      <section className="eg-hero" style={{ position: "relative", marginTop: -82, overflow: "hidden", background: "var(--vinho)" }}>
        <style>{`
          .eg-hero { min-height: 700px; }
          .eg-hero__media { position: absolute; inset: 0; }
          .eg-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
          .eg-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,20,20,.86) 0%, rgba(44,20,20,.55) 42%, rgba(44,20,20,.05) 78%); }
          .eg-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px,5vw,40px); min-height: 700px; display: flex; flex-direction: column; justify-content: center; }
          .eg-hero__text { max-width: 620px; padding-top: 96px; }
          @media (max-width: 768px) {
            .eg-hero { min-height: 760px; }
            .eg-hero__media img { object-position: 78% 100%; }
            .eg-hero__overlay { background: linear-gradient(180deg, rgba(44,20,20,.94) 0%, rgba(44,20,20,.86) 30%, rgba(44,20,20,.55) 55%, rgba(44,20,20,.15) 78%, rgba(44,20,20,0) 100%); }
            .eg-hero__inner { min-height: 760px; justify-content: flex-start; padding: 78px 18px 32px; }
            .eg-hero__text { padding-top: 0; max-width: 78%; text-align: left; }
            .eg-hero__text h1 { font-size: clamp(34px,8.6vw,46px) !important; }
            .eg-hero__text p { max-width: 74% !important; font-size: 15.5px !important; }
            .eg-hero__cta { margin-top: 140px !important; }

          }


        `}</style>
        <div className="eg-hero__media">
          <picture>
            <source media="(max-width: 768px)" srcSet="/site/hero-07-mobile.png" />
            <img src="/site/hero-07-desktop.png" alt="Gardênia Cavalcanti" />
          </picture>
          <div className="eg-hero__overlay" />
        </div>
        <div className="eg-hero__inner">
          <div className="eg-hero__text">
            <div style={{ marginTop: 24 }}><Eyebrow color="var(--pessego)">Gardênia Cavalcanti</Eyebrow></div>
            <h1 style={{ fontFamily: "var(--font-serif)", textTransform: "uppercase", color: "var(--pessego)",
              fontSize: "clamp(38px,5.6vw,62px)", lineHeight: 1.02, letterSpacing: ".01em", margin: "24px 0 24px" }}>
              Do solo árido<br />nasceu a flor
            </h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.66, color: "#ffffff",
              maxWidth: 480, marginBottom: 36 }}>
              Comunicadora, escritora e apresentadora. Da dor à coragem, a trajetória que deu origem ao movimento Espalhe Gardênias: mulheres que florescem através da própria história.
            </p>
            <div className="eg-hero__cta" style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Button variant="primary" onClick={() => onNav("gardenia")}>Conheça a história</Button>
              <Button variant="outlineLight" onClick={() => onNav("movimento")} style={{ background: "color-mix(in oklab, var(--pessego) 50%, transparent)", borderColor: "var(--pessego)", color: "var(--vinho)" }}>O movimento Espalhe Gardênias</Button>
            </div>
          </div>
        </div>
      </section>

      {/* 2 — MANIFESTO */}
      <QuoteBand attribution="Manifesto Espalhe Gardênias">
        “A gardênia floresce onde poucos acreditam ser possível. É a flor que transforma solo árido em beleza, dor em força e travessias em legado. Este é o movimento das mulheres que aprenderam a <em style={{ fontStyle: "normal", color: "var(--terracota)" }}>florescer apesar de tudo</em>.”
      </QuoteBand>

      {/* 3 — QUEM É GARDÊNIA */}
      <section className="eg-quem" style={{ position: "relative", background: "var(--vinho)", overflow: "hidden" }}>
        <style>{`
          .eg-quem .eg-quem__grid { display: grid; grid-template-columns: minmax(340px,44%) 1fr; align-items: center; min-height: 620px; }
          .eg-quem .eg-quem__text { padding: 90px clamp(24px,5vw,64px) 60px clamp(24px,6vw,110px); }
          .eg-quem .eg-quem__photo { align-self: stretch; position: relative; min-height: 520px; }
          .eg-quem .eg-quem__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--vinho) 0%, rgba(76,29,29,.45) 22%, rgba(76,29,29,0) 55%); }
          @media (max-width: 760px) {
            .eg-quem .eg-quem__grid { grid-template-columns: 1fr; min-height: 0; }
            .eg-quem .eg-quem__text { padding: 48px 22px 40px; text-align: center; order: 2; }
            .eg-quem .eg-quem__text .eg-quem__body { margin-left: auto; margin-right: auto; }
            .eg-quem .eg-quem__text .eg-quem__rule { justify-content: center; }
            .eg-quem .eg-quem__text .eg-quem__rule > span:first-child,
            .eg-quem .eg-quem__text .eg-quem__rule > span:last-child { width: 56px; }
            .eg-quem .eg-quem__photo { order: 1; min-height: 380px; height: 60vw; max-height: 460px; }
            .eg-quem .eg-quem__overlay { background: linear-gradient(180deg, rgba(76,29,29,0) 55%, var(--vinho) 100%); }
          }
        `}</style>
        <Flower which={1} simple={true} size={230} opacity={.14} style={{ position: "absolute", left: -30, top: -20, filter: "invert(88%) sepia(18%) saturate(320%) hue-rotate(340deg)", pointerEvents: "none" }} />
        <div className="eg-quem__grid" style={{ position: "relative" }}>
          <div className="eg-quem__text">
            <Eyebrow color="var(--pessego)">Quem é Gardênia</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, color: "var(--cream)", fontSize: "clamp(30px,3.6vw,54px)", lineHeight: 1.08, letterSpacing: ".01em", margin: "18px 0 0" }}>Gardênia Cavalcanti</h2>
            <div className="eg-quem__rule" style={{ display: "flex", alignItems: "center", gap: 10, margin: "24px 0 28px" }}>
              <span style={{ display: "block", width: 150, height: 1, background: "var(--canela)" }}></span>
              <span style={{ color: "var(--canela)", fontSize: 11, lineHeight: 1 }}>◈</span>
              <span style={{ display: "block", width: 150, height: 1, background: "var(--canela)" }}></span>
            </div>
            <div className="eg-quem__body" style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.7, color: "#ffffff", maxWidth: 440 }}>
              <p style={{ color: "#ffffff" }}>Do sertão de Alagoas aos principais palcos da comunicação brasileira.</p>
              <p style={{ marginTop: 16, color: "#ffffff" }}>Uma trajetória construída com fé, trabalho e resiliência. Mulher, mãe, escritora e apresentadora, transformou sua própria história de superação em um legado de inspiração e protagonismo feminino.</p>
              <p style={{ marginTop: 16, color: "#ffffff" }}>Mais do que uma personalidade da televisão, tornou-se uma voz que encoraja mulheres a acreditarem na força da própria jornada.</p>
            </div>

            <div style={{ marginTop: 34 }}>
              <Button variant="primary" onClick={() => onNav("gardenia")}>Conheça a história</Button>
            </div>
          </div>
          <div className="eg-quem__photo">
            <div style={{ position: "absolute", inset: 0, backgroundImage: `url('/site/gardenia-flor.jpg')`, backgroundSize: "cover", backgroundPosition: "center center" }}></div>
            <div className="eg-quem__overlay"></div>
          </div>
        </div>
      </section>


      {/* 4 — O LIVRO */}
      <EditorialSplit image={assetURL("assets/livro-home.web.jpg")} pos="30% center" dark serifTitle eyebrow="O Livro"
        title="Gardênia" action="Sobre o livro" onAction={() => onNav("livro")} flower={2}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 19, color: "var(--pessego)", marginBottom: 18, marginTop: -6 }}>Uma História de Coragem e Superação</div>
        <p style={{ color: "#ffffff" }}>Mais do que uma autobiografia, este é o relato de uma mulher que precisou encontrar força quando a vida parecia ter levado tudo.</p>
        <p style={{ marginTop: 16, color: "#ffffff" }}>Uma história sobre perdas, recomeços, fé e a coragem de continuar florescendo mesmo nos períodos mais difíceis.</p>
        <p style={{ marginTop: 16, color: "#ffffff" }}>Uma jornada que prova que o nosso passado não define o nosso destino.</p>
      </EditorialSplit>

      {/* 5 — TRÊS PILARES */}
      <section style={{ ...WRAP }}>
        <SectionHead kicker="O que é o Espalhe Gardênias"
          title="Inspire. Floresça. Transforme."
          intro="O Espalhe Gardênias nasceu da certeza de que toda mulher carrega dentro de si uma força capaz de transformar a própria história. Mais do que um movimento, é uma comunidade que inspira, desenvolve e conecta mulheres que desejam viver com propósito, coragem e protagonismo." />
        <div style={{ marginTop: 54 }}>
          <TriadGrid items={[
            { i: "sparkles", t: "Inspirar", d: "Histórias reais, conteúdos transformadores e experiências que despertam coragem, fortalecem a autoestima e mostram que é possível florescer em qualquer fase da vida." },
            { i: "graduation-cap", t: "Capacitar", d: "Conhecimento, oportunidades e desenvolvimento para que mais mulheres descubram seus talentos, ampliem seus horizontes e construam sua própria independência." },
            { i: "heart-handshake", t: "Conectar", d: "Uma rede de mulheres que compartilham vivências, criam oportunidades e caminham juntas, porque nenhuma transformação acontece sozinha." },
          ]} />
        </div>
      </section>

      {/* 6 — FRENTES DE IMPACTO */}
      <section style={{ background: "var(--linen)" }}>
        <div style={{ ...WRAP, paddingBottom: "clamp(40px,6vw,64px)" }}>
          <SectionHead kicker="Frentes de impacto" title="Propósito em ação"
            intro="O Espalhe Gardênias transforma propósito em ação por meio de iniciativas que inspiram, fortalecem e conectam mulheres em diferentes momentos de suas jornadas. Cada projeto nasce da crença de que toda mulher pode florescer quando encontra apoio, oportunidade e coragem para seguir adiante." />
          <div className="eg-4col" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22, marginTop: 48 }}>
            {[
              { i: "flower-2", t: "Florescer", d: "Uma iniciativa dedicada ao desenvolvimento pessoal e emocional, incentivando mulheres a resgatarem sua autoestima, seus sonhos e sua confiança." },
              { i: "graduation-cap", t: "Capacita Gardênias", d: "Programas, mentorias e experiências voltadas para o crescimento profissional e a autonomia financeira feminina." },
              { i: "book-open", t: "Histórias que Florescem", d: "Livros, palestras, conteúdos e projetos que transformam experiências reais em inspiração para milhares de mulheres." },
              { i: "coins", t: "Gera Renda", d: "Transformando talentos em oportunidades. Por meio de cursos, oficinas, mentorias, artesanato, produtos autorais e iniciativas de geração de renda, apoiamos mulheres na construção de sua independência financeira e no fortalecimento de seus sonhos." },
            ].map((c) => (
              <div key={c.t} style={{ background: "var(--cream)", padding: "32px 28px", border: "1px solid var(--border-faint)" }}>
                <Icon name={c.i} size={26} color="var(--terracota)" />
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 20, color: "var(--fg1)", margin: "16px 0 10px" }}>{c.t}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.65, color: "var(--fg2)" }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 6b — PROJETOS SOCIAIS */}
      <section style={{ background: "var(--cream)" }}>
        <div style={{ ...WRAP, paddingTop: "clamp(48px,7vw,80px)", paddingBottom: "clamp(48px,7vw,80px)" }}>
          <SectionHead kicker="Projetos sociais" title="Onde o propósito se estende"
            intro="Presença ativa em causas que celebram fé, amor e comunidade." />
          <div className="eg-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginTop: 48 }}>
            {[
              { i: "heart", t: "Madrinha do Cristo Redentor", d: "Embaixadora oficial de uma das maiores referências espirituais e culturais do Brasil, apoiando iniciativas de fé, memória e turismo consciente." },
              { i: "heart", t: "Madrinha do Heróis do Amor", d: "Apoio a um movimento dedicado a reconhecer e amparar histórias reais de amor, cuidado e dedicação em famílias brasileiras." },
            ].map((c) => (
              <div key={c.t} style={{ background: "var(--linen)", padding: "36px 32px", border: "1px solid var(--border-faint)", borderLeft: "3px solid var(--terracota)" }}>
                <Icon name={c.i} size={28} color="var(--terracota)" />
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 22, color: "var(--fg1)", margin: "18px 0 12px" }}>{c.t}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.7, color: "var(--fg2)" }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 7 — IMPRENSA / AUTORIDADE */}
      <PressStrip />

      {/* 8 — PALESTRAS / CONVITE */}
      <EditorialSplit image="/__l5e/assets-v1/53071841-80a2-4958-a692-0b888e41d969/palestra-gardenia.jpg" pos="center 25%" eyebrow="Palestras, participações e parcerias"
        title="Leve a coragem ao seu palco" action="Convide Gardênia" onAction={() => onNav("contato")}>
        <p>Uma história que conecta. Uma voz que gera impacto.</p>
        <p style={{ marginTop: 16 }}>Apresentadora, escritora, empresária e fundadora do movimento Espalhe Gardênias, Gardênia transforma sua própria história em uma poderosa ferramenta de conexão com diferentes públicos, levando mensagens que inspiram, mobilizam e geram identificação genuína.</p>
        <p style={{ marginTop: 16 }}>Sua presença em eventos, convenções, encontros corporativos, campanhas e ações de marca une credibilidade, experiência e forte capacidade de comunicação, criando experiências memoráveis para audiências de diferentes segmentos.</p>
        <div style={{ display: "flex", gap: 32, marginTop: 26, flexWrap: "wrap" }}>
          {[["+20", "anos de trajetória"], ["Brasil", "palcos e eventos"], ["TV", "presença nacional"]].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 26, color: "var(--terracota)" }}>{n}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg3)", marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
      </EditorialSplit>

      {/* 9 — CONVERSÃO FINAL */}
      <ManifestoBand kicker="Já nascemos poderosas"
        action="Fale com a equipe" onAction={() => onNav("contato")}>
        Toda mulher já precisou recomeçar. Toda mulher merece se reconhecer como um <span style={{ color: "var(--terracota)" }}>MULHERÃO</span>.
      </ManifestoBand>

      <LaunchCTA />
    </div>
  );
}

/* ============================================================ O MOVIMENTO */
function MovimentoScreen({ onNav }) {
  const pilares = [
    { i: "sparkles", t: "Inspirar", d: "Através de histórias, conteúdos, encontros e experiências que despertam coragem, autoestima e confiança." },
    { i: "graduation-cap", t: "Capacitar", d: "Por meio de cursos, oficinas, mentorias e iniciativas que promovem desenvolvimento pessoal e profissional." },
    { i: "coins", t: "Gerar renda", d: "Transformando talentos em oportunidades através da produção de artes, produtos, capacitações e projetos de empreendedorismo feminino." },
    { i: "heart-handshake", t: "Conectar", d: "Criando uma rede de mulheres que compartilham experiências, fortalecem umas às outras e crescem juntas." },
    { i: "flower-2", t: "Transformar", d: "Porque acreditamos que pequenas ações podem gerar grandes mudanças na vida de uma mulher, de sua família e de toda a sua comunidade." },
  ];
  const formas = [
    "Participando dos encontros e eventos do movimento",
    "Compartilhando sua história e inspirando outras mulheres",
    "Tornando-se parceira de projetos e ações sociais",
    "Apoiando iniciativas de capacitação e geração de renda",
    "Conectando oportunidades para mulheres da comunidade",
    "Divulgando a mensagem do movimento",
  ];
  return (
    <div style={{ background: "var(--cream)" }}>
      <section style={{ position: "relative", minHeight: 520, overflow: "hidden", marginTop: -82,
        background: "var(--vinho)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Flower which={2} simple={false} size={460} opacity={.08} style={{ position: "absolute", right: -90, top: -70 }} />
        <Flower which={1} simple={false} size={320} opacity={.06} style={{ position: "absolute", left: -60, bottom: -80 }} />
        <div style={{ position: "relative", textAlign: "center", padding: "150px clamp(24px,5vw,40px) 90px", maxWidth: 820 }}>
          <Logo variant="pessego" height={62} style={{ margin: "0 auto 32px" }} />
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(26px,3.6vw,34px)", lineHeight: 1.34,
            color: "var(--pessego)", margin: "0 auto" }}>
            Um convite para florescer e ajudar outras mulheres a florescerem também.
          </h1>
        </div>
      </section>

      {/* SEÇÃO 1 — ESPALHE GARDÊNIAS */}
      <section style={{ ...WRAP, paddingBottom: "clamp(30px,5vw,48px)" }}>
        <div className="eg-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px,6vw,80px)" }}>
          <div>
            <Eyebrow>Espalhe Gardênias</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(28px,3.4vw,38px)",
              color: "var(--fg1)", margin: "16px 0 18px", lineHeight: 1.1 }}>Toda mulher carrega a capacidade de florescer</h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg2)" }}>
              O Espalhe Gardênias nasceu da crença de que toda mulher carrega dentro de si a capacidade de florescer, independentemente dos desafios que enfrentou.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg2)", marginTop: 16 }}>
              Inspirado na trajetória de Gardênia Cavalcanti, o movimento transforma histórias de superação em inspiração, criando uma rede de apoio, desenvolvimento e oportunidades para mulheres que desejam viver com mais propósito, confiança e protagonismo.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg2)", marginTop: 16 }}>
              Mais do que um movimento, é um convite para florescer e ajudar outras mulheres a florescerem também.
            </p>
          </div>
          <div>
            <Eyebrow>Por que existimos</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(28px,3.4vw,38px)",
              color: "var(--fg1)", margin: "16px 0 18px", lineHeight: 1.1 }}>A coragem já habita dentro de cada mulher</h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg2)" }}>
              Porque muitas mulheres passam a vida ouvindo o que não podem ser, onde não podem chegar e quais sonhos deveriam abandonar. O Espalhe Gardênias existe para lembrar que a coragem já habita dentro de cada mulher.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg2)", marginTop: 16 }}>
              Nossa motivação é inspirar transformações reais, fortalecer trajetórias e criar caminhos para que mais mulheres descubram sua força, desenvolvam seus talentos e construam novas possibilidades para suas vidas.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg2)", marginTop: 16 }}>
              Quando uma mulher floresce, ela inspira muitas outras a florescerem também.
            </p>
          </div>
        </div>
      </section>

      {/* SEÇÃO 3 — PILARES */}
      <section style={{ background: "var(--linen)" }}>
        <div style={{ ...WRAP }}>
          <SectionHead kicker="Pilares" title="O que sustenta o movimento" />
          <div className="eg-5col" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 18, marginTop: 50 }}>
            {pilares.map((p) => (
              <div key={p.t} style={{ background: "var(--cream)", padding: "30px 24px", border: "1px solid var(--border-faint)", borderTop: "2px solid var(--terracota)" }}>
                <Icon name={p.i} size={24} color="var(--terracota)" />
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 15, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--fg1)", margin: "16px 0 10px" }}>{p.t}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.62, color: "var(--fg2)" }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SEÇÃO 4 — FAÇA PARTE */}
      <section style={{ ...WRAP }}>
        <div className="eg-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "clamp(40px,6vw,72px)", alignItems: "start" }}>
          <div>
            <SectionHead align="left" kicker="Faça parte deste movimento" title="A transformação acontece quando caminhamos juntas" titleSize={34}
              intro="Existem diversas formas de participar dessa rede de inspiração, desenvolvimento e impacto:" />
            <div style={{ marginTop: 32 }}><Button variant="primary" onClick={() => onNav("contato")}>Quero participar</Button></div>
          </div>
          <div>
            {formas.map((f) => (
              <div key={f} style={{ display: "flex", gap: 14, padding: "14px 0", borderBottom: "1px solid var(--border-faint)" }}>
                <Flower which={1} simple size={22} style={{ flexShrink: 0, marginTop: 2, width: 22, height: 22, objectFit: "contain" }} />
                <span style={{ fontFamily: "var(--font-body)", fontSize: 15.5, color: "var(--fg1)" }}>{f}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ManifestoBand kicker="Cada gesto importa" action="Quero participar" onAction={() => onNav("contato")}>
        Quando espalhamos coragem, espalhamos transformação. Quando espalhamos esperança, espalhamos possibilidades. E quando espalhamos gardênias, ajudamos outras mulheres a <span style={{ color: "var(--terracota)" }}>florescer</span>.
      </ManifestoBand>
    </div>
  );
}

/* ============================================================ GARDÊNIA */
function GardeniaScreen({ onNav }) {
  const arc = [
    { n: "01", t: "Origem no sertão", d: "Nascida em Santana do Ipanema (AL), um lugar simples do sertão, mas com um coração grande e um sonho ainda maior. Raiz, força, solo árido e verdade." },
    { n: "02", t: "Lutos e travessias", d: "A vida testou cedo: a perda dos pais e do irmão, a responsabilidade que chegou antes da hora. A dor como prova de coragem, nunca como vitimismo." },
    { n: "03", t: "Trabalho e ascensão", d: "Aos 18, deixou o sertão e foi sozinha para Recife em busca de novos horizontes. Começou como promotora de vendas e, com dedicação e talento, chegou a gerente regional de uma grande indústria de cosméticos, com atuação no Norte e Nordeste do Brasil. Uma jornada construída com trabalho, coragem e a certeza de que sonhos podem ser realizados quando há propósito." },
    { n: "04", t: "TV e autoridade pública", d: "Hoje apresenta “Vem com a Gente” na Band Rio, entre outras atrações. TV, imprensa e autoridade construídas com presença e credibilidade." },
    { n: "05", t: "História que vira movimento", d: "A trajetória individual se torna voz coletiva: Espalhe Gardênias nasce para despertar a força que existe em cada mulher." },
  ];
  return (
    <div style={{ background: "var(--cream)" }}>
      <section style={{ position: "relative", minHeight: 460, overflow: "hidden", marginTop: -82,
        background: "var(--vinho)", display: "flex", alignItems: "center" }}>
        <Flower which={1} simple={false} size={420} opacity={.07} style={{ position: "absolute", right: -80, bottom: -110 }} />
        <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "150px clamp(24px,5vw,40px) 80px", width: "100%" }}>
          <div style={{ maxWidth: 640 }}>
            <Eyebrow color="var(--pessego)">Quem é Gardênia</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-serif)", textTransform: "uppercase", color: "var(--pessego)",
              fontSize: "clamp(34px,5vw,56px)", lineHeight: 1.04, letterSpacing: ".01em", margin: "22px 0 0" }}>A mulher por trás da imagem</h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 16.5, lineHeight: 1.68, color: "var(--pessego)", opacity: .92, marginTop: 22, maxWidth: 520 }}>
              Apresentadora de televisão, comunicadora, empresária, escritora e idealizadora do movimento Espalhe Gardênias.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Button variant="primary" onClick={() => onNav("livro")}>Leia no livro</Button>
              <Button variant="outlineLight" onClick={() => onNav("imprensa")}>Sala de imprensa</Button>
            </div>
          </div>
        </div>
      </section>

      {/* BIO INSTITUCIONAL */}
      <section style={{ padding: "clamp(64px,9vw,96px) clamp(24px,5vw,40px) clamp(30px,5vw,44px)", maxWidth: 800, margin: "0 auto", textAlign: "center" }}>
        <GCMark tone="vinho" size={48} style={{ margin: "0 auto 26px" }} />
        <p style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(21px,2.6vw,26px)", lineHeight: 1.5, color: "var(--fg1)" }}>
          Sucesso é diferente de fama. Esta é a história de uma mulher madura, livre e dona da própria cena, contada como posicionamento, não como passado.
        </p>
      </section>

      {/* LINHA DO TEMPO */}
      <section style={{ padding: "clamp(20px,4vw,30px) clamp(24px,5vw,40px) clamp(64px,9vw,96px)", maxWidth: 920, margin: "0 auto" }}>
        <Eyebrow style={{ textAlign: "center", marginBottom: 8 }}>Linha do tempo da trajetória</Eyebrow>
        {arc.map((s) => (
          <div key={s.n} className="eg-arc" style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 34, padding: "34px 0",
            borderTop: "1px solid var(--border-faint)" }}>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 18, letterSpacing: ".16em", color: "var(--terracota)" }}>{s.n}</div>
            <div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(22px,2.6vw,26px)", color: "var(--fg1)", marginBottom: 12 }}>{s.t}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.75, color: "var(--fg2)", maxWidth: 580 }}>{s.d}</p>
            </div>
          </div>
        ))}
      </section>

      {/* VALORES + GALERIA */}
      <section style={{ background: "var(--linen)" }}>
        <div style={{ ...WRAP }}>
          <div className="eg-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "clamp(40px,6vw,72px)", alignItems: "center" }}>
            <div>
              <SectionHead align="left" kicker="Valores & posicionamento" title="Coragem, raízes, delicadeza com propósito" titleSize={34} />
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 18 }}>
                {[
                  ["Coragem feminina", "Acreditar em si, romper barreiras e florescer diante da adversidade."],
                  ["Raízes & identidade", "Honrar a cultura do sertão, a memória e a beleza das origens."],
                  ["Delicadeza com propósito", "A força que vive dentro da sensibilidade."],
                  ["Família como alicerce", "A base que sustenta a jornada: amor, presença e legado que se constrói em casa."],
                  ["Empoderamento feminino", "Inspirar mulheres a ocuparem seus espaços com voz, autonomia e protagonismo."],
                ].map(([t, d]) => (
                  <div key={t} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                    <Flower which={1} simple size={26} style={{ flexShrink: 0, marginTop: 2, height: 26, objectFit: "contain" }} />
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 17, color: "var(--fg1)" }}>{t}</div>
                      <div style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.6, color: "var(--fg2)", marginTop: 4 }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="eg-gallery" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <img src={assetURL("assets/gc/p11.jpeg")} alt="" style={{ width: "100%", height: 300, objectFit: "cover", objectPosition: "center 18%" }} />
              <img src={assetURL("assets/gc/p09.jpeg")} alt="" style={{ width: "100%", height: 300, objectFit: "cover", objectPosition: "center 12%", marginTop: 30 }} />
            </div>
          </div>
        </div>
      </section>

      <QuoteBand bg="var(--blush)" attribution="Espalhe Gardênias">
        “Sua história vira posicionamento. O posicionamento vira presença. A presença vira oportunidade.”
      </QuoteBand>

      <ManifestoBand kicker="Convite" action="Convidar para palestrar" onAction={() => onNav("contato")}>
        Da menina do sertão à mulher pública, uma voz pronta para inspirar o seu palco.
      </ManifestoBand>
    </div>
  );
}

Object.assign(window, { HomeScreen, MovimentoScreen, GardeniaScreen });
