const { useEffect, useState } = React;

function App() {
  const [theme, setTheme] = useState(() => localStorage.getItem('iris-theme') || 'light');

  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
    localStorage.setItem('iris-theme', theme);
  }, [theme]);

  useEffect(() => {
    const reveals = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          const children = entry.target.querySelectorAll(
            '.pilastro,.risk-item,.gov-feat,.cost-item,.settore-card,.step,.num-item'
          );
          children.forEach((c, i) => {
            c.style.transitionDelay = `${i * 0.08}s`;
          });
        }
      });
    }, { threshold: 0.08 });

    reveals.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <nav>
        <a href="#" className="nav-logo" aria-label="IRIS Core">
          <img
            className="nav-logo-img"
            src={theme === 'dark' ? '/assets/logo-white.png' : '/assets/logo-black.png'}
            alt="IRIS Core"
          />
        </a>
        <div className="nav-right">
          <button
            type="button"
            className="theme-toggle"
            aria-label="Cambia tema"
            onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
          >
            {theme === 'dark' ? (
              <svg className="theme-icon" viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="12" r="4"></circle>
                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
              </svg>
            ) : (
              <svg className="theme-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M21 12.79A9 9 0 1 1 11.21 3c0 .26-.01.52-.01.79A7 7 0 0 0 20.21 12c.27 0 .53-.01.79-.01z"></path>
              </svg>
            )}
          </button>
          <a href="#pilot" className="nav-cta">Richiedi Pilot</a>
        </div>
      </nav>

      <section id="hero">
        <div className="hero-grid"></div>
        <div className="orb orb-1"></div>
        <div className="orb orb-2"></div>
        <span className="hero-eyebrow">AI Governance Infrastructure — Italia</span>
        <h1 className="hero-headline">
          Tre domande che ogni<br /><em>board italiano</em><br />deve saper rispondere <strong>oggi</strong>.
        </h1>
        <div className="hero-three">
          <div className="hq"><span className="hq-num">01 —</span>Chi risponde quando un agente AI prende <em>una decisione sbagliata?</em></div>
          <div className="hq"><span className="hq-num">02 —</span>Avete <em>un unico strumento</em> per governare tutti i vostri processi AI?</div>
          <div className="hq"><span className="hq-num">03 —</span>Sapete quanto vi costano oggi i processi che <em>l'AI potrebbe ottimizzare?</em></div>
        </div>
        <p className="hero-sub">
          IRIS Core è l'infrastruttura che risponde a tutte e tre. Governance certificata, controllo unificato e ottimizzazione documentata dei costi operativi — in un unico layer che si integra sopra i sistemi che già avete.
        </p>
        <div className="hero-actions">
          <a href="#pilot" className="btn-primary">Verifica l'idoneità al Pilot</a>
          <a href="#pilastri" className="btn-ghost">Scopri i tre pilastri</a>
        </div>
        <div className="hero-scroll">
          <div className="scroll-line"></div>
          <span className="scroll-label">Scorri</span>
        </div>
      </section>

      <section id="pilastri">
        <div className="inner">
          <div className="pilastri-intro reveal">
            <div>
              <span className="s-label">I tre pilastri</span>
              <h2 className="s-title">Un sistema.<br /><em>Tre vantaggi</em><br />misurabili.</h2>
            </div>
            <p className="s-body">
              La maggior parte delle soluzioni AI affronta uno di questi problemi. IRIS Core <strong>li risolve tutti e tre simultaneamente</strong> — perché nella realtà aziendale sono lo stesso problema visto da tre angolazioni diverse.
            </p>
          </div>

          <div className="pilastri-grid reveal">
            <div className="pilastro p1">
              <div className="pilastro-index"><div className="p-dot"></div>01 — Responsabilità</div>
              <svg className="pilastro-icon" viewBox="0 0 42 42" fill="none">
                <circle cx="21" cy="21" r="17" stroke="#e07777" strokeWidth="1.5" />
                <path d="M21 13v10M21 27v2" stroke="#e07777" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <div className="pilastro-name">Chi risponde?</div>
              <div className="pilastro-claim">Protezione del board da responsabilità diretta</div>
              <p className="pilastro-desc"><strong>EU AI Act</strong> responsabilizza personalmente gli amministratori. IRIS Core crea l'audit trail immutabile e la governance certificata che dimostra, in ogni momento, che l'azienda ha operato correttamente.</p>
              <span className="pilastro-tag">EU AI Act · NIS2 · Audit Trail</span>
            </div>

            <div className="pilastro p2">
              <div className="pilastro-index"><div className="p-dot"></div>02 — Governance</div>
              <svg className="pilastro-icon" viewBox="0 0 42 42" fill="none">
                <rect x="6" y="6" width="30" height="30" rx="3" stroke="#00c8e0" strokeWidth="1.5" />
                <circle cx="21" cy="21" r="6" stroke="#00c8e0" strokeWidth="1.5" />
                <path d="M21 6v9M21 27v9M6 21h9M27 21h9" stroke="#00c8e0" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
              <div className="pilastro-name">Un solo controllo.</div>
              <div className="pilastro-claim">Governance unificata su tutti i sistemi AI</div>
              <p className="pilastro-desc">ERP, CRM, agenti AI, processi automatizzati — tutti governati da un unico layer. <strong>Nessuna frammentazione, nessun punto cieco</strong>. Policy, accessi e tracciabilità centralizzati in un'unica console.</p>
              <span className="pilastro-tag">Policy Engine · RBAC/ABAC · API-first</span>
            </div>

            <div className="pilastro p3">
              <div className="pilastro-index"><div className="p-dot"></div>03 — Ottimizzazione</div>
              <svg className="pilastro-icon" viewBox="0 0 42 42" fill="none">
                <path d="M8 32 L16 22 L22 26 L32 12" stroke="#e8d5a3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M28 12h4v4" stroke="#e8d5a3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <div className="pilastro-name">−20% garantito.</div>
              <div className="pilastro-claim">Riduzione documentata dei costi operativi diretti</div>
              <p className="pilastro-desc">I pilot attivi documentano una riduzione media del 20% sui <strong>costi diretti</strong> dei processi governati. I <strong>costi indiretti</strong> — consulenze, audit, correzioni post-errore — sono ulteriori risparmi difficilmente quantificabili a priori.</p>
              <span className="pilastro-tag">−20% Costi Diretti · ROI Misurabile</span>
            </div>
          </div>
        </div>
      </section>

      <section id="responsabilita">
        <div className="inner">
          <div className="resp-layout reveal">
            <div>
              <span className="s-label">01 — Responsabilità</span>
              <h2 className="s-title">Il board è<br />personalmente<br /><em>responsabile.</em></h2>
              <p className="s-body" style={{ marginBottom: '2rem' }}>
                L'EU AI Act non punisce solo le aziende. Prevede <strong>responsabilità diretta per i singoli amministratori</strong> in caso di <strong>sistemi AI non governati</strong>. Tre scenari concreti che ogni board deve conoscere.
              </p>
              <p className="s-body" style={{ fontSize: '.85rem', color: 'rgba(240,244,248,.35)' }}>
                IRIS Core trasforma ogni rischio in evidenza documentata. In caso di controllo, avete la risposta pronta prima della domanda.
              </p>
            </div>
            <div className="risk-stack">
              <div className="risk-item">
                <span className="risk-n">Rischio 01 —</span>
                <div className="risk-t">Decisioni automatizzate non tracciabili</div>
                <p className="risk-d">Chi ha autorizzato quella decisione? Quando? Con quali dati? Senza risposta documentata, ogni decisione AI è un'esposizione legale aperta.</p>
              </div>
              <div className="risk-item">
                <span className="risk-n">Rischio 02 —</span>
                <div className="risk-t">Conformità normativa non certificata</div>
                <p className="risk-d">Un audit periodico non basta più. Serve conformità in tempo reale, aggiornata automaticamente con l'evoluzione normativa. Altrimenti ogni cambio regolatorio è un rischio non presidiato.</p>
              </div>
              <div className="risk-item">
                <span className="risk-n">Rischio 03 —</span>
                <div className="risk-t">Assenza di governance certificata</div>
                <p className="risk-d">In caso di incidente, la domanda del regolatore non sarà "cosa è andato storto" ma "avevate un sistema di governance adeguato". Senza IRIS Core, la risposta è no.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="governance">
        <div className="inner">
          <div className="gov-layout reveal">
            <div>
              <span className="s-label">02 — Governance</span>
              <h2 className="s-title">Un unico layer.<br />Controllo<br /><em>totale.</em></h2>
              <p className="s-body" style={{ marginBottom: '2rem' }}>
                La maggior parte delle aziende gestisce l'AI con strumenti frammentati: un sistema per i log, uno per gli accessi, uno per la compliance. <strong>IRIS Core unifica tutto</strong> in un layer che si integra sopra ciò che già avete.
              </p>
              <p className="s-body" style={{ fontSize: '.85rem', color: 'rgba(240,244,248,.35)' }}>
                Nessuna migrazione. Nessuna sostituzione dei sistemi esistenti. Attivo in settimane.
              </p>
            </div>
            <div className="gov-features">
              <div className="gov-feat">
                <div className="gov-feat-icon">
                  <svg viewBox="0 0 16 16" fill="none" stroke="#00c8e0" strokeWidth="1.5">
                    <rect x="2" y="2" width="12" height="12" rx="1" />
                    <path d="M5 8h6M8 5v6" strokeLinecap="round" />
                  </svg>
                </div>
                <div>
                  <div className="gov-feat-t">Policy Engine unificato</div>
                  <p className="gov-feat-d">RBAC e ABAC su tutti i sistemi da un'<strong>unica console</strong>. Chi può fare cosa, con quali dati, in quale contesto — definito una volta, applicato ovunque.</p>
                </div>
              </div>
              <div className="gov-feat">
                <div className="gov-feat-icon">
                  <svg viewBox="0 0 16 16" fill="none" stroke="#00c8e0" strokeWidth="1.5">
                    <circle cx="8" cy="8" r="6" />
                    <path d="M8 4v4l3 2" strokeLinecap="round" />
                  </svg>
                </div>
                <div>
                  <div className="gov-feat-t">Audit Log immutabile</div>
                  <p className="gov-feat-d">Ogni evento <strong>registrato con timestamp, attore, azione e hash crittografico</strong>. Nulla può essere alterato retroattivamente. La storia del sistema è permanente.</p>
                </div>
              </div>
              <div className="gov-feat">
                <div className="gov-feat-icon">
                  <svg viewBox="0 0 16 16" fill="none" stroke="#00c8e0" strokeWidth="1.5">
                    <path d="M8 2l5 3v5l-5 3-5-3V5z" />
                  </svg>
                </div>
                <div>
                  <div className="gov-feat-t">Integrazione API-first</div>
                  <p className="gov-feat-d">Si connette a ERP, CRM e sistemi AI esistenti tramite API standard. <strong>Nessuna sostituzione, nessuna migrazione</strong>. IRIS Core è un layer sopra, non un rimpiazzo sotto.</p>
                </div>
              </div>
              <div className="gov-feat">
                <div className="gov-feat-icon">
                  <svg viewBox="0 0 16 16" fill="none" stroke="#00c8e0" strokeWidth="1.5">
                    <path d="M3 8a5 5 0 0010 0M8 3v5" />
                    <circle cx="8" cy="3" r="1.5" />
                  </svg>
                </div>
                <div>
                  <div className="gov-feat-t">Compliance by Design</div>
                  <p className="gov-feat-d">Il sistema monitora l'evoluzione normativa e aggiorna automaticamente i controlli. <strong>EU AI Act, NIS2, GDPR — presidiati senza intervento manuale</strong>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="costi">
        <div className="inner">
          <div className="costi-layout reveal">
            <div>
              <span className="s-label">03 — Ottimizzazione</span>
              <h2 className="s-title">I numeri che<br />il board vuole<br /><em>vedere.</em></h2>
              <p className="s-body" style={{ marginBottom: '2.5rem' }}>
                I pilot attivi documentano risultati concreti e misurabili. Non proiezioni teoriche — dati reali su aziende italiane in settori diversi.
              </p>
              <div className="cost-items">
                <div className="cost-item">
                  <span className="ci-marker">DIRETTO —</span>
                  <p className="ci-text">Riduzione media del <strong>15/20% sui costi operativi diretti</strong> dei processi governati da IRIS Core. Documentato nei pilot attivi.</p>
                </div>
                <div className="cost-item">
                  <span className="ci-marker">INDIRETTO —</span>
                  <p className="ci-text"><strong>Eliminazione delle consulenze</strong> di compliance periodiche. Un sistema che si aggiorna da solo vale più di un audit annuale.</p>
                </div>
                <div className="cost-item">
                  <span className="ci-marker">INDIRETTO —</span>
                  <p className="ci-text"><strong>Zero costi di migrazione.</strong> Nessuna sostituzione dei sistemi esistenti, nessun progetto IT pluriennale, nessuna interruzione operativa.</p>
                </div>
                <div className="cost-item">
                  <span className="ci-marker">INDIRETTO —</span>
                  <p className="ci-text"><strong>Riduzione del costo degli errori AI</strong> — decisioni automatizzate sbagliate, correzioni manuali, interventi post-incidente. Presidiati a monte, non riparati a valle.</p>
                </div>
              </div>
            </div>
            <div className="costi-number-block reveal">
              <div className="cost-big">−15/20%</div>
              <div className="cost-label">Costi operativi diretti</div>
              <div className="cost-divider"></div>
              <div className="cost-indirect">I costi indiretti sono incalcolabili — nel senso migliore.</div>
              <p className="cost-indirect-sub">Consulenze evitate, audit semplificati, errori non commessi, reputazione preservata. Ogni azienda scopre i propri risparmi nascosti durante il pilot.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="settori">
        <div className="settori-header reveal">
          <div>
            <span className="s-label">Settori operativi</span>
            <h2 className="s-title">Il vostro settore.<br /><em>Il vostro contesto.</em><br />La vostra soluzione.</h2>
          </div>
          <p className="s-body" style={{ alignSelf: 'end' }}>
            IRIS Core è infrastruttura orizzontale — ma ogni settore ha processi, normative e rischi specifici. I tre pilastri si declinano diversamente in ogni contesto.
          </p>
        </div>
        <div className="settori-grid reveal">
          <div className="settore-card"><div className="s-name">Agroalimentare</div><p className="s-text">Tracciabilità di filiera certificata, conformità Farm to Fork, riduzione dei costi di audit qualità e governance dei dati di produzione.</p><span className="s-tag">Processi · IP · Compliance UE</span></div>
          <div className="settore-card"><div className="s-name">Industria e Manifatturiero</div><p className="s-text">Governance dei processi produttivi AI, protezione IP del design, conformità direttive UE e ottimizzazione dei costi di supply chain decision-making.</p><span className="s-tag">Filiera · Certificazione · Qualità</span></div>
          <div className="settore-card"><div className="s-name">Costruzioni e Infrastrutture</div><p className="s-text">Audit trail su gare e appalti, governance documentale di progetto, conformità Codice dei Contratti, normative ESG e riduzione dei costi di gestione procedurale.</p><span className="s-tag">Appalti · ESG · Documentale</span></div>
          <div className="settore-card"><div className="s-name">Retail Solutions &amp; Services</div><p className="s-text">Controllo catena di fornitura, governance sistemi di pricing e raccomandazione AI, conformità normative di prodotto e ottimizzazione costi logistici.</p><span className="s-tag">Supply Chain · Pricing AI · Sicurezza</span></div>
          <div className="settore-card"><div className="s-name">Consorzi di Tutela e Valorizzazione</div><p className="s-text">Certificazione DOP/IGP con tracciabilità immutabile, governance consortile dei dati di produzione, tutela del patrimonio identitario e riduzione costi di certificazione.</p><span className="s-tag">DOP/IGP · Consorzio · Identità</span></div>
          <div className="settore-card"><div className="s-name">Associazioni di Categoria</div><p className="s-text">Standard di governance AI condiviso tra gli associati, diffusione istituzionale del modello di conformità e ottimizzazione collettiva dei costi di adeguamento normativo.</p><span className="s-tag">Standard · Associati · Istituzionale</span></div>
        </div>
      </section>

      <section id="funziona">
        <div className="inner reveal">
          <span className="s-label">Il processo</span>
          <h2 className="s-title">Attivo in settimane.<br /><em>Risultati</em> dal primo mese.</h2>
          <div className="steps">
            <div className="step"><div className="step-num"><div className="step-dot"></div>01 — Integrazione</div><div className="step-title">Si connette ai sistemi che avete già</div><p className="step-desc">Layer API-first sopra ERP, CRM e sistemi AI esistenti. Nessuna migrazione, nessuna sostituzione, nessuna interruzione operativa. <strong>Attivo in settimane, non in anni</strong>.</p></div>
            <div className="step"><div className="step-num"><div className="step-dot"></div>02 — Configurazione</div><div className="step-title">Le regole del vostro business diventano codice</div><p className="step-desc">Il Policy Engine traduce le vostre regole operative e normative in <strong>controlli automatici</strong>. Governance, accessi, tracciabilità — definiti una volta, applicati su tutto.</p></div>
            <div className="step"><div className="step-num"><div className="step-dot"></div>03 — Operatività</div><div className="step-title">Ogni decisione tracciata, ogni costo misurato</div><p className="step-desc">Da quel momento ogni <strong>azione AI è registrata, validata e auditabile</strong>. E ogni processo ottimizzato produce dati di risparmio reali — misurati, documentati, presentabili al board.</p></div>
          </div>
        </div>
      </section>

      <section id="numeri">
        <div className="numeri-grid reveal">
          <div className="num-item"><div className="num-val">50+</div><div className="num-label">Aziende in pilot attivo</div></div>
          <div className="num-item"><div className="num-val">−20%</div><div className="num-label">Riduzione costi diretti documentata</div></div>
          <div className="num-item"><div className="num-val">100%</div><div className="num-label">EU AI Act compliant by design</div></div>
          <div className="num-item"><div className="num-val">0</div><div className="num-label">Migrazioni o sostituzioni richieste</div></div>
        </div>
      </section>

      <section id="quote">
        <div className="quote-mark">"</div>
        <div className="quote-text reveal">
          Governare l'AI non è una scelta strategica. È la condizione minima per poterla usare senza <em>mettere a rischio l'azienda</em> — e chi la guida.
        </div>
        <div className="quote-attr reveal">IRIS Core — Governance by Design</div>
      </section>

      <section id="pilot">
        <div className="pilot-wrapper">
          <div className="reveal">
            <span className="s-label">Accesso al Pilot</span>
            <h2 className="s-title">Verificate se IRIS Core<br />è adatto alla<br /><em>vostra realtà.</em></h2>
            <p className="s-body" style={{ marginBottom: '1.5rem' }}>Il programma pilot è riservato a imprese con processi AI attivi o in fase di adozione. L'accesso è selettivo e gratuito per le realtà qualificate.</p>
            <p className="s-body" style={{ marginBottom: '1.5rem' }}>Durante il pilot misuriamo insieme i vostri costi operativi attuali e documentiamo il risparmio reale generato da IRIS Core.</p>
            <p className="s-body" style={{ fontSize: '.82rem', color: 'rgba(240,244,248,.32)' }}>
              Nessun impegno tecnico preliminare. Nessuna presentazione IT richiesta.<br />Il primo incontro è con chi decide.
            </p>
          </div>
          <div className="pilot-form reveal">
            <div className="form-title">Richiesta di accesso</div>
            <p className="form-sub">Compilate il modulo. Vi ricontatteremo entro 48 ore per una prima valutazione riservata.</p>
            <div className="form-group"><label className="form-label">Nome e Cognome</label><input type="text" className="form-input" placeholder="Mario Rossi" /></div>
            <div className="form-group"><label className="form-label">Ruolo in azienda</label><input type="text" className="form-input" placeholder="Amministratore Delegato" /></div>
            <div className="form-group"><label className="form-label">Azienda</label><input type="text" className="form-input" placeholder="Ragione sociale" /></div>
            <div className="form-group">
              <label className="form-label">Settore</label>
              <select className="form-select" defaultValue="">
                <option value="" disabled>Selezionate il settore</option>
                <option>Agroalimentare</option>
                <option>Industria Arredamento</option>
                <option>Costruzioni e Infrastrutture</option>
                <option>Retail Prodotti Edili</option>
                <option>Consorzio del Vino</option>
                <option>Associazione di Categoria</option>
                <option>Altro</option>
              </select>
            </div>
            <div className="form-group"><label className="form-label">Email</label><input type="email" className="form-input" placeholder="nome@azienda.it" /></div>
            <button className="form-submit">Invia Richiesta →</button>
            <p className="form-note">I dati sono trattati in conformità al GDPR.<br />Nessuna comunicazione commerciale non richiesta.</p>
          </div>
        </div>
      </section>

      <footer>
        <div className="footer-meta">Versione 1.1 - Marzo 2026</div>
        <ul className="footer-links">
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Cookie Policy</a></li>
          <li><a href="https://www.iris-core.org" target="_blank" rel="noreferrer">iris-core.org</a></li>
          <li><a href="mailto:info@iris-core.it">Contatti</a></li>
        </ul>
        <div className="footer-copy">IRIS Core © 2026</div>
      </footer>
      <div className="footer-subbar">Conforme a GDPR, AI Act, NIS2, eIDAS 2, ISO 27001, ISO 42001</div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);