'use client';

import React, { useState, useRef } from 'react';
import { useApp, PortfolioItem } from '@/context/AppContext';
import { Focus, Filter, Video, Play, Pause, Sliders, ChevronRight } from 'lucide-react';
import { motion } from 'motion/react';
import { translations } from '@/lib/translations';

export default function PortfolioView() {
  const { portfolio, theme, searchQuery, language } = useApp();
  const t = translations[language];

  // Map portfolio to translated counterparts
  const localizedPortfolio = portfolio.map(item => {
    const override = t.portfolioItems && t.portfolioItems[item.id];
    if (override) {
      return {
        ...item,
        title: override.title,
        description: override.description,
        tags: override.tags
      };
    }
    return item;
  });

  const [activeCategory, setActiveCategory] = useState<'all' | 'graphic_design' | 'video_editing'>('all');
  const [activeVideoModal, setActiveVideoModal] = useState<PortfolioItem | null>(null);
  const [activeGraphicModal, setActiveGraphicModal] = useState<PortfolioItem | null>(null);

  const getYoutubeEmbedUrl = (url: string) => {
    if (!url) return null;
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    const match = url.match(regExp);
    if (match && match[2].length === 11) {
      const videoId = match[2];
      return `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&loop=1&playlist=${videoId}`;
    }
    return null;
  };

  const isDark = theme === 'dark';

  // Video interactive simulator configurations inside modal
  const [isPlaying, setIsPlaying] = useState(true);
  const [gradedFilter, setGradedFilter] = useState<'none' | 'sahara' | 'cyber' | 'cinelog' | 'bleach'>('none');
  const [videoProgress, setVideoProgress] = useState(42);
  const videoRef = useRef<HTMLVideoElement | null>(null);

  const filteredPortfolio = localizedPortfolio.filter((item) => {
    const matchesCategory = activeCategory === 'all' || item.category === activeCategory;
    const query = searchQuery.trim().toLowerCase();
    
    if (!query) return matchesCategory;

    const matchesSearch = 
      item.title.toLowerCase().includes(query) ||
      item.category.replace('_', ' ').toLowerCase().includes(query) ||
      item.description.toLowerCase().includes(query) ||
      item.tags.some(tag => tag.toLowerCase().includes(query));

    return matchesCategory && matchesSearch;
  });

  // Subtitle lyrics derived from video progress slider
  const derivedSubtitleText = activeVideoModal
    ? (videoProgress < 20
        ? t.subLyric1
        : videoProgress < 50
        ? t.subLyric2
        : videoProgress < 80
        ? t.subLyric3
        : t.subLyric4)
    : t.subLyricDefault;

  const togglePlay = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause();
      } else {
        videoRef.current.play().catch(() => {});
      }
      setIsPlaying(!isPlaying);
    }
  };

  const handleProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = parseFloat(e.target.value);
    setVideoProgress(val);
    if (videoRef.current && videoRef.current.duration) {
      videoRef.current.currentTime = (val / 100) * videoRef.current.duration;
    }
  };

  // Filter styles generator based on LUT
  const getFilterStyle = () => {
    switch (gradedFilter) {
      case 'sahara':
        return 'sepia(0.5) contrast(1.15) saturate(1.4) hue-rotate(-10deg)';
      case 'cyber':
        return 'contrast(1.2) saturate(1.6) hue-rotate(180deg) brightness(0.95)';
      case 'cinelog':
        return 'contrast(0.85) saturate(0.9) brightness(1.1)';
      case 'bleach':
        return 'contrast(1.5) saturate(0.2) brightness(0.9)';
      default:
        return 'none';
    }
  };

  return (
    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8" id="portfolio-view-container">
      
      {/* Portfolio Info Header */}
      <div className={`flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12 border-b pb-8 transition-colors duration-300 ${
        isDark ? 'border-white/[0.05]' : 'border-slate-200'
      }`}>
        <div>
          <h2 className={`font-display font-black text-2xl sm:text-3xl flex items-center gap-2.5 transition-colors duration-300 ${
            isDark ? 'text-slate-100' : 'text-slate-900'
          }`}>
            <Focus className="w-6 h-6 text-cyan-400 animate-pulse" />
            <span>{t.portfolioTitle}</span>
          </h2>
          <p className={`text-xs mt-1 transition-colors duration-300 ${
            isDark ? 'text-slate-400' : 'text-slate-500'
          }`}>
            {t.portfolioSubtitle}
          </p>
        </div>

        {/* Categories selector */}
        <div className="flex items-center gap-2 overflow-x-auto pb-2 custom-scroll" id="portfolio-filters">
          <Filter className="w-4 h-4 text-slate-500 mr-1 flex-shrink-0" />
          <button
            onClick={() => setActiveCategory('all')}
            className={`px-4 py-2 text-xs font-semibold rounded-xl whitespace-nowrap border cursor-pointer transition-all duration-300 ${
              activeCategory === 'all'
                ? isDark
                  ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30 shadow-[0_0_15px_rgba(6,182,212,0.15)]'
                  : 'bg-cyan-500/10 text-cyan-600 border-cyan-500/20 shadow-sm'
                : isDark
                  ? 'bg-white/[0.02] text-slate-400 border-white/5 hover:text-white hover:bg-white/5'
                  : 'bg-white border-slate-200 text-slate-600 hover:text-slate-900 hover:bg-slate-105 shadow-sm'
            }`}
          >
            {t.allWorksShowcase}
          </button>
          <button
            onClick={() => setActiveCategory('graphic_design')}
            className={`px-4 py-2 text-xs font-semibold rounded-xl whitespace-nowrap border cursor-pointer transition-all duration-300 ${
              activeCategory === 'graphic_design'
                ? isDark
                  ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30 shadow-[0_0_15px_rgba(6,182,212,0.15)]'
                  : 'bg-cyan-500/10 text-cyan-600 border-cyan-500/20 shadow-sm'
                : isDark
                  ? 'bg-white/[0.02] text-slate-400 border-white/5 hover:text-white hover:bg-white/5'
                  : 'bg-white border-slate-200 text-slate-600 hover:text-slate-900 hover:bg-slate-105 shadow-sm'
            }`}
          >
            {t.graphicDesignMasonry}
          </button>
          <button
            onClick={() => setActiveCategory('video_editing')}
            className={`px-4 py-2 text-xs font-semibold rounded-xl whitespace-nowrap border cursor-pointer transition-all duration-300 ${
              activeCategory === 'video_editing'
                ? isDark
                  ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/30 shadow-[0_0_15px_rgba(6,182,212,0.15)]'
                  : 'bg-cyan-500/10 text-cyan-600 border-cyan-500/20 shadow-sm'
                : isDark
                  ? 'bg-white/[0.02] text-slate-400 border-white/5 hover:text-white hover:bg-white/5'
                  : 'bg-white border-slate-200 text-slate-600 hover:text-slate-900 hover:bg-slate-105 shadow-sm'
            }`}
          >
            {t.videoEditingPreviews}
          </button>
        </div>
      </div>

      {/* Grid Portfolio Mapping */}
      {filteredPortfolio.length === 0 ? (
        <div className={`text-center py-20 border rounded-3xl transition-colors duration-300 ${
          isDark ? 'bg-slate-950/20 border-white/5' : 'bg-slate-50 border-slate-200'
        }`}>
          <Focus className="w-12 h-12 text-slate-400/50 mx-auto mb-3 animate-pulse" />
          <p className={`text-sm font-mono ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
            {t.noPortfolioFound}
          </p>
          <p className="text-[10px] text-slate-500 mt-1">
            {t.noPortfolioFoundSub}
          </p>
        </div>
      ) : (
        <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6" id="portfolio-masonry">
          {filteredPortfolio.map((item, idx) => (
            <div
              key={item.id}
              onClick={() => {
                if (item.category === 'video_editing') {
                  setActiveVideoModal(item);
                  setIsPlaying(true);
                  setVideoProgress(40);
                  setGradedFilter('none');
                } else {
                  setActiveGraphicModal(item);
                }
              }}
              className={`break-inside-avoid group relative rounded-3xl overflow-hidden border cursor-pointer block transition-all duration-550 ${
                isDark 
                  ? 'border-white/10 bg-white/5 backdrop-blur-md hover:border-cyan-400/35 hover:shadow-[0_8px_32px_rgba(34,211,238,0.1)]' 
                  : 'border-slate-200 bg-white/60 backdrop-blur-md hover:border-cyan-400/35 shadow-sm hover:shadow-[0_8px_32px_rgba(34,211,238,0.06)]'
              } ${item.aspectRatio}`}
            >
              {/* Overlay cover with hover text */}
              <div className="absolute inset-0 bg-gradient-to-t from-[#03000b]/80 via-transparent to-transparent opacity-65 group-hover:opacity-85 transition-opacity duration-300 z-5" />
              
              {/* Interactive Overlay actions button */}
              <div className="absolute inset-0 flex flex-col justify-between p-5 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300">
                <span className="self-end px-2.5 py-1 bg-slate-950/80 backdrop-blur-md border border-white/10 rounded-lg text-[9px] font-mono uppercase tracking-widest text-cyan-400">
                  {item.category === 'video_editing' ? 'Press to Play & Color' : 'Expand Vector'}
                </span>

                <div>
                  <span className="text-[10px] text-zinc-300 font-mono tracking-wider block mb-1">
                    {item.tags.join(' • ')}
                  </span>
                  <h4 className="font-display font-bold text-base text-white text-left tracking-wide flex items-center gap-1.5">
                    <span>{item.title}</span>
                    <ChevronRight className="w-4 h-4 text-cyan-400 transition-transform group-hover:translate-x-1" />
                  </h4>
                </div>
              </div>

              {/* Base cover artwork */}
              <img
                src={item.mediaUrl}
                alt={item.title}
                className="w-full h-full object-cover group-hover:scale-105 duration-1000 select-none pointer-events-none"
                referrerPolicy="no-referrer"
              />
              
              {/* Video identifier icon on screen margins */}
              {item.category === 'video_editing' && (
                <div className="absolute top-4 left-4 w-8 h-8 rounded-full bg-cyan-400/10 border border-cyan-400/30 flex items-center justify-center backdrop-blur-md shadow-md z-6">
                  <Video className="w-4.5 h-4.5 text-cyan-400 animate-pulse" />
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* GRAPHIC DESIGN LIGHTBOX MODAL */}
      {activeGraphicModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/85 backdrop-blur-sm" onClick={() => setActiveGraphicModal(null)} />
          
          <div className={`border rounded-2xl w-full max-w-xl p-5 relative z-10 font-sans shadow-2xl transition-all duration-300 ${
            isDark 
              ? 'bg-[#05030e] border-white/10 text-white shadow-[0_0_50px_rgba(6,182,212,0.15)]' 
              : 'bg-white border-slate-200 text-slate-900 shadow-[0_10px_40px_rgba(0,0,0,0.08)]'
          }`}>
            <button 
              onClick={() => setActiveGraphicModal(null)}
              className={`absolute top-4 right-4 px-3 py-1 text-xs rounded-lg border transition-all cursor-pointer ${
                isDark 
                  ? 'border-white/5 text-slate-400 hover:text-white hover:bg-white/5' 
                  : 'border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-50'
              }`}
            >
              Cancel
            </button>

            <div className={`rounded-xl overflow-hidden border max-h-[60vh] flex justify-center items-center mb-4 transition-colors duration-300 ${
              isDark ? 'bg-slate-950 border-white/15' : 'bg-slate-50 border-slate-200'
            }`}>
              <img 
                src={activeGraphicModal.mediaUrl} 
                alt={activeGraphicModal.title} 
                className="w-full h-auto max-h-[60vh] object-contain"
                referrerPolicy="no-referrer"
              />
            </div>

            <div className="text-left mt-2">
              <div className="flex flex-wrap gap-1 mb-2">
                {activeGraphicModal.tags.map((tg, i) => (
                  <span key={i} className={`text-[9px] font-mono px-2 py-0.5 rounded border transition-colors duration-300 ${
                    isDark 
                      ? 'text-cyan-400 bg-cyan-950/20 border-cyan-500/10' 
                      : 'text-cyan-600 bg-cyan-50 border-cyan-200'
                  }`}>
                    #{tg}
                  </span>
                ))}
              </div>
              <h3 className={`font-display font-black text-lg transition-colors duration-300 ${isDark ? 'text-white' : 'text-slate-900'}`}>{activeGraphicModal.title}</h3>
              <p className={`text-xs mt-2 leading-relaxed transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>{activeGraphicModal.description}</p>
            </div>
          </div>
        </div>
      )}

      {/* VIDEO PREVIEW & COLOR GRADING WORKBENCH MODAL */}
      {activeVideoModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/90 backdrop-blur-sm" onClick={() => setActiveVideoModal(null)} />
          
          <div className={`border rounded-3xl w-full max-w-4xl p-6 sm:p-8 relative z-10 font-sans shadow-2xl transition-all duration-300 grid grid-cols-1 lg:grid-cols-12 gap-6 max-h-[92vh] overflow-y-auto custom-scroll ${
            isDark 
              ? 'bg-[#060410] border-white/10 text-white shadow-[0_0_60px_rgba(6,182,212,0.25)]' 
              : 'bg-white border-slate-200 text-slate-900 shadow-[0_10px_40px_rgba(0,0,0,0.08)]'
          }`}>
            
            <button 
              onClick={() => setActiveVideoModal(null)}
              className={`absolute top-4 right-4 px-3 py-1 text-xs rounded-lg border transition-all cursor-pointer z-50 ${
                isDark 
                  ? 'border-white/5 text-slate-400 hover:text-white hover:bg-white/5' 
                  : 'border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-50'
              }`}
            >
              Close
            </button>

            {/* Left Box: Video Player Simulator with LUT preview */}
            <div className="lg:col-span-8 space-y-4">
              <div className={`relative aspect-[16/9] rounded-2xl overflow-hidden border shadow-2xl transition-colors duration-300 ${
                isDark ? 'bg-slate-950 border-white/10' : 'bg-slate-100 border-slate-200'
              }`}>
                
                {/* Active Video Element */}
                {activeVideoModal.videoSrc && getYoutubeEmbedUrl(activeVideoModal.videoSrc) ? (
                  <iframe
                    src={getYoutubeEmbedUrl(activeVideoModal.videoSrc) || ''}
                    className="w-full h-full object-cover select-none border-0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                    style={{ filter: getFilterStyle() }}
                  />
                ) : (
                  <video
                    ref={(el) => {
                      videoRef.current = el;
                      if (el) {
                        el.style.filter = getFilterStyle();
                      }
                    }}
                    autoPlay
                    loop
                    muted
                    playsInline
                    src={activeVideoModal.videoSrc}
                    className="w-full h-full object-cover select-none"
                    onTimeUpdate={() => {
                      if (videoRef.current && videoRef.current.duration) {
                        setVideoProgress((videoRef.current.currentTime / videoRef.current.duration) * 100);
                      }
                    }}
                    style={{ filter: getFilterStyle() }}
                  />
                )}

                {/* Simulated Sound-reactive Lyrics Video Overlay */}
                <div className="absolute inset-x-4 bottom-14 flex items-center justify-center text-center">
                  <span className="bg-slate-950/80 backdrop-blur-md px-4 py-1.5 rounded-xl border border-white/10 font-mono text-xs sm:text-sm text-yellow-300 font-bold tracking-wide shadow-md max-w-md animate-pulse">
                    {derivedSubtitleText}
                  </span>
                </div>

                {/* Subtitle Sync Indicator */}
                <div className="absolute top-3 left-3 bg-indigo-950/40 backdrop-blur-md px-3 py-1 rounded-lg border border-purple-500/20 flex items-center gap-1.5">
                  <span className="w-2 h-2 rounded-full bg-purple-400 animate-ping" />
                  <span className="text-[9px] font-mono text-purple-300 tracking-wider font-semibold uppercase">Sound Reactive Engine</span>
                </div>

                {/* Active Color Palette Badge */}
                <div className={`absolute top-3 right-14 backdrop-blur-md px-2.5 py-1 rounded-lg border flex items-center gap-1 transition-all duration-300 ${
                  isDark ? 'bg-[#0a0815]/85 border-white/10' : 'bg-white/90 border-slate-200 shadow-sm'
                }`}>
                  <Sliders className="w-3.5 h-3.5 text-cyan-500" />
                  <span className="text-[9px] font-mono text-cyan-600 dark:text-cyan-400 uppercase tracking-widest font-semibold">
                    LUT: {gradedFilter === 'none' ? 'BYPASS RAW' : gradedFilter}
                  </span>
                </div>

                {/* Play State Flash Indicator */}
                {!isPlaying && (
                  <div className="absolute inset-0 bg-black/40 flex items-center justify-center pointer-events-none">
                    <Pause className="w-10 h-10 text-white opacity-40 animate-ping" />
                  </div>
                )}
              </div>

              {/* Player scrubbing handles */}
              <div className={`p-4 rounded-xl space-y-3 border transition-colors duration-300 ${
                isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'
              }`}>
                <div className="flex items-center gap-3">
                  <button 
                    onClick={togglePlay}
                    className={`p-2.5 rounded-lg border cursor-pointer transition-colors duration-300 ${
                      isDark 
                        ? 'bg-white/5 border-white/5 hover:bg-white/10 text-white' 
                        : 'bg-white border-slate-200 hover:bg-slate-100 text-slate-800'
                    }`}
                  >
                    {isPlaying ? <Pause className="w-4 h-4 text-cyan-550" /> : <Play className="w-4 h-4 text-purple-500 fill-purple-500" />}
                  </button>
                  
                  {/* Scrub progress line */}
                  <div className="flex-1 flex items-center gap-2">
                    <span className="text-[10px] font-mono text-slate-500">0:{Math.floor(videoProgress * 0.18).toString().padStart(2, '0')}</span>
                    <input 
                      type="range"
                      min="0"
                      max="100"
                      value={videoProgress}
                      onChange={handleProgressChange}
                      className="flex-1 accent-cyan-500 cursor-pointer h-1.5 rounded-lg bg-slate-200 dark:bg-white/20"
                    />
                    <span className="text-[10px] font-mono text-slate-500">0:18</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Box: DaVinci LUT Node controls */}
            <div className="lg:col-span-4 flex flex-col justify-between" id="grading-panel">
              <div className="space-y-5">
                <div>
                  <h4 className="font-display font-medium text-xs text-slate-500 uppercase tracking-widest block mb-1">Editing Showcase</h4>
                  <h3 className={`font-display font-bold text-lg mb-2 transition-colors duration-300 ${isDark ? 'text-white' : 'text-slate-900'}`}>{activeVideoModal.title}</h3>
                  <p className={`text-xs leading-relaxed transition-colors duration-300 ${isDark ? 'text-slate-400' : 'text-slate-650'}`}>{activeVideoModal.description}</p>
                </div>

                {/* Seed filters nodes */}
                <div className={`space-y-3.5 border-t pt-4 transition-colors duration-300 ${isDark ? 'border-white/5' : 'border-slate-100'}`}>
                  <div className="flex items-center justify-between">
                    <span className="text-[11px] font-mono text-cyan-600 dark:text-cyan-400 uppercase tracking-wider font-semibold">LUT Grading Select</span>
                    <span className="text-[9px] font-mono text-slate-500">Node-02 Config</span>
                  </div>

                  <div className="grid grid-cols-2 gap-2">
                    <button 
                      onClick={() => setGradedFilter('none')}
                      className={`p-2.5 rounded-xl border text-[10px] font-mono text-left tracking-wide cursor-pointer transition-all duration-300 ${
                        gradedFilter === 'none' 
                          ? 'bg-purple-500/10 border-purple-500/30 text-purple-600 dark:text-purple-300' 
                          : isDark
                            ? 'bg-white/[0.01] border-white/5 text-slate-400 hover:text-white hover:bg-white/5'
                            : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100 shadow-sm'
                      }`}
                    >
                      Bypass Raw
                    </button>

                    <button 
                      onClick={() => setGradedFilter('sahara')}
                      className={`p-2.5 rounded-xl border text-[10px] font-mono text-left tracking-wide cursor-pointer transition-all duration-300 ${
                        gradedFilter === 'sahara' 
                          ? 'bg-yellow-500/10 border-yellow-500/30 text-yellow-600 dark:text-yellow-300' 
                          : isDark
                            ? 'bg-white/[0.01] border-white/5 text-slate-400 hover:text-white hover:bg-white/5'
                            : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100 shadow-sm'
                      }`}
                    >
                      Sahara Gold
                    </button>

                    <button 
                      onClick={() => setGradedFilter('cyber')}
                      className={`p-2.5 rounded-xl border text-[10px] font-mono text-left tracking-wide cursor-pointer transition-all duration-300 ${
                        gradedFilter === 'cyber' 
                          ? 'bg-cyan-500/10 border-cyan-500/30 text-cyan-620 dark:text-cyan-300' 
                          : isDark
                            ? 'bg-white/[0.01] border-white/5 text-slate-400 hover:text-white hover:bg-white/5'
                            : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100 shadow-sm'
                      }`}
                    >
                      Cyber Neon
                    </button>

                    <button 
                      onClick={() => setGradedFilter('cinelog')}
                      className={`p-2.5 rounded-xl border text-[10px] font-mono text-left tracking-wide cursor-pointer transition-all duration-300 ${
                        gradedFilter === 'cinelog' 
                          ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-300' 
                          : isDark
                            ? 'bg-white/[0.01] border-white/5 text-slate-400 hover:text-white hover:bg-white/5'
                            : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100 shadow-sm'
                      }`}
                    >
                      Fuji Log-F
                    </button>

                    <button 
                      onClick={() => setGradedFilter('bleach')}
                      className={`p-2.5 rounded-xl border text-[10px] font-mono text-left tracking-wide cursor-pointer col-span-2 transition-all duration-300 ${
                        gradedFilter === 'bleach' 
                          ? 'bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-300' 
                          : isDark
                            ? 'bg-white/[0.01] border-white/5 text-slate-400 hover:text-white hover:bg-white/5'
                            : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-105 shadow-sm'
                      }`}
                    >
                      Hard Contrast Bleach Bypass
                    </button>
                  </div>
                </div>

                {/* Rendering specs list */}
                <div className={`border p-3 rounded-xl text-[10px] space-y-1 transition-all duration-300 ${
                  isDark 
                    ? 'bg-white/[0.01] border-white/5 text-slate-500' 
                    : 'bg-slate-50 border-slate-200 text-slate-600 shadow-sm'
                }`}>
                  <p className="font-mono text-[9px] text-purple-600 dark:text-purple-400 font-semibold uppercase tracking-widest mb-1.5">Project Metas</p>
                  <p>• Codec: Apple ProRes 422 HQ (10-bit)</p>
                  <p>• Color Space: Rec.709 Gamma 2.4</p>
                  <p>• Frames: 23.976 fps cinematic</p>
                </div>
              </div>

              <div className={`pt-6 border-t mt-6 lg:mt-0 flex gap-2 transition-colors duration-300 ${isDark ? 'border-white/[0.05]' : 'border-slate-100'}`}>
                <button
                  onClick={() => {
                    setActiveVideoModal(null);
                  }}
                  className={`w-full py-3 rounded-xl text-xs font-semibold cursor-pointer border transition-all text-center ${
                    isDark 
                      ? 'bg-white/10 hover:bg-white/20 border-white/5 text-slate-300 hover:text-white' 
                      : 'bg-slate-50 hover:bg-slate-100 border-slate-200 text-slate-700 hover:text-slate-900 shadow-sm'
                  }`}
                >
                  Return to Port
                </button>
              </div>
            </div>

          </div>
        </div>
      )}

    </div>
  );
}