"use client";

import { useLocale } from "next-intl";
import { Shield, Award, Headphones, Zap } from "lucide-react";

const TRUST_ITEMS_FA = [
  { icon: Shield, text: "داده‌های شما در سرور ایران", sub: "رمزگذاری TLS" },
  { icon: Zap, text: "راه‌اندازی در کمتر از ۲۴ ساعت", sub: "بدون نیاز به IT" },
  { icon: Award, text: "بیش از ۵۰۰ کافه فعال", sub: "از تهران تا اصفهان" },
  { icon: Headphones, text: "پشتیبانی فارسی‌زبان", sub: "در ساعات کاری" },
];

const TRUST_ITEMS_EN = [
  { icon: Shield, text: "Data stored in Iran", sub: "TLS encryption" },
  { icon: Zap, text: "Live in under 24 hours", sub: "No IT team needed" },
  { icon: Award, text: "500+ active cafes", sub: "Across Iran" },
  { icon: Headphones, text: "Persian-language support", sub: "During business hours" },
];

const CITIES_FA = ["تهران", "اصفهان", "مشهد", "شیراز", "کرج", "تبریز", "اهواز"];
const CITIES_EN = ["Tehran", "Isfahan", "Mashhad", "Shiraz", "Karaj", "Tabriz", "Ahvaz"];

export function TrustBar() {
  const locale = useLocale();
  const isRtl = locale === "fa";
  const items = isRtl ? TRUST_ITEMS_FA : TRUST_ITEMS_EN;
  const cities = isRtl ? CITIES_FA : CITIES_EN;

  return (
    <section className="border-y border-gray-100 bg-white py-8">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Trust items */}
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          {items.map((item) => (
            <div key={item.text} className="flex items-start gap-3">
              <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-50">
                <item.icon className="h-4 w-4 text-brand-700" />
              </div>
              <div>
                <p className="text-xs font-semibold text-gray-800 leading-tight">{item.text}</p>
                <p className="mt-0.5 text-[11px] text-gray-400">{item.sub}</p>
              </div>
            </div>
          ))}
        </div>

        {/* City presence */}
        <div className="mt-6 flex flex-wrap items-center gap-x-3 gap-y-1.5">
          <span className="text-[11px] font-medium text-gray-400">
            {isRtl ? "فعال در:" : "Active in:"}
          </span>
          {cities.map((city) => (
            <span
              key={city}
              className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-medium text-gray-600"
            >
              <span className="h-1.5 w-1.5 rounded-full bg-brand-400" />
              {city}
            </span>
          ))}
          <span className="text-[11px] text-gray-400">
            {isRtl ? "و ۳۰+ شهر دیگر" : "& 30+ more cities"}
          </span>
        </div>
      </div>
    </section>
  );
}
