import type { Metadata } from "next";
import { getCars } from "@/lib/db";
import Navbar from "@/components/Navbar";
import CarCard from "@/components/CarCard";
import Footer from "@/components/Footer";
import WhatsAppButton from "@/components/WhatsAppButton";

export const metadata: Metadata = {
  title: "Catalogue Voitures | Location Auto Marrakech",
  description:
    "Parcourez notre flotte de voitures à louer à Marrakech. Économique, SUV, luxe — tous avec assurance incluse. Prix dès 200 MAD/jour.",
  alternates: { canonical: "https://www.setocar.com/cars" },
  openGraph: {
    title: "Catalogue Voitures Marrakech | Setocar",
    description: "Flotte complète de véhicules disponibles à Marrakech.",
    url: "https://www.setocar.com/cars",
  },
};

const categoriesFilter = [
  { value: "all",     label: "Tous les véhicules" },
  { value: "economy", label: "Économique" },
  { value: "suv",     label: "SUV" },
  { value: "luxury",  label: "Luxe" },
];

interface CarsPageProps {
  searchParams: { category?: string };
}

export default function CarsPage({ searchParams }: CarsPageProps) {
  const allCars = getCars();
  const category = searchParams.category || "all";
  const cars = category === "all" ? allCars : allCars.filter(c => c.category === category);
  return (
    <>
      <Navbar />

      {/* ── Page Header ───────────────────────────────── */}
      <section
        style={{
          background: "linear-gradient(135deg, #111520 0%, #1c2133 100%)",
          padding: "8rem 1.5rem 4rem",
          textAlign: "center",
          borderBottom: "1px solid #2a3050",
        }}
      >
        <div style={{ maxWidth: 800, margin: "0 auto" }}>
          <span
            style={{
              display: "inline-block",
              background: "rgba(232,92,26,0.15)",
              border: "1px solid rgba(232,92,26,0.35)",
              color: "#e85c1a",
              padding: "0.35rem 1.1rem",
              borderRadius: "2rem",
              fontFamily: "var(--font-montserrat)",
              fontSize: "0.8rem",
              fontWeight: 700,
              textTransform: "uppercase" as const,
              letterSpacing: "0.08em",
              marginBottom: "1.25rem",
            }}
          >
            🚗 {cars.length} véhicules disponibles
          </span>
          <h1
            style={{
              fontFamily: "var(--font-oswald)",
              fontSize: "clamp(2rem, 5vw, 3.5rem)",
              color: "white",
              marginBottom: "1rem",
              letterSpacing: "0.04em",
            }}
          >
            NOTRE FLOTTE À{" "}
            <span style={{ color: "#e85c1a" }}>MARRAKECH</span>
          </h1>
          <p
            style={{
              fontFamily: "var(--font-montserrat)",
              color: "rgba(255,255,255,0.7)",
              fontSize: "1rem",
              lineHeight: 1.7,
              textTransform: "none",
              letterSpacing: 0,
            }}
          >
            Des voitures économiques aux berlines de luxe — tous les véhicules
            incluent l&apos;assurance et le kilométrage illimité.
          </p>
        </div>
      </section>

      {/* ── Category Filter Tabs ──────────────────────── */}
      <section
        style={{
          background: "#1c2133",
          borderBottom: "1px solid #2a3050",
          position: "sticky",
          top: 0,
          zIndex: 100,
          boxShadow: "0 2px 20px rgba(0,0,0,0.4)",
        }}
      >
        <div
          style={{
            maxWidth: 1100,
            margin: "0 auto",
            padding: "0 1.5rem",
            display: "flex",
            gap: "0.25rem",
            overflowX: "auto",
            scrollbarWidth: "none",
          }}
        >
          {categoriesFilter.map((cat) => (
            <a
              key={cat.value}
              href={cat.value === "all" ? "/cars" : `/cars?category=${cat.value}`}
              className="cat-filter-link"
              style={{
                padding: "1rem 1.4rem",
                whiteSpace: "nowrap" as const,
                textDecoration: "none",
                color: "rgba(255,255,255,0.65)",
                fontFamily: "var(--font-montserrat)",
                fontWeight: 600,
                fontSize: "0.85rem",
                borderBottom: "3px solid transparent",
                transition: "all 0.2s",
                display: "block",
                textTransform: "uppercase" as const,
                letterSpacing: "0.05em",
              }}
            >
              {cat.label}
            </a>
          ))}
          <style>{`
            .cat-filter-link:hover {
              color: #e85c1a !important;
              border-bottom-color: #e85c1a !important;
            }
          `}</style>
        </div>
      </section>

      {/* ── Car Grid ──────────────────────────────────── */}
      <section
        style={{
          padding: "3rem 1.5rem 5rem",
          background: "#111520",
          minHeight: "60vh",
        }}
      >
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <p
            style={{
              fontFamily: "var(--font-montserrat)",
              color: "rgba(255,255,255,0.5)",
              fontSize: "0.88rem",
              marginBottom: "2rem",
              textTransform: "none",
              letterSpacing: 0,
            }}
          >
            <strong style={{ color: "white" }}>{cars.length} véhicules</strong>{" "}
            disponibles à Marrakech &nbsp;·&nbsp; ✓ Assurance incluse &nbsp;·&nbsp; ✓ Kilométrage illimité
          </p>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
              gap: "1.5rem",
            }}
          >
            {cars.map((car, i) => (
              <CarCard key={car.id} car={car} priority={i < 3} />
            ))}
          </div>
        </div>
      </section>

      <Footer />
      <WhatsAppButton />
    </>
  );
}