// Blog index — news-wire feel
// One featured story top, dense list below

const BLOG_POSTS = [
  {
    slug: 'mcp-state-of-the-stack-q1',
    title: 'MCP, one year in: state of the stack',
    dek: 'A field report from the developers building agent infrastructure — what works, what is still hand-rolled, and where the protocol is headed next.',
    author: 'Marcus Cole', role: 'Founder',
    date: 'Apr 22, 2026', read: '11 min', tag: 'FIELD NOTES',
    featured: true,
  },
  {
    slug: 'edgar-8k-classification',
    title: 'How we classify 8-K events at filing-time, not query-time',
    dek: 'A look at the pre-classification pipeline behind Edgar Watch — why we run it on ingest and what that buys agent builders.',
    author: 'Priya Shah', role: 'Eng',
    date: 'Apr 15, 2026', read: '7 min', tag: 'ENGINEERING',
  },
  {
    slug: 'stock-act-disclosures',
    title: 'Reading Senator Trades: lessons from one quarter of disclosures',
    dek: 'What the STOCK Act filings tell us about congressional trading patterns — and the surprising structural problems with the data.',
    author: 'Nika Park', role: 'Research',
    date: 'Apr 09, 2026', read: '14 min', tag: 'RESEARCH',
  },
  {
    slug: 'federal-register-deadlines',
    title: 'Comment deadlines are public infrastructure. Why is no one indexing them?',
    dek: 'The Federal Register publishes 80+ proposed rules a week. Most have public comment windows. Almost no one tracks them programmatically.',
    author: 'Marcus Cole', role: 'Founder',
    date: 'Apr 02, 2026', read: '9 min', tag: 'POLICY',
  },
  {
    slug: 'price-of-everything',
    title: 'Why we priced the bundle at $299',
    dek: 'On packaging, à la carte vs all-you-can-eat, and the hidden cost of giving developers fifteen separate API keys.',
    author: 'Marcus Cole', role: 'Founder',
    date: 'Mar 25, 2026', read: '6 min', tag: 'BUSINESS',
  },
  {
    slug: 'sec-numbers-launch',
    title: 'SEC Numbers: ten years of XBRL, normalized',
    dek: 'Launching our second product. What it does, what it does not, and how we got from 220GB of raw filings to a clean tool surface.',
    author: 'Priya Shah', role: 'Eng',
    date: 'Mar 18, 2026', read: '8 min', tag: 'PRODUCT',
  },
  {
    slug: 'why-mcp-and-not-rest',
    title: 'Why MCP, not REST',
    dek: 'A long-form take on protocol-level fit for agent workflows. Both have a place; we think the agent-native default should not be HTTP+JSON.',
    author: 'Marcus Cole', role: 'Founder',
    date: 'Mar 11, 2026', read: '13 min', tag: 'PROTOCOL',
  },
  {
    slug: 'we-are-firmhound',
    title: 'We are Firmhound',
    dek: 'Hello. We make MCP-native intelligence for agent builders. Here is what we are building and why we think now is the time.',
    author: 'Marcus Cole', role: 'Founder',
    date: 'Mar 04, 2026', read: '5 min', tag: 'INTRO',
  },
];

const BlogIndex = () => {
  const featured = BLOG_POSTS.find(p => p.featured);
  const rest = BLOG_POSTS.filter(p => !p.featured);

  return (
    <PageShell active="Blog">
      {/* Masthead */}
      <SectionHead
        kicker="THE WIRE · DISPATCHES FROM THE FIRMHOUND TEAM"
        title="Notes from the"
        em="filings."
        right="Engineering posts, research, policy notes, and occasional commentary on MCP, agent infrastructure, and the public data we build on. Published when we have something to say."
      />

      {/* Featured */}
      <a href={`blog-${featured.slug}.html`} style={{ textDecoration: 'none', color: 'inherit' }}>
        <div style={{
          padding: '40px 32px', borderBottom: `1px solid ${FH.border}`,
          display: 'grid', gridTemplateColumns: '120px 1fr 220px', gap: 40, alignItems: 'start',
          cursor: 'pointer', transition: 'background 0.12s',
        }}
        onMouseEnter={e => e.currentTarget.style.background = FH.bg2}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <div>
            <div style={{ fontSize: 9, color: FH.accent, letterSpacing: '0.18em', marginBottom: 8 }}>● FEATURED</div>
            <div style={{ fontSize: 11, color: FH.ink3, letterSpacing: '0.12em' }}>{featured.tag}</div>
            <div style={{ fontSize: 11, color: FH.ink3, marginTop: 6 }}>{featured.date}</div>
          </div>
          <div>
            <div style={{
              fontFamily: '"Instrument Serif", Georgia, serif',
              fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.02em', color: FH.ink,
              marginBottom: 18,
            }}>
              {featured.title}
            </div>
            <div style={{ fontSize: 15, color: FH.ink2, lineHeight: 1.55, maxWidth: 620 }}>
              {featured.dek}
            </div>
            <div style={{ marginTop: 22, fontSize: 11, color: FH.ink3, letterSpacing: '0.06em' }}>
              By <span style={{ color: FH.ink }}>{featured.author}</span>, {featured.role} · {featured.read} read
            </div>
          </div>
          <div style={{ textAlign: 'right', color: FH.accent, fontSize: 12, paddingTop: 12, letterSpacing: '0.12em' }}>
            READ →
          </div>
        </div>
      </a>

      {/* Index */}
      <div style={{ padding: '32px 32px 56px' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          borderBottom: `1.5px solid ${FH.borderHi}`, paddingBottom: 10, marginBottom: 4,
        }}>
          <div style={{ fontSize: 12, color: FH.ink, letterSpacing: '0.14em', fontWeight: 600 }}>
            ◆ ARCHIVE
          </div>
          <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.1em' }}>
            {rest.length} POSTS
          </div>
        </div>
        {rest.map((post) => (
          <a key={post.slug} href={`blog-${post.slug}.html`} style={{ textDecoration: 'none', color: 'inherit' }}>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: '90px 110px minmax(280px, 2fr) minmax(280px, 2.3fr) 80px 60px',
                columnGap: 24,
                padding: '20px 0',
                borderBottom: `1px solid ${FH.border}`,
                alignItems: 'start',
                cursor: 'pointer',
                transition: 'background 0.12s, padding 0.12s',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = FH.bg2; e.currentTarget.style.paddingLeft = '8px'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; }}
            >
              <div style={{ color: FH.ink3, fontSize: 11 }}>{post.date}</div>
              <div style={{ color: FH.accent, fontSize: 10, letterSpacing: '0.14em' }}>{post.tag}</div>
              <div>
                <div style={{
                  fontFamily: '"Instrument Serif", Georgia, serif',
                  fontSize: 26, lineHeight: 1.1, letterSpacing: '-0.015em', color: FH.ink,
                  textWrap: 'balance',
                }}>
                  {post.title}
                </div>
              </div>
              <div style={{ fontSize: 13, color: FH.ink2, lineHeight: 1.5 }}>{post.dek}</div>
              <div style={{ fontSize: 11, color: FH.ink3 }}>
                <div style={{ color: FH.ink }}>{post.author}</div>
                <div style={{ marginTop: 2 }}>{post.role}</div>
              </div>
              <div style={{ fontSize: 11, color: FH.ink3, textAlign: 'right' }}>{post.read}</div>
            </div>
          </a>
        ))}
      </div>

      {/* Newsletter strip */}
      <div style={{
        padding: '40px 32px', borderTop: `1px solid ${FH.border}`,
        background: FH.bg2,
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center',
      }}>
        <div>
          <div style={{ fontSize: 11, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 12 }}>◆ NEWSLETTER</div>
          <div style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
            New posts in your inbox. <em style={{ color: FH.accent }}>No more than monthly.</em>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <input
            type="email" placeholder="you@firm.com"
            style={{
              flex: 1, background: FH.bg, border: `1px solid ${FH.border}`, color: FH.ink,
              padding: '14px 16px', fontFamily: '"JetBrains Mono", monospace', fontSize: 13, outline: 'none',
            }}
          />
          <span style={{
            padding: '14px 22px', background: FH.accent, color: FH.bg,
            fontSize: 12, letterSpacing: '0.1em', fontWeight: 600, cursor: 'pointer',
          }}>SUBSCRIBE ↗</span>
        </div>
      </div>
    </PageShell>
  );
};

window.BlogIndex = BlogIndex;
window.BLOG_POSTS = BLOG_POSTS;