import Link from "next/link";
import { BuzzMarquee } from "@/components/buzz-marquee";
import { CtaBand } from "@/components/cta-band";
import { DashboardMock } from "@/components/dashboard-mock";
import { FaqList } from "@/components/faq-list";
import { Eyebrow, Section } from "@/components/section";
import { buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  features,
  logos,
  metrics,
  posts,
  steps,
  testimonials,
} from "@/lib/content";
import { cn } from "@/lib/utils";

export default function HomePage() {
  return (
    <>
      <section className="relative overflow-hidden">
        <div className="ambient pointer-events-none absolute inset-0" />
        <div className="grid-bg pointer-events-none absolute inset-0 opacity-60" />
        <div className="relative mx-auto max-w-6xl px-5 pt-16 pb-12 sm:px-8 sm:pt-24 sm:pb-16">
          <Eyebrow>Agentic · Cloud-native · Entanglement-ready</Eyebrow>
          <h1 className="mt-5 max-w-4xl font-heading text-4xl leading-[1.08] font-semibold text-foreground sm:text-5xl md:text-6xl lg:text-[4.35rem]">
            The Agentic Cloud for{" "}
            <em className="vibe-text not-italic">enterprise outcomes.</em>
          </h1>
          <p className="mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
            A space-aware, zero-trust operating fabric where multi-agent
            collaboration, dark-matter data lakes, and constitutional AI
            compound into institutional synergy. Models are a substrate.
            Copilots are an interface. This is the cloud that forms around
            both.
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link
              href="/request-access"
              className={cn(buttonVariants(), "h-11 px-5 text-sm")}
            >
              Request access
            </Link>
            <Link
              href="/platform"
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-11 px-5 text-sm"
              )}
            >
              See the platform
            </Link>
          </div>
          <p className="mt-5 max-w-xl text-xs leading-relaxed text-muted-foreground">
            Named a Visionary in the 2026 composite wave for agentic data
            fabrics, ambient mesh, and neutrino-based signaling — categories
            we may have invented.
          </p>
          <div className="mt-14">
            <DashboardMock />
          </div>
        </div>
      </section>

      <BuzzMarquee />

      <Section className="py-12 md:py-14">
        <p className="text-center font-mono text-[11px] uppercase tracking-[0.22em] text-muted-foreground">
          Trusted by institutions that have outgrown copilots
        </p>
        <div className="mt-8 grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-4">
          {logos.map((name) => (
            <div
              key={name}
              className="text-center text-sm font-medium tracking-wide text-foreground/55"
            >
              {name}
            </div>
          ))}
        </div>
      </Section>

      <Section className="border-y border-white/10 bg-white/5 py-14 md:py-16">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
          {metrics.map((m) => (
            <div key={m.label}>
              <p className="vibe-text font-heading text-4xl md:text-5xl">
                {m.value}
              </p>
              <p className="mt-2 text-sm text-muted-foreground">{m.label}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section>
        <Eyebrow>The fabric</Eyebrow>
        <h2 className="mt-3 max-w-2xl font-heading text-3xl leading-tight md:text-5xl">
          Six surfaces. One compounding cloud.
        </h2>
        <p className="mt-4 max-w-2xl text-muted-foreground">
          Nothing here is a point solution. Everything here is a layer the
          others can subscribe to — including gravitational waves, if you have
          them.
        </p>
        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((f) => (
            <Card
              key={f.title}
              className="border-white/10 bg-white/5 shadow-none ring-white/10 backdrop-blur-xl transition hover:border-fuchsia-400/30 hover:shadow-[0_0_40px_oklch(0.6_0.2_305/0.18)]"
            >
              <CardHeader>
                <CardTitle className="font-heading text-xl font-semibold">
                  {f.title}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm leading-relaxed text-muted-foreground">
                {f.body}
              </CardContent>
            </Card>
          ))}
        </div>
        <Link
          href="/fabric"
          className={cn(
            buttonVariants({ variant: "outline" }),
            "mt-8 h-10 px-4"
          )}
        >
          Browse the full fabric
        </Link>
      </Section>

      <Section className="border-y border-white/10 bg-white/[0.03]">
        <Eyebrow>How it compounds</Eyebrow>
        <h2 className="mt-3 max-w-2xl font-heading text-3xl leading-tight md:text-5xl">
          Zero-touch the estate. Encode intent. Realize synergy.
        </h2>
        <ol className="mt-12 grid gap-8 md:grid-cols-3">
          {steps.map((s) => (
            <li key={s.n}>
              <p className="font-mono text-xs text-primary">{s.n}</p>
              <h3 className="mt-3 font-heading text-2xl">{s.title}</h3>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                {s.body}
              </p>
            </li>
          ))}
        </ol>
      </Section>

      <Section>
        <Eyebrow>Institutions</Eyebrow>
        <h2 className="mt-3 max-w-2xl font-heading text-3xl leading-tight md:text-5xl">
          They did not buy a chatbot. They installed a point of view.
        </h2>
        <div className="mt-12 grid gap-4 lg:grid-cols-3">
          {testimonials.map((t) => (
            <blockquote
              key={t.name}
              className="flex flex-col rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-xl"
            >
              <p className="flex-1 text-[15px] leading-relaxed text-foreground/90">
                “{t.quote}”
              </p>
              <footer className="mt-6 text-sm">
                <p className="font-medium">{t.name}</p>
                <p className="text-muted-foreground">
                  {t.role}, {t.company}
                </p>
              </footer>
            </blockquote>
          ))}
        </div>
        <Link
          href="/customers"
          className="mt-8 inline-block text-sm text-primary hover:underline"
        >
          Read the outcomes →
        </Link>
      </Section>

      <Section className="border-y border-white/10">
        <div className="grid gap-12 lg:grid-cols-[1fr_1.2fr]">
          <div>
            <Eyebrow>Insights</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl leading-tight md:text-4xl">
              The thesis, at essay length.
            </h2>
            <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
              We publish when we have something the architecture review can
              use. Not before.
            </p>
          </div>
          <div className="divide-y divide-white/10">
            {posts.map((p) => (
              <Link
                key={p.slug}
                href={`/insights/${p.slug}`}
                className="block py-5 first:pt-0 last:pb-0"
              >
                <p className="font-mono text-[11px] text-muted-foreground">
                  {p.date} · {p.reading}
                </p>
                <h3 className="mt-1 font-heading text-2xl">{p.title}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{p.dek}</p>
              </Link>
            ))}
          </div>
        </div>
      </Section>

      <Section>
        <Eyebrow>Questions we get</Eyebrow>
        <h2 className="mt-3 font-heading text-3xl md:text-4xl">
          Direct answers. Institutional language.
        </h2>
        <div className="mt-8 max-w-3xl">
          <FaqList />
        </div>
      </Section>

      <CtaBand />
    </>
  );
}