import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { DotField } from "@/components/marketing/dot-field";
import { ProductDemo } from "@/components/marketing/product-demo";
import { Reveal } from "@/components/marketing/reveal";

export function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-[hsl(var(--hero))] text-[hsl(var(--hero-foreground))]">
      <DotField />
      <div
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_70%_20%,hsl(var(--matter)/0.08),transparent_60%)]"
        aria-hidden
      />

      <div className="relative mx-auto grid max-w-6xl gap-12 px-4 pb-20 pt-12 sm:px-6 lg:grid-cols-2 lg:items-center lg:gap-16 lg:pb-28 lg:pt-16">
        <div className="space-y-8">
          <Reveal>
            <p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-[hsl(var(--hero-muted))]">
              Agent-native workspace
            </p>
          </Reveal>

          <Reveal delay={0.05}>
            <h1 className="max-w-xl font-marketing text-[2.75rem] font-semibold leading-[1.02] tracking-[-0.03em] sm:text-6xl lg:text-[4.25rem]">
              The matter beneath{" "}
              <span className="font-display font-extrabold uppercase tracking-[0.08em] text-[hsl(var(--matter))]">
                SBMTR
              </span>
            </h1>
          </Reveal>

          <Reveal delay={0.1}>
            <p className="max-w-lg font-marketing text-lg leading-relaxed text-[hsl(var(--hero-muted))]">
              Submatter syncs your <span className="font-mono-brand text-[hsl(var(--hero-foreground))]">plans/</span>{" "}
              backlog to a real workspace, then lets Cursor subagents claim tasks through MCP — with convoy gates
              humans actually approve.
            </p>
          </Reveal>

          <Reveal delay={0.15}>
            <div className="flex flex-wrap items-center gap-3">
              <Link
                href="/sign-up"
                className="group inline-flex h-12 items-center gap-2 border-b-2 border-[hsl(var(--matter))] bg-transparent pb-0.5 font-marketing text-sm font-medium text-[hsl(var(--hero-foreground))] transition-colors hover:text-[hsl(var(--matter))]"
              >
                Start free
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
              </Link>
              <Link
                href="/landing#pipeline"
                className="inline-flex h-12 items-center px-1 font-marketing text-sm text-[hsl(var(--hero-muted))] transition-colors hover:text-[hsl(var(--hero-foreground))]"
              >
                See the pipeline
              </Link>
            </div>
          </Reveal>

          <Reveal delay={0.2}>
            <p className="font-mono-brand text-[11px] text-[hsl(var(--hero-muted))]">
              subagents · frontmatter · one workspace
            </p>
          </Reveal>
        </div>

        <Reveal delay={0.12} y={32} className="lg:translate-y-4">
          <ProductDemo />
        </Reveal>
      </div>

      <div className="h-1 bg-[hsl(var(--matter))]" aria-hidden />
    </section>
  );
}