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

// =============== Top utility bar (dark, slim) ===============
function SpTopBar() {
  return (
    <div style={{
      background: '#04081A', borderBottom: '1px solid rgba(255,255,255,0.06)',
      padding: '8px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
      color: 'rgba(255,255,255,0.55)', position: 'relative', zIndex: 101,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <a href="index.html" style={{ display: 'inline-flex', alignItems: 'center' }}>
          <img src={window.mwAsset('assets/logos/marketers-white.png', 'assets/logos/marketers-white.png')} alt="Marketers"
            style={{ height: 22, opacity: 0.95, display: 'block' }}/>
        </a>
        <span style={{ width: 1, height: 14, background: 'rgba(255,255,255,0.12)' }}/>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: T.green, animation: 'pulse 2s ease infinite' }}/>
          Sponsor Program · MW26 · <span style={{ color: T.green }}>Iscrizioni aperte</span>
        </span>
      </div>
      <div style={{ display: 'flex', gap: 28 }}>
        <span style={{ color: T.blueLight }}>16—17—18 OTT 2026</span>
        <span>Palacongressi · Rimini</span>
        <a href="index.html" style={{ color: 'rgba(255,255,255,0.55)' }}>Torna a MW26 →</a>
      </div>
    </div>
  );
}

// =============== Sticky Nav (LIGHT) ===============
function SpNav() {
  const [scrolled, setScrolled] = useSt(false);
  const [open, setOpen] = useSt(null);
  useEf(() => {
    const h = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  const links = [
    { label: 'Perché sponsorizzare', href: '#sponsorizzare' },
    { label: 'Audience', href: '#audience' },
    { label: 'Pacchetti', href: '#pacchetti' },
    { label: 'Village', href: '#village' },
    { label: 'FAQ', href: '#faq' },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(244,246,255,0.92)' : 'rgba(244,246,255,0.4)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      borderBottom: scrolled ? '1px solid rgba(8,16,31,0.08)' : '1px solid transparent',
      padding: '14px 56px', display: 'grid',
      gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
      transition: 'all 0.3s', gap: 32,
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 14, justifySelf: 'start' }}>
        <img src={window.mwAsset('assets/logos/marketers-black.png', 'assets/logos/marketers-black.png')}
          alt="Marketers" style={{ height: 30 }}/>
      </a>

      <div style={{ display: 'flex', gap: 30, justifyContent: 'center' }}>
        {links.map((l, i) => (
          <a key={i} href={l.href}
            onMouseEnter={() => setOpen(i)} onMouseLeave={() => setOpen(null)}
            style={{
              fontFamily: T.sans, fontSize: 13.5, fontWeight: 500,
              color: open === i ? T.blue : 'rgba(8,16,31,0.7)',
              transition: 'color 0.3s', position: 'relative', padding: '6px 0',
            }}>
            {l.label}
            <span style={{
              position: 'absolute', left: 0, right: 0, bottom: 0, height: 1.5,
              background: T.blue, transform: open === i ? 'scaleX(1)' : 'scaleX(0)',
              transformOrigin: 'left', transition: 'transform 0.3s',
            }}/>
          </a>
        ))}
      </div>

      <div style={{ justifySelf: 'end' }}>
        <LightPrimary href="#prenota-call" green style={{ padding: '10px 22px', fontSize: 13 }}>
          Parla con noi
        </LightPrimary>
      </div>
    </nav>
  );
}

// =============== HERO (LIGHT, CENTERED, no video) ===============
function SpHero() {
  return (
    <section id="sponsor-hero" style={{
      position: 'relative', padding: '88px 56px 56px',
      background: '#f4f6ff', overflow: 'hidden',
    }}>
      {/* Animated multi-color radial washes */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-25%', left: '-15%', width: '70%', height: '110%',
        background: `radial-gradient(ellipse at center, rgba(75,107,251,0.22), transparent 60%)`,
        filter: 'blur(90px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', top: '-10%', right: '-15%', width: '60%', height: '90%',
        background: `radial-gradient(ellipse at center, rgba(232,121,58,0.18), transparent 60%)`,
        filter: 'blur(110px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift" style={{
        position: 'absolute', bottom: '-30%', left: '30%', width: '50%', height: '70%',
        background: `radial-gradient(ellipse at center, rgba(46,229,161,0.16), transparent 60%)`,
        filter: 'blur(110px)', pointerEvents: 'none',
      }}/>

      {/* Subtle dot-grid */}
      <div className="dotgrid-light" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        maskImage: 'radial-gradient(ellipse at center, #000 20%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 20%, transparent 75%)',
        opacity: 0.5,
      }}/>

      {/* Floating decorative shapes */}
      <FloatingDecor/>

      <div style={{
        position: 'relative', maxWidth: 1100, margin: '0 auto', zIndex: 1,
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
      }}>
        <Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '8px 18px 8px 14px', borderRadius: 40,
            border: '1px solid rgba(23,70,245,0.20)',
            background: 'rgba(255,255,255,0.75)',
            backdropFilter: 'blur(8px)',
            fontSize: 11, fontFamily: T.mono, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: T.blue, fontWeight: 600,
            marginBottom: 36,
          }}>
            <span style={{
              width: 8, height: 8, background: T.green, borderRadius: '50%',
              boxShadow: `0 0 12px ${T.green}`, animation: 'pulse 2s ease infinite',
            }}/>
            MW26 · Sponsor Program · Posti limitati
          </div>
        </Reveal>

        <Reveal delay={120}>
          <h1 style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(48px, 7.8vw, 124px)',
            lineHeight: 0.92, letterSpacing: '-0.04em',
            margin: 0, color: T.ink, textWrap: 'balance',
            maxWidth: 1050,
          }}>
            Unisciti alla più grande{' '}
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span style={{
                background: `linear-gradient(110deg, ${T.blue} 0%, ${T.violetDeep} 50%, ${T.ember} 100%)`,
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
                fontStyle: 'italic',
                fontWeight: 900,
              }}>community</span>
              <UnderlineSwirl color={T.ember}/>
            </span>{' '}
            di <em style={{ fontStyle: 'italic', color: T.blue, fontWeight: 900 }}>innovatori digitali</em> in Italia.
          </h1>
        </Reveal>

        <Reveal delay={240}>
          <p style={{
            fontFamily: T.sans, fontWeight: 400,
            fontSize: 'clamp(18px, 1.5vw, 22px)',
            color: 'rgba(8,16,31,0.65)',
            maxWidth: 720, margin: '32px 0 0', lineHeight: 1.55,
            textWrap: 'balance',
          }}>
            Visibilità esclusiva verso <strong style={{ color: T.ink, fontWeight: 700 }}>3.000+ professionisti, imprenditori, marketer e creator</strong> — posti limitati per partner d'eccellenza.
          </p>
        </Reveal>

        <Reveal delay={360}>
          <div style={{
            display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center',
            marginTop: 44, justifyContent: 'center', position: 'relative',
          }}>
            <div style={{ position: 'relative' }}>
              <LightPrimary href="#prenota-call" big>Parla con noi</LightPrimary>
              <ScribbleHint/>
            </div>
            <LightGhost href="#pacchetti" big>Scopri i pacchetti ↓</LightGhost>
          </div>
        </Reveal>

        {/* Event strip */}
        <Reveal delay={480}>
          <div style={{
            marginTop: 60, padding: '14px 24px',
            background: T.ink, borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', gap: 18,
            fontFamily: T.mono, fontSize: 12, fontWeight: 500,
            letterSpacing: '0.16em', textTransform: 'uppercase', color: '#fff',
            boxShadow: '0 10px 30px rgba(8,16,31,0.18)',
          }}>
            <span style={{ color: T.green }}>● live</span>
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>│</span>
            <span><strong style={{ color: T.blueLight }}>16—17—18 OTT 2026</strong></span>
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>│</span>
            <span>Palacongressi · Rimini</span>
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>│</span>
            <span style={{ color: T.ember }}>+ Marketers Village · 6gg</span>
          </div>
        </Reveal>

        {/* Big stats strip — inline below hero */}
        <Reveal delay={560}>
          <div style={{
            marginTop: 84, width: '100%', maxWidth: 1100,
            display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
            background: '#fff', borderRadius: 16,
            border: '1px solid rgba(8,16,31,0.08)',
            boxShadow: '0 20px 60px rgba(8,16,31,0.08)',
            overflow: 'hidden',
          }}>
            {[
              { n: 3000, suf: '+', l: 'professionisti & imprenditori in sala', c: T.blue },
              { n: 100, suf: 'k+', l: 'community attiva 365gg', c: T.green },
              { n: 17, suf: 'M', l: 'reach social durante evento', c: T.violetDeep },
              { n: 6, suf: 'gg', l: 'di esposizione brand totale', c: T.ember },
              { n: 1, suf: '/cat', l: 'esclusività merceologica', c: T.blue },
            ].map((s, i, arr) => (
              <div key={i} style={{
                padding: '28px 22px 26px',
                borderRight: i < arr.length - 1 ? '1px solid rgba(8,16,31,0.06)' : 'none',
                textAlign: 'left',
              }}>
                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 2,
                  fontFamily: T.serif, fontWeight: 900,
                  letterSpacing: '-0.03em', lineHeight: 0.9, color: T.ink,
                }}>
                  <CountUp to={s.n} format style={{ fontSize: 46 }}/>
                  <span style={{ fontSize: 28, color: s.c, marginLeft: 2 }}>{s.suf}</span>
                </div>
                <div style={{
                  fontSize: 12, color: 'rgba(8,16,31,0.55)', marginTop: 12, lineHeight: 1.4,
                  fontFamily: T.sans,
                }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Scroll indicator */}
        <div style={{
          marginTop: 56, display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 8,
        }} className="arrow-bob">
          <div style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'rgba(8,16,31,0.4)',
          }}>scrolla</div>
          <svg width="20" height="28" viewBox="0 0 20 28" fill="none">
            <path d="M10 2 L10 22 M2 14 L10 22 L18 14" stroke="rgba(8,16,31,0.4)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </section>
  );
}

function FloatingDecor() {
  return (
    <React.Fragment>
      {/* Ring top-left */}
      <div className="floatY" style={{
        position: 'absolute', top: '14%', left: '8%', pointerEvents: 'none',
      }}>
        <svg width="64" height="64" viewBox="0 0 64 64" className="spin-slow">
          <circle cx="32" cy="32" r="28" fill="none" stroke={T.blue} strokeWidth="1.5" strokeDasharray="4 6" opacity="0.5"/>
          <circle cx="32" cy="6" r="3" fill={T.blue}/>
        </svg>
      </div>
      {/* Diamond top-right */}
      <div className="floatY2" style={{
        position: 'absolute', top: '18%', right: '10%', pointerEvents: 'none',
      }}>
        <svg width="36" height="36" viewBox="0 0 36 36">
          <rect x="6" y="6" width="24" height="24" transform="rotate(45 18 18)" fill="none" stroke={T.ember} strokeWidth="1.5" opacity="0.55"/>
        </svg>
      </div>
      {/* Dots cluster bottom-left */}
      <div className="floatY3" style={{
        position: 'absolute', bottom: '24%', left: '12%', pointerEvents: 'none',
      }}>
        <svg width="60" height="60" viewBox="0 0 60 60">
          <circle cx="10" cy="50" r="3" fill={T.green} opacity="0.7"/>
          <circle cx="24" cy="40" r="2.5" fill={T.green} opacity="0.5"/>
          <circle cx="38" cy="32" r="2" fill={T.green} opacity="0.4"/>
        </svg>
      </div>
      {/* Plus right-middle */}
      <div className="floatY" style={{
        position: 'absolute', bottom: '32%', right: '8%', pointerEvents: 'none',
      }}>
        <svg width="32" height="32" viewBox="0 0 32 32">
          <path d="M16 4 L16 28 M4 16 L28 16" stroke={T.violetDeep} strokeWidth="2" opacity="0.5" strokeLinecap="round"/>
        </svg>
      </div>
    </React.Fragment>
  );
}

function UnderlineSwirl({ color = T.blue }) {
  return (
    <svg style={{
      position: 'absolute', left: -4, right: -4, bottom: -16, width: 'calc(100% + 8px)',
      height: 26, pointerEvents: 'none',
    }} viewBox="0 0 300 26" preserveAspectRatio="none">
      <path
        d="M4,18 C 60,4 140,4 200,14 C 240,20 280,12 296,18"
        stroke={color} strokeWidth="4" fill="none" strokeLinecap="round"
        className="draw-path"
      />
    </svg>
  );
}

function ScribbleHint() {
  return (
    <div style={{
      position: 'absolute', top: 'calc(100% + 6px)', left: '50%',
      transform: 'translateX(-95%) rotate(-7deg)',
      pointerEvents: 'none', whiteSpace: 'nowrap',
      display: 'flex', alignItems: 'flex-end', gap: 4,
      fontFamily: '"Caveat", cursive', fontSize: 24, color: T.ember, fontWeight: 700,
    }}>
      <span style={{ paddingBottom: 4 }}>30 minuti, zero impegno</span>
      <svg width="64" height="56" viewBox="0 0 64 56" style={{ overflow: 'visible' }}>
        <path d="M6,46 Q 20,40 28,28 Q 36,16 44,6"
          stroke={T.ember} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d="M36,4 L 46,4 L 44,14"
          stroke={T.ember} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

// =============== PROBLEM (LIGHT, big imagery) ===============
function SpProblem() {
  const cards = [
    {
      tag: 'Fiere generaliste',
      kicker: 'Problema · 01',
      copy: 'Pubblico disperso. Mille settori diversi. Lead freddi che chiedono "ma voi cosa fate?". Torni con 200 biglietti da visita inutili.',
      img: window.mwAsset('assets/legacy/external/mw26-sponsorpage-img-005-comp-79e876218336.jpg'),
      color: T.blue,
    },
    {
      tag: 'Eventi corporate',
      kicker: 'Problema · 02',
      copy: "Tutti sono lì per obbligo aziendale. Nessuno ha potere d'acquisto. Tutti fanno finta di ascoltare mentre rispondono a mail.",
      img: window.mwAsset('assets/legacy/external/mw26-sponsorpage-img-006-comp-633a6c914b08.jpg'),
      color: T.violetDeep,
    },
    {
      tag: 'Digital advertising',
      kicker: 'Problema · 03',
      copy: 'CPM alle stelle. Audience fredda che scrolla. Budget che brucia senza conversioni misurabili. Il tuo CFO inizia a fare domande.',
      img: window.mwAsset('assets/legacy/external/mw26-sponsorpage-img-007-comp-2a74a16b27da.jpg'),
      color: T.ember,
    },
  ];

  return (
    <section id="sponsorizzare" style={{
      position: 'relative', padding: '140px 56px 120px',
      background: '#f4f6ff', color: T.ink, overflow: 'hidden',
    }}>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr',
          gap: 64, alignItems: 'end', marginBottom: 64,
        }}>
          <div>
            <LightEyebrow>// Il problema · Perché sei qui</LightEyebrow>
            <LightH2 max={780}>
              Perché gli eventi tradizionali <em style={{ fontStyle: 'italic', color: T.blue }}>non ti portano clienti</em>.
            </LightH2>
          </div>
          <p style={{
            fontFamily: T.sans, fontSize: 17, color: 'rgba(8,16,31,0.65)',
            lineHeight: 1.65, margin: '0 0 12px', maxWidth: 440,
          }}>
            Lo sai già. Hai provato fiere, conferenze settoriali, campagne adv.
            E ogni volta torni con la stessa sensazione: <em style={{ color: T.ink, fontWeight: 600 }}>i lead buoni non c'erano</em>.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
        }}>
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 100}>
              <article style={{
                background: '#fff', borderRadius: 18,
                border: '1px solid rgba(8,16,31,0.06)',
                overflow: 'hidden', display: 'flex', flexDirection: 'column',
                height: '100%', position: 'relative',
                transition: 'transform 0.4s cubic-bezier(0.25,1,0.5,1), box-shadow 0.4s',
                boxShadow: '0 8px 30px rgba(8,16,31,0.04)',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-8px)';
                  e.currentTarget.style.boxShadow = '0 28px 60px rgba(8,16,31,0.12)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 8px 30px rgba(8,16,31,0.04)';
                }}
              >
                <div style={{
                  aspectRatio: '4/3', overflow: 'hidden', position: 'relative',
                  background: '#0c1a35',
                }}>
                  <img src={c.img} alt={c.tag}
                    style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.05) contrast(1.05)' }}/>
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: `linear-gradient(180deg, rgba(8,13,26,0.1) 0%, rgba(8,13,26,0.55) 100%)`,
                  }}/>
                  <div style={{
                    position: 'absolute', top: 16, left: 16,
                    padding: '6px 12px', borderRadius: 6,
                    background: 'rgba(255,255,255,0.95)', color: c.color,
                    fontFamily: T.mono, fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.16em', textTransform: 'uppercase',
                  }}>× {c.kicker}</div>

                  {/* Strikethrough X */}
                  <div style={{
                    position: 'absolute', top: 16, right: 16,
                    width: 36, height: 36, borderRadius: '50%',
                    background: 'rgba(255,255,255,0.95)', display: 'grid', placeItems: 'center',
                    color: c.color, fontSize: 18, fontWeight: 700,
                  }}>✕</div>
                </div>
                <div style={{ padding: '28px 28px 32px' }}>
                  <h3 style={{
                    fontFamily: T.serif, fontWeight: 800, fontSize: 28, color: T.ink,
                    letterSpacing: '-0.015em', lineHeight: 1.1, margin: '0 0 14px',
                  }}>{c.tag}</h3>
                  <p style={{
                    fontFamily: T.sans, fontSize: 15, color: 'rgba(8,16,31,0.65)',
                    lineHeight: 1.6, margin: 0,
                  }}>{c.copy}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        {/* Pivot quote */}
        <Reveal delay={300}>
          <div style={{
            marginTop: 80, padding: '64px 64px 60px',
            background: '#fff', border: '1px solid rgba(8,16,31,0.06)',
            borderRadius: 24, position: 'relative', overflow: 'hidden',
            boxShadow: '0 20px 60px rgba(8,16,31,0.06)',
          }}>
            {/* Color accent */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 4,
              background: `linear-gradient(90deg, ${T.blue}, ${T.violetDeep}, ${T.ember}, ${T.green})`,
            }}/>
            <div style={{
              position: 'absolute', top: -100, right: -100, width: 360, height: 360,
              background: `radial-gradient(circle, ${T.ember}26, transparent 65%)`,
              filter: 'blur(40px)', pointerEvents: 'none',
            }}/>

            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
              <div>
                <div style={{
                  fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: T.ember, marginBottom: 18, fontWeight: 600,
                }}>// e se invece...</div>
                <p style={{
                  fontFamily: T.serif, fontWeight: 800, fontSize: 'clamp(28px, 3.2vw, 48px)',
                  lineHeight: 1.15, margin: 0, color: T.ink, letterSpacing: '-0.02em',
                  maxWidth: 1000, textWrap: 'balance',
                }}>
                  E se esistesse un posto dove il tuo pubblico <em style={{ fontStyle: 'italic', color: T.blue }}>viene spontaneamente</em>, resta 6 giorni, e <em style={{ fontStyle: 'italic', color: T.ember }}>costruisce relazioni vere</em> mentre tu dimostri il valore del tuo prodotto?
                </p>
              </div>
              <div style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
                padding: '20px 24px', borderRadius: 16,
                background: `linear-gradient(135deg, ${T.ink}, #1A2860)`, color: '#fff',
                minWidth: 180,
              }}>
                <div style={{
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: T.green,
                }}>esiste</div>
                <div style={{
                  fontFamily: T.serif, fontWeight: 900, fontSize: 36,
                  color: '#fff', letterSpacing: '-0.025em', lineHeight: 1,
                  textAlign: 'center',
                }}>MW26</div>
                <div style={{
                  fontFamily: T.mono, fontSize: 9, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)',
                  textAlign: 'center',
                }}>↓ scopri come</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SpTopBar, SpNav, SpHero, SpProblem });