import { useTranslations, useLocale } from "next-intl";
import {
  ArrowLeft,
  ArrowRight,
  Star,
  TrendingUp,
  Users,
  ShoppingBag,
} from "lucide-react";

export function Hero() {
  const t = useTranslations("hero");
  const locale = useLocale();
  const isRtl = locale === "fa";
  const Arrow = isRtl ? ArrowLeft : ArrowRight;
  const base = `/${locale}`;

  return (
    <section className="relative overflow-hidden bg-white pt-0 [main:not(:has([data-launch-countdown]))_&]:pt-16 [main:has([data-launch-countdown])_&]:pt-0">
      {/* Background gradient */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,rgba(15,110,86,0.08),transparent)]"
      />
      {/* Grid pattern */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage:
            "linear-gradient(#0f6e56 1px,transparent 1px),linear-gradient(90deg,#0f6e56 1px,transparent 1px)",
          backgroundSize: "64px 64px",
        }}
      />

      <div className="relative mx-auto max-w-7xl px-4 pb-0 pt-16 sm:px-6 sm:pt-24 lg:px-8 lg:pt-28">
        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          {/* Left/RTL-right: text */}
          <div className="order-2 lg:order-1">
            {/* Badge */}
            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1.5 text-xs font-semibold text-brand-700">
              <span className="flex h-1.5 w-1.5 rounded-full bg-brand-500" />
              {t("badge")}
            </div>

            {/* Headline */}
            <h1 className="text-balance text-4xl font-extrabold leading-[1.15] tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
              {t("headline")}
            </h1>

            <p className="mt-5 max-w-lg text-lg leading-relaxed text-gray-500">
              {t("subheadline")}
            </p>

            {/* CTAs */}
            <div className="mt-8 flex flex-wrap gap-3">
              <a
                href={`${base}/demo`}
                className="inline-flex items-center gap-2 rounded-xl bg-brand-700 px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-brand-700/25 transition-all hover:bg-brand-800 hover:shadow-brand-700/40 hover:-translate-y-0.5"
              >
                {t("ctaPrimary")}
                <Arrow className="h-4 w-4" />
              </a>
              <a
                href="#features"
                className="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-6 py-3.5 text-sm font-semibold text-gray-700 transition-all hover:border-gray-300 hover:bg-gray-50"
              >
                {t("ctaSecondary")}
              </a>
            </div>

            {/* Trust line */}
            <p className="mt-6 flex items-center gap-2 text-sm text-gray-400">
              <span className="flex">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
                ))}
              </span>
              {t("trustedBy")}
            </p>
          </div>

          {/* Right/RTL-left: dashboard mockup */}
          <div className="order-1 lg:order-2">
            <div className="relative">
              {/* Glow */}
              <div
                aria-hidden
                className="absolute -inset-4 rounded-3xl bg-brand-700/5 blur-2xl"
              />

              {/* Laptop frame */}
              <div className="relative rounded-2xl border border-gray-200 bg-white p-2 shadow-2xl shadow-gray-200/60 ring-1 ring-gray-900/5">
                {/* Topbar chrome */}
                <div className="mb-2 flex items-center gap-1.5 rounded-t-xl bg-gray-50 px-3 py-2.5">
                  <span className="h-2.5 w-2.5 rounded-full bg-red-400" />
                  <span className="h-2.5 w-2.5 rounded-full bg-amber-400" />
                  <span className="h-2.5 w-2.5 rounded-full bg-green-400" />
                  <div className="mx-auto w-48 rounded bg-gray-200 px-3 py-1 text-center text-[10px] text-gray-400">
                    app.meezi.ir
                  </div>
                </div>

                {/* Dashboard preview */}
                <div className="rounded-xl bg-gray-50 p-4">
                  {/* Mini topbar */}
                  <div className="mb-4 flex items-center justify-between rounded-lg bg-white px-3 py-2 shadow-sm">
                    <div className="flex items-center gap-2">
                      <div className="h-5 w-5 rounded bg-brand-700" />
                      <div className="h-2 w-16 rounded bg-gray-200" />
                    </div>
                    <div className="flex gap-1.5">
                      <div className="h-4 w-4 rounded bg-gray-100" />
                      <div className="h-4 w-4 rounded bg-gray-100" />
                    </div>
                  </div>

                  {/* KPI cards */}
                  <div className="mb-4 grid grid-cols-3 gap-2">
                    {[
                      { icon: TrendingUp, label: "فروش امروز", value: "۴.۲ م", color: "text-brand-600 bg-brand-50" },
                      { icon: ShoppingBag, label: "سفارش‌ها", value: "۱۲۸", color: "text-amber-600 bg-amber-50" },
                      { icon: Users, label: "میزهای فعال", value: "۱۴/۲۰", color: "text-blue-600 bg-blue-50" },
                    ].map((card) => (
                      <div key={card.label} className="rounded-lg bg-white p-2.5 shadow-sm">
                        <div className={`mb-1.5 inline-flex rounded-md p-1.5 ${card.color}`}>
                          <card.icon className="h-3 w-3" />
                        </div>
                        <div className="text-[10px] text-gray-400">{card.label}</div>
                        <div className="text-sm font-bold text-gray-800">{card.value}</div>
                      </div>
                    ))}
                  </div>

                  {/* Chart placeholder */}
                  <div className="mb-4 rounded-lg bg-white p-3 shadow-sm">
                    <div className="mb-2 flex items-center justify-between">
                      <div className="h-2 w-20 rounded bg-gray-200" />
                      <div className="h-1.5 w-10 rounded bg-gray-100" />
                    </div>
                    <div className="flex h-16 items-end gap-1.5">
                      {[40, 65, 45, 80, 55, 90, 70].map((h, i) => (
                        <div key={i} className="flex-1 rounded-t" style={{ height: `${h}%`, background: `rgba(15,110,86,${0.2 + i * 0.08})` }} />
                      ))}
                    </div>
                  </div>

                  {/* Order rows */}
                  <div className="space-y-1.5">
                    {[
                      { name: "قهوه ترک", count: "×۳", status: "bg-green-100 text-green-700", statusTxt: "آماده" },
                      { name: "کیک شکلاتی", count: "×۱", status: "bg-amber-100 text-amber-700", statusTxt: "درحال آماده‌سازی" },
                      { name: "اسموتی انبه", count: "×۲", status: "bg-brand-100 text-brand-700", statusTxt: "جدید" },
                    ].map((row) => (
                      <div key={row.name} className="flex items-center justify-between rounded-lg bg-white px-3 py-2 shadow-sm">
                        <div className="flex items-center gap-2">
                          <div className="h-1.5 w-1.5 rounded-full bg-gray-300" />
                          <span className="text-[10px] font-medium text-gray-700">{row.name}</span>
                          <span className="text-[9px] text-gray-400">{row.count}</span>
                        </div>
                        <span className={`rounded-full px-2 py-0.5 text-[9px] font-medium ${row.status}`}>
                          {row.statusTxt}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Floating badges */}
              <div className="absolute -end-4 top-8 hidden rounded-xl border border-gray-100 bg-white px-3 py-2 shadow-lg lg:block">
                <div className="flex items-center gap-2">
                  <div className="flex h-7 w-7 items-center justify-center rounded-full bg-green-100">
                    <TrendingUp className="h-3.5 w-3.5 text-green-600" />
                  </div>
                  <div>
                    <div className="text-[10px] text-gray-400">فروش هفته</div>
                    <div className="text-xs font-bold text-gray-800">+۳۴٪</div>
                  </div>
                </div>
              </div>
              <div className="absolute -start-4 bottom-12 hidden rounded-xl border border-gray-100 bg-white px-3 py-2 shadow-lg lg:block">
                <div className="flex items-center gap-2">
                  <div className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-100">
                    <ShoppingBag className="h-3.5 w-3.5 text-brand-700" />
                  </div>
                  <div>
                    <div className="text-[10px] text-gray-400">سفارش جدید</div>
                    <div className="text-xs font-bold text-gray-800">میز ۷</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
