import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowUpRight } from "lucide-react";
import { FIRM, INSIGHTS, PRACTICES, PRINCIPLES } from "@/lib/content";

export const Route = createFileRoute("/")({ component: Home });

function Home() {
  return (
    <>
      <Hero />
      <Intro />
      <Practice />
      <Approach />
      <Insights />
      <Close />
    </>
  );
}

function Hero() {
  return (
    <section className="relative isolate min-h-[100dvh] overflow-hidden bg-ink">
      <img
        src="/images/hero.jpg"
        alt="Singapore Marina Bay at blue hour, seen across still water."
        className="absolute inset-0 h-full w-full object-cover"
        fetchPriority="high"
      />
      <div className="absolute inset-0 bg-linear-to-b from-ink/55 via-ink/45 to-ink" />
      <div className="grain absolute inset-0" />

      <div className="site-wrap relative flex min-h-[100dvh] flex-col justify-end pb-16 pt-28 md:pb-20 md:pt-32">
        <p className="label-kicker reveal">Singapore · Indo-Pacific</p>
        <h1 className="reveal reveal-delay-1 mt-6 max-w-4xl font-display text-display leading-[1.02] font-medium tracking-display text-fg">
          Independent counsel for defence in a{" "}
          <span className="serif-italic">contested region.</span>
        </h1>
        <p className="reveal reveal-delay-2 mt-6 max-w-xl text-lede leading-snug text-fg/80">
          Daciora advises governments, armed forces, and industry on policy,
          industrial strategy, and original research — from Singapore, across
          the Asia-Pacific.
        </p>
        <div className="reveal reveal-delay-3 mt-10 flex flex-col gap-3 sm:flex-row sm:items-center">
          <Link
            to="/contact"
            className="inline-flex min-h-12 items-center justify-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]"
          >
            Request a conversation
          </Link>
          <Link
            to="/practice"
            className="inline-flex min-h-12 items-center justify-center border border-fg/25 px-6 text-[0.78rem] font-semibold tracking-[0.16em] text-fg uppercase no-underline transition-[border-color,background-color,scale] duration-150 ease-out hover:border-fg/50 hover:bg-fg/5 active:scale-[0.96]"
          >
            Our practice
          </Link>
        </div>
      </div>
    </section>
  );
}

function Intro() {
  return (
    <section className="bg-paper text-ink-fg">
      <div className="border-b border-rule">
        <div className="site-wrap grid grid-cols-2 gap-px md:grid-cols-4">
          {[
            { k: "Established", v: FIRM.established },
            { k: "Headquarters", v: "Singapore" },
            { k: "Theatre", v: "Indo-Pacific" },
            { k: "Counsel", v: "Unclassified only" },
          ].map((item) => (
            <div
              key={item.k}
              className="bg-paper px-0 py-8 md:px-6 md:py-10 first:pl-0"
            >
              <p className="text-[0.68rem] font-semibold tracking-label text-ink-muted uppercase">
                {item.k}
              </p>
              <p className="mt-2 font-display text-2xl font-medium md:text-3xl">
                {item.v}
              </p>
            </div>
          ))}
        </div>
      </div>

      <div className="site-wrap grid items-center gap-12 py-16 md:grid-cols-12 md:gap-16 md:py-24">
        <div className="md:col-span-6">
          <p className="label-kicker !text-ink-muted">The firm</p>
          <h2 className="mt-4 font-display text-section leading-tight font-medium tracking-display">
            A Singapore vantage on a region that will not wait.
          </h2>
          <div className="mt-6 space-y-4 text-[1.05rem] leading-relaxed text-ink-muted">
            <p>
              Daciora Consulting is an independent advisory firm established in
              Singapore in {FIRM.established}. We work at the intersection of
              defence policy, the defence industry, and original research —
              for clients who need counsel that can be used in a ministry, a
              headquarters, or a board.
            </p>
            <p>
              Singapore is a small state with an outsized strategic vocation:
              a professional armed force, a dense defence-technology base, and
              a diplomatic practice built for a contested maritime theatre. That
              is the grain in which we work. We do not sell access. We do not
              handle classified material. We do not represent any government.
            </p>
          </div>
          <Link
            to="/about"
            className="mt-8 inline-flex min-h-11 items-center gap-2 text-[0.78rem] font-semibold tracking-[0.16em] text-ink-fg uppercase no-underline"
          >
            About the firm
            <ArrowUpRight className="size-4" strokeWidth={1.5} />
          </Link>
        </div>
        <div className="md:col-span-6">
          <figure className="overflow-hidden">
            <img
              src="/images/boardroom.jpg"
              alt="An empty executive boardroom overlooking the Singapore skyline at dusk."
              className="aspect-4/3 w-full object-cover"
              loading="lazy"
            />
            <figcaption className="mt-3 text-xs tracking-wide text-ink-muted">
              Singapore. Conversations stay in the room.
            </figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

function Practice() {
  return (
    <section className="bg-ink py-16 md:py-24">
      <div className="site-wrap">
        <div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
          <div className="max-w-2xl">
            <p className="label-kicker">Practice</p>
            <h2 className="mt-4 font-display text-section leading-tight font-medium tracking-display">
              Three lines of work. One standard of judgement.
            </h2>
          </div>
          <Link
            to="/practice"
            className="inline-flex min-h-11 items-center gap-2 text-[0.78rem] font-semibold tracking-[0.16em] text-fg uppercase no-underline"
          >
            View the practice
            <ArrowUpRight className="size-4" strokeWidth={1.5} />
          </Link>
        </div>

        <div className="mt-12 divide-y divide-line border-y border-line">
          {PRACTICES.map((item) => (
            <Link
              key={item.id}
              to="/practice"
              hash={item.id}
              className="group grid items-stretch gap-6 py-8 no-underline md:grid-cols-12 md:gap-10 md:py-10"
            >
              <div className="md:col-span-2">
                <p className="font-display text-3xl text-steel">{item.numeral}</p>
              </div>
              <div className="md:col-span-6">
                <p className="text-[0.68rem] font-semibold tracking-label text-subtle uppercase">
                  {item.kicker}
                </p>
                <h3 className="mt-2 font-display text-3xl font-medium text-fg md:text-4xl">
                  {item.title}
                </h3>
                <p className="mt-3 max-w-lg text-[1.02rem] leading-relaxed text-muted">
                  {item.summary}
                </p>
              </div>
              <div className="overflow-hidden md:col-span-4">
                <img
                  src={item.image}
                  alt=""
                  className="aspect-4/3 h-full w-full object-cover transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-[1.03]"
                  loading="lazy"
                />
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function Approach() {
  return (
    <section className="bg-paper text-ink-fg py-16 md:py-24">
      <div className="site-wrap">
        <p className="label-kicker !text-ink-muted">How we work</p>
        <h2 className="mt-4 max-w-2xl font-display text-section leading-tight font-medium tracking-display">
          Quiet rooms. Written judgements. No theatre.
        </h2>
        <div className="mt-12 grid gap-px bg-rule md:grid-cols-2">
          {PRINCIPLES.map((item, i) => (
            <article key={item.title} className="bg-paper p-8 md:p-10">
              <p className="font-display text-xl text-ink-muted">
                0{i + 1}
              </p>
              <h3 className="mt-4 font-display text-2xl font-medium">{item.title}</h3>
              <p className="mt-3 text-[1.02rem] leading-relaxed text-ink-muted">
                {item.body}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Insights() {
  const featured = INSIGHTS.slice(0, 3);
  return (
    <section className="bg-ivory text-ink-fg py-16 md:py-24">
      <div className="site-wrap">
        <div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
          <div>
            <p className="label-kicker !text-ink-muted">Insights</p>
            <h2 className="mt-4 font-display text-section leading-tight font-medium">
              Selected writing
            </h2>
          </div>
          <Link
            to="/insights"
            className="inline-flex min-h-11 items-center gap-2 text-[0.78rem] font-semibold tracking-[0.16em] uppercase no-underline"
          >
            All insights
            <ArrowUpRight className="size-4" strokeWidth={1.5} />
          </Link>
        </div>
        <div className="mt-12 grid gap-10 md:grid-cols-3">
          {featured.map((item) => (
            <Link
              key={item.slug}
              to="/insights/$slug"
              params={{ slug: item.slug }}
              className="group flex flex-col no-underline"
            >
              <img
                src={item.image}
                alt=""
                className="aspect-16/10 w-full object-cover"
                loading="lazy"
              />
              <p className="mt-4 text-[0.68rem] font-semibold tracking-label text-ink-muted uppercase">
                {item.category} · {item.read}
              </p>
              <h3 className="mt-2 font-display text-2xl leading-snug font-medium text-ink-fg group-hover:text-ink-muted">
                {item.title}
              </h3>
              <p className="mt-3 text-sm leading-relaxed text-ink-muted">{item.dek}</p>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function Close() {
  return (
    <section className="relative isolate overflow-hidden bg-ink">
      <img
        src="/images/colonnade.jpg"
        alt=""
        className="absolute inset-0 h-full w-full object-cover opacity-40"
        loading="lazy"
      />
      <div className="absolute inset-0 bg-ink/70" />
      <div className="site-wrap relative py-24 md:py-32">
        <p className="label-kicker">Begin a conversation</p>
        <h2 className="mt-4 max-w-3xl font-display text-section leading-tight font-medium">
          If the work is serious, write to us.
        </h2>
        <p className="mt-5 max-w-xl text-lede leading-snug text-muted">
          Enquiries are read by a principal. Please restrict correspondence to
          unclassified matters.
        </p>
        <div className="mt-10 flex flex-col gap-3 sm:flex-row">
          <a
            href={`mailto:${FIRM.email}`}
            className="inline-flex min-h-12 items-center justify-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}
          </a>
          <Link
            to="/contact"
            className="inline-flex min-h-12 items-center justify-center border border-fg/25 px-6 text-[0.78rem] font-semibold tracking-[0.16em] text-fg uppercase no-underline transition-[border-color,background-color] duration-150 ease-out hover:border-fg/50"
          >
            Contact
          </Link>
        </div>
      </div>
    </section>
  );
}