/* Landing sections + Vote page */

const NAV_LINKS = [
  { id: "features", label: "Features" },
  { id: "library", label: "Showcase" },
  { id: "open", label: "Open Source" },
];

function Logo({ size = 28 }) {
  return (
    <div className="logo-wrap" style={{display:'flex', alignItems:'center', gap:10}}>
      <img src="assets/moonlight-icon.png" width={size} height={size} alt="Moonlight"
           style={{borderRadius: size*0.22, display:'block', boxShadow:'0 2px 10px -2px rgba(0,0,0,0.6)'}}/>
      <span style={{fontFamily:'var(--font-serif)', fontSize:18, letterSpacing:'-0.015em', color:'var(--text)'}}>Moonlight</span>
    </div>
  );
}

function Nav({ onNavigate, current }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-row">
        <a className="nav-brand" href="#" onClick={(e)=>{e.preventDefault(); onNavigate('home');}}>
          <Logo/>
        </a>
        <nav className="nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={(e)=>{
              if (current === 'vote') { e.preventDefault(); onNavigate('home', l.id); }
            }}>{l.label}</a>
          ))}
          <a href="#vote" onClick={(e)=>{e.preventDefault(); onNavigate('vote');}}>Vote</a>
          <a href="https://github.com" target="_blank" rel="noreferrer" className="nav-github">
            <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.42 7.42 0 014 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
            GitHub
          </a>
          <button className="btn btn-primary btn-sm" onClick={()=>onNavigate('home','download')}>Get the app</button>
        </nav>
      </div>
    </header>
  );
}

function Hero({ onNavigate }) {
  return (
    <section className="hero">
      <div className="hero-glow"/>
      <div className="container hero-inner">
        <div className="hero-copy">
          <h1>
            A serious music player<br/>
            for <span className="serif-italic">real</span> libraries.
          </h1>
          <p className="lede">
            Moonlight is a simple, free, open-source music player for macOS.
            For people who own their music and want it to feel like it.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={()=>onNavigate('home','download')}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M11.5 1.5c-.6.7-1.6 1.2-2.5 1.1-.1-.9.3-1.8.9-2.4.6-.7 1.6-1.2 2.4-1.2.1.9-.3 1.9-.8 2.5zM14 11.5c-.4 1-.6 1.4-1.1 2.3-.7 1.2-1.7 2.7-2.9 2.7-1.1 0-1.4-.7-2.9-.7-1.5 0-1.8.7-2.9.7-1.2 0-2.2-1.4-2.9-2.6C-.3 11-.4 6.8 1 4.6c1-1.5 2.5-2.4 4-2.4 1.1 0 2.1.7 2.9.7.8 0 2-.8 3.3-.7.6 0 2.1.2 3.1 1.6-2.7 1.5-2.3 5.4-.3 6.7z"/></svg>
              Get on the Mac App Store
            </button>
          </div>
          <div className="hero-foot">
            <span className="dot-sep">Free and open source</span>
            <span className="dot-sep">Apple Silicon &amp; Intel</span>
            <span className="dot-sep">No account, no telemetry</span>
          </div>
        </div>
      </div>

      <div className="container hero-mockup-wrap">
        <MacOSMockup/>
      </div>
    </section>
  );
}

/* ---------------------------- FEATURES ---------------------------- */

function FeatureIcon({ name }) {
  const common = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  const icons = {
    search: <svg {...common}><circle cx="11" cy="11" r="6.5"/><path d="M16 16l5 5"/></svg>,
    edit: <svg {...common}><path d="M14 4l6 6L9 21H3v-6z"/><path d="M13 5l6 6"/></svg>,
    formats: <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18M7 14h2M11 14h6"/></svg>,
    mini: <svg {...common}><rect x="3" y="8" width="18" height="10" rx="3"/><circle cx="8" cy="13" r="1.5"/><path d="M13 13h5"/></svg>,
    nowplaying: <svg {...common}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/></svg>,
    github: <svg {...common}><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 7.77 5.07 5.07 0 0019.91 4S18.73 3.65 16 5.48a13.38 13.38 0 00-7 0C6.27 3.65 5.09 4 5.09 4A5.07 5.07 0 005 7.77 5.44 5.44 0 003.5 11.5c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 21.13V25"/></svg>,
  };
  return icons[name];
}

const FEATURES = [
  { ico: "search", title: "Powerful library search",
    body: "Search your whole library instantly — title, album, artist, composer, genre, and file metadata. Indexed locally, so even tens of thousands of tracks stay fast and offline." },
  { ico: "edit", title: "Built-in metadata editor",
    body: "Fix titles, tags, artwork, and album info in place. Batch-edit messy imports without round-tripping through another tag editor." },
  { ico: "formats", title: "Plays almost every format",
    body: "FLAC, ALAC, MP3, AAC, AIFF, WAV, M4A, plus Ogg and Opus via FFmpeg. Bring the library you already have — no conversion required." },
  { ico: "mini", title: "Mini player",
    body: "A compact, always-on-top player with the controls you actually use. Stays out of the way while you work." },
  { ico: "nowplaying", title: "Immersive Now Playing",
    body: "A focused, artwork-rich listening view with credits, queue, and controls one gesture away. Great for a dedicated music Mac." },
  { ico: "github", title: "Local-first and open",
    body: "No account, no subscription, no cloud library. Your music stays on your Mac. MIT licensed and developed in the open." },
];

function Features() {
  return (
    <section id="features" className="features">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">What it does</span>
          <h2>Quiet software<br/>for serious listening.</h2>
          <p className="lede" style={{marginTop:14}}>
            No friend feeds. No autoplay rabbit holes. No subscription. Just your library,
            beautifully organized, on the machine you already paid for.
          </p>
        </div>

        <div className="feature-grid">
          {FEATURES.map((f, i) => (
            <article key={i} className="feature-card">
              <div className="feature-ico"><FeatureIcon name={f.ico}/></div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --------------------------- FEATURE SHOWCASES ------------------------------ */

function LibrarySection() {
  return (
    <section id="library" className="showcase">
      <div className="container">
        <div className="section-head" style={{marginBottom: 96}}>
          <span className="eyebrow">A closer look</span>
          <h2>Four reasons it's not<br/>just another music player.</h2>
        </div>

        {/* Row 1: Search */}
        <div className="showcase-row">
          <div className="showcase-copy">
            <span className="eyebrow">Powerful local search</span>
            <h2>Find anything,<br/><span className="serif-italic">instantly.</span></h2>
            <p className="lede">
              Moonlight indexes your library locally — not just filenames, but every tag.
              Type a fragment and get ranked results across tracks, albums, artists,
              composers, and genres. No remote API, no spinner, no excuses.
            </p>
            <ul className="showcase-points">
              <li><div><b>Full-text across all metadata.</b> Title, album, artist, composer, performer, genre, year, file path.</div></li>
              <li><div><b>Ranked results.</b> Exact matches first, then broader metadata matches. Filter by Tracks, Albums, Artists, or Composers.</div></li>
              <li><div><b>Built for scale.</b> Tens of thousands of tracks return results in milliseconds.</div></li>
              <li><div><b>Works offline.</b> The index lives on your machine. It always works, even on a plane.</div></li>
            </ul>
          </div>
          <div className="showcase-visual">
            <SearchMockup/>
          </div>
        </div>

        {/* Row 2: Metadata editor */}
        <div className="showcase-row reverse">
          <div className="showcase-copy">
            <span className="eyebrow">Built-in metadata editor</span>
            <h2>Clean up your library<br/>without leaving it.</h2>
            <p className="lede">
              Edit titles, album info, composer, year, and artwork directly inside Moonlight.
              Batch-edit messy imports in one pass. No round trip through a separate tag editor,
              no risky destructive writes.
            </p>
            <ul className="showcase-points">
              <li><div><b>Edit every field that matters.</b> Title, album, album artist, composer, genre, year, disc, track number, artwork.</div></li>
              <li><div><b>Batch editing.</b> Fix typos across 200 tracks at once. Type the change, see the diff, apply it.</div></li>
              <li><div><b>Safe by default.</b> Preview every change before writing. Optional metadata overrides keep your underlying files untouched.</div></li>
            </ul>
          </div>
          <div className="showcase-visual">
            <MetadataEditorMockup/>
          </div>
        </div>

        {/* Row 3: Mini player */}
        <div className="showcase-row">
          <div className="showcase-copy">
            <span className="eyebrow">Mini player</span>
            <h2>Out of your way,<br/><span className="serif-italic">not</span> out of reach.</h2>
            <p className="lede">
              When Moonlight isn't your foreground app, the mini player keeps the controls you
              actually use right where you need them. Always-on-top, snappable to any corner,
              and a single click away from full size.
            </p>
            <ul className="showcase-points">
              <li><div><b>Compact and always on top.</b> Pin it over your editor, your terminal, or anything else.</div></li>
              <li><div><b>Real controls.</b> Album art, play/pause, skip, scrub, favorite, queue — not a status bar dropdown.</div></li>
              <li><div><b>Keyboard &amp; media keys.</b> Bluetooth headphones and AirPods just work.</div></li>
            </ul>
          </div>
          <div className="showcase-visual showcase-visual-center">
            <MiniPlayerMockup/>
            <div className="mini-context">
              <div className="mini-context-dot"/>
              <span>Floats over any window · ⌘⇧M to summon</span>
            </div>
          </div>
        </div>

        {/* Row 4: Now Playing */}
        <div className="showcase-row reverse">
          <div className="showcase-copy">
            <span className="eyebrow">Now Playing</span>
            <h2>A view worth<br/>turning the lights down for.</h2>
            <p className="lede">
              Press space, dim the room, and let the music breathe. Now Playing is for the
              moments when listening is the activity, not the background to one.
            </p>
            <ul className="showcase-points">
              <li><div><b>Full-bleed artwork.</b> Front and center, where it belongs.</div></li>
              <li><div><b>Real credits.</b> Composer, performer, recording date, ensemble, format. Pulled from your tags.</div></li>
              <li><div><b>Queue context.</b> See what's coming next without leaving the view.</div></li>
            </ul>
          </div>
          <div className="showcase-visual">
            <NowPlayingMockup/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* --------------------------- OPEN SOURCE ------------------------------ */

function OpenSource() {
  return (
    <section id="open" className="opensrc">
      <div className="container opensrc-inner">
        <div className="opensrc-copy">
          <span className="eyebrow">Open source</span>
          <h2>Developed in the open.<br/>Free, and free to inspect.</h2>
          <p className="lede">
            Moonlight is MIT-licensed. The source is on GitHub, issues are public,
            and the roadmap is something you can actually argue with. No account, no
            cloud library, no background reporting — your library never leaves your machine.
          </p>
          <div className="opensrc-ctas">
            <a className="btn btn-primary" href="https://github.com" target="_blank" rel="noreferrer">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0L9.95 5.5 16 6l-4.5 4 1.5 6L8 12.5 3 16l1.5-6L0 6l6.05-.5z"/></svg>
              Star on GitHub
            </a>
            <a className="btn btn-ghost" href="https://github.com" target="_blank" rel="noreferrer">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="8" cy="8" r="6.5"/><path d="M8 5v3l2 1.5"/></svg>
              Latest release
            </a>
          </div>
        </div>

        <div className="repo-card">
          <div className="repo-head">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{color:'var(--text-3)'}}><path d="M2 2.5A2.5 2.5 0 014.5 0h7A2.5 2.5 0 0114 2.5v10.75a.75.75 0 01-1.13.65L8 11.04l-4.87 2.86A.75.75 0 012 13.25V2.5z"/></svg>
            <span className="repo-org">moonlight</span><span className="repo-sep">/</span><span className="repo-name">moonlight</span>
            <span className="repo-vis">Public</span>
          </div>
          <div className="repo-desc">A free, local-first music player for macOS. Built for large libraries and serious listening.</div>
          <div className="repo-stats">
            <div className="repo-stat"><span className="repo-stat-num">4,892</span><span>Stars</span></div>
            <div className="repo-stat"><span className="repo-stat-num">312</span><span>Forks</span></div>
            <div className="repo-stat"><span className="repo-stat-num">87</span><span>Contributors</span></div>
            <div className="repo-stat"><span className="repo-stat-num">v0.9.3</span><span>Latest release</span></div>
          </div>
          <div className="repo-lang">
            <span className="lang-bar">
              <span style={{width:'72%', background:'#a8896a'}}/>
              <span style={{width:'18%', background:'#8a78d8'}}/>
              <span style={{width:'7%',  background:'#7ec48a'}}/>
              <span style={{width:'3%',  background:'#b8b1c6'}}/>
            </span>
            <span className="lang-leg"><i style={{background:'#a8896a'}}/>Swift 72%</span>
            <span className="lang-leg"><i style={{background:'#8a78d8'}}/>SwiftUI 18%</span>
            <span className="lang-leg"><i style={{background:'#7ec48a'}}/>SQL 7%</span>
            <span className="lang-leg"><i style={{background:'#b8b1c6'}}/>Other 3%</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Features = Features;
window.LibrarySection = LibrarySection;
window.OpenSource = OpenSource;
window.Logo = Logo;