import { Footer } from "@/components/footer";
import { MetaForm } from "@/components/meta-form";
import { Tags } from "lucide-react";

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen font-[family-name:var(--font-geist-sans)] bg-background">
      <main className="flex-grow flex items-center justify-center p-4 sm:p-8">
        <div className="flex flex-col gap-8 items-center w-full max-w-6xl">
          <div className="text-center space-y-4">
            <div className="inline-flex items-center justify-center gap-3">
              <Tags className="h-8 w-8 sm:h-10 sm:w-10 text-primary" />
              <h1 className="text-3xl sm:text-5xl font-bold text-foreground tracking-tight">
                Meta Tag Extractor
              </h1>
            </div>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Instantly pull meta titles, descriptions, and preview images from
              any URL to analyze and optimize your web presence.
            </p>
          </div>
          <MetaForm />
        </div>
      </main>
      <Footer />
    </div>
  );
}