"use client";

import { motion } from "framer-motion";
import { ShieldCheck, BookOpen, Flame } from "lucide-react";
import { useTranslations } from "next-intl";

const fadeUp = (delay = 0) => ({
  initial: { opacity: 0, y: 36 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as any, delay },
});

const fadeUpView = (delay = 0) => ({
  initial: { opacity: 0, y: 48 },
  whileInView: { opacity: 1, y: 0 },
  transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as any, delay },
  viewport: { once: true },
});

export default function NormativBazaPage() {
  const t = useTranslations();

  const cards = [
    {
      icon: BookOpen,
      title: t("about.normativBaza.cards.card1.title"),
      text: t("about.normativBaza.cards.card1.text"),
      number: "01",
    },
    {
      icon: Flame,
      title: t("about.normativBaza.cards.card2.title"),
      text: t("about.normativBaza.cards.card2.text"),
      number: "02",
    },
    {
      icon: ShieldCheck,
      title: t("about.normativBaza.cards.card3.title"),
      text: t("about.normativBaza.cards.card3.text"),
      number: "03",
    },
  ];

  return (
    <div className="bg-[#0f0e0d] text-white min-h-screen pb-20">
      {/* ── Hero ── */}
      <section className="relative w-full h-120 md:h-145 overflow-hidden">
        {/* Background image */}
        <img
          src="/images/about/gaza.jpg"
          alt="Normativ Baza"
          className="absolute inset-0 w-full h-full object-cover"
        />

        {/* Layered gradient overlay — dark at bottom, semi at top */}
        <div className="absolute inset-0 bg-linear-to-b from-black/50 via-black/40 to-[#0f0e0d]" />

        {/* Subtle grain texture overlay */}
        <div
          className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")`,
          }}
        />

        {/* Content */}
        <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
          <motion.span
            {...fadeUp(0)}
            className="text-xs font-black uppercase tracking-[0.22em] text-red-600 mb-4"
          >
            {t("about.normativBaza.hero.label")}
          </motion.span>

          <motion.h1
            {...fadeUp(0.1)}
            className="text-5xl md:text-7xl font-black uppercase leading-[0.95] tracking-tight text-white"
          >
            {t("about.normativBaza.hero.title1")}
            <br />
            <span className="text-red-700">
              {t("about.normativBaza.hero.title2")}
            </span>
          </motion.h1>

          <motion.p
            {...fadeUp(0.22)}
            className="mt-6 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
          >
            {t("about.normativBaza.hero.description")}
          </motion.p>

          {/* Decorative line */}
          <motion.div
            initial={{ scaleX: 0, originX: 0 }}
            animate={{ scaleX: 1 }}
            transition={{ delay: 0.4, duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
            className="mt-10 w-24 h-px bg-red-700"
          />
        </div>
      </section>

      {/* ── Cards section ── */}
      <section className="max-w-6xl mx-auto px-6 py-20">
        {/* Section label */}
        <motion.p
          {...fadeUpView(0)}
          className="text-[11px] font-black uppercase tracking-[0.2em] text-red-600 mb-12"
        >
          Asosiy yo'nalishlar
          {t("about.normativBaza.sectionLabel")}
        </motion.p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/5 rounded-2xl overflow-hidden">
          {cards.map((card, i) => {
            const Icon = card.icon;
            return (
              <motion.div
                key={i}
                {...fadeUpView(i * 0.12)}
                className="group relative bg-[#141312] hover:bg-[#1c1b19] transition-colors duration-300 p-8 flex flex-col gap-6"
              >
                {/* Large number watermark */}
                <span className="absolute top-5 right-6 text-7xl font-black text-white/4 leading-none select-none group-hover:text-white/[0.07] transition-colors duration-300">
                  {card.number}
                </span>

                {/* Icon */}
                <div className="w-11 h-11 rounded-xl bg-red-400/30 border border-red-400/20 flex items-center justify-center group-hover:bg-red-400/20 transition-colors duration-300">
                  <Icon size={20} className="text-red-600" />
                </div>

                {/* Text */}
                <div className="flex flex-col gap-2">
                  <h3 className="text-base font-bold uppercase tracking-wide text-white leading-tight">
                    {card.title}
                  </h3>
                  <p className="text-sm text-gray-400 leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
                    {card.text}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </section>

      {/* ── Bottom quote band ── */}
      <motion.section
        {...fadeUpView(0)}
        className="border-t border-white/5 max-w-6xl mx-auto px-6 py-16 flex flex-col md:flex-row items-start md:items-center gap-6 justify-between"
      >
        <p className="text-xl md:text-2xl font-bold text-white/80 max-w-lg leading-snug">
          {t("about.normativBaza.bottomText")}
        </p>
        <div className="shrink-0 w-16 h-16 rounded-2xl bg-red-400/10 border border-red-400/20 flex items-center justify-center">
          <ShieldCheck size={28} className="text-red-600" />
        </div>
      </motion.section>
    </div>
  );
}