/* global React, ReactDOM */

const { useState, useEffect, useRef } = React;

// =============================================================
// Lidera Lab 15 — GPTW landing page
// =============================================================

const SYMPLA_URL = "https://www.sympla.com.br/evento/lidera-lab-15-great-people-to-work-erick-costa-convida-caue-oliveira-gptw/3228017";
const WHATSAPP_URL = "https://wa.me/5535999894844";

/* -------------------- Tiny icon set (inline SVG) -------------------- */
const Icon = {
  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>,

  chevL:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 18l-6-6 6-6" />
    </svg>,

  chevR:
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18l6-6-6-6" />
    </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 SiteHeader() {
  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={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: "10px 20px", fontSize: 14, color: "rgb(255, 255, 255)" }}>
            Quero participar {Icon.arrow}
          </a>
        </nav>
      </div>
    </header>);

}

/* -------------------- HERO -------------------- */
function Hero() {
  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 15
          </div>
          <h1 className="gptw">GPTW</h1>
          <p className="subtitle">Construindo times excelentes para se trabalhar.</p>
          <p className="lede">
            Uma imersão dinâmica com Cauê Oliveira, repleta de experiências reais,
            aprendizado prático e o networking mais qualificado do Sul de Minas.
          </p>
          <div className="ctas">
            <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              Garantir minha vaga {Icon.arrow}
            </a>
            <a href="#sobre" className="btn btn-ghost">Conhecer o evento</a>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <div className="hero-poster">
            <span className="float-badge">Primeira vez no sul de MG</span>
            <img src="assets/postagem-evento.png" alt="Cauê Oliveira e Erick Costa — Lidera Lab 15: GPTW" />
          </div>
          <div className="date-stamp">
            <div className="day">20</div>
            <div className="right">
              <div className="month">agosto</div>
              <div className="time">18h30 – 23h</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- MARQUEE -------------------- */
function Marquee() {
  const items = [
  "Construindo times excelentes",
  "GPTW",
  "Lidera Lab 15",
  "20 de agosto",
  "Varginha · MG",
  "Cauê Oliveira"];

  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 About() {
  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 15º encontro mergulhamos
            no método que define os melhores ambientes de trabalho do mundo —
            e como aplicá-lo no seu time, do operacional ao C-level.
          </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">+5.400</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">4.5h</div><div className="label">de imersão prática</div></div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- SPEAKER SPOTLIGHT -------------------- */
function SpeakerSpot() {
  return (
    <section className="speaker-spot" id="palestrante" data-screen-label="Palestrante">
      <div className="wrap speaker-grid">
        <div className="speaker-card">
          <img src="assets/postagem-evento.png" alt="Cauê Oliveira — palestrante Lidera Lab 15" style={{ objectPosition: "center 30%" }} />
        </div>

        <div className="speaker-info">
          <div className="role-chip">★ Convidado especial</div>
          <h2>Cauê Oliveira no palco do Lidera.</h2>
          <p>
            Especialista em cultura organizacional, Cauê é autor do livro
            <i> Great Leader to Work</i> e tem ajudado empresas brasileiras a
            construir ambientes onde times de alta performance prosperam.
          </p>
          <p>
            Numa noite, ele vai compartilhar o método GPTW por dentro: o que
            separa um bom lugar para trabalhar de um excelente — e como você,
            líder, é a peça que move essa engrenagem.
          </p>
          <div className="speaker-credentials">
            <div className="cred">Referência nacional em ambientes de trabalho excepcionais</div>
            <div className="cred">Mentor de C-levels em empresas Top 100 GPTW</div>
            <div className="cred">Autor do best-seller <i>Great Leader to Work</i></div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- THEMES / O QUE VOCÊ LEVA -------------------- */
function Themes() {
  const themes = [
  { n: "01", t: "Cultura que entrega", d: "O que diferencia ambientes onde o time vibra dos lugares onde só se sobrevive — e como mover o ponteiro a partir de amanhã." },
  { n: "02", t: "Gente, antes de processo", d: "Selecionar, formar e reter pessoas certas. O alicerce de qualquer time excelente — sem ele, nenhum método funciona." },
  { n: "03", t: "Liderança que multiplica", d: "Como um líder gera líderes. Os hábitos diários que separam quem comanda de quem inspira movimento." },
  { n: "04", t: "Métricas que importam", d: "Indicadores reais de engajamento, confiança e desempenho. Sair do achismo e entrar no que pode ser medido e melhorado." }];

  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 liderança vai destravar nessa noite.</h2>
        <p className="section-lede">
          Conteúdo aplicável, pensado para o realista do gestor brasileiro.
          Sem teoria solta — só o que você usa na segunda-feira.
        </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>);

}

/* -------------------- TESTIMONIALS -------------------- */
const TESTIMONIALS = [
{
  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",
  image: "assets/ellen-guimaraes.jpg",
  initials: "EG"
},
{
  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",
  image: null,
  initials: "GJ"
},
{
  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",
  image: null,
  initials: "RC"
}];


function Testimonials() {
  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.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 = [
{
  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"
},
{
  name: "Leandro Figueiredo",
  role: "Diretor de Negócios · Atlético-MG",
  quote: "Fazer parte do Lidera Lab é contribuir com outros líderes a encontrar a melhor versão. O mercado exige isso de nós — é programa imprescindível para quem quer dar o próximo passo.",
  image: "assets/leandro-figueiredo.jpg",
  edition: "Lab 13"
}];


function PastLeaders() {
  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 14 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.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 Details() {
  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">20 de agosto — Varginha, Sul de Minas.</h2>
        <p className="section-lede" style={{ color: "rgba(244,233,208,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">{Icon.calendar}</div>
            <div className="label">Data</div>
            <div className="value">Quinta · 20 Ago 2026</div>
            <div className="sub">Primeira vez no Sul de MG</div>
          </div>
          <div className="detail-card">
            <div className="icon">{Icon.clock}</div>
            <div className="label">Horário</div>
            <div className="value">18h30 — 23h</div>
            <div className="sub">Credenciamento a partir das 18h</div>
          </div>
          <div className="detail-card">
            <div className="icon">{Icon.pin}</div>
            <div className="label">Local</div>
            <div className="value">Varginha · MG</div>
            <div className="sub">Local a ser confirmado por e-mail</div>
          </div>
        </div>

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

}

/* -------------------- CONTACT -------------------- */
function Contact() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ nome: "", email: "", empresa: "", msg: "" });

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm({ nome: "", email: "", empresa: "", msg: "" });
  };

  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">{Icon.phone}</div>
              <div>
                <div className="label">WhatsApp</div>
                <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="value">(35) 9 9989-4844</a>
              </div>
            </div>
            <div className="contact-item">
              <div className="icon-wrap">{Icon.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">{Icon.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">{Icon.insta}</a>
            <a href="https://www.linkedin.com/company/lideralab/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">{Icon.linkedin}</a>
            <a href="https://web.facebook.com/LideraLab" target="_blank" rel="noopener noreferrer" aria-label="Facebook">{Icon.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">Enviar mensagem {Icon.arrow}</button>
          {sent &&
          <div className="contact-success">
              ✓ Recebemos sua mensagem. A equipe Lidera retorna em breve.
            </div>
          }
        </form>
      </div>
    </section>);

}

/* -------------------- FOOTER -------------------- */
function Footer() {
  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} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>{Icon.phone} (35) 9 9989-4844</a>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>{Icon.pin} Varginha · MG</span>
            <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: "10px 20px", fontSize: 14 }}>
              {Icon.ticket} Quero participar
            </a>
          </div>
        </div>
        <div className="copy">
          <span>© Lidera 2026 — Todos os direitos reservados.</span>
          <span>Lidera Lab 15 · GPTW · 20 ago 2026</span>
        </div>
      </div>
    </footer>);

}

/* -------------------- STICKY MOBILE CTA -------------------- */
function StickyCTA() {
  return (
    <div className="sticky-cta">
      <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
        {Icon.ticket} Garantir vaga · 20 ago
      </a>
    </div>);

}

/* -------------------- APP -------------------- */
window.LideraApp = function LideraApp() {
  return (
    <>
      <SiteHeader />
      <main>
        <Hero />
        <Marquee />
        <About />
        <SpeakerSpot />
        <Themes />
        <Testimonials />
        <PastLeaders />
        <Details />
        <Contact />
      </main>
      <Footer />
      <StickyCTA />
    </>);

};