// Now page — what I am actively working on, public roadmap
function Now() {
  const { go } = useRoute();

  return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16 pb-20">
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>Now</span>
        <span className="tabular">Created April 2026</span>
      </div>

      <Reveal className="mt-10 md:mt-16 grid md:grid-cols-12 gap-6 md:gap-10 items-end">
        <div className="md:col-span-9">
          <div className="smallcaps text-sienna">Current state</div>
          <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] md:text-[92px]">
            What is on the desk this quarter.
          </h1>
        </div>
        <div className="md:col-span-3">
          <p className="text-ink2 leading-relaxed">
            Public roadmap. Items on this page are being worked on. Items not on this page are not a priority this quarter, which is worth saying in public.
          </p>
        </div>
      </Reveal>

      {/* Current work */}
      <div className="mt-14">
        <div className="smallcaps text-muted mb-6">Current work</div>
        <div className="rule-top rule-bottom">
          {[
            ['Publishing', 'The POV as a short paper for 1:1 circulation to peers and hiring leaders.', 'In progress'],
            ['Tooling', 'F500 AI Readiness Index v0.4 with sample firms. Real data lands in v1.0.', 'Live'],
            ['Writing', 'Essays on the Upstream + Outcome play. Drafting in public.', 'In progress'],
            ['Role search', 'In conversation with firms across four categories. Remote-first, relocation open.', 'Ongoing'],
          ].map(([k, v, s], i) => (
            <div key={i} className="grid md:grid-cols-[180px_1fr_120px] gap-6 py-5 rule-bottom last:border-0 items-baseline">
              <div className="smallcaps text-sienna">{k}</div>
              <div className="font-display text-lg leading-snug">{v}</div>
              <div className="smallcaps text-muted md:text-right">{s}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Next up */}
      <div className="mt-16">
        <div className="smallcaps text-muted mb-6">Next up</div>
        <div className="rule-top rule-bottom">
          {[
            ['Upstream Diagnostic', 'A structured intake workbook. Replaces the quiz-style maturity questionnaires in common use.'],
            ['Industry writing', 'Pitches to HFS Research, Everest Group, and the Indian business press for bylined pieces.'],
            ['Vendor Consolidation Map', 'Tool that maps an existing AI stack to a consolidated target state.'],
            ['Outcome Contract Calculator', 'Commercial-model tool for converting FTE contracts to gain-share.'],
            ['Regulated-industry evaluation harness', 'Open scoping. Aims to let regulated firms assess AI systems before production.'],
          ].map(([w, v], i) => (
            <div key={i} className="grid md:grid-cols-[220px_1fr] gap-6 py-4 rule-bottom last:border-0">
              <span className="font-display text-sienna">{w}</span>
              <span className="text-ink2 leading-relaxed">{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Focus this quarter */}
      <div className="mt-16">
        <div className="smallcaps text-muted mb-6">Focus this quarter</div>
        <ul className="mt-4 grid md:grid-cols-2 gap-8">
          {[
            ['Role search', 'In conversation with AI-native services firms, hyperscaler industry teams, consulting-plus-operations firms, and banks building in-house AI. Remote-first from India primary, relocation open for the right role.'],
            ['Europe', 'Attending Hello Tomorrow and VivaTech in mid-2026. Using the trip to meet European VPs and heads of AI in person.'],
            ['Tooling', 'Ship four tools. Open-source the calculators where useful. Keep the diagnostic and index semi-private while feedback informs v1.'],
            ['Writing', 'Essay and field-note cadence continues. See the writing page for what has shipped.'],
          ].map(([k, v]) => (
            <li key={k} className="rule-top rule-bottom p-5 md:py-6">
              <div className="smallcaps text-sienna">{k}</div>
              <p className="mt-3 text-ink2 leading-relaxed">{v}</p>
            </li>
          ))}
        </ul>
      </div>

      {/* Not this quarter */}
      <div className="mt-16">
        <div className="smallcaps text-muted mb-6">Not this quarter</div>
        <ul className="mt-4 grid md:grid-cols-2 gap-8">
          {[
            ['Speaking circuit', 'Not chasing keynotes. Conversations over stages.'],
            ['Advisory roles', 'Not taking on AI advisory for external firms yet. That comes after the next role lands.'],
            ['Podcast', 'Thinking about one. Not launching one.'],
            ['Book', 'The POV might become a longer piece over 2026–2027. Not this quarter.'],
          ].map(([k, v]) => (
            <li key={k} className="rule-top rule-bottom p-5 md:py-6">
              <div className="smallcaps text-muted">{k}</div>
              <p className="mt-3 text-ink2 leading-relaxed text-sm">{v}</p>
            </li>
          ))}
        </ul>
      </div>

      <div className="mt-20 rule-top pt-10">
        <div className="smallcaps text-muted">How this page works</div>
        <p className="mt-3 font-display text-xl leading-relaxed text-ink2 max-w-[56ch]">
          Revised when things change. The goal is to make the practice observable. Items that shipped move to the <button onClick={() => go('cases')} className="link-underline text-sienna">case studies</button> or <button onClick={() => go('writing')} className="link-underline text-sienna">writing</button> page. Items that were cut disappear quietly.
        </p>
      </div>
    </main>
  );
}

Object.assign(window, { Now });