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

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

function AboutPage() {
  return (
    <>
      <PageIntro
        kicker="About"
        title="A firm built for the region as it is, not as it was briefed."
        lede="Daciora is a Singapore advisory house. We exist because defence decisions in the Indo-Pacific now move faster than the institutions that must take them — and because those decisions are no longer only a matter for governments."
      />

      <section className="bg-paper text-ink-fg">
        <div className="site-wrap grid gap-12 py-16 md:grid-cols-12 md:py-24">
          <figure className="md:col-span-7">
            <img
              src="/images/boardroom.jpg"
              alt="Boardroom overlooking the city at dusk."
              className="aspect-16/10 w-full object-cover"
            />
          </figure>
          <div className="md:col-span-5 md:pt-4">
            <p className="label-kicker !text-ink-muted">Origin</p>
            <h2 className="mt-4 font-display text-3xl leading-snug font-medium">
              Founded in Singapore, {FIRM.established}.
            </h2>
            <div className="mt-5 space-y-4 text-[1.05rem] leading-relaxed text-ink-muted">
              <p>
                The firm was established as the Indo-Pacific moved from a phrase
                in communiqués to a daily operating condition: contested sea
                lanes, tighter export controls, and a defence-industrial map
                that no longer runs on a single alliance logic.
              </p>
              <p>
                We chose Singapore because it is both a capital and a hinge —
                a place where policy, industry, and regional diplomacy already
                sit in the same afternoon. That is still the right place to do
                this work.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-ivory text-ink-fg py-16 md:py-24">
        <div className="site-wrap grid gap-12 md:grid-cols-12">
          <div className="md:col-span-4">
            <p className="label-kicker !text-ink-muted">Mandate</p>
            <h2 className="mt-4 font-display text-section leading-tight font-medium">
              What we will and will not do.
            </h2>
          </div>
          <div className="md:col-span-8 space-y-6 text-[1.05rem] leading-relaxed text-ink-muted">
            <p>
              We advise. We research. We write judgements that a principal can
              take into a meeting. We will not lobby a government on behalf of a
              supplier, and we will not position a supplier on behalf of a
              government. Where those lines blur, we decline the work.
            </p>
            <p>
              We do not handle classified or restricted material. That is a
              professional boundary, not a limitation we regret. It keeps the
              work portable: a paper from Daciora can be read in a room that
              includes people without a clearance, and it can be challenged on
              the evidence it actually contains.
            </p>
            <p>
              Clients are not listed. Engagements are not advertised. If you
              need a firm that puts logos on a slide, we are not the right
              counsel.
            </p>
          </div>
        </div>
      </section>

      <section className="bg-paper text-ink-fg py-16 md:py-24">
        <div className="site-wrap">
          <p className="label-kicker !text-ink-muted">Principals</p>
          <h2 className="mt-4 max-w-2xl font-display text-section leading-tight font-medium">
            A small partnership, a wider network.
          </h2>
          <p className="mt-5 max-w-2xl text-[1.05rem] leading-relaxed text-ink-muted">
            Work is led by the principals below and staffed from a confidential
            network of specialists — former officials, engineers, and
            researchers — engaged for the assignment, not for the brochure.
          </p>
          <div className="mt-12 grid gap-10 border-t border-rule md:grid-cols-3">
            {PRINCIPALS.map((person) => (
              <article key={person.name} className="pt-8">
                <p className="text-[0.68rem] font-semibold tracking-label text-ink-muted uppercase">
                  {person.focus}
                </p>
                <h3 className="mt-3 font-display text-2xl font-medium">
                  {person.name}
                </h3>
                <p className="mt-1 text-sm text-ink-muted">{person.role}</p>
                <p className="mt-4 text-[0.98rem] leading-relaxed text-ink-muted">
                  {person.bio}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-ink py-16 md:py-24">
        <div className="site-wrap grid gap-12 md:grid-cols-12">
          <div className="md:col-span-5">
            <p className="label-kicker">Footprint</p>
            <h2 className="mt-4 font-display text-section leading-tight font-medium">
              One headquarters. Regional coverage.
            </h2>
            <p className="mt-5 text-[1.05rem] leading-relaxed text-muted">
              The practice is run from Singapore. We travel to the work. A
              correspondent network in selected capitals gives us a reading of
              local industrial and policy conditions without the pretence of a
              global office map.
            </p>
          </div>
          <ul className="md:col-span-7 divide-y divide-line border-y border-line">
            {FOOTPRINT.map((item) => (
              <li
                key={item.city}
                className="flex items-baseline justify-between gap-4 py-5"
              >
                <span className="font-display text-2xl">{item.city}</span>
                <span className="text-[0.72rem] font-semibold tracking-label text-subtle uppercase">
                  {item.note}
                </span>
              </li>
            ))}
          </ul>
        </div>
        <div className="site-wrap mt-12">
          <Link
            to="/practice"
            className="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]"
          >
            Our practice
          </Link>
        </div>
      </section>
    </>
  );
}
