import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { CtaBanner } from "@/components/sections/cta-banner";
import { Coffee, UtensilsCrossed, Building2, Truck, ChevronRight } from "lucide-react";

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://meezi.ir";

export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
  const { locale } = await Promise.resolve(params);
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("solutionsTitle"),
    description: t("solutionsDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/solutions`,
      languages: { fa: `${BASE_URL}/fa/solutions`, en: `${BASE_URL}/en/solutions` },
    },
    openGraph: { title: t("solutionsTitle"), description: t("solutionsDesc"), url: `${BASE_URL}/${locale}/solutions` },
  };
}

const SOLUTIONS = [
  {
    icon: Coffee,
    titleFa: "کافه‌ها",
    titleEn: "Cafes",
    descFa: "برای کافه‌های کوچک تا متوسط که می‌خواهند سرعت سرویس‌دهی را بالا ببرند و تجربه مشتری را بهبود دهند.",
    descEn: "For small to medium cafes looking to increase service speed and improve customer experience.",
    featuresFa: ["منوی QR روی هر میز", "سفارش‌گیری آنلاین", "مدیریت صف", "گزارش روزانه فروش"],
    featuresEn: ["QR menu on every table", "Online ordering", "Queue management", "Daily sales report"],
    color: "from-brand-600 to-brand-800",
    light: "bg-brand-50",
  },
  {
    icon: UtensilsCrossed,
    titleFa: "رستوران‌ها",
    titleEn: "Restaurants",
    descFa: "برای رستوران‌هایی با منوی بزرگ‌تر، آشپزخانه‌های پیچیده‌تر و نیاز به مدیریت چندین ایستگاه آشپزخانه.",
    descEn: "For restaurants with larger menus, complex kitchens, and multiple kitchen station management.",
    featuresFa: ["سیستم KDS آشپزخانه", "مدیریت موجودی مواد اولیه", "رزرو میز", "گزارش‌های پیشرفته"],
    featuresEn: ["Kitchen Display System", "Ingredient inventory", "Table reservations", "Advanced reports"],
    color: "from-amber-500 to-amber-700",
    light: "bg-amber-50",
  },
  {
    icon: Building2,
    titleFa: "زنجیره‌های چند شعبه‌ای",
    titleEn: "Multi-Branch Chains",
    descFa: "برای برندهایی با چندین شعبه که می‌خواهند از یک داشبورد مرکزی همه شعبه‌ها را مدیریت و مقایسه کنند.",
    descEn: "For brands with multiple branches who want to manage and compare all locations from one central dashboard.",
    featuresFa: ["داشبورد مرکزی چند شعبه", "مقایسه عملکرد شعبه‌ها", "منوی مشترک با override شعبه", "مدیریت کارکنان متمرکز"],
    featuresEn: ["Central multi-branch dashboard", "Branch performance comparison", "Shared menu with branch overrides", "Centralized staff management"],
    color: "from-blue-600 to-blue-800",
    light: "bg-blue-50",
  },
  {
    icon: Truck,
    titleFa: "کافه‌های ابری",
    titleEn: "Cloud Kitchens",
    descFa: "برای کافه‌های ابری و ghost kitchen‌هایی که بدون فضای فیزیکی سفارش‌ها را مدیریت می‌کنند.",
    descEn: "For cloud kitchens and ghost kitchens managing orders without a physical dining space.",
    featuresFa: ["مدیریت سفارش‌های آنلاین", "یکپارچگی با پلتفرم‌های تحویل", "گزارش سود و زیان", "مدیریت پیک‌ها"],
    featuresEn: ["Online order management", "Delivery platform integration", "P&L reports", "Courier management"],
    color: "from-purple-600 to-purple-800",
    light: "bg-purple-50",
  },
];

export default async function SolutionsPage({ params }: { params: { locale: string } }) {
  const { locale } = await Promise.resolve(params);
  const isEn = locale === "en";
  const base = `/${locale}`;

  return (
    <>
      <Navbar />
      <main className="pt-16">
        {/* Hero */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 py-20 text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold text-white/80">
            {isEn ? "Solutions" : "راهکارها"}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">
            {isEn ? "Built for every food business" : "برای هر نوع کسب‌وکار غذایی"}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/60">
            {isEn
              ? "Whether you run a single cafe or a chain of 20 restaurants — Meezi scales with you."
              : "چه یک کافه داشته باشید چه یک زنجیره ۲۰ شعبه‌ای — میزی با شما رشد می‌کند."}
          </p>
        </div>

        {/* Solutions */}
        <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="space-y-12">
            {SOLUTIONS.map((sol, i) => (
              <div key={sol.titleFa} className={`grid items-center gap-8 lg:grid-cols-2 ${i % 2 === 1 ? "lg:grid-flow-dense" : ""}`}>
                {/* Visual */}
                <div className={i % 2 === 1 ? "lg:col-start-2" : ""}>
                  <div className={`flex h-56 items-center justify-center rounded-2xl bg-gradient-to-br ${sol.color}`}>
                    <sol.icon className="h-20 w-20 text-white/60" />
                  </div>
                </div>
                {/* Text */}
                <div>
                  <div className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl ${sol.light}`}>
                    <sol.icon className="h-6 w-6 text-gray-700" />
                  </div>
                  <h2 className="mb-3 text-2xl font-bold text-gray-900">
                    {isEn ? sol.titleEn : sol.titleFa}
                  </h2>
                  <p className="mb-5 text-gray-500 leading-relaxed">
                    {isEn ? sol.descEn : sol.descFa}
                  </p>
                  <ul className="mb-6 space-y-2">
                    {(isEn ? sol.featuresEn : sol.featuresFa).map((f) => (
                      <li key={f} className="flex items-center gap-2 text-sm text-gray-700">
                        <div className="h-1.5 w-1.5 rounded-full bg-brand-700" />
                        {f}
                      </li>
                    ))}
                  </ul>
                  <a href={`${base}/demo`} className="inline-flex items-center gap-1.5 rounded-xl bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-800 transition-colors">
                    {isEn ? "Request Demo" : "درخواست دمو"}
                    <ChevronRight className="h-4 w-4" />
                  </a>
                </div>
              </div>
            ))}
          </div>
        </section>

        <CtaBanner />
      </main>
      <Footer />
    </>
  );
}