// blog.jsx — Blog index page (no posts yet)

function BlogApp() {
  const [t] = useTweaks(TWEAK_DEFAULTS);
  const p = PALETTES[t.palette] || PALETTES.ember;
  const displayFont = FONT_DISPLAY[t.displayFont] || FONT_DISPLAY.instrument;

  const cssVars = {
    "--bg": p.bg, "--surface": p.surface, "--ink": p.ink, "--mute": p.mute,
    "--line": p.line, "--accent": p.accent, "--accentInk": p.accentInk, "--soft": p.soft,
    "--display": displayFont, "--sans": FONT_SANS, "--mono": FONT_MONO
  };

  return (
    <div className="ft-root" style={cssVars}>
      <Nav logo={t.logo} base="/" />
      <BlogHero />
      <BlogEmpty />
      <BlogTease />
      <Foot logo={t.logo} />
    </div>);

}

function BlogHero() {
  return (
    <section className="ft-blog__hero" id="top">
      <span className="ft-eyebrow">Field notes</span>
      <h1 className="ft-blog__h">
        Signal<br />
        over <em>noise.</em>
      </h1>
      <p className="ft-blog__sub">
        Software tools, market trends, comp data, and the playbooks we wish we'd had sooner — written from inside live searches. <em>First issue drops soon.</em>
      </p>
    </section>);

}

function BlogEmpty() {
  return (
    <section className="ft-blog__empty">
      <div className="ft-blog__emptyInner">
        <div className="ft-blog__emptyMeta">
          <span className="ft-eyebrow">Issue 00 · In progress</span>
        </div>
        <div className="ft-blog__emptyBody">
          <h2 className="ft-blog__emptyH">No posts <em>yet.</em></h2>
          <form className="ft-blog__form" onSubmit={(e) => { e.preventDefault(); const f = e.currentTarget; const ok = f.querySelector('.ft-blog__formOk'); f.querySelector('.ft-blog__formRow').style.display = 'none'; ok.style.display = 'flex'; }}>
            <div className="ft-blog__formRow">
              <input type="email" required placeholder="you@company.com" className="ft-blog__formInput" aria-label="Email address" />
              <button type="submit" className="ft-btn ft-btn--primary">Get notified <span>→</span></button>
            </div>
            <div className="ft-blog__formOk" style={{ display: 'none' }}>
              <span className="ft-blog__formDot">✦</span> You're on the list. First issue lands soon.
            </div>
          </form>
        </div>
      </div>
    </section>);

}

function BlogTease() {
  const topics = [
    { n: "01", k: "Tools", h: "The 2026 AI sourcing stack.", b: "Every tool we tested this year, what survived our pipeline, and what we quietly dropped." },
    { n: "02", k: "Future", h: "What MCPs change about hiring.", b: "Model Context Protocols rewrite how recruiters work with AI. Here's what shifts — and what doesn't." },
    { n: "03", k: "Playbook", h: "Outbound before you have a brand.", b: "The early-stage outbound system: who to target, what to say, and how to get replies when nobody knows you yet." }
  ];
  return (
    <section className="ft-blog__tease">
      <div className="ft-blog__teaseHead">
        <span className="ft-eyebrow">What's coming</span>
        <h3 className="ft-blog__teaseH">A taste of what we're working on.</h3>
      </div>
      <div className="ft-blog__teaseGrid">
        {topics.map((t, i) =>
          <article key={i} className="ft-blog__teaseCard">
            <div className="ft-blog__teaseN">{t.n}</div>
            <div className="ft-blog__teaseK">{t.k}</div>
            <h4 className="ft-blog__teaseCardH">{t.h}</h4>
            <p className="ft-blog__teaseB">{t.b}</p>
            <div className="ft-blog__teaseStatus">Drafting →</div>
          </article>
        )}
      </div>
    </section>);

}

Object.assign(window, { BlogApp, BlogHero, BlogEmpty, BlogTease });