// Sections 2: Authority, Offer, Objections, Guarantee, Premio, Urgency, FAQ, FinalCta, Footer
const { Icon: I2, Section: S2, Kicker: K2, Serif: SF2, SEDS: DS2, StarDivider: SD2, CTAButton: CTA } = window;
const { Button: B2, Badge: BD2, Card: C2, PriceCard, Countdown } = DS2;

function SEAuthority() {
  const acts = [
    { name: "Cia. de Comédia G7", role: "Comédia & stand-up", img: "assets/atracao-g7.png" },
    { name: "Beto Barros", role: "Palestra-show “Poderosamente”", img: "assets/atracao-beto-barros.png" },
    { name: "Alex Freitas", role: "Music Jazz Experience · Rio", img: "assets/atracao-alex.png" },
    { name: "Márcia Witczak", role: "Comunicação e presença", img: "assets/atracao-marcia-witzack.png" },
  ];
  return (
    <section id="atracoes" style={{ color: "#fff", padding: "clamp(80px,11vw,132px) clamp(20px,5vw,56px) 0", position: "relative", backgroundColor: "var(--purple-950)", backgroundImage: "url('assets/bg-atracoes.jpg')", backgroundSize: "cover", backgroundPosition: "center top", backgroundAttachment: "fixed" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
          <K2>Atrações confirmadas</K2>
          <h2 style={{ ...SF2, fontSize: "clamp(30px,4.4vw,48px)", color: "#fff", margin: "16px 0 0" }}>
            Nomes que sobem ao palco <span style={{ fontStyle: "italic", color: "var(--gold-400)" }}>por você</span>
          </h2>
        </div>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", gap: "clamp(8px,1.5vw,28px)", marginTop: "clamp(36px,4.5vw,60px)", flexWrap: "nowrap" }} className="se-acts">
          {acts.map((a, i) => (
            <div key={i} className="se-fade se-act" style={{ transitionDelay: `${i * 90}ms`, textAlign: "center", flex: "0 1 auto", display: "flex", flexDirection: "column" }}>
              <div style={{ ...SF2, fontSize: "clamp(21px,2.1vw,30px)", color: "#fff", lineHeight: 1.1 }}>{a.name}</div>
              <div style={{ fontSize: "clamp(12px,1.2vw,14px)", color: "var(--gold-300)", marginTop: 6, letterSpacing: ".03em", minHeight: "2.4em" }}>{a.role}</div>
              <img src={a.img} alt={a.name} className="se-act-img" style={{ height: "clamp(300px,32vw,460px)", width: "auto", maxWidth: "none", display: "block", margin: "12px auto 0", objectFit: "contain", objectPosition: "bottom" }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OfferItem({ children }) {
  return (
    <li style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15.5, lineHeight: 1.5, color: "var(--text-body)" }}>
      <span style={{ flexShrink: 0, color: "var(--gold-600)", fontWeight: 700, marginTop: 1 }}>✓</span>{children}
    </li>
  );
}

function LoteCard({ tier, price, per, note, features, cta, featured, badge, onCta }) {
  const dark = !!featured;
  return (
    <div className={featured ? "lote lote-featured" : "lote"} style={{ position: "relative", display: "flex", flexDirection: "column", borderRadius: "var(--radius-xl)", padding: "clamp(24px,2.4vw,30px)", background: dark ? "var(--gradient-brand)" : "var(--surface-card)", border: dark ? "1px solid transparent" : "1px solid var(--border)", boxShadow: dark ? "var(--shadow-lg)" : "var(--shadow-sm)", color: dark ? "#fff" : "var(--text-strong)" }}>
      {badge && <span style={{ position: "absolute", top: 16, right: 16, background: "var(--gradient-gold)", color: "var(--purple-900)", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", padding: "5px 12px", borderRadius: "var(--radius-pill)" }}>{badge}</span>}
      <div style={{ textTransform: "uppercase", letterSpacing: ".16em", fontSize: 12, fontWeight: 700, color: dark ? "var(--gold-300)" : "var(--gold-600)" }}>{tier}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 12 }}>
        <span style={{ fontSize: "clamp(38px,3.8vw,52px)", fontWeight: 800, lineHeight: 1, letterSpacing: "-.02em", whiteSpace: "nowrap" }}>R$ {price}</span>
        <span style={{ fontSize: 14, fontWeight: 500, color: dark ? "var(--purple-200)" : "var(--text-muted)" }}>{per}</span>
      </div>
      <div style={{ marginTop: 10, fontSize: 13.5, color: dark ? "var(--purple-200)" : "var(--text-muted)" }}>{note}</div>
      <ul style={{ listStyle: "none", margin: "20px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5, lineHeight: 1.45, color: dark ? "rgba(255,255,255,.9)" : "var(--text-body)" }}>
            <span style={{ flexShrink: 0, color: dark ? "var(--gold-300)" : "var(--gold-600)", fontWeight: 700, marginTop: 1 }}>✓</span>{f}
          </li>
        ))}
      </ul>
      <div style={{ marginTop: "auto", paddingTop: 24 }}>
        {featured
          ? <CTA variant="gold" fullWidth onClick={onCta}>{cta}</CTA>
          : <CTA variant="gold" fullWidth disabled>Em breve</CTA>}
      </div>
    </div>
  );
}

function SEOffer({ onCta }) {
  const inc = [
    "Acesso completo ao evento (19h–22h)",
    "Show da Cia. de Comédia G7 (60 min)",
    "Palestra-show “Poderosamente”, com Beto Barros",
    "Music Jazz Experience, com Alex Freitas",
    "Conteúdo de comunicação com Márcia Witczak",
    "Combo de boas-vindas (pipoca + bebida + chocolate)",
    "Presente exclusivo Secretária Extraordinária",
    "Participação no momento do Prêmio Secretária Extraordinária",
  ];
  return (
    <S2 id="ingressos" tone="cream" style={{ paddingTop: "clamp(28px,4vw,52px)" }}>
      <div className="offer-hero">
        <div className="offer-marquee-wrap">
          <div className="offer-marquee-track">
            <span>Secretária Extraordinária&nbsp;·&nbsp;</span><span>Secretária Extraordinária&nbsp;·&nbsp;</span><span>Secretária Extraordinária&nbsp;·&nbsp;</span>
          </div>
        </div>
        <img className="offer-ticket" src="assets/ingressos.png" alt="Ingresso Secretária Extraordinária 2026 — 1º Lote" data-om-raster />
      </div>
      <div style={{ maxWidth: 720, margin: "clamp(20px,3vw,36px) auto 0", textAlign: "center" }}>
        <K2>A oferta</K2>
        <h2 style={{ ...SF2, fontSize: "clamp(30px,4.4vw,48px)", color: "var(--text-strong)", margin: "16px 0 0" }}>
          Tudo o que está <span style={{ fontStyle: "italic", color: "var(--purple-600)" }}>incluso</span>
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "clamp(24px,3vw,36px)", alignItems: "start", marginTop: 40 }}>
        <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-xl)", padding: "34px 36px", boxShadow: "var(--shadow-md)" }}>
          <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: "14px 32px" }}>
            {inc.map((t, i) => <OfferItem key={i}>{t}</OfferItem>)}
          </ul>
          <p style={{ marginTop: 24, fontSize: 13.5, color: "var(--text-muted)", fontStyle: "italic", borderTop: "1px dashed var(--border-strong)", paddingTop: 18, marginBottom: 0 }}>
            Todos os lotes incluem os mesmos benefícios — o que muda é só o preço, conforme a disponibilidade.
          </p>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "center", gap: "10px 28px", margin: 0 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontSize: 15, color: "var(--text-body)" }}>
            <I2 name="ShoppingBag" size={17} color="var(--gold-600)" /> Vendas oficiais pela
            <img src="assets/sympla.webp" alt="Sympla" style={{ height: 23, verticalAlign: "middle" }} />
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--text-muted)" }}>
            <I2 name="CreditCard" size={16} color="var(--gold-600)" /> Cartão, Pix ou boleto
          </span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "clamp(16px,1.8vw,22px)", alignItems: "stretch" }} className="offer-lotes">
          <LoteCard tier="1º Lote" price="250" per="/ pessoa" featured badge="Melhor preço" note="Somente 200 ingressos disponíveis" features={["Todos os benefícios inclusos", "Assim que esgotar, sobe para R$ 300"]} cta="Garantir meu lugar" onCta={onCta} />
          <LoteCard tier="2º Lote" price="300" per="/ pessoa" note="150 ingressos, após o 1º lote" features={["Todos os benefícios inclusos", "Liberado quando o 1º lote esgotar"]} cta="Escolher" onCta={onCta} />
          <LoteCard tier="3º Lote" price="340" per="/ pessoa" note="150 ingressos, até esgotar" features={["Todos os benefícios inclusos", "Últimas vagas do teatro"]} cta="Escolher" onCta={onCta} />
        </div>
      </div>
    </S2>
  );
}

function SEObjections({ onCta }) {
  const qs = [
    { q: "“Mas eu não tenho ninguém para ir comigo…”", a: "Você não precisa. É uma noite pensada para você se sentir acolhida sozinha ou acompanhada — muita gente vai chegar exatamente como você e sair com uma noite inesquecível." },
    { q: "“Será que vale o preço?”", a: "Em uma comemoração de escritório você recebe um bolo. Aqui você recebe uma noite completa de teatro, música, conteúdo, presente e a chance de ser reconhecida publicamente — por menos que um jantar especial a dois." },
    { q: "“E se eu comprar e não puder ir?”", a: "Reembolso garantido até 24h antes do evento. Sem burocracia." },
    { q: "“Minha empresa vai aprovar isso como presente?”", a: "Sim — é exatamente para isso que existe a opção “Comprar para minha equipe”. Emitimos nota fiscal e facilitamos todo o processo para RH e gestores." },
    { q: "“Isso é sério ou é só um showzinho qualquer?”", a: "As atrações são profissionais reconhecidos nacionalmente, e o evento é realizado pelo Instituto Eleva e Instituto NOSS — instituições com histórico consolidado em formação e valorização profissional." },
  ];
  return (
    <section style={{ background: "var(--gradient-brand)", color: "#fff", padding: "clamp(80px,11vw,132px) clamp(20px,5vw,56px)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", left: "-10%", top: "0%", width: 520, height: 520, borderRadius: "50%", background: "radial-gradient(circle,rgba(139,84,184,.3),transparent 62%)", pointerEvents: "none" }} />
      <div style={{ maxWidth: 900, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", maxWidth: 700, margin: "0 auto" }}>
          <K2>Sem dúvidas na cabeça</K2>
          <h2 style={{ ...SF2, fontSize: "clamp(30px,4.4vw,48px)", color: "#fff", margin: "16px 0 0" }}>
            O que costuma passar pela sua mente
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 44 }}>
          {qs.map((o, i) => (
            <div key={i} className="se-fade" style={{ transitionDelay: `${i * 55}ms`, background: "rgba(255,255,255,.04)", border: "1px solid rgba(216,168,72,.2)", borderRadius: "var(--radius-lg)", padding: "24px 28px" }}>
              <div style={{ ...SF2, fontSize: 20, color: "var(--gold-300)", marginBottom: 10 }}>{o.q}</div>
              <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.65, color: "var(--purple-200)" }}>{o.a}</p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
          <CTA variant="gold" size="lg" onClick={onCta}>Sim, essa noite é pra mim</CTA>
        </div>
      </div>
    </section>
  );
}

function SEGuarantee() {
  return (
    <S2 tone="cream" pad="lg">
      <div className="guarantee-card" style={{ maxWidth: 860, margin: "0 auto", background: "var(--surface-card)", border: "1px solid var(--border-gold)", borderRadius: "var(--radius-xl)", padding: "clamp(32px,5vw,52px)", boxShadow: "var(--shadow-md)", display: "grid", gridTemplateColumns: "auto 1fr", gap: "clamp(20px,4vw,40px)", alignItems: "center" }}>
        <img src="assets/selo-reembolso.png" alt="Selo Reembolso Sem Complicação — até 24h antes" style={{ width: "clamp(160px,20vw,240px)", height: "auto", display: "block" }} />
        <div>
          <K2>Garantia</K2>
          <h2 style={{ ...SF2, fontSize: "clamp(26px,3.4vw,38px)", color: "var(--text-strong)", margin: "10px 0 0" }}>Reembolso Sem Complicação</h2>
          <p style={{ margin: "14px 0 0", fontSize: 16, lineHeight: 1.65, color: "var(--text-body)" }}>
            Se você comprar seu ingresso e, por qualquer motivo, não puder comparecer, garantimos <strong>reembolso total até 24 horas antes</strong> do início do evento. Basta solicitar pelo canal oficial — sem formulário longo, sem perguntas.
          </p>
        </div>
      </div>
    </S2>
  );
}

function SEPremio({ onCta }) {
  return (
    <section style={{ background: "var(--gradient-gold)", color: "var(--purple-900)", padding: "clamp(64px,9vw,104px) clamp(20px,5vw,56px)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", right: "-6%", top: "-40%", fontSize: 420, color: "rgba(48,0,72,.06)", lineHeight: 1, ...SF2, pointerEvents: "none" }}>★</div>
      <div style={{ maxWidth: 900, margin: "0 auto", textAlign: "center", position: "relative" }}>
        <span style={{ display: "inline-block", textTransform: "uppercase", letterSpacing: ".22em", fontSize: 12.5, fontWeight: 700, color: "var(--purple-800)" }}>Inscrição gratuita</span>
        <h2 style={{ ...SF2, fontSize: "clamp(30px,4.6vw,52px)", color: "var(--purple-900)", margin: "14px 0 0" }}>
          Prêmio Secretária Extraordinária
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--purple-800)", maxWidth: 620, margin: "18px auto 0", fontWeight: 500 }}>
          Sua história pode ser celebrada no palco, diante de centenas de pessoas que entendem seu valor. A inscrição é gratuita e independente da compra do ingresso.
        </p>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 30 }}>
          <CTA variant="plum" size="lg" onClick={onCta}>Inscrever no Prêmio (grátis)</CTA>
        </div>
      </div>
    </section>
  );
}

function SECountdown({ target }) {
  const calc = () => {
    const diff = Math.max(0, new Date(target) - new Date());
    const s = Math.floor(diff / 1000);
    return [Math.floor(s / 86400), Math.floor(s % 86400 / 3600), Math.floor(s % 3600 / 60), s % 60];
  };
  const [t, setT] = React.useState(calc);
  React.useEffect(() => { const id = setInterval(() => setT(calc()), 1000); return () => clearInterval(id); }, [target]);
  const units = [["Dias", t[0]], ["Horas", t[1]], ["Min", t[2]], ["Seg", t[3]]];
  return (
    <div className="se-countdown" style={{ display: "flex", gap: "clamp(6px,1.5vw,18px)", alignItems: "stretch", flexWrap: "nowrap" }}>
      {units.map(([label, val], i) => (
        <React.Fragment key={label}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
            <div style={{ position: "relative", minWidth: "clamp(58px,15vw,118px)", padding: "clamp(12px,2vw,26px) clamp(6px,1.4vw,18px)", borderRadius: "var(--radius-lg)", background: "linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02))", border: "1px solid rgba(216,168,72,.32)", boxShadow: "inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.35)" }}>
              <div style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 1, background: "rgba(0,0,0,.35)" }} />
              <div style={{ fontSize: "clamp(34px,5.4vw,72px)", fontWeight: 600, lineHeight: 1, letterSpacing: "-.02em", color: "#fff", textAlign: "center", fontVariantNumeric: "tabular-nums" }}>{String(val).padStart(2, "0")}</div>
            </div>
            <div style={{ fontSize: "clamp(11px,1.1vw,13px)", fontWeight: 600, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--gold-300)" }}>{label}</div>
          </div>
          {i < units.length - 1 && <div style={{ display: "flex", alignItems: "flex-start", paddingTop: "clamp(12px,1.8vw,24px)", fontSize: "clamp(22px,4vw,54px)", fontWeight: 600, color: "rgba(216,168,72,.55)", lineHeight: 1 }}>:</div>}
        </React.Fragment>
      ))}
    </div>
  );
}

function SEUrgency({ onCta }) {
  const pts = [
    { icon: "TicketPercent", t: "Lote 1 real e limitado", d: "Apenas 200 ingressos a R$ 250. Esgotado, o preço sobe automaticamente para R$ 300." },
    { icon: "Armchair", t: "Capacidade física do teatro", d: "500 lugares na configuração-base. Não há reposição de lote esgotado." },
    { icon: "CalendarClock", t: "Data fixa e não remarcável", d: "28 de setembro de 2026, segunda-feira — Dia da Secretária." },
  ];
  return (
    <section style={{ background: "var(--purple-950)", color: "#fff", padding: "clamp(80px,11vw,128px) clamp(20px,5vw,56px)", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
        <K2>Vagas limitadas</K2>
        <h2 style={{ ...SF2, fontSize: "clamp(30px,4.4vw,48px)", color: "#fff", margin: "16px 0 8px" }}>
          A noite é dia 28. Depois não tem repeteco.
        </h2>
        <div style={{ display: "flex", justifyContent: "center", margin: "clamp(36px,5vw,56px) 0" }}>
          <SECountdown target="2026-09-28T19:00:00-03:00" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: 18, marginTop: 12 }}>
          {pts.map((p, i) => (
            <div key={i} style={{ background: "rgba(255,255,255,.04)", border: "1px solid rgba(216,168,72,.2)", borderRadius: "var(--radius-lg)", padding: "26px 24px", textAlign: "left" }}>
              <I2 name={p.icon} size={26} color="var(--gold-400)" />
              <div style={{ ...SF2, fontSize: 20, color: "#fff", margin: "14px 0 6px" }}>{p.t}</div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--purple-200)" }}>{p.d}</p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
          <CTA variant="gold" size="lg" onClick={onCta}>Garantir o 1º lote</CTA>
        </div>
      </div>
    </section>
  );
}

function FaqRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: "1px solid var(--border)" }}>
      <button onClick={() => setOpen(o => !o)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, background: "none", border: "none", padding: "22px 4px", cursor: "pointer", textAlign: "left" }}>
        <span style={{ ...SF2, fontSize: "clamp(17px,2vw,21px)", color: "var(--text-strong)" }}>{q}</span>
        <span style={{ flexShrink: 0, width: 32, height: 32, borderRadius: "50%", border: "1px solid var(--border-strong)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--purple-600)", transform: open ? "rotate(45deg)" : "none", transition: "transform .25s var(--ease-standard)" }}>
          <I2 name="Plus" size={18} color="var(--purple-600)" />
        </span>
      </button>
      <div style={{ maxHeight: open ? 320 : 0, overflow: "hidden", transition: "max-height .35s var(--ease-standard)" }}>
        <p style={{ margin: "0 4px", paddingBottom: 22, fontSize: 15.5, lineHeight: 1.65, color: "var(--text-body)", maxWidth: 760 }}>{a}</p>
      </div>
    </div>
  );
}

function SEFaq() {
  const faqs = [
    ["Quando e onde é o evento?", "28 de setembro de 2026 (segunda-feira), no Teatro La Salle — 906 Sul, Brasília/DF. Credenciamento a partir das 18h30, início às 19h."],
    ["Preciso ir acompanhada?", "Não. Você pode ir sozinha, com colegas ou com sua equipe — o evento foi pensado para acolher todos os formatos."],
    ["Serve para levar minha equipe inteira?", "Sim. Empresas e instituições podem comprar ingressos em grupo — fale com nosso time comercial pelo botão “Comprar para minha equipe”."],
    ["E se eu não puder ir depois de comprar?", "Reembolso garantido até 24h antes do evento (veja detalhes na seção de garantia acima)."],
    ["Como funciona a entrada no dia do evento?", "Credenciamento a partir das 18h30, com entrega do presente e do combo de boas-vindas. O evento começa às 19h."],
    ["Preciso me inscrever no Prêmio para participar do evento?", "Não. São coisas independentes: você pode comprar seu ingresso sem se inscrever no Prêmio, e pode se inscrever no Prêmio gratuitamente mesmo sem comprar ingresso."],
    ["Quais formas de pagamento vocês aceitam?", "Cartão de crédito, Pix ou boleto, direto pelo checkout da página."],
    ["Tem suporte se eu tiver dúvidas?", "Sim, atendimento via WhatsApp para dúvidas sobre compra individual ou em grupo."],
  ];
  return (
    <S2 id="faq" tone="cream">
      <div className="faq-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,.8fr) minmax(0,1.2fr)", gap: "clamp(28px,5vw,64px)", alignItems: "start" }}>
        <div style={{ position: "sticky", top: 96 }}>
          <K2>Perguntas frequentes</K2>
          <h2 style={{ ...SF2, fontSize: "clamp(30px,4vw,46px)", color: "var(--text-strong)", margin: "16px 0 0" }}>
            Tudo o que você precisa saber
          </h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--text-body)", marginTop: 16 }}>
            Ainda com dúvida? Fale com a gente no WhatsApp — respondemos rapidinho.
          </p>
        </div>
        <div>
          {faqs.map(([q, a], i) => <FaqRow key={i} q={q} a={a} />)}
        </div>
      </div>
    </S2>
  );
}

function SEFinalCta({ onCta }) {
  return (
    <section style={{ background: "var(--gradient-brand)", color: "#fff", padding: "clamp(48px,7vw,88px) clamp(20px,5vw,56px) 0", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 0%,rgba(216,168,72,.16),transparent 55%)", pointerEvents: "none" }} />
      <div className="final-grid" style={{ maxWidth: 1120, margin: "0 auto", position: "relative", display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,.95fr)", gap: "clamp(24px,4vw,56px)", alignItems: "end" }}>
        <div style={{ paddingBottom: "clamp(64px,9vw,110px)" }}>
          <div style={{ display: "flex", justifyContent: "flex-start" }}><SD2 invert /></div>
          <h2 style={{ ...SF2, fontSize: "clamp(30px,4.4vw,56px)", whiteSpace: "nowrap", color: "#fff", margin: "24px 0 0" }}>
            Este ano, <span style={{ fontStyle: "italic", color: "var(--gold-400)" }}>é a sua vez.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--purple-200)", maxWidth: 520, margin: "20px 0 0" }}>
            Todo ano, alguém cuida de tudo para que os outros tenham sua noite especial. <strong style={{ color: "#fff" }}>28 de setembro · Teatro La Salle, Brasília</strong> — uma noite feita inteiramente para quem faz tudo acontecer.
          </p>
          <div style={{ display: "flex", justifyContent: "flex-start", marginTop: 34 }}>
            <CTA variant="gold" size="lg" onClick={onCta}>Garantir meu lugar agora</CTA>
          </div>
          <p style={{ fontSize: 13.5, color: "var(--purple-200)", marginTop: 16 }}>28/09 · Teatro La Salle · A partir de R$ 250</p>
          <div style={{ maxWidth: 520, margin: "44px 0 0", padding: "22px 26px", background: "rgba(22,3,31,.35)", border: "1px solid rgba(216,168,72,.24)", borderRadius: "var(--radius-lg)", textAlign: "left", display: "flex", gap: 14 }}>
            <span style={{ ...SF2, fontSize: 30, color: "var(--gold-400)", lineHeight: 1 }}>PS</span>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--purple-200)" }}>
              O 1º lote tem apenas <strong style={{ color: "#fff" }}>200 ingressos a R$ 250</strong> — depois disso, o valor sobe automaticamente para R$ 300. Se você já sabe que quer estar lá dia 28, quanto antes garantir, menos você paga.
            </p>
          </div>
        </div>
        <div className="final-img-wrap" style={{ position: "relative", alignSelf: "end", display: "flex", justifyContent: "center" }}>
          <img src="assets/img-secretaria-final.png" alt="Secretária apontando para a chamada" style={{ width: "auto", maxWidth: "100%", height: "clamp(420px,50vw,660px)", display: "block", objectFit: "contain", objectPosition: "bottom" }} />
        </div>
      </div>
    </section>
  );
}

function SEStickyBar({ onCta }) {
  const [show, setShow] = React.useState(false);
  const [w, setW] = React.useState(0);
  const sold = 74;
  React.useEffect(() => {
    const on = () => setShow(window.scrollY > 620);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  React.useEffect(() => {
    if (show) { const id = requestAnimationFrame(() => setW(sold)); return () => cancelAnimationFrame(id); }
    setW(0);
  }, [show]);
  return (
    <div style={{ position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 45, display: "flex", justifyContent: "center", padding: "0 clamp(12px,4vw,28px) clamp(12px,2.5vw,20px)", pointerEvents: "none", transform: show ? "translateY(0)" : "translateY(140%)", opacity: show ? 1 : 0, transition: "transform .4s var(--ease-out),opacity .3s var(--ease-standard)" }}>
      <div style={{ pointerEvents: "auto", width: "min(920px,100%)", background: "rgba(22,3,31,.92)", backdropFilter: "blur(12px)", border: "1px solid rgba(216,168,72,.35)", borderRadius: "var(--radius-xl)", boxShadow: "0 18px 48px rgba(0,0,0,.5)", padding: "clamp(12px,1.6vw,16px)", display: "flex", alignItems: "center", gap: "clamp(14px,2.5vw,28px)", flexWrap: "wrap" }}>
        <button onClick={onCta} className="cta-btn" style={{ flex: "1 1 260px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, border: "none", cursor: "pointer", background: "var(--gradient-gold)", color: "var(--purple-900)", borderRadius: "var(--radius-lg)", padding: "16px 20px", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: "clamp(14px,1.3vw,16px)", textTransform: "uppercase", letterSpacing: ".08em", boxShadow: "var(--shadow-gold)" }}>
          Comprar ingresso · Lote 01
          <span className="cta-ico" style={{ flexShrink: 0, width: 34, height: 34, borderRadius: "var(--radius-sm)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="ArrowUpRight" size={20} color="var(--purple-900)" stroke={2.4} /></span>
        </button>
        <div style={{ flex: "1 1 260px", minWidth: 220 }}>
          <div style={{ position: "relative", height: 9, borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,.16)" }}>
            <div style={{ position: "absolute", inset: 0, width: `${w}%`, borderRadius: "var(--radius-pill)", background: "var(--gradient-gold)", boxShadow: "0 0 14px rgba(216,168,72,.55)", transition: "width 1.1s var(--ease-out)" }} />
            <span style={{ position: "absolute", top: "50%", left: `${w}%`, transform: "translate(-50%,-50%)", fontSize: 17, lineHeight: 1, filter: "drop-shadow(0 1px 3px rgba(0,0,0,.5))", transition: "left 1.1s var(--ease-out)" }}>🔥</span>
          </div>
          <p style={{ margin: "9px 0 0", fontSize: 12, letterSpacing: ".03em", color: "var(--purple-100)", textTransform: "uppercase", fontWeight: 500 }}>
            <strong style={{ color: "var(--gold-300)", fontWeight: 700 }}>{sold}% do lote 01 vendido</strong> a R$ 250 · próximo lote <span style={{ textDecoration: "line-through", color: "var(--purple-300)" }}>R$ 300</span>
          </p>
        </div>
      </div>
    </div>
  );
}

function SEFooter() {
  return (
    <footer style={{ background: "var(--purple-950)", color: "var(--purple-200)", padding: "56px clamp(20px,5vw,56px) 40px", textAlign: "center" }}>
      <img src="assets/logo-white.png" alt="Secretária Extraordinária 2026" style={{ height: 52, opacity: .96 }} />
      <p style={{ fontSize: 14, marginTop: 20, color: "var(--purple-200)" }}>28 de setembro de 2026 · Teatro La Salle · 906 Sul, Brasília/DF</p>
      <p style={{ fontSize: 12.5, marginTop: 6, color: "var(--purple-400)", textTransform: "uppercase", letterSpacing: ".14em" }}>Realização · Instituto Eleva + Instituto NOSS</p>
      <div style={{ height: 1, background: "rgba(216,168,72,.16)", maxWidth: 520, margin: "30px auto" }} />
      <p style={{ fontSize: 12, color: "var(--purple-400)" }}>© 2026 Secretária Extraordinária. Todos os direitos reservados.</p>
    </footer>
  );
}

Object.assign(window, { SEAuthority, SEOffer, SEObjections, SEGuarantee, SEPremio, SEUrgency, SEFaq, SEFinalCta, SEFooter, SEStickyBar });
