// Feature mosaic — secondary features grid.

function MosaicSection({ theme }) {
  const isDark = theme === 'dark';
  return (
    <section className="feat-row" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow">06 · EVERYTHING ELSE</span>
          <h2>Quiet craft,<br/><em>everywhere</em> you look.</h2>
        </div>
        <div className="mosaic">
          {/* 1 — Lossless */}
          <div className="mcard" style={{ gridColumn: 'span 5' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 180, background: 'linear-gradient(135deg, #E9C46A, #F0B895, #D58E90)', opacity: 0.6 }}/>
            <div style={{ position: 'absolute', top: 28, left: 28, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 0.14, color: '#4D2628' }}>FLAC · 24/96 · BIT‑PERFECT</div>
            <h4>Lossless, by default.</h4>
            <p>No silent re‑encoding. What you imported is what you hear — every sample.</p>
          </div>
          {/* 2 — Focus */}
          <div className="mcard" style={{ gridColumn: 'span 4' }}>
            <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 70% 30%, ${isDark?'#2a1d24':'#F4DED0'} 0%, transparent 70%)` }}/>
            <h4>No algorithms.</h4>
            <p>No recommendations. No daily mix. The music you own, the order you want.</p>
          </div>
          {/* 3 — Gapless */}
          <div className="mcard" style={{ gridColumn: 'span 3' }}>
            <h4>True gapless.</h4>
            <p>Albums play as they were cut — every transition preserved.</p>
          </div>
          {/* 4 — Sync */}
          <div className="mcard" style={{ gridColumn: 'span 3' }}>
            <h4>iCloud sync.</h4>
            <p>Queue, playlists & starred songs follow you between devices.</p>
          </div>
          {/* 5 — Siri / Shortcuts */}
          <div className="mcard" style={{ gridColumn: 'span 3' }}>
            <h4>Shortcuts‑ready.</h4>
            <p>Kick off a playlist, adjust EQ or export a mix from anywhere in iOS.</p>
          </div>
          {/* 6 — Privacy */}
          <div className="mcard" style={{ gridColumn: 'span 3' }}>
            <h4>Zero telemetry.</h4>
            <p>We don't log what you play. Lumyna runs on device, full stop.</p>
          </div>
          {/* 7 — Visual */}
          <div className="mcard" style={{ gridColumn: 'span 3', background: 'linear-gradient(135deg, #D58E90, #C799B8)', color: '#fff' }}>
            <h4 style={{ color: '#fff' }}>Visualizer.</h4>
            <p style={{ color: 'rgba(255,255,255,0.8)' }}>An ambient waveform keyed to the track's palette — not a light show.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MosaicSection });