import { createFileRoute, Link } from "@tanstack/react-router";
import { PageIntro } from "@/components/site/layout";
import { FIRM, PRACTICES } from "@/lib/content";

export const Route = createFileRoute("/practice")({
  component: PracticePage,
  head: () => ({
    meta: [{ title: "Practice — Daciora Consulting" }],
  }),
});

function PracticePage() {
  return (
    <>
      <PageIntro
        kicker="Practice"
        title="Policy, industry, and research — held to the same standard."
        lede="The three practices share a method: evidence that can be shown, judgements that can be used, and a refusal to treat the Asia-Pacific as a single market or a single theatre."
      />

      {PRACTICES.map((item, index) => (
        <section
          key={item.id}
          id={item.id}
          className={
            (index % 2 === 0 ? "bg-paper text-ink-fg" : "bg-ivory text-ink-fg") +
            " scroll-mt-24"
          }
        >
          <div className="site-wrap grid items-center gap-10 py-16 md:grid-cols-12 md:gap-14 md:py-24">
            <div className={index % 2 === 1 ? "md:col-span-6 md:order-2" : "md:col-span-6"}>
              <img
                src={item.image}
                alt=""
                className="aspect-4/3 w-full object-cover"
                loading="lazy"
              />
            </div>
            <div className="md:col-span-6">
              <p className="font-display text-3xl text-ink-muted">{item.numeral}</p>
              <p className="mt-4 text-[0.68rem] font-semibold tracking-label text-ink-muted uppercase">
                {item.kicker}
              </p>
              <h2 className="mt-3 font-display text-section leading-tight font-medium">
                {item.title}
              </h2>
              <p className="mt-5 text-[1.08rem] leading-relaxed text-ink-fg/90">
                {item.body}
              </p>
              <ul className="mt-8 space-y-3">
                {item.services.map((line) => (
                  <li
                    key={line}
                    className="border-t border-rule pt-3 text-[0.98rem] text-ink-muted"
                  >
                    {line}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>
      ))}

      <section className="bg-ink py-16 md:py-24">
        <div className="site-wrap max-w-3xl">
          <p className="label-kicker">Engagements</p>
          <h2 className="mt-4 font-display text-section leading-tight font-medium">
            How an assignment typically runs.
          </h2>
          <ol className="mt-10 space-y-8">
            {[
              {
                t: "Scoping",
                d: "A short, written terms of reference. We decline work that would require classified holdings, or that would put us on both sides of a transaction.",
              },
              {
                t: "Work",
                d: "A small team, a named principal, and a method note. Interviews, documents, and open-source collection as the question requires — never fishing expeditions.",
              },
              {
                t: "Judgement",
                d: "A paper or briefing designed to be used. Assumptions listed. Disagreements inside the team recorded where they matter. No theatre slides.",
              },
            ].map((step, i) => (
              <li key={step.t} className="grid gap-2 md:grid-cols-12">
                <p className="font-display text-2xl text-steel md:col-span-2">
                  0{i + 1}
                </p>
                <div className="md:col-span-10">
                  <h3 className="font-display text-2xl font-medium">{step.t}</h3>
                  <p className="mt-2 text-[1.02rem] leading-relaxed text-muted">
                    {step.d}
                  </p>
                </div>
              </li>
            ))}
          </ol>
          <Link
            to="/contact"
            className="mt-12 inline-flex min-h-12 items-center bg-fg px-6 text-[0.78rem] font-semibold tracking-[0.16em] text-ink uppercase no-underline transition-[background-color,scale] duration-150 ease-out hover:bg-paper-deep active:scale-[0.96]"
          >
            {FIRM.email}
          </Link>
        </div>
      </section>
    </>
  );
}
