/* ============================================================
   HOMEPAGE — "Choose your style"
   A live museum: every one of the 40+ style cards renders in its
   own signature look, grouped into 6 families. Featured styles
   get a rich live-preview card + Explore; the rest are fully
   styled "Coming soon".
   ============================================================ */
(function(){
  const { cx, Glyph, G, STYLES, STYLE_ORDER, FAMILIES, TOTAL_STYLES } = window;
  const Bn='inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';

  /* ---- FEATURED card: full live preview in its own CSS universe ---- */
  function FeaturedCard({ id, onOpen, delay }){
    const s = STYLES[id];
    const head = (extra='')=>cx(s.cls.display,s.cls.glow,extra);
    return (
      <div onClick={()=>onOpen(id)} role="button" tabIndex={0}
        onKeyDown={e=>{ if(e.key==='Enter'||e.key===' ')onOpen(id); }}
        className={cx(s.canvas,'gcard group relative text-left rounded-3xl overflow-hidden anim-fadeUp cursor-pointer')}
        style={{ animationDelay:`${delay}ms`, minHeight:360, border:'1px solid rgba(255,255,255,.1)', gridColumn:'span 1' }}>
        {id==='retro' && <div className="rf-sun"/>}
        {id==='motion' && <>
          <div className="mo-blob" style={{width:140,height:140,top:-30,right:-20}}/>
          <div className="mo-blob" style={{width:90,height:90,bottom:20,left:-20,animationDelay:'-4s'}}/>
        </>}
        <div className="relative p-6 flex flex-col h-full" style={{minHeight:360}}>
          <div className="flex items-center justify-between">
            <span className={cx(s.cls.chip,'px-2.5 py-1 text-[10px] font-bold tracking-wider')}>★ FEATURED</span>
          </div>
          <div className="flex-1 flex flex-col items-center justify-center py-4">
            <div className={cx(s.cls.surface,'w-full max-w-[230px] p-4')}>
              <div className="flex items-center justify-between">
                <span className={cx('text-xs',s.cls.sub)}>This month</span>
                <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold')}>+12%</span>
              </div>
              <div className={head('text-2xl font-extrabold mt-1')}>$48.2k</div>
              <div className="flex gap-2 mt-3">
                <button className={cx(Bn,s.cls.btnPrimary,'px-3 py-1.5 text-xs flex-1')}>Action</button>
                <button className={cx(Bn,s.cls.btn,'px-3 py-1.5 text-xs')}>···</button>
              </div>
            </div>
          </div>
          <div className="relative">
            <div className="flex items-end justify-between gap-3">
              <div>
                <div className={head('text-xl font-extrabold leading-tight')}>{s.name}</div>
                <div className={cx('text-[13px] mt-0.5',s.cls.sub)}>{s.tagline}</div>
              </div>
              <div className={cx('text-right text-xs shrink-0',s.cls.muted)}>{s.count}<br/>blocks</div>
            </div>
            <div className={cx('mt-3 flex items-center gap-2 text-sm font-semibold transition-transform group-hover:translate-x-1',s.cls.glow)} style={{color:s.cls.accent}}>
              Explore <Glyph d={G.arrow} size={16}/>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ---- GENERIC card: token-driven, renders in its own look ---- */
  function GenericCard({ st, delay, onOpen }){
    const t = st.t;
    const isBlob = typeof t.radius==='string' && t.radius.includes('/');
    const isPill = String(t.radius).trim()==='999px';
    const rSurf = isBlob ? '28px' : (isPill ? '24px' : t.radius); // blob->soft round, cap pill (no ovals)
    const rCtrl = isBlob ? '999px' : t.radius;           // soft pill for controls on blob styles
    const btnStyle = t.btn || { background:t.accent, color:t.onAccent, borderRadius:rCtrl, border:'none', fontWeight:700 };
    return (
      <div onClick={()=>onOpen&&onOpen(st.id)} role="button" tabIndex={0}
        onKeyDown={e=>{ if((e.key==='Enter'||e.key===' ')&&onOpen)onOpen(st.id); }}
        className="gcard relative rounded-3xl overflow-hidden anim-fadeUp cursor-pointer"
        style={{ background:t.bg, fontFamily:t.font, minHeight:360, color:t.text,
          border:'1px solid rgba(255,255,255,.07)', '--sig':t.accent, animationDelay:`${delay}ms` }}>
        <div className={cx('sig','sig-'+t.sig)}/>
        <div className="relative p-6 flex flex-col h-full" style={{minHeight:360}}>
          <div className="flex items-center justify-between">
            <span className="px-2.5 py-1 text-[10px] font-bold tracking-wider rounded-full inline-flex items-center gap-1.5"
              style={{ background:t.accent+'22', color:t.accent, border:'1px solid '+t.accent+'55' }}>
              <span className="w-1.5 h-1.5 rounded-full" style={{background:t.accent}}/> LIVE
            </span>
          </div>

          {/* in-style mini preview */}
          <div className="flex-1 flex items-center justify-center py-4">
            <div className="w-full max-w-[230px] p-4" style={{ background:t.surface, color:t.text,
              borderRadius:rSurf, border:t.border, boxShadow:t.shadow }}>
              <div className="flex items-center justify-between" style={{fontSize:11}}>
                <span style={{color:t.sub}}>This month</span>
                <span className="px-2 py-0.5 font-bold" style={{ background:t.accent, color:t.onAccent, borderRadius:'999px', fontSize:10 }}>+12%</span>
              </div>
              <div className="font-extrabold mt-1" style={{ fontSize:t.font.includes('Press Start')?16:26, lineHeight:1.1 }}>$48.2k</div>
              <div className="flex gap-2 mt-3">
                <button className="px-3 py-1.5 text-xs flex-1" style={btnStyle}>Action</button>
                <button className="px-3 py-1.5 text-xs" style={{ background:'transparent', color:t.text, border:t.border, borderRadius:rCtrl }}>···</button>
              </div>
            </div>
          </div>

          <div>
            <div className="flex items-end justify-between gap-3">
              <div className="min-w-0">
                <div className="font-extrabold leading-tight truncate" style={{ fontSize:t.font.includes('Press Start')?14:19 }}>{st.name}</div>
                <div className="mt-1" style={{ fontSize:13, color:t.sub, lineHeight:1.3 }}>{st.vibe}</div>
              </div>
              <div className="text-right shrink-0" style={{ fontSize:11, color:t.sub }}>{st.count}<br/>blocks</div>
            </div>
            <div className="mt-3 flex items-center gap-1.5 text-sm font-semibold transition-transform group-hover:translate-x-1" style={{color:t.accent}}>
              Explore <span>→</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function Home({ onOpen }){
    const [q,setQ]=React.useState('');
    let delayCounter = 0;
    return (
      <div className="min-h-screen">
        {/* global nav */}
        <nav className="sticky top-0 z-30 backdrop-blur-xl" style={{ background:'rgba(11,11,15,.72)', borderBottom:'1px solid var(--chrome-line)' }}>
          <div className="max-w-[1280px] mx-auto px-6 h-16 flex items-center gap-4">
            <div className="flex items-center gap-2.5">
              <div className="w-7 h-7 rounded-lg grid place-items-center" style={{background:'linear-gradient(135deg,#7a5cff,#2dd4ff)'}}>
                <span className="font-black text-[13px]">E</span></div>
              <span className="font-bold tracking-tight text-[15px]">Empire<span style={{color:'#7a8aff'}}>UI</span></span>
            </div>
            <div className="ml-4 hidden md:flex items-center gap-2 px-4 h-10 rounded-full flex-1 max-w-[360px]"
              style={{background:'#15151b',border:'1px solid var(--chrome-line)'}}>
              <span style={{color:'var(--chrome-sub)'}}><Glyph d={G.search} size={15}/></span>
              <input value={q} onChange={e=>setQ(e.target.value)} placeholder={`Search ${TOTAL_STYLES} styles…`}
                className="bg-transparent outline-none text-sm w-full" style={{color:'var(--chrome-text)'}}/>
              <kbd className="text-[10px] px-2 py-0.5 rounded-full" style={{background:'#23232c',color:'var(--chrome-sub)'}}>⌘K</kbd>
            </div>
            <div className="ml-auto flex items-center gap-1">
              <a href="/tools" className="text-sm px-3 py-2 rounded-lg hover:bg-white/5 hidden md:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>Tools</a>
              <a href="/templates" className="text-sm px-3 py-2 rounded-lg hover:bg-white/5 hidden lg:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>Templates</a>
              <a href="/blog" className="text-sm px-3 py-2 rounded-lg hover:bg-white/5 hidden lg:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>Blog</a>
              <a href="/mcp" className="text-sm px-3 py-2 rounded-lg hover:bg-white/5 hidden lg:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>MCP</a>
              <a href="/pricing" className="text-sm px-3 py-2 rounded-lg hover:bg-white/5 hidden sm:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>Pricing</a>
              <a href="/docs" className="text-sm px-3 py-2 rounded-lg hover:bg-white/5 hidden sm:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>Docs</a>
              <a href="/login" className="text-sm px-3 py-2 rounded-lg hidden sm:inline-block" style={{color:'var(--chrome-sub)',textDecoration:'none'}}>Sign in</a>
              <a href="/pricing" className="text-sm px-4 py-2 rounded-lg font-semibold ml-1" style={{background:'#fff',color:'#111',textDecoration:'none'}}>Get Pro</a>
            </div>
          </div>
        </nav>

        {/* hero */}
        <header className="max-w-[1280px] mx-auto px-6 pt-20 pb-10 text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs mb-6 anim-fadeUp"
            style={{background:'#15151b',border:'1px solid var(--chrome-line)',color:'var(--chrome-sub)'}}>
            <span className="w-1.5 h-1.5 rounded-full" style={{background:'#36d399'}}/> A component library organized by <b style={{color:'var(--chrome-text)'}}>style</b>, not category
          </div>
          <h1 className="anim-fadeUp text-[clamp(40px,7vw,82px)] font-black leading-[0.95] tracking-tight" style={{animationDelay:'60ms'}}>
            Don't pick a component.<br/>
            <span style={{background:'linear-gradient(120deg,#a78bfa,#2dd4ff,#ff6fd8)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>Pick a universe.</span>
          </h1>
          <p className="anim-fadeUp max-w-[580px] mx-auto mt-6 text-[17px] leading-relaxed" style={{animationDelay:'120ms',color:'var(--chrome-sub)'}}>
            Empire UI is split by visual style — {TOTAL_STYLES} of them, across 6 families. Every block inside a style already agrees with the others, so whatever you ship looks like one product, not a pile of parts.
          </p>
          <div className="anim-fadeUp flex items-center justify-center gap-8 mt-8" style={{animationDelay:'160ms'}}>
            {[[TOTAL_STYLES,'styles'],['6','families'],['381','blocks'],[TOTAL_STYLES,'live now']].map(([n,l])=>(
              <div key={l} className="text-center">
                <div className="text-2xl font-black">{n}</div>
                <div className="text-xs uppercase tracking-wider" style={{color:'var(--chrome-sub)'}}>{l}</div>
              </div>))}
          </div>
        </header>

        {/* families — every style live, featured ones sit in their own family */}
        <section className="max-w-[1280px] mx-auto px-6 pb-24">
          {FAMILIES.map((fam,fi)=>(
            <div key={fam.name} className="mt-12 first:mt-2">
              <div className="flex items-baseline gap-3 mb-5 pb-3" style={{borderBottom:'1px solid var(--chrome-line)'}}>
                <span className="text-xs font-mono px-2 py-1 rounded-md" style={{background:'#16161d',color:'var(--chrome-sub)'}}>{String.fromCharCode(65+fi)}</span>
                <h2 className="text-lg font-bold tracking-tight">{fam.name}</h2>
                <span className="text-sm hidden sm:inline" style={{color:'var(--chrome-sub)'}}>{fam.blurb}</span>
                <span className="ml-auto text-sm shrink-0" style={{color:'var(--chrome-sub)'}}>{fam.items.length}</span>
              </div>
              <div className="grid gap-5" style={{gridTemplateColumns:'repeat(auto-fill,minmax(252px,1fr))'}}>
                {fam.items.map(st=>{
                  const d = (delayCounter++ % 8) * 50;
                  return st.featured
                    ? <FeaturedCard key={st.id} id={st.id} onOpen={onOpen} delay={d}/>
                    : <GenericCard key={st.name} st={st} delay={d} onOpen={onOpen}/>;
                })}
              </div>
            </div>
          ))}

          {/* request CTA */}
          <div className="mt-12 rounded-3xl p-6 flex items-center gap-4 flex-wrap" style={{background:'#121218',border:'1px dashed var(--chrome-line)'}}>
            <div className="w-12 h-12 rounded-2xl grid place-items-center" style={{background:'#1b1b22',color:'var(--chrome-sub)'}}><Glyph d={G.plus} size={22}/></div>
            <div className="flex-1 min-w-[200px]">
              <div className="font-bold">Don't see your universe?</div>
              <div className="text-sm" style={{color:'var(--chrome-sub)'}}>Every style here is one token object. New universes ship weekly — vote for what's next.</div>
            </div>
            <button className="px-4 py-2.5 rounded-xl text-sm font-semibold" style={{background:'#1b1b22',color:'var(--chrome-text)',border:'1px solid var(--chrome-line)'}}>Request a style</button>
          </div>
        </section>
      </div>
    );
  }
  window.Home = Home;
})();