/**
 * Sections — homepage mid/long-form sections.
 *
 * Contains (in order):
 *   - How it works (3-step summary)
 *   - Playlist pitching vs Meta Ads (comparison, visually prominent)
 *   - Markets + CPC
 *   - Testimonials marquee
 *   - FAQ
 *   - Footer
 *
 * Results/Services long-form live on their own pages.
 */

const FAQS = [
  { q: 'How does Meta Ads help the Spotify algorithm?', a: 'When real listeners discover your track through a targeted Meta ad and actually stream it — saves, replays, full listens — that reads to Spotify as authentic engagement. Those signals are what feeds Discover Weekly, Release Radar, and Radio.' },
  { q: 'Are these real streams from real people?', a: 'Yes. Every listener comes from a Meta ad targeted to real music fans in premium markets. No bots, no click farms, no stream exchanges — just ads, seen by people who choose to click through to your track.' },
  { q: 'Which countries do you target?', a: 'By default: USA, Canada, UK, Australia, New Zealand, Ireland, Germany. These markets combine strong royalty rates with heavy algorithmic signal weight. VIP campaigns can add Mexico, South Africa, LATAM and more.' },
  { q: 'How fast do I see results?', a: 'Most artists notice stream movement within 5–7 days of launch. Algorithmic pickups — Discover Weekly, Radio — tend to land 2–4 weeks after a successful campaign. We don\'t promise exact timelines; the algorithm moves on its own clock.' },
  { q: 'Do you guarantee streams or playlist adds?', a: 'No. What we guarantee is a professionally managed Meta Ads campaign with real spend behind it. Algorithmic outcomes depend on Spotify — we optimize everything that\'s in our control.' },
  { q: 'What do you need from me to start?', a: 'Your Spotify link (single, album, or artist profile) and a start date. That\'s it. We handle the visual, the targeting, the launch, and the daily optimization.' },
];

function FaqItem({ faq }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 0', background: 'transparent', border: 'none', cursor: 'pointer',
        textAlign: 'left', gap: '20px',
      }}>
        <span style={{ color: '#F5F2FF', fontSize: 'clamp(14px,1.8vw,17px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.3 }}>{faq.q}</span>
        <div style={{
          width: '28px', height: '28px', borderRadius: '50%', flexShrink: 0,
          background: open ? 'rgba(94,43,255,0.15)' : 'rgba(255,255,255,0.04)',
          border: `1px solid ${open ? 'rgba(94,43,255,0.3)' : 'rgba(255,255,255,0.07)'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 250ms',
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 350ms cubic-bezier(0.16,1,0.3,1)' }}>
            <path d="M2 4l4 4 4-4" stroke={open ? '#C94CFF' : '#7C7C90'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </button>
      <div style={{ overflow: 'hidden', maxHeight: open ? '280px' : '0', transition: 'max-height 400ms cubic-bezier(0.16,1,0.3,1)' }}>
        <p style={{ color: '#A1A1B3', fontSize: '15px', lineHeight: 1.75, letterSpacing: '-0.01em', margin: '0 0 24px', paddingRight: '40px' }}>{faq.a}</p>
      </div>
    </div>
  );
}

const MARKETS = [
  { country: 'United States',  code: 'USA', metric: '$0.07 avg CPC', top: true  },
  { country: 'Canada',          code: 'CAN', metric: '$0.09 avg CPC', top: false },
  { country: 'United Kingdom',  code: 'UK',  metric: '$0.09 avg CPC', top: false },
  { country: 'Australia',       code: 'AUS', metric: '$0.09 avg CPC', top: false },
  { country: 'New Zealand',     code: 'NZ',  metric: '$0.08 avg CPC', top: false },
  { country: 'Ireland',         code: 'IRL', metric: '$0.05 avg CPC', top: false },
  { country: 'Germany',         code: 'DEU', metric: '$0.07 avg CPC', top: false },
];

/**
 * ComparisonSection — more visually noticeable comparison between
 * playlist pitching and Meta Ads. Uses side-by-side cards where the
 * Meta Ads side has prominent purple accent + elevation.
 */
function ComparisonSection({ mobile }) {
  const playlistPoints = [
    'Months of waiting, no guarantee',
    'All about who you know',
    'Zero control over timing or targeting',
    'One placement — nothing compounds',
    'No data. No learnings.',
  ];
  const metaPoints = [
    'Live inside 48 hours',
    'Precise interest + lookalike targeting',
    'Full control over budget and markets',
    'Listener behaviour compounds for weeks',
    'Measurable data at every step',
  ];

  return (
    <section style={{
      padding: mobile ? '96px 20px' : '160px 48px',
      position: 'relative',
      borderTop: '1px solid rgba(255,255,255,0.04)',
      borderBottom: '1px solid rgba(255,255,255,0.04)',
      background: 'radial-gradient(ellipse 70% 70% at 50% 50%, rgba(28,16,40,0.55) 0%, #050508 70%)',
      overflow: 'hidden',
    }}>
      {/* Big ambient glow behind */}
      <div style={{
        position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)',
        width: '900px', height: '600px', maxWidth: '120vw',
        pointerEvents: 'none', opacity: 0.6,
        background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,76,255,0.12) 0%, transparent 70%)',
        filter: 'blur(20px)',
      }} />

      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative' }}>
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: mobile ? '56px' : '80px' }}>
            <div style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: '20px', fontFamily: "'JetBrains Mono', monospace" }}>
              The difference
            </div>
            <h2 style={{
              fontSize: mobile ? 'clamp(34px,8.5vw,48px)' : 'clamp(44px,5vw,68px)',
              fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.04,
              color: '#F5F2FF', margin: '0 0 28px', textWrap: 'balance',
            }}>
              Stop chasing playlists.<br/>
              <span style={{
                background: 'linear-gradient(135deg, #8B5CFF 0%, #C94CFF 55%, #E7C8FF 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
                whiteSpace: 'nowrap',
              }}>Start feeding the algorithm.</span>
            </h2>
            <p style={{ color: '#A1A1B3', fontSize: mobile ? '15px' : '17px', letterSpacing: '-0.01em', maxWidth: '560px', margin: '0 auto', lineHeight: 1.55 }}>
              Two paths. One asks for permission — the other buys attention at scale.
            </p>
          </div>
        </FadeIn>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr auto 1fr',
          alignItems: 'stretch',
          gap: mobile ? '20px' : '0',
        }}>
          {/* Playlist pitching — dim, subdued */}
          <FadeIn direction="left">
            <div style={{
              background: 'rgba(11,11,18,0.5)',
              border: '1px solid rgba(255,255,255,0.04)',
              borderRadius: '24px',
              padding: mobile ? '28px' : '44px',
              height: '100%',
              filter: 'grayscale(0.5)',
              opacity: 0.82,
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: '8px',
                background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)',
                padding: '6px 12px', borderRadius: '100px',
                color: '#7C7C90', fontSize: '10px', fontWeight: 600,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                fontFamily: "'JetBrains Mono', monospace",
                marginBottom: '20px',
              }}>
                Old way
              </div>
              <h3 style={{ fontSize: mobile ? '22px' : '28px', fontWeight: 800, color: '#A1A1B3', letterSpacing: '-0.03em', margin: '0 0 8px', lineHeight: 1.1 }}>
                Playlist pitching
              </h3>
              <p style={{ color: '#52525B', fontSize: '13px', letterSpacing: '-0.01em', margin: '0 0 28px' }}>
                Cold emails. Gatekeepers. Waiting.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '14px' }}>
                {playlistPoints.map(p => (
                  <li key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: '2px' }}>
                      <circle cx="8" cy="8" r="7.5" stroke="rgba(124,124,144,0.3)"/>
                      <path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="#7C7C90" strokeWidth="1.3" strokeLinecap="round"/>
                    </svg>
                    <span style={{ color: '#7C7C90', fontSize: '14px', lineHeight: 1.55, letterSpacing: '-0.01em' }}>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
          </FadeIn>

          {/* VS divider */}
          {!mobile && (
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              justifyContent: 'center', padding: '0 24px', position: 'relative',
            }}>
              <div style={{
                width: '1px', flex: 1,
                background: 'linear-gradient(to bottom, transparent, rgba(201,76,255,0.35), transparent)',
              }} />
              <div style={{
                width: '56px', height: '56px', borderRadius: '50%',
                background: 'linear-gradient(135deg, #5E2BFF, #C94CFF)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '16px 0',
                color: '#F5F2FF', fontSize: '13px', fontWeight: 800,
                letterSpacing: '0.1em',
                boxShadow: '0 0 40px rgba(201,76,255,0.3)',
                fontFamily: "'JetBrains Mono', monospace",
              }}>VS</div>
              <div style={{
                width: '1px', flex: 1,
                background: 'linear-gradient(to bottom, transparent, rgba(201,76,255,0.35), transparent)',
              }} />
            </div>
          )}

          {/* Meta Ads — bright, featured */}
          <FadeIn direction="right" delay={mobile ? 0 : 120}>
            <div style={{
              background: 'linear-gradient(180deg, rgba(46,24,70,0.9) 0%, #0B0B12 100%)',
              border: '1px solid rgba(201,76,255,0.3)',
              borderRadius: '24px',
              padding: mobile ? '28px' : '44px',
              height: '100%',
              position: 'relative',
              boxShadow: '0 0 0 1px rgba(201,76,255,0.1), 0 32px 80px rgba(94,43,255,0.18), 0 0 80px rgba(201,76,255,0.08)',
              transform: mobile ? 'none' : 'translateY(-8px)',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: '15%', right: '15%', height: '1px',
                background: 'linear-gradient(90deg, transparent, rgba(201,76,255,0.7), transparent)',
              }} />

              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: '8px',
                background: 'rgba(201,76,255,0.15)', border: '1px solid rgba(201,76,255,0.3)',
                padding: '6px 12px', borderRadius: '100px',
                color: '#C94CFF', fontSize: '10px', fontWeight: 700,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                fontFamily: "'JetBrains Mono', monospace",
                marginBottom: '20px',
              }}>
                <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#C94CFF', boxShadow: '0 0 8px #C94CFF' }} />
                How we work
              </div>
              <h3 style={{
                fontSize: mobile ? '22px' : '28px', fontWeight: 800,
                letterSpacing: '-0.03em', margin: '0 0 8px', lineHeight: 1.1,
                background: 'linear-gradient(135deg, #F5F2FF 0%, #E7C8FF 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
              }}>
                Meta Ads → Spotify
              </h3>
              <p style={{ color: '#A1A1B3', fontSize: '13px', letterSpacing: '-0.01em', margin: '0 0 28px' }}>
                Real budget. Real listeners. Real signal.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '14px' }}>
                {metaPoints.map(p => (
                  <li key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0, marginTop: '1px' }}>
                      <circle cx="9" cy="9" r="9" fill="rgba(201,76,255,0.15)"/>
                      <path d="M5.5 9l2.5 2.5 5-5.5" stroke="#C94CFF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span style={{ color: '#E7C8FF', fontSize: '14px', lineHeight: 1.55, letterSpacing: '-0.01em', fontWeight: 500 }}>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const w = useWindowWidth();
  const mobile = w < 768;
  const sectionPad = mobile ? '80px 20px' : '140px 48px';

  return (
    <section id="how-it-works" style={{ padding: sectionPad, maxWidth: '1200px', margin: '0 auto' }}>
      <FadeIn>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20, marginBottom: mobile ? 40 : 56 }}>
          <div>
            <div style={{ color: '#7C7C90', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 16, fontFamily: "'JetBrains Mono', monospace" }}>
              How it works
            </div>
            <h2 style={{
              fontSize: mobile ? 'clamp(30px,8.5vw,42px)' : 'clamp(40px,5vw,64px)',
              fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.05,
              color: '#F5F2FF', margin: 0, maxWidth: 640, textWrap: 'balance',
            }}>
              From link to algorithm,<br/>in four moves.
            </h2>
          </div>
        </div>
      </FadeIn>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(4, 1fr)', gap: mobile ? 14 : 18 }}>
        {[
          { n: '01', title: 'Send us your Spotify link', body: 'Track, album, or artist profile. No brief, no form.',
            icon: (
              <div style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(11,11,18,0.7)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:10, padding:'10px 12px', fontFamily:"'JetBrains Mono', monospace", fontSize:11 }}>
                <div style={{ width:22, height:22, borderRadius:5, background:'#1DB954', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M12 7.2c-2.4-1.4-6.3-1.6-8.6-0.9M11 9.4c-2-1.2-5.1-1.5-7.5-0.8M10.2 11.5c-1.6-1-4.1-1.2-6.2-0.7" stroke="white" strokeWidth="1.2" strokeLinecap="round"/><circle cx="8" cy="8" r="7" stroke="white" strokeWidth="0.8" fill="none"/></svg>
                </div>
                <span style={{ color:'#7C7C90', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>spotify.com/track/…</span>
              </div>
            ) },
          { n: '02', title: 'We design the visual', body: 'Image, video, story — matched to your genre.',
            icon: (
              <div style={{ width:'100%', aspectRatio:'9/11', borderRadius:10, background:'#050508', border:'1px solid rgba(94,43,255,0.22)', position:'relative', overflow:'hidden' }}>
                <video src="https://aesthetics-media.b-cdn.net/ADS%20VISUALS/Video_Year3006_XOXOFeng_soundtrackforwhenclosuredoesnt_2026-04-22.mp4" autoPlay muted loop playsInline preload="metadata" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }} />
                <div style={{ position:'absolute', top:8, left:8, background:'rgba(5,5,8,0.6)', backdropFilter:'blur(6px)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:100, padding:'3px 8px', fontSize:8, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#F5F2FF', fontFamily:"'JetBrains Mono', monospace" }}>Ad</div>
              </div>
            ) },
          { n: '03', title: 'Launch via Meta Business', body: 'Live inside 48 hours. Precision-targeted, daily-optimized.',
            icon: (
              <div style={{ background:'rgba(11,11,18,0.7)', border:'1px solid rgba(94,43,255,0.2)', borderRadius:10, padding:12, fontFamily:"'JetBrains Mono', monospace" }}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
                  <div style={{ width:18, height:18, borderRadius:4, background:'linear-gradient(135deg,#1877F2,#833AB4,#FD1D1D)' }} />
                  <span style={{ color:'#F5F2FF', fontSize:10, fontWeight:700 }}>Meta Ads</span>
                  <span style={{ marginLeft:'auto', fontSize:9, color:'#4ADE80' }}>● LIVE</span>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:6 }}>
                  {[{k:'CPC',v:'$0.07'},{k:'CTR',v:'2.8%'},{k:'Impr.',v:'128k'},{k:'Spend',v:'$147'}].map(x=>(
                    <div key={x.k} style={{ padding:'5px 7px', background:'rgba(255,255,255,0.03)', borderRadius:5 }}>
                      <div style={{ color:'#7C7C90', fontSize:8, letterSpacing:'0.06em', textTransform:'uppercase' }}>{x.k}</div>
                      <div style={{ color:'#F5F2FF', fontSize:11, fontWeight:700 }}>{x.v}</div>
                    </div>
                  ))}
                </div>
              </div>
            ) },
          { n: '04', title: 'Algorithm reacts. Wave starts.', body: 'Saves, replays, follows compound. Discover Weekly lands.',
            icon: (
              <div style={{ background:'rgba(11,11,18,0.7)', border:'1px solid rgba(94,43,255,0.2)', borderRadius:10, padding:12, position:'relative', overflow:'hidden' }}>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
                  <div style={{ color:'#7C7C90', fontSize:9, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', fontFamily:"'JetBrains Mono', monospace" }}>28-day trend</div>
                  <div style={{ display:'inline-flex', alignItems:'center', gap:3, color:'#4ADE80', fontSize:9, fontWeight:700, fontFamily:"'JetBrains Mono', monospace" }}>
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1 6l2.5-3 2 2L7 2M7 2v3M7 2H4" stroke="#4ADE80" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    +287%
                  </div>
                </div>
                <style>{`
                  @keyframes howGrowLine {
                    from { stroke-dashoffset: 340; }
                    to   { stroke-dashoffset: 0; }
                  }
                  @keyframes howGrowArea {
                    from { opacity: 0; transform: scaleY(0.3); }
                    to   { opacity: 1; transform: scaleY(1); }
                  }
                  @keyframes howPulseDot {
                    0%, 100% { r: 3; opacity: 1; }
                    50%      { r: 5; opacity: 0.5; }
                  }
                  .how-grow-line { stroke-dasharray: 340; animation: howGrowLine 2.4s ease-out 0.3s both; }
                  .how-grow-area { transform-origin: bottom; animation: howGrowArea 2.4s ease-out 0.3s both; }
                  .how-pulse-dot { animation: howPulseDot 1.6s ease-in-out infinite; transform-origin: center; }
                `}</style>
                <svg viewBox="0 0 200 80" style={{ width:'100%', height:'auto', display:'block' }}>
                  <defs>
                    <linearGradient id="howLine" x1="0" y1="0" x2="1" y2="0">
                      <stop offset="0%" stopColor="#5E2BFF"/>
                      <stop offset="100%" stopColor="#C94CFF"/>
                    </linearGradient>
                    <linearGradient id="howArea" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#C94CFF" stopOpacity="0.35"/>
                      <stop offset="100%" stopColor="#C94CFF" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  {/* Grid */}
                  {[20, 40, 60].map(y => (
                    <line key={y} x1="0" y1={y} x2="200" y2={y} stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
                  ))}
                  {(() => {
                    const pts = Array.from({length:29},(_,i)=>{
                      const t = i/28;
                      const y = 68 - (Math.pow(t, 2.3) * 58 + Math.sin(i*0.9)*1.5);
                      return [i*(200/28), Math.max(6, y)];
                    });
                    const line = pts.map((p,i)=> (i===0?`M ${p[0]} ${p[1]}`:`L ${p[0]} ${p[1]}`)).join(' ');
                    const area = line + ` L 200 80 L 0 80 Z`;
                    const last = pts[pts.length-1];
                    return (
                      <>
                        <path d={area} fill="url(#howArea)" className="how-grow-area"/>
                        <path d={line} stroke="url(#howLine)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="how-grow-line"/>
                        <circle cx={last[0]} cy={last[1]} r="3" fill="#C94CFF" className="how-pulse-dot"/>
                        <circle cx={last[0]} cy={last[1]} r="6" fill="#C94CFF" opacity="0.2"/>
                      </>
                    );
                  })()}
                </svg>
                <div style={{ display:'flex', justifyContent:'space-between', marginTop:4, fontSize:8, color:'#7C7C90', fontFamily:"'JetBrains Mono', monospace" }}>
                  <span>Day 1</span><span>Day 14</span><span>Day 28</span>
                </div>
              </div>
            ) },
        ].map((step, i) => (
          <FadeIn key={step.n} delay={mobile ? 0 : i * 80}>
            <div style={{
              position: 'relative',
              background: 'linear-gradient(180deg, rgba(11,11,18,0.65) 0%, rgba(11,11,18,0.35) 100%)',
              border: '1px solid rgba(255,255,255,0.06)',
              borderRadius: 18,
              padding: mobile ? 22 : 24,
              height: '100%',
              display: 'flex', flexDirection: 'column',
              transition: 'border-color 300ms, transform 300ms, box-shadow 300ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(201,76,255,0.25)'; e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 20px 48px rgba(94,43,255,0.12)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 16 }}>
                <span style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                  color: '#C94CFF',
                  background: 'rgba(201,76,255,0.08)',
                  border: '1px solid rgba(201,76,255,0.2)',
                  padding: '4px 10px', borderRadius: 100,
                }}>STEP {step.n}</span>
              </div>
              <div style={{ marginBottom: 18 }}>{step.icon}</div>
              <h3 style={{ fontSize: mobile ? 16 : 17, fontWeight: 700, color: '#F5F2FF', letterSpacing: '-0.02em', margin: '0 0 8px', lineHeight: 1.25 }}>{step.title}</h3>
              <p style={{ color: '#A1A1B3', fontSize: 13, lineHeight: 1.55, letterSpacing: '-0.01em', margin: 0 }}>{step.body}</p>
            </div>
          </FadeIn>
        ))}
      </div>
      <FadeIn delay={200}>
        <div style={{ marginTop: '48px', textAlign: 'center' }}>
          <a href="Services.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: '8px',
            color: '#C94CFF', fontSize: '13px', fontWeight: 600,
            letterSpacing: '-0.01em', textDecoration: 'none',
            padding: '12px 24px', borderRadius: '100px',
            border: '1px solid rgba(201,76,255,0.25)',
            background: 'rgba(201,76,255,0.06)',
            transition: 'all 250ms',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'rgba(201,76,255,0.12)'; e.currentTarget.style.borderColor = 'rgba(201,76,255,0.45)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'rgba(201,76,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(201,76,255,0.25)'; }}
          >
            See the full process
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7h9M8 3.5l3.5 3.5L8 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </FadeIn>
    </section>
  );
}

function Sections({ hideHowItWorks = false } = {}) {
  const w = useWindowWidth();
  const mobile = w < 768;
  const tablet = w < 1024;
  const sectionPad = mobile ? '80px 20px' : '140px 48px';

  return (
    <>
      {/* HOW IT WORKS — moved to standalone HowItWorks component (skipped when hideHowItWorks=true) */}
      {!hideHowItWorks && <HowItWorks />}

      {/* PLAYLIST vs META ADS — high-visibility comparison */}
      <ComparisonSection mobile={mobile} />

      {/* TOP MARKETS */}
      <section style={{ padding: sectionPad, maxWidth: '1200px', margin: '0 auto' }}>
        <FadeIn>
          <div style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: '16px', fontFamily: "'JetBrains Mono', monospace" }}>
            Top performing markets
          </div>
          <p style={{ color: '#A1A1B3', fontSize: '15px', letterSpacing: '-0.01em', marginBottom: '56px', maxWidth: '420px', lineHeight: 1.5 }}>
            Premium markets picked for royalty rates and algorithmic signal weight. Average cost-per-click shown.
          </p>
        </FadeIn>
        {MARKETS.map((m, i) => (
          <FadeIn key={m.code} delay={i * 40}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              borderBottom: '1px solid rgba(255,255,255,0.04)',
              padding: m.top ? '24px 0 24px 16px' : '16px 0 16px 16px',
              position: 'relative',
            }}>
              {m.top && (
                <div style={{
                  position: 'absolute', left: 0, top: '15%', bottom: '15%',
                  width: '2px', borderRadius: '2px',
                  background: 'linear-gradient(to bottom, #5E2BFF, #C94CFF)',
                }} />
              )}
              <div style={{ display: 'flex', alignItems: 'center', gap: '14px', flexWrap: mobile ? 'wrap' : 'nowrap', minWidth: 0 }}>
                <span style={{
                  fontSize: m.top
                    ? (mobile ? '26px' : 'clamp(26px,3.2vw,40px)')
                    : (mobile ? '18px' : 'clamp(18px,2.2vw,28px)'),
                  fontWeight: 800, letterSpacing: '-0.035em',
                  color: m.top ? '#F5F2FF' : '#A1A1B3',
                  whiteSpace: 'nowrap',
                }}>{m.country}</span>
                {m.top && (
                  <span style={{
                    fontSize: '10px', fontWeight: 700, color: '#C94CFF',
                    letterSpacing: '0.1em', textTransform: 'uppercase',
                    fontFamily: "'JetBrains Mono', monospace",
                    background: 'rgba(201,76,255,0.1)', border: '1px solid rgba(201,76,255,0.2)',
                    padding: '3px 10px', borderRadius: '100px',
                  }}>Top market</span>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexShrink: 0 }}>
                <span style={{
                  fontSize: mobile ? '11px' : '13px',
                  color: m.top ? '#E7C8FF' : '#A1A1B3',
                  fontFamily: "'JetBrains Mono', monospace",
                  fontWeight: m.top ? 600 : 500,
                }}>{m.metric}</span>
                <span style={{ fontSize: '11px', color: '#7C7C90', fontFamily: "'JetBrains Mono', monospace", opacity: 0.5 }}>#{i+1}</span>
              </div>
            </div>
          </FadeIn>
        ))}
        {/* And many more */}
        <FadeIn delay={MARKETS.length * 40 + 60}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '20px 16px',
            marginTop: '4px',
            borderRadius: '0 0 12px 12px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '14px', flexWrap: 'wrap' }}>
              <span style={{
                fontSize: mobile ? '16px' : '20px', fontWeight: 600, fontStyle: 'italic',
                letterSpacing: '-0.02em', color: '#7C7C90',
              }}>…and many more</span>
              <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
                {['Mexico', 'South Africa', 'etc.'].map(c => (
                  <span key={c} style={{
                    color: '#7C7C90', fontSize: '11px',
                    fontFamily: "'JetBrains Mono', monospace",
                    background: 'rgba(255,255,255,0.03)',
                    border: '1px solid rgba(255,255,255,0.05)',
                    padding: '3px 10px', borderRadius: '100px',
                  }}>{c}</span>
                ))}
              </div>
            </div>
            <span style={{ fontSize: '11px', color: '#7C7C90', fontFamily: "'JetBrains Mono', monospace", opacity: 0.4 }}>VIP only</span>
          </div>
        </FadeIn>
      </section>

      {/* TESTIMONIALS */}
      <TestimonialsMarquee />

      {/* FAQ */}
      <section style={{ padding: sectionPad, maxWidth: '860px', margin: '0 auto' }}>
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: mobile ? 40 : 56 }}>
            <div style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: '16px', fontFamily: "'JetBrains Mono', monospace" }}>
              Frequently asked
            </div>
            <h2 style={{
              fontSize: mobile ? 'clamp(30px,8vw,42px)' : 'clamp(40px,5vw,60px)',
              fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.05,
              color: '#F5F2FF', margin: '0 0 16px',
            }}>
              Questions, answered.
            </h2>
            <p style={{
              color: '#A1A1B3', fontSize: mobile ? '15px' : '17px',
              lineHeight: 1.6, letterSpacing: '-0.01em',
              margin: '0 auto', maxWidth: '560px',
            }}>
              Everything you need to know before launching your campaign.
            </p>
          </div>
        </FadeIn>
        {FAQS.map(faq => <FaqItem key={faq.q} faq={faq} />)}
      </section>

      <Footer mobile={mobile} />
    </>
  );
}

/**
 * Footer — shared across every page. Links point to real pages.
 */
function Footer({ mobile }) {
  return (
    <footer style={{
      borderTop: '1px solid rgba(255,255,255,0.05)',
      padding: mobile ? '40px 20px' : '64px 48px',
      position: 'relative',
    }}>
      <div style={{
        maxWidth: '1200px', margin: '0 auto',
        display: 'flex', justifyContent: 'space-between',
        alignItems: mobile ? 'flex-start' : 'center',
        flexWrap: 'wrap', gap: '32px',
        flexDirection: mobile ? 'column' : 'row',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: '10px', textDecoration: 'none' }}>
          <img src="assets/logo-sphere.png" alt="" style={{ width: '26px', height: '26px', objectFit: 'contain' }} />
          <div>
            <div style={{ color: '#F5F2FF', fontSize: '13px', fontWeight: 700, letterSpacing: '-0.02em' }}>Aesthetics Records</div>
            <div style={{ color: '#7C7C90', fontSize: '11px', fontFamily: "'JetBrains Mono', monospace" }}>@aesthetics_records</div>
          </div>
        </a>
        <div style={{ display: 'flex', gap: '28px', flexWrap: 'wrap' }}>
          <a href="Services.html" style={{ color: '#7C7C90', fontSize: '13px', textDecoration: 'none', letterSpacing: '-0.01em', transition: 'color 200ms' }}
            onMouseEnter={e => e.target.style.color = '#F5F2FF'}
            onMouseLeave={e => e.target.style.color = '#7C7C90'}
          >The Winning Strategy</a>
          <a href="Schedule.html" style={{ color: '#7C7C90', fontSize: '13px', textDecoration: 'none', letterSpacing: '-0.01em', transition: 'color 200ms' }}
            onMouseEnter={e => e.target.style.color = '#F5F2FF'}
            onMouseLeave={e => e.target.style.color = '#7C7C90'}
          >Schedule</a>
          <a href="Results.html" style={{ color: '#7C7C90', fontSize: '13px', textDecoration: 'none', letterSpacing: '-0.01em', transition: 'color 200ms' }}
            onMouseEnter={e => e.target.style.color = '#F5F2FF'}
            onMouseLeave={e => e.target.style.color = '#7C7C90'}
          >Results</a>
          <a href="About.html" style={{ color: '#7C7C90', fontSize: '13px', textDecoration: 'none', letterSpacing: '-0.01em', transition: 'color 200ms' }}
            onMouseEnter={e => e.target.style.color = '#F5F2FF'}
            onMouseLeave={e => e.target.style.color = '#7C7C90'}
          >About</a>
          <a href="index.html#pricing" style={{ color: '#7C7C90', fontSize: '13px', textDecoration: 'none', letterSpacing: '-0.01em', transition: 'color 200ms' }}
            onMouseEnter={e => e.target.style.color = '#F5F2FF'}
            onMouseLeave={e => e.target.style.color = '#7C7C90'}
          >Pricing</a>
          <a href="mailto:nico@aestheticsrecords.com" style={{ color: '#7C7C90', fontSize: '13px', textDecoration: 'none', letterSpacing: '-0.01em', transition: 'color 200ms' }}
            onMouseEnter={e => e.target.style.color = '#F5F2FF'}
            onMouseLeave={e => e.target.style.color = '#7C7C90'}
          >Contact</a>
        </div>
        <p style={{ color: '#7C7C90', fontSize: '11px', fontFamily: "'JetBrains Mono', monospace", margin: 0 }}>
          © 2026 Aesthetics Records LLC.
        </p>
      </div>
    </footer>
  );
}

Object.assign(window, { Sections, HowItWorks, FaqItem, Footer, ComparisonSection });