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

// =============== Esperienza — Marketplace / Contenuti / Networking / Workshop ===============
const EXP_CARDS = [
  {
    label: 'Marketers World',
    title: 'Fai networking con i migliori del settore',
    body: 'Entra in contatto con i player, le aziende e i tool più utilizzati da chi lavora nel mercato digitale.',
    footerTitle: 'Sono stati al World:',
    accent: '#6B8AFF',
    kind: 'logos',
    logos: [
      { n: 'WeRoad', l: window.mwAsset('assets/legacy/external/weroad-logo-white-3de3814f9b16.png') },
      { n: 'TechnoGym', l: window.mwAsset('assets/legacy/external/technogym-logo-white-f7e6d0c3a22a.png') },
      { n: 'Hoepli', l: window.mwAsset('assets/legacy/external/hoepli-logo-white-a885727854b5.png') },
      { n: 'Trustpilot', l: window.mwAsset('assets/legacy/external/trustpilot-logo-white-481b02ab1e62.png') },
      { n: 'Shopify', l: window.mwAsset('assets/legacy/external/shopify-logo-white-770a3968042e.png') },
      { n: 'Revolut', l: window.mwAsset('assets/legacy/external/revolut-logo-white-3a2ccda85705.png') },
      { n: 'Canva', l: window.mwAsset('assets/legacy/external/canva-logo-white-64732bc3860f.png') },
      { n: 'AdWorld', l: window.mwAsset('assets/legacy/external/adworld-logo-white-325e5495a7e9.png') },
    ],
  },
  {
    label: 'Contenuti e strategie',
    title: 'di estremo valore',
    body: 'Segui i talk tenuti dalle menti più brillanti del settore.',
    footerTitle: 'Talk passati:',
    accent: '#B69BFF',
    kind: 'talks',
    titleFull: 'Contenuti e strategie di estremo valore',
    talks: [
      { q: '"Come abbiamo scalato una scuola di Yoga da 0 a 1MLN€"', a: 'Emanuele Amodeo', src: window.mwAsset('assets/legacy/external/amodeo-989a14c82302.png') },
      { q: '"Come ho trasformato una semplice idea in un Business da 5 milioni di euro"', a: 'Andrea Giuliodori', src: window.mwAsset('assets/legacy/external/andrea-giuiodori-e070073d092a.png') },
      { q: '"Come sfruttare l\'influence marketing per creare campagne di advertising ad alta conversione"', a: 'Marcello Ascani', src: window.mwAsset('assets/legacy/external/ascani-9f0c1bb70bfe.png') },
      { q: '"Come trovare la tua strada nella vita e diventare un autore bestseller"', a: 'Gianluca Gotto', src: window.mwAsset('assets/legacy/external/gianluca-gotto-1-8712726a59eb.png') },
    ],
  },
  {
    label: 'Networking ed Eventi',
    title: 'la città dei marketers',
    body: 'Rimini diventa la casa dei Marketers! Partecipa a cene, aperitivi ed eventi diffusi in tutta la città.',
    footerTitle: 'Ecco chi incontrerai:',
    accent: '#2EE5A1',
    kind: 'mosaic',
    chips: ['Imprenditori digitali', 'Digital Marketers', 'Creators', 'Performance Marketers', 'Social Media Manager', 'Growth Manager', 'CEO e founders', 'TikTokers', 'Digital manager', 'Marketing Manager'],
    photos: [4, 22, 38, 54],
  },
  {
    label: 'Workshop Pratici',
    title: 'nuove competenze',
    body: 'Il Venerdì potrai prendere parte a Workshop pratici tenuti da esperti di settore dove potrai acquisire nuove competenze da integrare nella tua carriera.',
    footerTitle: 'Argomenti trattati:',
    accent: '#6B8AFF',
    kind: 'topics',
    topics: [
      { n: '01', t: 'Intelligenza artificiale' },
      { n: '02', t: 'Marketing digitale' },
      { n: '03', t: 'Branding' },
      { n: '04', t: 'Social Media Marketing' },
      { n: '05', t: 'Business Online' },
      { n: '06', t: 'Video Storytelling' },
      { n: '07', t: 'Copywriting' },
      { n: '08', t: 'Digital Advertising' },
    ],
  },
];

function Esperienza() {
  return (
    <Section dark={false} grid={false} style={{
      background: `linear-gradient(180deg, #F4F6FF 0%, #EBF1FF 50%, #F4F6FF 100%)`,
      color: T.ink,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Soft color washes for depth */}
      <div style={{
        position: 'absolute', top: '5%', left: '-10%', width: '55%', height: '60%',
        background: `radial-gradient(ellipse, ${T.electric}22, transparent 60%)`, filter: 'blur(110px)',
        pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', bottom: '5%', right: '-10%', width: '55%', height: '60%',
        background: `radial-gradient(ellipse, ${T.violet}33, transparent 60%)`, filter: 'blur(110px)',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative' }}>
      <Eyebrow accent={T.blue}>// Un solo biglietto, tre giorni di evento</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 24 }}>
        <h2 style={{
          fontFamily: T.serif, fontWeight: 800,
          fontSize: 'clamp(34px, 4.2vw, 60px)',
          color: T.ink, lineHeight: 1.0, margin: 0,
          letterSpacing: '-0.035em', maxWidth: 840, textWrap: 'balance',
        }}>
          Un solo biglietto, tre giorni di evento e <Italic color={T.blue}>grandi benefici.</Italic>
        </h2>
        <p style={{ fontSize: 16, color: T.body, lineHeight: 1.65, margin: '0 0 16px', maxWidth: 460 }}>
          Loghi, contenuti, strategie, networking diffuso e workshop pratici. Ecco cosa ottieni dentro
          al ticket del Marketers World 2026.
        </p>
      </div>

      {/* Banner strip — what's inside */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
        background: 'rgba(0,0,0,0.08)',
        border: '1px solid rgba(0,0,0,0.06)', borderRadius: 12,
        overflow: 'hidden', marginBottom: 32,
      }}>
        {[
          { n: '3', l: 'Giorni di evento', c: T.blue },
          { n: '60+', l: 'Speaker sul palco', c: T.violetDeep },
          { n: '20+', l: 'Workshop pratici', c: T.greenDark },
          { n: '8', l: 'Tracce tematiche', c: T.electric },
        ].map((s, i) => (
          <div key={i} style={{
            background: '#fff', padding: '24px 20px',
            display: 'flex', alignItems: 'baseline', gap: 12,
          }}>
            <div style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 42, color: T.ink, lineHeight: 1, letterSpacing: '-0.03em' }}>
              {s.n}
            </div>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: s.c, fontWeight: 600,
            }}>{s.l}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {EXP_CARDS.map((c, i) => (
          <div key={i} style={{
            padding: 36, borderRadius: 16,
            background: '#fff',
            border: `1px solid ${c.accent}44`,
            position: 'relative', overflow: 'hidden',
            transition: 'border-color 0.3s, box-shadow 0.3s, transform 0.3s',
            display: 'flex', flexDirection: 'column',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = c.accent + 'BB'; e.currentTarget.style.boxShadow = `0 12px 40px ${c.accent}33`; e.currentTarget.style.transform = 'translateY(-3px)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = c.accent + '44'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}
          >
            {/* Accent corner glow */}
            <div style={{
              position: 'absolute', top: '-40%', right: '-20%', width: '60%', height: '120%',
              background: `radial-gradient(ellipse, ${c.accent}18, transparent 60%)`,
              filter: 'blur(60px)', pointerEvents: 'none',
            }}/>

            {/* index */}
            <div style={{
              position: 'absolute', top: 24, right: 32,
              fontFamily: T.mono, fontSize: 12, color: c.accent, letterSpacing: '0.18em', fontWeight: 600,
            }}>/ {String(i + 1).padStart(2, '0')}</div>

            <div style={{
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
              color: c.accent, textTransform: 'uppercase', marginBottom: 16, position: 'relative', fontWeight: 600,
            }}>{c.label}</div>

            <h3 style={{
              fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(26px, 2.6vw, 36px)',
              lineHeight: 1.1, color: T.ink, margin: '0 0 16px', letterSpacing: '-0.02em',
              position: 'relative',
            }}>{c.titleFull || c.title}</h3>

            <p style={{ fontSize: 15, color: T.body, lineHeight: 1.6, margin: '0 0 28px', position: 'relative' }}>
              {c.body}
            </p>

            <div style={{
              height: 1, marginBottom: 24, position: 'relative',
              background: `repeating-linear-gradient(to right, ${c.accent}77 0 4px, transparent 4px 10px)`,
            }}/>

            <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: c.accent, marginBottom: 16, position: 'relative', fontWeight: 600 }}>
              {c.footerTitle}
            </div>

            {/* Variant per kind */}
            {c.kind === 'logos' && (
              <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
                background: 'rgba(75,107,251,0.18)', border: '1px solid rgba(75,107,251,0.18)',
                borderRadius: 10, overflow: 'hidden', position: 'relative',
                flex: 1,
              }}>
                {c.logos.map((lg, j) => (
                  <div key={j} style={{
                    background: '#EAF0FF', padding: '20px 14px', minHeight: 100,
                    display: 'grid', placeItems: 'center',
                  }} title={lg.n}>
                    <img src={lg.l} alt={lg.n} loading="lazy"
                      style={{
                        maxWidth: '92%', maxHeight: 44, objectFit: 'contain',
                        opacity: 0.85, filter: `brightness(0) saturate(100%) invert(28%) sepia(81%) saturate(2476%) hue-rotate(216deg) brightness(95%) contrast(98%)`,
                      }}/>
                  </div>
                ))}
              </div>
            )}

            {c.kind === 'talks' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
                {c.talks.map((t, j) => (
                  <div key={j} style={{
                    padding: 12, borderRadius: 8,
                    background: '#F4F6FF', border: `1px solid ${c.accent}33`,
                    display: 'grid', gridTemplateColumns: '52px 1fr', gap: 14, alignItems: 'center',
                  }}>
                    <div style={{
                      width: 52, height: 52, borderRadius: '50%', overflow: 'hidden',
                      background: '#e5e5ea', border: `1.5px solid ${c.accent}88`, flexShrink: 0,
                    }}>
                      <img src={t.src} alt={t.a} loading="lazy"
                        style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }}
                        onError={e => { e.currentTarget.style.display = 'none'; }}/>
                    </div>
                    <div>
                      <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 14, color: T.ink, lineHeight: 1.35 }}>
                        {t.q}
                      </div>
                      <div style={{ fontSize: 11, color: c.accent, marginTop: 4, fontFamily: T.mono, letterSpacing: '0.1em', fontWeight: 600 }}>
                        — {t.a}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {c.kind === 'mosaic' && (
              <div style={{ position: 'relative' }}>
                {/* Mini photo strip */}
                <div style={{
                  display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4, marginBottom: 14,
                  borderRadius: 8, overflow: 'hidden',
                }}>
                  {c.photos.map((idx, j) => (
                    <div key={j} style={{
                      aspectRatio: '1/1', overflow: 'hidden', position: 'relative',
                      background: T.ink2,
                    }}>
                      <img src={(window.MW_PHOTOS || [])[idx]} alt="" loading="lazy"
                        style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.1)' }}/>
                      <div style={{
                        position: 'absolute', inset: 0,
                        background: `linear-gradient(180deg, transparent 50%, ${c.accent}44 100%)`,
                      }}/>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {c.chips.map((it, j) => (
                    <span key={j} style={{
                      padding: '6px 12px', borderRadius: 40,
                      background: `${c.accent}1A`, border: `0.5px solid ${c.accent}66`,
                      fontSize: 11, color: T.ink, fontFamily: T.sans, fontWeight: 600,
                    }}>{it}</span>
                  ))}
                </div>
              </div>
            )}

            {c.kind === 'topics' && (
              <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1,
                background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.06)',
                borderRadius: 10, overflow: 'hidden', position: 'relative',
              }}>
                {c.topics.map((tp, j) => (
                  <div key={j} style={{
                    background: '#F4F6FF', padding: '14px 16px',
                    display: 'flex', alignItems: 'center', gap: 12,
                  }}>
                    <span style={{
                      fontFamily: T.mono, fontSize: 10, letterSpacing: '0.14em',
                      color: c.accent, minWidth: 24, fontWeight: 600,
                    }}>{tp.n}</span>
                    <span style={{ fontSize: 13, color: T.ink, fontFamily: T.sans, fontWeight: 600 }}>
                      {tp.t}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
      </div>
    </Section>
  );
}

// =============== Certificazione ===============
function Certificazione() {
  return (
    <Section dark={false} grid={false} style={{ background: T.off }} pad="120px 56px">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.7fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow accent={T.blue}>// Certificazione Europea</Eyebrow>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(34px, 4vw, 56px)',
            lineHeight: 1.05, color: T.ink, margin: '0 0 28px', letterSpacing: '-0.01em', textWrap: 'balance',
          }}>
            Certifica le competenze che acquisisci al <Italic color={T.blue}>Marketers World.</Italic>
          </h2>
          <p style={{ fontSize: 16, color: T.body, lineHeight: 1.7, margin: '0 0 20px', maxWidth: 580 }}>
            La certificazione, rilasciata da <strong>Organismo di Parte Terza — Istituto di Certificazione Europea del Personale</strong>,
            non è solo un attestato di partecipazione, ma un vero riconoscimento delle tue competenze.
          </p>
          <p style={{ fontSize: 16, color: T.body, lineHeight: 1.7, margin: 0, maxWidth: 580 }}>
            Superando il Test Finale, avrai l'opportunità di ricevere <strong>CFP non formali</strong> riconosciuti
            dagli Ordini Professionali (a loro insindacabile giudizio). Un traguardo che valorizza il tuo percorso
            formativo e una garanzia per le tue skills nel mondo digitale.
          </p>
        </div>

        {/* Badge */}
        <div style={{
          aspectRatio: '1/1', borderRadius: 16,
          background: '#fff', border: T.borderLight,
          display: 'grid', placeItems: 'center', position: 'relative', overflow: 'hidden',
        }}>
          {/* concentric */}
          <svg viewBox="0 0 200 200" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
            <defs>
              <path id="circle" d="M 100, 100 m -78, 0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0"/>
            </defs>
            <circle cx="100" cy="100" r="92" fill="none" stroke={T.blue} strokeWidth="0.5"/>
            <circle cx="100" cy="100" r="78" fill="none" stroke={T.blue} strokeWidth="0.5"/>
            <circle cx="100" cy="100" r="62" fill="none" stroke={T.blue} strokeWidth="1"/>
            <text style={{ fontFamily: T.mono, fontSize: 6, letterSpacing: '0.3em', fill: T.blue }}>
              <textPath xlinkHref="#circle" startOffset="0">
                · CERTIFIED · MARKETERS · WORLD · 2026 · CFP · EUROPEAN · CERTIFICATION · BODY · 
              </textPath>
            </text>
            {/* center icon */}
            <circle cx="100" cy="100" r="42" fill={T.blue}/>
            <path d="M 80 100 L 95 115 L 122 88" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </Section>
  );
}

// =============== Press quotes — 3x3 photo + quote grid ===============
function Trustpilot() {
  const photos = window.MW_PHOTOS || [];
  // 9-cell grid; some are quote cards (q,a), others are photos (idx)
  const cells = [
    { kind: 'photo', idx: 4 },
    { kind: 'quote', q: 'Arriva «Marketers World», l\'evento dedicato alle carriere digitali.', a: 'Vanity Fair', bg: `linear-gradient(135deg, #4B6BFB 0%, #6B8AFF 100%)` },
    { kind: 'photo', idx: 22 },

    { kind: 'quote', q: 'Un evento dedicato agli imprenditori digitali del nostro paese.', a: 'Il Sole 24 Ore', bg: `linear-gradient(135deg, #5B7DFF 0%, #7C5BFF 100%)` },
    { kind: 'photo', idx: 38 },
    { kind: 'photo', idx: 54 },

    { kind: 'photo', idx: 50 },
    { kind: 'photo', idx: 33 },
    { kind: 'photo', idx: 62 },
  ];

  return (
    <section style={{
      position: 'relative',
      background: T.ink,
      padding: '100px 0 0',
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 56px 56px' }}>
        <Eyebrow accent={T.blueLight}>// Press & Reviews</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 8 }}>
          <H2 max={760}>
            Quello che dicono di noi i grandi <Italic>magazine italiani.</Italic>
          </H2>
          <div style={{
            padding: '20px 24px', borderRadius: 12,
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(75,107,251,0.20)',
            display: 'flex', alignItems: 'center', gap: 16,
          }}>
            <div>
              <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
                {[0,1,2,3,4].map(i => (
                  <div key={i} style={{ width: 18, height: 18, background: '#00B67A', borderRadius: 2, display: 'grid', placeItems: 'center' }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 28, color: '#fff', lineHeight: 1 }}>4.9</span>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>/ 5 · 1.000+ reviews</span>
              </div>
            </div>
            <span style={{ width: 1, alignSelf: 'stretch', background: 'rgba(255,255,255,0.12)' }}/>
            <span style={{
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.2em',
              textTransform: 'uppercase', color: '#00B67A', fontWeight: 600,
            }}>TRUSTPILOT</span>
          </div>
        </div>
      </div>

      {/* 3x3 full-bleed grid */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4,
        background: 'rgba(255,255,255,0.06)',
      }}>
        {cells.map((c, i) => {
          if (c.kind === 'photo') {
            return (
              <div key={i} style={{
                aspectRatio: '4/3', position: 'relative', overflow: 'hidden',
                background: T.ink2,
              }}>
                <img src={photos[c.idx]} alt="" loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.05)' }}/>
              </div>
            );
          }
          return (
            <div key={i} style={{
              aspectRatio: '4/3', position: 'relative', overflow: 'hidden',
              background: c.bg, padding: '36px 40px',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              {/* Subtle grid overlay on quote cards */}
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage:
                  'linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),' +
                  'linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)',
                backgroundSize: '40px 40px',
                pointerEvents: 'none',
              }}/>
              <h3 style={{
                fontFamily: '"Archivo Black", "Archivo", Impact, sans-serif',
                fontWeight: 900,
                fontSize: 'clamp(22px, 2.3vw, 34px)',
                lineHeight: 1.15, color: '#fff', margin: 0, letterSpacing: '-0.005em',
                position: 'relative', textWrap: 'balance',
              }}>
                {c.q}
              </h3>
              <div style={{
                fontFamily: '"Archivo", "Inter", sans-serif',
                fontWeight: 500, fontStyle: 'italic',
                fontSize: 17, color: '#fff', opacity: 0.95,
                position: 'relative',
              }}>
                — {c.a}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// =============== Marketers Pro bundle ===============
function ProBundle() {
  return (
    <Section dark={true} grid={false} style={{
      background: `linear-gradient(180deg, ${T.ink} 0%, ${T.ink2} 100%)`,
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow>// INCLUSO NEL BUNDLE</Eyebrow>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(34px, 4vw, 56px)',
            lineHeight: 1.05, color: '#fff', margin: '0 0 16px', letterSpacing: '-0.01em', textWrap: 'balance',
          }}>
            Un anno di <Italic>Marketers Pro</Italic> incluso nel prezzo.
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, margin: '0 0 32px', maxWidth: 480 }}>
            Prendi il ticket Standard del Marketers World 2026 e ottieni 12 mesi di Marketers Pro.
            Pacchetto disponibile in finestra di lancio.
          </p>

          {/* Features grid */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 24px' }}>
            {[
              'Percorso Metodo Marketers', 'Community privata',
              'Manuale cartaceo', 'Workshop in streaming',
              'Report strategici', 'Meetup ed eventi privati',
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, color: 'rgba(255,255,255,0.85)' }}>
                <span style={{ width: 18, height: 18, borderRadius: 4, background: 'rgba(75,107,251,0.15)', border: '1px solid rgba(75,107,251,0.4)', display: 'grid', placeItems: 'center', color: T.blueLight, fontSize: 11 }}>✓</span>
                {f}
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginTop: 36 }}>
            <span style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 56, color: '#fff', letterSpacing: '-0.02em' }}>498€</span>
            <span style={{ fontSize: 18, color: 'rgba(255,255,255,0.4)', textDecoration: 'line-through' }}>627€</span>
            <span style={{ fontFamily: T.mono, fontSize: 11, color: T.blueLight, letterSpacing: '0.14em', textTransform: 'uppercase' }}>· I.I.</span>
          </div>
          <div style={{ marginTop: 24 }}>
            <PrimaryBtn href="https://community.wearemarketers.net/checkout/marketers-pro-mastermind-2025">Acquista ora</PrimaryBtn>
          </div>
        </div>

        {/* Visual */}
        <div style={{
          padding: 32, borderRadius: 16,
          background: 'rgba(75,107,251,0.06)',
          border: '1px solid rgba(75,107,251,0.2)',
        }}>
          <div style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: T.blueLight, marginBottom: 16,
          }}>WeAreMarketers PRO · 365 days</div>
          {/* 6 placeholder thumbnails */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {['Metodo', 'Box', 'Manuale', 'Community', 'Masterclass', 'Roundup'].map((l, i) => (
              <div key={i} style={{
                aspectRatio: '1/1', borderRadius: 10,
                background: `linear-gradient(${135 + i * 30}deg, ${T.blueMedium}, ${T.electric})`,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  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: '14px 14px',
                }}/>
                <div style={{
                  position: 'absolute', bottom: 10, left: 12,
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: '#fff',
                }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// =============== Tickets ===============
const TICKETS = [
  {
    tier: 'Standard', price: 257, full: 427, save: 180,
    badge: null,
    features: [
      { t: 'Accesso a 3 giorni di evento', on: true },
      { t: 'Videoregistrazioni incluse', on: false },
      { t: 'Fast Track', on: false },
      { t: 'Accesso alla Lounge', on: false },
      { t: 'Zaino, Borraccia e T-shirt', on: false },
      { t: 'Posto riservato centrale', on: false },
      { t: 'Accesso prioritario ai Workshop', on: false },
    ],
    bonus: ['Digital manager', 'Marketing Manager'],
  },
  {
    tier: 'Premium', price: 307, full: 477, save: 170,
    badge: 'Più acquistato',
    features: [
      { t: 'Accesso a 3 giorni di evento', on: true },
      { t: 'Videoregistrazioni incluse', on: true },
      { t: 'Fast Track', on: false },
      { t: 'Accesso alla Lounge', on: false },
      { t: 'Zaino, Borraccia e T-shirt', on: false },
      { t: 'Posto riservato centrale', on: false },
      { t: 'Accesso prioritario ai Workshop', on: false },
    ],
    bonus: ['Marketers Pro 365 giorni', 'Marketers Box'],
  },
  {
    tier: 'Plus', price: 447, full: 697, save: 250,
    badge: null,
    features: [
      { t: 'Accesso a 3 giorni di evento', on: true },
      { t: 'Videoregistrazioni incluse', on: true },
      { t: 'Fast Track', on: true },
      { t: 'Accesso alla Lounge', on: false },
      { t: 'Zaino, Borraccia e T-shirt', on: true },
      { t: 'Posto riservato davanti centrale', on: true },
      { t: 'Accesso prioritario ai Workshop', on: true },
    ],
    bonus: ['Marketers Pro 365 giorni', 'Marketers Box'],
  },
  {
    tier: 'Executive', price: 547, full: 797, save: 250,
    badge: null,
    features: [
      { t: 'Accesso a 3 giorni di evento', on: true },
      { t: 'Videoregistrazioni incluse', on: true },
      { t: 'Fast Track', on: true },
      { t: 'Accesso alla Lounge', on: true },
      { t: 'Zaino, Borraccia e T-shirt', on: true },
      { t: 'Posto riservato davanti centrale', on: true },
      { t: 'Accesso prioritario ai Workshop', on: true },
    ],
    bonus: ['Digital manager', 'Marketing Manager'],
  },
];

function Tickets() {
  return (
    <Section id="biglietti" dark={false} grid={false} style={{ background: T.off }} pad="120px 56px">
      <Eyebrow accent={T.blue}>// Biglietti MW26</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'flex-end', marginBottom: 16 }}>
        <h2 style={{
          fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(34px, 4vw, 56px)',
          lineHeight: 1.05, color: T.ink, margin: 0, letterSpacing: '-0.01em', textWrap: 'balance',
        }}>
          Prendi il tuo ticket <Italic color={T.blue}>Marketers World.</Italic>
        </h2>
        <div style={{
          padding: 16, borderRadius: 8,
          background: T.bluePale, border: `1px solid ${T.electric}33`,
        }}>
          <p style={{ fontSize: 13, color: T.body, lineHeight: 1.55, margin: 0 }}>
            Ottieni il tuo Ticket MW26 al <strong style={{ color: T.blue }}>prezzo di lancio</strong>, valido fino al 29 aprile alle 23:59.
            Sei un cliente Marketers Pro? Usa il codice <code style={{ background: '#fff', padding: '2px 8px', borderRadius: 4, fontFamily: T.mono, color: T.blue, fontSize: 12 }}>mw2620offapr</code> e ottieni 20€ di sconto.
          </p>
        </div>
      </div>

      {/* Ticket grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 48 }}>
        {TICKETS.map((t, i) => {
          const premium = !!t.badge;
          return (
            <div key={i} style={{
              padding: 28, borderRadius: 12,
              background: '#fff',
              border: premium ? T.borderPremium : T.borderLight,
              position: 'relative', display: 'flex', flexDirection: 'column',
              transition: 'transform 0.3s, box-shadow 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 0 32px rgba(23,70,245,0.12)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              {/* Badge */}
              {premium && (
                <div style={{
                  position: 'absolute', top: -12, left: 24,
                  padding: '5px 12px', background: T.blue, color: '#fff',
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.16em',
                  textTransform: 'uppercase', borderRadius: 4, fontWeight: 600,
                }}>{t.badge}</div>
              )}

              <div style={{
                fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
                color: T.muted, textTransform: 'uppercase', marginBottom: 8,
              }}>Ticket</div>
              <h3 style={{
                fontFamily: T.serif, fontWeight: 800, fontSize: 32,
                color: T.ink, margin: '0 0 16px', letterSpacing: '-0.01em',
              }}>{t.tier}</h3>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 44, color: T.ink, letterSpacing: '-0.02em' }}>
                  {t.price}<span style={{ color: T.blue, fontSize: 28 }}>€</span>
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4, marginBottom: 24 }}>
                <span style={{ fontSize: 13, color: T.muted, textDecoration: 'line-through' }}>{t.full}€</span>
                <span style={{ fontSize: 11, fontFamily: T.mono, color: T.blue, padding: '2px 8px', background: T.bluePale, borderRadius: 4, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                  Risparmia {t.save}€
                </span>
              </div>

              {/* Features */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                {t.features.map((f, j) => (
                  <div key={j} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    fontSize: 13, color: f.on ? T.ink : T.muted,
                    opacity: f.on ? 1 : 0.55,
                  }}>
                    <span style={{
                      width: 16, height: 16, borderRadius: '50%',
                      background: f.on ? T.blue : 'transparent',
                      border: f.on ? 'none' : `1px solid ${T.muted}`,
                      display: 'grid', placeItems: 'center',
                      color: '#fff', fontSize: 9, flexShrink: 0,
                    }}>{f.on ? '✓' : '–'}</span>
                    {f.t}
                  </div>
                ))}
              </div>

              {/* Bonus */}
              <div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px dashed rgba(0,0,0,0.08)' }}>
                {t.bonus.map((b, j) => (
                  <div key={j} style={{ fontSize: 12, color: T.body, fontFamily: T.sans, marginBottom: 6 }}>
                    <span style={{ fontFamily: T.mono, color: T.blue, fontWeight: 500, marginRight: 8, letterSpacing: '0.08em' }}>BONUS:</span>
                    {b}
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 20 }}>
                <PrimaryBtn href="#" style={{ width: '100%', justifyContent: 'center', boxShadow: premium ? T.glowCta : T.glowMd }}>
                  Acquista ora
                </PrimaryBtn>
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer info */}
      <div style={{
        marginTop: 40,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
      }}>
        <div style={{
          padding: 24, borderRadius: 12, background: '#fff', border: T.borderLight,
          display: 'flex', alignItems: 'center', gap: 20,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 8, background: T.bluePale,
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={T.blue} strokeWidth="1.5" strokeLinecap="round"><path d="M2 8h20M2 16h20M6 12h12"/></svg>
          </div>
          <div>
            <div style={{ fontFamily: T.serif, fontWeight: 700, fontSize: 16, color: T.ink, lineHeight: 1.3 }}>
              Preferisci il pagamento rateale?
            </div>
            <div style={{ fontSize: 13, color: T.body, marginTop: 4, lineHeight: 1.5 }}>
              In fase di checkout potrai rateizzare l'acquisto del tuo ticket per il MW26 tramite Scalapay.
            </div>
          </div>
        </div>

        <div style={{
          padding: 24, borderRadius: 12, background: '#fff', border: T.borderLight,
          display: 'flex', alignItems: 'center', gap: 20,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 8, background: T.bluePale,
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={T.blue} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.serif, fontWeight: 700, fontSize: 16, color: T.ink, lineHeight: 1.3 }}>
              Hai un'azienda? Porta tutto il team.
            </div>
            <div style={{ fontSize: 13, color: T.body, marginTop: 4, lineHeight: 1.5 }}>
              Se siete almeno 5, avete diritto al nostro pacchetto speciale.
            </div>
          </div>
          <GhostBtn href="https://wa.me/393514980294" dark={false} style={{ padding: '10px 18px', fontSize: 12 }}>Contattaci ora →</GhostBtn>
        </div>
      </div>

      {/* Trustpilot bottom */}
      <div style={{
        marginTop: 40, padding: '24px 32px', borderRadius: 12,
        background: '#fff', border: T.borderLight,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20,
      }}>
        <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.body }}>
          Recensito da 1.000+ persone
        </span>
        <span style={{ display: 'flex', gap: 4 }}>
          {[0, 1, 2, 3, 4].map(i => (
            <div key={i} style={{ width: 18, height: 18, background: '#00B67A', borderRadius: 2, display: 'grid', placeItems: 'center' }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            </div>
          ))}
        </span>
        <span style={{ fontFamily: T.serif, fontWeight: 800, fontSize: 18, color: T.ink }}>4.9/5</span>
        <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', color: '#00B67A' }}>TRUSTPILOT</span>
      </div>
    </Section>
  );
}

// =============== Testimonianze Rockstar ===============
// videoId = ID Gumlet, replicato dalla landing marketersworld.net
const TESTIMONIALS = [
  { name: 'Giulia Calcaterra', quote: 'Il Marketers World è il posto perfetto, dove prendere le informazioni che ti mancano per partire con il tuo progetto.', src: window.mwAsset('assets/legacy/external/testimonianza-rockstar-giulia-calcaterra-88435a60537a.jpg'), videoId: '6998397571f7bf393af77448' },
  { name: 'Luca Mazzucchelli', quote: 'Una bolla di energia e visione che ti fa ripensare a cosa stai costruendo davvero.', src: window.mwAsset('assets/legacy/external/testimonianza-rockstar-luca-mazzucchelli-4094f8b8b3a4.jpg'), videoId: '6998398426981d89133797d2' },
  { name: 'Wild Flower Mood', quote: 'Persone con cui condividi valori, obiettivi e passioni. Esattamente quello che stavo cercando.', src: window.mwAsset('assets/legacy/external/testimonianza-rockstar-wildflowermood-e80b35a6e1c5.jpg'), videoId: '6998395926981d891337913b' },
  { name: 'Emalloru', quote: 'Tre giorni e cambi del tutto la prospettiva su quello che vuoi fare nei prossimi 12 mesi.', src: window.mwAsset('assets/legacy/external/testimonianza-rockstar-emalloru-cd7dea8bed06.jpg'), videoId: '6998395926981d891337913d' },
  { name: 'Arianna Cavina', quote: 'Networking di altissimo livello, contenuti che valgono dieci volte il biglietto.', src: window.mwAsset('assets/legacy/external/testimonianza-rockstar-arianna-cavina-d2d1bcd62bd0.jpg'), videoId: '6998396f26981d891337944a' },
  { name: 'Pietro Michelangeli', quote: 'L\'evento che ogni anno mi ricarica e mi dà gli stimoli per i 12 mesi successivi.', src: window.mwAsset('assets/legacy/external/testimonianza-rockstar-pietro-michelangeli-dbfd8309a8d5.jpg'), videoId: '6998398457a7b7f9b0037f32' },
];

function Testimonianze() {
  const [active, setActive] = useS3(0);
  const [playing, setPlaying] = useS3(false);
  const cur = TESTIMONIALS[active];

  // Ferma il video quando cambia testimone
  useE3(() => { setPlaying(false); }, [active]);
  return (
    <section style={{
      position: 'relative',
      background: 'linear-gradient(135deg, #0D3D26 0%, #1B8B4F 35%, #29C77A 65%, #1B8B4F 100%)',
      padding: '100px 56px 110px',
      overflow: 'hidden',
    }}>
      {/* Animated panning gradient overlay */}
      <div className="bg-pan-slow" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(115deg, #0D3D26 0%, #29C77A 30%, #2EE5A1 50%, #1B8B4F 75%, #0D3D26 100%)',
        opacity: 0.65,
        pointerEvents: 'none',
        animationDuration: '22s',
      }}/>
      {/* Drifting radial washes */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-15%', left: '-10%', width: '60%', height: '80%',
        background: 'radial-gradient(ellipse, rgba(46,229,161,0.55), transparent 60%)',
        filter: 'blur(110px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '-20%', right: '-10%', width: '60%', height: '80%',
        background: 'radial-gradient(ellipse, rgba(18,138,75,0.7), transparent 60%)',
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>

      {/* Tech blueprint grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 90%)',
      }}/>
      {/* Tighter inner grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '20px 20px',
        opacity: 0.5,
      }}/>

      {/* Top wedge accent */}
      <svg viewBox="0 0 1440 70" preserveAspectRatio="none"
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: 70, pointerEvents: 'none' }}>
        <path d="M0,0 L0,40 L1440,12 L1440,0 Z" fill="#2EE5A1" opacity="0.95"/>
      </svg>

      <div style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'center',
      }}>
        {/* Left: quote + thumbnails */}
        <div>
          <div style={{
            fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', marginBottom: 28,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 8, height: 8, background: '#fff', borderRadius: '50%' }}/>
            Le testimonianze delle rockstar
          </div>

          <h2 style={{
            fontFamily: T.serif,
            fontWeight: 800,
            fontSize: 'clamp(32px, 3.8vw, 56px)',
            lineHeight: 1.12,
            color: '#fff',
            letterSpacing: '-0.015em',
            margin: 0,
            textWrap: 'balance',
            maxWidth: 720,
          }}>
            {cur.quote.replace(/[.…]+$/, '')}
          </h2>
          <div style={{
            marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 16,
            fontFamily: T.serif, fontStyle: 'italic', fontWeight: 700,
            fontSize: 22, color: '#fff',
          }}>
            <span style={{ width: 28, height: 2, background: '#fff', display: 'inline-block' }}/>
            {cur.name}
          </div>

          {/* Handwritten arrow */}
          <div style={{ marginTop: 52, marginBottom: 8 }}>
            <img
              src={window.mwAsset('assets/legacy/external/mkw24-icon-handwritten-testimonial-1-c96ff8216a2a.png')}
              alt="fai click e ascolta le testimonianze"
              loading="lazy"
              style={{
                width: 200, height: 'auto', display: 'block',
                filter: 'brightness(0) invert(1)',
              }}
              onError={e => { e.currentTarget.style.display = 'none'; }}
            />
          </div>

          {/* Avatar thumbnails */}
          <div className="mw-testimonianze-avatars" style={{
            display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
            maxWidth: 560,
          }}>
            {TESTIMONIALS.map((t, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                padding: 0,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
              }}>
                <div style={{
                  width: 72, height: 72, borderRadius: '50%',
                  overflow: 'hidden',
                  border: active === i ? '3px solid #fff' : '2px solid rgba(255,255,255,0.55)',
                  boxShadow: active === i ? '0 0 0 4px rgba(255,255,255,0.25), 0 0 24px rgba(46,229,161,0.4)' : 'none',
                  transition: 'all 0.3s',
                  background: '#15724A',
                }}>
                  <img src={t.src} alt={t.name} loading="lazy"
                    style={{
                      width: '100%', height: '100%', objectFit: 'cover',
                      filter: active === i ? 'none' : 'saturate(1.05)',
                    }}/>
                </div>
                <div style={{
                  fontFamily: '"Archivo", "Inter", sans-serif', fontWeight: 700,
                  fontSize: 12, color: '#fff', textAlign: 'center',
                  lineHeight: 1.15, letterSpacing: 0,
                }}>{t.name}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Right: large video frame + vertical text */}
        <div className="mw-testimonianze-frame-wrap" style={{ position: 'relative', display: 'flex', alignItems: 'stretch', gap: 20, justifyContent: 'flex-end' }}>
          <div className="mw-testimonianze-frame" style={{
            flex: '0 0 320px', width: 320, maxWidth: '100%', position: 'relative',
            aspectRatio: '9/16',
            borderRadius: 14, overflow: 'hidden',
            border: '3px solid rgba(255,255,255,0.55)',
            boxShadow: '0 0 0 4px rgba(255,255,255,0.18), 0 30px 60px rgba(8,40,24,0.40)',
            background: '#13654A',
          }}>
            {playing ? (
              <video
                key={cur.videoId}
                src={`https://video.gumlet.io/69981ad857a7b7f9b0ff7333/${cur.videoId}/download.mp4`}
                controls
                autoPlay
                playsInline
                controlsList="nodownload"
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%', objectFit: 'cover',
                  background: '#000',
                }}
              />
            ) : (
              <div onClick={() => setPlaying(true)} style={{
                position: 'absolute', inset: 0, cursor: 'pointer',
              }}>
                <img src={cur.src} alt={cur.name} loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%)',
                }}/>
                <button
                  onClick={(e) => { e.stopPropagation(); setPlaying(true); }}
                  aria-label={`Guarda la testimonianza di ${cur.name}`}
                  style={{
                  position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 104, height: 104, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(4px)',
                  color: '#fff', border: '3px solid #fff',
                  cursor: 'pointer', transition: 'all 0.3s',
                  display: 'grid', placeItems: 'center',
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = '#1B8B4F'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; e.currentTarget.style.color = '#fff'; }}
                >
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 4 }}><path d="M8 5v14l11-7z"/></svg>
                </button>
              </div>
            )}
          </div>

          <a href="https://marketersworld.net/testimonianze/" style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between',
            textDecoration: 'none', color: '#fff',
            padding: '12px 0',
          }}>
            <span style={{
              writingMode: 'vertical-rl', transform: 'rotate(180deg)',
              fontFamily: '"Archivo Black", "Archivo", sans-serif',
              fontWeight: 900, fontSize: 13, letterSpacing: '0.22em',
              textTransform: 'uppercase',
            }}>
              Ascolta tutte le rockstar →
            </span>
            <span aria-hidden style={{
              width: 40, height: 40, borderRadius: '50%',
              background: '#fff', color: '#1B8B4F',
              display: 'grid', placeItems: 'center',
              fontFamily: '"Archivo Black", sans-serif', fontSize: 18,
            }}>↑</span>
          </a>
        </div>
      </div>

    </section>
  );
}

// =============== Sponsors — real logos ===============
const SPONSORS = [
  { n: 'Canva', l: window.mwAsset('assets/legacy/external/canva-logo-white-64732bc3860f.png') },
  { n: 'ActivePowered', l: window.mwAsset('assets/legacy/external/activepowered-logo-white-dc0f056f9986.png') },
  { n: 'Hoepli', l: window.mwAsset('assets/legacy/external/hoepli-logo-white-a885727854b5.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: 'Instax', l: window.mwAsset('assets/legacy/external/instax-logo-white-01-692b5a683822.png') },
  { n: 'Fujifilm', l: window.mwAsset('assets/legacy/external/fujifilm-logo-white-01-45bd066cded5.png') },
  { n: 'SilentSystem', l: window.mwAsset('assets/legacy/external/silentsystem-logo-white-888e38cdb5d6.png') },
  { n: 'FirmOnline', l: window.mwAsset('assets/legacy/external/firmonline-logo-white-999da71993c1.png') },
  { n: 'WhitePress', l: window.mwAsset('assets/legacy/external/whitepress-logo-white-07d5d8341a19.png') },
  { n: 'Ergonet', l: window.mwAsset('assets/legacy/external/ergonet-logo-white-8e071b9f45f7.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: 'Eremi', l: window.mwAsset('assets/legacy/external/eremi-logo-white-74184f136684.png') },
  { n: 'e-Estonia', l: window.mwAsset('assets/legacy/external/republic-of-estonia-logo-white-2b9c9a8ec50e.png') },
  { n: 'Yodo', l: window.mwAsset('assets/legacy/external/yodo-logo-white-137961cd2e39.png') },
  { n: 'GiftCampaign', l: window.mwAsset('assets/legacy/external/giftcampaign-logo-white-b44fe3e0d5ba.png') },
  { n: 'il Rogo', l: window.mwAsset('assets/legacy/external/ilrogo-logo-white-fe4c10594857.png') },
  { n: 'Voxloud', l: window.mwAsset('assets/legacy/external/voxloud-logo-white-bc959958a391.png') },
  { n: 'Serenis', l: window.mwAsset('assets/legacy/external/serenis-logo-white-73b8e2c2eac0.png') },
  { n: 'Esmerise', l: window.mwAsset('assets/legacy/external/esmerise-logo-white-b6a28e52b8d2.png') },
  { n: 'Artis', l: window.mwAsset('assets/legacy/external/artis-logo-white-93bba041f830.png') },
  { n: 'Baladin', l: window.mwAsset('assets/legacy/external/baladin-logo-white-65b4f424fe28.png') },
];

function Sponsors() {
  return (
    <Section className="mw-sponsors-section" dark={false} grid={false} style={{
      background: `linear-gradient(180deg, #DEE9FF 0%, #C7D8FF 100%)`,
      color: T.ink,
      position: 'relative', overflow: 'hidden',
    }} pad="100px 56px">
      {/* Soft accent glow */}
      <div style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: '60%', height: '50%',
        background: `radial-gradient(ellipse, rgba(75,107,251,0.10), transparent 70%)`,
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative' }}>
      <Eyebrow accent={T.blue}>// Gli sponsor del MW26</Eyebrow>
      <h2 style={{
        fontFamily: T.serif, fontWeight: 800,
        fontSize: 'clamp(34px, 4.2vw, 60px)',
        color: T.ink, lineHeight: 1.0, margin: '0 0 32px',
        letterSpacing: '-0.035em', textWrap: 'balance',
      }}>
        Gli sponsor del <Italic color={T.blue}>MW26.</Italic>
      </h2>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 2,
        background: 'transparent',
        borderRadius: 12, overflow: 'hidden',
        boxShadow: '0 8px 32px rgba(23,70,245,0.18)',
      }}>
        {SPONSORS.map((s, i) => (
          <div key={i} style={{
            background: `linear-gradient(135deg, ${T.blueMedium} 0%, ${T.blue} 50%, ${T.electric} 100%)`,
            padding: '24px 16px', minHeight: 110,
            display: 'grid', placeItems: 'center',
            transition: 'filter 0.3s',
          }}
            onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.08)'; }}
            onMouseLeave={e => { e.currentTarget.style.filter = 'brightness(1)'; }}
            title={s.n}
          >
            <img src={s.l} alt={s.n} loading="lazy"
              style={{
                maxWidth: '88%', maxHeight: 36, objectFit: 'contain',
                opacity: 0.85, filter: 'brightness(0) invert(1)',
                transition: 'opacity 0.3s',
              }}
              onMouseEnter={e => { e.currentTarget.style.opacity = '1'; }}
              onMouseLeave={e => { e.currentTarget.style.opacity = '0.85'; }}
            />
          </div>
        ))}
      </div>

      {/* Partner subsections */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 32 }}>
        {[
          { label: 'Hospitality Partner', name: 'Club del Sole', accent: T.blue },
          { label: 'Coffee Partner', name: 'Nespresso Professional', accent: T.violetDeep },
          { label: 'Sustainability Partner', name: '24 Bottles', accent: T.greenDark },
        ].map((p, i) => (
          <div key={i} style={{
            padding: 28, borderRadius: 12,
            background: '#fff', border: '1px solid rgba(0,0,0,0.06)',
            position: 'relative', overflow: 'hidden',
            boxShadow: '0 4px 16px rgba(23,70,245,0.06)',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, height: 3, width: '40%',
              background: p.accent,
            }}/>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: p.accent, marginBottom: 14, marginTop: 6,
              fontWeight: 600,
            }}>{p.label}</div>
            <div style={{ fontFamily: T.serif, fontWeight: 800, fontSize: 28, color: T.ink, letterSpacing: '-0.01em' }}>
              {p.name}
            </div>
          </div>
        ))}
      </div>

      {/* Aziende Marketers */}
      <div style={{ marginTop: 56 }}>
        <Eyebrow accent={T.greenDark}>// Aziende Marketers che troverai all'evento</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {['Yoga Academy', 'Kalemana Festival', 'Marketers Accelerator', 'Onlab'].map((b, i) => (
            <div key={i} style={{
              padding: '28px 20px', borderRadius: 12,
              background: '#fff', border: '1px solid rgba(0,0,0,0.06)',
              textAlign: 'center',
              fontFamily: T.serif, fontWeight: 700, fontSize: 18, color: T.ink, letterSpacing: '-0.01em',
              transition: 'border-color 0.3s, transform 0.3s, box-shadow 0.3s',
              boxShadow: '0 2px 12px rgba(23,70,245,0.05)',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(16,185,129,0.40)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(16,185,129,0.15)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.06)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 12px rgba(23,70,245,0.05)'; }}
            >{b}</div>
          ))}
        </div>
      </div>

      {/* Community partners */}
      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.blue, fontWeight: 600 }}>
          Community Partner
        </div>
        <div style={{ display: 'flex', gap: 24, fontFamily: T.serif, fontWeight: 700, fontSize: 18, color: T.body }}>
          <span>StartupGeeks</span>
          <span style={{ color: T.violetDeep }}>·</span>
          <span>IA Spiegata Semplice</span>
        </div>
      </div>
      </div>
    </Section>
  );
}

// =============== FAQ ===============
const FAQ_DATA = [
  {
    group: 'Pagamenti',
    items: [
      { q: 'Quali metodi di pagamento vengono accettati?', a: 'Puoi acquistare il biglietto con carta di credito, bonifico o in 3 rate con Scalapay.' },
      { q: 'Posso ricevere fattura per il biglietto del Marketers World?', a: 'Certo, in fase di acquisto ti basterà flaggare la casellina "Desideri ricevere fattura?": in questo modo compariranno tutti i campi da compilare. Se non selezioni l\'opzione in fase di acquisto non potremo emettere fattura.' },
      { q: 'I biglietti sono rimborsabili?', a: 'I biglietti per gli eventi non sono rimborsabili. Puoi consultare le condizioni di acquisto integrali sulla pagina dedicata.' },
      { q: 'Non posso più venire, posso cambiare il nominativo sul biglietto?', a: 'Puoi richiedere il cambio nominativo entro 15 giorni dall\'evento pagando il passaggio di 15€.' },
    ],
  },
  {
    group: 'Viaggio ed Evento',
    items: [
      { q: 'Come raggiungo l\'evento?', a: 'Marketers World si terrà presso il Palacongressi di Rimini. Puoi consultare la pagina ufficiale del Palacongressi per le indicazioni su come arrivare.' },
      { q: 'Ci sono Hotel convenzionati?', a: 'Il Palacongressi fornisce una lista di hotel convenzionati su aiapalas.it.' },
      { q: 'Vengo da solo o da sola. Cosa faccio?', a: 'Ci sono centinaia di persone che vengono da sole con l\'obiettivo di conoscere gente o formarsi in gran segreto dai propri competitor. Per 3 giorni Rimini diventa la città dei Marketers ed è praticamente impossibile tornare a casa senza aver stretto nuove amicizie o collaborazioni. L\'app del Marketers World è il modo perfetto per rompere il ghiaccio già prima di arrivare a Rimini: avrai accesso ai profili di tutti i partecipanti, potrai chattare e organizzare meeting. Riceverai il link al gruppo Telegram subito dopo aver preso il tuo biglietto.' },
    ],
  },
  {
    group: 'Marketers World fa per te?',
    items: [
      { q: 'Parto da zero, posso venire al World?', a: 'Sì, certo. Non serve avere già un business o una carriera avviata per venire al Marketers World. Sono tante le persone che vogliono reinventarsi oppure alla ricerca della propria strada che vengono proprio per trovare chiarezza, capire su cosa concentrarsi e ottenere strategie per realizzare il proprio progetto. Al World troverai tutto questo e molto di più: i diversi interventi sono organizzati per sviluppare un percorso definito ed efficace. Non riceverai solo ispirazione, ma un vero e proprio metodo.' },
      { q: 'Ho già un business oppure ho esperienza nel settore. È un evento che fa per me?', a: 'Tra le persone sedute in sala e tra chi salirà sul palco conoscerai imprenditori con fatturati a diversi zeri e alcuni dei più famosi digital marketer italiani. Potrai imparare da loro, e noi stessi racconteremo le strategie che abbiamo testato nell\'ultimo anno sui nostri business e su quelli di partner come Giulia Calcaterra, Yoga Academy ed e-commerce come Ketofood. Per il venerdì abbiamo preparato un\'intera giornata di workshop dal vivo estremamente pratici.' },
      { q: 'Il marketing non è il mio lavoro. Il Marketers World fa al caso mio?', a: 'Assolutamente sì. Il Marketers World non è solo un evento per digital marketer, content creator o aspiranti tali. In sala trovi anche proprietari di negozi o attività offline, ristoratori, consulenti e coach, psicologi, avvocati, commercialisti, investitori immobiliari, proprietari di centri estetici o palestre. Il Marketers World è per tutti coloro che hanno a cuore la propria crescita personale e professionale.' },
      { q: 'Cosa imparerò? Quali sono gli argomenti che verranno trattati?', a: 'Parleremo di branding e posizionamento, acquisizione e advertising, content creation e copywriting, social media marketing, growth hacking, business e imprenditoria.' },
    ],
  },
  {
    group: 'Sei già in Marketers Pro?',
    items: [
      { q: 'Ho Marketers Pro, ho diritto ad uno sconto?', a: 'Sì, in qualità di cliente di Marketers Pro hai diritto ad uno sconto. Puoi trovarlo nell\'e-mail che hai ricevuto sull\'apertura delle iscrizioni al Marketers World.' },
    ],
  },
];

function FAQ() {
  const [activeGroup, setActiveGroup] = useS3(0);
  const [open, setOpen] = useS3(0);
  const items = FAQ_DATA[activeGroup].items;
  return (
    <Section id="faq" dark={true} grid={true} pad="60px 56px 120px" style={{ background: T.ink }}>
      <Eyebrow>// FAQ</Eyebrow>
      <H2>Domande <Italic>frequenti.</Italic></H2>

      <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 32 }}>
        {/* Groups */}
        <div style={{
          display: 'flex', flexDirection: 'column',
          border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12, overflow: 'hidden',
          background: 'rgba(255,255,255,0.02)', alignSelf: 'flex-start',
        }}>
          {FAQ_DATA.map((g, i) => (
            <button key={i} onClick={() => { setActiveGroup(i); setOpen(0); }} style={{
              background: activeGroup === i ? 'rgba(75,107,251,0.10)' : 'transparent',
              color: activeGroup === i ? '#fff' : 'rgba(255,255,255,0.6)',
              border: 'none', borderBottom: i < FAQ_DATA.length - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none',
              padding: '20px 24px', textAlign: 'left',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontFamily: T.sans, fontSize: 14, fontWeight: activeGroup === i ? 600 : 500,
              cursor: 'pointer', transition: 'all 0.3s',
            }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: activeGroup === i ? T.blueLight : 'rgba(255,255,255,0.35)', letterSpacing: '0.1em' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                {g.group}
              </span>
              <span style={{ fontFamily: T.mono, fontSize: 11, color: activeGroup === i ? T.blueLight : 'rgba(255,255,255,0.3)' }}>
                {g.items.length} →
              </span>
            </button>
          ))}
        </div>

        {/* Q&A */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map((q, i) => {
            const isOpen = open === i;
            return (
              <div key={i} onClick={() => setOpen(isOpen ? -1 : i)} style={{
                padding: '24px 28px', borderRadius: 12, cursor: 'pointer',
                background: isOpen ? 'rgba(75,107,251,0.06)' : 'rgba(255,255,255,0.02)',
                border: isOpen ? '1px solid rgba(75,107,251,0.30)' : T.borderDark,
                transition: 'all 0.3s',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                  <h4 style={{
                    fontFamily: T.serif, fontWeight: 700, fontSize: 18,
                    color: '#fff', margin: 0, lineHeight: 1.3, letterSpacing: '-0.01em',
                  }}>{q.q}</h4>
                  <div style={{
                    width: 32, height: 32, borderRadius: 6,
                    border: `1px solid ${isOpen ? T.blueLight : 'rgba(255,255,255,0.15)'}`,
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 0.3s, border-color 0.3s',
                    color: isOpen ? T.blueLight : 'rgba(255,255,255,0.6)',
                    fontSize: 16,
                  }}>+</div>
                </div>
                {isOpen && (
                  <p style={{
                    fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65,
                    margin: '16px 0 0', maxWidth: 720,
                  }}>{q.a}</p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}

// =============== Waitlist + Team CTA ===============
function Waitlist() {
  const [name, setName] = useS3('');
  const [email, setEmail] = useS3('');
  const [privacy, setPrivacy] = useS3(false);
  const [mkt, setMkt] = useS3(false);
  const [submitted, setSubmitted] = useS3(false);
  const valid = name.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && privacy;

  return (
    <Section id="ctalista" dark={true} grid={true} style={{
      background: `linear-gradient(180deg, ${T.ink} 0%, ${T.ink2} 100%)`,
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        {/* Left: Iscriviti */}
        <div>
          <Eyebrow>// MW26 Waiting list</Eyebrow>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 900, fontSize: 'clamp(48px, 6vw, 88px)',
            lineHeight: 0.92, color: '#fff', margin: 0, letterSpacing: '-0.02em',
          }}>
            Iscriviti al<br/><Italic>MW26.</Italic>
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, margin: '24px 0 40px', maxWidth: 460 }}>
            Iscriviti alla lista d'attesa per ricevere una notifica
            alla riapertura della biglietteria del Marketers World 2026.
          </p>

          {submitted ? (
            <div style={{
              padding: 32, borderRadius: 12,
              background: 'rgba(75,107,251,0.10)',
              border: '1px solid rgba(75,107,251,0.30)',
            }}>
              <div style={{ fontFamily: T.serif, fontWeight: 800, fontSize: 24, color: '#fff', marginBottom: 8 }}>
                Sei in lista, <Italic>{name.split(' ')[0]}.</Italic>
              </div>
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', margin: 0 }}>
                Controlla la casella <strong style={{ color: T.blueLight }}>{email}</strong> per
                confermare l'iscrizione. Ti scriviamo appena la biglietteria riapre.
              </p>
            </div>
          ) : (
            <>
            <form
              action="https://dariovignali.activehosted.com/proc.php"
              method="POST"
              target="mw26-ac-iframe"
              onSubmit={e => {
                if (!valid) { e.preventDefault(); return; }
                // Lascia che il form invii ad AC via iframe nascosto;
                // mostriamo conferma client-side dopo ~700ms
                setTimeout(() => setSubmitted(true), 700);
              }}
              style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
            >
              {/* Hidden fields ActiveCampaign — form 320 "wl MW26" → lista 828 */}
              <input type="hidden" name="u" value="6A0886BCD9A3B" />
              <input type="hidden" name="f" value="320" />
              <input type="hidden" name="s" />
              <input type="hidden" name="c" value="0" />
              <input type="hidden" name="m" value="0" />
              <input type="hidden" name="act" value="sub" />
              <input type="hidden" name="v" value="2" />
              <input type="hidden" name="or" value="15434141-03f4-4d04-a26e-41cad6f012a5" />
              <input type="hidden" name="tags[]" value="mw26-waitlist-sito" />

              <input
                name="fullname"
                value={name}
                onChange={e => setName(e.target.value)}
                placeholder="Nome"
                autoComplete="name"
                style={{
                  padding: '16px 18px', borderRadius: 8, border: '1px solid rgba(255,255,255,0.12)',
                  background: 'rgba(255,255,255,0.04)', color: '#fff',
                  fontFamily: T.sans, fontSize: 15, outline: 'none', transition: 'border-color 0.3s',
                }}
                onFocus={e => e.target.style.borderColor = T.blueLight}
                onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.12)'}
              />
              <input
                name="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="Email"
                type="email"
                autoComplete="email"
                required
                style={{
                  padding: '16px 18px', borderRadius: 8, border: '1px solid rgba(255,255,255,0.12)',
                  background: 'rgba(255,255,255,0.04)', color: '#fff',
                  fontFamily: T.sans, fontSize: 15, outline: 'none', transition: 'border-color 0.3s',
                }}
                onFocus={e => e.target.style.borderColor = T.blueLight}
                onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.12)'}
              />

              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'rgba(255,255,255,0.7)', cursor: 'pointer', marginTop: 8 }}>
                <input type="checkbox" checked={privacy} onChange={e => setPrivacy(e.target.checked)}
                  style={{ marginTop: 2, accentColor: T.blue }}/>
                <span><strong style={{ color: '#fff', fontWeight: 500 }}>Privacy Policy.</strong> Accetto la Privacy Policy di Marketers.</span>
              </label>
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'rgba(255,255,255,0.7)', cursor: 'pointer' }}>
                <input type="checkbox" checked={mkt} onChange={e => setMkt(e.target.checked)}
                  style={{ marginTop: 2, accentColor: T.blue }}/>
                <span><strong style={{ color: '#fff', fontWeight: 500 }}>Marketing.</strong> Dichiaro di voler ricevere news, risorse e offerte da parte di Marketers.</span>
              </label>

              <button type="submit" disabled={!valid} style={{
                marginTop: 12, padding: '16px 28px', borderRadius: 8, border: 'none',
                background: valid ? T.blue : 'rgba(255,255,255,0.08)',
                color: valid ? '#fff' : 'rgba(255,255,255,0.4)',
                fontFamily: T.sans, fontWeight: 600, fontSize: 15,
                cursor: valid ? 'pointer' : 'not-allowed', transition: 'all 0.3s',
                boxShadow: valid ? T.glowMd : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              }}>
                Iscriviti alla Lista d'Attesa
                <span>→</span>
              </button>
            </form>
            {/* iframe target: cattura la response di AC senza far uscire l'utente dal sito */}
            <iframe
              name="mw26-ac-iframe"
              title="ActiveCampaign submission"
              style={{ display: 'none', width: 0, height: 0, border: 0 }}
              aria-hidden="true"
            />
            </>
          )}
        </div>

        {/* Right: Team widget + final */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{
            padding: 32, borderRadius: 16,
            background: 'rgba(75,107,251,0.06)',
            border: '1px solid rgba(75,107,251,0.25)',
          }}>
            <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.blueLight, marginBottom: 14 }}>
              · Biglietti di gruppo
            </div>
            <h3 style={{
              fontFamily: T.serif, fontWeight: 800, fontSize: 28,
              color: '#fff', margin: '0 0 12px', lineHeight: 1.2, letterSpacing: '-0.01em',
            }}>
              Sei un'azienda e vuoi portare il <Italic>tuo team</Italic> al Marketers World?
            </h3>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 24px' }}>
              Per gruppi a partire da 10 ticket.
            </p>
            <GhostBtn href="https://wa.me/393520454209">Contattaci su WhatsApp →</GhostBtn>
          </div>

          <div style={{
            padding: 32, borderRadius: 16,
            background: 'rgba(255,255,255,0.03)',
            border: T.borderDark,
          }}>
            <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.blueLight, marginBottom: 14 }}>
              · Sei creator o giornalista?
            </div>
            <h3 style={{
              fontFamily: T.serif, fontWeight: 800, fontSize: 24,
              color: '#fff', margin: '0 0 12px', lineHeight: 1.2, letterSpacing: '-0.01em',
            }}>
              Candidati come creator, giornalista o <Italic>media partner.</Italic>
            </h3>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 24px' }}>
              Ottieni il tuo Ticket dedicato e racconta la più grande conferenza di marketing italiana.
            </p>
            <GhostBtn href="https://dariovignali.typeform.com/to/x4uLrZKn">Candidati ora →</GhostBtn>
          </div>
        </div>
      </div>
    </Section>
  );
}

// =============== Final CTA — MW colors (blue/violet/green/fuchsia, no orange) ===============
function FinalCTA() {
  const { d, h, m, s } = window.useCountdown();
  const [name, setName] = useS3('');
  const [email, setEmail] = useS3('');
  const [privacy, setPrivacy] = useS3(false);
  const [submitted, setSubmitted] = useS3(false);
  const valid = name.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && privacy;
  return (
    <section id="ctalista" style={{
      position: 'relative',
      background: `linear-gradient(135deg, ${T.ink} 0%, ${T.blueMedium} 35%, ${T.violetDeep} 70%, ${T.blue} 100%)`,
      padding: '120px 56px', textAlign: 'center', overflow: 'hidden',
    }}>
      {/* Background photo layer for atmosphere */}
      <img src={(window.MW_PHOTOS && window.MW_PHOTOS[14]) || ''} alt=""
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', opacity: 0.18, mixBlendMode: 'overlay',
          filter: 'brightness(0.8) saturate(1.2)',
        }}/>
      <div style={{
        position: 'absolute', top: '20%', left: '50%', width: 900, height: 700,
        transform: 'translate(-50%, -50%)',
        background: `radial-gradient(ellipse, ${T.green}44 0%, transparent 60%)`,
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
      }}/>
      <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto' }}>
        <Eyebrow style={{ justifyContent: 'center', display: 'inline-flex', maxWidth: 'fit-content', margin: '0 auto 24px' }} accent={T.green}>
          · Offerta valida per
        </Eyebrow>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginBottom: 40, fontFamily: T.mono }}>
          {[['Giorni', d, T.green], ['Ore', h, T.violet], ['Min', m, T.electric], ['Sec', s, T.blueLight]].map(([l, v, c], i) => (
            <div key={i} style={{
              padding: '14px 22px', minWidth: 92,
              background: 'rgba(0,0,0,0.4)', borderRadius: 10,
              border: `1px solid ${c}55`, backdropFilter: 'blur(8px)',
            }}>
              <div style={{ fontFamily: T.serif, fontWeight: 900, fontSize: 38, lineHeight: 1, color: '#fff', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.03em' }}>
                {String(v).padStart(2, '0')}
              </div>
              <div style={{ fontSize: 10, color: c, marginTop: 6, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>

        <h2 style={{
          fontFamily: T.serif, fontWeight: 900,
          fontSize: 'clamp(48px, 7vw, 104px)', lineHeight: 0.92,
          color: '#fff', margin: '0 0 28px', letterSpacing: '-0.04em', textWrap: 'balance',
        }}>
          Vieni al MW26 e conquista nuove vette del{' '}
          <span style={{
            background: `linear-gradient(110deg, ${T.green} 0%, ${T.blueLight} 40%, ${T.violet} 70%, ${T.electric} 100%)`,
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            fontStyle: 'italic',
          }}>mercato digitale.</span>
        </h2>
        <p style={{
          fontFamily: T.sans, fontSize: 18, color: 'rgba(255,255,255,0.85)',
          margin: '0 auto 28px', maxWidth: 580, lineHeight: 1.55,
        }}>
          16 — 17 — 18 ottobre 2026 · Palacongressi di Rimini.<br/>
          I posti sono limitati. Ci vediamo lì.
        </p>

        {/* Pre-form heading + scribble arrow */}
        {!submitted && (
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            marginBottom: 18,
          }}>
            <h3 style={{
              fontFamily: T.serif, fontWeight: 800, fontStyle: 'italic',
              fontSize: 'clamp(28px, 3.2vw, 44px)', lineHeight: 1.05,
              color: '#fff', margin: 0, letterSpacing: '-0.02em',
              textShadow: '0 2px 12px rgba(0,0,0,0.3)',
            }}>
              <span style={{ fontStyle: 'normal', fontWeight: 900 }}>Entra subito</span> <Italic color={T.green}>in lista d'attesa.</Italic>
            </h3>
            {/* Scribble arrow pointing to the form below */}
            <svg width="64" height="58" viewBox="0 0 64 58" style={{ marginTop: 8, opacity: 0.85 }}>
              <path d="M32,4 Q22,14 28,28 Q32,38 32,48" stroke={T.green} strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M22,42 L32,54 L42,42" stroke={T.green} strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        )}

        {/* Inline opt-in form (replaces the old ticket button) */}
        {submitted ? (
          <div style={{
            maxWidth: 540, margin: '0 auto',
            padding: 32, borderRadius: 12,
            background: 'rgba(46,229,161,0.18)',
            border: '1px solid rgba(46,229,161,0.55)',
            boxShadow: '0 0 40px rgba(46,229,161,0.30)',
          }}>
            <div style={{ fontFamily: T.serif, fontWeight: 800, fontSize: 24, color: '#fff', marginBottom: 8 }}>
              Sei in lista, <Italic color={T.green}>{name.split(' ')[0]}.</Italic>
            </div>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.95)', margin: 0 }}>
              Ti scriviamo a <strong style={{ color: T.green }}>{email}</strong> appena la biglietteria riapre.
            </p>
          </div>
        ) : (
          <form onSubmit={e => { e.preventDefault(); if (valid) setSubmitted(true); }}
            style={{
              maxWidth: 620, margin: '0 auto',
              padding: 20, borderRadius: 14,
              background: 'rgba(255,255,255,0.10)',
              border: '1px solid rgba(255,255,255,0.25)',
              backdropFilter: 'blur(10px)',
              boxShadow: '0 18px 50px rgba(0,0,0,0.30)',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
            }}>
              <input value={name} onChange={e => setName(e.target.value)} placeholder="Il tuo nome"
                style={{
                  padding: '16px 18px', borderRadius: 10, border: '1.5px solid rgba(255,255,255,0.0)',
                  background: '#FFFFFF', color: T.ink,
                  fontFamily: T.sans, fontSize: 15, outline: 'none', transition: 'all 0.3s',
                }}
                onFocus={e => { e.target.style.borderColor = T.green; e.target.style.boxShadow = `0 0 0 4px rgba(46,229,161,0.18)`; }}
                onBlur={e => { e.target.style.borderColor = 'transparent'; e.target.style.boxShadow = 'none'; }}
              />
              <input value={email} onChange={e => setEmail(e.target.value)} placeholder="La tua email" type="email"
                style={{
                  padding: '16px 18px', borderRadius: 10, border: '1.5px solid rgba(255,255,255,0.0)',
                  background: '#FFFFFF', color: T.ink,
                  fontFamily: T.sans, fontSize: 15, outline: 'none', transition: 'all 0.3s',
                }}
                onFocus={e => { e.target.style.borderColor = T.green; e.target.style.boxShadow = `0 0 0 4px rgba(46,229,161,0.18)`; }}
                onBlur={e => { e.target.style.borderColor = 'transparent'; e.target.style.boxShadow = 'none'; }}
              />
            </div>

            <label style={{
              display: 'flex', alignItems: 'flex-start', gap: 10,
              fontSize: 13, color: 'rgba(255,255,255,0.92)', cursor: 'pointer',
              textAlign: 'left', marginTop: 2, padding: '0 4px',
            }}>
              <input type="checkbox" checked={privacy} onChange={e => setPrivacy(e.target.checked)}
                style={{ marginTop: 3, accentColor: T.green, width: 16, height: 16 }}/>
              <span><strong style={{ color: '#fff', fontWeight: 600 }}>Privacy.</strong> Accetto la Privacy Policy di Marketers.</span>
            </label>

            <button type="submit" disabled={!valid} style={{
              marginTop: 6, padding: '20px 28px', borderRadius: 10, border: 'none',
              background: valid ? `linear-gradient(135deg, #2EE5A1 0%, #00D687 100%)` : 'rgba(255,255,255,0.15)',
              color: valid ? T.ink : 'rgba(255,255,255,0.50)',
              fontFamily: T.sans, fontWeight: 800, fontSize: 17,
              cursor: valid ? 'pointer' : 'not-allowed', transition: 'all 0.3s',
              boxShadow: valid ? `0 0 0 0 rgba(46,229,161,0.6), 0 12px 32px rgba(0,214,135,0.45)` : 'none',
              letterSpacing: '0.02em', textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            }}
              onMouseEnter={e => { if (valid) e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              Iscriviti alla lista d'attesa
              <span style={{ fontSize: 20 }}>→</span>
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

// =============== Three-box trio: Team / Sponsor / Creator ===============
function SponsorInvite() {
  const boxes = [
    {
      label: '· Biglietti di gruppo',
      title: <>Sei un'azienda? Porta il <Italic>tuo team.</Italic></>,
      body: 'Se siete almeno 10, avete diritto al nostro pacchetto speciale.',
      cta: 'Contattaci su WhatsApp →',
      href: 'https://wa.me/393520454209',
      accent: T.blueLight,
    },
    {
      label: '· Sponsorship Program',
      title: <>Diventa <Italic>sponsor</Italic> del Marketers World.</>,
      body: 'Connetti il tuo brand alla più grande conferenza italiana di marketing e business digitale.',
      cta: 'Scopri come →',
      href: 'diventa-sponsor.html',
      accent: T.violet,
    },
    {
      label: '· Creator & Press',
      title: <>Candidati come <Italic>creator</Italic> o giornalista.</>,
      body: 'Ottieni il tuo Ticket dedicato e racconta la più grande conferenza di marketing italiana.',
      cta: 'Candidati ora →',
      href: 'https://dariovignali.typeform.com/to/x4uLrZKn',
      accent: T.green,
    },
  ];
  return (
    <Section dark={true} grid={false} pad="80px 56px 40px" style={{ background: T.ink }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {boxes.map((b, i) => (
          <div key={i} style={{
            padding: 36, borderRadius: 16,
            background: 'rgba(255,255,255,0.03)',
            border: `1px solid ${b.accent}33`,
            position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
            transition: 'border-color 0.3s, transform 0.3s, box-shadow 0.3s',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = b.accent + '88'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = `0 0 40px ${b.accent}22`; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = b.accent + '33'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
          >
            <div style={{
              position: 'absolute', top: '-40%', right: '-20%', width: '60%', height: '120%',
              background: `radial-gradient(ellipse, ${b.accent}22, transparent 60%)`,
              filter: 'blur(60px)', pointerEvents: 'none',
            }}/>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: b.accent, marginBottom: 18, position: 'relative',
            }}>{b.label}</div>
            <h3 style={{
              fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(22px, 1.7vw, 28px)',
              lineHeight: 1.18, color: '#fff', margin: '0 0 14px', letterSpacing: '-0.01em',
              position: 'relative', textWrap: 'balance',
            }}>{b.title}</h3>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, margin: '0 0 28px', position: 'relative', flex: 1 }}>
              {b.body}
            </p>
            <a href={b.href}
              target={/^https?:/.test(b.href) ? '_blank' : '_self'}
              rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '12px 20px', borderRadius: 8,
              background: 'transparent', color: '#fff',
              border: `0.5px solid ${b.accent}66`,
              fontFamily: T.sans, fontSize: 13, fontWeight: 500,
              textDecoration: 'none', alignSelf: 'flex-start', position: 'relative',
              transition: 'all 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = b.accent; e.currentTarget.style.color = T.ink; e.currentTarget.style.borderColor = b.accent; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = b.accent + '66'; }}
            >
              {b.cta}
            </a>
          </div>
        ))}
      </div>
    </Section>
  );
}

// =============== Sponsor invite + Footer ===============
function Footer() {
  return (
    <footer style={{
      background: '#04081A', padding: '64px 56px 32px',
      color: 'rgba(255,255,255,0.45)',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      position: 'relative',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 56,
      }}>
        <div>
          <img src={window.mwAsset('assets/legacy/external/logo-marketersworld-by-wearemarketers-81902c5f2da2.png')} alt="Marketers World" style={{ height: 30, opacity: 0.95, marginBottom: 16 }}/>
          <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, margin: '0 0 24px', maxWidth: 340 }}>
            Il network italiano per imprenditori che vogliono costruire un business che dura.
            Marketers World 2026 · Rimini, 16—18 ottobre.
          </p>
          <div style={{ fontFamily: T.mono, fontSize: 10, color: T.blueLight, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            ↗ Bentornati a casa
          </div>
        </div>

        {[
          { t: 'Evento', items: ['Speaker Invitati', 'Workshop', 'Programma Completo', 'Marketers Party', 'Marketers Lounge', 'Candidati come Speaker'] },
          { t: 'Risorse', items: ['Testimonianze', 'Risorse degli speech', 'Programma 2026', 'Marketers Village'] },
          { t: 'Per Aziende', items: ['Diventa Sponsor', 'Pacchetto Team', 'Hospitality', 'Media Kit'] },
          { t: 'Press / Creator', items: ['Candidati creator', 'Candidati giornalista', 'Media partner', 'Press kit'] },
        ].map((c, i) => (
          <div key={i}>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: T.blueLight, marginBottom: 16,
            }}>{c.t}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {c.items.map((it, j) => {
                const linkMap = { 'Diventa Sponsor': 'diventa-sponsor.html', 'Marketers Village': 'marketers-village.html' };
                const href = linkMap[it] || '#';
                return (
                  <a key={j} href={href} style={{
                    fontSize: 13, color: 'rgba(255,255,255,0.55)',
                    textDecoration: 'none', transition: 'color 0.3s',
                  }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}
                  >{it}</a>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        maxWidth: 1240, margin: '48px auto 0',
        paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: 'rgba(255,255,255,0.4)', fontFamily: T.sans,
      }}>
        <span>© 2026 Marketers Company srl · P.IVA 01976200384</span>
        <div style={{ display: 'flex', gap: 24, fontFamily: T.mono, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          <a href="#" style={{ color: 'rgba(255,255,255,0.5)' }}>Privacy</a>
          <a href="#" style={{ color: 'rgba(255,255,255,0.5)' }}>Cookie</a>
          <a href="#" style={{ color: 'rgba(255,255,255,0.5)' }}>Assistenza</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Esperienza, Certificazione, Trustpilot, ProBundle, Tickets,
  Testimonianze, Sponsors, FAQ, Waitlist, FinalCTA, SponsorInvite, Footer
});