/* global React, T, Eyebrow, H2, Italic, PrimaryBtn, GhostBtn, Section, Photo, StripeImg, Reveal */
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

// =============== Past Speakers (edizioni precedenti) ===============
const PAST_SPEAKERS = [
  { name: 'Gianluca Gotto', role: 'Scrittore viaggiatore', src: window.mwAsset('assets/legacy/external/ex-speaker-gianluca-gotto-21413c182750.png') },
  { name: 'Paolo Borzacchiello', role: 'Autore, divulgatore, consulente', src: window.mwAsset('assets/legacy/external/speaker-2024-paolo-borzacchiello-d5d951aecd83.png') },
  { name: 'Andrea Giuliodori', role: 'Ingegnere, ex-Manager, Founder di EfficaceMente', src: window.mwAsset('assets/legacy/external/ex-speaker-andrea-giuliodori-24e1509bdbc8.png') },
  { name: 'Giulia Calcaterra', role: 'Imprenditrice digitale, Fitness Coach & Travel Influencer', src: window.mwAsset('assets/legacy/external/speaker-2024-giulia-calcaterra-c8f06d73658f.png') },
  { name: 'Salvatore Aranzulla', role: 'Imprenditore e Divulgatore informatico su Aranzulla.it', src: window.mwAsset('assets/legacy/external/ex-speaker-salvatore-aranzulla-72e77827a80d.png') },
  { name: 'Neil Patel', role: 'Co-Founder at Neil Patel Digital', src: window.mwAsset('assets/legacy/external/ex-speaker-neil-patel-4460daf624c9.png') },
  { name: 'Francesca Wildflowermood', role: 'Influencer, Creator e nomade digitale', src: window.mwAsset('assets/legacy/external/francesca-ruvolo-1-379a1b40dc85.png') },
  { name: 'Marcello Ascani', role: 'Content Creator e Youtuber appassionato di imprenditoria, co-fondatore di FlatmatesAgency', src: window.mwAsset('assets/legacy/external/ex-speaker-marcello-ascani-645b97d2cc1f.png') },
  { name: 'Progetto Happiness', role: 'Content Creator, TEDxSpeaker, Video Reportage', src: window.mwAsset('assets/legacy/external/ex-speaker-progetto-happiness-696d04f5364f.png') },
  { name: 'Paolo De Nadai', role: 'Fondatore di ScuolaZoo & WeRoad — Presidente di OneDay Group', src: window.mwAsset('assets/legacy/external/ex-speaker-paolo-de-nadai-c92dd9f09f4c.png') },
];

function PastSpeakers() {
  return (
    <Section dark={true} grid={true} style={{
      background: `linear-gradient(180deg, #02060F 0%, #03081B 100%)`,
    }}>
      <Eyebrow>// Edizioni precedenti</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 48 }}>
        <H2 max={900}>
          Scordati talk noiosi o promozionali. Impara direttamente dall'<Italic>esperienza pratica</Italic> di chi lavora nel mercato digitale in prima linea.
        </H2>
        <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, maxWidth: 360, margin: '0 0 18px' }}>
          Alcuni degli ospiti delle precedenti edizioni. Il Marketers World nasce nel 2018 dalla più grande community d'imprenditori e creativi digitali d'Italia.
        </p>
      </div>

      <div className="mw-past-speakers-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
        {PAST_SPEAKERS.map((sp, i) => (
          <div key={i} style={{
            border: T.borderDark, borderRadius: 12, padding: 12,
            background: 'rgba(255,255,255,0.02)',
            transition: 'border-color 0.3s, transform 0.3s',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(75,107,251,0.35)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.07)'; e.currentTarget.style.transform = 'translateY(0)'; }}
          >
            <Photo src={sp.src} alt={sp.name} ratio="1/1"/>
            <div style={{ padding: '12px 4px 4px' }}>
              <div style={{ fontFamily: T.serif, fontWeight: 700, fontSize: 15, color: '#fff', letterSpacing: '-0.01em', lineHeight: 1.2 }}>
                {sp.name}
              </div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', marginTop: 4, lineHeight: 1.4 }}>
                {sp.role}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, textAlign: 'center' }}>
        <GhostBtn href="https://marketersworld.net/mkw24-testimonianze/">Tutti gli speaker delle edizioni precedenti →</GhostBtn>
      </div>
    </Section>
  );
}

// =============== Cos'è il Marketers World ===============
function CosaE() {
  const cards = [
    {
      eyebrow: '01',
      title: 'Accelera la tua carriera',
      body: 'Sul palco del Marketers World potrai ascoltare le migliori menti del nostro paese. Ruba le loro strategie e implementale nella tua carriera.',
      photo: window.mwAsset('assets/borzacchiello-stage.jpg', 'assets/borzacchiello-stage.jpg'),
      photoLabel: 'Sul palco · MW25',
      accent: T.blue,
    },
    {
      eyebrow: '02',
      title: 'Ottieni le competenze di domani',
      body: 'Brucia le tappe, semina i tuoi competitor e impara quello che devi fare per emergere oggi stesso nel mercato digitale.',
      photo: window.MW.cosaB,
      photoLabel: 'Workshop · pratica',
      accent: T.violet,
    },
    {
      eyebrow: '03',
      title: 'Partecipa ad una festa epica',
      body: 'Marketers World invade Rimini! Fai networking, ottieni collaborazioni, stringi nuove amicizie e brinda ai nostri party con i tuoi futuri alleati.',
      photo: window.mwAsset('assets/party-dj.jpg', 'assets/party-dj.jpg'),
      photoLabel: 'Party · città dei marketers',
      accent: T.green,
    },
  ];

  return (
    <Section dark={false} grid={false} style={{ background: T.off }}>
      <Eyebrow accent={T.blue}>// L'esperienza</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, marginBottom: 64, alignItems: 'flex-end' }}>
        <h2 style={{
          fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(34px, 4vw, 56px)',
          lineHeight: 1.05, color: T.ink, margin: 0, letterSpacing: '-0.01em', textWrap: 'balance',
        }}>
          Cos'è il Marketers World e <Italic color={T.blue}>perché dovresti venire?</Italic>
        </h2>
        <div>
          <p style={{ fontFamily: T.sans, fontSize: 16, color: T.body, lineHeight: 1.65, margin: '0 0 16px' }}>
            Il Marketers World è l'evento di riferimento in Italia per imprenditori
            digitali, creators, freelancer e per tutti coloro che desiderano
            intraprendere una carriera digitale.
          </p>
          <p style={{ fontFamily: T.sans, fontSize: 14, color: T.muted, lineHeight: 1.6, margin: 0 }}>
            Ecco cosa otterrai in <strong style={{ color: T.blue, fontWeight: 600 }}>72 ore di evento</strong>:
            strategie e nozioni per creare e accelerare il tuo business, le ultime metodologie di Marketing,
            amicizie e alleanze professionali per dominare il tuo settore.
          </p>
        </div>
      </div>

      {/* 3 photo cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {cards.map((c, i) => (
          <Reveal key={i} delay={i * 80}>
            <div style={{
              background: '#fff', border: T.borderLight, borderRadius: 16,
              padding: 0, height: '100%', position: 'relative', overflow: 'hidden',
              transition: 'transform 0.3s, box-shadow 0.3s',
              display: 'flex', flexDirection: 'column',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = `0 0 40px ${c.accent}22`; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              {/* Photo */}
              <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden' }}>
                <img src={c.photo} alt={c.title} loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                {/* Overlay */}
                <div style={{
                  position: 'absolute', inset: 0,
                  background: `linear-gradient(180deg, transparent 0%, rgba(8,13,26,0.4) 100%), linear-gradient(135deg, ${c.accent}22 0%, transparent 60%)`,
                }}/>
                {/* HUD top */}
                <div style={{
                  position: 'absolute', top: 14, left: 14,
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.16em',
                  textTransform: 'uppercase', padding: '5px 10px',
                  background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
                  color: '#fff', borderRadius: 4,
                }}>{c.photoLabel}</div>
                {/* Big number */}
                <div style={{
                  position: 'absolute', bottom: -14, right: 14,
                  fontFamily: T.serif, fontWeight: 900, fontSize: 120, lineHeight: 1,
                  color: '#fff', letterSpacing: '-0.04em', opacity: 0.92,
                  textShadow: '0 4px 24px rgba(0,0,0,0.4)',
                }}>{c.eyebrow}</div>
              </div>

              {/* Content */}
              <div style={{ padding: 28, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{
                  fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: c.accent, marginBottom: 12,
                }}>// 0{i + 1} · Cosa otterrai</div>
                <div style={{
                  height: 1, marginBottom: 16,
                  background: `repeating-linear-gradient(to right, ${c.accent}55 0 3px, transparent 3px 8px)`,
                }}/>
                <h3 style={{
                  fontFamily: T.serif, fontWeight: 800, fontSize: 26, color: T.ink,
                  margin: '0 0 12px', lineHeight: 1.15, letterSpacing: '-0.01em',
                }}>{c.title}</h3>
                <p style={{ fontFamily: T.sans, fontSize: 14.5, color: T.body, lineHeight: 1.6, margin: 0, flex: 1 }}>
                  {c.body}
                </p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Quote / closing */}
      <div className="mw-quote-cta" style={{
        marginTop: 56, padding: 40, borderRadius: 16,
        background: `linear-gradient(135deg, ${T.bluePale} 0%, #F4EEFF 100%)`,
        border: `1px solid ${T.electric}33`,
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: '-60%', right: '-15%', width: '55%', height: '220%',
          background: `radial-gradient(ellipse, ${T.violet}55, transparent 60%)`, filter: 'blur(70px)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          position: 'absolute', top: '-40%', left: '-10%', width: '45%', height: '180%',
          background: `radial-gradient(ellipse, ${T.electric}33, transparent 60%)`, filter: 'blur(70px)',
          pointerEvents: 'none',
        }}/>
        <p style={{
          fontFamily: T.serif, fontWeight: 700, fontSize: 24,
          color: T.ink, lineHeight: 1.3, margin: 0, letterSpacing: '-0.01em',
          position: 'relative', maxWidth: 680,
        }}>
          Partecipare al Marketers World significa acquisire un grande <Italic color={T.violetDeep}>vantaggio competitivo</Italic> nella tua carriera professionale.
        </p>
        <PrimaryBtn href="#biglietti" style={{ position: 'relative' }}>Ottieni il tuo Pass</PrimaryBtn>
      </div>
    </Section>
  );
}

// =============== Trailer / video block (Marcello Ascani) ===============
function TrailerBlock() {
  const [playing, setPlaying] = useS2(false);
  return (
    <Section id="trailer" dark={true} grid={true} pad="100px 56px">
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 24 }}>
        <Eyebrow style={{ justifyContent: 'center', display: 'inline-flex', maxWidth: 'fit-content' }}>
          Video · Testimonianza
        </Eyebrow>
        <H2 max={780} style={{ textAlign: 'center', margin: 0 }}>
          Guarda il Marketers World con gli occhi di <Italic>Marcello Ascani.</Italic>
        </H2>
        <p style={{
          fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6,
          margin: 0, maxWidth: 640,
        }}>
          Abbiamo chiesto a Marcello, un veterano del Marketers World, perché ha preso parte
          a tutte le edizioni dell'evento. Guarda la sua esperienza.
        </p>
        {/* Player frame — centered, below */}
        <div onClick={() => setPlaying(true)} style={{
          position: 'relative', aspectRatio: '16/9',
          width: '100%', maxWidth: 960, marginTop: 32,
          borderRadius: 16, cursor: 'pointer',
          background: T.card, border: '1px solid rgba(75,107,251,0.25)', overflow: 'hidden',
        }}>
          <img
            src={window.mwAsset('assets/marcello-ascani.jpg', 'assets/marcello-ascani.jpg')}
            alt="Marcello Ascani · trailer"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover',
              objectPosition: 'center 30%',
              filter: 'brightness(0.82) saturate(1.05) contrast(1.03)',
            }}
            onError={e => { e.currentTarget.style.display = 'none'; }}
          />
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(180deg, rgba(8,13,26,0.1) 0%, rgba(8,13,26,0.7) 100%), linear-gradient(135deg, ${T.blue}33, transparent 40%, ${T.violetDeep}33)`,
          }}/>

          <div style={{
            position: 'absolute', top: 14, left: 16, right: 16,
            display: 'flex', justifyContent: 'space-between',
            fontFamily: T.mono, fontSize: 11, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.14em',
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, background: '#FF4444', borderRadius: '50%', animation: 'pulse 2s ease infinite' }}/>
              REC · MW25 ARCHIVE
            </span>
            <span>04:32 / 12:08</span>
          </div>

          <div style={{
            position: 'absolute', bottom: 40, left: 24, right: 24, textAlign: 'left',
          }}>
            <div style={{
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.2em',
              textTransform: 'uppercase', color: T.blueLight, marginBottom: 6,
            }}>· Marcello Ascani</div>
            <div style={{
              fontFamily: T.serif, fontWeight: 800, fontStyle: 'italic',
              fontSize: 26, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.01em',
              textShadow: '0 2px 12px rgba(0,0,0,0.6)',
            }}>"Uno dei pochi eventi in cui vado di mia spontanea volontà."</div>
          </div>

          {/* Play button */}
          <button onClick={(e) => { e.stopPropagation(); setPlaying(true); }} style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 96, height: 96, borderRadius: '50%',
            background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(8px)',
            border: '2px solid #fff', color: '#fff',
            cursor: 'pointer', transition: 'all 0.3s',
            display: 'grid', placeItems: 'center',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = T.blue; e.currentTarget.style.borderColor = T.blue; e.currentTarget.style.transform = 'translate(-50%,-50%) scale(1.06)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; e.currentTarget.style.borderColor = '#fff'; e.currentTarget.style.transform = 'translate(-50%,-50%) scale(1)'; }}
          >
            <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 4 }}><path d="M8 5v14l11-7z"/></svg>
          </button>

          <div style={{
            position: 'absolute', bottom: 14, left: 16, right: 16,
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: T.mono, fontSize: 10, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.14em',
          }}>
            <span style={{ flex: 1, height: 2, background: 'rgba(255,255,255,0.18)', borderRadius: 2, position: 'relative' }}>
              <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '38%', background: T.blueLight, borderRadius: 2 }}/>
            </span>
            <span>HD · 1080p</span>
          </div>
        </div>
      </div>

      <VideoModal
        open={playing}
        onClose={() => setPlaying(false)}
        type="youtube"
        src="9p4VWPnBgwI"
      />
    </Section>
  );
}

// =============== Aziende — real logos from marketersworld.net ===============
const COMPANIES = [
  { n: 'WeRoad', l: window.mwAsset('assets/legacy/external/weroad-logo-white-3de3814f9b16.png') },
  { n: 'TechnoGym', l: window.mwAsset('assets/legacy/external/technogym-logo-white-f7e6d0c3a22a.png') },
  { n: 'PwC', l: window.mwAsset('assets/legacy/external/pwc-logo-white-8857532b0efa.png') },
  { n: 'McKinsey', l: window.mwAsset('assets/legacy/external/mckinseycompany-logo-white-2b2342f4fd38.png') },
  { n: 'Facebook', l: window.mwAsset('assets/legacy/external/facebook-logo-white-c7fe797bc29e.png') },
  { n: 'TikTok', l: window.mwAsset('assets/legacy/external/tiktok-logo-white-0465c962becd.png') },
  { n: 'Google', l: window.mwAsset('assets/legacy/external/google-logo-white-2f69ca6b318f.png') },
  { n: 'Amazon', l: window.mwAsset('assets/legacy/external/amazon-logo-white-41de2314cc3f.png') },
  { n: 'Idealista', l: window.mwAsset('assets/legacy/external/idealista-logo-white-5ed2218a20ed.png') },
  { n: 'Alibaba', l: window.mwAsset('assets/legacy/external/alibaba-logo-white-53a73d615074.png') },
  { n: 'Airbnb', l: window.mwAsset('assets/legacy/external/airbnb-logo-white-4bd67164489e.png') },
  { n: 'Nike', l: window.mwAsset('assets/legacy/external/nike-logo-white-5a8d8139df86.png') },
  { n: 'Hoepli', l: window.mwAsset('assets/legacy/external/hoepli-logo-white-a885727854b5.png') },
  { n: 'Revolut', l: window.mwAsset('assets/legacy/external/revolut-logo-white-3a2ccda85705.png') },
  { n: 'Trustpilot', l: window.mwAsset('assets/legacy/external/trustpilot-logo-white-481b02ab1e62.png') },
  { n: 'Shopify', l: window.mwAsset('assets/legacy/external/shopify-logo-white-770a3968042e.png') },
  { n: 'Clickbank', l: window.mwAsset('assets/legacy/external/clickbank-logo-white-a0436bc5053e.png') },
  { n: 'AdWorld', l: window.mwAsset('assets/legacy/external/adworld-logo-white-325e5495a7e9.png') },
  { n: 'TalentGarden', l: window.mwAsset('assets/legacy/external/talentgarden-logo-white-875fc97aa81b.png') },
];

function CompaniesBar() {
  return (
    <Section dark={false} grid={false} pad="100px 56px" style={{
      background: `linear-gradient(180deg, #EBF1FF 0%, #F4F6FF 100%)`,
      color: T.ink,
      borderTop: '1px solid rgba(0,0,0,0.05)',
    }}>
      <div style={{ marginBottom: 48 }}>
        <Eyebrow accent={T.blue}>// Le aziende dei marketers</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end' }}>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 800,
            fontSize: 'clamp(34px, 4.2vw, 60px)',
            color: T.ink, lineHeight: 1.0, margin: 0,
            letterSpacing: '-0.035em', maxWidth: 820, textWrap: 'balance',
          }}>
            I professionisti di queste aziende sono stati al <Italic color={T.blue}>Marketers World.</Italic>
          </h2>
          <p style={{ fontSize: 15, color: T.body, lineHeight: 1.65, margin: '0 0 18px', maxWidth: 420 }}>
            Brand globali, scale-up italiane, agenzie e media. Ogni anno mandano i loro team a Rimini per assorbire metodo, strategia e nuove competenze.
          </p>
        </div>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 1,
        background: 'rgba(0,0,0,0.08)',
        border: '1px solid rgba(0,0,0,0.08)', borderRadius: 12, overflow: 'hidden',
        boxShadow: '0 8px 32px rgba(23,70,245,0.08)',
      }}>
        {COMPANIES.map((c, i) => (
          <div key={i} style={{
            background: T.ink, padding: '24px 16px', minHeight: 110,
            display: 'grid', placeItems: 'center',
            transition: 'background 0.3s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = T.ink2; }}
            onMouseLeave={e => { e.currentTarget.style.background = T.ink; }}
            title={c.n}
          >
            <img src={c.l} alt={c.n} loading="lazy"
              style={{
                maxWidth: '90%', maxHeight: 40, objectFit: 'contain',
                opacity: 0.75, filter: 'brightness(0) invert(1)',
                transition: 'opacity 0.3s',
              }}
              onMouseEnter={e => { e.currentTarget.style.opacity = '1'; }}
              onMouseLeave={e => { e.currentTarget.style.opacity = '0.75'; }}
            />
          </div>
        ))}
      </div>
    </Section>
  );
}

// =============== Manifesto / I'M REBEL ===============
function Manifesto() {
  return (
    <section style={{
      position: 'relative', padding: '140px 56px',
      background: T.ink, overflow: 'hidden',
      borderTop: '1px solid rgba(255,255,255,0.05)',
      borderBottom: '1px solid rgba(255,255,255,0.05)',
    }}>
      {/* Background photo with slow ken-burns motion */}
      <div className="gw-drift" style={{
        position: 'absolute', inset: '-8%',
        backgroundImage: `url(${(window.MW_PHOTOS || [])[20] || ''})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.32, filter: 'saturate(1.1) brightness(0.9)',
        animationDuration: '40s',
      }}/>
      {/* Color wash sliding */}
      <div className="bg-pan-slow" style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(115deg, rgba(8,13,26,0.85) 0%, rgba(26,40,96,0.75) 30%, rgba(75,107,251,0.45) 55%, rgba(124,91,255,0.55) 80%, rgba(8,13,26,0.9) 100%)`,
        mixBlendMode: 'normal',
      }}/>
      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at center, transparent 30%, rgba(8,13,26,0.85) 100%)`,
        pointerEvents: 'none',
      }}/>
      {/* Soft animated glows */}
      <div className="gw-drift2" style={{
        position: 'absolute', top: '10%', right: '-10%', width: '50%', height: '60%',
        background: `radial-gradient(ellipse, ${T.blueLight}33, transparent 60%)`,
        filter: 'blur(110px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift" style={{
        position: 'absolute', bottom: '0%', left: '-10%', width: '60%', height: '70%',
        background: `radial-gradient(ellipse, ${T.violetDeep}44, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none', animationDelay: '-9s',
      }}/>
      {/* Grid */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 80%)',
      }}/>

      <div style={{
        position: 'relative', maxWidth: 1240, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center',
      }}>
        {/* Watermark text */}
        <div style={{ position: 'relative' }}>
          <Eyebrow>// Manifesto</Eyebrow>
          <div style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(64px, 8vw, 116px)',
            lineHeight: 0.9, letterSpacing: '-0.03em', color: '#fff',
            textShadow: '0 4px 24px rgba(0,0,0,0.4)',
          }}>
            non solo<br/>
            <span style={{ color: 'rgba(255,255,255,0.30)' }}>ispirazione.</span>
          </div>
          <div style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(64px, 8vw, 116px)',
            lineHeight: 0.9, letterSpacing: '-0.03em', marginTop: 14,
            textShadow: '0 4px 24px rgba(0,0,0,0.4)',
          }}>
            <span style={{ color: 'rgba(255,255,255,0.65)' }}>ottieni un</span><br/>
            <em style={{
              fontStyle: 'italic',
              background: `linear-gradient(110deg, ${T.blueLight} 0%, #fff 50%, ${T.violet} 100%)`,
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>metodo.</em>
          </div>

          {/* I'M REBEL badge */}
          <div style={{
            marginTop: 44, display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '12px 22px', borderRadius: 40,
            background: T.blueVivid, color: '#fff',
            fontFamily: T.mono, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
            boxShadow: `0 0 36px ${T.blue}77, 0 8px 32px rgba(23,70,245,0.4)`,
            fontWeight: 600,
          }}>
            <span style={{ width: 8, height: 8, background: '#fff', borderRadius: '50%', animation: 'pulse 2s ease infinite' }}/>
            I'm Rebel
          </div>
        </div>

        {/* Right column copy */}
        <div>
          <div style={{
            fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: T.blueLight, marginBottom: 18,
          }}>
            Il Marketers World unisce menti brillanti, contenuti rivoluzionari e un networking senza eguali.
          </div>
          <h3 style={{
            fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(32px, 3.6vw, 52px)',
            lineHeight: 1.1, letterSpacing: '-0.02em', color: '#fff',
            margin: '0 0 32px', textWrap: 'balance',
            textShadow: '0 2px 20px rgba(0,0,0,0.4)',
          }}>
            I tuoi competitor ci saranno tutti… <Italic>e tu?</Italic>
          </h3>

          <div style={{ fontSize: 17, color: 'rgba(255,255,255,0.82)', lineHeight: 1.7, display: 'flex', flexDirection: 'column', gap: 18 }}>
            <p style={{ margin: 0 }}>
              Da sempre giriamo le conferenze di tutto il mondo per organizzare l'evento perfetto.
              Al Marketers World non troverai solamente talk motivazionali, tantomeno discorsi
              noiosi dove ogni relatore cerca di venderti qualcosa.
              <strong style={{ color: '#fff', fontWeight: 500 }}> Al Marketers World troverai ispirazione, formazione e anche divertimento.</strong>
            </p>
            <p style={{ margin: 0 }}>
              La nostra missione è offrirti competenze spendibili nel mercato e darti una
              visione chiara di ciò che serve oggi per emergere nel mercato di domani.
              Migliaia di persone hanno già il biglietto… che fai, vieni?
            </p>
            <p style={{
              margin: '8px 0 0', color: '#fff', fontStyle: 'italic', fontFamily: T.serif, fontSize: 22,
              borderLeft: `3px solid ${T.blueLight}`, paddingLeft: 18, lineHeight: 1.35,
            }}>
              Uscendo dal nostro evento avrai una chiara idea di cosa fare e come farlo.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== Argomenti trattati ===============
const TOPICS = [
  { key: 'branding', name: 'Branding', body: 'Ottieni le strategie che utilizziamo per costruire brand e personal brand di successo. Scopri le migliori tecniche per posizionare in maniera forte ed autorevole il tuo brand sul mercato.', icon: 'M12 2v20M2 12h20' },
  { key: 'advertising', name: 'Advertising', body: 'Un conto è avere un\'idea o un prodotto. Un conto è saper costruire un pubblico disposto ad acquistare i tuoi prodotti e i tuoi servizi. Il mondo dell\'advertising sta cambiando, durante il Marketers World ti spiegheremo cosa funziona oggi.', icon: 'M3 11l18-8v18l-18-8 8-2-8-0z' },
  { key: 'social', name: 'Social Media Marketing', body: 'Ottieni le migliori strategie da adottare sui tuoi canali per accelerare la tua crescita, creare contenuti ad alto impatto e migliorare il tuo engagement.', icon: 'M17 11l-3-3-7 7-2-2-4 4M17 11h4v-4' },
  { key: 'content', name: 'Content Marketing', body: 'La fuori è pieno di creators che spendono ore sul web ma che non riescono a crescere. Durante l\'evento ti racconteremo cosa abbiamo scoperto lavorando con celebrity e grandi creatori di contenuti.', icon: 'M4 6h16M4 12h16M4 18h10' },
  { key: 'business', name: 'Business', body: 'Hai un prodotto e sai fare marketing. Bene, come puoi scalare il tuo business? Condivideremo con te lezioni di delega, leadership e scalabilità che abbiamo imparato negli ultimi 24 mesi costruendo diverse aziende.', icon: 'M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6' },
  { key: 'monetizzazione', name: 'Monetizzazione', body: 'Un conto è avere un pubblico, un conto invece è saper monetizzare intelligentemente la propria audience. Scopri le migliori strategie per guadagnare dai tuoi contenuti.', icon: 'M12 2v20M16 6H9.5a3.5 3.5 0 000 7H14a3.5 3.5 0 010 7H7' },
  { key: 'vision', name: 'Vision e Chiarezza', body: 'Ci sono infinite cose che puoi fare. Come comprendere cosa è realmente importante? Durante il Marketers World ti offriremo una vision chiara e definita degli step che devi intraprendere per essere competitivo sul mercato.', icon: 'M12 4l8 8-8 8-8-8 8-8z' },
  { key: 'growth', name: 'Growth Hacking', body: 'Negli ultimi anni abbiamo fatto centinaia di A/B test ed automazioni per conto di innumerevoli clienti. Durante i tre giorni di Marketers World scoprirai le metodologie più potenti per ottimizzare le tue conversioni e scalare il tuo Business.', icon: 'M3 17l6-6 4 4 8-8M14 7h7v7' },
];

function Argomenti() {
  const [active, setActive] = useS2(0);
  return (
    <section id="argomenti" style={{
      position: 'relative',
      padding: '120px 56px',
      background: `linear-gradient(135deg, ${T.ink} 0%, #1A1655 35%, #3A1B7A 65%, #4A1860 100%)`,
      color: '#fff',
      overflow: 'hidden',
    }}>
      {/* Animated panning color gradient — FULL-WIDTH */}
      <div className="bg-pan-slow" style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(115deg, ${T.blue}88 0%, ${T.electric}66 25%, ${T.violetDeep}99 50%, #5A1D9E 75%, ${T.fuchsiaDeep}66 100%)`,
        opacity: 0.55, pointerEvents: 'none',
        animationDuration: '18s',
      }}/>
      {/* Color washes that drift */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-10%', left: '-10%', width: '60%', height: '70%',
        background: `radial-gradient(ellipse, ${T.electric}77, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', top: '10%', right: '-10%', width: '55%', height: '70%',
        background: `radial-gradient(ellipse, ${T.violetDeep}88, transparent 60%)`,
        filter: 'blur(130px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift" style={{
        position: 'absolute', bottom: '-20%', left: '30%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, ${T.fuchsiaDeep}55, transparent 60%)`,
        filter: 'blur(130px)', pointerEvents: 'none', animationDelay: '-8s',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 48 }}>
        <div>
          <Eyebrow accent={T.violet}>// 08 — Track tematici</Eyebrow>
          <H2 max={760}>
            Argomenti trattati <Italic color={T.violet}>all'evento.</Italic>
          </H2>
        </div>
        <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.75)', lineHeight: 1.6, margin: '0 0 16px' }}>
          Posiziona il tuo brand. Costruisci un business digitale. Scala i tuoi profitti.
          Impara a vedere ciò che gli altri non vedono per fare ciò che gli altri non fanno.
          Acquisisci vision, competenze e strumenti per il mercato digitale del futuro.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 32 }}>
        {/* Left: tabs */}
        <div style={{
          display: 'flex', flexDirection: 'column',
          border: '1px solid rgba(255,255,255,0.10)', borderRadius: 12, overflow: 'hidden',
          background: 'rgba(8,13,26,0.4)', backdropFilter: 'blur(12px)',
        }}>
          {TOPICS.map((t, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              background: active === i ? `linear-gradient(90deg, ${T.violetDeep}44, ${T.electric}22)` : 'transparent',
              color: active === i ? '#fff' : 'rgba(255,255,255,0.65)',
              border: 'none', borderBottom: i < TOPICS.length - 1 ? '1px solid rgba(255,255,255,0.06)' : 'none',
              padding: '20px 24px', textAlign: 'left',
              display: 'flex', alignItems: 'center', gap: 16,
              transition: 'all 0.3s', fontFamily: T.sans, cursor: 'pointer',
            }}>
              <span style={{
                width: 24, fontFamily: T.mono, fontSize: 11, color: active === i ? T.violet : 'rgba(255,255,255,0.35)',
                letterSpacing: '0.1em',
              }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ fontSize: 15, fontWeight: active === i ? 600 : 500, letterSpacing: '-0.01em', flex: 1 }}>
                {t.name}
              </span>
              <span style={{ fontFamily: T.mono, fontSize: 11, color: active === i ? T.violet : 'transparent' }}>→</span>
            </button>
          ))}
        </div>

        {/* Right: detail */}
        <div style={{
          padding: 40, borderRadius: 12,
          border: '1px solid rgba(182,155,255,0.30)',
          background: `linear-gradient(135deg, rgba(124,91,255,0.18), rgba(75,107,251,0.08))`,
          backdropFilter: 'blur(16px)',
          position: 'relative', minHeight: 380,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          boxShadow: `0 0 60px rgba(124,91,255,0.20)`,
        }}>
          <div>
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke={T.violet} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d={TOPICS[active].icon}/>
            </svg>
            <div style={{
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: T.violet, marginTop: 32, marginBottom: 12,
            }}>
              // TRK_{String(active + 1).padStart(2, '0')}
            </div>
            <h3 style={{
              fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(28px, 3vw, 44px)',
              lineHeight: 1.1, color: '#fff', margin: '0 0 20px', letterSpacing: '-0.01em',
            }}>{TOPICS[active].name}</h3>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.8)', lineHeight: 1.65, margin: 0 }}>
              {TOPICS[active].body}
            </p>
          </div>

          {/* Tag chips */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 32 }}>
            {TOPICS.map((t, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                fontFamily: T.mono, fontSize: 10, letterSpacing: '0.14em',
                textTransform: 'uppercase', padding: '6px 10px',
                background: active === i ? T.violet : 'rgba(255,255,255,0.04)',
                color: active === i ? T.ink : 'rgba(255,255,255,0.65)',
                border: active === i ? 'none' : '0.5px solid rgba(255,255,255,0.14)',
                borderRadius: 40, cursor: 'pointer', transition: 'all 0.3s',
              }}>{t.name}</button>
            ))}
          </div>
        </div>
      </div>
      </div>
    </section>
  );
}

// =============== Storia (timeline animata + big numbers) ===============
// Cumulative: 800 + 1600 + 0 (2020 saltato) + 2005 + 2008 + 3000 + 4000 = 13.413
const STORIA_YEARS = [
  { y: '2018', label: 'Inizia il viaggio',                  city: 'Rimini', accent: '#6B8AFF', speakers: 12, people: '800',    raw: 800,  covid: false },
  { y: '2019', label: 'La community esplode',               city: 'Rimini', accent: '#4B6BFB', speakers: 22, people: '1.600',  raw: 1600, covid: false },
  { y: '2020', label: 'Anno saltato · COVID-19',            city: '—',      accent: '#FFB347', speakers: 0,  people: '0',      raw: 0,    covid: true  },
  { y: '2022', label: 'Marketers si estende su tutta Rimini', city: 'Rimini', accent: '#7C5BFF', speakers: 28, people: '2.005',  raw: 2005, covid: false },
  { y: '2023', label: 'Nascita dei Marketers Award',        city: 'Rimini', accent: '#B69BFF', speakers: 38, people: '2.008',  raw: 2008, covid: false },
  { y: '2024', label: 'Arriva l\'Off World',                city: 'Rimini', accent: '#2EE5A1', speakers: 48, people: '3.000',  raw: 3000, covid: false },
  { y: '2025', label: 'Nasce il Marketers Village',         city: 'Rimini', accent: '#4B6BFB', speakers: 56, people: '4.000',  raw: 4000, covid: false },
];

function Storia() {
  const [active, setActive] = useS2(STORIA_YEARS.length - 1);
  useE2(() => {
    const i = setInterval(() => setActive(p => (p + 1) % STORIA_YEARS.length), 2400);
    return () => clearInterval(i);
  }, []);
  const cur = STORIA_YEARS[active];

  // Cumulative counts up to & including the active year
  const cumulative = STORIA_YEARS.slice(0, active + 1).reduce((s, y) => s + y.raw, 0);
  const fmtK = (n) => n >= 1000 ? `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k` : String(n);

  return (
    <Section dark={true} grid={false} pad="120px 56px" style={{
      background: `linear-gradient(180deg, ${T.ink} 0%, #0A1228 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Moving accent glow tied to active year */}
      <div style={{
        position: 'absolute', top: '20%', left: '50%', width: 900, height: 600,
        transform: 'translate(-50%, 0)',
        background: `radial-gradient(ellipse, ${cur.accent}22, transparent 65%)`,
        filter: 'blur(100px)',
        transition: 'background 0.8s ease',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative' }}>
        <Eyebrow accent={cur.accent}>// La storia</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', marginBottom: 64 }}>
          <div>
            <H2 max={520}>
              Sei edizioni, una <Italic color={cur.accent}>community</Italic> che continua a crescere.
            </H2>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, margin: 0, maxWidth: 460 }}>
              Marketers World nasce nel 2018 dalla più grande community
              d'imprenditori e creativi digitali d'Italia. Da Rimini, ogni
              anno, ridefinisce cosa significa fare business online in Italia.
            </p>
            <div style={{ marginTop: 36, display: 'inline-flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em', color: cur.accent, textTransform: 'uppercase', transition: 'color 0.6s' }}>EST.</span>
              <span style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 28, color: '#fff' }}>2018</span>
              <span style={{ width: 40, height: 1, background: 'rgba(255,255,255,0.2)' }}/>
              <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>RIMINI · IT</span>
            </div>
          </div>

          {/* Big numbers */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1,
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, overflow: 'hidden',
          }}>
            {[
              { n: '6', u: '', l: 'Edizioni' },
              { n: '200', u: '+', l: 'Speaker' },
              { n: '13.4', u: 'k+', l: 'Persone' },
            ].map((s, i) => (
              <div key={i} style={{
                background: T.ink, padding: '40px 20px',
                textAlign: 'center',
              }}>
                <div style={{
                  fontFamily: T.serif, fontWeight: 900,
                  fontSize: 'clamp(40px, 5.2vw, 76px)', lineHeight: 1,
                  color: '#fff', letterSpacing: '-0.04em',
                  whiteSpace: 'nowrap',
                }}>{s.n}<span style={{ color: cur.accent, fontSize: '0.55em', transition: 'color 0.6s' }}>{s.u}</span></div>
                <div style={{
                  fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 14,
                }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Timeline */}
        <div style={{
          padding: '48px 40px 40px',
          borderRadius: 16,
          background: 'linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))',
          border: '1px solid rgba(255,255,255,0.10)',
          position: 'relative',
        }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 40, gap: 24 }}>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.2em',
              textTransform: 'uppercase', color: cur.accent, transition: 'color 0.6s',
            }}>
              · MW Timeline · 2018 — 2026
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
              <span style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>NOW</span>
              <span style={{
                fontFamily: T.serif, fontWeight: 900, fontSize: 56, lineHeight: 1, color: '#fff',
                letterSpacing: '-0.04em',
                fontVariantNumeric: 'tabular-nums',
              }}>{cur.y}</span>
              <span style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 22, color: cur.accent, transition: 'color 0.6s' }}>
                · {cur.label}
              </span>
            </div>
          </div>

          {/* Track */}
          <div style={{ position: 'relative', padding: '24px 0 8px' }}>
            {/* Base line */}
            <div style={{
              position: 'absolute', left: 0, right: 0, top: '50%',
              height: 1, background: 'rgba(255,255,255,0.10)',
            }}/>
            {/* Animated fill */}
            <div style={{
              position: 'absolute', left: 0, top: '50%',
              height: 2, marginTop: -1,
              width: `${(active / (STORIA_YEARS.length - 1)) * 100}%`,
              background: `linear-gradient(90deg, ${T.blueLight}, ${T.violet}, ${cur.accent})`,
              transition: 'width 1.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.8s',
              boxShadow: `0 0 12px ${cur.accent}66`,
            }}/>

            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: `repeat(${STORIA_YEARS.length}, 1fr)`, gap: 8 }}>
              {STORIA_YEARS.map((yr, i) => {
                const isActive = i === active;
                return (
                  <button
                    key={i}
                    onClick={() => setActive(i)}
                    style={{
                      background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
                      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
                      fontFamily: 'inherit',
                    }}
                  >
                    <div style={{
                      fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em',
                      color: isActive ? '#fff' : (i < active ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.35)'),
                      transition: 'color 0.4s',
                      fontWeight: isActive ? 600 : 500,
                    }}>
                      {yr.y}
                    </div>
                    <div style={{
                      width: isActive ? 18 : 10, height: isActive ? 18 : 10,
                      borderRadius: '50%',
                      background: yr.covid
                        ? (isActive ? yr.accent : 'rgba(255,179,71,0.35)')
                        : (isActive ? yr.accent : (i < active ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.15)')),
                      boxShadow: isActive ? `0 0 0 6px ${yr.accent}22, 0 0 24px ${yr.accent}88` : 'none',
                      transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
                      transform: isActive ? 'scale(1.1)' : 'scale(1)',
                      outline: yr.covid ? `1.5px dashed ${yr.accent}` : 'none',
                      outlineOffset: 3,
                    }}/>
                    <div style={{
                      fontSize: 11, color: isActive ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.4)',
                      transition: 'color 0.4s', fontFamily: T.sans,
                      whiteSpace: 'nowrap', maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>
                      {yr.covid ? 'salto' : yr.people}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Active card */}
          <div style={{
            marginTop: 40, padding: '24px 28px', borderRadius: 12,
            background: 'rgba(8,13,26,0.5)',
            border: `1px solid ${cur.accent}44`,
            display: 'grid', gridTemplateColumns: '1.4fr auto auto auto auto', gap: 28, alignItems: 'center',
            transition: 'border-color 0.6s',
          }}>
            <div>
              <div style={{
                fontFamily: T.mono, fontSize: 10, letterSpacing: '0.2em',
                textTransform: 'uppercase', color: cur.accent, marginBottom: 8, transition: 'color 0.6s',
              }}>// {cur.covid ? 'edizione saltata' : `edizione ${active + 1 - (active >= 2 ? 1 : 0)}`}</div>
              <div style={{
                fontFamily: T.serif, fontWeight: 800, fontSize: 24, color: '#fff',
                letterSpacing: '-0.01em', lineHeight: 1.15,
              }}>"{cur.label}"</div>
            </div>
            <div style={{ textAlign: 'center', minWidth: 86 }}>
              <div style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 32, color: '#fff', lineHeight: 1, letterSpacing: '-0.02em' }}>
                {cur.covid ? '—' : cur.speakers}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
                Speaker
              </div>
            </div>
            <div style={{ textAlign: 'center', minWidth: 96 }}>
              <div style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 32, color: '#fff', lineHeight: 1, letterSpacing: '-0.02em' }}>
                {cur.covid ? '—' : cur.people}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
                Edizione
              </div>
            </div>
            <div style={{ textAlign: 'center', minWidth: 96 }}>
              <div style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 32, color: cur.accent, lineHeight: 1, letterSpacing: '-0.02em', transition: 'color 0.6s' }}>
                {fmtK(cumulative)}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
                Totale al {cur.y}
              </div>
            </div>
            <div style={{ textAlign: 'center', minWidth: 80 }}>
              <div style={{ fontFamily: T.serif, fontWeight: 800, fontStyle: 'italic', fontSize: 24, color: cur.accent, lineHeight: 1, transition: 'color 0.6s', letterSpacing: '-0.01em' }}>
                {cur.city}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
                Location
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// =============== Programma 3 giorni ===============
const PROGRAM_DAYS = [
  {
    n: '16', day: 'Venerdì', title: 'Workshop',
    headline: 'Decine di workshop per potenziare da subito il tuo business.',
    desc: 'Il venerdì ti daremo un\'agenda dettagliata perché avrai bisogno di prenotare i workshop tematici che preferisci. Sale completamente dedicate a sessioni pratiche con esperti di settore.',
    cta: 'Vai ai workshop',
    bullets: ['Intelligenza Artificiale', 'Marketing Digitale', 'Branding', 'Copywriting', 'Video Storytelling', 'Digital Advertising'],
    speakers: [
      { n: 'Riccardo Scandellari', src: window.mwAsset('assets/legacy/external/riccardo-scandellari-1ffd3892b74b.jpg') },
      { n: 'Mick Odelli', src: window.mwAsset('assets/legacy/external/mick-odelli-d862949ac68a.jpg') },
      { n: 'Massimo Giacchino', src: window.mwAsset('assets/legacy/external/massimo-giacchino-94019a965508.png') },
      { n: 'GabrySolution', src: window.mwAsset('assets/legacy/external/gabrysolution-134669b71612.jpg') },
    ],
  },
  {
    n: '17', day: 'Sabato', title: 'Talk · Network · Awards',
    headline: 'Speech, networking, awards e il party dei Marketers.',
    desc: 'Sul palco le rockstar del digitale italiano. Fuori dal palco, la giornata più intensa della settimana — incontri, alleanze e un party che invade Rimini.',
    cta: 'Scopri il programma',
    bullets: ['Keynote principali', 'Marketers Awards', 'Networking diffuso', 'Party ufficiale', 'Marketers Lounge', 'Marketplace'],
    speakers: [
      { n: 'Paolo Borzacchiello', src: window.mwAsset('assets/legacy/external/paolo-borzachiello-e4d32c206b74.jpg') },
      { n: 'Marco Casario', src: window.mwAsset('assets/legacy/external/marco-casario-40fa52ea1bd8.jpg') },
      { n: 'Federico Marchetti', src: window.mwAsset('assets/legacy/external/marchetti-84a45ddc8221.jpg') },
      { n: 'Chiara Dosio', src: window.mwAsset('assets/legacy/external/chiara-dosio-f95b4e90324c.jpg') },
    ],
  },
  {
    n: '18', day: 'Domenica', title: 'Speech · Family',
    headline: 'Speech con le rockstar del mercato italiano e con la Marketers family.',
    desc: 'L\'ultima giornata. Storie, metodi, sistemi operativi. Ti ricorderai quando sei tornato a casa e avrai un\'idea chiara di cosa fare lunedì mattina.',
    cta: 'Scopri il programma',
    bullets: ['Closing keynote', 'Marketers Family talk', 'Q&A imprenditori', 'Certificazione CFP', 'Take-away strategici'],
    speakers: [
      { n: 'Danila De Stefano', src: window.mwAsset('assets/legacy/external/daniladestefano-536a7b6fd0f8.jpg') },
      { n: 'Marco Scioli', src: window.mwAsset('assets/legacy/external/group-198-45b23a6e75dc.jpg') },
      { n: 'Francesca Ruvolo', src: window.mwAsset('assets/legacy/external/francesca-ruvolo-ebab6640bbab.jpg') },
      { n: 'Chiara Prencipe', src: window.mwAsset('assets/legacy/external/chiara-prencipe-8a8815053562.jpg') },
    ],
  },
];

function Programma() {
  const [active, setActive] = useS2(1);
  const day = PROGRAM_DAYS[active];
  const dayAccents = [T.electric, T.violet, T.green];
  const accent = dayAccents[active];
  return (
    <section id="programma" style={{
      position: 'relative', padding: '120px 56px',
      background: `linear-gradient(160deg, ${T.ink} 0%, #0F1A4A 25%, #2B1B6E 55%, #1B3E5C 100%)`,
      color: '#fff', overflow: 'hidden',
    }}>
      {/* Full-bleed color washes */}
      <div className="bg-pan-slow" style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(115deg, ${T.electric}55 0%, ${T.violetDeep}55 35%, ${T.blue}44 65%, ${T.green}33 100%)`,
        opacity: 0.45, pointerEvents: 'none',
        animationDuration: '20s',
      }}/>
      <div className="gw-drift" style={{
        position: 'absolute', top: '-10%', left: '-10%', width: '60%', height: '70%',
        background: `radial-gradient(ellipse, ${T.electric}44, transparent 60%)`, filter: 'blur(120px)',
        pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', top: '30%', right: '-15%', width: '55%', height: '70%',
        background: `radial-gradient(ellipse, ${T.violetDeep}44, transparent 60%)`, filter: 'blur(120px)',
        pointerEvents: 'none',
      }}/>
      <div className="gw-drift" style={{
        position: 'absolute', bottom: '-20%', left: '40%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, ${T.green}22, transparent 60%)`, filter: 'blur(130px)',
        pointerEvents: 'none', animationDelay: '-7s',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'flex-end', marginBottom: 28 }}>
        <div>
          <Eyebrow accent={accent}>// Il programma · 16—18 OTT 2026</Eyebrow>
          <H2 max={680}>
            Scopri il programma delle <Italic color={accent}>3 giornate.</Italic>
          </H2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.78)', lineHeight: 1.6, margin: 0, maxWidth: 540 }}>
            Quando lascerai Rimini ti sembrerà di aver preso parte ad un lungo viaggio.
          </p>
        </div>

        {/* Day toggle + click hint */}
        <div style={{ position: 'relative' }}>
          {/* Scribble callout above */}
          <div style={{
            position: 'absolute', top: -64, right: -8,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0,
            pointerEvents: 'none',
            fontFamily: '"Caveat", "Kalam", "Comic Sans MS", cursive',
            color: accent, fontSize: 20, fontWeight: 600,
            transform: 'rotate(-4deg)', transition: 'color 0.5s',
          }}>
            <span style={{ whiteSpace: 'nowrap' }}>clicca per scoprire la giornata</span>
            <svg width="60" height="42" viewBox="0 0 60 42" style={{ marginTop: 2 }}>
              <path d="M5,5 Q 25,5 35,18 Q 42,28 50,38" stroke={accent} strokeWidth="2.5" fill="none" strokeLinecap="round" style={{ transition: 'stroke 0.5s' }}/>
              <path d="M44,32 L 52,40 L 56,30" stroke={accent} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'stroke 0.5s' }}/>
            </svg>
          </div>
          <div style={{
            display: 'flex', gap: 8, padding: 6, borderRadius: 12,
            background: 'rgba(8,13,26,0.45)', backdropFilter: 'blur(12px)',
            border: '1px solid rgba(255,255,255,0.10)',
          }}>
            {PROGRAM_DAYS.map((d, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                flex: 1, padding: '14px 18px', borderRadius: 8, border: 'none',
                background: active === i ? dayAccents[i] : 'transparent',
                color: active === i ? T.ink : 'rgba(255,255,255,0.7)',
                fontFamily: T.sans, fontWeight: 600, fontSize: 13, letterSpacing: '0.04em',
                textTransform: 'uppercase', cursor: 'pointer', transition: 'all 0.3s',
                boxShadow: active === i ? `0 0 24px ${dayAccents[i]}66` : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>
                <span style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 20, lineHeight: 1 }}>{d.n}</span>
                <span style={{ fontSize: 11 }}>{d.day}</span>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Day detail card */}
      <div style={{
        padding: 48, borderRadius: 16,
        background: 'rgba(255,255,255,0.97)',
        border: '1px solid rgba(255,255,255,0.12)',
        boxShadow: `0 8px 40px ${accent}33, 0 2px 20px rgba(0,0,0,0.25)`,
        display: 'grid', gridTemplateColumns: '320px 1fr', gap: 64, alignItems: 'flex-start',
        transition: 'box-shadow 0.5s',
        marginTop: 48,
      }}>
        {/* Big date */}
        <div>
          <div style={{
            fontFamily: T.serif, fontWeight: 900, fontSize: 220, lineHeight: 0.85,
            color: T.ink, letterSpacing: '-0.05em',
          }}>{day.n}</div>
          <div style={{
            fontFamily: T.serif, fontStyle: 'italic', fontWeight: 700,
            fontSize: 48, color: accent, marginTop: -8, letterSpacing: '-0.02em',
            transition: 'color 0.5s',
          }}>{day.day.toLowerCase()}</div>
          <div style={{
            fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: T.body, marginTop: 16,
          }}>Ottobre 2026 · Palacongressi</div>

          {/* Speaker portraits stack */}
          <div style={{ marginTop: 32 }}>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: T.body, marginBottom: 12,
            }}>· Tra i protagonisti</div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {day.speakers.slice(0, 4).map((sp, i) => (
                <div key={i} title={sp.n} style={{
                  width: 56, height: 56, borderRadius: '50%', overflow: 'hidden',
                  border: '3px solid #fff', marginLeft: i === 0 ? 0 : -14,
                  boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                  background: '#eee',
                }}>
                  <img src={sp.src} alt={sp.n} loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                </div>
              ))}
              <span style={{
                marginLeft: 12, fontFamily: T.serif, fontStyle: 'italic',
                fontSize: 15, color: T.body,
              }}>… e molti altri</span>
            </div>
          </div>
        </div>

        {/* Content */}
        <div>
          <div style={{
            fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
            color: accent, textTransform: 'uppercase', marginBottom: 16, transition: 'color 0.5s',
          }}>// {day.title}</div>
          <h3 style={{
            fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(28px, 3vw, 40px)',
            color: T.ink, lineHeight: 1.15, margin: '0 0 20px', letterSpacing: '-0.01em',
          }}>{day.headline}</h3>
          <p style={{ fontFamily: T.sans, fontSize: 16, color: T.body, lineHeight: 1.65, margin: '0 0 28px', maxWidth: 580 }}>
            {day.desc}
          </p>

          {/* Bullets */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px 32px', marginBottom: 32 }}>
            {day.bullets.map((b, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, color: T.ink, fontFamily: T.sans }}>
                <span style={{ color: accent, fontWeight: 700, transition: 'color 0.5s' }}>✓</span>
                {b}
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 12 }}>
            <PrimaryBtn href="#biglietti">{day.cta}</PrimaryBtn>
          </div>
        </div>
      </div>
      </div>
    </section>
  );
}

// =============== MW vs altri eventi ===============
function VsAltri() {
  return (
    <Section dark={true} grid={true} style={{ background: T.ink }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(64px, 9vw, 132px)', lineHeight: 0.88,
            letterSpacing: '-0.04em', color: '#fff',
          }}>
            WORLD<br/>
            <Italic>2026</Italic>
          </div>
          <Eyebrow style={{ marginTop: 28 }}>// Il Marketers World vs Gli altri eventi</Eyebrow>
        </div>

        <div>
          <h3 style={{
            fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(24px, 2.5vw, 34px)',
            lineHeight: 1.2, color: '#fff', margin: '0 0 28px', letterSpacing: '-0.01em',
          }}>
            Ecco perché non ti sveleremo <Italic>mai tutto il programma.</Italic>
          </h3>
          <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p style={{ margin: 0 }}>
              La maggior parte degli eventi di settore ti promette un'agenda piena. E te la mostra anche,
              giorno per giorno, ora per ora. Così tu la studi, ti esalti, ti convinci che stavolta tornerai
              a casa arricchito. Ma poi arrivi lì… e ti senti costretto a scegliere. <em>"Questo mi interessa,
              questo forse, per questo non ho tempo"</em>.
            </p>
            <p style={{ margin: 0 }}>
              Il Marketers World nasce al contrario, perché per almeno una volta all'anno tu possa concederti
              il lusso di non scegliere. Ogni speech sul palco, ogni momento fuori dal palco, ogni singola parola
              che sentirai, sarà stata scelta da noi per portarti — un passo alla volta — nel cuore di
              un'esperienza capace di trasformarti.
            </p>
            <p style={{ margin: 0 }}>
              Il venerdì ti daremo un'agenda dettagliata perché avrai bisogno di prenotare i workshop tematici
              che preferisci. Ma il sabato e la domenica? Lasciati trasportare, non chiederti chi ci sia dopo
              o quando arriverà quello speaker.
              <strong style={{ color: T.blueLight, fontWeight: 500 }}> Certi viaggi non si vivono con il navigatore acceso. Questo è uno di quelli.</strong>
            </p>
          </div>
        </div>
      </div>
    </Section>
  );
}

// =============== Dove e Quando — Palacongressi Rimini ===============
function DoveEQuando() {
  return (
    <section style={{
      position: 'relative',
      padding: '120px 56px',
      background: `linear-gradient(180deg, ${T.ink} 0%, ${T.ink2} 100%)`,
      color: '#fff',
      overflow: 'hidden',
    }}>
      {/* Full-row grid pattern */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
      }}/>
      {/* Subtle blue wash */}
      <div style={{
        position: 'absolute', top: '10%', left: '50%', transform: 'translateX(-50%)',
        width: '70%', height: '60%',
        background: `radial-gradient(ellipse, ${T.blueMedium}88, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
      {/* Big title above the card */}
      <div style={{ marginBottom: 48 }}>
        <Eyebrow accent={T.blueLight}>// Dove · Come · Quando</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end' }}>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(48px, 6vw, 88px)',
            lineHeight: 0.92, letterSpacing: '-0.03em',
            color: '#fff', margin: 0, textWrap: 'balance',
          }}>
            Dove, come e <Italic>quando.</Italic>
          </h2>
          <p style={{
            fontFamily: T.sans, fontSize: 16, color: 'rgba(255,255,255,0.65)',
            lineHeight: 1.6, margin: '0 0 18px', maxWidth: 420,
          }}>
            Tre giorni a Rimini, dentro al Palacongressi più grande d'Italia.
            Tutto quello che ti serve per organizzare il viaggio.
          </p>
        </div>
      </div>

      <div style={{
        position: 'relative', borderRadius: 16, overflow: 'hidden',
        border: '1px solid rgba(255,255,255,0.10)',
        background: T.ink,
      }}>
        {/* Top: image area */}
        <div style={{
          position: 'relative', height: 480, overflow: 'hidden',
        }}>
          <img src={window.mwAsset('assets/legacy/external/mw24-palacongressi-min-0c0982bd0ac1.jpg')}
            alt="Palacongressi Rimini"
            style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.6) saturate(0.85)' }}/>

          {/* Overlay grid */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage:
              'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),' +
              'linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
            backgroundSize: '48px 48px',
          }}/>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, transparent 0%, rgba(8,13,26,0.95) 100%)',
          }}/>

          {/* HUD */}
          <div style={{
            position: 'absolute', top: 16, left: 24, right: 24,
            display: 'flex', justifyContent: 'space-between',
            fontFamily: T.mono, fontSize: 10, color: T.blueLight, letterSpacing: '0.18em',
          }}>
            <span>┌── LOC: 44.0586°N, 12.5694°E ─────</span>
            <span>──── PALACONGRESSI · 9.000 SEATS ──┐</span>
          </div>

          {/* Center — clear, readable date */}
          <div style={{
            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
            textAlign: 'center', width: '90%', maxWidth: 1000,
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 18,
              fontFamily: T.mono, fontSize: 12, letterSpacing: '0.22em',
              textTransform: 'uppercase', color: T.blueLight,
              padding: '10px 22px', borderRadius: 40,
              background: 'rgba(8,13,26,0.55)', backdropFilter: 'blur(10px)',
              border: '1px solid rgba(107,138,255,0.30)',
              marginBottom: 28,
            }}>
              <span>● MW · Edizione 2026</span>
              <span style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.25)' }}/>
              <span>Save the date</span>
            </div>
            <div style={{
              display: 'flex', justifyContent: 'center', alignItems: 'baseline',
              gap: 'clamp(16px, 2vw, 28px)',
              fontFamily: T.serif, fontWeight: 900,
              fontSize: 'clamp(80px, 12vw, 200px)', lineHeight: 0.85,
              letterSpacing: '-0.04em', color: '#fff',
            }}>
              <span>16</span>
              <span style={{ color: T.blueLight, fontStyle: 'italic', fontWeight: 700 }}>·</span>
              <span>17</span>
              <span style={{ color: T.blueLight, fontStyle: 'italic', fontWeight: 700 }}>·</span>
              <span>18</span>
            </div>
            <div style={{
              fontFamily: T.serif, fontStyle: 'italic', fontWeight: 700,
              fontSize: 'clamp(40px, 6vw, 96px)', color: T.blueLight,
              marginTop: 4, letterSpacing: '-0.02em', lineHeight: 1,
            }}>ottobre 2026</div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 14,
              fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(22px, 2.5vw, 38px)',
              color: '#fff', marginTop: 22, letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>
              <span style={{ width: 36, height: 1, background: 'rgba(255,255,255,0.4)' }}/>
              <span>Rimini</span>
              <span style={{ fontFamily: T.sans, fontWeight: 400, fontSize: '0.55em', color: 'rgba(255,255,255,0.65)', textTransform: 'none', letterSpacing: 0 }}>Palacongressi</span>
              <span style={{ width: 36, height: 1, background: 'rgba(255,255,255,0.4)' }}/>
            </div>
          </div>
        </div>

        {/* Bottom: info bar */}
        <div style={{
          padding: '28px 40px',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr) auto', gap: 32, alignItems: 'center',
          borderTop: '1px solid rgba(255,255,255,0.08)',
        }}>
          {[
            ['Sede', 'Palacongressi di Rimini'],
            ['Date', 'Ven 16 — Dom 18 ott 2026'],
            ['Apertura', 'Venerdì · ore 09:00'],
            ['Capienza', '9.000 partecipanti'],
          ].map(([l, v], i) => (
            <div key={i}>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.blueLight, marginBottom: 6 }}>
                {l}
              </div>
              <div style={{ fontSize: 15, color: '#fff', fontWeight: 500 }}>{v}</div>
            </div>
          ))}
          <GhostBtn href="https://www.riminipalacongressi.it/dove-siamo/come-arrivare">Come arrivare →</GhostBtn>
        </div>
      </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  PastSpeakers, CosaE, TrailerBlock, CompaniesBar,
  Argomenti, Storia, Programma, DoveEQuando
});