/* global React, T, useCountdown, Eyebrow, H2, Italic, PrimaryBtn, GhostBtn, Section, Photo, Reveal */
const { useState: useS1, useEffect: useE1 } = React;

// =============== Top utility bar ===============
function TopBar() {
  return (
    <div className="mw-topbar" style={{
      background: '#04081A', borderBottom: '1px solid rgba(255,255,255,0.06)',
      padding: '8px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
      color: 'rgba(255,255,255,0.55)', position: 'relative', zIndex: 101,
    }}>
      <div className="mw-topbar-left" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: T.blueLight, animation: 'pulse 2s ease infinite' }}/>
        Bentornati a casa · MW26
      </div>
      <div className="mw-topbar-right" style={{ display: 'flex', gap: 28 }}>
        <span style={{ color: T.blueLight }}>16—17—18 OTT 2026</span>
        <span>Palacongressi · Rimini</span>
        <a href="diventa-sponsor.html" style={{ color: 'rgba(255,255,255,0.55)' }}>Diventa Sponsor</a>
      </div>
    </div>
  );
}

// =============== Sticky Nav ===============
function Nav() {
  const [scrolled, setScrolled] = useS1(false);
  const [open, setOpen] = useS1(null);
  const [mobileOpen, setMobileOpen] = useS1(false);
  useE1(() => {
    const h = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  useE1(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  const links = [
    { label: 'Village', href: 'marketers-village.html' },
    { label: 'Programma', href: '#programma' },
    { label: 'Speaker', href: '#speaker' },
    { label: 'Biglietti', href: '#biglietti' },
    { label: 'Testimonianze', href: 'https://marketersworld.net/testimonianze/' },
    { label: 'FAQ', href: '#faq' },
    { label: 'Love Wall', href: 'https://marketersworld.net/testimonials/' },
  ];
  return (
    <>
    <nav className="mw-nav" style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'rgba(5,13,31,0.92)', backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.08)' : '1px solid transparent',
      padding: '14px 56px', display: 'grid',
      gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
      transition: 'all 0.3s', gap: 32,
    }}>
      {/* Logo */}
      <a href="#" className="mw-nav-logo" style={{ display: 'flex', alignItems: 'center', gap: 14, justifySelf: 'start' }}>
        <img src={window.mwAsset('assets/legacy/external/logo-marketersworld-by-wearemarketers-81902c5f2da2.png')} alt="Marketers World" style={{ height: 28, opacity: 0.95 }}/>
      </a>

      {/* Center links — desktop */}
      <div className="mw-nav-links" style={{ display: 'flex', gap: 32, justifyContent: 'center' }}>
        {links.map((l, i) => (
          <a key={i} href={l.href} onMouseEnter={() => setOpen(i)} onMouseLeave={() => setOpen(null)}
            style={{
              fontSize: 13, fontWeight: 500, color: open === i ? '#fff' : 'rgba(255,255,255,0.65)',
              transition: 'color 0.3s', position: 'relative', padding: '6px 0',
            }}>
            {l.label}
            <span style={{
              position: 'absolute', left: 0, right: 0, bottom: 0, height: 1,
              background: T.blueLight, transform: open === i ? 'scaleX(1)' : 'scaleX(0)',
              transformOrigin: 'left', transition: 'transform 0.3s',
            }}/>
          </a>
        ))}
      </div>

      {/* CTA — desktop */}
      <div className="mw-nav-cta" style={{ justifySelf: 'end' }}>
        <PrimaryBtn href="#biglietti" style={{ padding: '10px 22px', fontSize: 13 }}>
          Ottieni il tuo pass
        </PrimaryBtn>
      </div>

      {/* Hamburger — mobile only (hidden via CSS on desktop) */}
      <button
        className="mw-nav-burger"
        onClick={() => setMobileOpen(v => !v)}
        aria-label={mobileOpen ? 'Chiudi menu' : 'Apri menu'}
        aria-expanded={mobileOpen}
        style={{
          display: 'none', justifySelf: 'end', background: 'transparent',
          border: '1px solid rgba(255,255,255,0.12)', borderRadius: 8,
          width: 44, height: 44, alignItems: 'center', justifyContent: 'center',
          padding: 0, cursor: 'pointer', zIndex: 102, position: 'relative',
        }}>
        <span aria-hidden="true" style={{ display: 'inline-block', position: 'relative', width: 18, height: 12 }}>
          <span style={{ position: 'absolute', left: 0, right: 0, top: mobileOpen ? 5 : 0, height: 2, background: '#fff', borderRadius: 2, transform: mobileOpen ? 'rotate(45deg)' : 'none', transition: 'all 0.2s' }}/>
          <span style={{ position: 'absolute', left: 0, right: 0, top: 5, height: 2, background: '#fff', borderRadius: 2, opacity: mobileOpen ? 0 : 1, transition: 'all 0.2s' }}/>
          <span style={{ position: 'absolute', left: 0, right: 0, top: mobileOpen ? 5 : 10, height: 2, background: '#fff', borderRadius: 2, transform: mobileOpen ? 'rotate(-45deg)' : 'none', transition: 'all 0.2s' }}/>
        </span>
      </button>
    </nav>

    {/* Mobile drawer + backdrop — RENDERIZZATI FUORI DAL <nav>
        per evitare lo stacking context creato da backdrop-filter sul nav.
        Il drawer è position:fixed davvero relativo al viewport. */}
    {mobileOpen && (
      <div
        className="mw-nav-backdrop"
        onClick={() => setMobileOpen(false)}
        aria-hidden="true"
      />
    )}
    <div className={`mw-nav-drawer ${mobileOpen ? 'open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!mobileOpen}>
      <div className="mw-nav-drawer-inner">
        {links.map((l, i) => (
          <a key={i} href={l.href} onClick={() => setMobileOpen(false)}
            style={{
              fontSize: 18, fontWeight: 500, color: '#fff', padding: '14px 0',
              borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'block',
            }}>
            {l.label}
          </a>
        ))}
        <div style={{ marginTop: 24 }}>
          <PrimaryBtn href="#biglietti" green onClick={() => setMobileOpen(false)} style={{ width: '100%', justifyContent: 'center', display: 'flex' }}>
            Ottieni il tuo pass
          </PrimaryBtn>
        </div>
        <a href="diventa-sponsor.html" onClick={() => setMobileOpen(false)} style={{
          marginTop: 18, display: 'block', textAlign: 'center',
          fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.55)', fontFamily: T.mono,
        }}>
          Diventa Sponsor →
        </a>
      </div>
    </div>
    </>
  );
}

// =============== HERO ===============
function Hero() {
  return (
    <section id="hero" className="mw-hero" style={{
      position: 'relative', padding: '56px 56px 80px',
      background: T.ink, overflow: 'hidden',
    }}>
      {/* Multi-color radial wash: blue → violet → green */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{
          position: 'absolute', top: '-15%', left: '-10%', width: '70%', height: '90%',
          background: `radial-gradient(ellipse at center, ${T.blue}55, transparent 60%)`,
          filter: 'blur(80px)',
        }}/>
        <div style={{
          position: 'absolute', top: '10%', right: '-15%', width: '60%', height: '85%',
          background: `radial-gradient(ellipse at center, ${T.violetDeep}44, transparent 60%)`,
          filter: 'blur(90px)',
        }}/>
        <div style={{
          position: 'absolute', bottom: '-30%', left: '30%', width: '60%', height: '70%',
          background: `radial-gradient(ellipse at center, ${T.green}26, transparent 60%)`,
          filter: 'blur(100px)',
        }}/>
      </div>

      {/* Blueprint grid */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(26,32,56,0.4) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(26,32,56,0.4) 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: 1280, margin: '0 auto', width: '100%', zIndex: 1 }}>
        {/* HUD top strip */}
        <div className="mw-hero-hud" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: T.mono, fontSize: 10, color: T.blueLight, letterSpacing: '0.16em',
          opacity: 0.75, marginBottom: 36,
        }}>
          <span>┌── EDIZIONE VII · CHAPTER MW26 ──────</span>
          <span>──── 16—18 OCT 2026 · RIMINI ──┐</span>
        </div>

        {/* Two-column hero */}
        <div className="mw-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }}>
          {/* LEFT: title + CTAs */}
          <div>
            <Reveal>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 12,
                padding: '8px 18px 8px 14px', borderRadius: 40,
                border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.04)',
                backdropFilter: 'blur(8px)', fontSize: 12,
                fontFamily: T.mono, letterSpacing: '0.15em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.85)',
              }}>
                <span style={{
                  width: 8, height: 8, background: T.green, borderRadius: '50%',
                  boxShadow: `0 0 12px ${T.green}`, animation: 'pulse 2s ease infinite',
                }}/>
                Bentornati a casa · Iscrizioni aperte
              </div>
            </Reveal>

            <Reveal delay={100}>
              <h1 style={{
                fontFamily: T.serif, fontWeight: 900,
                fontSize: 'clamp(52px, 7.5vw, 124px)',
                lineHeight: 0.88, letterSpacing: '-0.03em',
                margin: '32px 0 0', color: '#fff', textWrap: 'balance',
              }}>
                Marketers<br/>
                <span style={{
                  background: `linear-gradient(110deg, ${T.blueLight} 0%, ${T.violet} 50%, ${T.green} 100%)`,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                  fontStyle: 'italic',
                }}>World</span>
                <span style={{
                  display: 'inline-block', marginLeft: 16,
                  fontFamily: T.mono, fontWeight: 500,
                  fontSize: '0.32em', letterSpacing: '0', color: T.blueLight,
                  verticalAlign: 'top', paddingTop: '0.5em',
                }}>/ MW26</span>
              </h1>
            </Reveal>

            <Reveal delay={200}>
              <p style={{
                fontFamily: T.sans, fontWeight: 300,
                fontSize: 'clamp(18px, 1.55vw, 21px)',
                color: 'rgba(255,255,255,0.72)',
                maxWidth: 560, margin: '28px 0 0', lineHeight: 1.5,
              }}>
                L'evento più grande d'Italia per accelerare il tuo business,
                intraprendere una carriera digitale o fare l'upgrade delle tue
                competenze di Marketing ed AI.
              </p>
            </Reveal>

            <Reveal delay={300}>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center', marginTop: 36 }}>
                <PrimaryBtn href="#biglietti" green>Ottieni il tuo pass MW26</PrimaryBtn>
                <GhostBtn href="#programma">Scopri il programma</GhostBtn>
              </div>

              <div style={{
                marginTop: 32, display: 'inline-flex', alignItems: 'center', gap: 14,
                padding: '10px 16px', borderRadius: 8,
                background: 'rgba(255,255,255,0.04)', border: T.borderDark,
                fontFamily: T.mono, fontSize: 11, letterSpacing: '0.12em',
                color: 'rgba(255,255,255,0.62)', textTransform: 'uppercase',
              }}>
                <span style={{ color: T.green }}>● LIVE</span>
                <span style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.2)' }}/>
                <span>16 · 17 · 18 OTT 2026</span>
                <span style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.2)' }}/>
                <span style={{ color: T.blueLight }}>Palacongressi · Rimini</span>
              </div>
            </Reveal>
          </div>

          {/* RIGHT: Video trailer with scribble */}
          <Reveal delay={250}>
            <HeroTrailer/>
          </Reveal>
        </div>

        {/* BOTTOM bar: stats only, wide */}
        <Reveal delay={400}>
          <div className="mw-hero-stats" style={{
            marginTop: 64,
            display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
            border: '1px solid rgba(255,255,255,0.10)',
            background: 'rgba(255,255,255,0.03)', backdropFilter: 'blur(12px)',
            borderRadius: 12, overflow: 'hidden',
          }}>
            {[
              { n: '20', u: 'k+', l: 'partecipanti dal 2018', c: T.blueLight },
              { n: '200', u: '+', l: 'speaker sul palco', c: T.violet },
              { n: '8', u: '', l: 'tracce tematiche', c: T.green },
              { n: '4.9', u: '/5', l: '1.000+ recensioni Trustpilot', c: T.blueLight },
              { n: '72', u: 'h', l: 'di evento · 3 giorni', c: T.violet },
            ].map((s, i, arr) => (
              <div key={i} style={{
                padding: '24px 22px',
                borderRight: i < arr.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
              }}>
                <div style={{
                  fontFamily: T.serif, fontWeight: 900, fontSize: 44, color: '#fff',
                  lineHeight: 1, letterSpacing: '-0.025em',
                }}>
                  {s.n}<span style={{ color: s.c, fontSize: 28 }}>{s.u}</span>
                </div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 10, lineHeight: 1.4 }}>
                  {s.l}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// Trailer block in hero — big video frame with play
function HeroTrailer() {
  const [playing, setPlaying] = useS1(false);
  return (
    <div className="mw-trailer-wrap" style={{ position: 'relative' }}>
      {/* Scribble callout */}
      <div className="mw-trailer-scribble" style={{
        position: 'absolute', top: -28, left: -68, zIndex: 3,
        pointerEvents: 'none',
      }}>
        <window.ScribbleArrow rotation={-12} color={T.green}>
          guarda il trailer →
        </window.ScribbleArrow>
      </div>

      {/* Video frame */}
      <div style={{
        position: 'relative', aspectRatio: '4/5', borderRadius: 18,
        background: T.card, border: '1px solid rgba(75,107,251,0.30)',
        overflow: 'hidden', cursor: 'pointer',
        boxShadow: `0 0 60px rgba(75,107,251,0.18), 0 0 0 1px rgba(46,229,161,0.10)`,
      }} onClick={() => setPlaying(true)}>
        {/* Background — Adobe MW cover photo */}
        <img
          src={window.MW.trailer}
          alt="Marketers World atmosphere"
          loading="eager"
          style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.7) saturate(1.1)' }}
          onError={e => { e.currentTarget.style.display = 'none'; }}
        />
        {/* Gradient overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, rgba(8,13,26,0.2) 0%, rgba(8,13,26,0.65) 100%), linear-gradient(135deg, ${T.blue}33, transparent 60%, ${T.violetDeep}33)`,
        }}/>

        {/* HUD */}
        <div style={{
          position: 'absolute', top: 16, left: 16, right: 16,
          display: 'flex', justifyContent: 'space-between',
          fontFamily: T.mono, fontSize: 10, 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>00:00 / 02:08</span>
        </div>

        {/* Title on video */}
        <div style={{
          position: 'absolute', bottom: 80, left: 24, right: 24,
        }}>
          <div style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: T.green, marginBottom: 8,
          }}>· Official trailer</div>
          <div style={{
            fontFamily: T.serif, fontWeight: 800, fontSize: 28, color: '#fff',
            lineHeight: 1.1, letterSpacing: '-0.01em',
          }}>
            Bentornati a <em style={{ fontStyle: 'italic', color: T.blueLight }}>casa</em>.
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', marginTop: 6 }}>
            La città dei marketers, raccontata da chi c'era.
          </div>
        </div>

        {/* PLAY button */}
        <button onClick={e => { e.stopPropagation(); setPlaying(true); }} style={{
          position: 'absolute', top: '42%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 96, height: 96, borderRadius: '50%',
          background: T.green, color: T.ink,
          border: '3px solid rgba(255,255,255,0.9)',
          cursor: 'pointer', transition: 'all 0.3s',
          display: 'grid', placeItems: 'center',
          boxShadow: `0 0 60px ${T.green}99`,
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translate(-50%,-50%) scale(1.08)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translate(-50%,-50%) scale(1)'; }}
        >
          <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>

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

      <VideoModal
        open={playing}
        onClose={() => setPlaying(false)}
        type="video"
        src="https://video.gumlet.io/69981ad857a7b7f9b0ff7333/69989c6571f7bf393a048091/download.mp4"
      />
    </div>
  );
}

function HeroCountdown() {
  const { d, h, m, s } = useCountdown();
  const cells = [['Giorni', d], ['Ore', h], ['Min', m], ['Sec', s]];
  return (
    <div style={{
      padding: 20, borderRadius: 12,
      background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.10)',
      backdropFilter: 'blur(16px)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: T.blueLight, marginBottom: 14,
      }}>
        <span>La biglietteria chiude fra</span>
        <span style={{ color: 'rgba(255,255,255,0.4)' }}>↗ live</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {cells.map(([lab, v], i) => (
          <div key={i} style={{
            padding: '14px 8px', textAlign: 'center',
            background: 'rgba(0,0,0,0.25)', borderRadius: 8,
            border: '0.5px solid rgba(75,107,251,0.18)',
          }}>
            <div style={{
              fontFamily: T.serif, fontWeight: 800, fontSize: 32,
              color: '#fff', lineHeight: 1, letterSpacing: '-0.02em',
              fontVariantNumeric: 'tabular-nums',
            }}>
              {String(v).padStart(2, '0')}
            </div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)', marginTop: 6, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              {lab}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =============== Press strip ===============
function PressStrip() {
  const press = [
    { n: 'Il Sole 24 Ore', l: window.mwAsset('assets/legacy/external/logo-24ore-white1-ed3a8b63ff9e.png') },
    { n: 'Forbes', l: window.mwAsset('assets/legacy/external/logo-forbes-white1-0a95bb97a6f3.png') },
    { n: 'Fortune', l: window.mwAsset('assets/legacy/external/logo-fortune-white1-283d23d9f965.png') },
    { n: 'Vanity Fair', l: window.mwAsset('assets/legacy/external/logo-venityfair-white1-934279bbc64d.png') },
    { n: 'Wired', l: window.mwAsset('assets/legacy/external/logo-wired-white1-a57119927d6b.png') },
  ];
  // Duplicate for seamless infinite loop
  const loop = [...press, ...press, ...press];
  return (
    <section style={{
      background: '#050d1f', padding: '48px 0',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        textAlign: 'center', marginBottom: 28,
        fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: T.green,
      }}>
        · Come visto su
      </div>
      {/* Marquee track */}
      <div style={{
        position: 'relative',
        maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      }}>
        <div style={{
          display: 'flex', gap: 96, alignItems: 'center',
          width: 'max-content',
          animation: 'tk 40s linear infinite',
        }}>
          {loop.map((p, i) => (
            <img key={i} src={p.l} alt={p.n} loading="lazy"
              style={{
                height: 56, maxWidth: 240, objectFit: 'contain',
                opacity: 0.75, filter: 'brightness(0) invert(1)',
                flexShrink: 0,
                transition: 'opacity 0.3s',
              }}
              onMouseEnter={e => { e.currentTarget.style.opacity = '1'; }}
              onMouseLeave={e => { e.currentTarget.style.opacity = '0.75'; }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== Big date + countdown (refined — image + grid) ===============
function DateBlock() {
  const { d, h, m, s } = useCountdown();
  return (
    <section style={{
      position: 'relative', padding: '0',
      background: `linear-gradient(135deg, ${T.blueMedium} 0%, ${T.blue} 50%, ${T.electric} 100%)`,
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'relative', display: 'grid',
        gridTemplateColumns: '1.1fr 1fr', alignItems: 'stretch',
        minHeight: 480,
      }}>
        {/* LEFT: typography + countdown */}
        <div style={{
          padding: '80px 56px 80px 56px',
          background: 'transparent', position: 'relative',
        }}>
          {/* Soft animated wash */}
          <div className="gw-drift" style={{
            position: 'absolute', top: '-10%', left: '-10%', width: '90%', height: '120%',
            background: `radial-gradient(ellipse, rgba(255,255,255,0.18), transparent 60%)`,
            filter: 'blur(70px)', pointerEvents: 'none',
          }}/>
          <div className="gw-drift2" style={{
            position: 'absolute', bottom: '-10%', right: '-15%', width: '70%', height: '90%',
            background: `radial-gradient(ellipse, ${T.violet}55, transparent 60%)`,
            filter: 'blur(80px)', pointerEvents: 'none',
          }}/>
          {/* Grid overlay */}
          <div style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            backgroundImage:
              'linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),' +
              'linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)',
            backgroundSize: '60px 60px',
          }}/>

          <div style={{ position: 'relative', maxWidth: 600 }}>
            <Eyebrow accent="#fff" style={{ color: '#fff' }}>// Save the date</Eyebrow>

            <h2 style={{
              fontFamily: T.serif, fontWeight: 900, lineHeight: 0.95,
              fontSize: 'clamp(48px, 6vw, 92px)', letterSpacing: '-0.02em',
              color: '#fff', margin: '0 0 8px', textWrap: 'balance',
            }}>
              16 — 17 — 18 <em style={{ fontStyle: 'italic', color: '#fff', opacity: 0.85 }}>ottobre</em>
            </h2>
            <div style={{
              fontFamily: T.mono, fontSize: 13, color: 'rgba(255,255,255,0.85)',
              letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 36,
            }}>· 2026 · Palacongressi di Rimini ·</div>

            <p className="mw-countdown-text" style={{ fontSize: 16, color: 'rgba(255,255,255,0.8)', lineHeight: 1.6, margin: '0 0 32px', maxWidth: 460 }}>
              La biglietteria chiude fra. Prenota ora prima che si chiuda.
            </p>

            {/* Compact countdown bar */}
            <div className="mw-countdown-bar" style={{
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 1, background: 'rgba(255,255,255,0.18)',
              border: '1px solid rgba(255,255,255,0.20)', borderRadius: 12, overflow: 'hidden',
              marginBottom: 32,
            }}>
              {[['Giorni', d], ['Ore', h], ['Min', m], ['Sec', s]].map(([l, v], i) => (
                <div key={i} style={{ background: 'rgba(8,13,26,0.55)', backdropFilter: 'blur(6px)', padding: '20px 12px', textAlign: 'center' }}>
                  <div style={{
                    fontFamily: T.serif, fontWeight: 900, fontSize: 'clamp(34px, 4vw, 52px)',
                    lineHeight: 1, color: '#fff', letterSpacing: '-0.02em',
                    fontVariantNumeric: 'tabular-nums',
                  }}>{String(v).padStart(2, '0')}</div>
                  <div style={{
                    fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
                    textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', marginTop: 8,
                  }}>{l}</div>
                </div>
              ))}
            </div>

            <a href="#biglietti" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: '#fff', color: T.blue,
              padding: '14px 26px', borderRadius: 8,
              fontSize: 14, fontWeight: 700, fontFamily: T.sans,
              letterSpacing: '0.01em', border: 'none',
              textDecoration: 'none', transition: 'transform 0.3s, box-shadow 0.3s',
              boxShadow: '0 8px 32px rgba(0,0,0,0.25)',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              Prendi il tuo Ticket MW26 <span>→</span>
            </a>
          </div>
        </div>

        {/* RIGHT: cinematic photo */}
        <div style={{
          position: 'relative', overflow: 'hidden',
          background: T.ink2,
        }}>
          <img
            src={window.MW.dateBlock}
            alt="Marketers World"
            style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.85) saturate(1.1)' }}
            onError={e => { e.currentTarget.style.display = 'none'; }}
          />
          {/* gradient overlay tinting toward blue */}
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(135deg, ${T.blue}33 0%, transparent 40%, ${T.violetDeep}33 80%), linear-gradient(0deg, rgba(23,70,245,0.4) 0%, transparent 50%)`,
          }}/>
          {/* grid overlay */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage:
              'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),' +
              'linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
            backgroundSize: '48px 48px',
          }}/>
          {/* HUD coordinates */}
          <div style={{
            position: 'absolute', top: 20, left: 20, right: 20,
            display: 'flex', justifyContent: 'space-between',
            fontFamily: T.mono, fontSize: 10, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.14em',
          }}>
            <span>┌── ARCHIVIO MW</span>
            <span>44.0586°N · 12.5694°E ──┐</span>
          </div>
          {/* Bottom badge */}
          <div style={{
            position: 'absolute', bottom: 24, left: 24, right: 24,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 16,
          }}>
            <div style={{
              padding: '8px 14px', borderRadius: 40,
              background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)',
              border: '1px solid rgba(255,255,255,0.25)',
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', color: '#fff',
              textTransform: 'uppercase',
            }}>
              <span style={{ color: '#fff', marginRight: 8 }}>●</span> MW Edizione 2025
            </div>
            <div style={{
              fontFamily: T.serif, fontStyle: 'italic', fontSize: 22, color: '#fff', textShadow: '0 2px 12px rgba(0,0,0,0.6)',
            }}>la città dei marketers.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== Marketers Village ===============
function Village() {
  return (
    <section style={{
      position: 'relative',
      background: `linear-gradient(180deg, #F5EAD3 0%, #F8E6C4 50%, #F0DCAE 100%)`,
      color: '#2A2418',
      padding: '120px 56px 200px',
      overflow: 'hidden',
    }}>
      {/* Sun glow */}
      <div style={{
        position: 'absolute', top: '-10%', right: '8%', width: 600, height: 600,
        background: `radial-gradient(circle, rgba(255,210,120,0.55) 0%, transparent 60%)`,
        filter: 'blur(60px)', pointerEvents: 'none',
      }}/>

      {/* Sea ripple line — full bleed */}
      <svg viewBox="0 0 1440 60" preserveAspectRatio="none"
        style={{ position: 'absolute', left: 0, right: 0, bottom: 180, width: '100%', height: 60, pointerEvents: 'none', opacity: 0.35, zIndex: 1 }}>
        <path d="M0,30 Q120,10 240,30 T480,30 T720,30 T960,30 T1200,30 T1440,30" stroke="#3A88B8" strokeWidth="2" fill="none"/>
        <path d="M0,42 Q140,22 280,42 T560,42 T840,42 T1120,42 T1440,42" stroke="#5BA4D0" strokeWidth="1.5" fill="none" opacity="0.6"/>
      </svg>

      {/* Dune SVG — full bleed across the page */}
      <svg viewBox="0 0 1440 280" preserveAspectRatio="none"
        style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height: 220,
          pointerEvents: 'none', zIndex: 1, display: 'block',
        }}>
        <defs>
          <linearGradient id="duneA" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#E8C893" stopOpacity="0.85"/>
            <stop offset="1" stopColor="#D4A85F" stopOpacity="0.9"/>
          </linearGradient>
          <linearGradient id="duneB" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#D9B574" stopOpacity="0.9"/>
            <stop offset="1" stopColor="#B8893F"/>
          </linearGradient>
        </defs>
        <path d="M0,140 C200,80 380,120 560,100 C740,80 920,160 1100,140 C1280,120 1380,160 1440,150 L1440,280 L0,280 Z" fill="url(#duneA)"/>
        <path d="M0,200 C220,150 360,190 540,180 C720,170 900,220 1080,210 C1260,200 1380,230 1440,220 L1440,280 L0,280 Z" fill="url(#duneB)"/>
      </svg>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow accent="#B8893F">Marketers Village 2026 · Date TBA</Eyebrow>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(48px, 6vw, 96px)', lineHeight: 0.92,
            margin: 0, letterSpacing: '-0.02em', color: '#2A2418', textWrap: 'balance',
          }}>
            Marketers<br/>
            <span style={{
              color: '#C0691F',
              fontStyle: 'italic',
            }}>Village.</span>
          </h2>
          <p style={{
            fontFamily: T.serif, fontWeight: 700, fontSize: 22, marginTop: 24,
            color: '#2A2418', maxWidth: 480, lineHeight: 1.35,
          }}>
            Una settimana di vita condivisa con le menti più brillanti del mercato digitale italiano.
          </p>
          <p style={{
            fontFamily: T.sans, fontWeight: 400, fontSize: 15,
            color: '#5A4A2E', maxWidth: 480, lineHeight: 1.6, marginTop: 16,
          }}>
            Un villaggio esclusivo sul mare, una formula di co-living mai vista prima.
            Unisciti a migliaia di imprenditori e creativi e vivi un'esperienza straordinaria.
          </p>
          <p style={{
            fontFamily: T.sans, fontSize: 14, color: '#2A2418',
            marginTop: 16, maxWidth: 480, lineHeight: 1.6,
          }}>
            Posti limitati fino ad esaurimento scorte, <strong style={{ color: '#C0691F', fontWeight: 600 }}>
            riservato a chi possiede il ticket del Marketers World.</strong>
          </p>
          <div style={{ marginTop: 36, display: 'flex', gap: 12 }}>
            <a href="marketers-village.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: '#2A2418', color: '#F5EAD3',
              padding: '14px 26px', borderRadius: 8,
              fontSize: 14, fontWeight: 600, fontFamily: T.sans,
              textDecoration: 'none', transition: 'transform 0.3s',
              boxShadow: '0 8px 32px rgba(42,36,24,0.25)',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              Pianifica la tua avventura <span>→</span>
            </a>
          </div>
        </div>

        {/* Photo collage */}
        <div style={{
          position: 'relative', aspectRatio: '4/5',
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gridTemplateRows: '1.2fr 1fr',
          gap: 12,
        }}>
          {/* Big photo — REAL village photo from marketersworld.net */}
          <div style={{
            gridRow: '1 / 3', gridColumn: '1 / 2',
            borderRadius: 16, overflow: 'hidden',
            border: '1px solid rgba(184,137,63,0.30)',
            position: 'relative',
            background: '#2A2418',
            boxShadow: '0 20px 60px rgba(42,36,24,0.18)',
          }}>
            <img
              src={window.mwAsset('assets/legacy/external/mkw-village-img-04-1024x683-0a575a07271e.jpg')}
              alt="Marketers Village · co-living sul mare"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              onError={e => {
                e.currentTarget.src = window.mwAsset('assets/legacy/external/village-img-01-1024x683-fe9ca03759e3.jpg');
              }}
            />
            <div style={{
              position: 'absolute', inset: 0,
              background: `linear-gradient(180deg, transparent 30%, rgba(42,36,24,0.55) 100%)`,
            }}/>
            <div style={{
              position: 'absolute', bottom: 16, left: 16, fontFamily: T.mono,
              fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: '#F5EAD3', padding: '6px 12px',
              background: 'rgba(42,36,24,0.7)', backdropFilter: 'blur(8px)',
              borderRadius: 4,
            }}>
              <span style={{ marginRight: 6 }}>●</span> Sul mare · Co-living
            </div>
            <image-slot id="village-photo-main" placeholder="Drop village photo" shape="rect"
              style={{ position: 'absolute', inset: 0, opacity: 0.001 }}/>
          </div>

          {/* Top right — Pool photo, overlapping the main vertical photo */}
          <div style={{
            gridRow: '1 / 2', gridColumn: '2 / 3',
            position: 'relative',
            display: 'grid', placeItems: 'center',
          }}>
            <div style={{
              position: 'relative',
              width: 'calc(100% + 80px)',
              marginLeft: '-80px',
              aspectRatio: '4/3',
              borderRadius: 14, overflow: 'hidden',
              border: '4px solid #FFFDF5',
              boxShadow: '0 16px 40px rgba(42,36,24,0.28), 0 4px 12px rgba(184,137,63,0.25)',
              transform: 'rotate(2deg)',
              background: '#2A2418',
              zIndex: 2,
            }}>
              <img src={window.mwAsset('assets/village-pool.jpg', 'assets/village-pool.jpg')} alt="Marketers Village · piscina"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              {/* HUD label */}
              <div style={{
                position: 'absolute', top: 10, left: 10,
                fontFamily: T.mono, fontSize: 9, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: '#FFFDF5',
                padding: '4px 9px',
                background: 'rgba(42,36,24,0.55)', backdropFilter: 'blur(6px)',
                borderRadius: 3,
              }}>
                <span style={{ marginRight: 5, color: '#FFE3A8' }}>●</span> Pool · Sul mare
              </div>
            </div>
          </div>

          {/* Bottom right — Ticket illustration */}
          <div style={{
            gridRow: '2 / 3', gridColumn: '2 / 3',
            position: 'relative',
            display: 'grid', placeItems: 'center',
          }}>
            <div style={{
              position: 'relative',
              width: '100%', height: '88%',
              background: '#FFFDF5',
              borderRadius: 10,
              boxShadow: '0 14px 30px rgba(184,137,63,0.30), 0 0 0 1.5px #B8893F',
              transform: 'rotate(-3deg)',
              display: 'grid', gridTemplateColumns: '34% 1fr',
              overflow: 'visible',
            }}>
              {/* Notches */}
              <span aria-hidden style={{
                position: 'absolute', left: '34%', top: -10, transform: 'translateX(-50%)',
                width: 16, height: 16, background: '#F5EAD3', borderRadius: '50%',
                border: '1.5px solid #B8893F',
              }}/>
              <span aria-hidden style={{
                position: 'absolute', left: '34%', bottom: -10, transform: 'translateX(-50%)',
                width: 16, height: 16, background: '#F0DCAE', borderRadius: '50%',
                border: '1.5px solid #B8893F',
              }}/>
              {/* Dashed line between stub & main */}
              <span aria-hidden style={{
                position: 'absolute', left: '34%', top: 8, bottom: 8,
                borderLeft: '1.5px dashed #B8893F',
              }}/>

              {/* Stub (left) */}
              <div style={{
                padding: '14px 10px',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                alignItems: 'center', textAlign: 'center',
              }}>
                <div style={{
                  fontFamily: T.mono, fontSize: 8, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: '#B8893F',
                }}>MW · 26</div>
                <div style={{
                  fontFamily: T.serif, fontWeight: 900, fontSize: 22, color: '#2A2418',
                  lineHeight: 0.95, letterSpacing: '-0.02em',
                  writingMode: 'vertical-rl', transform: 'rotate(180deg)',
                }}>VILLAGE</div>
                <div style={{
                  fontFamily: T.mono, fontSize: 8, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: '#B8893F',
                }}>· PASS</div>
              </div>

              {/* Main */}
              <div style={{
                padding: '14px 16px 14px 18px',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              }}>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: T.mono, fontSize: 9, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: '#B8893F',
                }}>
                  <span>· ADMIT ONE</span>
                  <span>N°2026</span>
                </div>
                <div>
                  <div style={{
                    fontFamily: T.mono, fontSize: 9, letterSpacing: '0.14em',
                    textTransform: 'uppercase', color: '#5A4A2E', marginBottom: 4,
                  }}>Solo per chi ha</div>
                  <div style={{
                    fontFamily: T.serif, fontWeight: 800, fontSize: 18, color: '#2A2418',
                    lineHeight: 1.0, letterSpacing: '-0.01em',
                  }}>il ticket<br/>
                    <span style={{ color: '#C0691F', fontStyle: 'italic' }}>Marketers&nbsp;World</span>
                  </div>
                </div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                }}>
                  <span style={{
                    fontFamily: T.mono, fontSize: 8, letterSpacing: '0.14em',
                    textTransform: 'uppercase', color: '#5A4A2E',
                  }}>RIMINI · OCT 2026</span>
                  {/* barcode */}
                  <span style={{ display: 'flex', alignItems: 'flex-end', gap: 1.5, height: 18 }}>
                    {[5, 3, 6, 2, 5, 4, 7, 3, 5, 6, 3, 5].map((h, j) => (
                      <span key={j} style={{ width: 1.5, height: `${h * 2.5}px`, background: '#2A2418' }}/>
                    ))}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== Speakers 2025 ===============
const SPEAKERS_2025 = [
  { name: 'Paolo Borzacchiello', role: 'Esperto di comunicazione e linguaggio persuasivo con oltre quindici anni di esperienza. I suoi libri sono riferimenti fondamentali nel panorama italiano della comunicazione.', src: window.mwAsset('assets/legacy/external/paolo-borzachiello-e4d32c206b74.jpg') },
  { name: 'Danila De Stefano', role: 'Founder e CEO Unobravo', src: window.mwAsset('assets/legacy/external/daniladestefano-536a7b6fd0f8.jpg') },
  { name: 'Federico Marchetti', role: 'Imprenditore tecnologico e pioniere della moda sostenibile, fondatore del Gruppo YOOX NET-A-PORTER.', src: window.mwAsset('assets/legacy/external/marchetti-84a45ddc8221.jpg') },
  { name: 'Marco Casario', role: 'Imprenditore e creator specializzato in finanza e investimenti. Ha trasformato la sua passione per macroeconomia e geopolitica in un canale YouTube seguito da centinaia di migliaia di italiani.', src: window.mwAsset('assets/legacy/external/marco-casario-40fa52ea1bd8.jpg') },
  { name: 'Marco Scioli', role: 'Founder di Starting Finance, uno dei media finanziari più seguiti. Ha co-fondato una startup che è diventata punto di riferimento costruendo un brand riconoscibile nel panorama mediatico italiano.', src: window.mwAsset('assets/legacy/external/group-198-45b23a6e75dc.jpg') },
  { name: 'Riccardo Scandellari', role: 'Divulgatore, formatore, consulente in ambito branding e comunicazione.', src: window.mwAsset('assets/legacy/external/riccardo-scandellari-1ffd3892b74b.jpg') },
  { name: 'Mick Odelli', role: 'Designer di esperienze umane, divulgatore.', src: window.mwAsset('assets/legacy/external/mick-odelli-d862949ac68a.jpg') },
  { name: 'Massimo Giacchino', role: 'Digital Strategy, autore Design Marketing.', src: window.mwAsset('assets/legacy/external/massimo-giacchino-94019a965508.png') },
  { name: 'Francesca Ruvolo', role: 'Influencer, Creator e nomade digitale.', src: window.mwAsset('assets/legacy/external/francesca-ruvolo-ebab6640bbab.jpg') },
  { name: 'Chiara Prencipe', role: 'Content creator specializzata in ASMR, autrice.', src: window.mwAsset('assets/legacy/external/chiara-prencipe-8a8815053562.jpg') },
  { name: 'GabrySolution', role: 'Ingegnere informatico, creator e imprenditore, uno dei massimi esperti di AI applicata al business e alla comunicazione. Ha creato una community da oltre 160.000 follower partendo da zero.', src: window.mwAsset('assets/legacy/external/gabrysolution-134669b71612.jpg') },
  { name: 'Chiara Dosio', role: 'Consulente e content creator. Ha scalato il suo business oltre il milione di euro senza ads, solo con contenuti organici. Insegna a freelance e professionisti come trovare clienti e crescere online.', src: window.mwAsset('assets/legacy/external/chiara-dosio-f95b4e90324c.jpg') },
];

function Speakers2025() {
  const [hovered, setHovered] = useS1(null);
  return (
    <Section id="speaker" dark={true} grid={false} style={{
      background: T.ink, position: 'relative', overflow: 'hidden',
    }}>
      {/* Subtle moving gradient washes */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '5%', left: '-15%', width: '70%', height: '70%',
        background: `radial-gradient(ellipse, ${T.electric}33, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '0%', right: '-15%', width: '70%', height: '70%',
        background: `radial-gradient(ellipse, ${T.violetDeep}33, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift" style={{
        position: 'absolute', top: '40%', left: '30%', width: '50%', height: '50%',
        background: `radial-gradient(ellipse, ${T.green}1A, transparent 60%)`,
        filter: 'blur(110px)', pointerEvents: 'none', animationDelay: '-6s',
      }}/>
      {/* Grid overlay (replaces grid=true) */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        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',
      }}/>

      <div style={{ position: 'relative' }}>
      <Eyebrow>// Edizione 2025 · Lineup confermato</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 56 }}>
        <H2 max={900}>
          Sul palco del Marketers World salgono solamente le <Italic>rockstar</Italic> del digital italiano.
        </H2>
        <p style={{
          fontFamily: T.sans, fontSize: 16, color: 'rgba(255,255,255,0.55)',
          lineHeight: 1.6, margin: '0 0 18px', maxWidth: 380,
        }}>
          Questi sono stati gli speaker del 2025 — un assaggio di chi vedrai
          ascendere il palco di Rimini quest'anno.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
      }}>
        {SPEAKERS_2025.map((sp, i) => (
          <div key={i}
            onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
            style={{
              background: 'rgba(255,255,255,0.025)',
              border: hovered === i ? '1px solid rgba(75,107,251,0.45)' : T.borderDark,
              borderRadius: 12, padding: 14,
              transition: 'all 0.3s', cursor: 'pointer',
              boxShadow: hovered === i ? '0 0 32px rgba(23,70,245,0.15)' : 'none',
              transform: hovered === i ? 'translateY(-2px)' : 'translateY(0)',
            }}>
            <div style={{ position: 'relative' }}>
              <Photo src={sp.src} alt={sp.name} ratio="1/1"/>
              <div style={{
                position: 'absolute', top: 10, left: 10,
                fontFamily: T.mono, fontSize: 9, letterSpacing: '0.16em',
                padding: '3px 8px', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
                color: T.blueLight, borderRadius: 4, textTransform: 'uppercase',
              }}>#{String(i + 1).padStart(2, '0')} · 2025</div>
            </div>
            <div style={{ padding: '14px 4px 4px' }}>
              <div style={{ fontFamily: T.serif, fontWeight: 700, fontSize: 18, color: '#fff', letterSpacing: '-0.01em' }}>
                {sp.name}
              </div>
              <div style={{
                fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 6,
                lineHeight: 1.5, display: '-webkit-box', WebkitLineClamp: 3,
                WebkitBoxOrient: 'vertical', overflow: 'hidden',
              }}>
                {sp.role}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, textAlign: 'center' }}>
        <GhostBtn href="https://marketersworld.net/speaker-marketers-world-2025/">
          Guardali tutti →
        </GhostBtn>
      </div>
      </div>
    </Section>
  );
}

Object.assign(window, { TopBar, Nav, Hero, PressStrip, DateBlock, Village, Speakers2025 });