import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import {
  Code2,
  Megaphone,
  HeadphonesIcon,
  TrendingUp,
  Heart,
  Users,
  Zap,
  Globe,
  Coffee,
  MapPin,
  Clock,
  ArrowLeft,
  ArrowRight,
} from "lucide-react";

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("careersTitle") };
}

const fa = {
  badge: "بیا با ما بساز",
  title: "به تیم میزی بپیوند",
  subtitle:
    "ما داریم نحوه مدیریت کافه‌ها و رستوران‌های ایران را متحول می‌کنیم. اگر به فناوری، کافه‌ها و ساختن چیزهای واقعی علاقه داری — جای تو اینجاست.",
  whyTitle: "چرا میزی؟",
  openTitle: "موقعیت‌های باز",
  noJobsNote: "در حال حاضر موقعیت باز نداریم — اما همیشه دنبال آدم‌های خوب هستیم.",
  spontaneousTitle: "درخواست خودجوش",
  spontaneousDesc:
    "موقعیت مناسبی ندیدی؟ رزومه‌ات را بفرست. اگر فیت باشی، حتماً با تو در تماس خواهیم بود.",
  ctaEmail: "careers@meezi.ir",
  ctaButton: "ارسال رزومه",
  perks: [
    { icon: Coffee, title: "کافه هم‌تیمی", desc: "هر هفته با تیم در یک کافه مختلف کار می‌کنیم." },
    { icon: Zap, title: "رشد سریع", desc: "محصولی که واقعاً استفاده می‌شه — تاثیر کارت رو لمس می‌کنی." },
    { icon: Heart, title: "فرهنگ سالم", desc: "بدون اضافه‌کاری اجباری، بدون پلیتیک، مستقیم." },
    { icon: Globe, title: "ریموت فرندلی", desc: "ترکیب حضوری و ریموت — بر اساس نقش و توافق." },
    { icon: TrendingUp, title: "سهام و رشد", desc: "شرکت در موفقیت میزی از طریق برنامه سهام." },
    { icon: Users, title: "تیم کوچک و چابک", desc: "صدایت شنیده می‌شود. تصمیم‌ها سریع گرفته می‌شوند." },
  ],
  jobs: [
    {
      title: "فول‌استک دولوپر (Next.js / .NET)",
      team: "مهندسی",
      type: "تمام‌وقت",
      location: "تهران / ریموت",
      desc: "داشبورد مرچنت، QR menu و API را توسعه می‌دهی. تجربه با Next.js و ASP.NET Core لازم است.",
    },
    {
      title: "UI/UX دیزاینر",
      team: "محصول",
      type: "تمام‌وقت",
      location: "تهران / ریموت",
      desc: "تجربه کاربری مرچنت‌ها و مشتریان کافه را طراحی می‌کنی. Figma و دانش RTL ضروری است.",
    },
    {
      title: "کارشناس فروش B2B",
      team: "فروش",
      type: "تمام‌وقت",
      location: "تهران",
      desc: "کافه‌ها و رستوران‌ها را آنبورد می‌کنی و در رشد پایه مشتریان میزی نقش مستقیم داری.",
    },
  ],
};

const en = {
  badge: "Come build with us",
  title: "Join the Meezi Team",
  subtitle:
    "We're transforming how cafes and restaurants across Iran are managed. If you care about technology, coffee shops, and building real things — this is your place.",
  whyTitle: "Why Meezi?",
  openTitle: "Open Positions",
  noJobsNote: "No open positions right now — but we're always looking for great people.",
  spontaneousTitle: "Spontaneous Application",
  spontaneousDesc:
    "Didn't find the right role? Send your CV anyway. If there's a fit, we'll reach out.",
  ctaEmail: "careers@meezi.ir",
  ctaButton: "Send your CV",
  perks: [
    { icon: Coffee, title: "Team Cafe Days", desc: "Every week we work together from a different cafe." },
    { icon: Zap, title: "Fast Impact", desc: "A product that's actually used — you'll feel your work's effect." },
    { icon: Heart, title: "Healthy Culture", desc: "No forced overtime, no politics, direct communication." },
    { icon: Globe, title: "Remote Friendly", desc: "Hybrid in-person and remote, based on role and agreement." },
    { icon: TrendingUp, title: "Equity & Growth", desc: "Share in Meezi's success through our equity program." },
    { icon: Users, title: "Small & Agile Team", desc: "Your voice is heard. Decisions are made quickly." },
  ],
  jobs: [
    {
      title: "Full-Stack Developer (Next.js / .NET)",
      team: "Engineering",
      type: "Full-time",
      location: "Tehran / Remote",
      desc: "You'll build the merchant dashboard, QR menu, and API. Experience with Next.js and ASP.NET Core required.",
    },
    {
      title: "UI/UX Designer",
      team: "Product",
      type: "Full-time",
      location: "Tehran / Remote",
      desc: "Design the experience for cafe merchants and their customers. Figma and RTL knowledge required.",
    },
    {
      title: "B2B Sales Specialist",
      team: "Sales",
      type: "Full-time",
      location: "Tehran",
      desc: "You'll onboard cafes and restaurants and play a direct role in growing Meezi's customer base.",
    },
  ],
};

export default async function CareersPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const c = locale === "fa" ? fa : en;
  const Arrow = locale === "fa" ? ArrowLeft : ArrowRight;

  return (
    <>
      <Navbar />
      <main className="pt-16">
        {/* Hero */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 pb-20 pt-16 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">
            {c.badge}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-5xl">{c.title}</h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/60">{c.subtitle}</p>
        </div>

        {/* Why Meezi */}
        <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
          <h2 className="mb-12 text-center text-2xl font-extrabold text-gray-900 sm:text-3xl">
            {c.whyTitle}
          </h2>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {c.perks.map(({ icon: Icon, title, desc }) => (
              <div
                key={title}
                className="flex gap-4 rounded-2xl border border-gray-100 bg-white p-6 shadow-sm"
              >
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50">
                  <Icon className="h-5 w-5 text-brand-700" />
                </div>
                <div>
                  <h3 className="mb-1 font-semibold text-gray-900">{title}</h3>
                  <p className="text-sm leading-relaxed text-gray-500">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Open Positions */}
        <section className="bg-gray-50/60 py-20">
          <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-10 text-2xl font-extrabold text-gray-900 sm:text-3xl">
              {c.openTitle}
            </h2>
            <div className="space-y-4">
              {c.jobs.map((job) => (
                <div
                  key={job.title}
                  className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
                >
                  <div className="flex flex-wrap items-start justify-between gap-4">
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">{job.title}</h3>
                      <p className="mt-1 text-sm leading-relaxed text-gray-500">{job.desc}</p>
                    </div>
                    <a
                      href={`mailto:${c.ctaEmail}?subject=${encodeURIComponent(job.title)}`}
                      className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-800"
                    >
                      {c.ctaButton}
                      <Arrow className="h-4 w-4" />
                    </a>
                  </div>
                  <div className="mt-4 flex flex-wrap gap-2">
                    {[job.team, job.type, job.location].map((tag) => (
                      <span
                        key={tag}
                        className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600"
                      >
                        {tag.includes("Tehran") || tag.includes("تهران") ? (
                          <MapPin className="h-3 w-3" />
                        ) : tag.includes("وقت") || tag.includes("time") ? (
                          <Clock className="h-3 w-3" />
                        ) : (
                          <Users className="h-3 w-3" />
                        )}
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Spontaneous CTA */}
            <div className="mt-10 rounded-2xl border border-brand-100 bg-brand-50 p-8 text-center">
              <h3 className="mb-2 text-lg font-bold text-gray-900">{c.spontaneousTitle}</h3>
              <p className="mb-5 text-sm text-gray-600">{c.spontaneousDesc}</p>
              <a
                href={`mailto:${c.ctaEmail}`}
                className="inline-flex items-center gap-2 rounded-xl bg-brand-700 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-800"
              >
                {c.ctaEmail}
                <Arrow className="h-4 w-4" />
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
