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

// =============== VILLAGE — DARK signature moment (sunset orange) ===============
function SpVillage() {
  const opps = [
    {
      n: '01',
      title: 'Sponsorizza attività specifiche',
      copy: 'Aperitivo sunset, torneo padel, yoga mattutino, karaoke night, DJ set pool party.',
      tags: ['sunset', 'padel', 'yoga', 'karaoke', 'pool party'],
      color: T.ember,
    },
    {
      n: '02',
      title: 'Brandizza aree relax',
      copy: '"Chill Zone powered by", "Morning Coffee Corner", "Sunset Lounge". Il tuo brand vive ogni momento informale.',
      tags: ['chill zone', 'coffee corner', 'sunset lounge'],
      color: T.green,
    },
    {
      n: '03',
      title: 'Sampling in contesto informale',
      copy: 'Non è uno stand, è un regalo tra amici. Il prodotto arriva nelle mani giuste, nel momento giusto.',
      tags: ['gifting', 'sampling', 'context'],
      color: T.blueLight,
    },
    {
      n: '04',
      title: 'Co-organizza mastermind riservati',
      copy: '10—15 persone max. Alta qualità. Conversazioni profonde su un singolo tema con audience pre-filtrata.',
      tags: ['10–15 pax', 'mastermind', 'riservato'],
      color: T.violet,
    },
    {
      n: '05',
      title: 'Networking naturale, non forzato',
      copy: 'I migliori deal si fanno davanti a una piadina alle 2 di notte. Niente badge, niente forzature.',
      tags: ['no badge', 'real talk', '24/7'],
      color: T.fuchsia,
    },
  ];

  return (
    <section id="village" style={{
      position: 'relative', padding: '140px 56px 160px',
      background: `linear-gradient(180deg, #2A1A12 0%, ${T.ink} 60%, ${T.ink} 100%)`,
      color: '#fff', overflow: 'hidden',
    }}>
      {/* Sunset washes */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-5%', left: '50%', transform: 'translateX(-50%)',
        width: '90%', height: '60%',
        background: `radial-gradient(ellipse, ${T.ember}55 0%, ${T.fuchsia}33 30%, transparent 65%)`,
        filter: 'blur(120px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '0%', right: '-15%', width: '70%', height: '60%',
        background: `radial-gradient(ellipse, ${T.violetDeep}44, transparent 60%)`,
        filter: 'blur(140px)', pointerEvents: 'none',
      }}/>

      {/* Top wave shape divider (light to dark transition) */}
      <svg style={{
        position: 'absolute', top: -1, left: 0, right: 0, width: '100%', height: 80,
        pointerEvents: 'none', display: 'block',
      }} viewBox="0 0 1440 80" preserveAspectRatio="none">
        <path d="M0,0 L1440,0 L1440,40 C 1100,80 720,20 360,60 C 180,80 0,40 0,40 Z"
          fill="#f4f6ff"/>
      </svg>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <Eyebrow accent={T.ember}>// Marketers Village · 6 giorni</Eyebrow>
            <H2 max={920}>
              Non finisce con il palco. <Italic color={T.ember}>Continua al village</Italic>.
            </H2>
            <p style={{
              fontFamily: T.sans, fontSize: 17, color: 'rgba(255,255,255,0.78)',
              lineHeight: 1.65, margin: 0, maxWidth: 640,
            }}>
              Il Marketers Village è un villaggio <strong style={{ color: '#fff', fontWeight: 700 }}>sul mare</strong> riservato per 6 giorni.
              Qui sponsor e partecipanti vivono insieme: colazioni condivise, aperitivi al
              tramonto, partite di padel, mastermind spontanei, conversazioni notturne che
              cambiano business.
              <span style={{
                display: 'block', marginTop: 18, fontFamily: T.serif, fontStyle: 'italic',
                fontWeight: 800, fontSize: 24, color: '#fff', letterSpacing: '-0.01em',
                lineHeight: 1.3,
              }}>
                Non è networking forzato con badge al collo. <span style={{ color: T.ember }}>È vita vera</span>.
              </span>
            </p>
          </div>

          {/* Photo card */}
          <Reveal>
            <div style={{
              position: 'relative', aspectRatio: '4/5', borderRadius: 20,
              overflow: 'hidden', border: `1px solid ${T.ember}40`,
              boxShadow: `0 30px 80px ${T.ember}33`,
            }}>
              <img
                src={window.mwAsset('assets/village-aerial.jpg', 'assets/village-aerial.jpg')}
                alt="Marketers Village"
                style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.85) saturate(1.1)' }}
                onError={e => { e.currentTarget.style.display = 'none'; }}
              />
              <div style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(180deg, transparent 40%, rgba(8,13,26,0.85) 100%)`,
              }}/>
              <div style={{
                position: 'absolute', top: 18, left: 18, right: 18,
                display: 'flex', justifyContent: 'space-between',
                fontFamily: T.mono, fontSize: 10, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.8)', fontWeight: 600,
              }}>
                <span>┌── Marketers Village</span>
                <span style={{ color: T.ember }}>● LIVE 6gg</span>
              </div>
              <div style={{ position: 'absolute', bottom: 28, left: 28, right: 28 }}>
                <div style={{
                  fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: T.ember, marginBottom: 10, fontWeight: 600,
                }}>· Riviera adriatica · OCT 2026</div>
                <div style={{
                  fontFamily: T.serif, fontWeight: 800, fontSize: 28, color: '#fff',
                  letterSpacing: '-0.015em', lineHeight: 1.1,
                }}>
                  6 giorni di <em style={{ color: T.ember, fontStyle: 'italic' }}>co-living</em><br/>
                  sul mare di Rimini.
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 16,
          margin: '40px 0 32px',
        }}>
          <div style={{
            fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: T.ember, fontWeight: 600,
          }}>// Opportunità uniche per gli sponsor</div>
          <div style={{ flex: 1, height: 1, background: 'rgba(232,121,58,0.25)' }}/>
        </div>

        {/* Opportunity bento — 5 cards in asymmetric grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
        }}>
          {opps.map((o, i) => {
            const span =
              i === 0 ? 'span 3' :
              i === 1 ? 'span 3' :
              i === 2 ? 'span 2' :
              i === 3 ? 'span 2' : 'span 2';
            return (
              <Reveal key={i} delay={i * 100} style={{ gridColumn: span }}>
                <div style={{
                  height: '100%', padding: '32px 30px 30px',
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid rgba(255,255,255,0.08)',
                  borderRadius: 16,
                  display: 'flex', flexDirection: 'column', gap: 16,
                  position: 'relative', overflow: 'hidden',
                  transition: 'transform 0.3s, border-color 0.3s, background 0.3s',
                  backdropFilter: 'blur(8px)',
                }}
                  onMouseEnter={e => {
                    e.currentTarget.style.transform = 'translateY(-6px)';
                    e.currentTarget.style.borderColor = o.color + '60';
                    e.currentTarget.style.background = 'rgba(255,255,255,0.07)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                    e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
                  }}
                >
                  <div style={{
                    position: 'absolute', top: 0, right: 0, width: 140, height: 140,
                    background: `radial-gradient(circle at top right, ${o.color}26, transparent 70%)`,
                    pointerEvents: 'none',
                  }}/>

                  <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  }}>
                    <span style={{
                      fontFamily: T.serif, fontWeight: 900, fontSize: 40,
                      color: '#fff', letterSpacing: '-0.025em', lineHeight: 0.9,
                    }}><span style={{ color: o.color }}>#</span>{o.n}</span>
                  </div>

                  <h3 style={{
                    fontFamily: T.serif, fontWeight: 800, fontSize: 22, color: '#fff',
                    letterSpacing: '-0.01em', lineHeight: 1.15, margin: 0,
                  }}>{o.title}</h3>

                  <p style={{
                    fontFamily: T.sans, fontSize: 14, color: 'rgba(255,255,255,0.7)',
                    lineHeight: 1.55, margin: 0,
                  }}>{o.copy}</p>

                  <div style={{
                    marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 6,
                  }}>
                    {o.tags.map((t, j) => (
                      <span key={j} style={{
                        padding: '4px 10px', borderRadius: 999,
                        background: `${o.color}15`, border: `1px solid ${o.color}40`,
                        fontFamily: T.mono, fontSize: 10, letterSpacing: '0.1em',
                        color: o.color, textTransform: 'lowercase', fontWeight: 500,
                      }}>{t}</span>
                    ))}
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>

        {/* Bottom strip — village daily flow */}
        <Reveal delay={300}>
          <div style={{
            marginTop: 48, padding: '28px 36px',
            background: 'rgba(0,0,0,0.35)', border: `1px solid ${T.ember}30`,
            borderRadius: 14, display: 'flex', flexWrap: 'wrap', alignItems: 'center',
            gap: 18, justifyContent: 'space-between',
          }}>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
              textTransform: 'uppercase', color: T.ember, fontWeight: 600,
            }}>// una giornata tipo</div>
            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 22,
              fontFamily: T.mono, fontSize: 11, color: 'rgba(255,255,255,0.75)',
              letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>
              <span><span style={{ color: T.green }}>07:00</span> · yoga sunrise</span>
              <span><span style={{ color: T.blueLight }}>10:00</span> · mastermind</span>
              <span><span style={{ color: T.violet }}>14:00</span> · padel</span>
              <span><span style={{ color: T.ember }}>19:00</span> · aperitivo</span>
              <span><span style={{ color: T.fuchsia }}>23:00</span> · piadina&deal</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// =============== FAQ — LIGHT accordion ===============
function SpFAQ() {
  const faqs = [
    {
      q: 'Posso proporre uno speech anche se sono sponsor?',
      a: 'Assolutamente sì. Se hai un case study interessante o una strategia innovativa da condividere, possiamo includere uno speech nel tuo pacchetto.',
    },
    {
      q: "Qual è l'investimento minimo per partecipare?",
      a: "Preferiamo parlarne in call perché ogni pacchetto è personalizzato. L'investimento varia in base agli obiettivi, alla visibilità richiesta e alle attività incluse.",
    },
    {
      q: 'Posso sponsorizzare se sono una startup piccola?',
      a: 'Sì, ma valutiamo caso per caso. Abbiamo pacchetti anche per startup in fase early, soprattutto se il prodotto è rilevante per il nostro pubblico.',
    },
    {
      q: 'Quando devo decidere per assicurarmi un posto?',
      a: "Prima possibile. Diamo priorità per garantire l'esclusività merceologica. Se un competitor prenota prima di te, quella categoria si chiude.",
    },
    {
      q: "Come funziona l'esclusività merceologica?",
      a: 'Un solo brand per categoria. Se sei una piattaforma di email marketing e diventi nostro partner, nessun altro tool di email marketing potrà sponsorizzare.',
    },
    {
      q: 'Posso portare il mio team allo stand?',
      a: "Certo. Anzi, consigliamo di avere almeno 2-3 persone del team per coprire tutte le ore dell'evento. Ti forniamo badge sponsor per il tuo team e accesso a un'area riservata sponsor.",
    },
    {
      q: 'Posso sponsorizzare solo il Village e non il main event?',
      a: 'Sì, puoi scegliere di sponsorizzare solo attività del Marketers Village se il tuo brand è più adatto a quel contesto (es. food&beverage, fitness, travel).',
    },
  ];
  const [open, setOpen] = useStV(0);

  return (
    <section id="faq" style={{
      position: 'relative', padding: '140px 56px 140px',
      background: '#f4f6ff', color: T.ink, overflow: 'hidden',
    }}>
      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <LightEyebrow>// FAQ · 7 domande</LightEyebrow>
            <LightH2 max={400}>
              Domande <em style={{ fontStyle: 'italic', color: T.blue }}>frequenti</em>.
            </LightH2>
            <p style={{
              fontFamily: T.sans, fontSize: 15, color: 'rgba(8,16,31,0.65)',
              lineHeight: 1.65, margin: '0 0 28px', maxWidth: 380,
            }}>
              Le cose che ci chiedono più spesso prima di prenotare una call.
              Se non trovi la tua, scrivici direttamente.
            </p>
            <div style={{
              padding: '24px 26px', borderRadius: 14,
              background: '#fff', border: `1px solid ${T.green}30`,
              boxShadow: '0 8px 30px rgba(46,229,161,0.08)',
            }}>
              <div style={{
                fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: T.green, marginBottom: 8, fontWeight: 700,
              }}>// non hai trovato la tua?</div>
              <div style={{ fontFamily: T.sans, fontSize: 14, color: T.ink, lineHeight: 1.5 }}>
                Scrivici a{' '}
                <a href="mailto:sponsor@marketersworld.net" style={{ color: T.blue, textDecoration: 'underline', textDecorationStyle: 'dotted', fontWeight: 600 }}>
                  sponsor@marketersworld.net
                </a>
                {' '}o prenota una call esplorativa.
              </div>
            </div>
          </div>

          <div style={{
            border: '1px solid rgba(8,16,31,0.08)', borderRadius: 18,
            overflow: 'hidden', background: '#fff',
            boxShadow: '0 8px 40px rgba(8,16,31,0.05)',
          }}>
            {faqs.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{
                  borderBottom: i < faqs.length - 1 ? '1px solid rgba(8,16,31,0.06)' : 'none',
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: '100%', background: isOpen ? 'rgba(75,107,251,0.04)' : 'transparent',
                    border: 'none', color: 'inherit',
                    textAlign: 'left', padding: '26px 30px',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 16, cursor: 'pointer', fontFamily: T.sans,
                    transition: 'background 0.2s',
                  }}>
                    <span style={{
                      display: 'flex', alignItems: 'center', gap: 20, flex: 1,
                    }}>
                      <span style={{
                        fontFamily: T.mono, fontSize: 11,
                        color: isOpen ? T.blue : 'rgba(8,16,31,0.35)',
                        letterSpacing: '0.16em', transition: 'color 0.3s', fontWeight: 700,
                      }}>0{i + 1}</span>
                      <span style={{
                        fontFamily: T.serif, fontWeight: 700, fontSize: 19,
                        color: T.ink, letterSpacing: '-0.005em', lineHeight: 1.3,
                      }}>{f.q}</span>
                    </span>
                    <span style={{
                      width: 36, height: 36, borderRadius: '50%',
                      border: '1px solid ' + (isOpen ? T.blue : 'rgba(8,16,31,0.12)'),
                      background: isOpen ? T.blue : 'transparent',
                      display: 'grid', placeItems: 'center', flexShrink: 0,
                      color: isOpen ? '#fff' : 'rgba(8,16,31,0.6)',
                      transform: `rotate(${isOpen ? 45 : 0}deg)`,
                      transition: 'all 0.3s',
                      fontSize: 20, fontWeight: 300,
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 500 : 0, overflow: 'hidden',
                    transition: 'max-height 0.4s ease',
                  }}>
                    <div style={{
                      padding: '0 30px 30px 80px',
                      fontFamily: T.sans, fontSize: 15.5, color: 'rgba(8,16,31,0.7)',
                      lineHeight: 1.65,
                    }}>{f.a}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== FINAL CTA — DARK punchy ===============
function SpFinalCTA() {
  const checks = [
    'Call di 30 minuti entro 48 ore dalla richiesta',
    "Presentazione dell'evento e dei pacchetti disponibili",
    'Proposta personalizzata entro 7 giorni lavorativi',
    'Zero impegno fino alla firma del contratto',
  ];

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

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow accent={T.green}>// Prenota call · MW26</Eyebrow>
            <h2 style={{
              fontFamily: T.serif, fontWeight: 900,
              fontSize: 'clamp(48px, 6.4vw, 96px)',
              lineHeight: 0.95, letterSpacing: '-0.04em',
              color: '#fff', margin: '20px 0 24px', textWrap: 'balance',
            }}>
              Creiamo il futuro<br/>
              del mercato, <Italic color={T.green}>insieme</Italic>.
            </h2>
            <p style={{
              fontFamily: T.sans, fontSize: 18, color: 'rgba(255,255,255,0.78)',
              lineHeight: 1.6, margin: '0 0 36px', maxWidth: 580,
            }}>
              30 minuti per capire se Marketers World è l'investimento giusto per te.
              <strong style={{ color: '#fff', fontWeight: 700 }}> Zero pressione, massima trasparenza.</strong>
            </p>

            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <PrimaryBtn href="#prenota-form" green style={{ padding: '18px 32px', fontSize: 15 }}>
                Prenota la call
              </PrimaryBtn>
              <GhostBtn href="mailto:sponsor@marketersworld.net" style={{ padding: '18px 32px', fontSize: 15 }}>
                Scrivi una mail →
              </GhostBtn>
            </div>
          </div>

          {/* RIGHT — "What happens next" card */}
          <Reveal delay={150}>
            <div style={{
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(75,107,251,0.35)',
              backdropFilter: 'blur(16px)',
              borderRadius: 20, padding: '40px 36px 32px',
              position: 'relative', overflow: 'hidden',
              boxShadow: '0 30px 80px rgba(23,70,245,0.25)',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 3,
                background: `linear-gradient(90deg, ${T.green}, ${T.blueLight}, ${T.violet})`,
              }}/>

              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: T.green, marginBottom: 28, fontWeight: 600,
              }}>
                <span style={{
                  width: 6, height: 6, background: T.green, borderRadius: '50%',
                  boxShadow: `0 0 12px ${T.green}`,
                  animation: 'pulse 2s ease infinite',
                }}/>
                // Cosa succede dopo
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 20 }}>
                {checks.map((c, i) => (
                  <li key={i} style={{
                    display: 'flex', gap: 16, alignItems: 'flex-start',
                  }}>
                    <span style={{
                      width: 32, height: 32, borderRadius: 10,
                      background: 'rgba(46,229,161,0.15)',
                      border: '1px solid rgba(46,229,161,0.5)',
                      display: 'grid', placeItems: 'center', flexShrink: 0,
                      color: T.green, fontSize: 13, fontWeight: 700,
                      fontFamily: T.mono,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      fontFamily: T.sans, fontSize: 15, color: 'rgba(255,255,255,0.88)',
                      lineHeight: 1.5, paddingTop: 5,
                    }}>{c}</span>
                  </li>
                ))}
              </ul>

              <div style={{
                marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
                display: 'flex', alignItems: 'center', gap: 16,
              }}>
                <div style={{
                  fontFamily: T.serif, fontWeight: 900, fontSize: 44,
                  color: T.green, lineHeight: 1, letterSpacing: '-0.03em',
                }}>48h</div>
                <div style={{
                  fontFamily: T.sans, fontSize: 13, color: 'rgba(255,255,255,0.75)', lineHeight: 1.4,
                }}>
                  tempo medio di risposta<br/>
                  <span style={{ color: 'rgba(255,255,255,0.45)', fontSize: 11 }}>· lun—ven, orario italiano</span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Mini form */}
        <Reveal delay={300}>
          <div id="prenota-form" style={{
            marginTop: 72, padding: '40px 48px',
            background: 'rgba(0,0,0,0.45)',
            border: '1px solid rgba(255,255,255,0.10)',
            borderRadius: 18,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr) auto', gap: 16,
            alignItems: 'end',
            backdropFilter: 'blur(12px)',
          }}>
            {[
              { label: 'Nome e cognome', ph: 'Mario Rossi' },
              { label: 'Azienda', ph: 'Acme S.r.l.' },
              { label: 'Email business', ph: 'mario@acme.com' },
              { label: 'Obiettivo', ph: 'Lead / Brand / Community' },
            ].map((f, i) => (
              <div key={i}>
                <label style={{
                  display: 'block', fontFamily: T.mono, fontSize: 10,
                  letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'rgba(255,255,255,0.55)', marginBottom: 10, fontWeight: 600,
                }}>// {f.label}</label>
                <input type="text" placeholder={f.ph} style={{
                  width: '100%', padding: '12px 14px',
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.12)',
                  borderRadius: 8, fontFamily: T.sans, fontSize: 14,
                  color: '#fff', outline: 'none',
                  transition: 'border-color 0.3s, background 0.3s',
                }}
                  onFocus={e => { e.currentTarget.style.borderColor = T.green; e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
                  onBlur={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; }}
                />
              </div>
            ))}
            <button onClick={e => { e.preventDefault(); }} style={{
              padding: '13px 26px', borderRadius: 999,
              background: T.green, color: T.ink,
              border: '1px solid rgba(46,229,161,0.5)',
              fontFamily: T.sans, fontSize: 14, fontWeight: 700,
              boxShadow: '0 12px 30px rgba(46,229,161,0.35)',
              cursor: 'pointer', whiteSpace: 'nowrap',
            }}>Invia →</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// =============== FOOTER ===============
function SpFooter() {
  return (
    <footer style={{
      background: '#04081A', borderTop: '1px solid rgba(255,255,255,0.06)',
      padding: '72px 56px 40px', color: 'rgba(255,255,255,0.6)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{
          paddingBottom: 56, borderBottom: '1px solid rgba(255,255,255,0.08)',
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end',
        }}>
          <div style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(36px, 4vw, 64px)',
            lineHeight: 0.95, letterSpacing: '-0.03em', color: '#fff',
          }}>
            Diventa sponsor del<br/>
            <em style={{ fontStyle: 'italic', color: T.green }}>Marketers World 2026</em>.
          </div>
          <div style={{ justifySelf: 'end' }}>
            <PrimaryBtn href="#prenota-call" green style={{ padding: '16px 30px', fontSize: 15 }}>
              Scopri come
            </PrimaryBtn>
          </div>
        </div>

        <div style={{
          padding: '56px 0 48px',
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
        }}>
          <div>
            <img src={window.mwAsset('assets/legacy/external/logo-marketersworld-by-wearemarketers-81902c5f2da2.png')}
              alt="Marketers World" style={{ height: 32, marginBottom: 24, opacity: 0.9 }}/>
            <div style={{
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: T.blueLight, marginBottom: 8, fontWeight: 600,
            }}>16—17—18 OTT 2026</div>
            <div style={{ fontFamily: T.sans, fontSize: 14, lineHeight: 1.6 }}>
              Palacongressi di Rimini<br/>
              <span style={{ color: 'rgba(255,255,255,0.45)' }}>+ Marketers Village · 6gg</span>
            </div>
          </div>

          <FooterCol title="Evento" items={[
            'Candidati come Speaker',
            'Speaker Invitati',
            'Workshop',
            'Programma Completo',
            'Marketers Party',
            'Marketers Lounge',
          ]}/>

          <FooterCol title="Risorse" items={[
            "Testimonianze",
            'Risorse condivise durante gli speech',
          ]}/>

          <FooterCol title="Per Aziende" items={[
            'Diventa Sponsor',
            'Sei un creator o giornalista?',
            'Candidati come media partner',
          ]}/>
        </div>

        <div style={{
          paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.06)',
          display: 'flex', flexWrap: 'wrap', gap: 18,
          alignItems: 'center', justifyContent: 'space-between',
          fontFamily: T.mono, fontSize: 11, letterSpacing: '0.06em',
          color: 'rgba(255,255,255,0.4)',
        }}>
          <div>© Marketers Company srl · p.iva 01976200384</div>
          <div style={{ display: 'flex', gap: 22 }}>
            <a href="#" style={{ color: 'inherit', borderBottom: '1px dotted rgba(255,255,255,0.3)' }}>Privacy Policy</a>
            <a href="#" style={{ color: 'inherit', borderBottom: '1px dotted rgba(255,255,255,0.3)' }}>Hai bisogno di assistenza?</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)',
        marginBottom: 20, fontWeight: 600,
      }}>// {title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => {
          const linkMap = { 'Diventa Sponsor': 'diventa-sponsor.html', 'Marketers Village': 'marketers-village.html' };
          const href = linkMap[it] || '#';
          return (
            <li key={i}>
              <a href={href} style={{
                fontFamily: T.sans, fontSize: 14, color: 'rgba(255,255,255,0.7)',
                transition: 'color 0.2s',
              }}
                onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; }}
              >{it}</a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Object.assign(window, { SpVillage, SpFAQ, SpFinalCTA, SpFooter });