// Hero — headline over animated aurora canvas, with three floating phone mockups.

function HeroLibraryScreen({ isDark }) {
  const items = [
    { label: 'All songs', count: '1,247 tracks', seed: 0 },
    { label: 'Artists',   count: '84 artists', seed: 1 },
    { label: 'Albums',    count: '112 albums', seed: 2 },
    { label: 'Playlists', count: '9 playlists', seed: 3 },
  ];
  const recent = [
    { title: 'Synthoria', artist: 'Alexxon', seed: 0 },
    { title: 'Lake Buntzen', artist: 'Alexxon', seed: 1 },
    { title: 'Xeon', artist: 'Alexxon', seed: 2 },
    { title: 'Harbour', artist: 'Pond Ensemble', seed: 3 },
  ];
  const sub = isDark ? 'rgba(235,236,240,0.56)' : 'rgba(20,23,27,0.55)';
  const faint = isDark ? 'rgba(235,236,240,0.45)' : 'rgba(20,23,27,0.45)';
  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#FFFFFF';
  const cardBorder = isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.07)' : 'inset 0 0 0 0.5px rgba(0,0,0,0.05)';
  return (
    <div style={{ padding: '8px 16px 16px', fontFamily: 'Inter, system-ui' }}>
      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingBottom: 8 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 16,
          background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 17 17" fill="none" stroke={isDark?'#EDEEF0':'#14171B'} strokeWidth="1.4"><circle cx="8.5" cy="8.5" r="2.4"/><path d="M8.5 1.5v2M8.5 13.5v2M15.5 8.5h-2M3.5 8.5h-2"/></svg>
        </div>
      </div>
      <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.5, marginBottom: 16 }}>Library</div>
      {/* Search */}
      <div style={{
        height: 34, borderRadius: 10, padding: '0 10px', marginBottom: 20,
        background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)',
        display: 'flex', alignItems: 'center', gap: 8,
        color: faint, fontSize: 13,
      }}>
        <svg width="12" height="12" viewBox="0 0 17 17" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="7.5" cy="7.5" r="5.25"/><path d="M11.5 11.5l3 3" strokeLinecap="round"/></svg>
        Search library
      </div>
      <div style={{ fontSize: 11, color: sub, padding: '0 4px 6px' }}>Browse</div>
      <div style={{ borderRadius: 16, overflow: 'hidden', background: cardBg, boxShadow: cardBorder, marginBottom: 18 }}>
        {items.map((it, i) => (
          <div key={it.label} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '11px 13px', position: 'relative',
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 7,
              background: isDark ? 'rgba(213,142,144,0.14)' : 'rgba(213,142,144,0.18)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#D58E90',
            }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M13 1.5L6 3v8.2A2.8 2.8 0 104.5 8.3c.35 0 .68.06 1 .18V3.8L12 2.6v6.4a2.8 2.8 0 10-1.5 2.9V1.5h2.5z"/></svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: -0.2 }}>{it.label}</div>
              <div style={{ fontSize: 10.5, color: sub, marginTop: 1 }}>{it.count}</div>
            </div>
            <div style={{ color: faint, fontSize: 10 }}>
              <svg width="8" height="10" viewBox="0 0 8 12" fill="none"><path d="M1.5 1L6.5 6l-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            {i < items.length - 1 && (
              <div style={{ position: 'absolute', bottom: 0, left: 53, right: 13, height: 0.5, background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)' }}/>
            )}
          </div>
        ))}
      </div>
      <div style={{ fontSize: 11, color: sub, padding: '0 4px 8px' }}>Recently played</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {recent.map(s => (
          <div key={s.title} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 8px 6px 6px', borderRadius: 10,
            background: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.025)',
            boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.05)' : 'inset 0 0 0 0.5px rgba(0,0,0,0.04)',
          }}>
            <MiniGradient seed={s.seed} size={32} radius={6} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.title}</div>
              <div style={{ fontSize: 9.5, color: sub, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.artist}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroNowPlaying({ isDark }) {
  const palette = ['#F6C75C', '#D58E90', '#C799B8'];
  return (
    <div style={{
      position: 'relative', height: '100%',
      background: `
        radial-gradient(500px 400px at 20% 10%, ${palette[0]}77, transparent 60%),
        radial-gradient(500px 400px at 80% 50%, ${palette[1]}66, transparent 65%),
        radial-gradient(500px 500px at 50% 110%, ${palette[2]}55, transparent 60%),
        ${isDark ? '#120F14' : '#FBF7F1'}
      `,
      padding: '12px 18px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: isDark ? '#fff' : '#14171B' }}>
        <div style={{
          width: 30, height: 30, borderRadius: 15,
          background: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(20,23,27,0.08)',
          backdropFilter: 'blur(20px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="10" height="6" viewBox="0 0 12 8" fill="none"><path d="M1 1l5 5 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <div style={{ textAlign: 'center', fontSize: 10, fontWeight: 500, color: isDark ? 'rgba(255,255,255,0.72)' : 'rgba(20,23,27,0.72)' }}>
          <div style={{ fontSize: 8.5, opacity: 0.6, textTransform: 'uppercase', letterSpacing: 0.1, marginBottom: 1 }}>Playing from album</div>
          <div>Sensation</div>
        </div>
        <div style={{ width: 30, height: 30, borderRadius: 15, background: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(20,23,27,0.08)' }} />
      </div>
      <div style={{ padding: '18px 14px 0', display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: 220, height: 220, borderRadius: 18,
          background: `
            radial-gradient(circle at 25% 30%, #E9C46A 0%, transparent 55%),
            radial-gradient(circle at 75% 40%, #D58E90 0%, transparent 60%),
            radial-gradient(circle at 50% 80%, #C799B8 0%, transparent 60%),
            linear-gradient(135deg, #F0B895, #C799B8)
          `,
          boxShadow: '0 24px 50px rgba(0,0,0,0.35), inset 0 0 0 0.5px rgba(255,255,255,0.2)',
        }}/>
      </div>
      <div style={{ padding: '16px 6px 0', color: isDark ? '#fff' : '#14171B' }}>
        <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>Synthoria</div>
        <div style={{ fontSize: 13, opacity: 0.78, marginTop: 2 }}>Alexxon</div>
      </div>
      <div style={{ padding: '18px 6px 0' }}>
        <div style={{
          position: 'relative', height: 3, borderRadius: 2,
          background: isDark ? 'rgba(255,255,255,0.18)' : 'rgba(20,23,27,0.12)',
        }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '28%', background: isDark ? '#fff' : '#14171B', borderRadius: 2 }} />
          <div style={{ position: 'absolute', left: '28%', top: '50%', transform: 'translate(-50%, -50%)', width: 10, height: 10, borderRadius: 5, background: isDark ? '#fff' : '#14171B' }} />
        </div>
        <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between', fontSize: 10, color: isDark ? 'rgba(255,255,255,0.7)' : 'rgba(20,23,27,0.6)', fontFamily: 'JetBrains Mono, monospace' }}>
          <span>1:04</span>
          <span>-2:38</span>
        </div>
      </div>
      <div style={{ padding: '22px 0 0', display: 'flex', alignItems: 'center', justifyContent: 'space-around', color: isDark ? '#fff' : '#14171B' }}>
        <svg width="16" height="14" viewBox="0 0 17 14" fill="none"><path d="M1 2h3l8 10h3M13 2h3M13 12h3M15 0l2 2-2 2M15 10l2 2-2 2M1 12h3l2-2.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <svg width="26" height="17" viewBox="0 0 22 15" fill="currentColor"><path d="M10 1.5L2 7v1L10 13.5a.5.5 0 00.8-.4V2a.5.5 0 00-.8-.5z"/><path d="M20 1.5L12 7v1L20 13.5a.5.5 0 00.8-.4V2a.5.5 0 00-.8-.5z"/></svg>
        <div style={{
          width: 56, height: 56, borderRadius: 28,
          background: isDark ? '#fff' : '#14171B',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 10px 24px rgba(0,0,0,0.3)',
        }}>
          <svg width="20" height="20" viewBox="0 0 18 18" fill={isDark?'#111':'#fff'}><rect x="3" y="2" width="4" height="14" rx="1.2"/><rect x="11" y="2" width="4" height="14" rx="1.2"/></svg>
        </div>
        <svg width="26" height="17" viewBox="0 0 22 15" fill="currentColor"><path d="M12 1.5L20 7v1L12 13.5a.5.5 0 01-.8-.4V2a.5.5 0 01.8-.5z"/><path d="M2 1.5L10 7v1L2 13.5a.5.5 0 01-.8-.4V2a.5.5 0 01.8-.5z"/></svg>
        <svg width="16" height="14" viewBox="0 0 17 14" fill="none"><path d="M2 5V4a2 2 0 012-2h9M15 9v1a2 2 0 01-2 2H4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
      </div>
    </div>
  );
}

function HeroEqualizer({ isDark }) {
  const sub = isDark ? 'rgba(235,236,240,0.56)' : 'rgba(20,23,27,0.55)';
  const bandValues = [-1, -2, 3];
  const path = "M 12 96 C 40 96, 68 100, 96 100 S 160 80, 220 64 S 290 56, 300 54";
  return (
    <div style={{ padding: '10px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 8 }}>
        <div style={{ width: 30, height: 30, borderRadius: 15, background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(20,23,27,0.04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none"><path d="M6.5 1L1.5 6l5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <div style={{ fontSize: 11, color: '#D58E90', fontWeight: 500 }}>Reset</div>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.5, marginBottom: 18 }}>Equalizer</div>
      <div style={{
        padding: 14,
        borderRadius: 14,
        background: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.7)',
        boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.06)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.05)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 10 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>DSP</div>
            <div style={{ fontSize: 9.5, color: sub, marginTop: 2 }}>AVAudioUnitEQ: low / bell / high</div>
          </div>
          <div style={{ width: 38, height: 22, borderRadius: 11, background: '#D58E90', position: 'relative' }}>
            <div style={{ position: 'absolute', top: 2, left: 18, width: 18, height: 18, borderRadius: 9, background: '#fff' }}/>
          </div>
        </div>
        <svg viewBox="0 0 320 120" style={{ width: '100%', height: 120 }}>
          <defs>
            <linearGradient id="curveG" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stopColor="#D58E90"/>
              <stop offset="1" stopColor="#E9C46A"/>
            </linearGradient>
          </defs>
          <line x1="10" y1="20"  x2="310" y2="20"  stroke={isDark?'rgba(255,255,255,0.06)':'rgba(20,23,27,0.06)'} strokeDasharray="2 4"/>
          <line x1="10" y1="60"  x2="310" y2="60"  stroke={isDark?'rgba(255,255,255,0.12)':'rgba(20,23,27,0.12)'}/>
          <line x1="10" y1="100" x2="310" y2="100" stroke={isDark?'rgba(255,255,255,0.06)':'rgba(20,23,27,0.06)'} strokeDasharray="2 4"/>
          <path d={path} stroke="url(#curveG)" strokeWidth="2" fill="none" strokeLinecap="round"/>
        </svg>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 8.5, color: sub, padding: '4px 2px 0', fontFamily: 'JetBrains Mono, monospace' }}>
          <span>250</span><span>1.5k</span><span>12k</span>
        </div>
      </div>
      <div style={{ marginTop: 16 }}>
        {[
          { hz: '250 Hz', kind: 'Low shelf', db: '-1.0', pos: 0.3 },
          { hz: '1.5 kHz', kind: 'Bell',     db: '-2.0', pos: 0.45 },
          { hz: '12 kHz', kind: 'High shelf', db: '+3.0', pos: 0.78 },
        ].map(b => (
          <div key={b.hz} style={{ paddingBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 4 }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{b.hz}</div>
                <div style={{ fontSize: 9, color: sub }}>{b.kind}</div>
              </div>
              <div style={{ fontSize: 11, color: sub, fontFamily: 'JetBrains Mono, monospace' }}>{b.db} dB</div>
            </div>
            <div style={{ position: 'relative', height: 3, background: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(20,23,27,0.08)', borderRadius: 2 }}>
              <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${b.pos*100}%`, background: '#D58E90', borderRadius: 2 }}/>
              <div style={{ position: 'absolute', left: `${b.pos*100}%`, top: '50%', transform: 'translate(-50%, -50%)', width: 14, height: 14, borderRadius: 7, background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.2)' }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroSection({ theme }) {
  const isDark = theme === 'dark';
  return (
    <section className="hero">
      {/* Aurora canvas */}
      <div className="hero-canvas">
        <div className="orb orb-anim" style={{ width: 560, height: 560, top: -120, left: -80, background: 'radial-gradient(circle, #F0B895 0%, transparent 60%)' }}/>
        <div className="orb orb-anim" style={{ width: 640, height: 640, top: 120, right: -160, background: 'radial-gradient(circle, #D58E90 0%, transparent 60%)', animationDelay: '-6s' }}/>
        <div className="orb orb-anim" style={{ width: 480, height: 480, top: 520, left: '28%', background: 'radial-gradient(circle, #C799B8 0%, transparent 60%)', animationDelay: '-12s' }}/>
        <div className="orb orb-anim" style={{ width: 380, height: 380, top: 320, left: '-10%', background: 'radial-gradient(circle, #E9C46A 0%, transparent 60%)', animationDelay: '-3s' }}/>
      </div>

      <div className="container hero-copy">
        <div className="hero-eyebrow-row">
          <span className="pill"><span className="pill-dot"/> LUMYNA 1.0 · LOCAL‑FIRST</span>
          <span className="pill">NEW · VISUAL PLAYER</span>
        </div>
        <h1>
          Music, the way<br/>
          you actually <span className="serif-accent">listen.</span>
        </h1>
        <p className="hero-sub">
          A distraction‑free player for the music on your device. Studio‑grade DSP.
          Liquid Glass interface. No feeds, no suggestions — just the song playing now.
        </p>
        <div className="hero-cta-row">
          <a href="#download" className="btn btn-primary btn-lg">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 0l3 3-2 0v5h4l-5 5-5-5h4V3L4 3l3-3z"/></svg>
            Download for macOS
          </a>
          <a href="#tour" className="btn btn-ghost btn-lg">
            Take the tour
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M2 6h8M7 3l3 3-3 3"/></svg>
          </a>
          <div style={{ display: 'flex', gap: 14, marginLeft: 10, color: 'var(--ink-3)', fontSize: 12.5 }}>
            <span className="mono">MACOS 14+</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span className="mono">IOS 17+</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span className="mono">FREE</span>
          </div>
        </div>
      </div>

      <div className="hero-stage">
        <div className="hero-stage-phone p1">
          <MiniPhone theme={isDark ? 'dark' : 'light'} scale={0.72} miniPlayer={{ title: 'Synthoria', artist: 'Alexxon', seed: 0 }}>
            <HeroLibraryScreen isDark={isDark} />
          </MiniPhone>
        </div>
        <div className="hero-stage-phone p2">
          <MiniPhone theme="dark" scale={0.82} tint="#120F14">
            <HeroNowPlaying isDark={true} />
          </MiniPhone>
        </div>
        <div className="hero-stage-phone p3">
          <MiniPhone theme={isDark ? 'dark' : 'light'} scale={0.62} miniPlayer={{ title: 'Lake Buntzen', artist: 'Alexxon', seed: 1 }}>
            <HeroEqualizer isDark={isDark} />
          </MiniPhone>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection, HeroLibraryScreen, HeroNowPlaying, HeroEqualizer });