// Adaptive theming section — side-by-side light/dark showcase.

function ThemingSection({ theme }) {
  return (
    <section className="feat-row" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow">05 · ADAPTIVE THEMING</span>
          <h2>Light by day.<br/><em>Immersive</em> by night.</h2>
          <p className="lede">
            Lumyna follows your system — or stays where you want it. Every surface,
            blur and tint re‑weights for the ambient light.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'stretch' }}>
          <div style={themeCardStyle(false)}>
            <div style={{ position: 'absolute', top: 24, left: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 0.14, color: 'rgba(20,23,27,0.5)', textTransform: 'uppercase' }}>
              ● LIGHT · OFF‑WHITE WARM
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 60 }}>
              <MiniPhone theme="light" scale={0.82} miniPlayer={{ title: 'Synthoria', artist: 'Alexxon', seed: 0 }}>
                <HeroLibraryScreen isDark={false} />
              </MiniPhone>
            </div>
          </div>
          <div style={themeCardStyle(true)}>
            <div style={{ position: 'absolute', top: 24, left: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 0.14, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>
              ● DARK · GRAPHITE WARM
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 60 }}>
              <MiniPhone theme="dark" scale={0.82} miniPlayer={{ title: 'Synthoria', artist: 'Alexxon', seed: 0 }}>
                <HeroLibraryScreen isDark={true} />
              </MiniPhone>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function themeCardStyle(dark) {
  return {
    position: 'relative', minHeight: 680, padding: 24,
    borderRadius: 32, overflow: 'hidden',
    background: dark ? '#0C0B0E' : '#F8F2EB',
    boxShadow: dark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.08)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.06)',
  };
}

Object.assign(window, { ThemingSection });