// Landing / marketing page

function Landing() {
  return (
    <div style={{padding:'40px 32px 80px', maxWidth: 1080, margin:'0 auto'}}>
      {/* Marquee */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:60}}>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <I.Logo style={{width:28, height:28}} />
          <span style={{fontSize:15, fontWeight:700, letterSpacing:'-0.02em'}}>Trove</span>
        </div>
        <nav style={{display:'flex', gap:18, alignItems:'center'}}>
          <a className="nav-link">Features</a>
          <a className="nav-link">Pricing</a>
          <a className="nav-link">Changelog</a>
          <button className="btn btn-ghost btn-sm">Sign in</button>
          <button className="btn btn-primary btn-sm">Get Trove</button>
        </nav>
      </div>

      {/* Hero */}
      <div style={{textAlign:'center', marginBottom:48}}>
        <div style={{display:'inline-flex', alignItems:'center', gap:6, padding:'4px 10px', background:'var(--blue-bg)', color:'var(--blue-text)', borderRadius:99, fontSize:11, fontWeight:600, marginBottom:24}}>
          <I.Sparkle className="icon icon-xs" /> New — Knowledge Map (beta)
        </div>
        <h1 style={{fontSize:64, fontWeight:700, letterSpacing:'-0.04em', lineHeight:1.05, margin:'0 0 20px', textWrap:'balance'}}>
          Bookmarks that
          <br />
          <span style={{color:'var(--blue)'}}>actually remember</span> things.
        </h1>
        <p style={{fontSize:17, color:'var(--text-3)', maxWidth:560, margin:'0 auto 32px', lineHeight:1.5, textWrap:'pretty'}}>
          Trove is a quiet, AI-native bookmark manager. Save anything from anywhere — it auto-summarizes, tags, and weaves your reading into a knowledge map you can actually use.
        </p>
        <div style={{display:'flex', gap:10, justifyContent:'center', alignItems:'center', marginBottom:14}}>
          <button className="btn btn-primary btn-lg">Get started — free <I.ArrowRight className="icon icon-sm" /></button>
          <button className="btn btn-ghost btn-lg"><I.Connect className="icon icon-sm" /> Connect to ChatGPT</button>
        </div>
        <div style={{fontSize:11, color:'var(--text-4)'}}>No credit card · Web · ChatGPT MCP · Chrome ext (soon)</div>
      </div>

      {/* Hero shot */}
      <div className="card" style={{padding:0, overflow:'hidden', boxShadow:'0 24px 60px -20px rgba(0,0,0,0.18), 0 8px 20px -6px rgba(0,0,0,0.08)', marginBottom:80}}>
        <div style={{height:32, background:'var(--surface-2)', borderBottom:'0.5px solid var(--border)', display:'flex', alignItems:'center', padding:'0 12px', gap:6}}>
          <span style={{width:10, height:10, borderRadius:'50%', background:'#FF5F57'}}></span>
          <span style={{width:10, height:10, borderRadius:'50%', background:'#FEBC2E'}}></span>
          <span style={{width:10, height:10, borderRadius:'50%', background:'#28C840'}}></span>
          <span style={{flex:1, textAlign:'center', fontSize:11, color:'var(--text-4)', fontWeight:500}} className="mono">trove.app/library</span>
        </div>
        <div style={{padding:32, background:'var(--bg)'}}>
          <div style={{display:'flex', gap:18, alignItems:'flex-start'}}>
            <div style={{flex:'0 0 200px'}}>
              <div style={{fontSize:10, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:12}}>Library</div>
              {[
                { name: "Catch Up", count: 12, active: true },
                { name: "Inbox", count: 8 },
                { name: "All Bookmarks", count: 172 },
                { name: "Knowledge Map" },
                { name: "Archive", count: 36 },
              ].map(item => (
                <div key={item.name} className={`sb-item ${item.active ? 'active' : ''}`} style={{height:28, padding:'0 10px', fontSize:12}}>
                  <span style={{flex:1}}>{item.name}</span>
                  {item.count && <span className="count">{item.count}</span>}
                </div>
              ))}
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:20, fontWeight:700, marginBottom:14, letterSpacing:'-0.025em'}}>Today's picks for you</div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {SAMPLE.bookmarks.slice(0, 3).map(b => (
                  <div key={b.id} className="card" style={{padding:12, display:'flex', gap:10, alignItems:'center'}}>
                    <div className="b-thumb" style={{background: b.thumbColor + '22', color: b.thumbColor, width:32, height:32, fontSize:10}}>{b.thumb}</div>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{fontSize:12, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{b.title}</div>
                      <div style={{fontSize:10, color:'var(--text-4)'}}>{b.domain}</div>
                    </div>
                    <span className="pill pill-unread">Unread</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Features */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18, marginBottom:80}}>
        {[
          { icon: I.Sparkle, title: "AI does the metadata", body: "Paste a URL, walk away. Trove fetches, summarizes, tags, and files it into the right collection. You read." },
          { icon: I.Map, title: "Your knowledge, mapped", body: "See every collection, tag, and link as a graph. Find the patterns in your own thinking — clusters you didn't know you had." },
          { icon: I.Connect, title: "ChatGPT-native", body: "Trove ships an MCP server. Save bookmarks from a chat, ask Claude about your library, never copy-paste again." },
        ].map((f, i) => {
          const Icon = f.icon;
          return (
            <div key={i} style={{padding:'4px 8px'}}>
              <div style={{width:36, height:36, borderRadius:10, background:'var(--blue-bg)', color:'var(--blue)', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:14}}>
                <Icon className="icon icon-lg" />
              </div>
              <div style={{fontSize:16, fontWeight:600, marginBottom:6, letterSpacing:'-0.02em'}}>{f.title}</div>
              <div style={{fontSize:13, color:'var(--text-3)', lineHeight:1.55}}>{f.body}</div>
            </div>
          );
        })}
      </div>

      {/* Stats / proof strip */}
      <div className="card" style={{padding:'28px 32px', display:'flex', justifyContent:'space-around', alignItems:'center', marginBottom:60}}>
        {[
          ['8.4k', 'Bookmarks saved daily'],
          ['172', 'Avg. library size'],
          ['98%', 'Accurate AI tagging'],
          ['<2s', 'Fetch + summarize'],
        ].map(([n, l], i) => (
          <React.Fragment key={i}>
            <div style={{textAlign:'center'}}>
              <div style={{fontSize:28, fontWeight:700, letterSpacing:'-0.03em', fontFeatureSettings:"'tnum'"}}>{n}</div>
              <div style={{fontSize:11, fontWeight:600, color:'var(--text-4)', textTransform:'uppercase', letterSpacing:'0.06em', marginTop:4}}>{l}</div>
            </div>
            {i < 3 && <div style={{width:1, height:32, background:'var(--border)'}}></div>}
          </React.Fragment>
        ))}
      </div>

      {/* Footer CTA */}
      <div style={{textAlign:'center'}}>
        <div style={{fontSize:32, fontWeight:700, letterSpacing:'-0.03em', marginBottom:14, textWrap:'balance'}}>
          Stop hoarding tabs.<br />Start a Trove.
        </div>
        <button className="btn btn-primary btn-lg">Get started — free <I.ArrowRight className="icon icon-sm" /></button>
      </div>

      <div style={{height:60}} />
    </div>
  );
}

window.Landing = Landing;