/* global window, React */
// =============================================================
// HERO + Marquee section
// =============================================================
const { useState } = React;

function Arrow() {
  return (
    <svg className="arrow" width="16" height="14" viewBox="0 0 16 14" fill="none" aria-hidden="true">
      <path d="M1 7h13M9 1l5 6-5 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// ── Form LeadConnector (GoHighLevel) ──
const LEAD_FORM_SRC = "https://api.leadconnectorhq.com/widget/form/4jczaipKX7PRGcKPPh6m";

function LeadFormEmbed({ idSuffix = "inline" }) {
  const frameId = `inline-4jczaipKX7PRGcKPPh6m-${idSuffix}`;
  return (
    <iframe
      src={LEAD_FORM_SRC}
      style={{ width: "100%", height: "100%", border: "none", borderRadius: 8 }}
      id={frameId}
      data-layout="{'id':'INLINE'}"
      data-trigger-type="alwaysShow"
      data-trigger-value=""
      data-activation-type="alwaysActivated"
      data-activation-value=""
      data-deactivation-type="neverDeactivate"
      data-deactivation-value=""
      data-form-name="Form Mik - Gianma"
      data-height="550"
      data-layout-iframe-id={frameId}
      data-form-id="4jczaipKX7PRGcKPPh6m"
      title="Form Mik - Gianma"
    />
  );
}

// Popup col form: creato una volta, riusato da tutti i pulsanti.
function openLeadPopup() {
  let ov = document.getElementById("lead-popup-overlay");
  if (!ov) {
    ov = document.createElement("div");
    ov.id = "lead-popup-overlay";
    ov.innerHTML =
      '<div class="lead-popup" role="dialog" aria-modal="true" aria-label="Prenota il tuo posto">' +
      '  <button type="button" class="lead-popup-close" aria-label="Chiudi">×</button>' +
      '  <iframe src="' + LEAD_FORM_SRC + '"' +
      '    style="width:100%;height:100%;border:none;border-radius:8px"' +
      '    id="popup-4jczaipKX7PRGcKPPh6m"' +
      '    data-layout-iframe-id="popup-4jczaipKX7PRGcKPPh6m"' +
      '    data-form-id="4jczaipKX7PRGcKPPh6m"' +
      '    title="Form Mik - Gianma"></iframe>' +
      "</div>";
    document.body.appendChild(ov);
    const close = () => {
      ov.style.display = "none";
      document.body.style.overflow = "";
    };
    ov.addEventListener("click", (e) => { if (e.target === ov) close(); });
    ov.querySelector(".lead-popup-close").addEventListener("click", close);
    document.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); });
  }
  ov.style.display = "flex";
  document.body.style.overflow = "hidden";
}

// Retrocompatibilità: i vecchi bottoni che scrollavano al form ora aprono il popup.
function goToHeroForm() { openLeadPopup(); }

function SectionCTA({ label = "Prenota il tuo posto gratuito" }) {
  return (
    <div className="section-cta">
      <button type="button" className="scta-btn" onClick={openLeadPopup}>
        <span className="dot" />
        <span>{label}</span>
        <Arrow />
      </button>
    </div>);

}

function IconCal() {
  return (
    <svg className="ic" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.4" />
      <path d="M2 6h12M6 1.5v3M10 1.5v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>);

}
function IconClock() {
  return (
    <svg className="ic" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="6.3" stroke="currentColor" strokeWidth="1.4" />
      <path d="M8 4.5V8l2.4 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>);

}
function IconSeats() {
  return (
    <svg className="ic" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="5.5" cy="6" r="2.3" stroke="currentColor" strokeWidth="1.4" />
      <path d="M1.5 13c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
      <path d="M10.5 5.5a2 2 0 1 1 0 4M11 13a4 4 0 0 1 3.5-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>);

}

function Navbar() {
  return (
    <nav className="nav">
      <div className="container">
        <div className="nav-row">
          <a className="nav-brand" href="#">
            <span className="nb-text">
              <span></span>
            </span>
          </a>
          <div className="nav-meta">
            <span className="pill">
              <span className="blink" />
              <span className="pill-text">Live gratuita · Gio 17 settembre · 21:00</span>
            </span>
          </div>
        </div>
      </div>
    </nav>);

}

function OptinForm({ id = "hero" }) {
  return (
    <div className="form-card">
      <div className="form-head">
        <div className="title">
          Prenota il tuo posto gratuito.
        </div>
        <div className="sub">100 posti. Quando finiscono, la pagina chiude. Nessun replay garantito.</div>
      </div>
      <div className="lead-embed">
        <LeadFormEmbed idSuffix={id} />
      </div>
      <div className="form-foot">
        <div className="form-micro">
          <span className="lock">●</span> Gratuito. Niente spam. Solo il link per la diretta e contenuti utili prima dell'evento.
        </div>
        <div className="form-micro" style={{ marginTop: 8 }}>
          <span className="lock" style={{ color: "var(--cyan)" }}>●</span> Bonus immediato: appena ti iscrivi ricevi la guida «Le 4 fasi in cui si blocca chi prova a portare l'AI in azienda» (PDF, 5 minuti di lettura), così arrivi al 17 settembre già sapendo a che punto sei.
        </div>
        <div className="form-social">Insieme a oltre 50.000 persone che seguono ogni giorno il mio lavoro sull'AI.</div>
      </div>
    </div>);

}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg">
        <div className="grid" />
        <div className="glow-m" />
        <div className="glow-c" />
      </div>
      <div className="container hero-inner">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="warning-bar">
              <span className="sym">!</span>
              <span>Per imprenditori e consulenti che non riescono più a staccarsi dalla propria attività</span>
            </div>
            <h1>
              Il collaboratore perfetto esiste: lo <em>formi una volta sola</em>, non devi controllarlo, e non si licenzia mai.
              <span className="line2">Costruisci la Mente Operativa della tua azienda.</span>
            </h1>
            <p className="hero-intro">
              Giovedì 17 settembre alle 21:00 ti mostro come costruire la <strong>Mente Operativa</strong> della tua azienda: il sistema che assorbe il tuo modo di lavorare e ti restituisce le ore che oggi bruci a controllare, correggere e rispiegare tutto a tutti.
              <br /><br />
              Se sei un <strong>imprenditore</strong> che più l'azienda cresce, più lavora (perché tutto passa da te, ogni decisione, ogni controllo, ogni collaboratore da formare e riformare) oppure un <strong>consulente</strong> che sa di dover automatizzare ma non sa da dove iniziare, quello che leggi in questa pagina ti riguarda direttamente. E la live del 17 settembre potrebbe restituirti la cosa che ti manca di più: <strong>il tuo tempo</strong>.
            </p>
            <div className="event-info">
              <span className="item"><IconCal /> Giovedì 17 settembre · ore 21:00 · in diretta</span>
              <span className="item"><IconClock /> 90 minuti · Gratuito</span>
              <span className="item"><IconSeats /> Max 100 posti</span>
            </div>
          </div>
          <div className="hero-form-col">
            <div className="hero-video" aria-label="Video del webinar">
              <div className="hv-frame">
                <img className="hv-img" src="assets/hero-mente-operativa.png" alt="Mente Operativa, rete neurale" />
                <div className="hv-scrim" />
                <button type="button" className="hv-play" aria-label="Riproduci video">
                  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <path d="M8 5.5v13l11-6.5L8 5.5z" fill="currentColor" />
                  </svg>
                </button>
                <div className="hv-meta">
                  <span className="hv-tag"><span className="d" />Anteprima · 1:42</span>
                  <span className="hv-cap">La Mente Operativa risponde a una domanda vera</span>
                </div>
              </div>
            </div>
            <OptinForm id="hero" />
          </div>
        </div>
      </div>
    </section>);

}

function CredBar() {
  const { CRED } = window.WEBINAR_DATA;
  return (
    <section className="credbar">
      <div className="container">
        <div className="cb-row">
          {CRED.stats.map((s, i) => (
            <div className="cb-cell" key={i}>
              <div className="v">{s.v}</div>
              <div className="k">{s.k}</div>
            </div>
          ))}
        </div>
        <div className="cb-sub">{CRED.sub}</div>
      </div>
    </section>);

}

function MarqueeRow({ items, reverse = false, kind }) {
  // duplicate the items so the loop is seamless
  const doubled = [...items, ...items];
  return (
    <div className={`marquee-row ${kind}`}>
      <div className={`marquee-track ${reverse ? "reverse" : ""}`}>
        {doubled.map((src, i) =>
        <div className="marquee-item" key={`${src}-${i}`}>
            <img src={src} alt="" />
          </div>
        )}
      </div>
    </div>);

}

function SocialProof() {
  const { CLIENTS, SPONSORS } = window.WEBINAR_DATA;
  return (
    <section className="marquee-section">
      <div className="container">
        <div className="marquee-row-label clients">
          <span className="tag"><span className="d" />Aziende che usano Prisma AI</span>
          <span className="desc">Sistemi e dipartimenti AI operativi costruiti in 4 anni · da 1.5M a 100M di fatturato</span>
        </div>
      </div>
      <MarqueeRow items={CLIENTS} kind="clients" />

      <div className="container" style={{ marginTop: "56px" }}>
        <div className="marquee-row-label sponsors">
          <span className="tag"><span className="d" />Sponsor & partner</span>
          <span className="desc">Brand e media partner dell'ecosistema AI italiano</span>
        </div>
      </div>
      <MarqueeRow items={SPONSORS} kind="sponsors" reverse />

      <div className="container" style={{ marginTop: "var(--bl)" }}>
        <window.SectionCTA />
      </div>
    </section>);

}

Object.assign(window, { Navbar, Hero, SocialProof, CredBar, OptinForm, Arrow, SectionCTA, goToHeroForm, openLeadPopup });