// Home — three variations: quiet, editorial, painterly
const { useState, useEffect, useMemo, useRef } = React;

function fmtDate(iso) {
  const [y, m, d] = iso.split("-");
  return `${y}.${m}.${d}`;
}

function HomeQuiet({ posts, onOpen, accent }) {
  return (
    <div className="home home--quiet">
      <header className="masthead">
        <div className="mast-name">brady zhang</div>
        <nav className="mast-nav">
          <a href="#" className="nav-link">写作</a>
          <a href="#" className="nav-link">关于</a>
          <a href="#" className="nav-link">↗ X</a>
          <a href="#" className="nav-link">↗ in</a>
        </nav>
      </header>

      <section className="hero hero--quiet">
        <h1 className="tagline">
          做出好的<br/>不像话的<br/>产品。
        </h1>
        <p className="bio">
          我是 brady。一个产品经理，<br/>
          这里写关于 AI 产品的思考、复盘和方法。
        </p>
      </section>

      <section className="post-list post-list--quiet">
        {posts.map((p, i) => (
          <a key={p.slug} className="post-row post-row--quiet" onClick={(e) => { e.preventDefault(); onOpen(p.slug); }} href="#">
            <span className="row-date">{fmtDate(p.date)}</span>
            <span className="row-title">{p.title}</span>
            <span className="row-arrow" aria-hidden>→</span>
          </a>
        ))}
      </section>

      <footer className="foot">
        <span>© 2026 brady</span>
        <span className="foot-spacer" />
        <span>写在杭州 · 上海之间的某趟高铁上</span>
      </footer>
    </div>
  );
}

function HomeEditorial({ posts, onOpen, accent }) {
  // group by year
  const byYear = useMemo(() => {
    const map = new Map();
    posts.forEach((p) => {
      if (!map.has(p.year)) map.set(p.year, []);
      map.get(p.year).push(p);
    });
    return [...map.entries()];
  }, [posts]);

  return (
    <div className="home home--editorial">
      <header className="masthead masthead--editorial">
        <div className="mast-left">
          <div className="mast-name">brady zhang</div>
          <div className="mast-meta">№ 014 — 写作存档</div>
        </div>
        <nav className="mast-nav">
          <a href="#" className="nav-link">写作</a>
          <a href="#" className="nav-link">关于</a>
          <a href="#" className="nav-link">↗ X</a>
          <a href="#" className="nav-link">↗ in</a>
        </nav>
      </header>

      <section className="hero hero--editorial">
        <div className="ed-grid">
          <div className="ed-eyebrow">PRODUCT · AI · NOTES</div>
          <h1 className="tagline tagline--editorial">
            做出好的，不像话的产品。
          </h1>
          <p className="bio bio--editorial">
            一个产品经理关于 AI 产品的思考、复盘和方法论。<br/>
            写得不勤，但每一篇都会改到自己满意。
          </p>
          <div className="ed-stats">
            <div><span className="stat-num">{posts.length}</span><span className="stat-lbl">篇</span></div>
            <div><span className="stat-num">{posts.reduce((s, p) => s + parseInt(p.readTime), 0)}</span><span className="stat-lbl">分钟</span></div>
            <div><span className="stat-num">{byYear.length}</span><span className="stat-lbl">年</span></div>
          </div>
        </div>
      </section>

      <section className="post-list post-list--editorial">
        {byYear.map(([year, ps]) => (
          <div key={year} className="year-block">
            <div className="year-head">
              <span className="year-num">{year}</span>
              <span className="year-rule" />
              <span className="year-count">{ps.length} 篇</span>
            </div>
            {ps.map((p, i) => (
              <a key={p.slug} className="post-row post-row--editorial" onClick={(e) => { e.preventDefault(); onOpen(p.slug); }} href="#">
                <span className="row-idx">{String(i + 1).padStart(2, "0")}</span>
                <div className="row-body">
                  <div className="row-title">{p.title}</div>
                  <div className="row-sub">{p.subtitle}</div>
                  <div className="row-meta">
                    <span className="row-cat">{p.category}</span>
                    <span className="row-dot">·</span>
                    <span>{fmtDate(p.date)}</span>
                    <span className="row-dot">·</span>
                    <span>{p.readTime}</span>
                  </div>
                </div>
                <span className="row-arrow" aria-hidden>→</span>
              </a>
            ))}
          </div>
        ))}
      </section>

      <footer className="foot foot--editorial">
        <div>© 2026 brady · 保留所有任性</div>
        <div>本站不追踪你 · 也没什么可追踪的</div>
      </footer>
    </div>
  );
}

function HomePainterly({ posts, onOpen, accent }) {
  return (
    <div className="home home--painterly">
      <header className="masthead masthead--painterly">
        <div className="mast-name">brady zhang</div>
        <nav className="mast-nav">
          <a href="#" className="nav-link">写作</a>
          <a href="#" className="nav-link">关于</a>
          <a href="#" className="nav-link">↗ X</a>
          <a href="#" className="nav-link">↗ in</a>
        </nav>
      </header>

      <section className="hero hero--painterly">
        <div className="paint-block" aria-hidden>
          <div className="paint-layer paint-1" />
          <div className="paint-layer paint-2" />
          <div className="paint-layer paint-3" />
        </div>
        <div className="paint-text">
          <div className="paint-eyebrow">brady zhang · 写在 2026</div>
          <h1 className="tagline tagline--painterly">
            做出<br/>好的不像话的<br/>产品。
          </h1>
          <p className="bio bio--painterly">
            我关于产品和技术的思考。
          </p>
        </div>
      </section>

      <section className="post-list post-list--painterly">
        <div className="list-head">
          <span>近期写作</span>
          <span className="list-count">{posts.length} 篇</span>
        </div>
        {posts.map((p) => (
          <a key={p.slug} className="post-row post-row--painterly" onClick={(e) => { e.preventDefault(); onOpen(p.slug); }} href="#">
            <div className="row-main">
              <div className="row-title">{p.title}</div>
              <div className="row-sub">{p.subtitle}</div>
            </div>
            <div className="row-side">
              <div>{fmtDate(p.date)}</div>
              <div className="row-cat">{p.category}</div>
            </div>
          </a>
        ))}
      </section>

      <footer className="foot foot--painterly">
        <span>© 2026 brady</span>
      </footer>
    </div>
  );
}

window.HomeQuiet = HomeQuiet;
window.HomeEditorial = HomeEditorial;
window.HomePainterly = HomePainterly;
window.fmtDate = fmtDate;