// Library feature section — "distraction-free library"

function LibrarySection({ theme }) {
  const isDark = theme === 'dark';
  return (
    <section id="library" className="feat-row">
      <div className="container">
        <div className="feat-grid">
          <div className="feat-visual">
            <div className="specimen" style={{
              background: `radial-gradient(circle at 25% 30%, ${isDark?'#2a1d24':'#F4DED0'} 0%, transparent 60%),
                           radial-gradient(circle at 75% 70%, ${isDark?'#1e1f2e':'#EDDDEA'} 0%, transparent 60%),
                           ${isDark?'#151218':'#F8F2EB'}`,
              boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.05)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.05)',
            }}>
              {/* Floating labels */}
              <div style={{ position: 'absolute', top: 40, left: 36, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--ink-3)', letterSpacing: 0.12, textTransform: 'uppercase' }}>
                <span style={{ display: 'inline-block', width: 6, height: 6, background: '#D58E90', borderRadius: 3, marginRight: 8, verticalAlign: 'middle' }}/>
                Library · Home
              </div>
              <div style={{ position: 'absolute', top: 40, right: 36, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--ink-3)' }}>
                00 · ENTRY SURFACE
              </div>

              <MiniPhone theme={theme} scale={0.86} miniPlayer={{ title: 'Synthoria', artist: 'Alexxon', seed: 0 }}>
                <HeroLibraryScreen isDark={isDark} />
              </MiniPhone>

              {/* annotation callouts */}
              <div style={{
                position: 'absolute', top: 140, right: 30, width: 180,
                padding: '10px 12px', borderRadius: 10,
                background: isDark ? 'rgba(20,20,22,0.7)' : 'rgba(255,255,255,0.7)',
                backdropFilter: 'blur(20px) saturate(180%)',
                WebkitBackdropFilter: 'blur(20px) saturate(180%)',
                boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.1)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.08)',
                fontSize: 11, lineHeight: 1.4, color: 'var(--ink-2)',
              }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: '#D58E90', marginBottom: 4, letterSpacing: 0.1 }}>● UNIFIED ROW</div>
                One grammar — icon, label, count, chevron.
              </div>
              <div style={{
                position: 'absolute', bottom: 60, left: 30, width: 170,
                padding: '10px 12px', borderRadius: 10,
                background: isDark ? 'rgba(20,20,22,0.7)' : 'rgba(255,255,255,0.7)',
                backdropFilter: 'blur(20px) saturate(180%)',
                WebkitBackdropFilter: 'blur(20px) saturate(180%)',
                boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.1)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.08)',
                fontSize: 11, lineHeight: 1.4, color: 'var(--ink-2)',
              }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: '#E9C46A', marginBottom: 4, letterSpacing: 0.1 }}>● LIQUID GLASS</div>
                Dock floats above artwork, not over content.
              </div>
            </div>
          </div>

          <div className="feat-copy">
            <span className="eyebrow">01 · LIBRARY</span>
            <h3>The library that <em>gets out of the way.</em></h3>
            <p className="lede">
              No feeds, charts, or "made for you" rails. Lumyna shows the music you own —
              Songs, Albums, Artists, Playlists — in one unified rhythm, then steps back.
            </p>
            <div className="feat-specs">
              <div className="feat-spec">
                <div className="k">Local‑first</div>
                <div className="v">Reads your Music folder. Nothing uploaded.</div>
              </div>
              <div className="feat-spec">
                <div className="k">Formats</div>
                <div className="v">FLAC · ALAC · AAC · MP3 · WAV</div>
              </div>
              <div className="feat-spec">
                <div className="k">Row grammar</div>
                <div className="v">Index · art · title / artist · star.</div>
              </div>
              <div className="feat-spec">
                <div className="k">Search</div>
                <div className="v">Instant, fuzzy, offline.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LibrarySection });