import type { Metadata } from "next";
import { Car, Shield, Zap, TrendingUp, Users, Star, ChevronRight, Sparkles } from "lucide-react";
import Link from "next/link";

export const metadata: Metadata = {
  title: "About DriveHub | India's Smartest Car Discovery Platform",
  description:
    "DriveHub helps millions of Indians discover, compare, and choose the right car using real-time data and AI-powered recommendations.",
};

const STATS = [
  { value: "500+", label: "Cars Listed", icon: Car },
  { value: "30+",  label: "Top Brands",  icon: Star },
  { value: "50+",  label: "Cities",      icon: TrendingUp },
  { value: "AI",   label: "Powered",     icon: Sparkles },
];

const VALUES = [
  {
    icon: Shield,
    title: "Trust & Accuracy",
    desc: "Every listing is verified against manufacturer data. Our moderation pipeline flags outdated or inconsistent specs automatically.",
    color: "bg-blue-50 text-blue-600",
  },
  {
    icon: Zap,
    title: "Real-Time Data",
    desc: "Prices, specs, and availability refresh every 24 hours, so you always see what's actually on the market — not last season's data.",
    color: "bg-yellow-50 text-yellow-600",
  },
  {
    icon: Users,
    title: "Built for India",
    desc: "From city-specific on-road prices to CNG and EV filters, DriveHub is built around how Indians actually buy cars.",
    color: "bg-green-50 text-green-600",
  },
  {
    icon: Sparkles,
    title: "AI at the Core",
    desc: "Our AI assistant understands your budget, family size, and daily commute, then recommends the cars most likely to make you happy.",
    color: "bg-purple-50 text-purple-600",
  },
];

export default function AboutPage() {
  return (
    <main className="min-h-screen bg-[#f6f8fc]">
      {/* Hero */}
      <section className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white py-20 px-4 relative overflow-hidden">
        {/* Decorative blob */}
        <div className="absolute -top-24 -right-24 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />

        <div className="max-w-3xl mx-auto text-center relative">
          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-1.5 text-sm font-medium mb-6">
            <Car className="w-4 h-4" />
            About DriveHub
          </div>
          <h1 className="text-3xl sm:text-5xl font-black mb-4 leading-tight">
            India&apos;s Smartest{" "}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">
              Car Discovery
            </span>{" "}
            Platform
          </h1>
          <p className="text-gray-300 text-base sm:text-lg max-w-xl mx-auto leading-relaxed">
            We combine real-time market data, manufacturer specs, and AI to help
            every Indian find the perfect car — without the dealership pressure.
          </p>
        </div>
      </section>

      <div className="max-w-5xl mx-auto px-4 py-14">
        {/* Stats */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-16">
          {STATS.map(({ value, label, icon: Icon }) => (
            <div key={label} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 text-center">
              <Icon className="w-6 h-6 text-blue-600 mx-auto mb-2" />
              <p className="text-3xl font-black text-gray-900">{value}</p>
              <p className="text-sm text-gray-500 font-medium">{label}</p>
            </div>
          ))}
        </div>

        {/* Mission */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-8 sm:p-10 mb-8">
          <h2 className="text-2xl font-black text-gray-900 mb-4">Our Mission</h2>
          <p className="text-gray-600 text-base leading-relaxed mb-4">
            Buying a car in India is a big decision — often the second-largest purchase of a
            person&apos;s life. Yet most car discovery platforms still show stale data, hide
            real prices, and push users toward deals that benefit the platform, not the buyer.
          </p>
          <p className="text-gray-600 text-base leading-relaxed">
            DriveHub was built to change that. We surface live prices, full specs, honest
            comparisons, and AI-powered guidance — all in one place, with zero dealer bias. Our
            goal is simple: when you leave DriveHub, you know exactly which car is right for you.
          </p>
        </div>

        {/* Values */}
        <h2 className="text-xl font-black text-gray-900 mb-5">What We Stand For</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
          {VALUES.map(({ icon: Icon, title, desc, color }) => (
            <div key={title} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 flex gap-4">
              <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${color}`}>
                <Icon className="w-5 h-5" />
              </div>
              <div>
                <p className="font-bold text-gray-900 mb-1">{title}</p>
                <p className="text-sm text-gray-500 leading-relaxed">{desc}</p>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-8 text-white text-center">
          <h3 className="text-xl font-black mb-2">Ready to find your perfect car?</h3>
          <p className="text-blue-100 text-sm mb-6">
            Explore 500+ cars across every budget and body type.
          </p>
          <div className="flex flex-wrap justify-center gap-3">
            <Link
              href="/cars"
              className="inline-flex items-center gap-2 bg-white text-blue-700 text-sm font-bold px-6 py-2.5 rounded-xl hover:bg-blue-50 transition-colors"
            >
              Browse Cars <ChevronRight className="w-4 h-4" />
            </Link>
            <Link
              href="/wizard"
              className="inline-flex items-center gap-2 bg-white/10 border border-white/30 text-white text-sm font-semibold px-6 py-2.5 rounded-xl hover:bg-white/20 transition-colors"
            >
              Find My Car <ChevronRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </div>
    </main>
  );
}