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 { JsonLd } from "@/components/seo/json-ld";
import {
  QrCode, ShoppingCart, BarChart3, Users, Package,
  Building2, Bell, Printer, Smartphone, Shield, Zap, HeartHandshake,
} from "lucide-react";

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

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("featuresTitle"),
    description: t("featuresDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/features`,
      languages: { fa: `${BASE_URL}/fa/features`, en: `${BASE_URL}/en/features` },
    },
    openGraph: {
      title: t("featuresTitle"),
      description: t("featuresDesc"),
      url: `${BASE_URL}/${locale}/features`,
      images: [{ url: `${BASE_URL}/api/og?t=${encodeURIComponent(t("featuresTitle"))}&s=${encodeURIComponent(t("featuresDesc"))}&rtl=${locale === "fa" ? "1" : "0"}`, width: 1200, height: 630 }],
    },
  };
}

const ALL_FEATURES = [
  { icon: QrCode,        keyFa: "منوی دیجیتال QR",         keyEn: "QR Digital Menu",          descFa: "مشتریان با اسکن کد QR روی میز مستقیماً سفارش می‌دهند. بدون نیاز به گارسون، بدون خطای انسانی. منو همیشه به‌روز، تغییر قیمت با یک کلیک.", descEn: "Customers scan the QR code and order directly. No waiter needed, zero errors. Update prices instantly.", color: "bg-brand-50 text-brand-700", badge: "پرطرفدار" },
  { icon: ShoppingCart,  keyFa: "سیستم فروش (POS)",         keyEn: "Point of Sale (POS)",        descFa: "صندوق فروش هوشمند با پشتیبانی از پرداخت نقدی، کارتخوان و آنلاین. تقسیم صورت‌حساب، تخفیف و کوپن.", descEn: "Smart POS supporting cash, card, and online payments. Bill splitting, discounts, and coupons.", color: "bg-amber-50 text-amber-700" },
  { icon: BarChart3,     keyFa: "تحلیل و گزارش‌گیری",      keyEn: "Analytics & Reports",        descFa: "آمار فروش لحظه‌ای، پرفروش‌ترین محصولات، تحلیل ساعت پیک و مقایسه شعبه‌ها. تصمیم‌های مبتنی بر داده.", descEn: "Real-time sales, best sellers, peak-hour analysis, and branch comparison. Data-driven decisions.", color: "bg-blue-50 text-blue-700", badge: "جدید" },
  { icon: Users,         keyFa: "مدیریت کارکنان",           keyEn: "Staff Management",           descFa: "حضور و غیاب با QR، شیفت‌بندی خودکار، مرخصی، عملکرد و دسترسی نقش‌محور برای هر کارمند.", descEn: "QR attendance, automatic shift scheduling, leaves, performance tracking, and role-based access.", color: "bg-purple-50 text-purple-700" },
  { icon: Package,       keyFa: "مدیریت موجودی",            keyEn: "Inventory Management",       descFa: "کنترل خودکار مواد اولیه، هشدار کمبود موجودی، گزارش مصرف روزانه و تاریخچه تامین.", descEn: "Automatic ingredient tracking, low-stock alerts, daily consumption reports, and supply history.", color: "bg-rose-50 text-rose-700" },
  { icon: Building2,     keyFa: "مدیریت چند شعبه",         keyEn: "Multi-Branch Management",    descFa: "تمام شعبه‌هایتان را از یک داشبورد مرکزی مدیریت کنید. مقایسه عملکرد و تنظیمات جداگانه.", descEn: "Manage all branches from one central dashboard. Compare performance and configure separately.", color: "bg-teal-50 text-teal-700" },
  { icon: Bell,          keyFa: "اعلان‌های لحظه‌ای",       keyEn: "Real-time Notifications",    descFa: "گارسون‌ها اعلان فوری برای سفارش جدید، درخواست مشتری و آماده شدن غذا دریافت می‌کنند.", descEn: "Waiters get instant alerts for new orders, customer calls, and kitchen-ready notifications.", color: "bg-orange-50 text-orange-700" },
  { icon: Printer,       keyFa: "چاپ فیش آشپزخانه",       keyEn: "Kitchen Receipt Printing",   descFa: "فیش سفارش به‌صورت خودکار به پرینتر آشپزخانه ارسال می‌شود. سفارشی‌سازی قالب فیش.", descEn: "Orders auto-print to the kitchen printer. Customizable receipt templates.", color: "bg-gray-100 text-gray-700" },
  { icon: Smartphone,    keyFa: "اپ موبایل گارسون",        keyEn: "Waiter Mobile App",         descFa: "اپلیکیشن اندروید و iOS برای گارسون‌ها — مدیریت میزها، دریافت سفارش و تأیید پرداخت.", descEn: "Android and iOS app for waiters — table management, order taking, payment confirmation.", color: "bg-indigo-50 text-indigo-700" },
  { icon: Shield,        keyFa: "امنیت و پشتیبان‌گیری",   keyEn: "Security & Backups",         descFa: "رمزگذاری TLS، پشتیبان‌گیری خودکار روزانه، سرورهای ایرانی و آپ‌تایم ۹۹.۹٪.", descEn: "TLS encryption, daily automatic backups, Iranian servers, and 99.9% uptime SLA.", color: "bg-green-50 text-green-700" },
  { icon: Zap,           keyFa: "سیستم صف و نوبت‌دهی",   keyEn: "Queue Management",           descFa: "سیستم نوبت‌دهی دیجیتال برای مدیریت صف مشتریان در اوج ساعات شلوغی.", descEn: "Digital queue system for managing customer wait lines during peak hours.", color: "bg-yellow-50 text-yellow-700" },
  { icon: HeartHandshake,keyFa: "مدیریت مشتریان (CRM)",   keyEn: "Customer Management (CRM)",  descFa: "پروفایل مشتریان، تاریخچه سفارش، کوپن شخصی‌سازی‌شده و برنامه وفاداری.", descEn: "Customer profiles, order history, personalized coupons, and loyalty programs.", color: "bg-pink-50 text-pink-700" },
];

function FeatureGrid({ locale }: { locale: string }) {
  const isEn = locale === "en";
  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {ALL_FEATURES.map((f) => (
        <div key={f.keyFa} className="relative group rounded-2xl border border-gray-100 bg-white p-6 shadow-sm hover:-translate-y-1 hover:shadow-md transition-all duration-200">
          {f.badge && (
            <span className="absolute end-4 top-4 rounded-full bg-brand-700 px-2 py-0.5 text-[10px] font-bold text-white">
              {f.badge}
            </span>
          )}
          <div className={`mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl ${f.color}`}>
            <f.icon className="h-5 w-5" />
          </div>
          <h3 className="mb-2 text-base font-semibold text-gray-900">
            {isEn ? f.keyEn : f.keyFa}
          </h3>
          <p className="text-sm leading-relaxed text-gray-500">
            {isEn ? f.descEn : f.descFa}
          </p>
        </div>
      ))}
    </div>
  );
}

export default async function FeaturesPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const isEn = locale === "en";

  return (
    <>
      <JsonLd type="SoftwareApplication" locale={locale} />
      <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 ? "Features" : "امکانات"}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl lg:text-5xl">
            {isEn ? "Everything your cafe needs" : "همه‌چیز که کافه شما نیاز دارد"}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/60">
            {isEn
              ? "12 powerful modules, one unified platform. Scale from a single cafe to a chain."
              : "۱۲ ماژول قدرتمند، یک پلتفرم یکپارچه. از یک کافه تا یک زنجیره چند شعبه‌ای."}
          </p>
        </div>

        {/* Grid */}
        <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          <FeatureGrid locale={locale} />
        </section>

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