"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "motion/react";

export function PaintLoader() {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const seen = sessionStorage.getItem("sto-club-loader");
    if (seen) {
      setVisible(false);
      return;
    }
    const t = window.setTimeout(() => {
      sessionStorage.setItem("sto-club-loader", "1");
      setVisible(false);
    }, 2300);
    return () => window.clearTimeout(t);
  }, []);

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-ink text-brass"
          exit={{ opacity: 0 }}
          transition={{ duration: 0.6 }}
        >
          <motion.div
            className="relative flex h-40 w-40 items-center justify-center"
            initial={{ scale: 1.4, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
          >
            <span className="absolute inset-0 rounded-full border border-brass/40" />
            <span className="absolute inset-4 rounded-full border border-brass/25" />
            <span className="absolute top-0 bottom-0 left-1/2 w-px bg-brass/50" />
            <span className="absolute right-0 left-0 top-1/2 h-px bg-brass/50" />
            <p className="font-display text-5xl tracking-widest">STO</p>
          </motion.div>
          <motion.p
            className="mt-6 font-mono text-[10px] tracking-[0.45em] uppercase"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.4 }}
          >
            Acquisition cible
          </motion.p>
        </motion.div>
      )}
    </AnimatePresence>
  );
}