// sections.jsx — GMR Launch Keynote landing, content sections.
// Loaded after React + ReactDOM + Babel. Exports components to window.

const RES = (id, path) => (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || path;

const LOGO = {
  brynx: RES('mono_brynx', 'webinar/logos/BX.svg'),
  dtwin: RES('mono_dtwin', 'webinar/logos/DT.svg'),
  marketear: RES('mono_marketear', 'webinar/logos/ME.svg'),
  influrep: RES('mono_influrep', 'webinar/logos/IR.svg'),
  geoky: RES('mono_geoky', 'webinar/logos/GK.svg'),
  klenux: RES('mono_klenux', 'webinar/logos/KX.svg'),
};
const GMR_LOGO = RES('gmr', 'webinar/logos/GMR.svg');
const KPI6_LOGO = RES('kpi6', 'webinar/logos/kpi6.png');

// Nexalyse wordmark — GMR-style split (NEXA accent + LYSE gray)
function NexalyseMark() {
  return <span className="nx-wm"><span className="a">Nex</span><span className="g">alyse</span></span>;
}

const DEPARTMENTS = [
  { id: 'brynx', mono: 'BX', name: 'Brynx', c: 'var(--c-brynx)', kind: 'Unit ricerca',
    promise: 'Capire mercato e competitor prima di tutti.',
    desc: 'Insight strategici e competitive intelligence in ore, non settimane.',
    use: 'Ricerca di mercato e competitive intelligence in ore.' },
  { id: 'dtwin', mono: 'DT', name: 'DTwin', c: 'var(--c-dtwin)', kind: 'Unit consumer insight',
    promise: 'Sapere come reagirà il mercato prima di spendere un euro.',
    desc: 'Panel di migliaia di consumatori digitali per survey, focus group e interviste, in ogni lingua.',
    use: 'Focus group, survey e interviste con consumatori digitali, testa un’idea prima di produrla.' },
  { id: 'marketear', mono: 'ME', name: 'Marketear', c: 'var(--c-marketear)', kind: 'Unit social intelligence',
    promise: 'Trasformare il rumore in decisioni.',
    desc: 'Analisi di conversazioni e campagne, pronte come report cliente.',
    use: 'Analisi social e di campagna che diventano report cliente.' },
  { id: 'influrep', mono: 'IR', name: 'InfluRep', c: 'var(--c-influrep)', kind: 'Unit influencer',
    promise: 'Scegliere il volto giusto senza sbagliare.',
    desc: 'Discovery e vetting con dati veri su pubblico, engagement e brand-safety.',
    use: 'Discovery e vetting di influencer con dati su engagement, pubblico e brand-safety.' },
  { id: 'geoky', mono: 'GK', name: 'Geoky', c: 'var(--c-geoky)', kind: 'Unit visibilità AI',
    promise: 'Esistere nell’era in cui si cerca su ChatGPT.',
    desc: 'Misura e migliora la presenza dei brand nelle risposte di ChatGPT, Gemini, Perplexity, Claude.',
    use: 'Misura e migliora la visibilità dei brand nei motori AI (ChatGPT, Gemini, Perplexity, Claude).' },
  { id: 'klenux', mono: 'KX', name: 'Klenux', c: 'var(--c-klenux)', kind: 'Unit UX research',
    promise: 'Validare siti e app prima del lancio.',
    desc: 'Test su consumatori digitali per scovare le frizioni prima dei clienti veri.',
    use: 'Testa UX/UI di siti e app su consumatori digitali prima del lancio.' },
];

// ---- shared product strip (six declared products) ----
function ProductStrip({ className = '' }) {
  return (
    <div className={`mono-strip ${className}`}>
      {DEPARTMENTS.map(d => (
        <span className="mono-chip" key={d.id}>
          <img src={LOGO[d.id]} alt={d.name}/>
          <span className="nm">{d.name}</span>
        </span>
      ))}
    </div>
  );
}

// ---- HEADER ----
function Header() {
  return (
    <header className="hdr">
      <div className="wrap row">
        <a href="#top" className="brand brand-nx">
          <NexalyseMark/>
        </a>
        <nav>
          <div className="navlinks">
            <a href="#lancio">Cosa lanciamo</a>
            <a href="#prodotti">I sei prodotti</a>
            <a href="#palco">Chi presenta</a>
            <a href="#scaletta">Scaletta</a>
          </div>
          <a href="#iscriviti" className="btn btn-ghost">Riserva il posto <span className="ar">&rarr;</span></a>
        </nav>
      </div>
    </header>
  );
}

// ---- HERO ----
function Hero({ variant }) {
  return (
    <section className="hero sec flush" id="top">
      <div className="glow"/>
      <div className="wrap inner">
        <div className="kicker rv in">
          <span className="seg live"><span className="live-dot"/>Keynote di lancio</span>
          <span className="seg">18 giugno 2026 &middot; 17:00 CEST</span>
          <span className="seg">Online</span>
        </div>

        {variant === 'type' && (
          <>
            <p className="mlabel rv in" data-num="01" style={{ marginTop: 4 }}>Enterprise insight &middot; Any team size</p>
            <h1 className="disp h-xl rv in">
              Il 18 giugno presentiamo<br/>la prima <span className="acc">agenzia AI</span> completa.
            </h1>
            <h2 className="disp h-l rv in" style={{ marginTop: -8 }}>
              <span className="muted">Sei prodotti. Un solo team.<br/>La tua agenzia, moltiplicata.</span>
            </h2>
          </>
        )}

        {variant === 'monograms' && (
          <>
            <h1 className="disp h-l rv in" style={{ maxWidth: 1040 }}>
              Sei prodotti. Un solo team.<br/>
              <span className="muted">Il 18 giugno lanciamo </span><span className="acc">un&rsquo;agenzia AI intera.</span>
            </h1>
            <div className="mono-board rv-st in" style={{ marginTop: 4 }}>
              {DEPARTMENTS.map(d => (
                <div className="cell" key={d.id}>
                  <img src={LOGO[d.id]} alt={d.name}/>
                  <span className="dpt" style={{ color: d.c }}>{d.name}</span>
                  <span className="role">{d.kind.replace('Unit ', '')}</span>
                </div>
              ))}
            </div>
          </>
        )}

        {variant === 'team' && (
          <>
            <h1 className="disp h-l rv in" style={{ maxWidth: 1000 }}>
              Lanciamo un&rsquo;agenzia intera.<br/>
              <span className="muted">39 agenti. Sei prodotti.<br/>Un solo team.</span>
            </h1>
            <div className="rv in" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div className="agent-grid">
                {Array.from({ length: 39 }).map((_, i) => {
                  const host = i === 0;
                  const on = !host && (i * 7) % 5 < 3;
                  return <div key={i} className={`agent-cell ${host ? 'host' : on ? 'on' : ''}`}/>;
                })}
              </div>
              <div className="agent-legend">
                <span className="it"><span className="sw host"/> I tuoi host, dal vivo</span>
                <span className="it"><span className="sw"/> Il team specializzato al lavoro</span>
              </div>
            </div>
          </>
        )}

        <p className="lead sub rv in">
          Per la prima volta sveliamo lo stack completo: <strong>sei prodotti</strong>, Brynx, DTwin, Marketear, InfluRep, Geoky, Klenux, che insieme non sono sei tool, ma <strong>un&rsquo;agenzia AI intera</strong>: 39 agenti specializzati che fanno ricerca, validano idee su consumatori digitali, trovano gli influencer giusti e posizionano i brand. Lo presentiamo dal vivo, su un caso reale e con un ospite che non ti aspetti.
        </p>

        <ProductStrip className="rv-st in"/>

        <div className="ctas rv in">
          <a href="#iscriviti" className="btn btn-primary">Riserva il posto al keynote <span className="ar">&rarr;</span></a>
          <a href="#scaletta" className="btn btn-ghost">La scaletta</a>
        </div>

        <div className="reassure rv in">
          <span>~45 min + Q&amp;A dal vivo</span><span className="sep">&middot;</span>
          <span>Online</span><span className="sep">&middot;</span>
          <span>Registrazione per tutti gli iscritti</span>
        </div>

        <div className="rv in date-reminder">
          <span className="dr-dot"/>
          <span className="dr-d">18 giugno 2026</span>
          <span className="dr-sep">&middot;</span>
          <span className="dr-h">17:00 CEST</span>
          <span className="dr-sep">&middot;</span>
          <span className="dr-h">online</span>
        </div>
      </div>
    </section>
  );
}

// ---- COSA LANCIAMO (A + B) ----
function Launch() {
  const roles = ['Research Director', 'Account', 'Planner', 'Audience builder', 'Moderatore', 'Analista quant', 'Competitive intel', 'Data-viz', 'Report writer', 'UX tester', 'QA', 'SDR', 'Account exec'];
  return (
    <section className="sec" id="lancio">
      <div className="wrap">
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 48, maxWidth: 940 }}>
          <span className="mlabel" data-num="01">Cosa lanciamo</span>
          <h2 className="disp h-l">Non un altro tool.<br/><span className="muted">Un&rsquo;agenzia AI completa.</span></h2>
        </div>

        <div className="wow-grid rv">
          <div className="wow-block">
            <span className="tag">Le competenze</span>
            <div className="big-num">39<span className="x"> ruoli</span></div>
            <h3>39 specialisti, non 39 chatbot.</h3>
            <p className="body">Un unico team di agenti specializzati, come le unit di un&rsquo;agenzia vera: Research Director, account, ricercatori di audience, moderatori, analisti quantitativi, competitive intelligence, data-viz, report writer, tester, QA, perfino il commerciale.</p>
            <div className="roster">
              {roles.map((r, i) => <span key={r} className={`r ${i % 3 === 0 ? 'hi' : ''}`}>{r}</span>)}
              <span className="r">+26</span>
            </div>
            <p className="body" style={{ marginTop: 4 }}><strong>Le competenze di un&rsquo;agenzia intera, senza il team di un&rsquo;agenzia intera.</strong></p>
          </div>

          <div className="wow-block">
            <span className="tag">Il panel</span>
            <div className="big-num" style={{ color: 'var(--c-dtwin)' }}>&infin;<span className="x" style={{ color: 'var(--ink-4)' }}> twin</span></div>
            <h3>I clienti dei tuoi clienti, su chiamata.</h3>
            <p className="body">Accanto agli agenti, i <strong>digital twin</strong>: i consumatori che interroghi, reclutabili a <strong>migliaia</strong> per ogni studio, in qualsiasi mercato e lingua. Una profondit&agrave; di ricerca che nemmeno i grandi istituti hanno con questa rapidit&agrave;.</p>
            <div className="twin-viz">
              {Array.from({ length: 64 }).map((_, i) => <div key={i} className={`d ${(i * 11) % 7 < 4 ? 'on' : ''}`}/>)}
            </div>
          </div>
        </div>

        <p className="wow-synth rv">Un&rsquo;agenzia di <span className="em">39 specialisti</span> + <span className="em">panel illimitati</span> di consumatori. Dentro la tua.</p>

        {/* Block B */}
        <div className="launch-b rv" style={{ marginTop: 56 }}>
          <div className="lb-text">
            <span className="tag">Il cuore del lancio</span>
            <h3 className="disp h-m">Lo stesso team,<br/><span className="muted">su ogni prodotto.</span></h3>
            <p className="body">Gli stessi ruoli tornano su tutti i prodotti: non compri sei team per sei tool, <strong>attivi un&rsquo;unica agenzia condivisa</strong> che schiera le risorse giuste per ogni lavoro.</p>
            <div className="lb-stats">
              <div className="lb-stat"><span className="v" style={{ color: 'var(--c-brynx)' }}>20</span><span className="k">Brynx &middot; schiera 20 specialisti sulla ricerca</span></div>
              <div className="lb-stat"><span className="v" style={{ color: 'var(--c-dtwin)' }}>&infin;</span><span className="k">DTwin &middot; comanda digital twin illimitati</span></div>
            </div>
          </div>
          <div className="lb-viz">
            {DEPARTMENTS.map(d => (
              <div className="lb-prod" key={d.id} style={{ '--dept-c': d.c }}>
                <span className="lb-mono"><img src={LOGO[d.id]} alt={d.mono}/></span>
                <span className="lb-name">{d.name}</span>
                <span className="lb-dot"/>
              </div>
            ))}
            <span className="lb-shared">Team condiviso</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- I SEI PRODOTTI (cards) ----
function Products() {
  return (
    <section className="sec raised" id="prodotti">
      <div className="wrap">
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 48, maxWidth: 980 }}>
          <span className="mlabel" data-num="02">I sei prodotti che lanciamo</span>
          <h2 className="disp h-l">Sei unit. Trentanove agenti.<br/><span className="muted">Un obiettivo: il risultato che porti al cliente.</span></h2>
        </div>
        <div className="dept-grid rv-st">
          {DEPARTMENTS.map(d => (
            <div className="dept" key={d.id} style={{ '--dept-c': d.c }}>
              <div className="top">
                <span className="mono-badge"><img src={LOGO[d.id]} alt={d.mono}/></span>
                <span className="dept-kind">{d.kind}</span>
              </div>
              <h3>{d.name}</h3>
              <span className="promise">{d.promise}</span>
              <p className="desc">{d.desc}</p>
            </div>
          ))}
        </div>

        {/* Stack table */}
        <div className="stack-wrap rv" style={{ marginTop: 40 }}>
          <span className="mlabel" data-num="↳" style={{ marginBottom: 18, display: 'inline-flex' }}>Lo stack in una vista</span>
          <table className="stack-table">
            <thead><tr><th>Prodotto</th><th>A cosa serve</th></tr></thead>
            <tbody>
              {DEPARTMENTS.map(d => (
                <tr key={d.id}>
                  <td><span className="st-prod"><span className="st-dot" style={{ background: d.c }}/>{d.name}</span></td>
                  <td>{d.use}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ---- PROBLEM ----
function Problem() {
  return (
    <section className="sec">
      <div className="wrap prob-grid">
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <span className="mlabel" data-num="03">Perch&eacute; ora</span>
          <h2 className="disp h-m">I tuoi clienti pagano per gli insight.<br/><span className="muted">Non per le ore che servono a produrli.</span></h2>
          <p className="lead">La leva non &egrave; lavorare pi&ugrave; ore. &Egrave; <strong>comprimere la produzione dell&rsquo;insight senza sacrificare il rigore.</strong></p>
        </div>
        <div className="prob-list rv-st">
          <div className="prob-row"><span className="n">01</span><span className="t">Il valore sta nella <strong>qualit&agrave; dell&rsquo;analisi</strong>, ma il costo sta nelle persone e nelle settimane necessarie a produrla.</span></div>
          <div className="prob-row"><span className="n">02</span><span className="t">Unit research, licenze dati, analisti, cicli di lavoro lunghi, e <strong>margini che si comprimono.</strong></span></div>
          <div className="prob-row"><span className="n">03</span><span className="t">I clienti chiedono la <strong>velocit&agrave; dell&rsquo;AI</strong> e iniziano a domandare se il loro brand compare nelle risposte di ChatGPT.</span></div>
        </div>
      </div>
    </section>
  );
}

// ---- SOLUTION / RAAS ----
function Solution() {
  const deliverables = ['Report di mercato', 'Validazione su consumatori', 'Lista influencer verificata', 'Analisi di visibilità AI'];
  return (
    <section className="sec">
      <div className="wrap" style={{ maxWidth: 980 }}>
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <span className="mlabel" data-num="04">Il modello &middot; Result as a Service</span>
          <h2 className="disp h-l">Non vendere ore.<br/><span className="acc">Consegna risultati.</span></h2>
          <p className="lead">Non un altro software da imparare, ma uno stack che produce il <strong>risultato finito</strong>, pronto da presentare al cliente, con il tuo brand sopra e una metodologia che regge alle domande difficili.</p>
          <div className="raas-deliver">
            {deliverables.map(d => <span key={d} className="chip"><span className="dot"/>{d}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- PER CHI È ----
function PerChi() {
  const yes = [
    <>Guidi o lavori in un&rsquo;<strong>agenzia</strong> di marketing, comunicazione o digital</>,
    <>Sei <strong>consulente, manager o partner</strong> in una societ&agrave; di advisory/strategy (incluse Big4 e boutique)</>,
    <>Produci ricerca, analisi o deliverable di mercato <strong>per conto di clienti</strong></>,
    <>Vuoi aumentare la <strong>marginalit&agrave; per progetto</strong> senza aumentare il team</>,
  ];
  return (
    <section className="sec raised" id="perchi">
      <div className="wrap perchi-grid">
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <span className="mlabel" data-num="05">Per chi &egrave;</span>
          <h2 className="disp h-m">Questo keynote &egrave; per te<br/><span className="muted">se ti riconosci qui.</span></h2>
          <div className="perchi-not">
            <span className="pn-k">Non &egrave; per te se</span>
            <span className="pn-t">cerchi un tool tecnico da configurare. Qui si parla di risultati e di business.</span>
          </div>
        </div>
        <ul className="perchi-list rv-st">
          {yes.map((y, i) => (
            <li key={i}><span className="pc-i">&#10003;</span><span className="pc-t">{y}</span></li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ---- OPPORTUNITY / QUOTES ----
function Opportunity() {
  const epochs = [
    { n: '1769', t: 'Il vapore', d: 'Moltiplicò la forza muscolare.' },
    { n: '1882', t: 'L’elettricità', d: 'Portò energia in ogni officina.' },
    { n: '1991', t: 'Internet', d: 'Azzerò le distanze.' },
    { n: 'Oggi', t: 'L’AI', d: 'La leva di questo secolo.', now: true },
  ];
  return (
    <section className="sec">
      <div className="wrap" style={{ maxWidth: 1080 }}>
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 40, maxWidth: 920 }}>
          <span className="mlabel" data-num="06">L&rsquo;opportunit&agrave; del secolo</span>
          <h2 className="disp h-l">Ogni secolo ha la sua leva.<br/><span className="acc">Questa &egrave; la tua.</span></h2>
          <p className="lead">Chi adott&ograve; per primo la nuova leva non sostitu&igrave; le persone: <strong>moltiplic&ograve; quello che una singola persona poteva fare.</strong></p>
        </div>

        <div className="epochs rv-st" style={{ marginBottom: 40 }}>
          {epochs.map(e => (
            <div className={`epoch ${e.now ? 'now' : ''}`} key={e.n}>
              <span className="e-n">{e.n}</span>
              <span className="e-t">{e.t}</span>
              <span className="e-d">{e.d}</span>
            </div>
          ))}
        </div>

        <div className="quotes rv" style={{ marginBottom: 40 }}>
          <div className="quote">
            <span className="q">AI is the new electricity. Electricity transformed industries: agriculture, transportation, communication, manufacturing.</span>
            <span className="who"><b>Andrew Ng</b> &middot; fondatore di Google Brain &middot; <span className="src">&ldquo;AI Transformation Playbook&rdquo;, 2017</span></span>
          </div>
          <div className="quote">
            <span className="q">Is AI the most important thing to happen in a very long time? My opinion is yes.</span>
            <span className="who"><b>Sam Altman</b> &middot; CEO di OpenAI &middot; <span className="src">&ldquo;Moore&rsquo;s Law for Everything&rdquo;, 2021</span></span>
          </div>
        </div>

        <p className="punch rv" style={{ maxWidth: 1000 }}>
          Avere l&rsquo;elettricit&agrave; non bastava, bisognava costruirci le macchine sopra. Oggi tutti &ldquo;hanno&rdquo; la GenAI, ma la usano come una chat: <span className="em">una presa di corrente con niente attaccato.</span> Noi ci abbiamo costruito le macchine: <span className="acc">39 agenti specializzati e panel di migliaia di consumatori digitali.</span> Il 18 giugno te le presentiamo.
        </p>
      </div>
    </section>
  );
}

// ---- CHI PRESENTA ----
function Stage() {
  const hosts = [
    { nm: 'Alberto Nasciuti', rl: 'Founder', img: RES('photo_alberto', 'webinar/photos/alberto.jpg') },
    { nm: 'Gaetano Masi', rl: 'Product', img: RES('photo_gaetano', 'webinar/photos/gaetano.jpg') },
    { nm: 'Marco Mazza', rl: 'Commerciale', img: RES('photo_marco', 'webinar/photos/marco.jpg') },
  ];
  return (
    <section className="sec raised" id="palco">
      <div className="wrap">
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 44, maxWidth: 960 }}>
          <span className="mlabel" data-num="07">Chi presenta</span>
          <h2 className="disp h-m">A presentare il lancio: tre di noi.<br/><span className="muted">E un ospite che non ti aspetti.</span></h2>
        </div>

        <div className="spk-hosts rv-st">
          {hosts.map(h => (
            <div className="spk-host" key={h.nm}>
              <div className="ph">{h.img ? <img src={h.img} alt={h.nm}/> : <span className="ph-t">Foto host</span>}</div>
              <div className="nm">{h.nm}</div>
              <div className="rl">{h.rl}</div>
              <div className="live-tag"><span className="live-dot"/>In carne e ossa, dal vivo</div>
            </div>
          ))}
        </div>

        <div className="guest-card rv">
          <span className="guest-eyebrow">Un&rsquo;ultima cosa</span>
          <p className="guest-copy"><strong>Con noi, dal vivo, ci sar&agrave; anche qualcun altro.</strong> In voce. Potrai sentirlo ragionare, lavorare e rispondere alle domande in tempo reale. Non &egrave; un collega come gli altri. <strong>Chi sia, lo scoprirai durante il keynote.</strong></p>
          <span className="guest-wave" aria-hidden="true">
            {Array.from({ length: 28 }).map((_, i) => <i key={i} style={{ animationDelay: `${i * 0.07}s` }}/>)}
          </span>
        </div>
      </div>
    </section>
  );
}

// ---- SCALETTA ----
function Scaletta() {
  const rows = [
    { t: '17:00', q: false, w: <><strong>Apertura:</strong> perch&eacute; oggi nasce un nuovo modo di fare agenzia</> },
    { t: '17:05', q: false, w: <><strong>Il lancio:</strong> sveliamo i sei prodotti e il team unico, dal vivo su un caso reale</> },
    { t: '17:30', q: false, w: <>Il modello <strong>&ldquo;Result as a Service&rdquo;</strong> e l&rsquo;impatto su flusso e margini</> },
    { t: '17:40', q: false, w: <><strong>Domande dalla sala</strong></> },
    { t: '17:45', q: true, w: <><strong>Q&amp;A dal vivo</strong></> },
  ];
  return (
    <section className="sec" id="scaletta">
      <div className="wrap" style={{ maxWidth: 980 }}>
        <div className="rv" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 36 }}>
          <span className="mlabel" data-num="08">La scaletta del keynote</span>
          <h2 className="disp h-m">Come si svolge.<br/><span className="muted">18 giugno &middot; ore 17:00 CEST</span></h2>
        </div>
        <div className="agenda rv-st">
          {rows.map(r => (
            <div className={`ag-row ${r.q ? 'qa' : ''}`} key={r.t}>
              <span className="time">{r.t}</span>
              <span className="what">{r.w}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- FOOTER ----
function Footer() {
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="top">
          <div className="brand">
            <img src={GMR_LOGO} alt="GMR"/>
            <p><strong style={{ color: 'var(--ink-2)' }}>GMR</strong> &egrave; il proprietario dei sei prodotti presentati al keynote: un solo team di 39 agenti specializzati e panel illimitati di consumatori digitali.</p>
          </div>
          <div className="cols">
            <div className="col">
              <span className="ch">Prodotti GMR</span>
              {DEPARTMENTS.map(d => <a key={d.id} href="#prodotti">{d.name}</a>)}
            </div>
            <div className="col">
              <span className="ch">Keynote</span>
              <a href="#lancio">Cosa lanciamo</a>
              <a href="#scaletta">Scaletta</a>
              <a href="#palco">Chi presenta</a>
              <a href="#iscriviti">Riserva il posto</a>
            </div>
            <div className="col">
              <span className="ch">Legale</span>
              <a href="#">Privacy policy (GDPR)</a>
              <a href="#">Termini</a>
              <a href="#">Cookie</a>
            </div>
          </div>
        </div>

        <div className="bottom">
          <span className="mono">Nexalyse Ltd part of KPI6.com Srl</span>
          <span className="mono">&copy; {new Date().getFullYear()} GMR &middot; Tutti i diritti riservati</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  DEPARTMENTS, LOGO, ProductStrip, NexalyseMark, Header, Hero, Launch, Products, Problem, Solution, PerChi, Opportunity, Stage, Scaletta, Footer,
});