// Page sections

// ===== TICKER BAR =====
const TickerBar = () => {
  const msg = '⚡ Últimas vagas · A Copa começa em 11 de junho · Não perca a oportunidade · Sua marca a um clique de estar na Copa · ';
  return (
    <div style={{
      background: 'var(--c-gold)', color: 'var(--c-night)',
      padding: '10px 0', overflow: 'hidden', whiteSpace: 'nowrap',
      position: 'sticky', top: 0, zIndex: 9999,
      fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13,
      letterSpacing: '0.04em'
    }}>
      <div style={{
        display: 'inline-block',
        animation: 'ticker 20s linear infinite'
      }}>
        {msg.repeat(4)}
      </div>
      <style>{`
        @keyframes ticker {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
};

const WALINK = 'https://q.revenoise.com/suamarcanacopa';

// ===== 01 HERO =====
const Hero = ({ tweaks }) =>
<SectionWrap bg="night" pad="lg" id="hero" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
    {/* Background placeholder */}
    <div style={{
    position: 'absolute', inset: 0,
    backgroundImage: 'repeating-linear-gradient(135deg, rgba(247,244,238,0.04) 0 2px, transparent 2px 18px)',
    background: 'linear-gradient(180deg, rgba(11,31,58,0.55) 0%, rgba(11,31,58,0.85) 100%), repeating-linear-gradient(135deg, rgba(247,244,238,0.06) 0 2px, transparent 2px 22px)'
  }} />
    <div style={{
    position: 'absolute', inset: 0,
    backgroundImage: 'radial-gradient(ellipse at 20% 30%, rgba(245,197,24,0.08), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(0,156,59,0.06), transparent 55%)',
    pointerEvents: 'none'
  }} />
    {/* Top nav — fixed to top of section */}
    <div style={{
    position: 'absolute', top: 32, left: 0, right: 0,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '0 24px', maxWidth: 1200, margin: '0 auto',
    zIndex: 3
  }}>
      <Logo />
      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }} className="hide-mobile">
        <a href="#pacotes" className="label" style={{ color: 'var(--c-cement)' }}>Pacotes</a>
        <a href="#como" className="label" style={{ color: 'var(--c-cement)' }}>Como funciona</a>
        <a href="#faq" className="label" style={{ color: 'var(--c-cement)' }}>FAQ</a>
      </div>
    </div>

    {/* FIFA 2026 logo — floating top-right */}
    <img
    src="assets/fifa-2026.png"
    alt="FIFA World Cup 2026"
    className="hide-mobile"
    style={{
      position: 'absolute', top: 80, right: 40,
      width: 140, height: 'auto', zIndex: 3,
      filter: 'drop-shadow(0 8px 32px rgba(0,0,0,0.5))'
    }} />
  

    <div style={{ position: 'relative', zIndex: 2, width: '100%', maxWidth: 1200, margin: '0 auto', paddingTop: 60 }}>
      <div style={{ marginBottom: 32 }}>
        <Badge color="green">FIFA World Cup 2026 · Estados Unidos</Badge>
      </div>

      <h1 className="display" style={{
      fontSize: 'clamp(44px, 7vw, 88px)',
      color: 'var(--c-gold)',
      margin: 0,
      maxWidth: 1100,
      lineHeight: 0.98
    }}>
        <span style={{ display: 'block' }}>
          Sua marca <GoldDot size={12} mx={4} /> presente
        </span>
        <span style={{ display: 'block' }}>na Copa do Mundo FIFA 2026,</span>
        <span style={{ display: 'block', color: 'var(--c-sand)' }}>nos Estados Unidos.</span>
      </h1>

      <p style={{
      marginTop: 32, marginBottom: 40,
      fontSize: 18, color: 'var(--c-sand)',
      maxWidth: 560, lineHeight: 1.6
    }}>Sua marca presente nos Fan Fests e nos jogos do Brasil nos EUA — conteúdo real, gravado em campo, para o seu Instagram.
Porque nada conecta mais com o torcedor brasileiro do que estar na Copa
    </p>
      <p style={{ fontSize: 14, color: 'var(--c-gold)', marginTop: -24, marginBottom: 16, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Estamos lá por você — cobertura presencial na Copa desde $390 USD (≈ R$2.000) · Últimas vagas</p>

      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
        <GoldButton href={WALINK}>Quero saber mais →</GoldButton>
      </div>
      {/* Stats strip */}
      <div style={{
      marginTop: 96,
      display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
      gap: 32,
      paddingTop: 32,
      borderTop: '0.5px solid rgba(232,228,220,0.25)'
    }}>
        {[
      { n: '39', l: 'dias de Fan Fest' },
      { n: '2', l: 'jogos do Brasil nos EUA' },
      { n: '25k', l: 'torcedores por dia' },
      { n: '24h', l: 'entrega de Reels' }].
      map((s, i) =>
      <div key={i}>
            <div className="display" style={{ fontSize: 44, color: 'var(--c-gold)' }}>{s.n}</div>
            <div className="label" style={{ color: 'var(--c-cement)', marginTop: 4 }}>{s.l}</div>
          </div>
      )}
      </div>

      {/* Scroll arrow */}
      <div style={{ position: 'absolute', bottom: -60, left: '50%', transform: 'translateX(-50%)', textAlign: 'center' }}>
        <div className="label" style={{ color: 'var(--c-cement)', marginBottom: 8, opacity: 0.6 }}>scroll</div>
        <div style={{ width: 1, height: 40, background: 'var(--c-gold)', margin: '0 auto', animation: 'pulseDown 2s infinite' }} />
      </div>
    </div>
    <style>{`
      @keyframes pulseDown { 0%,100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(8px); } }
      @media (max-width: 768px) { .hide-mobile { display: none !important; } }
    `}</style>
  </SectionWrap>;


// Logo lockup
const Logo = ({ size = 1, light = false }) =>
<div style={{ display: 'inline-block', lineHeight: 1 }}>
    <div className="display" style={{
    fontSize: 22 * size, letterSpacing: '0.03em',
    display: 'flex', alignItems: 'center', whiteSpace: 'nowrap'
  }}>
      <span style={{ color: 'var(--c-gold)' }}>SUA MARCA</span>
      <GoldDot size={5 * size} mx={6} />
      <span style={{ color: light ? 'var(--c-night)' : 'var(--c-sand)' }}>NA COPA</span>
    </div>
    <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    marginTop: 6, opacity: 0.85,
    justifyContent: 'flex-end'
  }}>
      <span style={{
      fontFamily: 'var(--font-body)', fontWeight: 400,
      fontSize: 10 * size, letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'var(--c-cement)'
    }}>by</span>
      <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/logo%20blanco%20f%20azul.png?alt=media" alt="Top Hospitality" style={{
      height: 11 * size, width: 'auto', display: 'block'
    }} />
    </div>
  </div>;


// ===== 02 PAIN =====
const Pain = () =>
<SectionWrap bg="night" pad="lg" id="pain">
    <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'left' }}>
      <div className="label" style={{ color: 'var(--c-green)', marginBottom: 32 }}>· o que está em jogo</div>
      {[
    'A Copa acontece uma vez a cada quatro anos.',
    'Em junho de 2026, milhões de brasileiros vão consumir conteúdo de futebol o dia inteiro.',
    'As marcas que aparecerem na timeline desses torcedores vão ficar na memória.',
    'As que não aparecerem — simplesmente não existiram.'].
    map((line, i) =>
    <p key={i} style={{
      fontSize: 'clamp(20px, 2.4vw, 26px)',
      lineHeight: 1.45,
      color: 'var(--c-sand)',
      marginBottom: 28,
      textWrap: 'pretty'
    }}>{line}</p>
    )}

      <div style={{ marginTop: 56, paddingTop: 32, borderTop: '0.5px solid var(--c-cement)' }}>
        <p className="display" style={{
        fontSize: 'clamp(40px, 6vw, 68px)',
        color: 'var(--c-gold)',
        margin: 0
      }}>Você vai estar lá?</p>
      </div>
    </div>
  </SectionWrap>;


// ===== 03 PRODUCER =====
const Producer = () =>
<SectionWrap bg="sand" pad="lg" id="producer">
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 6fr)', gap: 64, alignItems: 'start' }} className="grid-2">
      <div>
        <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/fanfest%20phili.jpg?alt=media" loading="lazy" loading="lazy" style={{ width: '100%', aspectRatio: '4/5', borderRadius: 12, objectFit: 'cover', display: 'block' }} />
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/financialfield.jpg?alt=media" style={{ width: '100%', aspectRatio: '1', borderRadius: 8, objectFit: 'cover', display: 'block' }} />
          <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/metlife.png?alt=media" style={{ width: '100%', aspectRatio: '1', borderRadius: 8, objectFit: 'cover', display: 'block' }} />
        </div>
      </div>

      <div style={{ borderLeft: '3px solid var(--c-green)',
      paddingLeft: 32,
      color: 'var(--c-night)'
    }}>
        <div className="label" style={{ color: 'var(--c-green)', marginBottom: 16 }}>· quem produz</div>
        <h2 style={{
        fontFamily: 'var(--font-body)', fontWeight: 500,
        fontSize: 'clamp(28px, 3.6vw, 40px)',
        lineHeight: 1.15,
        margin: '0 0 28px',
        color: 'var(--c-night)',
        letterSpacing: '-0.01em'
      }}>A Revenoise está lá. <span style={{ color: 'var(--c-green)' }}>No lugar. De verdade.</span></h2>

        <p style={{ fontSize: 17, color: 'var(--c-night)', marginBottom: 20, lineHeight: 1.7 }}>A Revenoise opera a partir de Rhode Island, a 2 horas de Nova York e Filadélfia. Nossa equipe estará nas fan zones e arredores dos estádios nos dias em que o Brasil joga, gravando tudo em primeira pessoa.

      </p>
        <p style={{ fontSize: 17, color: 'var(--c-night)', marginBottom: 32, lineHeight: 1.7 }}>
          Não é produção de estúdio. Não é stock photo. <strong style={{ fontWeight: 500, color: 'var(--c-night)' }}>É cobertura real, no lugar, com os torcedores, com a sua marca em destaque.</strong> Com anos de experiência no mercado brasileiro — já trabalhamos com empresas de transporte, turismo e tecnologia no Brasil.
        </p>

        {/* Mini map */}
        <div style={{
        background: 'rgba(11,31,58,0.04)',
        border: '0.5px solid rgba(11,31,58,0.15)',
        borderRadius: 12,
        padding: 24,
        marginBottom: 24
      }}>
          <div className="label" style={{ color: 'var(--c-mute)', marginBottom: 16 }}>RAIO DE OPERAÇÃO</div>
          <RouteMap />
        </div>

        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 14px', background: 'var(--c-night)', color: 'var(--c-gold)', borderRadius: 20 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--c-gold)' }} />
          <span className="label" style={{ color: 'var(--c-gold)' }}>GRAVADO EM PRIMEIRA PESSOA</span>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr !important; } }`}</style>
  </SectionWrap>;


const RouteMap = () => {
  const pts = [
  { name: 'RHODE ISLAND', sub: 'BASE', x: 78 },
  { name: 'PROV/BOSTON', sub: '1h drive', x: 92 },
  { name: 'NEW YORK', sub: '2h · MetLife', x: 50 },
  { name: 'PHILADELPHIA', sub: '3h · Linc.', x: 22 }].
  sort((a, b) => a.x - b.x);
  return (
    <div style={{ position: 'relative', height: 110 }}>
      <div style={{ position: 'absolute', top: 36, left: 8, right: 8, height: 1, background: 'var(--c-mute)', opacity: 0.3 }} />
      {pts.map((p, i) =>
      <div key={i} style={{ position: 'absolute', left: `${p.x}%`, top: 0, transform: 'translateX(-50%)', textAlign: 'center' }}>
          <div style={{
          width: 12, height: 12, borderRadius: '50%',
          background: p.sub === 'BASE' ? 'var(--c-gold)' : 'var(--c-night)',
          border: p.sub === 'BASE' ? '2px solid var(--c-night)' : 'none',
          margin: '30px auto 0'
        }} />
          <div className="label" style={{ color: 'var(--c-night)', fontSize: 9, marginTop: 8, whiteSpace: 'nowrap' }}>{p.name}</div>
          <div style={{ fontSize: 9, color: 'var(--c-mute)', marginTop: 2, whiteSpace: 'nowrap' }}>{p.sub}</div>
        </div>
      )}
    </div>);

};

// ===== 03B PILOT VIDEO =====
const PilotVideo = () =>
<SectionWrap bg="night" pad="lg" id="piloto">
  <div style={{ maxWidth: 600, margin: '0 auto', textAlign: 'center' }}>
    <div className="label" style={{ color: 'var(--c-green)', marginBottom: 16 }}>· veja como é na prática</div>
    <h2 style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 'clamp(24px, 3vw, 36px)', color: 'var(--c-sand)', margin: '0 0 8px' }}>Fan Fests, estádios e muito mais.</h2>
    <p style={{ color: 'var(--c-cement)', fontSize: 16, marginBottom: 32 }}>Estaremos lá por você.</p>
    <div style={{ position: 'relative', width: '100%', maxWidth: 340, margin: '0 auto', borderRadius: 16, overflow: 'hidden', boxShadow: '0 24px 48px rgba(0,0,0,0.5)' }}>
      <iframe
        src="https://www.youtube.com/embed/ax5kG8BiBg0?rel=0"
loading="lazy"
        style={{ width: '100%', aspectRatio: '9/16', border: 'none', display: 'block' }}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </div>
  </div>
</SectionWrap>;

// ===== 04 HOW IT WORKS =====
const HowItWorks = () =>
<SectionWrap bg="night" pad="lg" id="como">
    <SectionHead kicker="· como funciona" title={<>3 passos.<br />Sem complicação.</>} />
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, position: 'relative' }} className="steps-grid">
      {/* connector line */}
      <div style={{ position: 'absolute', top: 28, left: '15%', right: '15%', height: 1, background: 'var(--c-cement)', opacity: 0.3 }} className="hide-mobile" />
      {[
    { n: 1, t: 'Você manda o logo e responde 5 perguntas', d: 'Em menos de 24h você envia o logo e responde um brief simples sobre a marca. A Revenoise cuida do resto — material de ativação, impressões, tudo aqui nos EUA. 100% digital do seu lado.' },
    { n: 2, t: 'A equipe vai ao Fan Fest ou ao jogo', d: 'Produzimos o conteúdo em campo, com torcedores reais, gravando em primeira pessoa. Sua marca integrada de forma natural.' },
    { n: 3, t: 'Você recebe e publica', d: 'Stories ao vivo durante o evento. Reel editado entregue via Google Drive em até 3 dias após o evento, pronto para postar.' }].
    map((s, i) =>
    <div key={i} style={{ position: 'relative', background: 'var(--c-night)', paddingTop: 8 }}>
          <NumberCircle n={s.n} />
          <h3 style={{
        fontFamily: 'var(--font-body)', fontWeight: 500,
        fontSize: 22, lineHeight: 1.25, margin: '24px 0 12px',
        color: 'var(--c-sand)'
      }}>{s.t}</h3>
          <p style={{ color: 'var(--c-cement)', fontSize: 15, lineHeight: 1.7, margin: 0 }}>{s.d}</p>
        </div>
    )}
    </div>
    <div style={{ marginTop: 72, height: 1, background: 'var(--c-gold)', opacity: 0.6 }} />
    <style>{`@media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
  </SectionWrap>;


// ===== 05 DELIVERABLES =====
const Deliverables = () =>
<SectionWrap bg="stadium" pad="lg" id="entregaveis">
    <SectionHead kicker="· o que você recebe" title="É assim que sua marca vai aparecer." />

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="grid-2">
      {/* Stories block */}
      <div>
        <PhoneMock kind="stories" />
      </div>
      <div>
        <Badge color="green" style={{ marginBottom: 16 }}>● ao vivo</Badge>
        <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 28, color: 'var(--c-sand)', margin: '0 0 16px' }}>Stories ao vivo</h3>
        <p style={{ color: 'var(--c-cement)', fontSize: 16, lineHeight: 1.7 }}>
          Publicadas diretamente na sua conta de Instagram durante o evento. Sua marca aparece em tempo real, enquanto o Brasil está em campo.
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', color: 'var(--c-sand)' }}>
          {['Acesso temporário à sua conta', 'Postagem durante a partida', 'Stickers de marca + localização'].map((x, i) =>
        <li key={i} style={{ display: 'flex', gap: 12, marginBottom: 12, fontSize: 15 }}>
              <span style={{ color: 'var(--c-gold)' }}>✓</span>{x}
            </li>
        )}
        </ul>
      </div>
    </div>

    <div style={{ height: 1, background: 'rgba(232,228,220,0.2)', margin: '80px 0' }} />

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="grid-2-rev">
      <div>
        <Badge color="gold" style={{ marginBottom: 16 }}>até 3 dias</Badge>
        <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 28, color: 'var(--c-sand)', margin: '0 0 16px' }}>Reel em POV</h3>
        <p style={{ color: 'var(--c-cement)', fontSize: 16, lineHeight: 1.7 }}>
          Gravado em primeira pessoa, discreta e natural. Torcedores reais interagindo com a sua marca. Entregue via Google Drive em até 3 dias após o evento.
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', color: 'var(--c-sand)' }}>
          {['Edição com cortes rítmicos', 'Vertical 9:16 pronto para Reels', 'Uma rodada de ajustes incluída'].map((x, i) =>
        <li key={i} style={{ display: 'flex', gap: 12, marginBottom: 12, fontSize: 15 }}>
              <span style={{ color: 'var(--c-gold)' }}>✓</span>{x}
            </li>
        )}
        </ul>
      </div>
      <div>
        <PhoneMock kind="reel" />
      </div>
    </div>
    <style>{`
      @media (max-width: 800px) {
        .grid-2, .grid-2-rev { grid-template-columns: 1fr !important; gap: 40px !important; }
        .grid-2-rev > :first-child { order: 2; }
      }
    `}</style>
  </SectionWrap>;


const PhoneMock = ({ kind }) =>
<div style={{
  width: 280, maxWidth: '100%', aspectRatio: '9/19',
  background: 'var(--c-night)', borderRadius: 32,
  border: '8px solid #11293f',
  boxShadow: '0 30px 60px rgba(0,0,0,0.4)',
  margin: '0 auto', padding: 8, position: 'relative', overflow: 'hidden'
}}>
    {/* Notch */}
    <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 90, height: 18, background: '#0a1628', borderRadius: 12, zIndex: 5 }} />
    <div style={{
    width: '100%', height: '100%', borderRadius: 24,
    background: 'linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%), repeating-linear-gradient(135deg, rgba(247,244,238,0.07) 0 2px, transparent 2px 14px), var(--c-stadium)',
    position: 'relative', overflow: 'hidden'
  }}>
      {kind === 'stories' &&
    <>
          {/* Story progress */}
          <div style={{ position: 'absolute', top: 36, left: 12, right: 12, display: 'flex', gap: 4 }}>
            {[1, 2, 3].map((i) =>
        <div key={i} style={{ flex: 1, height: 2, background: 'rgba(255,255,255,0.4)' }}>
                {i === 1 && <div style={{ width: '70%', height: '100%', background: '#fff' }} />}
              </div>
        )}
          </div>
          {/* Avatar */}
          <div style={{ position: 'absolute', top: 50, left: 12, display: 'flex', alignItems: 'center', gap: 8, color: '#fff', fontSize: 11 }}>
            <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--c-gold)' }} />
            <span style={{ fontWeight: 500 }}>sua_marca</span>
            <span style={{ opacity: 0.6, fontSize: 10 }}>· ao vivo</span>
          </div>
          <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/story.png?alt=media" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 24, zIndex: 0 }} />
          {/* Sticker */}
          <div style={{ position: 'absolute', bottom: 80, left: '50%', transform: 'translateX(-50%) rotate(-4deg)', background: 'var(--c-gold)', color: 'var(--c-night)', padding: '6px 12px', borderRadius: 4, fontWeight: 500, fontSize: 11, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
            Brasil · MetLife
          </div>
        </>}
      {kind === 'reel' &&
    <>
          <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/reel.png?alt=media" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'inherit', opacity: 0.7 }} />
          {/* Top */}
          <div style={{ position: 'absolute', top: 36, left: 12, right: 12, display: 'flex', justifyContent: 'space-between', color: '#fff', fontSize: 12 }}>
            <span style={{ fontWeight: 500 }}>Reels</span>
            <span style={{ fontSize: 14 }}>⊙</span>
          </div>
          {/* Play */}
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 60, height: 60, borderRadius: '50%', background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 0, height: 0, borderTop: '12px solid transparent', borderBottom: '12px solid transparent', borderLeft: '20px solid #fff', marginLeft: 4 }} />
          </div>
          {/* Bottom info */}
          <div style={{ position: 'absolute', bottom: 16, left: 12, right: 50, color: '#fff' }}>
            <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 4 }}>@sua_marca</div>
            <div style={{ fontSize: 11, opacity: 0.85 }}>POV: Brasil joga em NY 🇧🇷</div>
            <div style={{ fontSize: 10, opacity: 0.6, marginTop: 6 }}>♪ original audio · fanzone</div>
          </div>
          {/* Right rail */}
          <div style={{ position: 'absolute', bottom: 60, right: 8, display: 'flex', flexDirection: 'column', gap: 14, color: '#fff', fontSize: 11, alignItems: 'center' }}>
            <div>♡ 12k</div>
            <div>💬 248</div>
            <div>↗ 1.2k</div>
          </div>
        </>
    }
    </div>
  </div>;


// ===== 06 FAN FESTS =====
const FanFests = () => {
  const cities = [
  { city: 'Nova York', venue: 'Fan Zone Queens · Rockefeller Center', desc: 'Maior comunidade brasileira do Nordeste americano. Nos dias de jogo, torcedores tomam Manhattan com bandeiras e camisetas da Seleção. A Revenoise estará lá nos dias do Brasil.' },
  { city: 'Filadélfia', venue: 'Lemon Hill · East Fairmount Park', desc: 'O maior Fan Fest do torneio — aberto durante todo o período da Copa, com até 25.000 pessoas por dia. Concentra uma das maiores torcidas brasileiras do evento.', highlight: true },
  { city: 'Providence / Boston', venue: 'City Hall Plaza · Providence · Boston', desc: 'Maior concentração de brasileiros per capita dos EUA — mais de 100.000 na região metropolitana. Programação especial nos dias de jogo, muita energia verde e amarela.' }];

  const benefits = [
  'Sua marca aparece onde os brasileiros nos EUA estão concentrados',
  'Fan Fests são abertos e gratuitos — ambiente festivo e receptivo',
  'O torcedor brasileiro nos EUA é influenciador natural — família e amigos no Brasil acompanham',
  'Conteúdo nesse ambiente tem contexto emocional alto — gera identificação imediata',
  'Não é necessário acesso ao estádio — o Fan Fest concentra a mesma energia'];

  return (
    <SectionWrap bg="sand" pad="lg" id="fanfests">
      <SectionHead
        kicker="· os fan fests"
        title={<>Onde os torcedores brasileiros<br />se encontram nos EUA.</>}
        dark={false}
        kickerColor="var(--c-green)" />
      
      <p style={{ color: 'var(--c-mute)', fontSize: 17, marginTop: -16, marginBottom: 56, maxWidth: 760 }}>
        Durante toda a Copa, a FIFA instala Fan Fests oficiais nas cidades sede — espaços gratuitos com telões, música, food trucks e ativações. São o ponto de encontro da torcida brasileira nos EUA.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="fanfest-grid">
        {cities.map((c, i) =>
        <div key={i} style={{
          background: c.highlight ? 'var(--c-night)' : '#fff',
          color: c.highlight ? 'var(--c-sand)' : 'var(--c-night)',
          border: c.highlight ? '2px solid var(--c-gold)' : '0.5px solid rgba(11,31,58,0.15)',
          borderRadius: 12, padding: 28,
          position: 'relative'
        }}>
            {c.highlight && <div style={{ position: 'absolute', top: -12, left: 20 }}><Badge color="gold">Maior Fan Fest</Badge></div>}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
              <span style={{ color: 'var(--c-green)', fontSize: 18 }}>📍</span>
              <span className="display" style={{ fontSize: 24, color: c.highlight ? 'var(--c-gold)' : 'var(--c-night)' }}>{c.city}</span>
            </div>
            <div className="label" style={{ color: c.highlight ? 'var(--c-cement)' : 'var(--c-mute)', marginBottom: 16, opacity: 0.85 }}>{c.venue}</div>
            <p style={{ fontSize: 14, lineHeight: 1.65, margin: 0, color: c.highlight ? 'var(--c-cement)' : 'var(--c-mute)' }}>{c.desc}</p>
          </div>
        )}
      </div>

      <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--c-gold)' }}>
        <div className="label" style={{ color: 'var(--c-green)', marginBottom: 24 }}>· por que isso importa para sua marca</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 32px' }} className="benefits-grid">
          {benefits.map((b, i) =>
          <li key={i} style={{ display: 'flex', gap: 12, fontSize: 15, color: 'var(--c-night)', lineHeight: 1.6 }}>
              <span style={{ color: 'var(--c-gold)', flexShrink: 0 }}>✓</span>
              <span>{b}</span>
            </li>
          )}
        </ul>
      </div>
      <style>{`@media (max-width: 800px) { .fanfest-grid { grid-template-columns: 1fr !important; } .benefits-grid { grid-template-columns: 1fr !important; } }`}</style>
    </SectionWrap>);

};

// ===== 07 DATES =====
const Dates = () =>
<SectionWrap bg="night" pad="lg" id="datas">
    <div style={{ display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap', marginBottom: 16 }}>
      <img src="assets/fifa-2026.png" alt="FIFA World Cup 2026"
    style={{ width: 88, height: 'auto', filter: 'drop-shadow(0 4px 16px rgba(0,0,0,0.4))' }} />
      <div style={{ flex: '1 1 400px' }}>
        <SectionHead
        kicker="· os jogos do brasil"
        title="O Brasil joga. A Revenoise está lá." />
      </div>
    </div>
  
    <p style={{ color: 'var(--c-cement)', fontSize: 17, marginTop: -16, marginBottom: 56 }}>
      Datas confirmadas dos jogos do Brasil na nossa região.
    </p>

    {/* Timeline */}
    <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="grid-2">
      {[
    { date: '13 JUN', label: 'Brasil vs Marrocos', venue: 'MetLife Stadium', city: 'Nova York · NJ' },
    { date: '19 JUN', label: 'Brasil vs Haiti', venue: 'Lincoln Financial Field', city: 'Filadélfia · PA' }].
    map((d, i) =>
    <div key={i} style={{
      background: 'var(--c-stadium)',
      border: '0.5px solid rgba(232,228,220,0.2)',
      borderRadius: 12,
      padding: 32,
      color: 'var(--c-sand)',
      position: 'relative'
    }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <FlagBR size={18} />
              <span className="label" style={{ color: 'var(--c-green)' }}>jogo {i + 1}</span>
            </div>
            <div style={{ width: 12, height: 12, borderRadius: '50%', background: 'var(--c-gold)' }} />
          </div>

          <div className="display" style={{ fontSize: 64, color: 'var(--c-gold)', lineHeight: 1, marginBottom: 8 }}>{d.date}</div>
          <div style={{ fontSize: 12, color: 'var(--c-cement)', marginBottom: 24, letterSpacing: '0.06em', textTransform: 'uppercase' }}>2026</div>

          <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 22, margin: '0 0 8px', color: 'var(--c-sand)' }}>{d.label}</h3>
          <div style={{ color: 'var(--c-cement)', fontSize: 15 }}>{d.venue}</div>
          <div style={{ color: 'var(--c-cement)', fontSize: 15 }}>{d.city}</div>
        </div>
    )}
    </div>

    <p style={{ color: 'var(--c-cement)', fontSize: 14, marginTop: 32, lineHeight: 1.7, maxWidth: 760, opacity: 0.85 }}>
      Além dos jogos, a Revenoise cobre <strong style={{ color: 'var(--c-gold)', fontWeight: 500 }}>3 dias de Fan Fest</strong> distribuídos ao longo do torneio — para que sua marca tenha presença antes, durante e depois dos jogos do Brasil.
    </p>
  </SectionWrap>;


// ===== 06B SOCIAL PROOF =====
const SocialProof = () =>
<SectionWrap bg="stadium" pad="md">
  <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
    <div className="label" style={{ color: 'var(--c-green)', marginBottom: 32 }}>· números que falam por si</div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 32 }}>
      {[
        { n: '5.2B', l: 'pessoas assistiram à Copa 2022', sub: 'o evento mais visto da história' },
        { n: '87%', l: 'dos brasileiros assistem à Copa', sub: 'o maior evento de mídia do ano' },
        { n: '74%', l: 'do conteúdo viral', sub: 'produzido fora dos estádios' },
        { n: '3×', l: 'mais engajamento', sub: 'com conteúdo em tempo real' },
      ].map((s, i) =>
        <div key={i} style={{ padding: '24px 16px', borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '0.5px solid rgba(232,228,220,0.1)' }}>
          <div className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', color: 'var(--c-gold)', lineHeight: 1 }}>{s.n}</div>
          <div style={{ fontSize: 14, color: 'var(--c-sand)', marginTop: 8, fontWeight: 500 }}>{s.l}</div>
          <div style={{ fontSize: 12, color: 'var(--c-cement)', marginTop: 4 }}>{s.sub}</div>
        </div>
      )}
    </div>
  </div>
</SectionWrap>;

// ===== 07 PACKAGES =====
const Packages = () =>
<SectionWrap bg="night" pad="lg" id="pacotes">
    <SectionHead kicker="· os pacotes" title="Escolha seu pacote." />

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.05fr', gap: 24, alignItems: 'stretch' }} className="grid-2">
      <PackageCard
      name="Bandeira"
      sublabel="Fan Fest"
      items={[
      '3 dias de cobertura no Fan Fest',
      '15 Stories ao vivo (5 por dia)',
      '3 Reels em POV (1 por dia)']
      }
      price="$199" originalPrice="$690" />

      <PackageCard
      name="Torcida 🔴 Esgotado"
      sublabel="Fan Fest + Jogos do Brasil"
      items={[
      '3 dias de Fan Fest',
      '2 dias de jogo: NY (13 jun) + Philly (19 jun)',
      '25 Stories ao vivo (5 por dia)',
      '5 Reels em POV (1 por dia)']
      }
      price="$590" originalPrice="$990" />

      <PackageCard
      name="Campeão 🔴 Esgotado"
      sublabel="Fan Fest + Jogos do Brasil + Fase Final"
      items={[
      '3 dias de Fan Fest',
      '2 dias de jogo: NY (13 jun) + Philly (19 jun)',
      '3 jogos de fase final (Boston, NY ou Philly)',
      '40 Stories ao vivo (5 por dia)',
      '8 Reels em POV (1 por dia)']
      }
      price="$990" originalPrice="$1.650"
      highlight />
    
    </div>

    <div style={{ marginTop: 40, textAlign: 'center' }}>
      <a href={WALINK} style={{ color: 'var(--c-green)', borderBottom: '1px solid var(--c-green)', paddingBottom: 4, fontSize: 15 }}>
        Não tem certeza qual escolher? Fale com a Revenoise e a gente te ajuda a decidir →
        <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--c-cement)', marginTop: 16, opacity: 0.8 }}>Custa menos do que 3 dias de anúncio no Meta · Presença na Copa é para sempre</p>
        <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--c-cement)', marginTop: 16, opacity: 0.8 }}>Sem contrato longo · Cancele antes do pagamento · Respondemos em 2h</p>
      </a>
    </div>
  </SectionWrap>;


const PackageCard = ({ name, sublabel, items, price, originalPrice, highlight }) =>
<div style={{
  background: 'var(--c-stadium)',
  border: highlight ? '2px solid var(--c-gold)' : '0.5px solid var(--c-cement)',
  borderRadius: 12,
  padding: highlight ? 36 : 32,
  position: 'relative',
  boxShadow: highlight ? '0 20px 60px rgba(245,197,24,0.08)' : 'none'
}}>
    {highlight &&
  <div style={{ position: 'absolute', top: -14, left: 24 }}>
        <Badge color="gold">Mais completo</Badge>
      </div>
  }
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
      <h3 style={{
      fontFamily: 'var(--font-body)', fontWeight: 500,
      fontSize: 26,
      color: highlight ? 'var(--c-gold)' : 'var(--c-sand)',
      margin: 0
    }}>{name}</h3>
    </div>
    <div className="label" style={{ color: 'var(--c-green)', marginBottom: 24 }}>{sublabel}</div>

    <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', color: 'var(--c-sand)' }}>
      {items.map((it, i) =>
    <li key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', fontSize: 15, borderBottom: i < items.length - 1 ? '0.5px solid rgba(232,228,220,0.12)' : 'none' }}>
          <span style={{ color: 'var(--c-gold)', flexShrink: 0 }}>✓</span>
          <span>{it}</span>
        </li>
    )}
    </ul>

    <div style={{ marginBottom: 24 }}>
      {originalPrice && <span style={{ fontSize: 15, color: 'var(--c-cement)', textDecoration: 'line-through', display: 'block', marginBottom: 4 }}>{originalPrice} USD</span>}
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="display" style={{ fontSize: 52, color: 'var(--c-gold)', lineHeight: 1 }}>{price}</span>
        <span className="label" style={{ color: 'var(--c-cement)', fontSize: 13 }}>USD</span>
      </div>
      <div style={{ fontSize: 13, color: 'var(--c-cement)', marginTop: 6, opacity: 0.8 }}>{price.includes('199') ? '≈ R$1.000' : price.includes('390') ? '≈ R$2.000' : price.includes('590') ? '≈ R$3.000' : '≈ R$5.000'}</div>
    </div>

    <GoldButton href={WALINK} variant={highlight ? 'solid' : 'ghost'} style={{ width: '100%', justifyContent: 'center' }}>
      Quero o {name} →
    </GoldButton>
  </div>;


// ===== 08 FAQ =====
const FAQ = () => {
  const items = [
  { q: 'Que tipo de conteúdo a Revenoise produz?', a: 'Stories ao vivo publicadas na sua conta durante o evento, e Reels gravados em POV com estilo em primeira pessoa que mostra a experiência do Fan Fest de dentro. O conteúdo inclui interações reais com torcedores brasileiros que seguram, mencionam ou reagem à sua marca de forma orgânica. Nada encenado.' },
  { q: 'Como a Revenoise usa minha marca sem me conhecer?', a: 'Você manda o logo em alta resolução e um brief simples — cores, tom, o que evitar. A Revenoise cuida da impressão do material de ativação (camisetas, bandeiras, adesivos) aqui nos EUA. Sem envio internacional, sem burocracia alfandegária.' },
  { q: 'Preciso dar acesso ao meu Instagram?', a: 'Só para as Stories, por algumas horas no dia do evento. Para o Reel, você recebe o arquivo pronto e publica quando quiser na sua conta.' },
  { q: 'Quando recebo o conteúdo?', a: 'As Stories são publicadas ao vivo durante o evento. O Reel editado é entregue via Google Drive em até 3 dias após o evento.' },
  { q: 'Como funciona o pagamento?', a: '50% na confirmação para reservar as datas. O restante após a entrega do primeiro dia de conteúdo. Aceitamos transferência internacional, PayPal ou Wise.' },
  { q: 'Vale a pena investir nisso?', a: 'A Copa acontece uma vez a cada quatro anos. Uma marca que aparecer na timeline de milhões de brasileiros durante o torneio vai gerar recall por anos. O pacote Torcida custa menos do que um final de semana de tráfego pago no Meta — e o conteúdo fica para sempre no seu perfil.' },
  { q: 'Posso enviar produtos para distribuir nos eventos?', a: 'Sim — se quiser enviar brindes (camisetas, bonés, bandeiras do Brasil personalizadas), basta mandar para o nosso endereço nos EUA ou comprar em lojas americanas online e enviar direto. A equipe distribui durante as interações com os torcedores, aumentando o engajamento com a sua marca.' }];

  return (
    <SectionWrap bg="sand" pad="lg" id="faq">
      <SectionHead kicker="· perguntas frequentes" title="Seis dúvidas, seis respostas." dark={false} kickerColor="var(--c-green)" />
      <div style={{ maxWidth: 880 }}>
        {items.map((it, i) =>
        <div key={i} style={{ padding: '28px 0', borderBottom: '0.5px solid var(--c-cement)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 20, alignItems: 'start' }}>
              <div className="display" style={{ fontSize: 22, color: 'var(--c-gold)' }}>0{i + 1}</div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 18, color: 'var(--c-night)', margin: '0 0 8px', lineHeight: 1.4 }}>
                  {it.q}
                </h3>
                <p style={{ color: 'var(--c-mute)', fontSize: 15, lineHeight: 1.7, margin: 0 }}>{it.a}</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </SectionWrap>);

};

// ===== 09 SCARCITY + COUNTDOWN =====
const Countdown = () => {
  const target = new Date('2026-06-13T15:00:00-04:00').getTime();
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor(diff % 86400000 / 3600000);
  const mins = Math.floor(diff % 3600000 / 60000);
  const secs = Math.floor(diff % 60000 / 1000);
  const cell = (n, label) =>
  <div style={{ textAlign: 'center', flex: 1, minWidth: 0 }}>
      <div className="display" style={{ fontSize: 'clamp(48px, 8vw, 80px)', color: 'var(--c-gold)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
        {String(n).padStart(2, '0')}
      </div>
      <div className="label" style={{ color: 'var(--c-cement)', marginTop: 8 }}>{label}</div>
    </div>;

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, padding: '32px 0', borderTop: '0.5px solid rgba(232,228,220,0.2)', borderBottom: '0.5px solid rgba(232,228,220,0.2)' }}>
      {cell(days, 'dias')}
      <div className="display" style={{ fontSize: 'clamp(40px, 7vw, 64px)', color: 'var(--c-gold)', alignSelf: 'flex-start', opacity: 0.4 }}>:</div>
      {cell(hours, 'horas')}
      <div className="display" style={{ fontSize: 'clamp(40px, 7vw, 64px)', color: 'var(--c-gold)', alignSelf: 'flex-start', opacity: 0.4 }}>:</div>
      {cell(mins, 'min')}
      <div className="display" style={{ fontSize: 'clamp(40px, 7vw, 64px)', color: 'var(--c-gold)', alignSelf: 'flex-start', opacity: 0.4 }}>:</div>
      {cell(secs, 'seg')}
    </div>);

};

const Scarcity = () =>
<SectionWrap bg="night" pad="lg" id="urgencia" style={{
  backgroundImage: 'radial-gradient(ellipse at top, rgba(127,29,29,0.25), transparent 60%)',
  borderTop: '0.5px solid rgba(127,29,29,0.4)',
  borderBottom: '0.5px solid rgba(127,29,29,0.4)'
}}>
    <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
      <Badge color="outline" style={{ marginBottom: 24, borderColor: 'rgba(127,29,29,0.6)', color: '#fca5a5' }}>
        ⏳ janela limitada
      </Badge>

      <h2 className="display" style={{
      fontSize: 'clamp(40px, 5.5vw, 64px)',
      color: 'var(--c-sand)',
      margin: '0 0 24px',
      lineHeight: 1.0
    }}>
        As vagas são limitadas.<br />
        <span style={{ color: 'var(--c-gold)' }}>O torneio não espera.</span>
      </h2>

      <p style={{ color: 'var(--c-cement)', fontSize: 17, lineHeight: 1.7, marginBottom: 12 }}>
        Os dias de jogo do Brasil nos EUA são apenas 2. A agenda da Revenoise é limitada — apenas 3 marcas por dia de cobertura. Quando esgota, esgota.
      </p>
      <p style={{ color: 'var(--c-cement)', fontSize: 17, lineHeight: 1.7, marginBottom: 48 }}>
        Após o início do torneio, não haverá como contratar para os primeiros jogos.
      </p>

      <div className="label" style={{ color: 'var(--c-cement)', marginBottom: 16 }}>até o primeiro jogo do Brasil · 13 jun 2026</div>
      <Countdown />

      <div style={{ marginTop: 48 }}>
        <GoldButton href={WALINK} icon={<WhatsAppIcon size={18} color="#0B1F3A" />}>
          Reservar minha vaga →
        </GoldButton>
      </div>
    </div>
  </SectionWrap>;


// ===== 10 FINAL CTA =====
const FinalCTA = () =>
<SectionWrap bg="night" pad="lg" id="contato">
    <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
      <img src="assets/fifa-2026.png" alt="FIFA World Cup 2026"
    style={{ width: 96, height: 'auto', margin: '0 auto 32px', display: 'block', filter: 'drop-shadow(0 8px 24px rgba(0,0,0,0.4))' }} />
      <Logo size={1.4} />

      <h2 className="display" style={{
      fontSize: 'clamp(44px, 6vw, 72px)',
      color: 'var(--c-sand)',
      margin: '56px 0 32px',
      lineHeight: 1.0
    }}>
        Pronto para colocar<br />sua marca <span style={{ color: 'var(--c-gold)' }}>na Copa?</span>
      </h2>

      <GoldButton href={WALINK} variant="whatsapp"
    icon={<WhatsAppIcon size={20} color="#fff" />}
    style={{ minWidth: 240, height: 56, justifyContent: 'center', fontSize: 17 }}>
        Receber proposta no WhatsApp →
      </GoldButton>

      <p style={{ color: 'var(--c-cement)', fontSize: 13, marginTop: 20, opacity: 0.8 }}>
        {`A Copa começa em ${Math.max(0, Math.ceil((new Date('2026-06-11') - new Date()) / 86400000))} dias. Respondemos em menos de 2 horas. Sem compromisso.`}
      </p>

      <div style={{ marginTop: 96, paddingTop: 32, borderTop: '0.5px solid rgba(232,228,220,0.15)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }} className="footer">
        <div className="label" style={{ color: 'var(--c-cement)', opacity: 0.7, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span>by</span>
          <img src="https://firebasestorage.googleapis.com/v0/b/sua-marca-na-copa.firebasestorage.app/o/logo%20blanco%20f%20azul.png?alt=media" alt="Top Hospitality" style={{ height: 12, width: 'auto' }} />
          <span style={{ opacity: 0.6 }}>· tophospitality.org</span>
        </div>
        <div className="label" style={{ color: 'var(--c-cement)', opacity: 0.7 }}>FIFA World Cup 2026 · v1.0</div>
      </div>
    </div>
  </SectionWrap>;


// ===== STICKY CTA =====
const StickyCTA = () => {
  const [show, setShow] = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 0);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href={WALINK} style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 9000,
      background: 'var(--c-gold)', color: 'var(--c-night)',
      borderRadius: 999,
      padding: '14px 22px',
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15,
      boxShadow: '0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,197,24,0.4)',
      transform: show ? 'translateY(0)' : 'translateY(120px)',
      opacity: show ? 1 : 0,
      transition: 'all .35s cubic-bezier(.2,.8,.2,1)',
      pointerEvents: show ? 'auto' : 'none'
    }}>
      <WhatsAppIcon size={20} color="#0B1F3A" />
      <span className="hide-mobile">Receber proposta →</span>
    </a>);

};

Object.assign(window, { Hero, Pain, Producer, PilotVideo, HowItWorks, Deliverables, FanFests, Dates, Packages, FAQ, Scarcity, FinalCTA, StickyCTA, Logo });