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 { Target, Heart, Lightbulb } 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("aboutTitle"),
    description: t("aboutDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/about`,
      languages: { fa: `${BASE_URL}/fa/about`, en: `${BASE_URL}/en/about` },
    },
    openGraph: { title: t("aboutTitle"), description: t("aboutDesc"), url: `${BASE_URL}/${locale}/about` },
  };
}

const VALUES = [
  {
    icon: Target,
    titleFa: "مأموریت",
    titleEn: "Mission",
    descFa: "کمک به هزاران کافه و رستوران ایرانی تا با فناوری دیجیتال سودآورتر و کارآمدتر کار کنند.",
    descEn: "Help thousands of Iranian cafes and restaurants work more profitably and efficiently with digital technology.",
  },
  {
    icon: Heart,
    titleFa: "ارزش‌ها",
    titleEn: "Values",
    descFa: "سادگی، قابلیت اطمینان و خدمات عالی به مشتری — ما برای موفقیت شما اینجا هستیم.",
    descEn: "Simplicity, reliability, and excellent customer service — we're here for your success.",
  },
  {
    icon: Lightbulb,
    titleFa: "چشم‌انداز",
    titleEn: "Vision",
    descFa: "تبدیل شدن به زیرساخت دیجیتال اصلی صنعت مهمان‌نوازی ایران.",
    descEn: "Becoming the core digital infrastructure for Iran's hospitality industry.",
  },
];

const STATS = [
  { valueFa: "۲۰۲۲", valueEn: "2022", labelFa: "سال تأسیس", labelEn: "Founded" },
  { valueFa: "۵۰۰+", valueEn: "500+", labelFa: "کافه فعال", labelEn: "Active cafes" },
  { valueFa: "۱۲+", valueEn: "12+", labelFa: "نفر تیم", labelEn: "Team members" },
  { valueFa: "تهران", valueEn: "Tehran", labelFa: "مقر اصلی", labelEn: "Headquartered" },
];

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

  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 ? "About" : "درباره ما"}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">
            {isEn ? "Built in Iran, for Iran" : "ساخته‌شده در ایران، برای ایران"}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/60">
            {isEn
              ? "Meezi was born from a simple insight: cafe owners in Iran deserve world-class digital tools."
              : "میزی از یک درک ساده متولد شد: صاحبان کافه در ایران لایق ابزارهای دیجیتال در سطح جهانی هستند."}
          </p>
        </div>

        {/* Story */}
        <section className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="prose prose-lg max-w-none text-gray-600">
            {isEn ? (
              <>
                <p>In 2022, our founding team visited dozens of cafes and restaurants across Tehran and saw the same pain: paper menus, handwritten orders, end-of-day cash counting, and no visibility into what's actually selling.</p>
                <p>We built Meezi to fix that. A platform that's powerful enough for a growing chain, but simple enough for a single-location cafe owner who's never used software before.</p>
                <p>Today, Meezi powers 500+ cafes and restaurants across Iran. We're a small, passionate team based in Tehran, and we're just getting started.</p>
              </>
            ) : (
              <>
                <p>در سال ۱۴۰۱، تیم بنیان‌گذار ما ده‌ها کافه و رستوران در تهران را بازدید کرد و همان درد را دید: منوهای کاغذی، سفارش‌های دستی، شمارش نقدی آخر روز و هیچ دیدی نسبت به اینکه واقعاً چه چیزی می‌فروشند.</p>
                <p>میزی را برای رفع این مشکل ساختیم. پلتفرمی که به اندازه کافی قدرتمند برای یک زنجیره در حال رشد است، اما به اندازه کافی ساده برای صاحب یک کافه تک‌شعبه‌ای که تا به حال از نرم‌افزار استفاده نکرده.</p>
                <p>امروز، میزی بیش از ۵۰۰ کافه و رستوران در ایران را پشتیبانی می‌کند. ما یک تیم کوچک و پرانرژی در تهران هستیم و تازه شروع کرده‌ایم.</p>
              </>
            )}
          </div>

          {/* Stats */}
          <div className="mt-12 grid grid-cols-2 gap-6 sm:grid-cols-4">
            {STATS.map((s) => (
              <div key={s.valueFa} className="rounded-2xl border border-gray-100 bg-white p-5 text-center shadow-sm">
                <div className="text-2xl font-extrabold text-brand-700">{isEn ? s.valueEn : s.valueFa}</div>
                <div className="mt-1 text-xs text-gray-500">{isEn ? s.labelEn : s.labelFa}</div>
              </div>
            ))}
          </div>

          {/* Values */}
          <div className="mt-16 grid gap-6 sm:grid-cols-3">
            {VALUES.map((v) => (
              <div key={v.titleFa} className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50">
                  <v.icon className="h-5 w-5 text-brand-700" />
                </div>
                <h3 className="mb-2 text-base font-semibold text-gray-900">{isEn ? v.titleEn : v.titleFa}</h3>
                <p className="text-sm leading-relaxed text-gray-500">{isEn ? v.descEn : v.descFa}</p>
              </div>
            ))}
          </div>
        </section>

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