/* global React, ReactDOM */

// =============================================================
// Lidera Lab 16 — Protagonismo Profissional landing page
// Mesma estrutura do app.jsx (Lab 15); identidade via .theme-16
// em styles16.css. Assets com caminho absoluto para funcionar
// tanto na home (/) quanto na rota /lab-16.
// =============================================================

const SYMPLA_URL_16 = "https://www.sympla.com.br/evento/lidera-lab-16-protagonismo-e-proposito-erick-costa-convida-erika-cintra/3228094";

const WHATSAPP_URL_16 = "https://wa.me/5535999894844";
const TICKET_URL_16 = SYMPLA_URL_16;

/* Início do evento — alvo da contagem regressiva (confirmado no Sympla). */
const EVENT_START_16 = "2026-11-19T18:45:00-03:00";

/* Lotes do Sympla. Preencher com os dados reais — enquanto a lista estiver
   vazia, a seção de lotes não aparece na página. Formato de cada item:
   { nome: "1º lote", preco: "R$ 297", ate: "até 30/09 ou esgotar", esgotado: false } */
const LOTES_16 = [];

/* -------------------- Tiny icon set (inline SVG) -------------------- */
const Icon16 = {
  arrow:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7" style={{ stroke: "rgb(255, 255, 255)" }} />
    </svg>,

  calendar:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" />
    </svg>,

  pin:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" />
    </svg>,

  clock:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
    </svg>,

  phone:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z" />
    </svg>,

  insta:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /><path d="M17.5 6.5h.01" />
    </svg>,

  linkedin:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" />
    </svg>,

  facebook:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
    </svg>,

  ticket:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7a2 2 0 012-2h14a2 2 0 012 2v3a2 2 0 000 4v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3a2 2 0 000-4V7z" /><path d="M13 5v14" />
    </svg>,

  mail:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2" /><path d="M22 7L12 13 2 7" />
    </svg>
};

/* -------------------- HEADER -------------------- */
function SiteHeader16() {
  return (
    <header className="site-header" data-screen-label="Header">
      <div className="wrap row">
        <a href="#top" aria-label="Lidera Lab — voltar ao topo">
          <img src="/assets/logo-lideralab-dark.png" alt="Lidera Lab" className="logo" />
        </a>
        <nav>
          <a href="#sobre">Sobre o evento</a>
          <a href="#palestrante">Palestrante</a>
          <a href="#depoimentos">Depoimentos</a>
          <a href="#info">Quando &amp; Onde</a>
          <a href={TICKET_URL_16} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: "10px 20px", fontSize: 14, color: "rgb(255, 255, 255)" }}>
            Quero participar {Icon16.arrow}
          </a>
        </nav>
      </div>
    </header>);
}

/* -------------------- COUNTDOWN -------------------- */
function Countdown16() {
  const target = React.useMemo(() => new Date(EVENT_START_16).getTime(), []);
  const calc = () => Math.max(0, target - Date.now());
  const [left, setLeft] = React.useState(calc);

  React.useEffect(() => {
    const t = setInterval(() => setLeft(calc()), 1000);
    return () => clearInterval(t);
  }, []);

  if (left <= 0) return null; // evento começou: some da página

  const s = Math.floor(left / 1000);
  const parts = [
  { n: Math.floor(s / 86400), label: "dias" },
  { n: Math.floor(s / 3600) % 24, label: "horas" },
  { n: Math.floor(s / 60) % 60, label: "min" },
  { n: s % 60, label: "seg" }];

  return (
    <div className="countdown" role="timer" aria-label="Contagem regressiva para o Lidera Lab 16">
      {parts.map((p) =>
      <div className="cd-cell" key={p.label}>
          <span className="cd-n">{String(p.n).padStart(2, "0")}</span>
          <span className="cd-label">{p.label}</span>
        </div>
      )}
    </div>);
}

/* -------------------- HERO -------------------- */
function Hero16() {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="mesh mesh-grain"></div>
      <div className="wrap grid">
        <div>
          <div className="eyebrow">
            <span className="stars">✦ ✦ ✦</span> Lidera Lab 16
          </div>
          <h1 className="gptw">Protagonismo Profissional</h1>
          <p className="subtitle">e o impacto no mundo.</p>
          <p className="lede">
            Uma imersão com a psicóloga Érika Cintra, Coordenadora de
            Treinamento e Desenvolvimento na Embraer: um olhar de dentro pra
            fora para compreender as emoções, o trabalho e a vida — e o
            networking mais qualificado do Sul de Minas.
          </p>
          <div className="ctas">
            <a href={TICKET_URL_16} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              Garantir minha vaga {Icon16.arrow}
            </a>
            <a href="#sobre" className="btn btn-ghost">Conhecer o evento</a>
          </div>
          <Countdown16 />
        </div>

        <div style={{ position: "relative" }}>
          <div className="hero-poster">
            <span className="float-badge">Erick Costa convida</span>
            <img src="/assets/lab16-poster.webp" alt="Érika Cintra e Erick Costa — Lidera Lab 16: Protagonismo Profissional" />
          </div>
          <div className="date-stamp">
            <div className="day">19</div>
            <div className="right">
              <div className="month">novembro</div>
              <div className="time">18h45 – 23h</div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

/* -------------------- MARQUEE -------------------- */
function Marquee16() {
  const items = [
  "Protagonismo Profissional",
  "Lidera Lab 16",
  "19 de novembro",
  "Arena Lidera",
  "Varginha · MG",
  "Érika Cintra"];

  const row =
  <span>
      {items.map((t, i) =>
    <React.Fragment key={i}>
          <span>{t}</span>
          <span className="dot"></span>
        </React.Fragment>
    )}
    </span>;

  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>);
}

/* -------------------- ABOUT -------------------- */
function About16() {
  return (
    <section className="about" id="sobre" data-screen-label="Sobre">
      <div className="wrap about-grid">
        <div>
          <span className="section-eyebrow">Sobre o encontro</span>
          <h2 className="section-title">Líderes nunca param de aprender.</h2>
          <p className="section-lede">
            O Lidera Lab é um laboratório de liderança que conecta gestores
            do Sul de Minas a referências nacionais. No 16º encontro, o
            convite é desacelerar: um olhar de dentro pra fora para
            compreender as emoções, o trabalho e a vida — e assumir o
            protagonismo da própria trajetória, com o impacto que isso gera
            no time, na empresa e no mundo.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, lineHeight: 1.3, color: "var(--navy-900)", letterSpacing: "-0.02em", maxWidth: 460 }}>
            Aprenda com quem coloca a mão na massa e tem experiências reais para compartilhar.
          </div>
          <div className="about-stats">
            <div className="stat"><div className="n">15</div><div className="label">edições realizadas</div></div>
            <div className="stat"><div className="n">+6.000</div><div className="label">líderes formados</div></div>
            <div className="stat"><div className="n">+80</div><div className="label">empresas participantes</div></div>
            <div className="stat"><div className="n">5h</div><div className="label">de imersão prática</div></div>
          </div>
        </div>
      </div>
    </section>);
}

/* -------------------- SPEAKER SPOTLIGHT -------------------- */
function SpeakerSpot16() {
  return (
    <section className="speaker-spot" id="palestrante" data-screen-label="Palestrante">
      <div className="wrap speaker-grid">
        <div className="speaker-card">
          <img src="/assets/erika-cintra.jpg" alt="Érika Cintra — palestrante Lidera Lab 16" style={{ objectPosition: "center 25%" }} />
        </div>

        <div className="speaker-info">
          <div className="role-chip">★ Convidada especial</div>
          <h2>Érika Cintra no palco do Lidera.</h2>
          <p>
            Psicóloga e Coordenadora de Treinamento e Desenvolvimento na
            Embraer — empresa símbolo de inovação e tecnologia para o Brasil —,
            Érika vive na prática o desafio de desenvolver grandes líderes brasileiros.
          </p>
          <p>
            “O que você faz para viver é, de verdade, o que te faz sentir
            vivo?” Numa noite, ela convida você a silenciar o barulho de fora
            e ouvir a sua própria bússola interna — sem respostas prontas: com
            curiosidade, coragem e abertura.
          </p>
          <div className="speaker-credentials">
            <div className="cred">Psicóloga e especialista em Gestão de Pessoas</div>
            <div className="cred">Coordenadora de Treinamento e Desenvolvimento na Embraer</div>
            <div className="cred">Erick Costa convida — mesa redonda ao vivo no palco do Lidera</div>
          </div>
        </div>
      </div>
    </section>);
}

/* -------------------- THEMES / O QUE VOCÊ LEVA -------------------- */
function Themes16() {
  const themes = [
  { n: "01", t: "Pausa, direção e sentido", d: "Vivemos tudo em 2.0x. Antes de acelerar de novo, entender o que falta de verdade: tempo — ou pausa, direção e sentido no que você constrói." },
  { n: "02", t: "A bússola interna", d: "Silenciar o barulho de fora para ouvir a si mesmo. Ajustar a rota em um grau — ou perceber que é você quem precisa mudar de posição." },
  { n: "03", t: "Emoções, trabalho e vida", d: "Um olhar de dentro pra fora para compreender como as emoções moldam sua liderança, suas decisões e seus resultados." },
  { n: "04", t: "Protagonismo com propósito", d: "Cuidar de pessoas para crescer. Como transformar autoconhecimento em impacto real — no time, na empresa e no mundo." }];

  return (
    <section className="themes" data-screen-label="O que voce leva">
      <div className="wrap">
        <span className="section-eyebrow">O que você leva pra casa</span>
        <h2 className="section-title">Quatro frentes que sua carreira vai destravar nessa noite.</h2>
        <p className="section-lede">
          Não traga respostas prontas. Traga apenas você: com curiosidade,
          coragem e abertura — o restante a gente encontra juntos no caminho.
        </p>
        <div className="themes-grid">
          {themes.map((th) =>
          <div className="theme-card" key={th.n}>
              <div className="n">{th.n}</div>
              <h3>{th.t}</h3>
              <p>{th.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* -------------------- PROGRAMAÇÃO -------------------- */
function Agenda16() {
  const slots = [
  { h: "18h45", t: "Recepção dos líderes e credenciamento", who: "" },
  { h: "19h10", t: "Abertura Lidera Lab 16", who: "com Sofia Grandi e Erick Costa" },
  { h: "19h30", t: "Imersão: Protagonismo Profissional e o Impacto no Mundo", who: "com Érika Cintra" },
  { h: "20h50", t: "Mesa redonda: perguntas e respostas", who: "com Érika Cintra" },
  { h: "21h15", t: "Happy hour: networking e celebração", who: "" },
  { h: "23h00", t: "Encerramento", who: "" }];

  return (
    <section className="agenda" id="programacao" data-screen-label="Programacao">
      <div className="wrap">
        <span className="section-eyebrow">Programação</span>
        <h2 className="section-title">Como vai ser a noite.</h2>
        <p className="section-lede">
          Cinco horas de imersão num ambiente leve, propício para aprender,
          gerar negócios e se conectar — com certificado de participação.
        </p>
        <div className="agenda-list">
          {slots.map((s) =>
          <div className="agenda-item" key={s.h}>
              <div className="agenda-time">{s.h}</div>
              <div className="agenda-what">
                <span className="agenda-title">{s.t}</span>
                {s.who && <span className="agenda-who">{s.who}</span>}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* -------------------- TESTIMONIALS -------------------- */
const TESTIMONIALS_16 = [
{
  quote: "Quando soubemos sobre o Lidera Lab já mobilizamos nosso time de gestores para estar presente. Aprender com quem vive a inovação é fundamental para o nosso futuro.",
  name: "Ellen Guimarães",
  where: "Diretriz / Dediccar"
},
{
  quote: "O Lidera Lab é muito mais do que um treinamento: é um ambiente de novas oportunidades. O time de líderes do IPD estará sempre presente!",
  name: "Giuseppe Janini",
  where: "IPD / Express Machine"
},
{
  quote: "Estamos no mercado há 30 anos e sabemos da importância de estar em treinamentos como o Lidera Lab. Perto de gente com mentalidade jovem e que pensa no futuro.",
  name: "Rogério Cândido",
  where: "Pavican Engenharia / Pedreira Sto Antônio"
}];

function Testimonials16() {
  return (
    <section className="testimonials" id="depoimentos" data-screen-label="Depoimentos">
      <div className="wrap">
        <span className="section-eyebrow">Depoimentos</span>
        <h2 className="section-title">Líderes de grandes empresas do Sul de Minas já reconhecem o Lidera Lab.</h2>

        <div className="t-grid">
          {TESTIMONIALS_16.map((t, i) =>
          <figure className="t-card" key={i} style={{ "--i": i }}>
              <span className="t-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="t-mark" aria-hidden="true">“</span>
              <blockquote>{t.quote}</blockquote>
              <figcaption>
                <span className="t-name">{t.name}</span>
                <span className="t-where">{t.where}</span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);
}

/* -------------------- PAST LEADERS -------------------- */
const PAST_LEADERS_16 = [
{
  name: "Cauê Oliveira",
  role: "Autor · Great Leader to Work",
  quote: "No Lab 15, Cauê abriu o método GPTW por dentro: o que separa um bom lugar para trabalhar de um excelente — e o papel do líder nessa engrenagem.",
  image: "/assets/postagem-evento.png",
  edition: "Lab 15"
},
{
  name: "Samir Mamud",
  role: "Program Manager · Netflix",
  quote: "O Lidera Lab é uma iniciativa transformadora. Muito me orgulho em poder contribuir com líderes, compartilhando como funciona um pouco do nosso dia-a-dia aqui na Netflix.",
  image: "/assets/samir-mamud.jpg",
  edition: "Lab 11"
},
{
  name: "Gisele Paula",
  role: "Fundadora · Instituto Cliente Feliz",
  quote: "Os clientes estão cada dia mais exigentes e a liderança das companhias precisa estar um passo à frente. Levar nossa mensagem no Lidera Lab é poder impactar líderes que farão a diferença.",
  image: "/assets/gisele-paula.jpg",
  edition: "Lab 9"
}];

function PastLeaders16() {
  return (
    <section className="leaders" data-screen-label="Lideres anteriores">
      <div className="wrap">
        <span className="section-eyebrow">De líderes para líderes</span>
        <h2 className="section-title">Já passaram pelo palco do Lidera.</h2>
        <p className="section-lede">
          Em 15 edições, trouxemos referências de empresas que estão moldando
          o futuro — para conectar você ao que há de mais relevante em gestão.
        </p>
        <div className="leaders-grid">
          {PAST_LEADERS_16.map((l) =>
          <article className="leader-card" key={l.name}>
              <div className="leader-portrait">
                <img src={l.image} alt={l.name} />
                <div className="ribbon">{l.edition}</div>
              </div>
              <div className="leader-body">
                <h3>{l.name}</h3>
                <p className="role">{l.role}</p>
                <p className="quote">“{l.quote}”</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);
}

/* -------------------- DETAILS / WHERE & WHEN -------------------- */
function Details16() {
  return (
    <section className="details" id="info" data-screen-label="Quando e Onde">
      <div className="mesh mesh-grain"></div>
      <div className="wrap">
        <span className="section-eyebrow">Quando &amp; onde</span>
        <h2 className="section-title">19 de novembro — Arena Lidera, Varginha.</h2>
        <p className="section-lede" style={{ color: "rgba(240,231,251,0.78)" }}>
          Uma noite, uma sala cheia de gestores da região e a chance de
          construir as conexões mais relevantes do seu próximo semestre.
        </p>

        <div className="details-grid">
          <div className="detail-card">
            <div className="icon">{Icon16.calendar}</div>
            <div className="label">Data</div>
            <div className="value">Quinta · 19 Nov 2026</div>
            <div className="sub">16º encontro do Lidera Lab</div>
          </div>
          <div className="detail-card">
            <div className="icon">{Icon16.clock}</div>
            <div className="label">Horário</div>
            <div className="value">18h45 — 23h</div>
            <div className="sub">Recepção e credenciamento às 18h45</div>
          </div>
          <div className="detail-card">
            <div className="icon">{Icon16.pin}</div>
            <div className="label">Local</div>
            <div className="value">Arena Lidera</div>
            <div className="sub">Varginha · MG</div>
          </div>
        </div>

        {LOTES_16.length > 0 &&
        <div className="lotes">
            <h3 className="lotes-h">Lotes</h3>
            <div className="lotes-grid">
              {LOTES_16.map((l) =>
            <div className={"lote-card" + (l.esgotado ? " esgotado" : "")} key={l.nome}>
                  <div className="lote-nome">{l.nome}</div>
                  <div className="lote-preco">{l.esgotado ? "Esgotado" : l.preco}</div>
                  {!l.esgotado && l.ate && <div className="lote-ate">{l.ate}</div>}
                </div>
            )}
            </div>
            <p className="lotes-obs">Valores e disponibilidade conforme o Sympla — o lote vigente é aplicado automaticamente na compra.</p>
          </div>
        }

        <div className="cta-final">
          <h3>Garanta sua vaga. Os ingressos do Lidera esgotam.</h3>
          <a href={TICKET_URL_16} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
            {Icon16.ticket} Quero meu ingresso {Icon16.arrow}
          </a>
        </div>
      </div>
    </section>);
}

/* -------------------- CONTACT -------------------- */
function Contact16() {
  /* Envio real via FormSubmit.co (mesmo serviço do site fernandomazzeu),
     na variante AJAX para o visitante continuar na página.
     Destino: fd@lideralab.com.br — endereço já ativado no FormSubmit. */
  const [sending, setSending] = React.useState(false);
  const [status, setStatus] = React.useState(null); // "ok" | "erro" | null
  const [form, setForm] = React.useState({ nome: "", email: "", empresa: "", msg: "" });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setStatus(null);
    try {
      const r = await fetch("https://formsubmit.co/ajax/fd@lideralab.com.br", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          Nome: form.nome,
          "E-mail": form.email,
          Empresa: form.empresa,
          Mensagem: form.msg,
          _subject: "Novo contato pelo site Lidera Lab — Lab 16",
          _template: "table",
          _captcha: "false",
          _honey: ""
        })
      });
      if (!r.ok) throw new Error("http " + r.status);
      setStatus("ok");
      setForm({ nome: "", email: "", empresa: "", msg: "" });
    } catch (err) {
      setStatus("erro");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact" id="contato" data-screen-label="Contato">
      <div className="wrap contact-grid">
        <div>
          <span className="section-eyebrow">Contato</span>
          <h2 className="section-title">Quer trazer seu time?</h2>
          <p className="section-lede">
            Atendemos grupos de gestores com condições especiais. Fale com a
            gente — respondemos no mesmo dia útil.
          </p>

          <div className="contact-list">
            <div className="contact-item">
              <div className="icon-wrap">{Icon16.phone}</div>
              <div>
                <div className="label">WhatsApp</div>
                <a href={WHATSAPP_URL_16} target="_blank" rel="noopener noreferrer" className="value">(35) 9 9989-4844</a>
              </div>
            </div>
            <div className="contact-item">
              <div className="icon-wrap">{Icon16.pin}</div>
              <div>
                <div className="label">Localização</div>
                <div className="value">Varginha · MG</div>
              </div>
            </div>
            <div className="contact-item">
              <div className="icon-wrap">{Icon16.mail}</div>
              <div>
                <div className="label">E-mail</div>
                <a href="mailto:contato@lideralab.com.br" className="value">contato@lideralab.com.br</a>
              </div>
            </div>
          </div>

          <div className="socials">
            <a href="https://www.instagram.com/lidera.lab/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">{Icon16.insta}</a>
            <a href="https://www.linkedin.com/company/lideralab/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">{Icon16.linkedin}</a>
            <a href="https://web.facebook.com/LideraLab" target="_blank" rel="noopener noreferrer" aria-label="Facebook">{Icon16.facebook}</a>
          </div>
        </div>

        <form className="contact-form" onSubmit={onSubmit}>
          <div className="field">
            <label htmlFor="nome">Seu nome</label>
            <input id="nome" required value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} placeholder="Como te chamamos" />
          </div>
          <div className="field">
            <label htmlFor="email">E-mail</label>
            <input id="email" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="voce@empresa.com.br" />
          </div>
          <div className="field">
            <label htmlFor="empresa">Empresa</label>
            <input id="empresa" value={form.empresa} onChange={(e) => setForm({ ...form, empresa: e.target.value })} placeholder="Onde você lidera" />
          </div>
          <div className="field">
            <label htmlFor="msg">Mensagem</label>
            <textarea id="msg" value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })} placeholder="Quantas vagas você precisa? Alguma dúvida?" />
          </div>
          <button type="submit" className="btn btn-primary" disabled={sending}>
            {sending ? "Enviando..." : <>Enviar mensagem {Icon16.arrow}</>}
          </button>
          {status === "ok" &&
          <div className="contact-success">
              ✓ Recebemos sua mensagem. A equipe Lidera retorna em breve.
            </div>
          }
          {status === "erro" &&
          <div className="contact-success" style={{ background: "rgba(200,40,60,0.08)", color: "#a01f30" }}>
              Não conseguimos enviar agora. Tente de novo ou chame a gente no{" "}
              <a href={WHATSAPP_URL_16} target="_blank" rel="noopener noreferrer" style={{ fontWeight: 700, textDecoration: "underline" }}>WhatsApp</a>.
            </div>
          }
        </form>
      </div>
    </section>);
}

/* -------------------- FOOTER -------------------- */
function Footer16() {
  return (
    <footer className="site-footer" data-screen-label="Footer">
      <div className="mesh mesh-grain" style={{ opacity: 0.35, zIndex: 0 }}></div>
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div className="row">
          <img src="/assets/logo-lideralab.png" alt="Lidera Lab" className="logo" />
          <div style={{ display: "flex", gap: 24, flexWrap: "wrap", alignItems: "center", fontSize: 14 }}>
            <a href={WHATSAPP_URL_16} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>{Icon16.phone} (35) 9 9989-4844</a>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>{Icon16.pin} Varginha · MG</span>
            <a href={TICKET_URL_16} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: "10px 20px", fontSize: 14 }}>
              {Icon16.ticket} Quero participar
            </a>
          </div>
        </div>
        <div className="copy">
          <span>© Lidera 2026 — Todos os direitos reservados.</span>
          <span>Lidera Lab 16 · Protagonismo Profissional · 19 nov 2026</span>
        </div>
      </div>
    </footer>);
}

/* -------------------- STICKY MOBILE CTA -------------------- */
function StickyCTA16() {
  return (
    <div className="sticky-cta">
      <a href={TICKET_URL_16} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
        {Icon16.ticket} Garantir vaga · 19 nov
      </a>
    </div>);
}

/* -------------------- APP -------------------- */
window.LideraApp16 = function LideraApp16() {
  return (
    <>
      <SiteHeader16 />
      <main>
        <Hero16 />
        <Marquee16 />
        <About16 />
        <SpeakerSpot16 />
        <Themes16 />
        <Agenda16 />
        <Testimonials16 />
        <PastLeaders16 />
        <Details16 />
        <Contact16 />
      </main>
      <Footer16 />
      <StickyCTA16 />
    </>);
};