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

// =============== LOGOS — dark band inside light section ===============
const SP_LOGOS = [
  { n: 'Canva',         l: window.mwAsset('assets/legacy/external/canva-logo-white-64732bc3860f.png') },
  { n: 'Google',        l: window.mwAsset('assets/legacy/external/google-logo-white-2f69ca6b318f.png') },
  { n: 'Intel',         l: window.mwAsset('assets/legacy/external/intel-logo-white-834fcb3848aa.png') },
  { n: 'Nespresso',     l: window.mwAsset('assets/legacy/external/nespresso-logo-white-a69f9726fdb0.png') },
  { n: 'Decathlon',     l: window.mwAsset('assets/legacy/external/decathlon-logo-white-c1ecf0e97885.png') },
  { n: 'Grohe',         l: window.mwAsset('assets/legacy/external/grohe-logo-white-8caa8774ad75.png') },
  { n: 'Fujifilm',      l: window.mwAsset('assets/legacy/external/fujiflm-logo-white-e683da5d0b77.png') },
  { n: 'TechnoGym',     l: window.mwAsset('assets/legacy/external/technogym-logo-white-f7e6d0c3a22a.png') },
  { n: 'Trustpilot',    l: window.mwAsset('assets/legacy/external/trustpilot-logo-white-481b02ab1e62.png') },
  { n: 'Hoepli',        l: window.mwAsset('assets/legacy/external/hoepli-logo-white-a885727854b5.png') },
  { n: 'WeRoad',        l: window.mwAsset('assets/legacy/external/weroad-logo-white-3de3814f9b16.png') },
  { n: 'Treedom',       l: window.mwAsset('assets/legacy/external/treedom-logo-white-1441161749c3.png') },
  { n: 'SeoZoom',       l: window.mwAsset('assets/legacy/external/seozoom-logo-white-b9cee4ac1c86.png') },
  { n: 'Spoki',         l: window.mwAsset('assets/legacy/external/spoki-logo-white-14b9940b3b87.png') },
  { n: 'Stickermule',   l: window.mwAsset('assets/legacy/external/stickermule-logo-white-164fb9b8fc1c.png') },
  { n: 'Brella',        l: window.mwAsset('assets/legacy/external/brella-logo-white-c2d6791b84f8.png') },
  { n: 'Serenis',       l: window.mwAsset('assets/legacy/external/serenis-logo-white-73b8e2c2eac0.png') },
  { n: 'AutoHome',      l: window.mwAsset('assets/legacy/external/autohome-logo-white-0e8d1c0a38ed.png') },
  { n: 'Plannix',       l: window.mwAsset('assets/legacy/external/plnannix-logo-white-8c60373e6807.png') },
  { n: 'Instax',        l: window.mwAsset('assets/legacy/external/instax-logo-white-01-692b5a683822.png') },
  { n: 'Nova',          l: window.mwAsset('assets/legacy/external/nova-logo-white-0a73369e2e7c.png') },
  { n: 'Brainlab',      l: window.mwAsset('assets/legacy/external/brainlab-logo-white-9c252f2ae29e.png') },
  { n: 'Whitepress',    l: window.mwAsset('assets/legacy/external/whitepress-logo-white-07d5d8341a19.png') },
  { n: 'Fioravante',    l: window.mwAsset('assets/legacy/external/fioravante-logo-white-0279d9e52a01.png') },
  { n: '24bottles',     l: window.mwAsset('assets/legacy/external/24bottles-logo-white-825164241f7f.png') },
  { n: 'Tucano',        l: window.mwAsset('assets/legacy/external/tucano-logo-white-1b5045462d63.png') },
  { n: 'Ergonet',       l: window.mwAsset('assets/legacy/external/ergonet-logo-white-8e071b9f45f7.png') },
  { n: 'Photosi',       l: window.mwAsset('assets/legacy/external/photosi-logo-white-6682e4ea1669.png') },
  { n: 'Flowe',         l: window.mwAsset('assets/legacy/external/flowe-logo-white-35f824b38e7a.png') },
  { n: 'Nen',           l: window.mwAsset('assets/legacy/external/nen-logo-white-1fd93df13767.png') },
  { n: 'ActivePowered', l: window.mwAsset('assets/legacy/external/activepowered-logo-white-dc0f056f9986.png') },
  { n: 'StartupGeeks',  l: window.mwAsset('assets/legacy/external/missing-6ba1636b4896.svg') },
];

function SpLogos() {
  const tripled = [...SP_LOGOS, ...SP_LOGOS, ...SP_LOGOS];
  return (
    <section style={{
      position: 'relative', padding: '120px 56px',
      background: T.ink, color: '#fff', overflow: 'hidden',
    }}>
      {/* Soft gradients */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-15%', left: '-10%', width: '60%', height: '90%',
        background: `radial-gradient(ellipse, ${T.blueMedium}66, transparent 65%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '-15%', right: '-10%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, ${T.violetDeep}33, transparent 60%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr',
          gap: 56, alignItems: 'end', marginBottom: 48,
        }}>
          <div>
            <Eyebrow>// Sponsor list · 2023—2025</Eyebrow>
            <H2 max={780}>
              Chi ha esibito al <Italic>Marketers World</Italic>.
            </H2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 15, color: 'rgba(255,255,255,0.7)',
            lineHeight: 1.65, margin: '0 0 12px', maxWidth: 460,
          }}>
            Tre anni di partner d'eccellenza. Da unicorni globali a scale-up italiane ad alta crescita:
            <em style={{ color: '#fff' }}> nessuno ha mai sponsorizzato due volte la stessa categoria</em>.
          </p>
        </div>
      </div>

      {/* Full-bleed marquee, 3 tracks, slow */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 160,
          background: `linear-gradient(90deg, ${T.ink}, transparent)`,
          zIndex: 3, pointerEvents: 'none',
        }}/>
        <div style={{
          position: 'absolute', right: 0, top: 0, bottom: 0, width: 160,
          background: `linear-gradient(-90deg, ${T.ink}, transparent)`,
          zIndex: 3, pointerEvents: 'none',
        }}/>

        <div className="marquee-light" style={{ marginBottom: 16, animationDuration: '220s' }}>
          {tripled.map((b, i) => (
            <LogoCell key={`a-${i}`} brand={b}/>
          ))}
        </div>
        <div className="marquee-light marquee-light-reverse" style={{ marginBottom: 16, animationDuration: '260s' }}>
          {tripled.slice().reverse().map((b, i) => (
            <LogoCell key={`b-${i}`} brand={b}/>
          ))}
        </div>
        <div className="marquee-light" style={{ animationDuration: '300s' }}>
          {[...tripled].sort((a, b) => a.n.localeCompare(b.n)).map((b, i) => (
            <LogoCell key={`c-${i}`} brand={b}/>
          ))}
        </div>
      </div>

      {/* Counter strip */}
      <div style={{
        position: 'relative', maxWidth: 1240, margin: '56px auto 0', padding: '0 0',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }}>
          {[
            { n: 60, suf: '+', l: 'brand sponsor totali', c: T.blueLight },
            { n: 5, suf: '',   l: 'edizioni consecutive sold-out', c: T.green },
            { n: 87, suf: '%', l: 'tasso di rinnovo anno su anno', c: T.violet },
            { n: 1, suf: '/cat', l: 'brand per categoria', c: T.ember },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '24px 26px', background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 14, display: 'flex', flexDirection: 'column', gap: 8,
              backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                fontFamily: T.serif, fontWeight: 900, fontSize: 44, color: '#fff',
                lineHeight: 1, letterSpacing: '-0.03em',
              }}>
                <CountUp to={s.n} style={{ color: s.c }} suffix={s.suf}/>
              </div>
              <div style={{
                fontFamily: T.sans, fontSize: 12, color: 'rgba(255,255,255,0.65)', lineHeight: 1.4,
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LogoCell({ brand }) {
  return (
    <div style={{
      flexShrink: 0, height: 64, width: 150,
      display: 'grid', placeItems: 'center', padding: '0 12px',
    }}>
      <img src={brand.l} alt={brand.n} loading="lazy"
        style={{
          maxWidth: '100%', maxHeight: 36, objectFit: 'contain',
          opacity: 0.75, filter: 'grayscale(0.4) brightness(1.2)',
          transition: 'opacity 0.3s, filter 0.3s',
        }}
        onMouseEnter={e => { e.currentTarget.style.opacity = 1; e.currentTarget.style.filter = 'none'; }}
        onMouseLeave={e => { e.currentTarget.style.opacity = 0.75; e.currentTarget.style.filter = 'grayscale(0.4) brightness(1.2)'; }}
      />
    </div>
  );
}

// =============== TESTIMONIALS — LIGHT, big photos ===============
function SpTestimonials() {
  const items = [
    {
      q: 'La qualità degli sponsor del World è assolutamente sopra la media.',
      author: 'Ex-sponsor MW24',
      role: 'CMO · Scale-up SaaS',
      img: window.mwAsset('assets/legacy/external/mkw-row-stand-4-0d522ad4bba5.jpg'),
      kpi: { n: 'AAA', label: 'qualità lead' },
      color: T.blue,
    },
    {
      q: 'Ho avuto modo di presentare il mio prodotto parlando con più di 1.000 persone in 72 ore.',
      author: 'Ex-sponsor MW24',
      role: 'Founder · DTC brand',
      img: window.mwAsset('assets/legacy/external/mkw-row-stand-5-ae29a4b3f104.jpg'),
      kpi: { n: 1000, suf: '+', label: 'conversazioni in 72h', counted: true },
      color: T.green,
    },
    {
      q: 'Ho lasciato l\'evento con centinaia di lead interessanti.',
      author: 'Ex-sponsor MW25',
      role: 'Head of Growth · MarTech',
      img: window.mwAsset('assets/legacy/external/mkw-row-stand-6-1-e85e2ae7509e.jpg'),
      kpi: { n: 'cent.', label: 'di lead qualificati' },
      color: T.violetDeep,
    },
  ];

  return (
    <section style={{
      position: 'relative', padding: '140px 56px 140px',
      background: '#f4f6ff', color: T.ink, overflow: 'hidden',
    }}>
      <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>// Voce degli sponsor</LightEyebrow>
            <LightH2 max={840}>
              Chi è stato sul palco lo <em style={{ fontStyle: 'italic', color: T.blue }}>racconta</em> meglio di noi.
            </LightH2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 15, color: 'rgba(8,16,31,0.65)',
            lineHeight: 1.65, margin: '0 0 12px', maxWidth: 460,
          }}>
            Niente case study impacchettati. Sono parole raccolte a caldo,
            mentre smontavano lo stand <em style={{ color: T.ink }}>l'ultimo giorno</em>.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
        }}>
          {items.map((t, i) => (
            <Reveal key={i} delay={i * 100}>
              <article style={{
                background: '#fff',
                border: '1px solid rgba(8,16,31,0.06)',
                borderRadius: 22, overflow: 'hidden',
                display: 'flex', flexDirection: 'column', height: '100%',
                boxShadow: '0 4px 20px rgba(8,16,31,0.04)',
                transition: 'transform 0.4s, box-shadow 0.4s',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-8px)';
                  e.currentTarget.style.boxShadow = '0 28px 60px rgba(8,16,31,0.14)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 4px 20px rgba(8,16,31,0.04)';
                }}
              >
                <div style={{
                  aspectRatio: '4/3', position: 'relative', overflow: 'hidden', background: T.card,
                }}>
                  <img src={t.img} alt="" loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.05) brightness(0.9)' }}/>
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: `linear-gradient(180deg, transparent 50%, rgba(8,13,26,0.85) 100%), linear-gradient(135deg, ${t.color}33, transparent 70%)`,
                  }}/>

                  <div style={{
                    position: 'absolute', top: 16, left: 16,
                    padding: '6px 12px', borderRadius: 6,
                    background: '#fff', color: t.color,
                    fontFamily: T.mono, fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                  }}>// testimonial #{String(i + 1).padStart(2, '0')}</div>

                  {/* KPI corner */}
                  <div style={{
                    position: 'absolute', bottom: 18, right: 18,
                    display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
                    textAlign: 'right',
                  }}>
                    <div style={{
                      display: 'flex', alignItems: 'baseline', gap: 2,
                      fontFamily: T.serif, fontWeight: 900,
                      lineHeight: 0.9, letterSpacing: '-0.025em', color: '#fff',
                    }}>
                      {t.kpi.counted ? (
                        <CountUp to={t.kpi.n} format style={{ fontSize: 48 }}/>
                      ) : (
                        <span style={{ fontSize: 44 }}>{t.kpi.n}</span>
                      )}
                      {t.kpi.suf && <span style={{ fontSize: 22, color: t.color }}>{t.kpi.suf}</span>}
                    </div>
                    <div style={{
                      fontFamily: T.mono, fontSize: 10, letterSpacing: '0.16em',
                      textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)', marginTop: 6,
                    }}>{t.kpi.label}</div>
                  </div>
                </div>

                <div style={{
                  padding: '32px 30px 32px', flex: 1,
                  display: 'flex', flexDirection: 'column', gap: 20,
                }}>
                  <div style={{
                    fontFamily: T.serif, fontStyle: 'italic', fontWeight: 700,
                    fontSize: 22, color: T.ink, lineHeight: 1.3, letterSpacing: '-0.01em',
                    position: 'relative', paddingLeft: 24,
                  }}>
                    <span style={{
                      position: 'absolute', left: -2, top: -16,
                      fontSize: 64, color: t.color, opacity: 0.4, lineHeight: 1,
                    }}>“</span>
                    {t.q}
                  </div>
                  <div style={{
                    marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12,
                    paddingTop: 18, borderTop: '1px solid rgba(8,16,31,0.06)',
                  }}>
                    <div style={{
                      width: 38, height: 38, borderRadius: '50%',
                      background: `linear-gradient(135deg, ${t.color}, ${t.color}66)`,
                      display: 'grid', placeItems: 'center',
                      fontFamily: T.serif, fontWeight: 900, fontSize: 14, color: '#fff',
                    }}>EX</div>
                    <div>
                      <div style={{ fontFamily: T.sans, fontSize: 14, fontWeight: 600, color: T.ink }}>{t.author}</div>
                      <div style={{ fontFamily: T.mono, fontSize: 10, color: 'rgba(8,16,31,0.5)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 3 }}>{t.role}</div>
                    </div>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== PACKAGES — LIGHT, color accents ===============
function SpPackages() {
  const pkgs = [
    {
      tag: 'per chi vuole contatti qualificati e misurabili',
      title: 'Lead Generation',
      kicker: 'Acquisizione',
      pitch: "Trasforma l'evento in uno strumento di acquisizione. Interazioni mirate, dati tracciabili, contatti pronti per il follow up.",
      items: [
        'Stand interattivo con demo o consulenze rapide',
        'Attivazioni gamificate o giveaway a registrazione',
        'Push mirate su app per portare traffico qualificato',
        'Raccolta lead tramite esperienze brandizzate',
      ],
      result: 'Lead qualificati, verificati, attivabili.',
      color: T.blue,
      icon: '◆',
    },
    {
      tag: 'per chi vuole posizionarsi come leader di settore',
      title: 'Brand Leadership',
      kicker: 'Autorevolezza',
      pitch: "Il brand sale sul palco e guida la conversazione. Contenuti ad alto valore che mostrano visione, metodo e competenza, amplificati prima e dopo l'evento.",
      items: [
        'Workshop verticale con casi reali',
        'Interviste e contenuti editoriali dedicati',
        'Demo live e momenti formativi firmati dal brand',
        'Speech keynote o panel su palco principale',
      ],
      result: 'Autorevolezza e posizionamento di mercato.',
      color: T.green,
      icon: '◇',
      featured: true,
    },
    {
      tag: "per chi vuole entrare nell'ecosistema Marketers",
      title: 'Community Builder',
      kicker: 'Relazione',
      pitch: "Il brand vive l'evento insieme alla community. Presenza naturale nei momenti informali, relazioni che nascono e continuano oltre il palco.",
      items: [
        'Brandizzazione di aree social e village',
        'Attività esperienziali e sampling contestuale',
        'Incontri spontanei e format relazionali',
        'Collaborazioni e co-branding post evento',
      ],
      result: "Relazioni durature e integrazione nell'ecosistema.",
      color: T.ember,
      icon: '◈',
    },
  ];

  return (
    <section id="pacchetti" style={{
      position: 'relative', padding: '140px 56px 140px',
      background: T.ink, color: '#fff', overflow: 'hidden',
    }}>
      <div className="gw-drift" style={{
        position: 'absolute', top: '-15%', left: '50%', transform: 'translateX(-50%)',
        width: '80%', height: '70%',
        background: `radial-gradient(ellipse, ${T.blue}44, transparent 65%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '-15%', right: '-10%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse, ${T.green}33, transparent 65%)`,
        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: 'end', marginBottom: 56 }}>
          <div>
            <Eyebrow>// Pacchetti · 3 obiettivi</Eyebrow>
            <H2 max={860}>
              Scegli in base a <Italic>cosa vuoi ottenere</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,
          }}>
            Ogni pacchetto è <strong style={{ color: '#fff', fontWeight: 700 }}>personalizzabile</strong>.
            Partiamo dal tuo obiettivo e costruiamo la soluzione insieme.
            <span style={{ display: 'block', marginTop: 8, fontSize: 12, color: T.green, fontFamily: T.mono, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>
              ↓ niente listini · solo chiamate
            </span>
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
          alignItems: 'stretch',
        }}>
          {pkgs.map((p, i) => (
            <Reveal key={i} delay={i * 120}>
              <article style={{
                background: '#fff',
                border: p.featured ? `2px solid ${p.color}` : '1px solid rgba(8,16,31,0.06)',
                borderRadius: 22, padding: '40px 32px 32px',
                position: 'relative', overflow: 'hidden',
                height: '100%', display: 'flex', flexDirection: 'column', gap: 24,
                boxShadow: p.featured ? `0 30px 60px ${p.color}30` : '0 4px 20px rgba(8,16,31,0.04)',
                transform: p.featured ? 'translateY(-10px)' : 'translateY(0)',
                transition: 'transform 0.3s, box-shadow 0.3s',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = p.featured ? 'translateY(-16px)' : 'translateY(-8px)';
                  e.currentTarget.style.boxShadow = p.featured
                    ? `0 40px 80px ${p.color}44`
                    : '0 24px 60px rgba(8,16,31,0.12)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = p.featured ? 'translateY(-10px)' : 'translateY(0)';
                  e.currentTarget.style.boxShadow = p.featured
                    ? `0 30px 60px ${p.color}30`
                    : '0 4px 20px rgba(8,16,31,0.04)';
                }}
              >
                {p.featured && (
                  <div style={{
                    position: 'absolute', top: 18, right: 18,
                    padding: '6px 14px', borderRadius: 999,
                    background: p.color, color: T.ink,
                    fontFamily: T.mono, fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                  }}>★ più richiesto</div>
                )}

                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 16,
                    background: `${p.color}1A`, border: `1.5px solid ${p.color}66`,
                    display: 'grid', placeItems: 'center',
                    color: p.color, fontSize: 28, fontWeight: 700,
                  }}>{p.icon}</div>
                  <div style={{
                    fontFamily: T.serif, fontWeight: 900, fontSize: 32,
                    color: 'rgba(8,16,31,0.10)', letterSpacing: '-0.025em', lineHeight: 0.9,
                  }}>0{i + 1}</div>
                </div>

                <div>
                  <div style={{
                    fontFamily: T.mono, fontSize: 11, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: p.color, marginBottom: 14, fontWeight: 700,
                  }}>· {p.kicker}</div>
                  <h3 style={{
                    fontFamily: T.serif, fontWeight: 900, fontSize: 36,
                    color: T.ink, letterSpacing: '-0.025em', lineHeight: 1.0,
                    margin: '0 0 14px',
                  }}>{p.title}</h3>
                  <div style={{
                    fontFamily: T.sans, fontSize: 13, fontWeight: 500,
                    color: 'rgba(8,16,31,0.5)', lineHeight: 1.4,
                    letterSpacing: '0.01em',
                  }}>{p.tag}</div>
                </div>

                <p style={{
                  fontFamily: T.sans, fontSize: 14.5, color: 'rgba(8,16,31,0.7)',
                  lineHeight: 1.6, margin: 0,
                }}>{p.pitch}</p>

                <ul style={{
                  listStyle: 'none', padding: 0, margin: 0,
                  display: 'flex', flexDirection: 'column', gap: 14,
                }}>
                  {p.items.map((it, j) => (
                    <li key={j} style={{
                      display: 'flex', gap: 12, alignItems: 'flex-start',
                      fontFamily: T.sans, fontSize: 13.5, color: 'rgba(8,16,31,0.78)',
                      lineHeight: 1.5,
                    }}>
                      <span style={{
                        width: 18, height: 18, borderRadius: '50%',
                        background: `${p.color}18`, border: `1px solid ${p.color}66`,
                        display: 'grid', placeItems: 'center',
                        color: p.color, fontSize: 11, flexShrink: 0, marginTop: 1,
                        fontWeight: 700,
                      }}>✓</span>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>

                <div style={{
                  marginTop: 'auto', padding: '20px 22px',
                  borderRadius: 14,
                  background: `linear-gradient(135deg, ${p.color}10, ${p.color}05)`,
                  border: `1px solid ${p.color}33`,
                }}>
                  <div style={{
                    fontFamily: T.mono, fontSize: 9, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: 'rgba(8,16,31,0.5)',
                    marginBottom: 8, fontWeight: 600,
                  }}>// risultato atteso</div>
                  <div style={{
                    fontFamily: T.serif, fontWeight: 800, fontSize: 18,
                    color: T.ink, lineHeight: 1.25, letterSpacing: '-0.01em',
                  }}>{p.result}</div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal delay={400}>
          <div style={{
            marginTop: 56, padding: '36px 48px',
            background: 'rgba(255,255,255,0.06)',
            border: `1px solid ${T.green}40`,
            borderRadius: 18, color: '#fff', position: 'relative', overflow: 'hidden',
            backdropFilter: 'blur(8px)',
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
          }}>
            <div style={{
              position: 'absolute', top: -50, right: -50, width: 280, height: 280,
              background: `radial-gradient(circle, ${T.green}33, transparent 65%)`,
              filter: 'blur(40px)', pointerEvents: 'none',
            }}/>
            <div style={{ position: 'relative' }}>
              <div style={{
                fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: T.green, marginBottom: 12, fontWeight: 600,
              }}>// Non sai quale scegliere?</div>
              <p style={{
                fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(22px, 2vw, 32px)',
                color: '#fff', lineHeight: 1.2, margin: 0, letterSpacing: '-0.015em',
                maxWidth: 760, textWrap: 'balance',
              }}>
                Parliamone in call. <Italic color={T.green}>30 minuti</Italic> per capire obiettivi,
                budget e attività. Zero impegno.
              </p>
            </div>
            <PrimaryBtn href="#prenota-call" green>Prenota una call</PrimaryBtn>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// =============== PROCESS — LIGHT, animated timeline ===============
function SpProcess() {
  const steps = [
    {
      n: '01', tag: 'T—14gg', title: 'Call Strategica',
      copy: '30 minuti con il nostro team. Capiamo obiettivi, budget, audience target. Definiamo il pacchetto su misura per te.',
      icon: '☎', color: T.blue,
    },
    {
      n: '02', tag: 'T—7gg', title: 'Contratto e pianificazione',
      copy: 'Definiamo gli accordi. Briefing creativo dettagliato. Piano comunicazione personalizzato. Asset richiesti e timeline condivisa.',
      icon: '✎', color: T.green,
    },
    {
      n: '03', tag: 'T—30 → 0gg', title: 'Pre-evento',
      copy: 'Attivazione profilo su app. Stand virtuale online. Push notification alla community. Post social condivisi. Hype building.',
      icon: '◐', color: T.violetDeep,
    },
    {
      n: '04', tag: '16—18 OTT', title: 'Durante evento',
      copy: 'Stand fisico operativo. Team on-site per supporto. Live coverage. Raccolta lead in tempo reale. Networking facilitato.',
      icon: '★', color: T.ember,
    },
    {
      n: '05', tag: 'T+7gg', title: 'Post-evento',
      copy: 'Report completo lead generati. Metriche app e engagement. Materiale foto/video professionale. Follow-up strategico.',
      icon: '✓', color: T.blue,
    },
  ];

  const [tlRef, tlSeen] = useInView(0.2);

  return (
    <section style={{
      position: 'relative', padding: '140px 56px 160px',
      background: '#f4f6ff', color: T.ink, overflow: 'hidden',
    }}>
      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'end', marginBottom: 72 }}>
          <div>
            <LightEyebrow>// Processo · 5 step</LightEyebrow>
            <LightH2 max={860}>
              Dal primo contatto al <em style={{ fontStyle: 'italic', color: T.blue }}>sold-out del tuo stand</em>.
            </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,
          }}>
            Non ti lasciamo solo. Ti guidiamo step by step per massimizzare
            il tuo ROI: <em style={{ color: T.ink }}>un team dedicato dalla call iniziale al follow-up</em>.
          </p>
        </div>

        {/* Timeline */}
        <div ref={tlRef} style={{ position: 'relative' }}>
          {/* Background line */}
          <div style={{
            position: 'absolute', top: 30, left: '8%', right: '8%', height: 2,
            background: 'rgba(8,16,31,0.08)', pointerEvents: 'none',
          }}/>
          {/* Animated progress line */}
          <div style={{
            position: 'absolute', top: 30, left: '8%', height: 2,
            width: tlSeen ? '84%' : '0%',
            background: `linear-gradient(90deg, ${T.blue}, ${T.green}, ${T.violetDeep}, ${T.ember}, ${T.blue})`,
            transition: 'width 2.4s cubic-bezier(0.25,1,0.5,1)',
            pointerEvents: 'none', borderRadius: 2,
            boxShadow: `0 0 12px ${T.blue}55`,
          }}/>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16,
            position: 'relative',
          }}>
            {steps.map((s, i) => (
              <div key={i} style={{ position: 'relative' }}>
                {/* Node */}
                <div style={{
                  width: 60, height: 60, margin: '0 auto',
                  borderRadius: '50%', background: '#fff',
                  border: `2.5px solid ${tlSeen ? s.color : 'rgba(8,16,31,0.15)'}`,
                  display: 'grid', placeItems: 'center', position: 'relative',
                  color: tlSeen ? s.color : 'rgba(8,16,31,0.4)',
                  fontSize: 22,
                  boxShadow: tlSeen ? `0 8px 24px ${s.color}33` : '0 4px 12px rgba(8,16,31,0.06)',
                  transition: `all 0.6s ${i * 120}ms`,
                  transform: tlSeen ? 'scale(1)' : 'scale(0.6)',
                  zIndex: 2,
                }}>
                  {s.icon}
                  {/* Pulse ring on featured node */}
                  {i === 3 && tlSeen && (
                    <div style={{
                      position: 'absolute', inset: -6, borderRadius: '50%',
                      border: `2px solid ${s.color}`, opacity: 0.4,
                      animation: 'ringPulse 2s ease-out infinite',
                    }}/>
                  )}
                </div>

                {/* Card */}
                <div style={{
                  marginTop: 28, padding: '24px 22px 26px',
                  background: '#fff', border: '1px solid rgba(8,16,31,0.06)',
                  borderRadius: 14, height: 'calc(100% - 88px)', minHeight: 220,
                  display: 'flex', flexDirection: 'column', gap: 10,
                  boxShadow: '0 4px 20px rgba(8,16,31,0.04)',
                  transition: 'transform 0.3s, box-shadow 0.3s, border-color 0.3s',
                  opacity: tlSeen ? 1 : 0,
                  transform: tlSeen ? 'translateY(0)' : 'translateY(20px)',
                  transitionDelay: `${i * 120 + 200}ms`,
                  transitionDuration: '0.6s',
                }}
                  onMouseEnter={e => {
                    e.currentTarget.style.transform = 'translateY(-4px)';
                    e.currentTarget.style.boxShadow = '0 16px 40px rgba(8,16,31,0.10)';
                    e.currentTarget.style.borderColor = s.color + '55';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = '0 4px 20px rgba(8,16,31,0.04)';
                    e.currentTarget.style.borderColor = 'rgba(8,16,31,0.06)';
                  }}
                >
                  <div style={{
                    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                  }}>
                    <span style={{
                      fontFamily: T.serif, fontWeight: 900, fontSize: 40,
                      color: T.ink, letterSpacing: '-0.025em', lineHeight: 0.9,
                    }}>{s.n}</span>
                    <span style={{
                      fontFamily: T.mono, fontSize: 9, letterSpacing: '0.18em',
                      textTransform: 'uppercase', color: s.color, fontWeight: 700,
                      padding: '4px 10px', borderRadius: 4,
                      background: `${s.color}12`, border: `1px solid ${s.color}33`,
                    }}>{s.tag}</span>
                  </div>
                  <div style={{
                    fontFamily: T.serif, fontWeight: 800, fontSize: 19,
                    color: T.ink, letterSpacing: '-0.01em', lineHeight: 1.2,
                    marginTop: 4,
                  }}>{s.title}</div>
                  <p style={{
                    fontFamily: T.sans, fontSize: 13, color: 'rgba(8,16,31,0.65)',
                    lineHeight: 1.55, margin: 0,
                  }}>{s.copy}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SpLogos, SpTestimonials, SpPackages, SpProcess });