import type { Metadata } from "next";
import { Sparkles } from "lucide-react";
import CarWizard from "@/components/wizard/CarWizard";

export const metadata: Metadata = {
  title: "Find Your Perfect Car — Car Buying Wizard | DriveHub",
  description:
    "Not sure which car to buy? Tell us your budget, fuel preference, body type, and family size — we'll recommend the best match with pros & cons in seconds.",
  openGraph: {
    title:       "Car Buying Wizard | DriveHub",
    description: "Tell us your needs. We'll find your perfect car.",
  },
};

export default function WizardPage() {
  return (
    <main className="min-h-screen bg-[#f5f7fb] min-w-0">
      {/* ── Hero banner ── */}
      <div className="bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 text-white">
        <div className="max-w-[1280px] mx-auto px-4 py-10 sm:py-14 text-center min-w-0">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/15 backdrop-blur text-sm font-bold mb-6">
            <Sparkles className="w-4 h-4 text-yellow-300" />
            Smart Recommendations
          </div>
          <h1 className="text-2xl sm:text-4xl md:text-5xl font-black mb-4 leading-tight break-words">
            Find Your Perfect Car<br />
            <span className="text-blue-200">in 4 Steps</span>
          </h1>
          <p className="text-blue-100 text-base sm:text-lg max-w-lg mx-auto leading-relaxed break-words">
            Tell us your budget, fuel preference, body type, and family size.
            We&apos;ll match you with the best cars and explain exactly why.
          </p>
        </div>
      </div>

      {/* ── Wizard ── */}
      <div className="max-w-[1280px] mx-auto px-4 py-10 min-w-0">
        <CarWizard />

        {/* ── Feature chips ── */}
        <div className="flex flex-wrap justify-center gap-3 mt-8">
          {[
            "Free & instant",
            "No sign-up required",
            "Detailed explanations",
            "Pros & cons for every car",
            "Real database prices",
          ].map((f) => (
            <span
              key={f}
              className="px-4 py-2 rounded-full bg-white border border-gray-200 text-xs font-bold text-gray-600 shadow-sm"
            >
              ✓ {f}
            </span>
          ))}
        </div>
      </div>
    </main>
  );
}