import { Component as FeatureSection } from "@/components/ui/feature-section";
import {
  Zap,
  Shield,
  BarChart3,
  Globe,
  Layers,
  Sparkles,
} from "lucide-react";

const features = [
  {
    icon: Zap,
    title: "Lightning Fast",
    description:
      "Built on edge infrastructure for sub-50ms response times globally. No cold starts, no loading spinners.",
    span: "wide" as const,
  },
  {
    icon: Shield,
    title: "Secure by Default",
    description:
      "End-to-end encryption, SOC 2 certified, and automatic vulnerability scanning on every deploy.",
  },
  {
    icon: Layers,
    title: "Composable Architecture",
    description:
      "Mix and match modules to build exactly what you need. Every piece works independently or together.",
    span: "tall" as const,
  },
  {
    icon: BarChart3,
    title: "Real-time Analytics",
    description:
      "Track performance, user behavior, and business metrics in a single unified dashboard.",
  },
  {
    icon: Globe,
    title: "Global CDN",
    description:
      "Automatically deployed to 200+ edge locations. Your users get fast experiences everywhere.",
  },
  {
    icon: Sparkles,
    title: "AI-Powered Workflows",
    description:
      "Built-in AI that learns your patterns and automates repetitive tasks so your team can focus on building.",
    span: "wide" as const,
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <FeatureSection features={features} />
    </div>
  );
}