// page-home.jsx — Home: hero video, FaventiaX mission, 3 squares, dual switch block

function HeroVideo({ phase, magneticStrength, incMetric }) {
  const { isMobile } = useViewport();
  const ctas = phase === 'public'
    ? [
        { label: 'Compra biglietti', href: '#/biglietti', primary: true },
        { label: 'Programma & speaker', href: '#/speaker' },
        { label: 'Cos’è TEDx', href: '#cosa' },
      ]
    : [
        { label: 'Diventa partner', href: '#/partner', primary: true },
        { label: 'Cos’è TEDx', href: '#cosa' },
        { label: 'Candidati come speaker', href: '#/speaker' },
      ];
  return (
    <section id="home" style={{ position: 'relative', height: 'min(94vh, 900px)', minHeight: isMobile ? 480 : 600, overflow: 'hidden', background: C.ink }}>
      {/* Aerial city slot (user drops aerial photo / video poster) */}
      <image-slot
        id="hero-aerial"
        shape="rect"
        fit="cover"
        placeholder="Trascina qui il video/foto aerea della città"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      ></image-slot>
      {/* Dark scrim for legibility */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.15) 32%, rgba(10,10,10,0.72) 100%)', pointerEvents: 'none' }}/>
      {/* Centered logo + CTAs */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center' }}>
        <Logo variant="white" height={'clamp(48px, 9vw, 132px)'} style={{ height: 'clamp(48px, 9vw, 132px)' }}/>
        <div style={{ marginTop: 28, fontFamily: FONT.mono, fontSize: 'clamp(11px,1.1vw,14px)', letterSpacing: '0.32em', textTransform: 'uppercase', color: C.white, opacity: 0.92 }}>
          Edizione zero · Fine 2026 · Faenza
        </div>
        <div style={{ marginTop: 18, fontFamily: FONT.serif, fontStyle: 'italic', fontSize: 'clamp(20px,2.4vw,34px)', color: C.white, opacity: 0.95, fontWeight: 400 }}>
          {phase === 'public' ? 'Le idee del territorio, finalmente su un palco.' : 'Idee da diffondere. Un territorio da accendere.'}
        </div>
        {/* Phase-specific CTAs */}
        <div style={{ marginTop: isMobile ? 32 : 40, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 14, flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', width: isMobile ? '100%' : 'auto', maxWidth: isMobile ? 320 : 'none' }}>
          {ctas.map((cta) => (
            <Magnetic key={cta.label} strength={magneticStrength} onMagnet={() => incMetric && incMetric('magnets')} style={{ width: isMobile ? '100%' : 'auto' }}>
              <a href={cta.href} data-cursor data-cursor-label={cta.primary ? '→ GO' : 'OPEN'}
                onClick={(e) => { if (!cta.href.startsWith('#/')) scrollToId(cta.href.slice(1), e); incMetric && incMetric('clicks'); }}
                onMouseEnter={() => incMetric && incMetric('hovers')}
                style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, textDecoration: 'none',
                  padding: cta.primary ? '16px 28px' : '16px 24px',
                  background: cta.primary ? C.red : 'rgba(255,255,255,0.10)',
                  color: C.white, borderRadius: 999,
                  border: cta.primary ? '1px solid ' + C.red : '1px solid rgba(255,255,255,0.4)',
                  fontFamily: FONT.sans, fontSize: 14, fontWeight: 600, letterSpacing: '0.01em',
                  backdropFilter: cta.primary ? 'none' : 'blur(6px)',
                  width: isMobile ? '100%' : 'auto', boxSizing: 'border-box',
                }}>
                {cta.primary ? <span style={{ width: 7, height: 7, borderRadius: 999, background: C.white }}/> : null}
                {cta.label}
                <span style={{ fontFamily: FONT.mono }}>→</span>
              </a>
            </Magnetic>
          ))}
        </div>
      </div>
      {/* Scroll hint */}
      <div style={{ position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)', fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: C.white, opacity: 0.6, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'none' }}>
        Scorri
        <span style={{ display: 'block', width: 1, height: 28, background: C.white, opacity: 0.5, animation: 'scrollpulse 1.8s ease-in-out infinite' }}/>
      </div>
      <style>{`@keyframes scrollpulse { 0%,100% { transform: scaleY(0.4); opacity: .3; transform-origin: top } 50% { transform: scaleY(1); opacity: .8; transform-origin: top } }`}</style>
    </section>
  );
}

// Thin band under hero making the dual nature explicit + switchable on-page
function PhaseBar({ phase, setPhase, incMetric }) {
  const { isMobile } = useViewport();
  return (
    <div style={{ borderBottom: `1px solid ${C.rule}`, background: C.white }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '14px 20px' : '16px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.ink55 }}>
          {phase === 'public' ? 'Stai vedendo il sito · modalità evento' : 'Stai vedendo il sito · modalità pre-vendita'}
        </div>
        <PhaseSwitch phase={phase} setPhase={setPhase} incMetric={incMetric}/>
      </div>
    </div>
  );
}
window.PhaseBar = PhaseBar;

// Tickets band — public phase hero-of-section (copy placeholder per brief)
function TicketsBand({ phase, magneticStrength, onSeen, incMetric }) {
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="tickets" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', background: C.red, color: C.white, borderBottom: `1px solid ${C.rule}` }}>
      <div id="tickets"/>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr', gap: isMobile ? 36 : 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85, marginBottom: 22 }}>Biglietti · Edizione zero</div>
          <h2 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 'clamp(40px,6vw,92px)', lineHeight: 0.92, fontWeight: 400, letterSpacing: '-0.025em' }}>
            <em>Prendi posto</em><br/>in sala.
          </h2>
          <p style={{ fontFamily: FONT.sans, fontSize: 17, lineHeight: 1.6, marginTop: 22, maxWidth: 480, opacity: 0.92 }}>
            Solo 100 posti nella Sala Comunale di Faenza. Quando il programma sarà online i biglietti andranno in fretta: lascia la mail e sei tra i primi a saperlo.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Magnetic strength={magneticStrength} onMagnet={() => incMetric && incMetric('magnets')}>
              <a href={`mailto:${MAIL.news}?subject=${encodeURIComponent('Biglietti TEDxFaenza · avvisami')}`} data-cursor data-cursor-label="GO"
                onClick={() => incMetric && incMetric('clicks')}
                style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 28px', background: C.white, color: C.red, borderRadius: 999, textDecoration: 'none', fontFamily: FONT.sans, fontSize: 14, fontWeight: 700, letterSpacing: '0.02em' }}>
                Avvisami all'apertura <span style={{ fontFamily: FONT.mono }}>→</span>
              </a>
            </Magnetic>
            <a href="#/speaker" data-cursor className="ulink" onClick={() => incMetric && incMetric('clicks')}
              style={{ display: 'inline-flex', alignItems: 'center', padding: '16px 8px', color: C.white, textDecoration: 'none', fontFamily: FONT.sans, fontSize: 14, fontWeight: 600 }}>
              Guarda il programma →
            </a>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(255,255,255,0.25)', border: '1px solid rgba(255,255,255,0.25)' }}>
          {[['Quando','Fine 2026'],['Dove','Sala Comunale'],['Posti','100'],['Lingua','Italiano']].map(([k,v]) => (
            <div key={k} style={{ background: C.red, padding: '28px 24px' }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.8, marginBottom: 8 }}>{k}</div>
              <div style={{ fontFamily: FONT.serif, fontStyle: 'italic', fontSize: 26 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}
window.TicketsBand = TicketsBand;

function FaventiaMission({ onSeen, incMetric }) {
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="mission" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', borderBottom: `1px solid ${C.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '200px 1fr', gap: isMobile ? 28 : 56 }}>
        <div>
          <Eyebrow>FaventiaX APS</Eyebrow>
          <div style={{ marginTop: 18, fontFamily: FONT.serif, fontStyle: 'italic', fontSize: 18, lineHeight: 1.5, color: C.ink70 }}>
            L'associazione che organizza TEDxFaenza.
          </div>
        </div>
        <div>
          <h2 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 'clamp(34px,5.5vw,76px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em', color: C.ink }}>
            Trasformare l'<span style={{ color: C.red, fontStyle: 'italic' }}>intento</span><br/>in <span style={{ color: C.red, fontStyle: 'italic' }}>impatto</span> per il territorio.
          </h2>
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 48, fontFamily: FONT.sans, fontSize: 16, lineHeight: 1.6 }}>
            <div>
              <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 10 }}>Visione</div>
              <p style={{ margin: 0, color: C.ink70 }}>
                Fare della Romagna Faentina un posto dove le idee migliori <strong style={{ color: C.ink }}>non se ne vanno altrove</strong>, ma trovano qui le persone e le imprese per diventare qualcosa di vero.
              </p>
            </div>
            <div>
              <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 10 }}>Missione</div>
              <p style={{ margin: 0, color: C.ink70 }}>
                Mettere nella stessa sala chi di solito non si parla: <strong style={{ color: C.ink }}>imprese, giovani, professionisti, istituzioni</strong>. E vedere cosa succede. Un palco TEDx è la scusa perfetta.
              </p>
            </div>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function ThreeSquares({ onSeen, incMetric }) {
  const squares = [
    {
      k: 'TED', accent: false,
      body: 'Organizzazione no-profit internazionale nata nel 1984 per stimolare la diffusione di idee di valore. Da qui il motto "Ideas Worth Spreading". I TED Talk, max 18 minuti, sono tradotti in oltre 100 lingue.',
      link: ['Vai a TED.com', 'https://www.ted.com'],
    },
    {
      k: 'TEDx', accent: false,
      body: 'Il programma ufficiale di eventi locali no-profit, organizzati in modo indipendente su licenza TED. La "x" indica autonomia: TEDx porta TED nelle comunità locali, combinando talk dal vivo e contenuti multimediali.',
      link: ['Programma TEDx', 'https://www.ted.com/about/programs-initiatives/tedx-program'],
    },
    {
      k: 'TEDxFaenza', accent: true,
      body: 'Nasce dalla volontà di un team di giovani volontari e volontarie del territorio: un evento capace di portare a Faenza idee, esperienze e visioni di valore, valorizzando il territorio e generando connessioni autentiche.',
      link: ['Diventa partner', '#partner'],
    },
  ];
  const { isMobile, width } = useViewport();
  // The 1:1 square only holds without overflow once each column is wide enough
  // for the card text (~360px); that needs the viewport ≳1240px. Below that the
  // cards take their natural height so aspect-ratio can't blow out the grid.
  const square = width >= 1240;
  return (
    <Reveal as="section" sectionId="cosa" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', background: C.paper, borderBottom: `1px solid ${C.rule}` }}>
      <div id="cosa"/>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 36 : 56 }}>
          <Eyebrow style={{ justifyContent: 'center' }}>In due minuti</Eyebrow>
          <h2 style={{ margin: '16px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(32px,4.5vw,60px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
            Cos'è <em style={{ color: C.red }}>TED</em>, cos'è <em style={{ color: C.red }}>TEDx</em>, cos'è <em style={{ color: C.red }}>TEDxFaenza</em>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 1, background: C.rule, border: `1px solid ${C.rule}` }}>
          {squares.map((s, i) => (
            <div key={s.k} data-cursor data-cursor-label="OK"
              onMouseEnter={() => incMetric && incMetric('hovers')}
              style={{
                background: s.accent ? C.ink : C.white, color: s.accent ? C.white : C.ink,
                padding: isMobile ? '32px 24px' : '40px 32px', aspectRatio: square ? '1 / 1' : 'auto', minHeight: isMobile ? 'auto' : 300, display: 'flex', flexDirection: 'column',
                transition: 'transform .3s cubic-bezier(.2,.8,.2,1)',
              }}
              onMouseOver={(e) => e.currentTarget.style.transform = 'scale(0.985)'}
              onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}>
              <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 24 }}>{String(i+1).padStart(2,'0')}</div>
              <h3 style={{ margin: 0, fontFamily: FONT.sans, fontSize: 34, fontWeight: 700, letterSpacing: '-0.02em' }}>
                {s.k === 'TEDx' ? <>TED<span style={{ color: C.red }}>x</span></> : s.k === 'TEDxFaenza' ? <>TED<span style={{ color: C.red }}>x</span>Faenza</> : s.k}
              </h3>
              <p style={{ fontFamily: FONT.sans, fontSize: 14.5, lineHeight: 1.6, marginTop: 18, opacity: s.accent ? 0.85 : 0.78, flex: 1 }}>{s.body}</p>
              <a href={s.link[1]} target={s.link[1].startsWith('http') ? '_blank' : undefined} rel="noopener" data-cursor className="ulink"
                onClick={() => incMetric && incMetric('clicks')}
                style={{ fontFamily: FONT.sans, fontSize: 13, fontWeight: 600, color: s.accent ? C.white : C.red, textDecoration: 'none', marginTop: 20, alignSelf: 'flex-start' }}>
                {s.link[0]} →
              </a>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

// Home switch block — (a) diventa partner  |  (b) speakers + events + companies
function HomeSwitch({ phase, setPhase, magneticStrength, onSeen, incMetric, showSwitch }) {
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="switch" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', borderBottom: `1px solid ${C.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div>
            <Eyebrow>Cosa cerchi</Eyebrow>
            <h2 style={{ margin: '16px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(34px,4vw,56px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
              {phase === 'public' ? <><em>Vivi</em> l'edizione zero.</> : <><em>Costruisci</em> l'edizione zero con noi.</>}
            </h2>
          </div>
          {showSwitch ? <PhaseSwitch phase={phase} setPhase={setPhase} incMetric={incMetric}/> : null}
        </div>

        {phase === 'public' ? <HomePublic magneticStrength={magneticStrength} incMetric={incMetric}/> : <HomePartner magneticStrength={magneticStrength} incMetric={incMetric}/>}
      </div>
    </Reveal>
  );
}

// (a) Partner-first home content
function HomePartner({ magneticStrength, incMetric }) {
  const { isMobile } = useViewport();
  return (
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: 1, background: C.rule, border: `1px solid ${C.rule}` }}>
      <a href="#/partner" data-cursor data-cursor-label="→ GO"
        onClick={() => incMetric && incMetric('clicks')}
        onMouseEnter={() => incMetric && incMetric('hovers')}
        style={{ background: C.red, color: C.white, padding: isMobile ? '40px 24px' : '56px 48px', textDecoration: 'none', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: isMobile ? 280 : 360, gap: 24, transition: 'background .25s' }}
        onMouseOver={(e) => e.currentTarget.style.background = '#c70022'}
        onMouseOut={(e) => e.currentTarget.style.background = C.red}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          <span>Per le imprese</span><span>★ priorità</span>
        </div>
        <div>
          <h3 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 'clamp(40px,5vw,72px)', lineHeight: 0.95, fontWeight: 500, fontStyle: 'italic' }}>Diventa partner</h3>
          <p style={{ fontFamily: FONT.sans, fontSize: 16, lineHeight: 1.55, marginTop: 18, maxWidth: 440, opacity: 0.92 }}>
            L'edizione zero esiste solo se le imprese di Faenza decidono di costruirla con noi. Visibilità, racconto, una community vera. Non numeri buttati lì.
          </p>
          <div style={{ marginTop: 24, fontFamily: FONT.sans, fontSize: 15, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            Scopri i pacchetti partner <span style={{ fontFamily: FONT.mono }}>→</span>
          </div>
        </div>
      </a>
      <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 1, background: C.rule }}>
        <a href="#/speaker" data-cursor className="lift"
          onClick={() => incMetric && incMetric('clicks')}
          style={{ background: C.white, color: C.ink, padding: '32px 32px', textDecoration: 'none', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 12 }}>Hai un'idea?</div>
          <h4 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 30, fontStyle: 'italic', fontWeight: 500 }}>Candidati come speaker</h4>
          <span className="ulink" style={{ fontFamily: FONT.sans, fontSize: 13, fontWeight: 600, color: C.red, marginTop: 12 }}>Proponi un talk →</span>
        </a>
        <a href="#/chi-siamo" data-cursor className="lift"
          onClick={() => incMetric && incMetric('clicks')}
          style={{ background: C.white, color: C.ink, padding: '32px 32px', textDecoration: 'none', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 12 }}>Vuoi esserci?</div>
          <h4 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 30, fontStyle: 'italic', fontWeight: 500 }}>Unisciti ai volontari</h4>
          <span className="ulink" style={{ fontFamily: FONT.sans, fontSize: 13, fontWeight: 600, color: C.red, marginTop: 12 }}>Day event team →</span>
        </a>
      </div>
    </div>
  );
}

// (b) Public-facing home content — speakers / events / companies
function HomePublic({ magneticStrength, incMetric }) {
  const { isMobile } = useViewport();
  const cards = [
    { tag: 'I nostri speaker', t: 'Le voci dell\'edizione', s: 'Le persone che salgono sul palco dell\'edizione zero. I primi nomi, in arrivo.', href: '#/speaker', label: 'Vedi gli speaker' },
    { tag: 'I nostri eventi', t: 'Anche dedicati ai partner', s: 'Talk, incontri e serate riservate alla community e alle imprese partner.', href: '#/partner', label: 'Calendario eventi' },
    { tag: 'Le imprese', t: 'Chi crede nella nostra impresa', s: 'I partner che rendono possibile TEDxFaenza. Loghi e storie.', href: '#/partner', label: 'I partner' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 1, background: C.rule, border: `1px solid ${C.rule}` }}>
      {cards.map((c, i) => (
        <a key={i} href={c.href} data-cursor data-cursor-label="OPEN"
          onClick={() => incMetric && incMetric('clicks')}
          onMouseEnter={() => incMetric && incMetric('hovers')}
          style={{ background: i === 0 ? C.ink : C.white, color: i === 0 ? C.white : C.ink, padding: '40px 32px', textDecoration: 'none', minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', transition: 'transform .3s cubic-bezier(.2,.8,.2,1)' }}
          onMouseOver={(e) => e.currentTarget.style.transform = 'translateY(-4px)'}
          onMouseOut={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: i === 0 ? C.white : C.red }}>
            <span>{String(i+1).padStart(2,'0')}</span><span>{c.tag}</span>
          </div>
          <div>
            <h3 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 32, lineHeight: 1.05, fontStyle: 'italic', fontWeight: 500 }}>{c.t}</h3>
            <p style={{ fontFamily: FONT.sans, fontSize: 14, lineHeight: 1.55, marginTop: 14, opacity: i === 0 ? 0.8 : 0.7 }}>{c.s}</p>
            <span className="ulink" style={{ fontFamily: FONT.sans, fontSize: 13, fontWeight: 600, color: i === 0 ? C.white : C.red, marginTop: 16, display: 'inline-block' }}>{c.label} →</span>
          </div>
        </a>
      ))}
    </div>
  );
}

// ── Page compositions ───────────────────────────────────────────────────────
// Homepage: hero + "cos'è TED/TEDx" + a "what are you looking for" nav block.
// Deliberately contains NO sponsor logos (TED rule) — only links to /partner.
function HomePage({ phase, setPhase, magneticStrength, onSeen, incMetric, showSwitch }) {
  return (
    <>
      <HeroVideo phase={phase} magneticStrength={magneticStrength} incMetric={incMetric}/>
      <FaventiaMission onSeen={onSeen} incMetric={incMetric}/>
      <ThreeSquares onSeen={onSeen} incMetric={incMetric}/>
      <HomeSwitch phase={phase} setPhase={setPhase} magneticStrength={magneticStrength} onSeen={onSeen} incMetric={incMetric} showSwitch={showSwitch}/>
    </>
  );
}

// Biglietti page (public phase only).
function TicketsPage({ phase, magneticStrength, onSeen, incMetric }) {
  return <TicketsBand phase={phase} magneticStrength={magneticStrength} onSeen={onSeen} incMetric={incMetric}/>;
}

window.HeroVideo = HeroVideo;
window.FaventiaMission = FaventiaMission;
window.ThreeSquares = ThreeSquares;
window.HomeSwitch = HomeSwitch;
window.HomePage = HomePage;
window.TicketsPage = TicketsPage;