import { useTranslations } from "next-intl";
import { Bell, LayoutGrid, ChefHat, Clock, Check } from "lucide-react";

const FEATURES_ICONS = [Bell, LayoutGrid, ChefHat, Clock];

export function AppPromo() {
  const t = useTranslations("appPromo");
  const features = [
    t("feature1"),
    t("feature2"),
    t("feature3"),
    t("feature4"),
  ];

  return (
    <section className="overflow-hidden py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
          {/* Phone mockup */}
          <div className="flex justify-center">
            <div className="relative">
              {/* Glow */}
              <div
                aria-hidden
                className="absolute inset-0 scale-90 rounded-[2rem] bg-brand-700/15 blur-3xl"
              />
              {/* Phone frame */}
              <div className="relative h-[520px] w-[260px] rounded-[2.5rem] border-4 border-gray-900 bg-gray-900 shadow-2xl shadow-gray-900/40">
                {/* Notch */}
                <div className="absolute inset-x-0 top-0 flex justify-center">
                  <div className="h-6 w-28 rounded-b-2xl bg-gray-900" />
                </div>
                {/* Screen */}
                <div className="absolute inset-1 overflow-hidden rounded-[2rem] bg-gray-50">
                  {/* Status bar */}
                  <div className="flex items-center justify-between bg-brand-700 px-5 pt-8 pb-3">
                    <span className="text-[10px] font-semibold text-white/80">۱۰:۳۰</span>
                    <span className="text-xs font-bold text-white">اپ گارسون میزی</span>
                    <span className="text-[10px] text-white/80">●●●</span>
                  </div>

                  {/* Notifications */}
                  <div className="space-y-2 p-3">
                    {[
                      { title: "سفارش جدید", sub: "میز ۵ — قهوه ترک × ۲", time: "الان", dot: "bg-green-500" },
                      { title: "درخواست گارسون", sub: "میز ۱۲ — لطفاً بیایید", time: "۲ دقیقه پیش", dot: "bg-amber-500" },
                      { title: "سفارش آماده", sub: "میز ۳ — کیک شکلاتی", time: "۵ دقیقه پیش", dot: "bg-brand-500" },
                    ].map((n, i) => (
                      <div
                        key={i}
                        className="flex items-start gap-2.5 rounded-xl bg-white p-2.5 shadow-sm"
                      >
                        <span className={`mt-1 h-2 w-2 shrink-0 rounded-full ${n.dot}`} />
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center justify-between">
                            <span className="text-[11px] font-semibold text-gray-800">{n.title}</span>
                            <span className="text-[9px] text-gray-400">{n.time}</span>
                          </div>
                          <span className="text-[10px] text-gray-500">{n.sub}</span>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Table grid */}
                  <div className="mx-3 mt-1 rounded-xl bg-white p-3 shadow-sm">
                    <div className="mb-2 text-[10px] font-semibold text-gray-700">وضعیت میزها</div>
                    <div className="grid grid-cols-4 gap-1.5">
                      {[
                        "bg-green-100 text-green-700",
                        "bg-amber-100 text-amber-700",
                        "bg-amber-100 text-amber-700",
                        "bg-gray-100 text-gray-400",
                        "bg-brand-100 text-brand-700",
                        "bg-green-100 text-green-700",
                        "bg-gray-100 text-gray-400",
                        "bg-amber-100 text-amber-700",
                      ].map((cls, i) => (
                        <div
                          key={i}
                          className={`flex h-8 w-full items-center justify-center rounded-lg text-[9px] font-bold ${cls}`}
                        >
                          {i + 1}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Text */}
          <div>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">
              {t("badge")}
            </span>
            <h2 className="mt-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
              {t("title")}
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-gray-500">{t("subtitle")}</p>

            <ul className="mt-8 space-y-3">
              {features.map((f, i) => {
                const Icon = FEATURES_ICONS[i];
                return (
                  <li key={i} className="flex items-center gap-3">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-50">
                      <Icon className="h-4 w-4 text-brand-700" />
                    </div>
                    <span className="text-sm font-medium text-gray-700">{f}</span>
                  </li>
                );
              })}
            </ul>

            {/* Download buttons */}
            <div className="mt-8 flex flex-wrap gap-3">
              <button
                disabled
                className="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-900 px-4 py-2.5 text-sm font-medium text-white opacity-80"
              >
                <svg className="h-5 w-5 fill-white" viewBox="0 0 24 24">
                  <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.7 9.05 7.07c1.32.16 2.22.98 3.0.98.82 0 2.36-1.14 3.95-.97 1.37.15 2.48.82 3.21 1.96-3.15 1.8-2.56 5.79.38 7.1-.66 1.61-1.53 3.22-2.54 4.14zM12.03 7.02C11.66 4.56 14.01 2.5 16.3 2c.25 2.62-2.37 4.75-4.27 5.02z" />
                </svg>
                {t("downloadIos")}
                <span className="rounded bg-white/20 px-1.5 py-0.5 text-[10px]">{t("comingSoon")}</span>
              </button>
              <button
                disabled
                className="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-900 px-4 py-2.5 text-sm font-medium text-white opacity-80"
              >
                <svg className="h-5 w-5 fill-white" viewBox="0 0 24 24">
                  <path d="m3.18 23.76.04-.04L13.5 12 3.22.28.04.24C.01.36 0 .48 0 .61v22.78c0 .13.01.25.04.37l.1.09zM16.5 9 4.39.75l9.72 9.72L16.5 9zm3.82 3.81c.42-.25.68-.7.68-1.21 0-.5-.27-.94-.68-1.19L17.45 9l-2.5 2.5 2.5 2.5 2.87-1.19zM4.39 23.25 16.5 15l-2.39-2.39L4.39 23.25z" />
                </svg>
                {t("downloadAndroid")}
                <span className="rounded bg-white/20 px-1.5 py-0.5 text-[10px]">{t("comingSoon")}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
