import { Bot, FileText, GitBranch, Layers, Route, Shield } from "lucide-react";
import type { LucideIcon } from "lucide-react";

import { BorderGlowCard } from "@/components/marketing/border-glow-card";
import { DotField } from "@/components/marketing/dot-field";
import { Reveal, Stagger, StaggerItem } from "@/components/marketing/reveal";

type Feature = {
  icon: LucideIcon;
  title: string;
  description: string;
  span: string;
  tag: string;
};

const features: Feature[] = [
  {
    icon: FileText,
    title: "Markdown source of truth",
    description: "Plan / Epic / Task files in git. Frontmatter fields drive status, priority, and agent routing.",
    span: "lg:col-span-7",
    tag: "sync",
  },
  {
    icon: Bot,
    title: "MCP lifecycle",
    description: "claim_task → work → complete_task. Auditable runs, not ad-hoc object patches.",
    span: "lg:col-span-5",
    tag: "mcp",
  },
  {
    icon: GitBranch,
    title: "Convoy pipelines",
    description: "Architect, implementer, reviewer roles with human gates between stages.",
    span: "lg:col-span-4",
    tag: "convoy",
  },
  {
    icon: Layers,
    title: "Full workspace",
    description: "Docs, boards, forms, whiteboards — same object model humans and agents share.",
    span: "lg:col-span-4",
    tag: "workspace",
  },
  {
    icon: Shield,
    title: "Multitenant",
    description: "workspace_id on every row. Built for teams, not a single homelab tenant.",
    span: "lg:col-span-4",
    tag: "tenant",
  },
];

export function FeaturesSection() {
  return (
    <section id="features" className="relative border-b border-border bg-background py-20 sm:py-28">
      <DotField variant="light" className="opacity-40" />

      <div className="relative mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="mb-14 max-w-2xl">
          <p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-muted-foreground">Capabilities</p>
          <h2 className="mt-4 font-marketing text-3xl font-semibold tracking-[-0.02em] text-foreground sm:text-4xl">
            Not a chat wrapper.
            <br />
            A coordination plane.
          </h2>
        </Reveal>

        <Stagger className="grid gap-4 lg:grid-cols-12">
          {features.map((feature) => (
            <StaggerItem key={feature.title} className={feature.span}>
              <BorderGlowCard className="flex h-full flex-col p-6">
                <div className="mb-5 flex items-center justify-between">
                  <feature.icon className="size-5 text-primary" strokeWidth={1.75} aria-hidden />
                  <span className="font-mono-brand text-[10px] uppercase tracking-widest text-muted-foreground">
                    {feature.tag}
                  </span>
                </div>
                <h3 className="font-marketing text-lg font-semibold text-foreground">{feature.title}</h3>
                <p className="mt-2 flex-1 font-marketing text-sm leading-relaxed text-muted-foreground">
                  {feature.description}
                </p>
              </BorderGlowCard>
            </StaggerItem>
          ))}

          <StaggerItem className="lg:col-span-12">
            <BorderGlowCard className="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-start gap-4">
                <Route className="mt-0.5 size-5 shrink-0 text-matter" strokeWidth={1.75} aria-hidden />
                <div>
                  <h3 className="font-marketing text-lg font-semibold text-foreground">Per-role model routing</h3>
                  <p className="mt-1 max-w-2xl font-marketing text-sm text-muted-foreground">
                    Fast implementers, premium architects — declared in convoy frontmatter and enforced by your
                    agent pipeline.
                  </p>
                </div>
              </div>
              <p className="font-mono-brand text-xs text-muted-foreground sm:text-right">
                model_policy: composer-fast
                <br />
                tier: fast | premium
              </p>
            </BorderGlowCard>
          </StaggerItem>
        </Stagger>
      </div>
    </section>
  );
}