/* v4 — Visual features page: irregular bento grid of "figures",
   each with an embedded mini-mockup. Reuses v3 nav + home. */

const {
  NavV3, HeroV3, FeatureOverview, OpenSourcePageV3,
  VotePage, Footer, Download, OpenSource,
} = window;

/* ============================================================
   FIGURES — small embedded mockups
   ============================================================ */

function FigScreenshot({ src, alt, focus }) {
  return (
    <div className="fig-screenshot">
      <div className="fig-screenshot-bar">
        <span/><span/><span/>
      </div>
      <img src={src} alt={alt} style={{objectPosition: focus || 'top center'}}/>
    </div>
  );
}

function FigSearch() {
  return (
    <div className="fig fig-search">
      <div className="fig-search-bar">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l5 5"/></svg>
        <span className="fig-search-q">goldberg</span>
        <span className="fig-search-cursor"/>
        <span className="fig-search-kbd">⌘ K</span>
      </div>
      <div className="fig-search-results">
        <div className="fig-search-row active">
          <div className="fig-art fig-art-1"/>
          <div className="fig-search-text">
            <div className="fig-search-title">Goldberg Variations, BWV 988</div>
            <div className="fig-search-sub">Album · Glenn Gould · 1981</div>
          </div>
          <span className="fig-kbd">↵</span>
        </div>
        <div className="fig-search-row">
          <div className="fig-art fig-art-2"/>
          <div className="fig-search-text">
            <div className="fig-search-title">Aria</div>
            <div className="fig-search-sub">Track · Glenn Gould</div>
          </div>
        </div>
        <div className="fig-search-row">
          <div className="fig-art fig-art-3"/>
          <div className="fig-search-text">
            <div className="fig-search-title">Glenn Gould</div>
            <div className="fig-search-sub">Artist · 312 tracks</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FigFormats() {
  const chips = [
    { t: "FLAC",  cls: "lg primary" },
    { t: "ALAC",  cls: "md" },
    { t: "MP3",   cls: "md primary" },
    { t: "WAV",   cls: "sm" },
    { t: "AIFF",  cls: "sm" },
    { t: "AAC",   cls: "md" },
    { t: "M4A",   cls: "sm" },
  ];
  return (
    <div className="fig fig-formats">
      {chips.map((c, i) => (
        <span key={i} className={`fig-chip ${c.cls}`}>{c.t}</span>
      ))}
    </div>
  );
}

function FigTags() {
  return (
    <div className="fig fig-tags">
      <div className="fig-tags-head">
        <span className="fig-tags-title">Edit Metadata</span>
        <span className="fig-tags-batch">32 tracks</span>
      </div>
      <div className="fig-tags-grid">
        <label>Title</label>     <div className="fig-tags-val multi">Multiple values</div>
        <label>Album</label>     <div className="fig-tags-val edit">Goldberg Variations<span className="fig-tags-caret"/></div>
        <label>Composer</label>  <div className="fig-tags-val">J. S. Bach</div>
        <label>Year</label>      <div className="fig-tags-val edit">1981</div>
      </div>
    </div>
  );
}

function FigLibrary() {
  return (
    <div className="fig fig-library">
      <div className="fig-stat">
        <div className="fig-stat-num">47,832</div>
        <div className="fig-stat-label">tracks indexed locally</div>
      </div>
      <div className="fig-stat-rows">
        <div className="fig-stat-row"><span>Artists</span><span>1,412</span></div>
        <div className="fig-stat-row"><span>Albums</span><span>3,887</span></div>
        <div className="fig-stat-row"><span>Composers</span><span>284</span></div>
        <div className="fig-stat-row"><span>Genres</span><span>62</span></div>
      </div>
    </div>
  );
}

function FigThemes() {
  const themes = [
    { name: "Moonlight", bg: "linear-gradient(135deg, #2a2856 0%, #14122e 100%)", dot: "#f3d6a8" },
    { name: "Vellum",    bg: "linear-gradient(135deg, #e8dbc4 0%, #c9b896 100%)", dot: "#5a4a3a" },
    { name: "Ember",     bg: "linear-gradient(135deg, #4a1f1c 0%, #1f0e0c 100%)", dot: "#f0a878" },
    { name: "Forest",    bg: "linear-gradient(135deg, #1c3a2a 0%, #0c1c14 100%)", dot: "#a8d9b5" },
  ];
  return (
    <div className="fig fig-themes">
      {themes.map((t, i) => (
        <div key={i} className={`fig-theme ${i === 0 ? "active" : ""}`}>
          <div className="fig-theme-swatch" style={{background: t.bg}}>
            <span className="fig-theme-dot" style={{background: t.dot}}/>
          </div>
          <span className="fig-theme-name">{t.name}</span>
        </div>
      ))}
    </div>
  );
}

function FigPlaylists() {
  const rows = [
    { n: 1, t: "Aria",                       a: "Glenn Gould",       d: "1:54" },
    { n: 2, t: "Variation 1 — a 1 Clav.",    a: "Glenn Gould",       d: "0:48", dragging: true },
    { n: 3, t: "Variation 25 — Adagio",      a: "Glenn Gould",       d: "6:02" },
    { n: 4, t: "Quoniam tu solus sanctus",   a: "Karl Richter",      d: "5:22" },
  ];
  return (
    <div className="fig fig-playlists">
      <div className="fig-pl-head">
        <span>Late Night Classical</span>
        <span className="fig-pl-meta">42 tracks · 3h 12m</span>
      </div>
      {rows.map((r) => (
        <div key={r.n} className={`fig-pl-row ${r.dragging ? "dragging" : ""}`}>
          <svg className="fig-pl-grip" width="10" height="14" viewBox="0 0 10 14" fill="currentColor"><circle cx="2" cy="3" r="1"/><circle cx="8" cy="3" r="1"/><circle cx="2" cy="7" r="1"/><circle cx="8" cy="7" r="1"/><circle cx="2" cy="11" r="1"/><circle cx="8" cy="11" r="1"/></svg>
          <span className="fig-pl-num">{r.n}</span>
          <span className="fig-pl-title">{r.t}</span>
          <span className="fig-pl-artist">{r.a}</span>
          <span className="fig-pl-dur">{r.d}</span>
        </div>
      ))}
    </div>
  );
}

function FigNowPlaying() {
  return (
    <div className="fig fig-np">
      <div className="fig-np-art">
        <div className="fig-np-art-glow"/>
        <div className="fig-np-art-inner">
          <svg width="44" height="44" viewBox="0 0 24 24" fill="none">
            <defs>
              <radialGradient id="np-moon" cx="0.65" cy="0.45" r="0.7">
                <stop offset="0%" stopColor="#f3d6a8" stopOpacity="0.95"/>
                <stop offset="55%" stopColor="#a87a4a" stopOpacity="0.6"/>
                <stop offset="100%" stopColor="#1a1432" stopOpacity="0.9"/>
              </radialGradient>
            </defs>
            <circle cx="12" cy="12" r="9" fill="url(#np-moon)"/>
            <circle cx="9" cy="11" r="7" fill="#0e0a22"/>
          </svg>
        </div>
      </div>
      <div className="fig-np-meta">
        <div className="fig-np-title">Variation 25 — Adagio</div>
        <div className="fig-np-sub">Goldberg Variations · Glenn Gould</div>
        <div className="fig-np-scrubber">
          <div className="fig-np-scrubber-fill"/>
          <div className="fig-np-scrubber-dot"/>
        </div>
        <div className="fig-np-times"><span>3:42</span><span>6:02</span></div>
      </div>
      <div className="fig-np-mini">
        <div className="fig-np-mini-art"/>
        <div className="fig-np-mini-bars">
          <span/><span/><span/><span/><span/>
        </div>
      </div>
    </div>
  );
}

function FigOpenSource() {
  return (
    <div className="fig fig-os">
      <div className="fig-os-head">
        <svg width="14" height="14" 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>
        <span>moonlight / moonlight</span>
        <span className="fig-os-pill">MIT</span>
      </div>
      <div className="fig-os-stats">
        <div><b>4,892</b><span>stars</span></div>
        <div><b>312</b><span>forks</span></div>
        <div><b>87</b><span>contributors</span></div>
      </div>
      <div className="fig-os-spark" aria-hidden="true">
        {Array.from({length: 40}, (_, i) => {
          const h = 6 + Math.round(Math.abs(Math.sin(i * 0.7) * 22) + (i % 5) * 2);
          return <span key={i} style={{height: h + "px"}}/>;
        })}
      </div>
      <div className="fig-os-foot">commits / last 12 months</div>
    </div>
  );
}

/* ============================================================
   PAGE
   ============================================================ */

const FIGURES = [
  { id: "2.1", span: "wide",   shot: true, visual: <FigScreenshot src="assets/screen-search.png" alt="Moonlight — Search" focus="center center"/>,
    title: "Find anything, instantly.",
    body:  "Spotlight-style search across albums, artists, composers, and songs. Ranked results, keyboard nav, all local." },
  { id: "2.2", span: "narrow", visual: <FigFormats/>,
    title: "Plays almost everything.",
    body:  "Broad format support — MP3, FLAC, ALAC, WAV, AIFF, AAC, M4A. Bring the library you already have." },
  { id: "2.3", span: "narrow", shot: true, visual: <FigScreenshot src="assets/screen-edit.png" alt="Moonlight — Edit Metadata" focus="center center"/>,
    title: "Tag editor, batteries included.",
    body:  "Edit titles, albums, composer, year, and artwork in place. Batch-edit messy imports in one pass." },
  { id: "2.4", span: "narrow", shot: true, visual: <FigScreenshot src="assets/screen-library.png" alt="Moonlight — Library" focus="top left"/>,
    title: "Built for large libraries.",
    body:  "Incremental, live folder scanning. Tens of thousands of tracks stay snappy on the Mac you already own." },
  { id: "2.5", span: "narrow", visual: <FigThemes/>,
    title: "Themes for every mood.",
    body:  "Multiple built-in themes — pick the palette that suits the time of day." },
  { id: "2.6", span: "narrow", visual: <FigPlaylists/>,
    title: "Playlists & queue, your way.",
    body:  "Drag-and-drop, Play Next, Play Later, Shuffle. Export anything as .m3u." },
  { id: "2.7", span: "wide",   shot: true, visual: <FigScreenshot src="assets/screen-nowplaying.png" alt="Moonlight — Now Playing" focus="center center"/>,
    title: "Now Playing, with a Mini Player on call.",
    body:  "An immersive full-screen view for serious listening, and a tiny always-on-top player when you're working. Gapless playback, AirPlay, and macOS media keys." },
  { id: "2.8", span: "full",   visual: <FigOpenSource/>,
    title: "Open source, locally.",
    body:  "MIT-licensed. Issues and roadmap are public. No accounts, no cloud library, no telemetry — your music never leaves your machine." },
];

function FvFigure({ fig }) {
  return (
    <article className={`fv-fig fv-fig-${fig.span} ${fig.shot ? "fv-fig-shot" : ""}`}>
      <div className="fv-fig-canvas">
        <span className="fv-fig-label">FIG {fig.id}</span>
        <div className="fv-fig-visual">{fig.visual}</div>
      </div>
      <div className="fv-fig-body">
        <h3>{fig.title}</h3>
        <p>{fig.body}</p>
      </div>
    </article>
  );
}

function FeaturesVisualPage({ onNavigate }) {
  React.useEffect(() => { window.scrollTo({top: 0, behavior: "instant"}); }, []);
  return (
    <div className="fpage fpage-visual">
      <div className="container">
        <div className="fpage-head">
          <span className="eyebrow">Features</span>
          <h1>Everything Moonlight does,<br/>and nothing it doesn't.</h1>
          <p className="lede">
            A focused tour of the app — what it indexes, what it edits, how it plays,
            and the deliberate things it leaves out.
          </p>
        </div>

        <div className="fv-grid">
          {FIGURES.map((f) => <FvFigure key={f.id} fig={f}/>)}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   ROUTER — same as AppV3, but features route uses FeaturesVisualPage
   ============================================================ */

function AppV4() {
  const [view, setView] = React.useState(() => {
    const h = location.hash.replace('#', '');
    if (h === 'vote') return 'vote';
    if (h === 'features') return 'features';
    if (h === 'opensource') return 'opensource';
    return 'home';
  });

  const navigate = (target, anchor) => {
    const goHomeAnchor = () => {
      if (anchor) {
        requestAnimationFrame(() => {
          const el = document.getElementById(anchor);
          if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
        });
      } else {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }
    };
    if (target === "vote") {
      setView("vote"); history.replaceState(null, "", "#vote");
      window.scrollTo({ top: 0, behavior: "instant" }); return;
    }
    if (target === "features") {
      setView("features"); history.replaceState(null, "", "#features");
      window.scrollTo({ top: 0, behavior: "instant" }); return;
    }
    if (target === "opensource") {
      setView("opensource"); history.replaceState(null, "", "#opensource");
      window.scrollTo({ top: 0, behavior: "instant" }); return;
    }
    if (view !== "home") {
      setView("home");
      history.replaceState(null, "", anchor ? `#${anchor}` : "#");
      setTimeout(goHomeAnchor, 30);
    } else { goHomeAnchor(); }
  };

  React.useEffect(() => {
    const onHash = () => {
      const h = location.hash.replace('#', '');
      if (h === 'vote') setView('vote');
      else if (h === 'features') setView('features');
      else if (h === 'opensource') setView('opensource');
      else setView('home');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  return (
    <>
      <NavV3 onNavigate={navigate} current={view}/>
      {view === "home" && (
        <>
          <HeroV3 onNavigate={navigate}/>
          <FeatureOverview onNavigate={navigate}/>
          <Download onNavigate={navigate}/>
        </>
      )}
      {view === "features" && <FeaturesVisualPage onNavigate={navigate}/>}
      {view === "opensource" && <OpenSourcePageV3 onNavigate={navigate}/>}
      {view === "vote" && <VotePage onNavigate={navigate}/>}
      <Footer onNavigate={navigate}/>
    </>
  );
}

window.AppV4 = AppV4;
window.FeaturesVisualPage = FeaturesVisualPage;