/* global React */

const { useState, useEffect } = React;

// =============================================================
// FAIL SUMMIT — Lidera Hub
// =============================================================

const SYMPLA_URL = "https://www.sympla.com.br/evento/fail-summit-1-erick-costa-convida-luiz-fernando-klava-o-assessor-dos-bilionarios/3346677";
const WHATSAPP_URL = "https://wa.me/5535999894844";
const EVENT_DATE = "2026-08-05T19:00:00-03:00";

/* -------------------- Icons -------------------- */
const FIcon = {
  arrow:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square">
      <path d="M5 12h14M13 5l7 7-7 7" style={{ stroke: "rgb(41, 17, 193)" }} />
    </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>,

  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>,

  whats:
  <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>

};

/* -------------------- Intro overlay (suspense / police lights) -------------------- */
function FailIntro() {
  const [stage, setStage] = useState(0);
  const [closing, setClosing] = useState(false);

  useEffect(() => {
    if (stage === -1) return;
    document.body.style.overflow = "hidden";
    const timers = [];
    timers.push(setTimeout(() => setStage(1), 3700));
    timers.push(setTimeout(() => setStage(2), 7500));
    timers.push(setTimeout(() => dismiss(), 10900));
    return () => { timers.forEach(clearTimeout); document.body.style.overflow = ""; };
    // eslint-disable-next-line
  }, []);

  function dismiss() {
    setClosing(true);
    try { sessionStorage.setItem("fs_intro_seen", "1"); } catch (e) {}
    setTimeout(() => { setStage(-1); document.body.style.overflow = ""; }, 800);
  }

  const hidden = stage === -1;
  const s = hidden ? 2 : stage;

  const copy = [
    { tag: "// Lidera Hub · Varredura de segurança", title: "Escaneando perímetro", sub: "> Rastreando movimentação suspeita na área..." },
    { tag: "// ALERTA — ██ ameaça detectada", title: "Infiltrado identificado", sub: "> Origem: Varginha · Help Pub · 05.08.26" },
    { tag: "// Acesso autorizado", title: "Acesso concedido", sub: "> Bem-vindo ao Fail Summit, infiltrado." }
  ][s];

  return (
    <div className={"intro-overlay" + (closing ? " closing" : "") + (hidden ? " done" : "")} data-stage={s} role="presentation" aria-hidden={hidden}>
      <div className="intro-police">
        <div className="lamp red"></div>
        <div className="lamp blue"></div>
      </div>
      <div className="intro-grid"></div>
      <div className="intro-scanline"></div>

      <div className="intro-content">
        <div className="intro-tag">{copy.tag}</div>
        <h2 className="intro-title" data-text={copy.title}>{copy.title}</h2>
        <div className="intro-sub">{copy.sub}</div>
        <div className="intro-progress"><i></i></div>
      </div>

      <button className="intro-skip" onClick={dismiss}>Pular ▸</button>
    </div>);

}

/* -------------------- Header -------------------- */
function FailHeader() {
  return (
    <header className="site-header" data-screen-label="Header">
      <div className="wrap row">
        <div className="brand">
          <img src="assets/fail-summit-logo.png" alt="Fail Summit" className="fs-logo" style={{ width: "139px", height: "50px" }} />
        </div>
        <nav>
          <a href="#sobre">Sobre</a>
          <a href="#klava">Quem vem</a>
          <a href="#honor">Código</a>
          <a href="#tickets">Ingressos</a>
          <a href="#venue">Help Pub</a>
          <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 12, color: "rgb(41, 17, 193)" }}>
            Quero ser infiltrado {FIcon.arrow}
          </a>
        </nav>
      </div>
    </header>);

}

/* -------------------- Hero -------------------- */
function FailHero() {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="bg-aurora"></div>
      <div className="bg-grid"></div>
      <div className="wrap grid">
        <div>
          <div className="tagline">
            <span className="dot"></span>
            Lidera Hub presents — Edição #01
          </div>
          <h1>
            <span className="word fail">Fail</span>{" "}
            <span className="word summit">Summit</span>
          </h1>
          <p className="strap">
            O lado <em>"B"</em> do sucesso que ninguém te conta.
          </p>
          <p className="lede">
            Sem filtros. Sem termos de LinkedIn. Sem promessas mágicas.
            Para cada case de sucesso no Instagram existem 100 erros catastróficos —
            é deles que a gente vai falar.
          </p>
          <div className="ctas">
            <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              Garantir vaga de infiltrado {FIcon.arrow}
            </a>
            <a href="#klava" className="btn btn-ghost">Quem vem contar</a>
          </div>

          <div className="meta-row">
            <div className="meta">
              <span className="k">Quando</span>
              <span className="v neon">05 · AGO · 26</span>
            </div>
            <div className="meta">
              <span className="k">Onde</span>
              <span className="v">Help Pub · Varginha</span>
            </div>
            <div className="meta">
              <span className="k">Vagas</span>
              <span className="v">Apenas 99</span>
            </div>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <div className="hero-poster">
            <img src="assets/fail-summit-capa.png" alt="Fail Summit — Luiz Fernando Klava e Erick Costa, 05 de agosto" />
            <div className="scan"></div>
            <div className="hero-corners">
              <span></span><span></span><span></span><span></span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- Marquee -------------------- */
function FailMarquee() {
  const row =
  <span>
      <span>O que acontece no Pub</span><em>fica no Pub</em>
      <span className="dot"></span>
      <span>O ego fica na calçada</span>
      <span className="dot"></span>
      <span>Pergunta incômoda</span><em>é a melhor pergunta</em>
      <span className="dot"></span>
      <span>Fail Summit · 05.08.26</span>
      <span className="dot"></span>
    </span>;

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

}

/* -------------------- About -------------------- */
function FailAbout() {
  return (
    <section className="about" id="sobre" data-screen-label="Sobre">
      <div className="wrap about-grid">
        <div>
          <span className="section-eyebrow">// Manifesto</span>
          <h2 className="section-title">
            Aprender com os próprios erros é <span className="cyn">inteligente</span>.
            Aprender com os erros dos <span className="mag">bilionários</span> é sabedoria.
          </h2>
          <p className="section-lede">
            Cansado de ouvir histórias editadas, onde tudo parece um mar de
            rosas? A verdade é nua e crua: para cada case que você vê no feed,
            existem 100 erros catastróficos, crises de imagem e decisões
            erradas que quase derrubaram impérios.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1, letterSpacing: "0.01em", color: "var(--ink)", textTransform: "uppercase", maxWidth: 460 }}>
            O Help Pub vira o quartel-general de quem quer falar a <span style={{ color: "var(--neon-cyan)", textShadow: "0 0 16px rgba(0,229,255,0.5)" }}>real</span>.
          </div>
          <div className="about-stats">
            <div className="stat"><div className="n">99</div><div className="label">vagas · só</div></div>
            <div className="stat"><div className="n">01</div><div className="label">noite no pub</div></div>
            <div className="stat"><div className="n">∞</div><div className="label">erros revelados</div></div>
            <div className="stat"><div className="n">0</div><div className="label">filtros de LinkedIn</div></div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- Speaker (Klava) -------------------- */
function FailSpeaker() {
  return (
    <section className="speaker" id="klava" data-screen-label="Klava">
      <div className="wrap speaker-grid">
        <div className="speaker-card">
          <img src="assets/fail-summit-capa.png" alt="Luiz Fernando Klava" />
          <div className="name-block">
            <div className="who">Luiz F. Klava</div>
            <div className="role">// Assessor dos bilionários</div>
          </div>
        </div>

        <div className="speaker-info">
          <div className="quote-chip">★ Pela primeira vez em Varginha</div>
          <h2>
            Ele não é palestrante <br />
            <span style={{ color: "var(--neon-cyan)", textShadow: "0 0 22px rgba(0,229,255,0.45)" }}>motivacional.</span>
          </h2>
          <p>
            Klava é <strong>o assessor de imprensa que os bilionários chamam
            quando o castelo começa a pegar fogo.</strong> Vive nos bastidores
            das maiores crises do país.
          </p>
          <p>
            No Fail Summit, ele abre a "caixa-preta" — entre Floripa e SP em sua
            rotina, vai estar em Varginha por uma única noite.
          </p>
          <div className="speaker-questions">
            <div className="q"><span className="arrow">→</span> O que acontece quando um bilionário erra a mão?</div>
            <div className="q"><span className="arrow">→</span> Como gerenciar o caos quando sua reputação está em jogo?</div>
            <div className="q"><span className="arrow">→</span> Quais falhas estratégicas os grandes cometem — e que você pode estar cometendo agora?</div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- Pillars (Why Infiltrado) -------------------- */
function FailPillars() {
  const pillars = [
  {
    n: "01",
    t: "Ambiente de bar, papo de gente grande",
    d: "O Help Pub é o cenário perfeito para conversas honestas que o escritório não permite. Mesa, copo na mão, conversa franca."
  },
  {
    n: "02",
    t: "Networking real, sem cartão de visita",
    d: "Conecte-se com empresários que, como você, sabem que empreender é uma batalha diária. Nada de small talk corporativo."
  },
  {
    n: "03",
    t: "Acesso a quem não vem todo dia",
    d: "Klava vive entre Floripa e SP e estará em Varginha só essa vez. Conteúdo que não sai em podcasts e nem em livros de negócios."
  }];

  return (
    <section className="pillars" data-screen-label="Por que infiltrado">
      <div className="bg-grid"></div>
      <div className="wrap">
        <span className="section-eyebrow">// Por que ser um infiltrado</span>
        <h2 className="section-title">
          Você não é aluno. <br />
          Você é <span className="mag">infiltrado</span>.
        </h2>
        <p className="section-lede">
          No Fail Summit você tem acesso a informações que não saem em podcasts
          nem em livros de negócios. Três motivos pra estar dentro:
        </p>
        <div className="pillars-grid">
          {pillars.map((p) =>
          <div className="pillar" key={p.n}>
              <div className="n">{p.n}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- Pull quote -------------------- */
function FailPullquote() {
  return (
    <section className="pullquote" data-screen-label="Pullquote">
      <div className="wrap">
        <blockquote>
          "Para cada case de sucesso no Instagram,<br />
          existem <span className="hl">100 erros catastróficos</span> que quase derrubaram impérios."
        </blockquote>
        <div className="attr">// O lado B do sucesso · Fail Summit 2026</div>
      </div>
    </section>);

}

/* -------------------- Code of Honor -------------------- */
function FailHonor() {
  const rules = [
  {
    stamp: "Regra 01",
    t: "O que acontece no Pub, fica no Pub.",
    d: "Confidência absoluta. As histórias contadas na noite não viram post, story ou texto de LinkedIn."
  },
  {
    stamp: "Regra 02",
    t: "O ego fica na calçada.",
    d: "Cargo, faturamento e seguidores não entram na conversa. Aqui dentro, somos todos só gente tentando acertar."
  },
  {
    stamp: "Regra 03",
    t: "Pergunta incômoda é a melhor.",
    d: "A pergunta que você tem medo de fazer é exatamente a que gera o insight que muda o jogo. Pergunte."
  }];

  return (
    <section className="honor" id="honor" data-screen-label="Honor">
      <div className="wrap">
        <span className="section-eyebrow">// Código de honra</span>
        <h2 className="section-title">
          As regras do <span className="cyn">jogo</span>.
        </h2>
        <p className="section-lede">
          Para manter a integridade do evento, todo infiltrado assina o
          Código de Honra. Três regras, sem exceção.
        </p>
        <div className="honor-rules">
          {rules.map((r, i) =>
          <div className="rule" key={i}>
              <div className="stamp">// {r.stamp}</div>
              <h3>{r.t}</h3>
              <p>{r.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- Tickets (preços fixos, sem lotes) -------------------- */
const TIERS = [
  {
    key: "arq", tier: "Acesso 01", name: "Arquibancada", price: ["90", "90"], vendas: "Vendas até 04.08.26",
    perks: ["Acesso à noite completa", "Vista privilegiada do palco", "Networking livre, antes e depois"],
    featured: false
  },
  {
    key: "mesa", tier: "Acesso 02", name: "Mesa", price: ["171", "00"], vendas: "Vendas até 04.08.26",
    perks: ["Mesa reservada pro seu grupo", "Ambiente íntimo, perto do palco", "Networking facilitado em mesa"],
    featured: true, ribbon: "Mais procurado"
  },
  {
    key: "cam", tier: "Acesso 03", name: "Camarote", price: ["222", "00"], vendas: "Vendas até 05.08.26",
    perks: ["Espaço camarote elevado", "Vista panorâmica do Pub", "Atendimento dedicado"],
    featured: false
  }
];

function FailTickets() {
  return (
    <section className="tickets" id="tickets" data-screen-label="Ingressos">
      <div className="wrap">
        <div className="heading-row">
          <div>
            <span className="section-eyebrow">// Ingressos</span>
            <h2 className="section-title">
              Garanta seu <span className="cyn">acesso</span>.
            </h2>
          </div>
          <div className="tickets-status">
            <span className="dot"></span>
            Vendas abertas · 99 vagas
          </div>
        </div>

        <div className="tickets-grid">
          {TIERS.map((t) =>
          <div className={"ticket" + (t.featured ? " featured" : "")} key={t.key}>
              {t.ribbon && <div className="ribbon">{t.ribbon}</div>}
              <div className="tier">// {t.tier}</div>
              <div className="name">{t.name}</div>
              <div className="price">
                <span className="currency">R$</span>
                <span className="amount">{t.price[0]}</span>
                <span className="cents">,{t.price[1]}</span>
              </div>
              <div className="installments">em até 12x no cartão</div>
              <ul className="perks">
                {t.perks.map((perk, i) => <li key={i}>{perk}</li>)}
              </ul>
              <div className="deadline">{t.vendas}</div>
              <div className="cta">
                <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className={t.featured ? "btn btn-magenta" : "btn btn-primary"}>
                  {FIcon.ticket} Quero esse {FIcon.arrow}
                </a>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- Venue -------------------- */
function FailVenue() {
  return (
    <section className="venue" id="venue" data-screen-label="Venue">
      <div className="wrap venue-grid">
        <div className="venue-info">
          <div className="label">// O quartel-general</div>
          <h2>Help Pub <br /><span style={{ color: "var(--neon-cyan)", textShadow: "0 0 22px rgba(0,229,255,0.45)" }}>Varginha</span></h2>
          <p>
            Casa noturna referência no Sul de Minas, o Help Pub é o cenário
            perfeito pra atmosfera de bar com papo de gente grande — paredes
            de tijolo, palco intimista e clima de bastidores.
          </p>
          <p>
            Por uma noite, ele vira o quartel-general dos infiltrados do
            Fail Summit.
          </p>

          <div className="venue-details">
            <div className="venue-detail">
              <div className="k">Data</div>
              <div className="v cyn">Quarta · 05 Ago 26</div>
            </div>
            <div className="venue-detail">
              <div className="k">Horário</div>
              <div className="v">19h — 23h</div>
            </div>
            <div className="venue-detail">
              <div className="k">Endereço</div>
              <div className="v">Varginha · MG</div>
            </div>
            <div className="venue-detail">
              <div className="k">Dress Code</div>
              <div className="v">Smart casual</div>
            </div>
          </div>
        </div>

        <div className="venue-card">
          <div className="bricks"></div>
          <img src="assets/help-pub-logo.png" alt="Help Pub Varginha" className="venue-logo" />
        </div>
      </div>
    </section>);

}

/* -------------------- Countdown helper -------------------- */
function useCountdown(target) {
  const [t, setT] = useState(getDelta(target));
  useEffect(() => {
    const id = setInterval(() => setT(getDelta(target)), 1000);
    return () => clearInterval(id);
  }, [target]);
  return t;
}
function getDelta(targetISO) {
  const diff = new Date(targetISO).getTime() - Date.now();
  if (diff <= 0) return { d: 0, h: 0, m: 0, s: 0, done: true };
  return {
    d: Math.floor(diff / 86400000),
    h: Math.floor(diff / 3600000 % 24),
    m: Math.floor(diff / 60000 % 60),
    s: Math.floor(diff / 1000 % 60),
    done: false
  };
}

/* -------------------- Final CTA -------------------- */
function FailFinalCTA() {
  const t = useCountdown(EVENT_DATE);
  return (
    <section className="final-cta" data-screen-label="CTA final">
      <div className="wrap">
        <span className="section-eyebrow" style={{ justifyContent: "center" }}>// Última chance</span>
        <h2>
          A porta do <span style={{ color: "var(--neon-magenta)", textShadow: "0 0 28px rgba(255,61,139,0.6)" }}>Pub</span> abre em
        </h2>
        <div className="countdown">
          <div className="unit"><div className="n">{String(t.d).padStart(2, "0")}</div><div className="l">dias</div></div>
          <div className="unit"><div className="n">{String(t.h).padStart(2, "0")}</div><div className="l">horas</div></div>
          <div className="unit"><div className="n">{String(t.m).padStart(2, "0")}</div><div className="l">min</div></div>
          <div className="unit"><div className="n">{String(t.s).padStart(2, "0")}</div><div className="l">seg</div></div>
        </div>
        <p>
          São apenas 99 vagas. Quando esgotar, esgotou — a próxima edição
          só no semestre que vem.
        </p>
        <div className="ctas">
          <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-magenta">
            {FIcon.ticket} Quero ser infiltrado {FIcon.arrow}
          </a>
          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
            {FIcon.whats} Falar no WhatsApp
          </a>
        </div>
      </div>
    </section>);

}

/* -------------------- Footer -------------------- */
function FailFooter() {
  return (
    <footer className="site-footer" data-screen-label="Footer">
      <div className="wrap">
        <div className="row">
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <img src="assets/logo-lideralab-dark.png" alt="Lidera Hub" className="logo" />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.22em", color: "var(--neon-cyan)", textTransform: "uppercase" }}>// um evento Lidera Hub</span>
          </div>
          <div className="links">
            <a href="https://www.instagram.com/lidera.lab/" target="_blank" rel="noopener noreferrer">Instagram</a>
            <a href="https://www.linkedin.com/company/lideralab/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">WhatsApp</a>
            <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer">Sympla</a>
          </div>
        </div>
        <div className="copy">
          <span>© Lidera Hub · 2026</span>
          <span>Fail Summit · 05.08.26 · Help Pub · Varginha — MG</span>
        </div>
      </div>
    </footer>);

}

/* -------------------- Sticky CTA -------------------- */
function FailStickyCTA() {
  return (
    <div className="sticky-cta">
      <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-magenta">
        {FIcon.ticket} Garantir vaga · 05.08
      </a>
    </div>);

}

/* -------------------- App -------------------- */
window.FailApp = function FailApp() {
  return (
    <>
      <FailIntro />
      <FailHeader />
      <main>
        <FailHero />
        <FailMarquee />
        <FailAbout />
        <FailSpeaker />
        <FailPillars />
        <FailPullquote />
        <FailHonor />
        <FailTickets />
        <FailVenue />
        <FailFinalCTA />
      </main>
      <FailFooter />
      <FailStickyCTA />
    </>);

};