import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { engagements } from "@/lib/content";
import { DarkHero, CheckList, SectionHead, Cta, PrimaryBtn } from "@/components/site";

export const Route = createFileRoute("/work")({
  head: () => ({
    meta: [
      { title: "Our Work — Nexora Remote" },
      { name: "description", content: "How Nexora Remote plugs into a business: engagement snapshots and the monthly rhythm." },
      { property: "og:title", content: "Our Work — Nexora Remote" },
      { property: "og:description", content: "The shape of the work, the standard we hold it to, and the rhythm from month one." },
    ],
  }),
  component: Work,
});

const weeks = [
  ["Week 1", "Handover and documentation", "We map the queues, the tools and the recurring tasks, then write the process notes we will work from."],
  ["Week 2", "Supervised delivery", "Work starts with a daily check-in, so decisions are confirmed early instead of discovered late."],
  ["Week 3", "Steady state", "The recurring work runs to schedule. Anything unusual is raised the same day with a recommendation."],
  ["Week 4", "Review and refine", "A written review of what moved, what we would improve, and what can be handed over next month."],
];

function Work() {
  return (
    <>
      <DarkHero eyebrow="Our work" title="How we plug into a business.">
        <p className="mt-6 max-w-2xl text-lg text-ink-muted">We work behind the scenes, so our clients' names stay theirs to share. What we can show you is the shape of the work, the standard we hold it to, and the rhythm you can expect from month one.</p>
        <p className="eyebrow mt-6 text-ink-muted">Client names and figures kept confidential</p>
      </DarkHero>
      <section className="px-4 py-20">
        <div className="mx-auto max-w-6xl">
          <SectionHead eyebrow="Engagement snapshots" title="Three ways work gets handed over" text="Each engagement starts with a written scope, then runs on documented processes and a fixed review rhythm." />
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {engagements.map((e) => (
              <div key={e.title} className="rounded-2xl border p-6">
                <p className="eyebrow text-primary">{e.tag}</p>
                <h3 className="mt-2 text-xl font-bold">{e.title}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{e.text}</p>
                <div className="mt-5"><CheckList items={e.items} /></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="bg-muted px-4 py-20">
        <div className="mx-auto max-w-6xl">
          <SectionHead eyebrow="A month with us" title="The rhythm, week by week" text="No black boxes: you always know what is being worked on, what was finished and what comes next." />
          <div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
            {weeks.map(([w, t, d]) => (
              <div key={w} className="rounded-2xl bg-background p-6">
                <p className="eyebrow text-primary">{w}</p>
                <h3 className="mt-2 font-bold">{t}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{d}</p>
              </div>
            ))}
          </div>
          <div className="mt-10 flex flex-wrap items-center gap-4 rounded-2xl bg-background p-6">
            <p className="flex-1">Want to see how this would map onto your own workload? Bring your task list to a discovery call and we will tell you what can be handed over first.</p>
            <Link to="/contact"><PrimaryBtn>Book a call <ArrowRight className="h-4 w-4" /></PrimaryBtn></Link>
          </div>
        </div>
      </section>
      <Cta />
    </>
  );
}