import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const title =
    params.lang === "ar" ? "السيارات والتنقل" : "Mobility & Automotive";
  const description =
    params.lang === "ar"
      ? "حلول مواويد للورش، الميكانيكا، الصيانة وخدمات السيارات"
      : "Mawidi solutions for garages, mechanics, maintenance and automotive services";

  return {
    title: `${title} | ${SITE.brand}`,
    description,
    openGraph: {
      title: `${title} | ${SITE.brand}`,
      description,
      type: "website",
    },
  };
}

export default function MobilityAutomotivePage({
  params,
}: {
  params: { lang: Lang };
}) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;
  const isAr = params.lang === "ar";

  return (
    <main
      className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800"
      dir={dir}
    >
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-brand-ink via-slate-800 to-slate-900 text-white">
        <div className="absolute inset-0 bg-grid-white/5 bg-[size:20px_20px]" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <div className="max-w-4xl">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-sm font-medium mb-6">
              <span className="text-2xl">🚗</span>
              <span>{isAr ? "السيارات والتنقل" : "Mobility & Automotive"}</span>
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
              {isAr
                ? "إدارة حجوزات الورش وصيانة السيارات عبر واتساب"
                : "Manage Auto Service & Maintenance Bookings via WhatsApp"}
            </h1>

            <p className="text-xl md:text-2xl text-slate-200 mb-8 leading-relaxed">
              {isAr
                ? "أتمتة حجز الصيانة، عروض الأسعار، والفواتير لورش السيارات والميكانيكا"
                : "Automate service bookings, quotes, and invoices for auto shops and mechanics"}
            </p>

            <div className="flex flex-col sm:flex-row gap-4 mb-6">
              <Link
                href={`/${params.lang}/signup`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-brand-green text-white hover:bg-brand-green/90 transition-all shadow-lg hover:shadow-xl hover:scale-105"
              >
                {t.getStarted}
              </Link>
              <Link
                href={`/${params.lang}/demo`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-white/10 text-white border-2 border-white/20 hover:bg-white/20 transition-all"
              >
                {t.scheduleDemo}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Service Types */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
            {isAr ? "خدمات السيارات المدعومة" : "Supported Automotive Services"}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
            {isAr
              ? "حلول شاملة لجميع خدمات السيارات"
              : "Comprehensive solutions for all automotive services"}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              icon: "🔧",
              title: isAr ? "ورش الصيانة" : "Maintenance Workshops",
              desc: isAr
                ? "الصيانة الدورية والإصلاحات"
                : "Regular maintenance and repairs",
            },
            {
              icon: "🚙",
              title: isAr ? "المراكز المتخصصة" : "Specialized Centers",
              desc: isAr
                ? "كهرباء، ميكانيكا، تكييف"
                : "Electrical, mechanical, AC",
            },
            {
              icon: "🛞",
              title: isAr ? "محلات الإطارات" : "Tire Shops",
              desc: isAr
                ? "بيع وتركيب الإطارات"
                : "Tire sales and installation",
            },
            {
              icon: "🚗",
              title: isAr ? "غسيل وتلميع السيارات" : "Car Wash & Detailing",
              desc: isAr ? "غسيل، تلميع وعناية" : "Washing, polishing and care",
            },
            {
              icon: "🛠️",
              title: isAr ? "الإصلاحات السريعة" : "Quick Repairs",
              desc: isAr
                ? "إصلاحات طارئة وسريعة"
                : "Emergency and quick repairs",
            },
            {
              icon: "🚑",
              title: isAr ? "خدمات الإنقاذ" : "Roadside Assistance",
              desc: isAr
                ? "سحب السيارات والطوارئ"
                : "Towing and emergency services",
            },
          ].map((service) => (
            <div
              key={service.title}
              className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6"
            >
              <div className="text-4xl mb-4">{service.icon}</div>
              <h3 className="text-xl font-semibold text-brand-ink dark:text-white mb-3">
                {service.title}
              </h3>
              <p className="text-slate-600 dark:text-slate-300">
                {service.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Key Features */}
      <section className="bg-slate-50 dark:bg-slate-900/50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
              {isAr ? "المميزات الأساسية" : "Key Features"}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-8">
              <h3 className="text-2xl font-bold text-brand-ink dark:text-white mb-6">
                {isAr ? "الحجز والجدولة" : "Booking & Scheduling"}
              </h3>
              <ul className="space-y-4">
                {[
                  isAr
                    ? "حجز فوري لمواعيد الصيانة"
                    : "Instant maintenance booking",
                  isAr
                    ? "جدولة الأعمال والفنيين"
                    : "Job and technician scheduling",
                  isAr
                    ? "تذكيرات تلقائية للعملاء"
                    : "Automatic customer reminders",
                  isAr ? "تتبع حالة السيارة" : "Vehicle status tracking",
                ].map((feature) => (
                  <li key={feature} className="flex items-start gap-3">
                    <span className="text-brand-green text-xl mt-1">✓</span>
                    <span className="text-slate-700 dark:text-slate-300">
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-8">
              <h3 className="text-2xl font-bold text-brand-ink dark:text-white mb-6">
                {isAr ? "عروض الأسعار والفواتير" : "Quotes & Invoicing"}
              </h3>
              <ul className="space-y-4">
                {[
                  isAr ? "عروض أسعار فورية" : "Instant price quotes",
                  isAr ? "فواتير رقمية مفصلة" : "Detailed digital invoices",
                  isAr
                    ? "معالجة المدفوعات الآمنة"
                    : "Secure payment processing",
                  isAr ? "سجل كامل للخدمات" : "Complete service history",
                ].map((feature) => (
                  <li key={feature} className="flex items-start gap-3">
                    <span className="text-brand-green text-xl mt-1">✓</span>
                    <span className="text-slate-700 dark:text-slate-300">
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
            {isAr ? "حالات الاستخدام" : "Use Cases"}
          </h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              icon: "📅",
              title: isAr ? "حجز الصيانة" : "Service Booking",
              desc: isAr
                ? "حجز مواعيد الصيانة الدورية"
                : "Book regular maintenance appointments",
            },
            {
              icon: "💰",
              title: isAr ? "عروض الأسعار" : "Price Quotes",
              desc: isAr
                ? "إرسال عروض أسعار واعتمادها"
                : "Send and approve price quotes",
            },
            {
              icon: "🔔",
              title: isAr ? "تنبيهات الصيانة" : "Maintenance Alerts",
              desc: isAr
                ? "تذكير بمواعيد الصيانة الدورية"
                : "Remind about regular maintenance",
            },
            {
              icon: "📸",
              title: isAr ? "توثيق الأعمال" : "Work Documentation",
              desc: isAr
                ? "مشاركة صور حالة السيارة"
                : "Share vehicle condition photos",
            },
            {
              icon: "⏱️",
              title: isAr ? "تتبع الوقت" : "Time Tracking",
              desc: isAr
                ? "تتبع وقت إنجاز الأعمال"
                : "Track work completion time",
            },
            {
              icon: "💳",
              title: isAr ? "المدفوعات" : "Payments",
              desc: isAr
                ? "معالجة الدفعات والفواتير"
                : "Process payments and invoices",
            },
          ].map((useCase) => (
            <div
              key={useCase.title}
              className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6"
            >
              <div className="text-3xl mb-3">{useCase.icon}</div>
              <h3 className="text-lg font-semibold text-brand-ink dark:text-white mb-2">
                {useCase.title}
              </h3>
              <p className="text-sm text-slate-600 dark:text-slate-300">
                {useCase.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-gradient-to-br from-brand-green to-emerald-600 text-white py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-extrabold mb-6">
            {isAr
              ? "ابدأ في أتمتة ورشتك اليوم"
              : "Start Automating Your Workshop Today"}
          </h2>
          <p className="text-xl mb-8 text-white/90">
            {isAr
              ? "انضم إلى ورش السيارات التي تستخدم مواويد"
              : "Join auto shops using Mawidi"}
          </p>
          <Link
            href={`/${params.lang}/signup`}
            className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-white text-brand-green hover:bg-slate-50 transition-all shadow-lg hover:shadow-xl"
          >
            {t.getStarted}
          </Link>
        </div>
      </section>
    </main>
  );
}