import { Globe, Search, Shield, Activity } from "lucide-react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ThemeToggle } from "@/components/theme-toggle";
import { DomainSearchForm } from "@/components/domain-search-form";

const features = [
  {
    icon: Search,
    title: "DNS Records",
    description:
      "Query A, AAAA, MX, TXT, NS, CNAME, SOA, CAA, and SRV records for any domain.",
  },
  {
    icon: Shield,
    title: "WHOIS Lookup",
    description:
      "View registrar, expiration dates, nameservers, and registration details.",
  },
  {
    icon: Activity,
    title: "Domain Monitoring",
    description:
      "Track DNS changes over time, get alerts when records change, and monitor availability.",
  },
];

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="border-b">
        <div className="container mx-auto flex h-14 items-center justify-between px-4">
          <div className="flex items-center gap-2">
            <Globe className="size-5 text-primary" />
            <span className="text-lg font-semibold tracking-tight">
              VectorDNS
            </span>
          </div>
          <ThemeToggle />
        </div>
      </header>

      {/* Hero */}
      <main className="flex flex-1 flex-col">
        <section className="flex flex-col items-center justify-center gap-6 px-4 py-24 text-center md:py-32">
          <Badge variant="secondary" className="text-sm">
            Free DNS Toolkit
          </Badge>
          <h1 className="max-w-2xl text-4xl font-bold tracking-tight sm:text-5xl">
            DNS Lookup, WHOIS &amp;{" "}
            <span className="text-primary">Domain Monitoring</span>
          </h1>
          <p className="max-w-lg text-lg text-muted-foreground">
            Search nameservers, check domain availability, and track DNS record
            changes — all in one place.
          </p>
          <DomainSearchForm />
        </section>

        {/* Features */}
        <section className="border-t bg-muted/40 px-4 py-16">
          <div className="container mx-auto">
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {features.map((feature) => (
                <Card key={feature.title} className="bg-card">
                  <CardHeader>
                    <feature.icon className="mb-2 size-8 text-primary" />
                    <CardTitle>{feature.title}</CardTitle>
                    <CardDescription>{feature.description}</CardDescription>
                  </CardHeader>
                </Card>
              ))}
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="border-t py-6">
        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
          <p>&copy; {new Date().getFullYear()} VectorDNS</p>
        </div>
      </footer>
    </div>
  );
}