// Interface section — "beautiful user interface"
// Shows a closeup of Liquid Glass components, big typographic moment.

function InterfaceSection({ theme }) {
  const isDark = theme === 'dark';
  return (
    <section id="interface" className="feat-row" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow">02 · INTERFACE</span>
          <h2>An interface<br/>that feels like <em>glass & light.</em></h2>
          <p className="lede">
            Real depth — not flat cards. Vibrant gradient canvases diffuse through
            frosted glass surfaces. Monochrome controls stay readable, always.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 32 }}>
          {/* Left big specimen — glass over aurora */}
          <div style={{
            position: 'relative', borderRadius: 32, overflow: 'hidden',
            minHeight: 560,
            background: isDark ? '#0C0B0E' : '#F8F2EB',
            boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.06)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.05)',
          }}>
            {/* aurora */}
            <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
              <div style={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', top: -80, left: -60, filter: 'blur(60px)', background: 'radial-gradient(circle, #F6C75C 0%, transparent 60%)', opacity: isDark ? 0.5 : 0.9 }}/>
              <div style={{ position: 'absolute', width: 520, height: 520, borderRadius: '50%', bottom: -120, right: -100, filter: 'blur(70px)', background: 'radial-gradient(circle, #D58E90 0%, transparent 60%)', opacity: isDark ? 0.6 : 0.85 }}/>
              <div style={{ position: 'absolute', width: 360, height: 360, borderRadius: '50%', bottom: 100, left: 100, filter: 'blur(60px)', background: 'radial-gradient(circle, #C799B8 0%, transparent 60%)', opacity: isDark ? 0.4 : 0.75 }}/>
            </div>
            {/* Big floating glass pill — mini player close-up */}
            <div style={{
              position: 'absolute', left: 40, right: 40, bottom: 60,
              padding: '16px 18px', borderRadius: 22,
              background: isDark ? 'rgba(22,24,28,0.55)' : 'rgba(255,255,255,0.55)',
              backdropFilter: 'blur(28px) saturate(180%)',
              WebkitBackdropFilter: 'blur(28px) saturate(180%)',
              boxShadow: isDark
                ? 'inset 0 0.5px 0 rgba(255,255,255,0.12), inset 0 0 0 0.5px rgba(255,255,255,0.08), 0 30px 60px rgba(0,0,0,0.5)'
                : 'inset 0 0.5px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(20,23,27,0.08), 0 30px 60px rgba(20,23,27,0.15)',
              display: 'flex', alignItems: 'center', gap: 14,
              color: isDark ? '#EDEEF0' : '#14171B',
            }}>
              <MiniGradient seed={0} size={56} radius={12}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: -0.2 }}>Synthoria</div>
                <div style={{ fontSize: 13.5, opacity: 0.6, marginTop: 2 }}>Alexxon · Sensation</div>
                <div style={{ marginTop: 10, height: 3, borderRadius: 2, position: 'relative', background: isDark ? 'rgba(255,255,255,0.15)' : 'rgba(20,23,27,0.1)' }}>
                  <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '34%', background: isDark ? '#fff' : '#14171B', borderRadius: 2 }}/>
                </div>
              </div>
              <div style={{ width: 42, height: 42, borderRadius: 21, background: isDark ? '#fff' : '#14171B', color: isDark ? '#111' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="16" height="16" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14" rx="1.2"/><rect x="11" y="2" width="4" height="14" rx="1.2"/></svg>
              </div>
            </div>
            {/* small controls pill */}
            <div style={{
              position: 'absolute', top: 40, right: 40,
              padding: '10px 14px', borderRadius: 999,
              background: isDark ? 'rgba(22,24,28,0.55)' : 'rgba(255,255,255,0.55)',
              backdropFilter: 'blur(22px) saturate(180%)',
              WebkitBackdropFilter: 'blur(22px) 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)',
              display: 'flex', gap: 14, alignItems: 'center', color: isDark ? '#EDEEF0' : '#14171B',
            }}>
              <svg width="14" height="14" viewBox="0 0 18 18" fill="currentColor"><path d="M3 12H2a1 1 0 01-1-1V3a1 1 0 011-1h14a1 1 0 011 1v8a1 1 0 01-1 1h-1M6 16l3-3 3 3z" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
              <svg width="14" height="12" viewBox="0 0 17 14" fill="currentColor"><path d="M6 2h11M6 7h11M6 12h11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"/><circle cx="2" cy="2" r="1"/><circle cx="2" cy="7" r="1"/><circle cx="2" cy="12" r="1"/></svg>
              <svg width="14" height="14" viewBox="0 0 17 17" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="8.5" cy="8.5" r="2.4"/></svg>
            </div>
            <div style={{ position: 'absolute', top: 36, left: 40, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: isDark ? 'rgba(255,255,255,0.55)' : 'rgba(20,23,27,0.55)', letterSpacing: 0.12, textTransform: 'uppercase' }}>
              GLASS · 24px blur · 180% sat
            </div>
          </div>

          {/* Right column — typographic stack of detail cards */}
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr 1fr', gap: 20 }}>
            {[
              { k: 'TYPE', v: 'San Francisco at every size, plus Instrument Serif accents.', big: 'Aa' },
              { k: 'SURFACE', v: 'Warm off‑white paper · Deep graphite. Three blurs: light, default, strong.', big: '◐' },
              { k: 'COLOR', v: 'Rose, Apricot, Peach, Mauve. One hue at a time — never competing.', big: '●' },
            ].map((c, i) => (
              <div key={i} className="glass" style={{
                padding: 26, display: 'flex', alignItems: 'center', gap: 22,
              }}>
                <div style={{
                  width: 88, height: 88, borderRadius: 18,
                  background: i === 2
                    ? 'linear-gradient(135deg, #D58E90 0%, #E9C46A 50%, #C799B8 100%)'
                    : (isDark ? 'rgba(255,255,255,0.04)' : 'rgba(20,23,27,0.04)'),
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: i === 0 ? 44 : 38, fontFamily: i === 0 ? 'Instrument Serif, serif' : 'Inter',
                  fontStyle: i === 0 ? 'italic' : 'normal',
                  color: i === 2 ? '#fff' : 'var(--ink)',
                  boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.06)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.06)',
                }}>{c.big}</div>
                <div style={{ flex: 1 }}>
                  <div className="eyebrow" style={{ display: 'block', marginBottom: 6 }}>{c.k}</div>
                  <div style={{ fontSize: 16, letterSpacing: -0.01, color: 'var(--ink)', lineHeight: 1.45 }}>{c.v}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { InterfaceSection });