// Hero product mockup — a dense, real-feeling three-pane Backread workspace.
// Sidebar (All, Inbox, Actions, Starred, Done, Vault, Insights) · masonry feed · right rail.
// Uses CSS var() references so it flips with the page theme.

const CAT = {
  ai:        '#EC4899',
  product:   '#8B5CF6',
  investing: '#34D399',
  football:  '#60A5FA',
  research:  '#F97316',
  writing:   '#FBBF24',
};

function Avatar({ initials, grad, size = 28 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 999, flexShrink: 0,
      background: grad, display: 'grid', placeItems: 'center',
      fontSize: size * 0.36, fontWeight: 600, color: '#fff',
      fontFamily: "'Geist', sans-serif",
    }}>{initials}</div>
  );
}

function FeedCard({ cat, author, handle, initials, grad, time, body, kind, conf, media, note, starred }) {
  return (
    <article style={hm.card}>
      <div style={{ ...hm.catBar, background: CAT[cat] }} />
      <div style={hm.cardHead}>
        <Avatar initials={initials} grad={grad} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={hm.author}>{author} <span style={hm.handle}>{handle}</span></div>
          <div style={hm.meta}><span className="mono" style={{ color: CAT[cat] }}>#{cat}</span><span style={hm.dot2}>·</span>{time}</div>
        </div>
        {starred && <span style={{ color: 'var(--amber, #FBBF24)' }}><IcoStar size={14} /></span>}
      </div>
      <p style={hm.body}>{body}</p>
      {media && <div style={{ ...hm.media, background: media }} />}
      {note && (
        <div style={hm.note}>
          <span className="mono" style={hm.noteLabel}>COMMUNITY NOTE</span>
          <span style={hm.noteText}>{note}</span>
        </div>
      )}
      <div style={hm.cardFoot}>
        <span className="mono" style={hm.kind}>{kind}</span>
        <span style={{ flex: 1 }} />
        {conf != null && (
          <span style={hm.confChip}>
            <span style={{ ...hm.confDot, background: conf >= 0.8 ? 'var(--emerald)' : conf >= 0.6 ? 'var(--amber)' : 'var(--orange)' }} />
            <span className="mono">{conf.toFixed(2)}</span>
          </span>
        )}
      </div>
    </article>
  );
}

function HeroMock() {
  const nav = [
    ['All', <IcoAll size={15}/>, '1,284', false],
    ['Inbox', <IcoInbox size={15}/>, '7', true],
    ['Actions', <IcoBolt size={15}/>, '3/5', false],
    ['Starred', <IcoStar size={15}/>, '46', false],
    ['Done', <IcoCheck size={15}/>, '212', false],
    ['Vault', <IcoVault size={15}/>, '38', false],
    ['Insights', <IcoInsights size={15}/>, '', false],
  ];
  return (
    <div style={hm.window}>
      {/* Title bar */}
      <div style={hm.titlebar}>
        <div style={hm.lights}><i style={{ ...hm.light, background:'#ff5f56' }}/><i style={{ ...hm.light, background:'#ffbd2e' }}/><i style={{ ...hm.light, background:'#27c93f' }}/></div>
        <div style={hm.urlbar}><IcoLock size={10}/> <span style={{ opacity:.6 }}>backread.app</span><span style={{ opacity:.35 }}>/all</span></div>
        <div style={{ width: 52 }}/>
      </div>

      <div style={hm.body3}>
        {/* Sidebar */}
        <aside style={hm.side}>
          <div style={hm.brandRow}>
            <span style={hm.brandTile}>B</span>
            <span style={hm.brandName}>Backread</span>
          </div>
          <div style={hm.search}><IcoSearch size={12}/><span style={{ opacity:.5 }}>Search 1,284</span><span className="mono" style={hm.kbd}>⌘K</span></div>
          <div style={hm.navList}>
            {nav.map(([label, ico, count, active], i) => (
              <div key={i} style={{ ...hm.navItem, ...(active ? hm.navActive : (i===0 ? hm.navCurrent : {})) }}>
                <span style={hm.navLeft}>{ico}{label}</span>
                {count && <span style={{ ...hm.count, ...(active ? hm.countHot : {}) }}>{count}</span>}
              </div>
            ))}
          </div>
          <div style={hm.sideFoot}>
            <div className="mono" style={hm.sideLabel}>CATEGORIES</div>
            {[['ai',312],['product',204],['investing',151],['football',96]].map(([c,n],i)=>(
              <div key={i} style={hm.catRow}><span style={hm.catRowL}><i style={{ ...hm.sqDot, background: CAT[c] }}/>{c}</span><span style={hm.count}>{n}</span></div>
            ))}
          </div>
        </aside>

        {/* Feed */}
        <main style={hm.feedWrap}>
          <div style={hm.feedHead}>
            <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
              <h3 style={hm.feedTitle}>All bookmarks</h3>
              <span style={hm.feedSub}>1,284 saved · sorted by relevance</span>
            </div>
            <div style={hm.chips}>
              <span style={{ ...hm.chip, ...hm.chipOn }}>Relevance</span>
              <span style={hm.chip}>Recent</span>
              <span style={hm.chip}>has:video</span>
            </div>
          </div>
          <div style={hm.masonry}>
            <FeedCard cat="ai" author="Andrej K." handle="@karpathy" initials="AK" grad="linear-gradient(135deg,#EC4899,#8B5CF6)" time="2h"
              body="The most underrated skill in 2026 is writing a crisp eval. If you can't measure it, you can't improve it — and most teams still can't measure it."
              kind="Thread · 9 posts" conf={0.96} />
            <FeedCard cat="investing" author="Marina Vez" handle="@mvez" initials="MV" grad="linear-gradient(135deg,#34D399,#60A5FA)" time="5h"
              body="Seed valuations compressed 22% QoQ. The quiet story: bridge rounds are now 40% of all activity. Founders are extending, not raising up."
              kind="Post" conf={0.88} />
            <FeedCard cat="product" author="Sara Lin" handle="@saralin" initials="SL" grad="linear-gradient(135deg,#8B5CF6,#60A5FA)" time="1d"
              body="Watched 30 hours of onboarding sessions. We cut the second screen entirely. Activation +38%."
              kind="Link · figma.com" conf={0.74} media="linear-gradient(135deg,#241b35,#3a2140)" />
            <FeedCard cat="research" author="Dr. Patel" handle="@rpatel" initials="RP" grad="linear-gradient(135deg,#F97316,#EC4899)" time="2d"
              body="New benchmark dropped. Retrieval-only baseline still beats every fine-tune at long context. We keep relearning this."
              kind="Link · arxiv.org" conf={0.58} />
            <FeedCard cat="football" author="Fabrizio" handle="@fabrizio" initials="FR" grad="linear-gradient(135deg,#60A5FA,#34D399)" time="2d"
              body="Here we go — Tottenham close to agreement on the new midfielder. Medical scheduled."
              kind="Post" conf={0.91} starred />
            <FeedCard cat="writing" author="June Ito" handle="@juneito" initials="JI" grad="linear-gradient(135deg,#FBBF24,#F97316)" time="3d"
              body="A good sentence is a small machine. Every word does work or it's removed."
              kind="Post" conf={0.83} />
          </div>
        </main>

        {/* Right rail */}
        <aside style={hm.rail}>
          <div style={hm.railCard}>
            <div className="mono" style={hm.railLabel}>CATEGORY CONFIDENCE</div>
            <div style={hm.meterRow}><span style={hm.meterNum}>0.91</span><span style={hm.meterDelta}>▲ 0.06</span></div>
            <div style={hm.meterTrack}><div style={{ ...hm.meterFill, width: '91%' }} /></div>
            <div style={hm.meterFoot}>Learns from every triage</div>
          </div>

          <div style={hm.railCard}>
            <div style={hm.railTop}>
              <span className="mono" style={hm.railLabel}>ACTIONS</span>
              <span style={hm.railBadge}>3 / 5</span>
            </div>
            {[['Ship eval harness','ai'],['DM Marina re: bridge','investing'],['Read RAG paper','research']].map(([t,c],i)=>(
              <div key={i} style={hm.actionRow}><i style={{ ...hm.actionDot, background: CAT[c] }} />{t}</div>
            ))}
            <div style={hm.councilBox}>
              <div style={hm.councilHead}><IcoSparkle size={12}/> <span className="mono" style={{ letterSpacing:'.08em' }}>AI COUNCIL</span></div>
              <div style={hm.councilText}>Draft a 3-line eval spec from this thread and add it to your repo's <span className="mono" style={{ color:'var(--magenta)' }}>EVALS.md</span>.</div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

const hm = {
  window: { width:'100%', borderRadius:'var(--radius-xl)', overflow:'hidden', background:'var(--surface-1)', border:'0.5px solid var(--border-strong)', boxShadow:'var(--shadow-float)', fontFamily:"'Geist', sans-serif", color:'var(--text)' },
  titlebar: { height:38, flexShrink:0, background:'var(--surface-2)', borderBottom:'0.5px solid var(--border)', display:'flex', alignItems:'center', padding:'0 14px', gap:14 },
  lights: { display:'flex', gap:7, width:52 },
  light: { width:11, height:11, borderRadius:'50%', display:'inline-block' },
  urlbar: { flex:1, height:22, maxWidth:320, margin:'0 auto', background:'var(--bg)', border:'0.5px solid var(--border)', borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', gap:6, fontFamily:"'Geist Mono', monospace", fontSize:11, color:'var(--text-dim)' },

  body3: { display:'grid', gridTemplateColumns:'190px 1fr 220px', minHeight:520 },

  side: { borderRight:'0.5px solid var(--border)', padding:'14px 10px', display:'flex', flexDirection:'column', gap:12, background:'var(--surface-1)' },
  brandRow: { display:'flex', alignItems:'center', gap:8, padding:'2px 6px' },
  brandTile: { width:22, height:22, borderRadius:7, background:'var(--grad)', display:'grid', placeItems:'center', color:'#fff', fontWeight:700, fontSize:13, boxShadow:'0 4px 12px -3px rgba(236,72,153,0.5)' },
  brandName: { fontWeight:600, fontSize:14, letterSpacing:'-0.01em' },
  search: { height:30, background:'var(--surface-3)', border:'0.5px solid var(--border)', borderRadius:8, display:'flex', alignItems:'center', gap:7, padding:'0 9px', color:'var(--text-mute)', fontSize:12, whiteSpace:'nowrap' },
  kbd: { marginLeft:'auto', fontSize:10, color:'var(--text-mute)', border:'0.5px solid var(--border)', borderRadius:4, padding:'1px 5px' },
  navList: { display:'flex', flexDirection:'column', gap:1 },
  navItem: { display:'flex', alignItems:'center', justifyContent:'space-between', padding:'7px 9px', borderRadius:8, fontSize:13, color:'var(--text-dim)', cursor:'default' },
  navLeft: { display:'inline-flex', alignItems:'center', gap:10 },
  navCurrent: { background:'var(--surface-3)', color:'var(--text)' },
  navActive: { background:'linear-gradient(135deg, rgba(139,92,246,0.14), rgba(236,72,153,0.14))', color:'var(--text)', boxShadow:'inset 0 0 0 0.5px rgba(236,72,153,0.3)' },
  count: { fontSize:11, color:'var(--text-mute)', fontFamily:"'Geist Mono', monospace", fontVariantNumeric:'tabular-nums' },
  countHot: { color:'#fff', background:'var(--grad)', padding:'1px 7px', borderRadius:999, fontSize:10, fontWeight:600 },
  sideFoot: { marginTop:'auto', display:'flex', flexDirection:'column', gap:2, paddingTop:8 },
  sideLabel: { fontSize:9, letterSpacing:'.14em', color:'var(--text-mute)', padding:'4px 7px' },
  catRow: { display:'flex', alignItems:'center', justifyContent:'space-between', padding:'4px 7px', fontSize:12, color:'var(--text-dim)' },
  catRowL: { display:'inline-flex', alignItems:'center', gap:8, textTransform:'capitalize' },
  sqDot: { width:7, height:7, borderRadius:2, display:'inline-block', flexShrink:0 },

  feedWrap: { display:'flex', flexDirection:'column', minWidth:0, borderRight:'0.5px solid var(--border)' },
  feedHead: { display:'flex', justifyContent:'space-between', alignItems:'center', gap:12, padding:'14px 18px', borderBottom:'0.5px solid var(--border)', flexWrap:'wrap' },
  feedTitle: { fontSize:16, fontWeight:600, letterSpacing:'-0.01em' },
  feedSub: { fontSize:11.5, color:'var(--text-mute)' },
  chips: { display:'flex', gap:6 },
  chip: { fontSize:10.5, padding:'4px 10px', borderRadius:999, border:'0.5px solid var(--border)', color:'var(--text-dim)', background:'var(--surface-2)', fontFamily:"'Geist Mono', monospace" },
  chipOn: { color:'#fff', background:'var(--grad)', borderColor:'transparent' },

  masonry: { columns:'2', columnGap:12, padding:14, flex:1 },
  card: { breakInside:'avoid', marginBottom:12, position:'relative', background:'var(--surface-2)', border:'0.5px solid var(--border)', borderRadius:12, padding:'13px 13px 11px 16px', display:'flex', flexDirection:'column', gap:9, overflow:'hidden' },
  catBar: { position:'absolute', left:0, top:0, bottom:0, width:3 },
  cardHead: { display:'flex', alignItems:'center', gap:9 },
  author: { fontSize:12.5, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' },
  handle: { color:'var(--text-mute)', fontWeight:400 },
  meta: { fontSize:10.5, color:'var(--text-mute)', display:'flex', alignItems:'center', gap:5, marginTop:1, fontFamily:"'Geist Mono', monospace" },
  dot2: { opacity:.6 },
  body: { margin:0, fontSize:12.5, lineHeight:1.5, color:'var(--text)' },
  media: { height:84, borderRadius:8, border:'0.5px solid var(--border)' },
  note: { background:'var(--surface-3)', border:'0.5px solid var(--border)', borderRadius:8, padding:'8px 10px', display:'flex', flexDirection:'column', gap:3 },
  noteLabel: { fontSize:8.5, letterSpacing:'.12em', color:'var(--emerald)' },
  noteText: { fontSize:11, color:'var(--text-dim)', lineHeight:1.4 },
  cardFoot: { display:'flex', alignItems:'center', gap:8 },
  kind: { fontSize:10, color:'var(--text-mute)' },
  confChip: { display:'inline-flex', alignItems:'center', gap:5, fontSize:10, color:'var(--text-dim)', padding:'2px 7px', borderRadius:999, background:'var(--surface-3)', border:'0.5px solid var(--border)' },
  confDot: { width:6, height:6, borderRadius:'50%' },

  rail: { padding:14, display:'flex', flexDirection:'column', gap:12, background:'var(--surface-1)' },
  railCard: { background:'var(--surface-2)', border:'0.5px solid var(--border)', borderRadius:12, padding:14, display:'flex', flexDirection:'column', gap:9 },
  railLabel: { fontSize:9, letterSpacing:'.13em', color:'var(--text-mute)' },
  railTop: { display:'flex', justifyContent:'space-between', alignItems:'center' },
  railBadge: { fontSize:10, fontWeight:600, color:'#fff', background:'var(--grad)', padding:'2px 8px', borderRadius:999, fontFamily:"'Geist Mono', monospace", whiteSpace:'nowrap' },
  meterRow: { display:'flex', alignItems:'baseline', justifyContent:'space-between' },
  meterNum: { fontSize:30, fontWeight:700, letterSpacing:'-0.03em' },
  meterDelta: { fontSize:11, color:'var(--emerald)', fontFamily:"'Geist Mono', monospace" },
  meterTrack: { height:6, borderRadius:999, background:'var(--surface-3)', overflow:'hidden' },
  meterFill: { height:'100%', background:'var(--grad)', borderRadius:999 },
  meterFoot: { fontSize:10.5, color:'var(--text-mute)' },
  actionRow: { display:'flex', alignItems:'center', gap:9, fontSize:12, color:'var(--text-dim)', padding:'2px 0' },
  actionDot: { width:7, height:7, borderRadius:2, flexShrink:0 },
  councilBox: { marginTop:4, background:'linear-gradient(135deg, rgba(139,92,246,0.09), rgba(236,72,153,0.09))', border:'0.5px solid rgba(139,92,246,0.22)', borderRadius:10, padding:'10px 11px', display:'flex', flexDirection:'column', gap:6 },
  councilHead: { display:'flex', alignItems:'center', gap:6, fontSize:9.5, color:'var(--purple)', whiteSpace:'nowrap' },
  councilText: { fontSize:11, lineHeight:1.45, color:'var(--text-dim)' },
};

// tiny square dots in category rows
const _style = document.createElement('style');
_style.textContent = `
  ${''}
`;

window.HeroMock = HeroMock;
window.CAT = CAT;
window.Avatar = Avatar;