/* global React, T, Eyebrow, H2, Italic, PrimaryBtn, GhostBtn, Section, Reveal,
   CountUp, LightEyebrow, LightH2, LightPrimary, LightGhost, useInView */
const { useState: useStM, useEffect: useEfM, useRef: useRfM } = React;

// =============== SOLUTION — DARK contrast moment ===============
function SpSolution() {
  const left = [
    'Pubblico generico che gira per gli stand',
    '3 ore di traffico, poi tutti spariscono',
    'Competitor ovunque, anche nello stesso corridoio',
    'Stand freddo dove ti presenti 100 volte',
    'Raccolta contatti cartacea o QR senza follow-up',
    'Nessun supporto, ti arrangi',
  ];
  const right = [
    "Pubblico filtrato per ruolo e potere d'acquisto",
    '6 giorni totali di presenza (pre-evento, main, marketers village)',
    'Esclusività merceologica assoluta, zero alternative',
    'Contesti informali dove le relazioni nascono naturalmente',
    'Sistema integrato app con profili completi e analytics',
    'Team dedicato pre-durante-post per massimizzare ROI',
  ];
  return (
    <section style={{
      position: 'relative', padding: '140px 56px 140px',
      background: T.ink, color: '#fff', overflow: 'hidden',
    }}>
      {/* Animated gradient washes */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-10%', left: '-15%', width: '60%', height: '90%',
        background: `radial-gradient(ellipse, ${T.blue}55, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '-15%', right: '-10%', width: '60%', height: '90%',
        background: `radial-gradient(ellipse, ${T.violetDeep}44, transparent 60%)`,
        filter: 'blur(140px)', pointerEvents: 'none',
      }}/>
      {/* Blueprint grid */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(75,107,251,0.10) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(75,107,251,0.10) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <Eyebrow accent={T.green}>// La soluzione</Eyebrow>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'start', marginBottom: 72 }}>
          <H2 max={920}>
            Siamo l'epicentro di un cambiamento culturale che ridefinisce <Italic color={T.green}>il futuro del lavoro</Italic>.
          </H2>
          <div style={{ paddingTop: 8 }}>
            <p style={{
              fontFamily: T.sans, fontSize: 17, color: 'rgba(255,255,255,0.78)',
              lineHeight: 1.65, margin: '0 0 18px',
            }}>
              Marketers World non è il solito evento dove ascolti speech e
              torni a casa. È un <strong style={{ color: '#fff', fontWeight: 700 }}>format ibrido di 6 giorni</strong> che unisce
              formazione intensiva, networking spontaneo e co-living in un
              village sul mare.
            </p>
            <p style={{
              fontFamily: T.sans, fontSize: 15, color: 'rgba(255,255,255,0.6)',
              lineHeight: 1.65, margin: 0,
            }}>
              La più grande community di imprenditori digitali d'Italia
              (<strong style={{ color: T.blueLight, fontWeight: 600 }}>100k+ professionisti attivi</strong>) si riunisce ogni anno
              per 72 ore di contenuti + 6 giorni di vita condivisa.
            </p>
          </div>
        </div>

        {/* Comparison */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
          border: '1px solid rgba(255,255,255,0.08)', borderRadius: 20, overflow: 'hidden',
          background: 'rgba(8,18,40,0.4)', backdropFilter: 'blur(8px)',
        }}>
          {/* LEFT — altri eventi */}
          <div style={{
            padding: '48px 44px 50px', borderRight: '1px solid rgba(255,255,255,0.08)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32,
            }}>
              <div style={{
                fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)',
              }}>// Altri eventi</div>
              <div style={{
                padding: '4px 10px', borderRadius: 4,
                background: 'rgba(255,107,107,0.12)', border: '1px solid rgba(255,107,107,0.4)',
                fontFamily: T.mono, fontSize: 9, fontWeight: 700,
                color: '#FF6B6B', letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>× business as usual</div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
              {left.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 16, alignItems: 'flex-start',
                  fontSize: 17, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55,
                  paddingBottom: 18,
                  borderBottom: i < left.length - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none',
                  fontWeight: 500,
                }}>
                  <span style={{
                    width: 24, height: 24, borderRadius: '50%',
                    border: '1px solid rgba(255,107,107,0.5)',
                    display: 'grid', placeItems: 'center',
                    flexShrink: 0, color: '#FF6B6B', fontSize: 14, marginTop: 1,
                  }}>×</span>
                  <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(255,107,107,0.35)' }}>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* RIGHT — MW */}
          <div style={{
            background: `linear-gradient(180deg, rgba(46,229,161,0.08), rgba(46,229,161,0.02))`,
            padding: '48px 44px 50px', position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: -1, left: -1, right: -1, height: 3,
              background: `linear-gradient(90deg, ${T.green}, ${T.blueLight}, ${T.violet})`,
            }}/>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32,
            }}>
              <div style={{
                fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: T.green, fontWeight: 600,
              }}>// Marketers World</div>
              <div style={{
                padding: '4px 10px', borderRadius: 4,
                background: `${T.green}1A`, border: `1px solid ${T.green}55`,
                fontFamily: T.mono, fontSize: 9, fontWeight: 700,
                color: T.green, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>✓ format ibrido · 6gg</div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
              {right.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 16, alignItems: 'flex-start',
                  fontSize: 17, color: '#fff', lineHeight: 1.55,
                  paddingBottom: 18,
                  borderBottom: i < right.length - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none',
                  fontWeight: 500,
                }}>
                  <span style={{
                    width: 24, height: 24, borderRadius: '50%',
                    background: T.green, color: T.ink,
                    display: 'grid', placeItems: 'center',
                    flexShrink: 0, fontSize: 14, fontWeight: 800, marginTop: 1,
                  }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== STATS — LIGHT, animated count-up ===============
function SpStats() {
  const stats = [
    { sym: '+', n: 200, u: '%', l: 'Crescita partecipanti in 2 anni', c: T.blue },
    { n: 87,    u: '%', l: 'Tasso di ritorno anno su anno', c: T.green },
    { n: 17,    u: 'M', l: 'Reach social durante evento', c: T.violetDeep },
    { n: 5,     u: '',  l: 'Edizioni sold-out consecutive', c: T.ember },
    { n: 30,    u: 'gg',l: 'Visibilità pre-evento su app', c: T.blue },
    { sym: '+', n: 100, u: 'K', l: "Community attiva 365gg l'anno", c: T.green },
  ];
  return (
    <section style={{
      position: 'relative', padding: '140px 56px 80px',
      background: '#f4f6ff', color: T.ink, overflow: 'hidden',
    }}>
      <div className="dotgrid-light" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.4,
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <LightEyebrow>// Numeri che contano</LightEyebrow>
            <LightH2 max={820}>
              I numeri che contano <em style={{ fontStyle: 'italic', color: T.blue }}>davvero</em> per il tuo budget marketing.
            </LightH2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 16, color: 'rgba(8,16,31,0.6)',
            lineHeight: 1.65, margin: '0 0 12px', maxWidth: 480,
          }}>
            Non vanity metrics. KPI che il tuo CFO può guardare senza scuotere la testa.
            Dati misurabili, tracciabili, replicabili anno su anno.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {stats.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                padding: '40px 36px 36px', background: '#fff',
                border: '1px solid rgba(8,16,31,0.06)',
                borderRadius: 18, minHeight: 240,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                position: 'relative', overflow: 'hidden',
                transition: 'transform 0.3s, box-shadow 0.3s, border-color 0.3s',
                boxShadow: '0 4px 20px rgba(8,16,31,0.03)',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-4px)';
                  e.currentTarget.style.boxShadow = '0 20px 50px rgba(8,16,31,0.10)';
                  e.currentTarget.style.borderColor = s.c + '40';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 4px 20px rgba(8,16,31,0.03)';
                  e.currentTarget.style.borderColor = 'rgba(8,16,31,0.06)';
                }}
              >
                <div style={{
                  position: 'absolute', top: 0, left: 0, width: '100%', height: 3,
                  background: s.c, transformOrigin: 'left',
                  opacity: 0.7,
                }} className="bar-grow"/>
                <div style={{
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: 'rgba(8,16,31,0.35)',
                  fontWeight: 600,
                }}>// metric #{String(i + 1).padStart(2, '0')}</div>

                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 4,
                  fontFamily: T.serif, fontWeight: 900, lineHeight: 0.9,
                  letterSpacing: '-0.035em', color: T.ink,
                  marginTop: 24,
                }}>
                  {s.sym && (
                    <span style={{ fontSize: 56, color: s.c }}>{s.sym}</span>
                  )}
                  <CountUp to={s.n} format style={{ fontSize: 'clamp(76px, 8vw, 120px)' }}/>
                  {s.u && (
                    <span style={{ fontSize: 44, color: s.c, marginLeft: 4 }}>{s.u}</span>
                  )}
                </div>

                <div style={{
                  fontFamily: T.sans, fontSize: 14, color: 'rgba(8,16,31,0.65)',
                  lineHeight: 1.45, marginTop: 18, maxWidth: 260, fontWeight: 500,
                }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== REACH — LIGHT bg, dark chart panel ===============
function SpReach() {
  const [active, setActive] = useStM(2);
  const editions = [
    { tag: 'MW23', label: '2023 · baseline', src: window.mwAsset('assets/legacy/external/mw26-sponsorpage-img-001-comp-1024x445-115f2e80b968.png') },
    { tag: 'MW24', label: '2024 · raddoppiato', src: window.mwAsset('assets/legacy/external/mw26-sponsorpage-img-002-comp-1024x445-b30f994c4cb7.png') },
    { tag: 'MW25', label: '2025 · triplicato', src: window.mwAsset('assets/legacy/external/mw26-sponsorpage-img-003-comp-1024x444-2c7d6e163f11.png') },
  ];
  return (
    <section style={{
      position: 'relative', padding: '80px 56px 100px',
      background: '#f4f6ff', color: T.ink, overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '5%', right: '-10%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, rgba(75,107,251,0.16), transparent 65%)`,
        filter: 'blur(120px)', 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>
            <LightEyebrow>// Reach · Social impact</LightEyebrow>
            <LightH2 max={900}>
              Più impattante di un <em style={{ fontStyle: 'italic', color: T.blue }}>canale televisivo</em>.
            </LightH2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 16, color: 'rgba(8,16,31,0.65)',
            lineHeight: 1.65, margin: '0 0 18px', maxWidth: 460,
          }}>
            Nel 2024 abbiamo raddoppiato la reach social rispetto al 2023.
            Nel 2025 l'abbiamo <strong style={{ color: T.green, fontWeight: 700 }}>triplicata</strong>.
            Ogni anno Marketers World è <em style={{ color: T.ink }}>IL trend topic</em> del
            mercato digitale italiano.
          </p>
        </div>

        {/* Tab selector */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
          {editions.map((ed, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              padding: '12px 22px', borderRadius: 999,
              background: active === i ? T.ink : '#fff',
              border: active === i ? '1px solid ' + T.ink : '1px solid rgba(8,16,31,0.10)',
              color: active === i ? '#fff' : 'rgba(8,16,31,0.65)',
              fontFamily: T.mono, fontSize: 11, fontWeight: 600,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              cursor: 'pointer', transition: 'all 0.25s',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: '50%',
                background: active === i ? T.green : 'rgba(8,16,31,0.3)',
                boxShadow: active === i ? `0 0 10px ${T.green}` : 'none',
              }}/>
              {ed.tag} · {ed.label}
            </button>
          ))}
        </div>

        {/* Chart frame (DARK panel inside light section) */}
        <div style={{
          position: 'relative', borderRadius: 18, overflow: 'hidden',
          background: T.card, border: '1px solid rgba(8,16,31,0.10)',
          boxShadow: '0 28px 80px rgba(8,16,31,0.18)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '16px 24px',
            background: 'rgba(0,0,0,0.35)', borderBottom: '1px solid rgba(255,255,255,0.08)',
            fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
            textTransform: 'uppercase',
          }}>
            <span style={{ color: T.blueLight }}>
              ┌─ social_reach_{editions[active].tag.toLowerCase()}.report
            </span>
            <span style={{ color: 'rgba(255,255,255,0.55)' }}>
              · Edizione {editions[active].label}
            </span>
          </div>
          <div style={{
            padding: '28px 28px 32px',
            background: 'rgba(8,18,40,0.4)',
            display: 'grid', placeItems: 'center',
          }}>
            <img
              key={active}
              src={editions[active].src}
              alt={`Social reach ${editions[active].tag}`}
              style={{
                width: '100%', maxWidth: 1100, height: 'auto', display: 'block',
                borderRadius: 8, animation: 'fadein 0.6s ease both',
              }}
            />
          </div>
        </div>

        {/* Bottom closer — bigger text + creator visual */}
        <Reveal>
          <div style={{
            marginTop: 64,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
            alignItems: 'center',
          }}>
            <div>
              <p style={{
                fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(28px, 3vw, 44px)',
                lineHeight: 1.15, margin: 0, color: T.ink, letterSpacing: '-0.025em',
                textWrap: 'balance',
              }}>
                Il tuo brand non sarà solo visto.{' '}
                <em style={{ fontStyle: 'italic', color: T.blue }}>Sarà ricordato.</em>
              </p>
              <p style={{
                marginTop: 18, fontFamily: T.sans,
                fontSize: 'clamp(18px, 1.5vw, 22px)', fontWeight: 400,
                color: 'rgba(8,16,31,0.72)', lineHeight: 1.5, margin: '18px 0 0',
              }}>
                Anche attraverso i volti degli{' '}
                <strong style={{ color: T.green, fontWeight: 700 }}>
                  oltre 200 creator ambassador
                </strong>{' '}
                presenti all'evento.
              </p>
            </div>

            <CreatorVisual/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// Visual: grid of 200 dot-avatars with the big "200+" overlay
function CreatorVisual() {
  const [ref, seen] = useInView(0.3);
  const ROWS = 8, COLS = 26;
  const dots = [];
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      dots.push({ r, c, i: r * COLS + c });
    }
  }
  // Color palette for the dots
  const palette = [T.blue, T.green, T.violetDeep, T.ember, T.blueLight];

  return (
    <div ref={ref} style={{
      position: 'relative', padding: '32px 28px',
      background: '#fff', borderRadius: 18,
      border: `1px solid ${T.green}30`,
      boxShadow: `0 24px 60px ${T.green}1A, 0 4px 20px rgba(8,16,31,0.04)`,
      overflow: 'hidden',
    }}>
      {/* HUD top */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 16, fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 600,
      }}>
        <span style={{ color: T.green }}>// creator ambassador · MW25</span>
        <span style={{ color: 'rgba(8,16,31,0.4)' }}>208 attivi</span>
      </div>

      {/* Dots grid */}
      <div style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: `repeat(${COLS}, 1fr)`,
        gap: 4,
        padding: '20px 6px',
      }}>
        {dots.map(({ i, r, c }) => {
          const color = palette[(r * 7 + c * 3) % palette.length];
          const delay = seen ? (i * 6) : 0;
          // skip a few to keep it from being a perfect rect
          const skip = (r === 0 && c >= 22) || (r === ROWS - 1 && c < 2);
          if (skip) return <span key={i} style={{ width: 12, height: 12 }}/>;
          return (
            <span key={i} style={{
              width: 12, height: 12, borderRadius: '50%',
              background: color, opacity: seen ? 0.85 : 0,
              transform: seen ? 'scale(1)' : 'scale(0)',
              transition: `opacity 0.35s ease ${delay}ms, transform 0.45s cubic-bezier(0.34,1.56,0.64,1) ${delay}ms`,
            }}/>
          );
        })}

        {/* Big number overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          pointerEvents: 'none',
        }}>
          <div style={{
            background: '#fff', borderRadius: 14, padding: '10px 22px 12px',
            boxShadow: '0 16px 40px rgba(8,16,31,0.18)',
            border: `1.5px solid ${T.green}`,
            display: 'flex', alignItems: 'baseline', gap: 4,
            fontFamily: T.serif, fontWeight: 900, color: T.ink,
            letterSpacing: '-0.03em', lineHeight: 1,
          }}>
            <CountUp to={200} style={{ fontSize: 72 }}/>
            <span style={{ fontSize: 44, color: T.green }}>+</span>
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(8,16,31,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: T.sans, fontSize: 12, color: 'rgba(8,16,31,0.6)',
      }}>
        <span><strong style={{ color: T.ink, fontWeight: 700 }}>200+</strong> creator</span>
        <span><strong style={{ color: T.ink, fontWeight: 700 }}>17M</strong> reach combinata</span>
        <span><strong style={{ color: T.ink, fontWeight: 700 }}>14gg</strong> trend topic</span>
      </div>
    </div>
  );
}

// =============== AUDIENCE — LIGHT, animated stacked bar ===============
function SpAudience() {
  const segments = [
    {
      pct: 42, label: 'Founder & Imprenditori',
      bullets: [
        'Budget medio investimento annuo: 50k+',
        'Cercano: scaling, software, consulenza strategica',
        'Pain point: troppi tools, poca integrazione',
      ],
      color: T.blue,
    },
    {
      pct: 28, label: 'Marketing Manager & CMO',
      bullets: [
        "Decision maker con potere d'acquisto diretto",
        'Cercano: agenzie, piattaforme, formazione team',
        'Pain point: ROI incerto, voglia di innovazione',
      ],
      color: T.green,
    },
    {
      pct: 18, label: 'Creator & Influencer',
      bullets: [
        'Monetizzazione attiva, partnership brand',
        'Cercano: sponsor, tools, monetizzazione',
        'Pain point: scaling, gestione business',
      ],
      color: T.violetDeep,
    },
    {
      pct: 12, label: 'Freelancer & Specialist',
      bullets: [
        'Alta specializzazione, network attivo',
        'Cercano: collaborazioni, tools, visibilità',
        'Pain point: acquisizione clienti costosa',
      ],
      color: T.ember,
    },
  ];
  const [barRef, barSeen] = useInView(0.3);

  return (
    <section id="audience" style={{
      position: 'relative', padding: '120px 56px 140px',
      background: T.ink, color: '#fff', overflow: 'hidden',
    }}>
      {/* Soft gradients */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-15%', right: '-10%', width: '55%', height: '80%',
        background: `radial-gradient(ellipse, ${T.blue}44, transparent 60%)`,
        filter: 'blur(130px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '-10%', left: '-15%', width: '55%', height: '70%',
        background: `radial-gradient(ellipse, ${T.violetDeep}33, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(75,107,251,0.08) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(75,107,251,0.08) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 56 }}>
          <div>
            <Eyebrow>// Audience breakdown</Eyebrow>
            <H2 max={920}>
              Non partecipanti. <Italic>Clienti qualificati</Italic>.
            </H2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 16, color: 'rgba(255,255,255,0.7)',
            lineHeight: 1.65, margin: '0 0 12px', maxWidth: 460,
          }}>
            Non è un pubblico generico in cerca di contenuti gratis. Sono
            professionisti che hanno già pagato un ticket premium solo per esserci.
            Sono <em style={{ color: '#fff', fontWeight: 600 }}>investitori, non curiosi</em>.
          </p>
        </div>

        {/* Animated stacked bar with floating labels */}
        <div ref={barRef} style={{
          position: 'relative', marginBottom: 56, padding: '0 0 40px',
        }}>
          {/* Top labels */}
          <div style={{
            display: 'flex', height: 32, alignItems: 'flex-end', marginBottom: 8, position: 'relative',
          }}>
            {segments.map((s, i) => (
              <div key={i} style={{
                flex: barSeen ? s.pct : 0,
                transition: `flex 1.2s cubic-bezier(0.25,1,0.5,1) ${i * 100}ms`,
                position: 'relative', paddingRight: 6, overflow: 'hidden',
              }}>
                <div style={{
                  fontFamily: T.mono, fontSize: 11, color: s.color, fontWeight: 700,
                  letterSpacing: '0.08em', whiteSpace: 'nowrap',
                }}>{s.pct}%</div>
              </div>
            ))}
          </div>

          {/* Bar */}
          <div style={{
            display: 'flex', height: 56, borderRadius: 999, overflow: 'hidden',
            background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.10)',
            boxShadow: '0 8px 30px rgba(8,16,31,0.4)',
          }}>
            {segments.map((s, i) => (
              <div key={i} title={`${s.label} · ${s.pct}%`} style={{
                flex: barSeen ? s.pct : 0,
                background: s.color,
                transition: `flex 1.2s cubic-bezier(0.25,1,0.5,1) ${i * 100}ms`,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.30) 50%, transparent)',
                  backgroundSize: '200% 100%',
                  animation: 'shimmerLine 3s linear infinite',
                  animationDelay: `${i * 0.2}s`,
                }}/>
              </div>
            ))}
          </div>

          {/* Bottom labels */}
          <div style={{
            display: 'flex', marginTop: 16,
          }}>
            {segments.map((s, i) => (
              <div key={i} style={{
                flex: barSeen ? s.pct : 0,
                transition: `flex 1.2s cubic-bezier(0.25,1,0.5,1) ${i * 100}ms`,
                paddingRight: 12, overflow: 'hidden',
              }}>
                <div style={{
                  fontFamily: T.sans, fontSize: 12, color: 'rgba(255,255,255,0.7)',
                  fontWeight: 600, whiteSpace: 'nowrap',
                }}>{s.label.split(' & ')[0]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Segments grid — LIGHT cards on dark bg */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }}>
          {segments.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div style={{
                background: '#fff',
                border: '1px solid rgba(255,255,255,0.10)',
                borderRadius: 18, padding: '32px 28px 34px',
                height: '100%', display: 'flex', flexDirection: 'column',
                position: 'relative', overflow: 'hidden',
                transition: 'transform 0.3s, box-shadow 0.3s',
                boxShadow: '0 20px 50px rgba(8,16,31,0.30)',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-8px)';
                  e.currentTarget.style.boxShadow = `0 30px 70px ${s.color}40`;
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 20px 50px rgba(8,16,31,0.30)';
                }}
              >
                <div style={{
                  position: 'absolute', top: 0, left: 0, width: '100%', height: 4,
                  background: s.color,
                }}/>

                <div style={{
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: 'rgba(8,16,31,0.4)', fontWeight: 600,
                  marginBottom: 18,
                }}>// segmento #{String(i + 1).padStart(2, '0')}</div>

                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 2,
                  fontFamily: T.serif, fontWeight: 900, lineHeight: 0.9,
                  letterSpacing: '-0.035em', color: T.ink,
                }}>
                  <CountUp to={s.pct} style={{ fontSize: 96 }}/>
                  <span style={{ fontSize: 52, color: s.color }}>%</span>
                </div>

                <div style={{
                  fontFamily: T.serif, fontWeight: 800, fontSize: 22, color: T.ink,
                  letterSpacing: '-0.01em', marginTop: 18, marginBottom: 18,
                  lineHeight: 1.15,
                }}>{s.label}</div>

                <ul style={{ listStyle: 'none', padding: 0, margin: 'auto 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} style={{
                      display: 'flex', gap: 10, alignItems: 'flex-start',
                      fontFamily: T.sans, fontSize: 13, color: 'rgba(8,16,31,0.7)', lineHeight: 1.5,
                    }}>
                      <span style={{
                        width: 5, height: 5, borderRadius: '50%',
                        background: s.color, flexShrink: 0, marginTop: 7,
                      }}/>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== BENEFITS — LIGHT, 6 cards ===============
function SpBenefits() {
  const items = [
    {
      title: 'Esclusività merceologica garantita',
      kicker: 'monopolio temporaneo',
      copy: 'Nessun logo competitor. Nessuna alternativa. Quando qualcuno tra i +3.000 partecipanti cerca la tua categoria, trova una sola risposta: tu. Non è vantaggio competitivo. È monopolio temporaneo.',
      icon: '◇', color: T.blue,
    },
    {
      title: 'Audience pre-qualificata',
      kicker: '93% ha già allocato budget',
      copy: 'Non stanno "esplorando". Stanno comprando. Il 93% ha già allocato budget marketing per quest\'anno. Il 76% firma contratti senza dover chiedere approvazioni. Sono già decision maker.',
      icon: '◈', color: T.green,
    },
    {
      title: 'Touchpoint continui',
      kicker: '30 giorni + 3 + 6',
      copy: 'Non 3 ore di fiera. Con noi hai 30 giorni pre-evento su app, 3 giorni di main event, 6 giorni di Marketers Village. Un ecosistema dove il tuo brand vive, mangia e fa aperitivi con tutti i partecipanti.',
      icon: '◉', color: T.violetDeep,
    },
    {
      title: 'Community attiva 365 giorni',
      kicker: 'non sei ospite, diventi famiglia',
      copy: "Non finisce con l'evento. Entri in un ecosistema di 100k+ professionisti che continua tutto l'anno. Gruppo Telegram, meetup mensili, contenuti condivisi.",
      icon: '✦', color: T.ember,
    },
    {
      title: 'Supporto pre-durante-post',
      kicker: 'team dedicato al tuo ROI',
      copy: 'Hai un team dedicato che lavora al tuo successo: strategia pre-evento, supporto setup stand, materiale foto/video professionale, brief creativo personalizzato.',
      icon: '◍', color: T.green,
    },
    {
      title: 'Dati e metriche reali',
      kicker: 'ogni lead è tracciato',
      copy: 'Basta eventi da cui torni senza sapere cosa è successo. Qui ogni interazione è tracciata. Ogni lead è qualificato. Ogni opportunità è mappata.',
      icon: '◐', color: T.blue,
    },
  ];
  return (
    <section style={{
      position: 'relative', padding: '140px 56px 140px',
      background: '#eef1ff', color: T.ink, overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '-10%', right: '-15%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, rgba(75,107,251,0.12), transparent 65%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', bottom: '-10%', left: '-15%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, rgba(232,121,58,0.10), transparent 65%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <LightEyebrow>// Why MW · 6 motivi</LightEyebrow>
            <LightH2 max={840}>
              Perché non puoi <em style={{ fontStyle: 'italic', color: T.blue }}>assolutamente</em> mancare.
            </LightH2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 16, color: 'rgba(8,16,31,0.65)',
            lineHeight: 1.65, margin: '0 0 12px', maxWidth: 460,
          }}>
            6 cose che non trovi da nessun'altra parte. E che spiegano perché
            i nostri sponsor <em style={{ color: T.ink }}>tornano ogni anno</em>.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
        }}>
          {items.map((b, i) => (
            <Reveal key={i} delay={(i % 3) * 100}>
              <div style={{
                background: '#fff', border: '1px solid rgba(8,16,31,0.06)',
                borderRadius: 18, padding: '32px 30px 34px', height: '100%',
                display: 'flex', flexDirection: 'column', gap: 18,
                position: 'relative', overflow: 'hidden',
                transition: 'transform 0.3s, box-shadow 0.3s',
                boxShadow: '0 4px 20px rgba(8,16,31,0.03)',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-6px)';
                  e.currentTarget.style.boxShadow = '0 24px 60px rgba(8,16,31,0.10)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 4px 20px rgba(8,16,31,0.03)';
                }}
              >
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <div style={{
                    width: 52, height: 52, borderRadius: 14,
                    background: b.color + '12', border: `1.5px solid ${b.color}55`,
                    display: 'grid', placeItems: 'center',
                    color: b.color, fontSize: 28, fontWeight: 700,
                  }}>{b.icon}</div>
                  <div style={{
                    fontFamily: T.serif, fontWeight: 900, fontSize: 32,
                    color: 'rgba(8,16,31,0.12)', letterSpacing: '-0.025em', lineHeight: 0.9,
                  }}>0{i + 1}</div>
                </div>

                <div>
                  <h3 style={{
                    fontFamily: T.serif, fontWeight: 800, fontSize: 22, color: T.ink,
                    letterSpacing: '-0.01em', lineHeight: 1.15, margin: 0,
                  }}>{b.title}</h3>
                  <div style={{
                    fontFamily: T.mono, fontSize: 10, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: b.color, marginTop: 10, fontWeight: 700,
                  }}>· {b.kicker}</div>
                </div>

                <p style={{
                  fontFamily: T.sans, fontSize: 14, color: 'rgba(8,16,31,0.65)',
                  lineHeight: 1.6, margin: 0,
                }}>{b.copy}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SpSolution, SpStats, SpReach, SpAudience, SpBenefits });