// Features — top tab bar, screenshot on a rich gradient backdrop.

function Features() {
  const [tab, setTab] = React.useState('api');
  const tabs = [
    { id:'api',   n:'01', t:'API Keys',     d:'Auto-detects vendors for OpenAI, Anthropic, GitHub, Stripe, Gemini, HuggingFace, and ElevenLabs — with live HTTP validity tests.', img:'assets/screen-api.png',   color:'#6366f1' },
    { id:'seed',  n:'02', t:'Seed Phrases', d:'Full BIP-39 validation: 12–24 words, official 2048-word English list, checksum integrity, autocomplete.',         img:'assets/screen-seeds.png', color:'#8b5cf6' },
    { id:'notes', n:'03', t:'Secure Notes', d:'Encrypted like everything else — AES-256-GCM, stored as an opaque blob. No plaintext ever touches disk.',          img:'assets/screen-notes.png', color:'#10b981' },
  ];
  const active = tabs.find(t => t.id === tab);

  return (
    <section id="features" style={{ padding:'140px 40px 120px', position:'relative' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <Reveal>
          <div style={{ fontSize:12, color:ACCENT, fontFamily:"'Geist Mono', monospace", letterSpacing:'.15em', marginBottom:16 }}>
            01 — WHAT IT KEEPS
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontSize:'clamp(32px, 5.5vw, 80px)', fontWeight:500, letterSpacing:'-.035em', margin:'0 0 28px', lineHeight:1 }}>
            Three kinds of secret.<br/>
            <span style={{ color:'rgba(15,14,20,.35)' }}>One encrypted home.</span>
          </h2>
        </Reveal>

        {/* TOP TAB BAR — sits above the stage, visually distinct from app chrome */}
        <Reveal delay={120}>
          <div style={{ marginTop:56 }}>
            <div style={{
              display:'flex', alignItems:'stretch',
              gap:8,
              flexWrap:'wrap',
            }}>
              {tabs.map((f) => {
                const isActive = tab === f.id;
                return (
                  <button key={f.id} onClick={()=>setTab(f.id)} style={{
                    all:'unset', cursor:'pointer', boxSizing:'border-box',
                    flex:'1 1 0',
                    minWidth:0,
                    padding:'18px 22px',
                    borderRadius:21,
                    background: isActive ? INK : 'transparent',
                    color: isActive ? '#f5f3ed' : INK,
                    border: isActive ? `1px solid ${INK}` : '1px solid rgba(15,14,20,.14)',
                    transition:'background .25s, color .25s, border-color .25s',
                    display:'flex', flexDirection:'column', gap:6,
                    position:'relative',
                  }}>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <span style={{
                        fontSize:10.5, fontFamily:"'Geist Mono', monospace",
                        letterSpacing:'.18em',
                        color: isActive ? 'rgba(245,243,237,.55)' : 'rgba(15,14,20,.42)',
                      }}>{f.n}</span>
                      <span style={{
                        width:7, height:7, borderRadius:'50%',
                        background: f.color,
                        boxShadow: isActive ? `0 0 0 3px ${f.color}44` : 'none',
                        transition:'box-shadow .3s',
                      }}/>
                      <span style={{
                        marginLeft:'auto',
                        fontSize:10.5, fontFamily:"'Geist Mono', monospace",
                        letterSpacing:'.14em',
                        color: isActive ? 'rgba(245,243,237,.6)' : 'rgba(15,14,20,.35)',
                      }}>{isActive ? 'VIEWING' : 'VIEW →'}</span>
                    </div>
                    <div style={{
                      fontSize:20, fontWeight:500, letterSpacing:'-.015em',
                    }}>{f.t}</div>
                  </button>
                );
              })}
            </div>
          </div>
        </Reveal>

        {/* STAGE — richly-colored wallpaper backdrop; screenshot floats on top */}
        <Reveal delay={180}>
          <div style={{
            position:'relative',
            borderRadius:56,
            overflow:'hidden',
            marginTop:18,
            boxShadow:'0 40px 80px -40px rgba(15,14,20,.35), 0 0 0 1px rgba(15,14,20,.08)',
            minHeight:560,
          }}>
            {/* per-tab mesh backdrop (cross-fades) */}
            {/* per-tab mesh backdrop (cross-fades) */}
            {tabs.map(f => (
              <div key={f.id} style={{
                position:'absolute', inset:0,
                opacity: tab===f.id ? 1 : 0,
                transition:'opacity .7s ease',
                pointerEvents:'none',
                borderRadius:56,
                overflow:'hidden',
              }}>
                <MeshBackdrop color={f.color} variant={f.id}/>
              </div>
            ))}

            {/* subtle noise texture over the whole stage */}
            <div style={{
              position:'absolute', inset:0, pointerEvents:'none',
              opacity:.5, mixBlendMode:'overlay',
              backgroundImage:`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`,
            }}/>

            {/* top strip: description, centered and larger, single-line */}
            <div style={{
              position:'relative',
              padding:'28px 20px 26px',
              display:'flex', alignItems:'center', justifyContent:'center',
              background:'rgba(255,255,255,.12)',
              backdropFilter:'blur(12px)',
              WebkitBackdropFilter:'blur(12px)',
              borderBottom:'1px solid rgba(255,255,255,.18)',
            }}>
              <div key={tab} style={{ animation:'fadeDesc .5s ease', width:'100%' }}>
                <style>{`@keyframes fadeDesc{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`}</style>
                <div style={{
                  fontSize:19, fontWeight:400, letterSpacing:'-.01em',
                  color:'rgba(255,255,255,.96)', lineHeight:1.45,
                  margin:'0 auto', textAlign:'center',
                  maxWidth:'90%',
                  textShadow:'0 1px 2px rgba(0,0,0,.25)',
                }}>
                  {active.d}
                </div>
              </div>
            </div>

            {/* screenshot, floating, with strong drop shadow against the mesh */}
            <div style={{
              position:'relative',
              padding:'56px 56px 72px',
            }}>
              <div style={{
                position:'relative', maxWidth:940, margin:'0 auto',
                aspectRatio: '3194 / 2118',
              }}>
                {tabs.map(f => (
                  <img key={f.id} src={f.img} alt={f.t} style={{
                    position:'absolute', inset:0,
                    width:'100%', height:'100%',
                    transform: tab===f.id ? 'translateY(0) scale(1)' : 'translateY(20px) scale(.97)',
                    opacity: tab===f.id ? 1 : 0,
                    transition:'opacity .55s, transform .55s cubic-bezier(.2,.7,.3,1)',
                    filter:'drop-shadow(0 40px 60px rgba(15,14,20,.45)) drop-shadow(0 16px 24px rgba(15,14,20,.25))',
                    pointerEvents: tab===f.id ? 'auto' : 'none',
                    borderRadius:24,
                  }}/>
                ))}
              </div>
            </div>
          </div>
        </Reveal>

        {/* mini details row */}
        <div className="features-minis" style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0,
          marginTop:80, paddingTop:40, borderTop:`1px solid ${BONE_FAINT}`,
        }}>
          {[
            ['Auto-detect vendor', 'Paste sk-ant-, ghp_, AIza, hf_ — tags itself and tests live.'],
            ['FTS5 full-text search', 'SQLite full-text search across names and metadata, instantly.'],
            ['Clipboard auto-clear',  'Copied values wipe after a configurable timeout — 30s by default.'],
            ['One-file backup',     'Export an encrypted .cypherkeep file. Drop it anywhere.'],
          ].map(([h,d],i)=>(
            <div key={i} style={{
              padding:'0 24px',
              borderLeft: i>0 ? `1px solid ${BONE_FAINT}` : 'none',
            }}>
              <div style={{ fontSize:19, fontWeight:500, letterSpacing:'-.015em', marginBottom:10 }}>{h}</div>
              <div style={{ fontSize:15, color:BONE_DIM, lineHeight:1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features });

function Pill({ children }) {
  return (
    <span style={{
      fontSize:10.5, fontFamily:"'Geist Mono', monospace",
      letterSpacing:'.14em', padding:'6px 10px', borderRadius:999,
      background:'rgba(255,255,255,.16)',
      border:'1px solid rgba(255,255,255,.28)',
      color:'rgba(255,255,255,.92)',
      whiteSpace:'nowrap',
      backdropFilter:'blur(8px)',
      WebkitBackdropFilter:'blur(8px)',
      textShadow:'0 1px 2px rgba(0,0,0,.2)',
    }}>{children}</span>
  );
}

// Rich, abstract gradient-mesh backdrop per tab. Original composition —
// layered radial gradients + a conic sweep for depth.
function MeshBackdrop({ color, variant }) {
  // Per-variant mesh recipe (hues picked to harmonize with the tab's accent color).
  const recipes = {
    api: {
      base: 'linear-gradient(135deg, #1a1b4b 0%, #312e81 50%, #4338ca 100%)',
      blobs: [
        { x:'12%', y:'18%', size:460, c:'#818cf8', o:.55 },
        { x:'82%', y:'12%', size:380, c:'#a855f7', o:.5 },
        { x:'70%', y:'88%', size:520, c:'#3b0764', o:.7 },
        { x:'8%',  y:'82%', size:340, c:'#2563eb', o:.45 },
      ],
    },
    seed: {
      base: 'linear-gradient(135deg, #3b0764 0%, #581c87 45%, #7c3aed 100%)',
      blobs: [
        { x:'18%', y:'14%', size:420, c:'#c084fc', o:.5 },
        { x:'86%', y:'22%', size:360, c:'#f0abfc', o:.4 },
        { x:'72%', y:'84%', size:500, c:'#4c1d95', o:.7 },
        { x:'10%', y:'78%', size:380, c:'#ec4899', o:.4 },
      ],
    },
    notes: {
      base: 'linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%)',
      blobs: [
        { x:'14%', y:'16%', size:440, c:'#6ee7b7', o:.45 },
        { x:'84%', y:'18%', size:380, c:'#34d399', o:.5 },
        { x:'76%', y:'86%', size:500, c:'#022c22', o:.65 },
        { x:'10%', y:'80%', size:360, c:'#0ea5e9', o:.35 },
      ],
    },
  };
  const r = recipes[variant] || recipes.api;
  return (
    <div style={{ position:'absolute', inset:0, background:r.base, overflow:'hidden' }}>
      {/* conic sweep for subtle light play */}
      <div style={{
        position:'absolute', inset:'-20%',
        background:`conic-gradient(from 210deg at 60% 40%, ${color}22, transparent 40%, ${color}11 70%, transparent 100%)`,
        filter:'blur(40px)',
      }}/>
      {/* gradient blobs */}
      {r.blobs.map((b,i)=>(
        <div key={i} style={{
          position:'absolute',
          left:b.x, top:b.y,
          width:b.size, height:b.size,
          transform:'translate(-50%,-50%)',
          borderRadius:'50%',
          background:`radial-gradient(closest-side, ${b.c}, transparent 70%)`,
          opacity:b.o,
          filter:'blur(60px)',
          pointerEvents:'none',
        }}/>
      ))}
      {/* vignette */}
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.35) 100%)',
        pointerEvents:'none',
      }}/>
    </div>
  );
}