"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { FileText, ChevronRight } from "lucide-react";
import { useTranslations } from "next-intl";
import { Statistics } from "@/components/pages/home";

const ease = [0.22, 1, 0.36, 1] as [number, number, number, number];

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

  return (
    <>
      <Statistics />
      <main className="min-h-screen bg-[#0f0e0d] text-white">
        {/* ── Hero ── */}
        <section className="relative w-full h-120 md:h-145 overflow-hidden">
          <Image
            src="/images/about/pp.avif"
            alt={t("about.noteFlansPage.hero.title")}
            fill
            className="object-cover"
            priority
          />

          {/* Layered overlays */}
          <div className="absolute inset-0 bg-black/45" />
          <div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />

          {/* Grain texture */}
          <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)'/%3E%3C/svg%3E")`,
            }}
          />

          {/* Content anchored bottom-left */}
          <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
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5 }}
              className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
            >
              {t("about.noteFlansPage.hero.eyebrow")}
            </motion.span>

            <motion.h1
              initial={{ opacity: 0, y: 28 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.65, ease, delay: 0.08 }}
              className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
            >
              {t("about.noteFlansPage.hero.titleLine1")}
              <br />
              <span className="text-red-600">
                {t("about.noteFlansPage.hero.titleLine2")}
              </span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, ease, delay: 0.2 }}
              className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
            >
              {t("about.noteFlansPage.hero.description")}
            </motion.p>

            {/* Animated underline */}
            <motion.div
              initial={{ scaleX: 0 }}
              animate={{ scaleX: 1 }}
              transition={{ delay: 0.35, duration: 0.8, ease }}
              style={{ originX: 0 }}
              className="mt-8 w-20 h-px bg-red-600"
            />
          </div>
        </section>

        {/* ── Content section ── */}
        <section className="max-w-6xl mx-auto px-6 py-20">
          {/* Section label */}
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
            className="text-[11px] font-black uppercase tracking-[0.2em] text-red-600 mb-10"
          >
            {t("about.noteFlansPage.section.label")}
          </motion.p>

          {/* Two-column layout: description left, details right */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 items-start">
            {/* Left: main description */}
            <motion.div
              initial={{ opacity: 0, y: 32 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, ease }}
              viewport={{ once: true }}
            >
              <div className="mt-8 flex items-center gap-2 text-red-600 text-sm font-bold cursor-pointer group w-fit">
                <span>{t("about.noteFlansPage.section.cta")}</span>
                <ChevronRight
                  size={16}
                  className="group-hover:translate-x-1 transition-transform duration-200"
                />
              </div>
            </motion.div>

            {/* Right: feature list */}
            <motion.ul
              initial={{ opacity: 0, y: 32 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, ease, delay: 0.1 }}
              viewport={{ once: true }}
              className="flex flex-col divide-y divide-white/5"
            >
              {(t.raw("about.noteFlansPage.section.features") as string[]).map(
                (feature: string, i: number) => (
                  <li key={i} className="flex items-start gap-3 py-4 group">
                    <div className="mt-0.5 w-6 h-6 rounded-lg bg-red-600/10 border border-red-600/20 flex items-center justify-center shrink-0 group-hover:bg-red-600/20 transition-colors duration-200">
                      <FileText size={12} className="text-red-600" />
                    </div>
                    <span className="text-sm text-gray-400 leading-relaxed group-hover:text-gray-200 transition-colors duration-200">
                      {feature}
                    </span>
                  </li>
                ),
              )}
            </motion.ul>
          </div>
        </section>

        {/* ── Bottom strip ── */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="max-w-6xl mx-auto px-6 pb-20 border-t border-white/5 pt-10 flex items-center justify-between"
        >
          <p className="text-sm text-gray-600 uppercase tracking-widest font-bold">
            {t("about.noteFlansPage.footer.label")}
          </p>
          <div className="w-8 h-px bg-red-600/40" />
        </motion.div>
      </main>
    </>
  );
}