// Home page — plain voice, verified facts only.
const { useEffect: useEffectH, useState: useStateH } = React;

function Home() {
  const { go } = useRoute();
  const [time, setTime] = useStateH('');
  useEffectH(() => {
    const fmt = () => {
      const d = new Date();
      const opts = { hour: '2-digit', minute: '2-digit', timeZone: 'Asia/Kolkata', hour12: false };
      setTime(new Intl.DateTimeFormat('en-GB', opts).format(d) + ' IST');
    };
    fmt(); const i = setInterval(fmt, 30000); return () => clearInterval(i);
  }, []);

  return (
    <main>
      {/* Hero */}
      <section className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-20 pb-20 md:pb-28">
        <div className="flex items-center justify-between smallcaps text-muted rule-bottom pb-3">
          <span>Bengaluru, India</span>
          <span className="hidden md:inline ornament text-sienna">❧</span>
          <span className="tabular">{time} · Open to VP / Director roles</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 mb-5">AI transformation, regulated industries</div>
            <h1 className="font-display font-medium tracking-tight leading-[0.98] text-balance
                           text-[52px] sm:text-[72px] md:text-[104px] lg:text-[120px]">
              Most enterprise AI fails at <span className="italic text-sienna">the workflow,</span>
              <span className="block">not the model.</span>
            </h1>
          </div>
          <div className="md:col-span-3">
            <div className="smallcaps text-muted">Who writes this</div>
            <p className="mt-3 text-ink2 leading-relaxed">
              Prathyusha Vemula. 12 years delivering AI, RPA, and CX transformation inside BFSI, FMCG, and Telecom. Currently a Senior Consultant at Concentrix.
            </p>
          </div>
        </Reveal>

        {/* Lede */}
        <Reveal className="mt-14 md:mt-20 grid md:grid-cols-12 gap-6 md:gap-10">
          <div className="md:col-span-3">
            <div className="smallcaps text-muted">Premise</div>
          </div>
          <div className="md:col-span-9">
            <p className="font-display text-[24px] md:text-[32px] leading-[1.25] tracking-tight max-w-[32ch]">
              The failures I keep seeing have the same shape. A good model. A capable tool. A workflow nobody touched. After twelve years inside regulated enterprises, the pattern is hard to miss: redesign the process, then bring the AI to it. The order matters more than anything else on the stack.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-5">
              <button onClick={() => go('pov')} className="smallcaps link-underline">
                Read the essay →
              </button>
              <button onClick={() => go('cases')} className="smallcaps link-underline text-muted">
                Case studies →
              </button>
              <button onClick={() => go('tools')} className="smallcaps link-underline text-muted">
                Working tools →
              </button>
            </div>
          </div>
        </Reveal>

        {/* Hero proof stats (all resume-verified) */}
        <Reveal className="mt-20 md:mt-28 rule-top pt-10">
          <div className="smallcaps text-muted mb-8">A few numbers from the last nine years</div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-10 md:gap-x-10">
            <Stat n="+10→+34" label="NPS, banking client" note="Feedback tagging and BI, with GenAI knowledge bots layered on top." page="cases" />
            <Stat n="25 → 4" label="Days, mortgage PCN" note="Default-management workflow, US mortgage client, Infosys BPM." page="cases" />
            <Stat n="40%" label="AHT, Agent Assist" note="Global FMCG contact centre, with CSAT lift alongside." page="cases" />
            <Stat n="$1M+" label="Annual, Automation CoE" note="125+ automation pipeline, 80+ FTE benefits." page="cases" />
          </div>
          <div className="mt-8 text-sm text-muted">
            Every number above is a specific engagement. The full write-ups live on the <button onClick={() => go('cases')} className="link-underline text-ink">case studies page</button>.
          </div>
        </Reveal>
      </section>

      {/* Three moats */}
      <section className="rule-top">
        <div className="mx-auto max-w-[1320px] px-6 md:px-10 py-20 md:py-28">
          <SectionHead
            numeral="I"
            kicker="The framework"
            title="What compounds when everything else commoditises."
            lede="Foundation models already sit within a few points of each other on the evaluations enterprises actually use. Agent frameworks ship with every cloud. What still takes years to build and does not copy cleanly between providers: vertical IP, the discipline to price on outcomes, and being in the room before the RFP."
          />
          <div className="mt-14 grid md:grid-cols-3 gap-0 md:gap-px md:bg-ink/10">
            <Moat
              num="01"
              name="Vertical IP"
              thesis="Process graphs, evaluation sets, and guardrails that only exist once a regulated operation has used them against real edge cases. Slow to acquire. Hard to copy."
              example="The mortgage PCN workflow took eighteen months and a deep bench of attorney edge cases to capture. That library sits in no textbook and no foundation model."
            />
            <Moat
              num="02"
              name="Outcome pricing"
              thesis="Contracts tied to days saved, dollars recovered, or AHT compressed. The pricing model is the easy part. The measurement discipline behind it is where most providers fall over."
              example="Once you price on outcomes, every incentive inside the delivery team re-aligns. Production quality becomes the P&L, not an afterthought."
            />
            <Moat
              num="03"
              name="Upstream consulting"
              thesis="Showing up when the operating plan is still being drafted, not when the RFP goes out. The diagnostic sprint is where the shape of the transformation gets decided."
              example="A 90-day diagnostic earns the seat for the three-to-five-year run. Done with the right people in the room, it pays for itself twice over."
            />
          </div>
          <div className="mt-10">
            <button onClick={() => go('pov')} className="smallcaps link-underline">Why these three — the full argument →</button>
          </div>
        </div>
      </section>

      {/* Industries */}
      <section className="bg-paper2 rule-top rule-bottom">
        <div className="mx-auto max-w-[1320px] px-6 md:px-10 py-20 md:py-28">
          <SectionHead
            numeral="II"
            kicker="Sectors"
            title="Where the framework has been tested, and where it travels."
            lede="Most of the delivery work has been in BFSI and Telecom, with a stretch of CX work in FMCG. Insurance and Healthcare share enough of the workflow shape that the same three moats apply. The sector pages say exactly which engagements are live and which are pattern-transfer."
          />
          <div className="mt-14 grid md:grid-cols-4 gap-0 md:gap-px md:bg-ink/10">
            {[
              { id: 'bfsi', name: 'BFSI', kicker: 'Flagship', copy: 'Mortgage default, FinCrime investigation, NPS, banking CX. Continuous delivery since 2017, across Infosys BPM and Concentrix.', proof: 'Live engagements' },
              { id: 'insurance', name: 'Insurance', kicker: 'Pattern transfer', copy: 'Claims triage, fraud narratives, subrogation. Document and judgment workflow that twins closely with FinCrime.', proof: 'Framework applies, not yet delivered' },
              { id: 'healthcare', name: 'Healthcare', kicker: 'Pattern transfer', copy: 'Prior-authorisation, claims adjudication, coding QA. Same multi-system, document-heavy workflow shape.', proof: 'Framework applies, not yet delivered' },
              { id: 'telco', name: 'Telco', kicker: 'Volume lab', copy: 'Renewals transformation at Telstra. Public-sector grievance triage. Where high-volume discipline gets tested.', proof: 'Live engagements' },
            ].map(s => (
              <button key={s.id} onClick={() => go('industries', s.id)}
                      className="text-left bg-paper2 hover:bg-paper transition-colors p-7 md:p-8 group">
                <div className="smallcaps text-sienna">{s.kicker}</div>
                <div className="font-display text-[40px] md:text-[44px] leading-none tracking-tight mt-2 group-hover:text-sienna transition-colors">{s.name}</div>
                <p className="mt-4 text-ink2 leading-relaxed">{s.copy}</p>
                <div className="mt-6 smallcaps text-muted">{s.proof} <span className="ml-1">→</span></div>
              </button>
            ))}
          </div>
          <div className="mt-10">
            <button onClick={() => go('industries')} className="smallcaps link-underline">Sector deep-dives →</button>
          </div>
        </div>
      </section>

      {/* Tools */}
      <section>
        <div className="mx-auto max-w-[1320px] px-6 md:px-10 py-20 md:py-28">
          <SectionHead
            numeral="III"
            kicker="Working tools"
            title="Four instruments pulled from live delivery."
            lede="These are scaled-down, browser-usable versions of the artefacts used inside engagements. One is live. The others are on the bench."
          />
          <div className="mt-14 grid md:grid-cols-2 gap-px bg-ink/10">
            <ToolCard
              title="F500 AI Readiness Index"
              status="Live"
              desc="A sector-benchmarked readiness score across six dimensions that matter in regulated delivery: vertical IP, model-risk maturity, outcome-pricing appetite, vendor density, upstream access, and evaluation maturity. Useful before an RFP is written — or as a second opinion once one is."
            />
            <ToolCard
              title="Upstream Diagnostic"
              status="Week 02"
              desc="A structured intake, not a quiz. Around 40–50 prompts across workflow mapping, data readiness, commercial model, and governance, worked in three to four sittings. Outputs a board-ready brief on where AI realistically fits in the next twelve months, and where it does not yet belong."
            />
            <ToolCard
              title="Vendor Consolidation Map"
              status="Week 04"
              desc="Most enterprises run 30–50 AI and automation vendors across overlapping capabilities. This tool takes a current stack and returns a target state with a named owner per capability and three fewer vendors on the invoice list, drawing on the seven-country shared-services consolidation that shaped the method."
            />
            <ToolCard
              title="Outcome Contract Calculator"
              status="Week 06"
              desc="Convert an FTE-priced SoW to a gain-share structure. Shows break-even, upside, and the specific conversation each clause triggers on both sides of the table — including the clauses most commercial teams forget to negotiate."
            />
          </div>
          <div className="mt-10">
            <button onClick={() => go('tools')} className="smallcaps link-underline">All four tools, with context →</button>
          </div>
        </div>
      </section>

      {/* Reading room — quiet close. No CTA. */}
      <section className="rule-top">
        <div className="mx-auto max-w-[1320px] px-6 md:px-10 py-16 md:py-24 grid md:grid-cols-12 gap-6 md:gap-10 items-baseline">
          <div className="md:col-span-3">
            <div className="smallcaps text-muted">Continue</div>
          </div>
          <div className="md:col-span-9 grid sm:grid-cols-3 gap-0 sm:gap-px sm:bg-ink/10">
            <button onClick={() => go('pov')} className="text-left bg-paper p-6 hover:bg-paper2 transition-colors">
              <div className="smallcaps text-sienna">Essay</div>
              <div className="mt-2 font-display text-xl leading-tight">Why 2026–2028 is the defining window.</div>
            </button>
            <button onClick={() => go('cases')} className="text-left bg-paper p-6 hover:bg-paper2 transition-colors">
              <div className="smallcaps text-sienna">Case studies</div>
              <div className="mt-2 font-display text-xl leading-tight">Seven engagements, each with a number.</div>
            </button>
            <button onClick={() => go('writing')} className="text-left bg-paper p-6 hover:bg-paper2 transition-colors">
              <div className="smallcaps text-sienna">Writing</div>
              <div className="mt-2 font-display text-xl leading-tight">Field notes from active delivery.</div>
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function Stat({ n, label, note }) {
  return (
    <div className="min-w-0">
      <div className="font-display tabular text-[44px] sm:text-[52px] md:text-[64px] leading-none tracking-tight whitespace-nowrap">{n}</div>
      <div className="mt-3 smallcaps text-ink">{label}</div>
      <div className="mt-2 text-sm text-muted leading-relaxed">{note}</div>
    </div>
  );
}

function Moat({ num, name, thesis, example }) {
  return (
    <div className="bg-paper p-8 md:p-10">
      <div className="flex items-baseline justify-between">
        <span className="smallcaps text-muted tabular">No. {num}</span>
        <span className="ornament text-sienna">§</span>
      </div>
      <h3 className="font-display text-[36px] md:text-[44px] leading-[1.04] tracking-tight mt-5">{name}</h3>
      <p className="mt-5 text-ink2 leading-relaxed text-lg">{thesis}</p>
      <div className="mt-6 rule-top pt-4 smallcaps text-muted">In practice</div>
      <p className="mt-2 text-ink2 leading-relaxed">{example}</p>
    </div>
  );
}

function ToolCard({ title, status, desc }) {
  const live = status === 'Live';
  return (
    <div className="bg-paper p-8 md:p-10 flex flex-col justify-between min-h-[220px]">
      <div>
        <div className="flex items-center gap-3">
          <span className={`smallcaps ${live ? 'text-sienna' : 'text-muted'}`}>{status}</span>
          {!live && <span className="smallcaps text-muted">· forthcoming</span>}
        </div>
        <h3 className="mt-3 font-display text-[28px] md:text-[32px] leading-tight tracking-tight">{title}</h3>
        <p className="mt-3 text-ink2 leading-relaxed">{desc}</p>
      </div>
      <div className="mt-8 smallcaps text-ink">{live ? 'Open tool →' : 'Preview →'}</div>
    </div>
  );
}

Object.assign(window, { Home });