"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { Guides } from "@/components/pages/about/aboutDetail/guides";

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-[30vh] bg-[#0f0e0d] pt-5 text-white pb-40">
      <div className="bg-black sm:w-[95%] w-[98%] mx-auto p-5">
        <h1
          className="my-15 text-center font-unbounded uppercase bg-linear-to-br from-white via-white/70 to-black
text-transparent bg-clip-text text-3xl font-bold sm:text-4xl"
        >
          {t("about.notePPPage.title")}
        </h1>

        <Guides />
      </div>
    </main>
  );
}