// Writing — LinkedIn posts + longer essays, indexed
function Writing() {
  const { go } = useRoute();

  const essays = [
    {
      id: 'pov-2026', tag: 'POV', date: 'April 2026',
      title: 'Why 2026–2028 is the defining window for CX services incumbents.',
      summary: 'A three-year window will decide which incumbents survive as strategic players and which become acquisition fodder. Vendor consolidation, durable moats, and the workforce transition.',
      onClick: () => go('pov'),
    },
  ];

  const posts = [
    {
      id: 'architecture',
      title: 'When AI goes wrong, it is rarely the model\'s fault.',
      date: 'April 2026',
      length: '4 min',
      summary: 'A client deployed an LLM-backed email bot with no classification layer. OpenAI updated their content policies. The LLM blocked retail emails touching theft-related queries. The manual team had been ramped down. Customer emails started bouncing with no fallback. The failure was not the model. It was the architecture.',
    },
    {
      id: 'self-awareness',
      title: 'Enterprises do not fail at AI because of technology.',
      date: 'April 2026',
      length: '4 min',
      summary: 'They fail because of self-awareness. Leadership does not see the problem clearly until change becomes costly. By then the market has moved. When I walk into an engagement, the first conversation is not about AI. It is about whether the client can name their real problem.',
    },
    {
      id: 'grounding',
      title: 'Your AI is only as good as your data layer.',
      date: 'April 2026',
      length: '4 min',
      summary: 'Every time a client says the AI is hallucinating, I ask one question first. Is it grounded in your actual data? Most of the time the answer lives in the retrieval layer, not the model. Weak search is the entire root cause of poor output more often than teams realise.',
    },
    {
      id: 'ecosystem',
      title: 'The next three years will separate the enterprises that evolve from the ones that do not.',
      date: 'April 2026',
      length: '4 min',
      summary: 'Fix the problem in front of you. Build a roadmap for the initiative. Deliver the project. That logic has not aged well. By the time a roadmap gets approved the technology is five steps ahead. The organisations winning at enterprise AI are designing the ecosystem first and executing into it.',
    },
  ];

  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>Writing</span>
        <span className="tabular">Posts, essays, field notes</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">Published</div>
          <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] md:text-[92px]">
            Writing from inside the work.
          </h1>
        </div>
        <div className="md:col-span-3">
          <p className="text-ink2 leading-relaxed">
            Most of the writing comes from things that happened on engagements: a deployment that failed, a pattern that repeated, a client conversation that changed my mind. The essays build on top of the short posts.
          </p>
        </div>
      </Reveal>

      {/* Long essays */}
      <div className="mt-14">
        <div className="smallcaps text-muted mb-6">Essays</div>
        <div className="rule-top">
          {essays.map((e, i) => (
            <button key={e.id} onClick={e.onClick}
                    className="w-full text-left grid md:grid-cols-12 gap-6 md:gap-10 py-10 rule-bottom items-baseline group">
              <div className="md:col-span-1">
                <span className="font-display italic text-sienna tabular text-xl">{String(i+1).padStart(2, '0')}</span>
              </div>
              <div className="md:col-span-3">
                <div className="smallcaps text-muted">{e.tag} · {e.date}</div>
              </div>
              <div className="md:col-span-8">
                <h2 className="font-display text-[28px] md:text-[36px] leading-[1.1] tracking-tight group-hover:text-sienna transition-colors">{e.title}</h2>
                <p className="mt-3 text-ink2 leading-relaxed">{e.summary}</p>
                <div className="mt-4 smallcaps link-underline">Read →</div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Short posts */}
      <div className="mt-20">
        <div className="smallcaps text-muted mb-6">Field notes (LinkedIn)</div>
        <div className="grid md:grid-cols-2 gap-px bg-ink/10">
          {posts.map(p => (
            <article key={p.id} className="bg-paper p-8 md:p-10">
              <div className="smallcaps text-muted">{p.date} · {p.length}</div>
              <h3 className="mt-3 font-display text-[24px] md:text-[28px] leading-[1.15] tracking-tight">{p.title}</h3>
              <p className="mt-4 text-ink2 leading-relaxed">{p.summary}</p>
              <a href="https://www.linkedin.com/in/vnmprathyusha" target="_blank" rel="noreferrer"
                 className="mt-5 inline-block smallcaps link-underline">Read on LinkedIn →</a>
            </article>
          ))}
        </div>
      </div>

      {/* Follow */}
      <div className="mt-20 rule-top pt-10">
        <div className="smallcaps text-muted">Following along</div>
        <p className="mt-3 font-display text-xl leading-relaxed text-ink2 max-w-[56ch]">
          New writing tends to land first as a short post on <a className="link-underline text-sienna" href="https://www.linkedin.com/in/vnmprathyusha" target="_blank" rel="noreferrer">LinkedIn</a>, then accretes into the essays here over time.
        </p>
      </div>
    </main>
  );
}

Object.assign(window, { Writing });