/* global window, React */
// =============================================================
// STORY (Marco vs Luca) + LA LINEA + QUOTE + METAFORA
// =============================================================

function Story() {
  return (
    <section className="story">
      <div className="container">
        <div className="section-label">
          <span className="num">01 / LA TUA GIORNATA</span>
          <span className="line" />
          <span className="num" style={{ color: "var(--fg-2)" }}>Riconosci questa giornata?</span>
        </div>
        <h2>Riconosci questa giornata?</h2>
        <p className="story-lead">
          Sono le 21:30 e sei ancora al computer. Non perché sta andando male, anzi. L'attività
          cresce, i clienti aumentano, il fatturato pure. Eppure il paradosso è sotto gli occhi:
          <strong style={{ color: "var(--fg-1)" }}> più le cose vanno bene, meno vita hai</strong>.
        </p>

        <div className="story-split">
          <div className="story-col bad">
            <div className="wrong-wash" />
            <div className="story-status" title="Esempio sbagliato">
              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            </div>
            <div className="role"><span className="dot" />Dove finisce il tuo tempo</div>
            <h3 className="name">Oggi</h3>
            <div className="tagline">Tutto passa da te.</div>
            <p>
              Controlli il lavoro degli altri, perché se non controlli tu, gli errori passano.
              Rispieghi le stesse cose al nuovo collaboratore, al fornitore, al cliente.
              Formi persone che poi se ne vanno, e ricominci da capo.
            </p>
            <p>
              Rispondi a domande che hai già risposto cento volte. E quel task lo fai tu,
              «perché faccio prima a farlo io che a spiegarlo».
            </p>
            <div className="metrics">
              <div className="metric"><div className="v">21:30</div><div className="k">Ancora al pc</div></div>
              <div className="metric"><div className="v">100%</div><div className="k">Passa da te</div></div>
              <div className="metric"><div className="v">0</div><div className="k">Ferie vere</div></div>
            </div>
          </div>

          <div className="story-divider" />

          <div className="story-col good">
            <div className="story-status" title="Esempio giusto">
              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M3 8.5l3.5 3.5L13 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div className="role"><span className="dot" />Con una Mente Operativa</div>
            <h3 className="name">Domani</h3>
            <div className="tagline">Il collaboratore perfetto esiste.</div>
            <p>
              Una <em style={{ fontStyle: "normal", color: "var(--cyan)" }}>Mente Operativa</em> assorbe
              il tuo modo di lavorare, i tuoi processi, i tuoi standard, la tua conoscenza,
              e lavora come il tuo miglior collaboratore.
            </p>
            <p>
              Con tre differenze fondamentali: la formi una volta sola, non devi controllarla
              ogni volta, e non si licenzia.
            </p>
            <div className="metrics">
              <div className="metric"><div className="v">1×</div><div className="k">La formi</div></div>
              <div className="metric"><div className="v">0</div><div className="k">Controlli</div></div>
              <div className="metric"><div className="v">24/7</div><div className="k">Operativo</div></div>
            </div>
          </div>
        </div>

        <div className="story-bottom">
          <div className="punch">
            Non hai costruito un'azienda: <em>hai costruito un lavoro che ti possiede.</em>
            <div style={{ marginTop: 8, fontSize: 14, color: "var(--fg-3)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
              E questa spirale non si ferma da sola: ogni cliente, collaboratore o progetto in più aggiunge peso sulla stessa persona, tu.
            </div>
          </div>
        </div>

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

function LaLinea() {
  return (
    <section className="line-section">
      <div className="line-stage">
        <div className="container">
          <div className="section-label" style={{ justifyContent: "center" }}>
            <span className="line" />
            <span className="num" style={{ color: "var(--magenta)" }}>02 / IL PUNTO</span>
            <span className="line" />
          </div>
          <div className="line-title">
            <span className="l1">Il punto,</span>
            <span className="l2">in una frase.</span>
          </div>

          <div className="line-bisect">
            <div className="side left">↑ Una mente centrale</div>
            <div className="bar" />
            <div className="side right">Tool sparsi ↓</div>
          </div>

          <p className="line-body">
            Non ti manca la voglia di automatizzare. Non ti manca nemmeno l'AI giusta.
            <strong> Ti manca una mente a cui appoggiare tutto il resto</strong>, e finché non la
            costruisci, ogni tool che aggiungi diventa un altro pezzo che solo tu sai tenere insieme.
            <br /><br />
            La soluzione classica la conosci: assumere, delegare, formare. E sai anche quanto costa, in tempo,
            in soldi, in errori, in persone che dopo un anno di formazione se ne vanno portandosi via tutto.
            <strong> Ma esiste una strada diversa. E te la mostro con casi reali.</strong>
          </p>

          {/* Animazione Caos → Ordine (Mente Operativa) */}
          <caos-ordine class="line-anim" aria-label="Animazione: dal caos dei tool alla Mente Operativa"></caos-ordine>

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

function Quote() {
  return (
    <section className="quote">
      <div className="container">
        <div className="desiderio-box">
          Questo è ciò che una <strong>Mente Operativa</strong> fa concretamente: assorbe il tuo modo di
          lavorare, i tuoi processi, i tuoi standard, la tua conoscenza, e lavora come il tuo miglior
          collaboratore. Con tre differenze fondamentali: <strong>la formi una volta sola, non devi
          controllarla ogni volta, e non si licenzia</strong>.
        </div>
        <div className="quote-card has-img">
          <div className="quote-body">
            <span className="mark" aria-hidden="true">"</span>
            <blockquote>
              Il vero costo <em>non è l'AI che non usi</em>. È il tempo che continui a perdere ogni
              singolo giorno facendo cose che un sistema potrebbe fare al posto tuo.
            </blockquote>
            <div className="attr">
              <span className="line" />
              <span>Gianmarco Pompizii · Fondatore Prisma AI</span>
            </div>
          </div>
          <image-slot
            id="quote-portrait"
            class="quote-img"
            shape="rounded"
            radius="16"
            placeholder="Immagine di riferimento (sostituibile)"
          ></image-slot>
        </div>

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

function Metaphor() {
  return (
    <section className="meta-section">
      <div className="container">
        <div className="meta-head">
          <h2>
            La <em>verità</em><br />
            sull'AI.
          </h2>
          <p className="copy">
            Probabilmente l'AI l'hai già provata. ChatGPT, qualche automazione, magari un tool
            consigliato da un collega. E probabilmente hai pensato: «carino, ma per la mia attività
            non funziona». Risposte generiche. Output da rifare. Nessuna comprensione reale di
            <strong> come lavori tu</strong>.
          </p>
        </div>

        <div className="meta-arch">
          <div className="arch-layout">
            <div className="arch-stage">
              <svg className="arch-svg" viewBox="0 0 400 360" preserveAspectRatio="none">
                <path d="M40 60 Q 130 60, 200 180" />
                <path d="M360 80 Q 250 80, 200 180" />
                <path d="M30 180 Q 110 180, 200 180" />
                <path d="M370 180 Q 280 180, 200 180" />
                <path d="M50 300 Q 130 300, 200 180" />
                <path d="M350 310 Q 250 310, 200 180" />
                <path className="anim" d="M40 60 Q 130 60, 200 180" />
                <path className="anim" d="M360 80 Q 250 80, 200 180" />
                <path className="anim" d="M30 180 Q 110 180, 200 180" />
                <path className="anim" d="M370 180 Q 280 180, 200 180" />
                <path className="anim" d="M50 300 Q 130 300, 200 180" />
                <path className="anim" d="M350 310 Q 250 310, 200 180" />
              </svg>
              <div className="arch-node m tl">I tuoi standard · qualità</div>
              <div className="arch-node tr">Memoria · know-how</div>
              <div className="arch-node l">Processi</div>
              <div className="arch-node m r">Documenti</div>
              <div className="arch-node bl">Risposte & formazione</div>
              <div className="arch-node m br">Manager AI</div>
              <div className="arch-hub">
                <div className="label">
                  Mente Operativa
                  <div className="sub">il tuo sistema</div>
                </div>
              </div>
            </div>

            <div className="arch-bullets">
              <div className="b">
                <div className="ic">PRC</div>
                <div>
                  <div className="t">Processi</div>
                  <div className="d">Le procedure che oggi vivono solo nella tua testa, trasferite nel sistema.</div>
                </div>
              </div>
              <div className="b">
                <div className="ic">KNW</div>
                <div>
                  <div className="t">Know-how</div>
                  <div className="d">Il tuo modo di lavorare, i tuoi standard, la tua conoscenza. Assorbiti una volta sola.</div>
                </div>
              </div>
              <div className="b">
                <div className="ic">DOC</div>
                <div>
                  <div className="t">Documenti</div>
                  <div className="d">Preventivi, email ricorrenti, documenti standard: la prima bozza è già pronta.</div>
                </div>
              </div>
              <div className="b">
                <div className="ic">MGR</div>
                <div>
                  <div className="t">Manager AI</div>
                  <div className="d">Risponde, forma, controlla, senza che tutto debba passare da te.</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="meta-after">
          <p>
            Ecco la verità: non è colpa tua, e non è colpa del tool. È che uno strumento AI senza un
            sistema costruito sotto è come <strong>un collaboratore brillante che ogni mattina si
            sveglia senza memoria</strong>. Ogni giorno devi rispiegare tutto. Per questo i risultati
            sono mediocri, e per questo hai smesso di crederci.
          </p>
          <p>
            Il 17 settembre ti mostro cosa cambia quando quel «sotto» lo costruisci:
            <strong> lo stesso tipo di sistema realizzato per Alfio Bardolla Group, FAG</strong> e le
            altre aziende che hai appena visto, applicato alla scala della tua attività.
            È il <strong>Metodo Mente-Prima</strong>: prima la mente, poi le automazioni. Tutti partono
            dalle automazioni (è la parte che si vede). Io parto dalle fondamenta, ed è per questo che dura.
          </p>
        </div>

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

Object.assign(window, { Story, LaLinea, Quote, Metaphor });