Marketing Hero

import { cn } from "@/lib/utils";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  ArrowRightIcon,
  ShieldCheckIcon,
  ZapIcon,
  BlocksIcon,
  UsersIcon,
  SparklesIcon,
  LayersIcon,
} from "lucide-react";

const trustSignals = [
  { icon: UsersIcon, text: "10,000+ developers" },
  { icon: ShieldCheckIcon, text: "Enterprise-ready" },
  { icon: ZapIcon, text: "Ship in minutes" },
];

const features = [
  {
    icon: BlocksIcon,
    title: "Production Blocks",
    description:
      "Copy-paste-ready UI blocks built with shadcn, Tailwind, and TypeScript. No assembly required.",
  },
  {
    icon: SparklesIcon,
    title: "Theme Forge",
    description:
      "Six curated themes with full dark mode support. Swap palettes without touching a single component.",
  },
  {
    icon: LayersIcon,
    title: "Composable Architecture",
    description:
      "Every block is built from atomic components. Mix, match, and extend to fit your exact needs.",
  },
];

export default function MarketingHero() {
  return (
    <div className="w-full">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-b from-muted/50 via-background to-background">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent" />
        <div className="relative mx-auto flex max-w-4xl flex-col items-center gap-8 px-6 pb-20 pt-24 text-center">
          <Badge variant="secondary" className="gap-1.5">
            <SparklesIcon className="size-3" />
            Now in public beta
          </Badge>

          <h1 className="max-w-3xl text-4xl font-bold leading-[1.1] tracking-tight sm:text-5xl md:text-6xl">
            Forge your next interface at{" "}
            <span className="text-primary">blazing speed</span>
          </h1>

          <p className="max-w-2xl text-lg text-muted-foreground sm:text-xl">
            UI Anvil gives you production-ready blocks, themes, and components
            — so you can ship polished products without starting from scratch.
          </p>

          <div className="flex flex-col gap-3 sm:flex-row">
            <Button size="lg">
              Get Started Free
              <ArrowRightIcon data-icon="inline-end" className="size-4" />
            </Button>
            <Button variant="outline" size="lg">
              View Components
            </Button>
          </div>

          {/* Trust Signals */}
          <div className="flex flex-wrap items-center justify-center gap-6 pt-4">
            {trustSignals.map((signal, i) => {
              const Icon = signal.icon;
              return (
                <div
                  key={i}
                  className="flex items-center gap-2 text-sm text-muted-foreground"
                >
                  <Icon className="size-4 text-primary" />
                  <span>{signal.text}</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <Separator />

      {/* Feature Grid */}
      <section className="mx-auto max-w-5xl px-6 py-20">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
            Everything you need to build faster
          </h2>
          <p className="mt-2 text-muted-foreground">
            Purpose-built primitives for teams that move fast and ship often.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <Card key={feature.title}>
                <CardHeader>
                  <div className="mb-1 flex size-10 items-center justify-center rounded-lg bg-primary/10">
                    <Icon className="size-5 text-primary" />
                  </div>
                  <CardTitle>{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground leading-relaxed">
                    {feature.description}
                  </p>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </section>
    </div>
  );
}