function Hero({ onNav }) {
  return (
    <section className="pf-hero" data-screen-label="home-hero">
      <div className="pf-hero-stamp">ai automation engineer · lagos</div>
      <h1 className="pf-hero-title">
        christopher<br/>igweze<span className="pf-hero-dot">.</span>
      </h1>
      <p className="pf-hero-lede">
        AI automation engineer. I build systems that run in production,
        not demos. Most of the work lives in the connective tissue between
        tools that don&rsquo;t talk to each other yet.
      </p>
      <div className="pf-hero-cta">
        <a href="#/work" className="pf-btn-link" onClick={(e) => { e.preventDefault(); onNav('work'); }}>see the work</a>
        <span className="pf-hero-sep">/</span>
        <a href="#/experience" className="pf-btn-link" onClick={(e) => { e.preventDefault(); onNav('experience'); }}>the experience</a>
        <span className="pf-hero-sep">/</span>
        <a href="#/writing" className="pf-btn-link" onClick={(e) => { e.preventDefault(); onNav('writing'); }}>read the writing</a>
      </div>
      <div className="pf-hero-cv">
        or <a href="/christopher-igweze-cv.pdf" target="_blank" rel="noopener">download the cv (pdf) ↓</a>
      </div>
    </section>
  );
}

function CurrentlyBuilding() {
  const items = [
    {
      name: 'Vibe2Prod',
      desc: 'A local CLI that runs quality and security scans on AI-written code before it leaves your laptop. Powered by the Forge engine: 12 agents, 47 deterministic checks, three LLM passes.',
      status: 'in progress',
    },
    {
      name: 'Voice agent platform',
      desc: 'Large-scale autonomous voice agent system deployed for a government parastatal. Built the stack, tuned the conversation flows, and maintain it in production today.',
      status: 'live, maintaining',
    },
  ];
  return (
    <section className="pf-currently" data-screen-label="home-currently">
      <header className="pf-section-head">
        <span className="pf-anchor">1. currently building</span>
        <span className="pf-section-meta">two systems · apr 2026</span>
      </header>
      <div className="pf-currently-label">now</div>
      <ul className="pf-currently-list">
        {items.map((it) => (
          <li key={it.name}>
            <span>
              <span className="cb-name">{it.name}</span>
              <span className="cb-desc">{it.desc}</span>
            </span>
            <span className="cb-status">{it.status}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function SelectedWork({ onNav }) {
  const pieces = [
    {
      num: '01',
      name: 'Real estate — WhatsApp ↔ CMS ecosystem',
      kind: 'client work · at Multiskills IT',
      body: 'A full end-to-end ecosystem for a real estate client. WhatsApp integrated into a custom CMS, listings syncing live to the public website, and the sales team working from a single source of truth instead of three spreadsheets and a groupchat. Full writeup on /work.',
    },
    {
      num: '02',
      name: 'Microsoft CSP — hybrid license automation',
      kind: 'client work · at Multiskills IT',
      body: 'A hybrid Power Automate + n8n architecture that manages Microsoft CSP licenses through Partner Center. What used to take hours of manual tracking now runs on a schedule and catches revenue leakage before it compounds. Full writeup on /work.',
    },
    {
      num: '03',
      name: 'HIPAA-compliant voice agents — Retell + GHL',
      kind: 'client work · at Verstand AI',
      body: 'Autonomous voice agents on Retell, connected to GoHighLevel, tuned for the latency a natural patient conversation actually needs. Architected the human-in-the-loop handoff so the system is safe to deploy in a regulated domain. Full writeup on /work.',
    },
  ];
  return (
    <section className="pf-worklist" data-screen-label="home-selected-work">
      <header className="pf-section-head">
        <span className="pf-anchor">2. selected work</span>
        <a href="#/work" className="pf-section-meta" onClick={(e) => { e.preventDefault(); onNav('work'); }}
           style={{ color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 1 }}>
          all work →
        </a>
      </header>
      {pieces.map(p => (
        <article key={p.num} className="pf-entry">
          <div className="pf-entry-head">
            <span className="pf-entry-num">{p.num}</span>
            <div>
              <h3 className="pf-entry-name">{p.name}</h3>
              <div className="pf-entry-meta">
                <span>{p.kind}</span>
              </div>
            </div>
            <a href="#/work" className="pf-entry-open" onClick={(e) => { e.preventDefault(); onNav('work'); }}>
              read →
            </a>
          </div>
          <p className="pf-entry-body">{p.body}</p>
        </article>
      ))}
    </section>
  );
}

function WritingTeaser({ onNav }) {
  const { useState, useEffect } = React;
  const [state, setState] = useState(() => {
    const cached = window.readCache ? window.readCache() : null;
    if (cached && cached.items) {
      const fresh = (Date.now() - cached.fetchedAt) < (window.CACHE_TTL_MS || 0);
      return { items: cached.items, loading: !fresh };
    }
    return { items: null, loading: true };
  });

  useEffect(() => {
    if (!window.fetchFeed || !window.readCache) return;
    const cached = window.readCache();
    const fresh = cached && (Date.now() - cached.fetchedAt) < window.CACHE_TTL_MS;
    if (fresh) return;

    let cancelled = false;
    (async () => {
      try {
        const items = await window.fetchFeed();
        if (cancelled) return;
        window.writeCache && window.writeCache(items);
        setState({ items, loading: false });
      } catch (e) {
        if (cancelled) return;
        const prev = window.readCache();
        setState({ items: prev && prev.items ? prev.items : null, loading: false });
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const { items, loading } = state;
  const top2 = items ? items.slice(0, 2) : null;

  return (
    <section className="pf-writing-teaser" data-screen-label="home-writing">
      <header className="pf-section-head">
        <span className="pf-anchor">3. writing</span>
        <a href="#/writing" className="pf-section-meta" onClick={(e) => { e.preventDefault(); onNav('writing'); }}
           style={{ color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 1 }}>
          the full archive →
        </a>
      </header>
      <div className="pf-soon-label">substack</div>
      <div className="pf-writing-teaser-body">
        <p>
          Notes on AI automation in production. What breaks, what holds, and
          the patterns that travel.
        </p>
        {loading && !top2 && (
          <p className="pf-writing-status">fetching from substack…</p>
        )}
        {top2 && top2.length > 0 && window.WritingPost && (
          <ul className="pf-writing-list">
            {top2.map((p, i) => <window.WritingPost key={p.link || i} p={p} />)}
          </ul>
        )}
      </div>
    </section>
  );
}

function TrajectoryLine({ onNav }) {
  return (
    <section className="pf-trajectory-line" data-screen-label="home-trajectory">
      <div className="pf-trajectory-line-label">where I&rsquo;m headed</div>
      <div className="pf-trajectory-line-body">
        Near-term, mid-term, long-term. Written out honestly, subject to
        revision.{' '}
        <a href="#/trajectory" onClick={(e) => { e.preventDefault(); onNav('trajectory'); }}>
          see the trajectory
        </a>.
      </div>
    </section>
  );
}

function HomePage({ onNav, onOpenWork }) {
  return (
    <>
      <Hero onNav={onNav} />
      <CurrentlyBuilding />
      <SelectedWork onNav={onNav} />
      <WritingTeaser onNav={onNav} />
      <TrajectoryLine onNav={onNav} />
    </>
  );
}

Object.assign(window, { HomePage });