/* ============================================================
   components-articles.jsx — the dispatch archive (James Clear / Sahil Bloom style)
   Type-led, light editorial surface. Featured latest + lane filter + full list.
   Each entry links to a static reading page in articles/<slug>.html
   ============================================================ */
const ARTICLES = [
  { slug:"what-even-is-a-creative-process", ed:"04", lane:"Craft", date:"July 19, 2025", read:"3 min",
    cover:"assets/generated/cover-creative-process.png",
    title:"What even is a creative process",
    dek:"Seedhe Maut on the speakers, a silent Pinterest scroll, dishwashing therapy, ten AI tools used only for rejection — and then, twenty minutes before the deadline, the whole thing in one go. Part logic, part chaos, part divine last-minute panic." },
  { slug:"moved-out-kind-of", ed:"03", lane:"Life", date:"July 19, 2025", read:"3 min",
    cover:"assets/generated/cover-moved-out.png",
    title:"Moved out. Kind of.",
    dek:"On leaving and not-quite-leaving — the pind you carry when nobody's looking, and what changes when the address does but the wiring doesn't." },
  { slug:"12-questions", ed:"02", lane:"Life", date:"June 22, 2025", read:"7 min",
    cover:"assets/generated/cover-12-questions.png",
    title:"The 12 questions that keep That Hyperactive Sardar awake at night",
    dek:"Twelve open tabs in my head — questions you can't Google. Building an AI that gets me without reintroducing myself, preserving the soul of Indian families, automating workflows without automating the joy out of creation. I don't have answers. I have a build list." },
  { slug:"not-everything-needs-automating", ed:"01", lane:"Craft", date:"June 22, 2025", read:"4 min",
    cover:"assets/generated/cover-automation-felt.png",
    title:"Not everything needs to be automated — some things need to be felt",
    dek:"The multiplier is real, but the moat is the part that stays human. A note on where automation ends and taste begins." },
];

const LANES = ["All", "Craft", "AI", "Life"];

function SubscribeBar() {
  const { email, setEmail, done, err, submit } = useEmailCapture("ths_newsletter");
  if (done) {
    return <div className="arch-subok">On the list. <b>Next issue lands soon.</b></div>;
  }
  return (
    <form className="arch-sub" onSubmit={submit} noValidate>
      <input type="email" value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="you@company.com" aria-label="Email address" aria-invalid={!!err} />
      <button className="btn btn-oxblood" type="submit">Subscribe <Arrow/></button>
    </form>
  );
}

function ArticleRow({ a }) {
  return (
    <a className="arow" href={"articles/" + a.slug + ".html"}>
      <div className="arow-meta">
        <span className="arow-ed">No. {a.ed}</span>
        <span className="arow-lane">{a.lane}</span>
        <span className="arow-date">{a.date}</span>
      </div>
      <div className="arow-main">
        <h3 className="arow-title">{a.title}</h3>
        <p className="arow-dek">{a.dek}</p>
        <span className="arow-read">{a.read} read <Arrow/></span>
      </div>
      <img className="arow-cover" src={a.cover} alt="" loading="lazy" />
    </a>
  );
}

function ArticleArchive() {
  const [lane, setLane] = React.useState("All");
  const featured = ARTICLES[0];
  const rest = ARTICLES.slice(1).filter((a) => lane === "All" || a.lane === lane);
  const showFeatured = lane === "All" || featured.lane === lane;

  return (
    <main className="arch">
      <div className="page-top arch-top"></div>
      <section className="arch-hero">
        <div className="wrap">
          <div className="eyebrow">Hyperthoughts · archive</div>
          <h1>Field notes from <em>the work.</em></h1>
          <p className="arch-lede">Writing at the edge of work and culture. What shipped, what broke, what wouldn't leave me alone. Roughly weekly.</p>
          <SubscribeBar />
          <p className="arch-note">Free. {ARTICLES.length} issues out, more on the way.</p>
        </div>
      </section>

      {showFeatured && (
        <section className="arch-feat">
          <div className="wrap">
            <a className="feat" href={"articles/" + featured.slug + ".html"}>
              <img className="feat-cover" src={featured.cover} alt="" loading="eager" />
              <div className="feat-copy">
                <div className="feat-tag">■ Hyperthoughts No. {featured.ed} · Latest · {featured.lane}</div>
                <h2 className="feat-title">{featured.title}</h2>
                <p className="feat-dek">{featured.dek}</p>
                <div className="feat-foot"><span>{featured.date}</span><span className="feat-read">{featured.read} read <Arrow/></span></div>
              </div>
            </a>
          </div>
        </section>
      )}

      <section className="arch-list-sec">
        <div className="wrap">
          <div className="arch-bar">
            <div className="eyebrow">All issues</div>
            <div className="arch-filter">
              {LANES.map((l) => (
                <button key={l} className={"chip-f" + (lane === l ? " on" : "")} onClick={()=>setLane(l)}>{l}</button>
              ))}
            </div>
          </div>
          <div className="arch-list">
            {rest.length ? rest.map((a) => <ArticleRow key={a.slug} a={a} />)
              : <p className="arch-empty">Nothing in this lane yet. <button className="linkbtn" onClick={()=>setLane("All")}>See all</button></p>}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ArticleArchive, ARTICLES, ARTICLE_LANES: LANES });