// Sections 1: Header, Hero, Pain, Solution, Benefits
const { Icon, Section, Kicker, Serif, SEDS, CTAButton } = window;
const { Button, Badge, Card } = SEDS;

const LOGO_W = "assets/logo-white.png";
const LOGO_F = "assets/logo-full.png";
const SELO = "28 DE SETEMBRO DE 2026 · SEGUNDA-FEIRA · TEATRO LA SALLE, BRASÍLIA";

function SEHeader() {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const on = () => setSolid(window.scrollY > 48);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  if (!solid) return null;
  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 40, display: "flex", alignItems: "center", justifyContent: "center", padding: "12px clamp(20px,5vw,56px)", background: "rgba(22,3,31,.9)", backdropFilter: "blur(12px)", borderBottom: "1px solid rgba(216,168,72,.16)" }}>
      <img src={LOGO_W} alt="Secretária Extraordinária 2026" style={{ height: 56 }} />
    </header>
  );
}

function StarDivider({ invert }) {
  const c = invert ? "rgba(216,168,72,.5)" : "var(--gold-400)";
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, margin: "0 auto" }}>
      <span style={{ height: 1, width: 54, background: `linear-gradient(90deg,transparent,${c})` }} />
      <span style={{ color: "var(--gold-400)", fontSize: 15 }}>★</span>
      <span style={{ height: 1, width: 54, background: `linear-gradient(90deg,${c},transparent)` }} />
    </div>
  );
}

function SalesBar({ sold = 74, price, next }) {
  const [w, setW] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { requestAnimationFrame(() => setW(sold)); io.disconnect(); } }), { threshold: .4 });
    io.observe(el); return () => io.disconnect();
  }, [sold]);
  return (
    <div ref={ref} style={{ marginTop: 4 }}>
      <div style={{ position: "relative", height: 9, borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,.16)", overflow: "visible" }}>
        <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.2s 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,.4))", transition: "left 1.2s var(--ease-out)" }}>🔥</span>
      </div>
      <p style={{ margin: "10px 0 0", fontSize: 12.5, letterSpacing: ".02em", color: "var(--purple-100)", textTransform: "uppercase", fontWeight: 500 }}>
        <strong style={{ color: "var(--gold-300)", fontWeight: 700 }}>{sold}% do 1º lote vendido</strong> a {price} · próximo lote <span style={{ textDecoration: "line-through", color: "var(--purple-300)" }}>{next}</span>
      </p>
    </div>
  );
}

function SEHero({ onCta }) {
  return (
    <section id="sobre" style={{ position: "relative", zIndex: 2, background: "#6E2B86", color: "#fff", paddingBottom: "clamp(56px,7vw,88px)" }}>
      <div className="se-hero-stage" style={{ overflow: "hidden" }}>
        <img className="hero-bg hero-bg-desktop" src="assets/bg-header.jpg" alt="Atrações no palco do Teatro La Salle" style={{ display: "block", width: "100%", height: "auto" }} />
        <img className="hero-bg hero-bg-mobile" src="assets/bg-header-mobile.jpg" alt="Atrações no palco do Teatro La Salle" style={{ display: "none", width: "100%", height: "auto" }} />
        <div className="hero-logo" style={{ position: "absolute", left: "calc(48% + 20px)", top: "calc(31% + 10px)", transform: "translateX(-50%)", width: "min(430px,44vw)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 3 }}>
          <img src={LOGO_W} alt="Secretária Extraordinária 2026" style={{ width: "100%", maxWidth: 320, height: "auto" }} />
        </div>
      </div>
      <div className="hero-content" style={{ position: "relative", zIndex: 2, maxWidth: 1120, margin: "clamp(-620px,calc(90px - 34.5vw),-170px) auto 0", padding: "0 clamp(20px,5vw,56px)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: "clamp(24px,5vw,64px)", alignItems: "center" }}>
          <div>
            <h1 className="hero-h1" style={{ fontFamily: "'Poppins',var(--font-sans)", fontWeight: 400, whiteSpace: "nowrap", fontSize: "clamp(28px,3.6vw,48px)", margin: 0, color: "#fff", lineHeight: 1.1, letterSpacing: "-.01em" }}>
              <span style={{ fontWeight: 700, color: "var(--gold-400)" }}>Dia 28</span>, a noite <span style={{ fontWeight: 700, color: "var(--gold-400)" }}>é sua</span>
            </h1>
            <p style={{ fontSize: "clamp(14px,1.35vw,17px)", lineHeight: 1.55, color: "var(--purple-200)", maxWidth: 520, margin: "16px 0 0" }}>
              Quem cuida de tudo também merece ser cuidada — humor, música, conteúdo e reconhecimento público, em uma noite só sua.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "stretch" }}>
            <div className="hero-selo" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, padding: "14px 22px", borderRadius: "var(--radius-pill)", border: "1px solid rgba(216,168,72,.4)", background: "rgba(22,3,31,.45)", fontSize: "clamp(14px,1.5vw,18.5px)", fontWeight: 500, letterSpacing: ".01em", color: "var(--purple-100)", textAlign: "center", backdropFilter: "blur(4px)", whiteSpace: "nowrap" }}>
              <Icon name="Calendar" size={16} color="var(--gold-300)" /> 28 de setembro · Teatro La Salle
            </div>
            <CTAButton variant="gold" size="lg" fullWidth onClick={onCta}>Comprar ingresso · Lote 01</CTAButton>
            <SalesBar sold={74} price="R$ 250" next="R$ 300" />
          </div>
        </div>
        <div style={{ position: "relative", zIndex: 4, maxWidth: 940, margin: "clamp(28px,4vw,52px) auto clamp(-120px,-11vw,-190px)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "0 30px 70px rgba(0,0,0,.42)", border: "1px solid rgba(216,168,72,.28)", aspectRatio: "16/9" }}>
          <iframe src="https://www.youtube-nocookie.com/embed/krDWc30PAGg?rel=0&playsinline=1" title="Vídeo-convite Secretária Extraordinária (teste provisório)" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }} loading="lazy" referrerPolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
        </div>
      </div>
    </section>
  );
}

function SEPain() {
  const pains = [
    "Eu resolvo o problema de todo mundo, mas quem resolve o meu?",
    "Já perdi a conta de quantas vezes “apaguei incêndio” este mês.",
    "Meu chefe nem sabe o que eu faço além do óbvio.",
    "A última vez que fui reconhecida por algo foi… quando mesmo?",
    "Eu organizo festa de todo mundo, menos a minha.",
    "Sinto que sou essencial, mas invisível.",
  ];
  return (
    <Section id="dor" tone="cream" style={{ paddingTop: "clamp(150px,17vw,210px)" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <Kicker>Se você se reconhece aqui</Kicker>
        <h2 style={{ ...Serif, fontSize: "clamp(30px,4.4vw,46px)", color: "var(--text-strong)", margin: "16px 0 0" }}>
          Você já se pegou <span style={{ fontStyle: "italic", color: "var(--purple-600)" }}>pensando…</span>
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 16, marginTop: 48 }}>
        {pains.map((p, i) => (
          <div key={i} className="se-fade" style={{ display: "flex", gap: 14, alignItems: "flex-start", background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "22px 24px", boxShadow: "var(--shadow-xs)", transitionDelay: `${i * 60}ms` }}>
            <span style={{ ...Serif, fontSize: 40, color: "var(--purple-200)", lineHeight: .8, marginTop: 6 }}>“</span>
            <p style={{ margin: 0, fontSize: 16.5, lineHeight: 1.5, color: "var(--text-body)", fontStyle: "italic" }}>{p}</p>
          </div>
        ))}
      </div>
      <p style={{ textAlign: "center", fontSize: 18, color: "var(--text-strong)", fontWeight: 600, maxWidth: 640, margin: "44px auto 0" }}>
        Se alguma dessas frases te atravessou, essa noite foi pensada para você.
      </p>
    </Section>
  );
}

function SESolution() {
  return (
    <section id="solucao" style={{ position: "relative", overflow: "hidden", backgroundColor: "#F5EEE2", backgroundImage: "url('assets/bg-dor.jpg')", backgroundSize: "cover", backgroundPosition: "center", padding: "clamp(56px,8vw,104px) clamp(20px,5vw,56px) 0" }}>
      <div style={{ position: "relative", maxWidth: 1120, margin: "0 auto", display: "grid", gridTemplateColumns: "minmax(0,.85fr) minmax(0,1.15fr)", gap: "clamp(24px,4vw,56px)", alignItems: "end" }}>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-end", alignSelf: "stretch" }}>
          <img src="assets/img-secretaria.png" alt="Secretária segurando um bolinho e um cartão de Feliz Dia da Secretária" style={{ width: "100%", maxWidth: 440, height: "auto", display: "block", filter: "drop-shadow(0 24px 48px rgba(48,0,72,.22))" }} />
        </div>
        <div style={{ paddingBottom: "clamp(56px,8vw,104px)" }}>
          <StarDivider />
          <p style={{ marginTop: 22, fontFamily: "'Poppins',var(--font-sans)", fontWeight: 600, fontSize: "clamp(22px,2.9vw,34px)", color: "var(--purple-800)", lineHeight: 1.25, letterSpacing: "-.01em" }}>
            Todo ano chega o Dia da Secretária. E todo ano é a mesma coisa: um bolo na copa, um cartão, uma <span style={{ color: "var(--gold-600)", fontStyle: "italic", fontWeight: 800 }}>lembrancinha rápida</span> entre uma tarefa e outra.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--purple-700)", maxWidth: 620, margin: "22px 0 0" }}>
            Mas quem organiza a agenda de todo mundo raramente para para receber algo à altura do que faz. No dia 28 de setembro, o Teatro La Salle recebe a <strong style={{ color: "var(--purple-900)" }}>Secretária Extraordinária 2026</strong>: uma noite completa de comédia, música ao vivo, palestra-show e um momento de reconhecimento público que nenhuma comemoração de escritório oferece.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--purple-700)", maxWidth: 620, margin: "16px 0 0" }}>
            Não é “mais um evento para secretárias”. É uma experiência pensada para quem faz tudo acontecer — e nunca é a protagonista da própria história.
          </p>
        </div>
      </div>
    </section>
  );
}

function SEBenefits() {
  const items = [
    { icon: "Sparkles", tag: "Palestra-show", title: "“Poderosamente”, com Beto Barros", text: "Conteúdo sobre mentalidade e confiança que você leva pra vida, não só pro currículo.", slot: "bento-palestra", img: "assets/bento-beto.png", cls: "b-w2" },
    { icon: "Drama", tag: "Comédia", title: "Cia. de Comédia G7", text: "60 minutos para rir sem culpa, sem pensar em prazo, planilha ou WhatsApp do chefe.", slot: "bento-comedia", img: "assets/bento-g7.jpg", cls: "b-w2 b-h2" },
    { icon: "Music", tag: "Música ao vivo", title: "Music Jazz Experience", text: "Com Alex Freitas, direto do Rio. Uma noite de reconhecimento merece trilha à altura.", slot: "bento-musica", img: "assets/bento-jazz.png", cls: "" },
    { icon: "Gift", tag: "Boas-vindas", title: "Combo + presente exclusivo", text: "A primeira coisa que você recebe ao chegar é um cuidado, não uma tarefa.", slot: "bento-combo", cls: "" },
    { icon: "Award", tag: "Reconhecimento", title: "Prêmio Secretária Extraordinária", text: "Sua história pode ser celebrada no palco, diante de centenas de pessoas que entendem seu valor.", slot: "bento-premio", cls: "b-w2" },
    { icon: "Moon", tag: "Só você", title: "Uma noite sem interrupções", text: "Sem e-mail, sem ligação, sem “só mais uma coisinha”. Só você.", slot: "bento-noite", cls: "b-w2" },
  ];
  return (
    <section id="beneficios" style={{ position: "relative", overflow: "hidden", background: "var(--gradient-brand)", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,56px)" }}>
      <div style={{ position: "absolute", left: "-12%", top: "6%", width: 560, height: 560, borderRadius: "50%", background: "radial-gradient(circle,rgba(216,168,72,.14),transparent 62%)", pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: 1160, margin: "0 auto" }}>
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <Kicker tone="invert">O que essa noite entrega</Kicker>
          <h2 style={{ ...Serif, fontSize: "clamp(30px,4.4vw,48px)", color: "#fff", margin: "16px 0 0" }}>
            Teatro, humor, música, conteúdo <span style={{ fontStyle: "italic", color: "var(--gold-400)" }}>e você no centro</span>
          </h2>
        </div>
        <div className="se-bento" style={{ marginTop: 48 }}>
          {items.map((it, i) => (
            <div key={i} className={`se-fade b-card ${it.cls}`} style={{ transitionDelay: `${i * 70}ms`, position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
              <image-slot id={it.slot} className="b-media" shape="rect" fit="cover" {...(it.img ? { src: it.img } : {})} placeholder={`Imagem — ${it.tag}`} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}></image-slot>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(30,4,42,.32) 0%,rgba(30,4,42,.55) 48%,rgba(22,3,31,.9) 100%)", pointerEvents: "none" }} />
              <div style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: "clamp(20px,2.4vw,28px)", pointerEvents: "none" }}>
                <div className="b-ico" style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "auto" }}>
                  <Icon name={it.icon} size={22} color="var(--gold-300)" />
                </div>
                <div style={{ marginTop: 18, textTransform: "uppercase", letterSpacing: ".16em", fontSize: 11, fontWeight: 700, color: "var(--gold-300)" }}>{it.tag}</div>
                <h3 style={{ ...Serif, fontSize: "clamp(20px,2.1vw,25px)", color: "#fff", margin: "7px 0 0" }}>{it.title}</h3>
                <p style={{ margin: "9px 0 0", fontSize: 14.5, lineHeight: 1.55, color: "var(--purple-100)" }}>{it.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SEHeader, SEHero, SEPain, SESolution, SEBenefits, StarDivider, SalesBar });