/* global window, React */
// =============================================================
// PER CHI È / NON È · SPEAKER · BACKEND · FINAL CTA · FOOTER
// =============================================================

function CheckIc() {
  return (
    <svg className="ic" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8.5l3.5 3.5L13 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}
function XIc() {
  return (
    <svg className="ic" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    </svg>);

}

function WhoFor() {
  const { WHO_YES, WHO_NO } = window.WEBINAR_DATA;
  return (
    <section className="who">
      <div className="container">
        <div className="section-label">
          <span className="num">07 / QUALIFICAZIONE</span>
          <span className="line" />
        </div>
        <div className="who-head">
          <h2>Per chi è. <em>Per chi non è.</em></h2>
        </div>
        <div className="who-grid">
          <div className="who-card yes">
            <div className="h">
              <div className="badge"><CheckIc /></div>
              <div className="t">Sei nel posto giusto se...</div>
            </div>
            <ul>
              {WHO_YES.map((t, i) =>
              <li key={i}><CheckIc /><span>{t}</span></li>
              )}
            </ul>
          </div>
          <div className="who-card no">
            <div className="h">
              <div className="badge"><XIc /></div>
              <div className="t">Non è per te se...</div>
            </div>
            <ul>
              {WHO_NO.map((t, i) =>
              <li key={i}><XIc /><span>{t}</span></li>
              )}
            </ul>
          </div>
        </div>

        <window.SectionCTA />
      </div>
    </section>);

}

function Speaker() {
  return (
    <section className="speaker">
      <div className="container">
        <div className="section-label">
          <span className="num">08 / SPEAKER</span>
          <span className="line" />
        </div>
        <div className="speaker-card">
          <div className="speaker-portrait">
            <div className="portrait-bg" />
            <img className="portrait-img" src="assets/gianma.png" alt="Gianmarco Pompizii" />
            <div className="frame-corners" />
          </div>
          <div className="speaker-meta">
            <div className="tag"><span className="d" />Lo speaker</div>
            <h3>Mi chiamo Gianmarco Pompizii</h3>
            <div className="handle">Founder & Strategist, Prisma Group · @gianma.ai</div>
            <p>
              <strong style={{ color: "var(--fg-1)" }}>Non insegno l'AI. La implemento.</strong> Con Prisma
              Group, da oltre 4 anni costruisco Menti Operative dentro aziende reali: dal grande gruppo di
              formazione finanziaria (Alfio Bardolla Training Group) all'industria da 80 milioni di fatturato
              (FAG, che lavora per Mulino Bianco e L'Oréal), fino alla singola attività locale. Sistemi che
              girano ogni giorno, non demo.
            </p>
            <p>
              Partner formativo di <strong style={{ color: "var(--fg-1)" }}>Mik Cosentino</strong>, partner
              diretto <strong style={{ color: "var(--fg-1)" }}>Alibaba Cloud</strong>, formato al fianco di
              riferimenti internazionali come Liam Ottley e Nate Herk. Oltre 50.000 persone seguono il mio
              lavoro sull'AI tra Instagram, TikTok, YouTube e community: ogni giorno mostro cosa funziona
              davvero, non le mode della settimana.
            </p>
            <p style={{ color: "var(--fg-1)", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, marginTop: 12 }}>
              Ho visto decine di imprenditori e consulenti intrappolati nello stesso punto: attività che cresce, tempo che sparisce, tutto che passa da loro. Il modo per uscirne esiste, è replicabile, e il 17 settembre te lo mostro passo dopo passo.
            </p>
            <div className="credentials">
              <div className="c">
                <div className="v">100+</div>
                <div className="k">Aziende servite</div>
              </div>
              <div className="c">
                <div className="v">4 anni</div>
                <div className="k">Sistemi in produzione</div>
              </div>
              <div className="c">
                <div className="v">1.5–100M</div>
                <div className="k">€ Fatturato clienti</div>
              </div>
            </div>
          </div>
        </div>

        <window.SectionCTA />
      </div>
    </section>);

}

function Backend() {
  const { BACKEND } = window.WEBINAR_DATA;
  return (
    <section className="backend">
      <div className="container">
        <div className="section-label">
          <span className="num">07 / DOPO IL WEBINAR</span>
          <span className="line" />
        </div>
        <div className="backend-head">
          <h2>Cosa succede <em>dopo</em> il webinar.</h2>
          <p className="copy">
            A fine diretta apro l'accesso al percorso completo di affiancamento: il progetto costruito
            insieme a <strong style={{ color: "var(--fg-1)" }}>Mik Cosentino</strong>,
            una delle voci più riconosciute dell'info-marketing italiano. Lui porta il metodo strategico
            per trasformare un Dipartimento AI in clienti e fatturato. Io porto la parte tecnica e architetturale.
          </p>
        </div>

        <div className="backend-lead">
          <image-slot
            id="backend-lead"
            class="lead-img"
            shape="rounded"
            radius="20"
            placeholder="Immagine di riferimento, percorso / affiancamento (sostituibile)"
          ></image-slot>
          <div className="backend-grid">
            {BACKEND.map((b) =>
            <div className={`backend-cell ${b.cls}`} key={b.n}>
                <div className="bk-num">{b.n}</div>
                <div className="bk-tag">{b.em}</div>
                <h4>{b.title}</h4>
                <p>{b.desc}</p>
              </div>
            )}
          </div>
        </div>
        <div className="backend-foot">
          <svg className="ic" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M8 1l2.1 4.3 4.7.7-3.4 3.3.8 4.7L8 11.8l-4.2 2.2.8-4.7L1.2 6l4.7-.7L8 1z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
          </svg>
          <span>Non per tutti · Solo per chi è pronto a stare dalla parte giusta della linea · Posti limitati</span>
        </div>

        <window.SectionCTA />
      </div>
    </section>);

}

function Partners() {
  const { PARTNERS } = window.WEBINAR_DATA;
  return (
    <section className="partners">
      <div className="container">
        <div className="section-label">
          <span className="num">04 / CREDENZIALI</span>
          <span className="line" />
        </div>
        <div className="partners-head">
          <h2>Non lo dico <em>solo io</em>.</h2>
          <p className="copy">{PARTNERS.intro}</p>
        </div>
        <div className="partners-featured">
          {PARTNERS.featured.map((p, i) => (
            <div className="pf-card" key={i}>
              <div className="pf-photo"><img src={p.img} alt={p.t} /></div>
              <div className="pf-body">
                <div className="pf-kicker"><span className="dot" />{p.kicker}</div>
                <div className="pf-t">{p.t}</div>
                <div className="pf-d">{p.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="partners-creds">
          {PARTNERS.creds.map((p, i) => (
            <div className="pc-card" key={i}>
              <div className="t">{p.t}</div>
              <div className="d">{p.d}</div>
            </div>
          ))}
        </div>
        <window.SectionCTA />
      </div>
    </section>);

}

function FuturePacing() {
  const { FUTURE } = window.WEBINAR_DATA;
  return (
    <section className="future">
      <div className="container">
        <div className="section-label">
          <span className="num">TRA 90 GIORNI</span>
          <span className="line" />
        </div>
        <div className="who-head">
          <h2>Facciamo un salto <em>a dicembre</em>.</h2>
          <p className="copy" style={{ marginTop: 12 }}>{FUTURE.intro}</p>
        </div>
        <div className="who-grid">
          <div className="who-card no">
            <div className="h">
              <div className="badge"><XIc /></div>
              <div className="t">{FUTURE.no.t}</div>
            </div>
            <p className="future-p">{FUTURE.no.d}</p>
          </div>
          <div className="who-card yes">
            <div className="h">
              <div className="badge"><CheckIc /></div>
              <div className="t">{FUTURE.yes.t}</div>
            </div>
            <p className="future-p">{FUTURE.yes.d}</p>
          </div>
        </div>
        <p className="future-outro">{FUTURE.outro}</p>
        <window.SectionCTA />
      </div>
    </section>);

}

function FinalCta() {
  return (
    <section className="final">
      <div className="container">
        <div className="final-inner" style={{ textAlign: "center" }}>
          <div className="final-urgency">
            <span className="b m"><span className="d" />100 posti · nessuna eccezione</span>
            <span className="b c"><span className="d" />Replay non garantito</span>
            <span className="b"><span className="d" />Giovedì 17 settembre · 21:00</span>
          </div>

          <div className="final-title">
            <span className="red">Puoi continuare a essere il motore di tutto.</span>
            <span className="blu">O costruire la Mente Operativa che lavora con te.</span>
          </div>

          <p className="final-copy" style={{ textAlign: "center" }}>
            Giovedì 17 settembre alle 21:00 ti mostro come si costruisce la Mente Operativa che ha
            già reso autonomo il team di Alfio Bardolla Group e tolto il collo di bottiglia a un'industria
            come FAG, e che sta restituendo tempo, margine e libertà a imprenditori e consulenti come te.
            <br /><br />
            <strong style={{ color: "var(--fg-1)" }}>
              Gratuito. 90 minuti. Il primo passo per smettere di essere indispensabile a ogni
              singolo processo della tua attività.
            </strong>
          </p>

          <div className="final-cta-row">
            <button className="cta" type="button" onClick={window.openLeadPopup}>
              <span>Prenota il tuo posto per il 17 settembre</span>
              <window.Arrow />
            </button>
            <div className="form-micro" style={{ marginTop: 14, maxWidth: "100%", width: "320px" }}>
              <span className="lock">●</span> Gratuito · Niente spam · Solo il link per la diretta e contenuti utili prima dell'evento
            </div>
          </div>
          <div className="indecisi">
            <p>
              Se sei arrivato fin qui senza prenderti il posto, quell'esitazione dice qualcosa. Il prezzo no,
              è gratis. Il tempo nemmeno, 90 minuti si trovano. Quello che frena è più scomodo: prendere sul
              serio una cosa che potrebbe cambiarti il modo di lavorare vuol dire ammettere che com'è adesso
              non ti basta più. Ma potevi chiudere questa pagina al primo scroll, e invece sei ancora qui.
              <strong style={{ color: "var(--fg-1)" }}> Di solito quella parte di te ha ragione.</strong>
            </p>
            <button className="cta" type="button" onClick={window.openLeadPopup}>
              <span>Prenota il tuo posto</span>
              <window.Arrow />
            </button>
            <div className="firma">Gianmarco</div>
          </div>
        </div>
      </div>

      <footer className="foot">
        <div className="container">
          <div className="foot-row">
            <span>© 2026 · Live 17 settembre · ore 21:00 · Online · 90 min · Max 100 posti · Gianma.ai</span>
            <span>Nessun risultato economico garantito: i risultati dipendono dall'impegno di ciascuno.</span>
          </div>
        </div>
      </footer>
    </section>);

}

Object.assign(window, { WhoFor, Speaker, Backend, Partners, FuturePacing, FinalCta });