"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";

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

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

  const guides = [
    {
      image: "/images/about/pp.avif",
      title: t("about.notePPPage.hero.title"),
      description: t("about.notePPPage.hero.description"),
      eyebrow: t("about.notePPPage.hero.eyebrow"),
      titleLine1: t("about.notePPPage.hero.titleLine1"),
      titleLine2: t("about.notePPPage.hero.titleLine2"),
    },
    {
      image: "/images/about/pp.avif",
      title: t("about.noteTrailerPage.hero.title"),
      description: t("about.noteTrailerPage.hero.description"),
      eyebrow: t("about.noteTrailerPage.hero.eyebrow"),
      titleLine1: t("about.noteTrailerPage.hero.titleLine1"),
      titleLine2: t("about.noteTrailerPage.hero.titleLine2"),
    },
  ];

  return (
    <>
      <main className="min-h-screen bg-[#0f0e0d] text-white pb-40">
        {/* Hero Section */}
        <div className="flex flex-col gap-10">
          {guides.map((guide, index) => (
            <section
              key={index}
              className="relative w-full h-120 md:h-145 overflow-hidden"
            >
              <Image
                src={guide.image}
                alt={t("about.notePPPage.hero.title")}
                fill
                className="object-cover"
                priority
              />

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

              <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")`,
                }}
              />

              <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"
                >
                  {guide.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"
                >
                  {guide.titleLine1}
                  <br />
                  <span className="text-red-600">{guide.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"
                >
                  {guide.description}
                </motion.p>

                <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>
          ))}
        </div>
      </main>
    </>
  );
}
