e-tib.com/components/providers/PageTransitionShutter.tsx

'use client';

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useTransition } from './TransitionProvider';

export function PageTransitionShutter() {
  const { isTransitioning, transitionMessage } = useTransition();

  return (
    <AnimatePresence>
      {isTransitioning && (
        <motion.div
          key="shutter"
          initial={{ x: '-100%' }}
          animate={{ x: '0%' }}
          exit={{ x: '100%' }}
          transition={{ duration: 0.7, ease: [0.76, 0, 0.24, 1] }}
          className="fixed inset-0 z-[9998] bg-[#050B14] pointer-events-none flex items-center justify-center overflow-hidden"
        >
          {/* HDD Drill Head (Leading Edge during entrance) */}
          <motion.div 
            className="absolute top-0 right-0 bottom-0 w-[4px] bg-primary z-50 shadow-[0_0_40px_rgba(var(--color-primary),1)]"
            initial={{ opacity: 1 }}
            exit={{ opacity: 0 }} // Fade out drill head when exiting
          >
             {/* The glowing drill bit at the center */}
             <div className="absolute top-1/2 -translate-y-1/2 right-[-2px] w-[10px] h-[60px] bg-white rounded-full shadow-[0_0_30px_rgba(255,255,255,1)]" />
             <div className="absolute top-1/2 -translate-y-1/2 right-[-4px] w-[14px] h-[20px] bg-primary-light rounded-full" />
          </motion.div>

          {/* HDD Exit Trail (Trailing Edge during exit) */}
          <motion.div 
            className="absolute top-0 left-0 bottom-0 w-[2px] bg-primary/50 z-50 shadow-[0_0_20px_rgba(var(--color-primary),0.5)]"
            initial={{ opacity: 0 }}
            exit={{ opacity: 1 }} // Fade in trail when exiting
          />

          {/* Subtle underground grid background */}
          <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:64px_64px] opacity-30" />

          {/* Deep Glow simulating underground tunnel */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
          
          <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 1.05 }}
            transition={{ duration: 0.4, delay: 0.2 }}
            className="relative z-10 flex flex-col items-center w-full px-4"
          >
            {/* Masked Logo */}
            <div 
              className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)] mb-8"
              style={{
                WebkitMaskImage: 'url(/assets/logo-white.png)',
                WebkitMaskSize: 'contain',
                WebkitMaskRepeat: 'no-repeat',
                WebkitMaskPosition: 'center',
                maskImage: 'url(/assets/logo-white.png)',
                maskSize: 'contain',
                maskRepeat: 'no-repeat',
                maskPosition: 'center'
              }}
            >
              <div className="absolute inset-0 bg-white/70" />
              <motion.div
                className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
                initial={{ left: '-150%' }}
                animate={{ left: '250%' }}
                transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
              />
            </div>
            
            {/* Status Visualizer */}
            <AnimatePresence>
              {transitionMessage && (
                transitionMessage.startsWith('LANG_SWITCH:') ? (
                  (() => {
                    const [, fromLang, toLang] = transitionMessage.split(':');
                    return (
                      <motion.div
                        key="lang-switch-graphic"
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: 20 }}
                        className="flex items-center gap-6 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]"
                      >
                        <div className="text-4xl opacity-50 grayscale">{fromLang}</div>
                        
                        {/* Connecting Trasse */}
                        <div className="w-16 h-[2px] bg-white/20 relative overflow-hidden">
                           <motion.div 
                             className="absolute top-0 bottom-0 w-8 bg-primary shadow-[0_0_10px_rgba(var(--color-primary),1)]"
                             animate={{ left: ['-100%', '200%'] }}
                             transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
                           />
                        </div>

                        <div className="text-5xl relative drop-shadow-[0_0_15px_rgba(255,255,255,0.5)]">
                          {toLang}
                        </div>
                      </motion.div>
                    );
                  })()
                ) : (
                  <motion.div
                    key="text-message"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    className="px-6 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary-light font-heading tracking-widest uppercase text-xs font-bold shadow-[0_0_20px_rgba(var(--color-primary),0.2)]"
                  >
                    {transitionMessage}
                  </motion.div>
                )
              )}
            </AnimatePresence>
            
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}