import React, { useState, useEffect } from 'react';
import { 
  Play, 
  MonitorPlay, 
  Clapperboard, 
  Megaphone, 
  CheckCircle2, 
  ArrowRight, 
  Instagram, 
  Mail, 
  Smartphone, 
  ShieldCheck,
  Menu,
  X,
  Sparkles,
  Video,
  Layers,
  Zap,
  Cpu,
  Sun,
  Moon,
  Rocket,
  TrendingUp,
  Crown,
  Image as ImageIcon,
  Settings,
  Lock,
  LogOut,
  Save,
  Edit3,
  Plus,
  Trash2,
  BellRing
} from 'lucide-react';

// Custom SVG Icons
const AdobeIcon = ({ bg, text, label }) => (
  <svg viewBox="0 0 24 24" className="w-7 h-7 shadow-sm rounded-lg" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="24" height="24" rx="5" fill={bg} />
    <text x="50%" y="54%" dominantBaseline="middle" textAnchor="middle" fill={text} fontFamily="Arial, Helvetica, sans-serif" fontWeight="900" fontSize="13" letterSpacing="-0.5">{label}</text>
  </svg>
);

const CapCutIcon = () => (
  <svg viewBox="0 0 24 24" className="w-7 h-7 shadow-sm rounded-lg" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="24" height="24" rx="5" fill="#000000" />
    <path d="M12 4L4 12L12 20L20 12L12 4Z" stroke="#FFFFFF" strokeWidth="1.5" strokeLinejoin="round"/>
    <path d="M12 7.5L7.5 12L12 16.5L16.5 12L12 7.5Z" fill="#FFFFFF"/>
  </svg>
);

const AIcon = () => (
  <svg viewBox="0 0 24 24" className="w-7 h-7 shadow-sm rounded-lg" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="24" height="24" rx="5" fill="url(#aiGradient)" />
    <path d="M12 6L14.5 10.5L19 12L14.5 13.5L12 18L9.5 13.5L5 12L9.5 10.5L12 6Z" fill="#FFFFFF"/>
    <defs>
      <linearGradient id="aiGradient" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
        <stop stopColor="#d946ef" />
        <stop offset="1" stopColor="#06b6d4" />
      </linearGradient>
    </defs>
  </svg>
);

// Initial Database State
const initialData = {
  settings: {
    siteName: "SRI VISUAL",
    logoUrl: "/logo.png",
    announcementText: "NEW AGENCY LAUNCH OFFER 🔥",
    announcementActive: true,
    popupActive: false,
    popupTitle: "🔥 Launch Offer Extended!",
    popupText: "Due to high demand, we have extended our launch pricing for 7 more days. Book your package now before prices increase!",
  },
  retainerPackages: {
    basic: {
      id: "basic",
      name: "Basic",
      desc: "Perfect for beginners & budget creators",
      colorText: "text-emerald-600 dark:text-emerald-400",
      colorBg: "bg-emerald-600",
      colorBorder: "border-emerald-500",
      features: ["Basic Editing", "Cuts & Transitions", "Simple Text", "Music Sync"],
      tiers: [
        { name: 'Starter', reels: '6 REELS', old: '₹1,699', price: '₹1,169', per: '~₹195/reel', icon: 'Rocket' },
        { name: 'Growth', reels: '12 REELS', old: '₹3,199', price: '₹2,279', per: '~₹190/reel', icon: 'TrendingUp' },
        { name: 'Pro', reels: '20 REELS', old: '₹5,499', price: '₹3,699', per: '~₹185/reel', icon: 'Crown' }
      ]
    },
    standard: {
      id: "standard",
      name: "Standard",
      desc: "Perfect for growing creators & businesses",
      colorText: "text-fuchsia-600 dark:text-fuchsia-400",
      colorBg: "bg-fuchsia-600",
      colorBorder: "border-fuchsia-500",
      features: ["Everything in Basic", "Advanced Transitions", "Styled Subtitles", "Sound Effects", "Better Engagement Editing"],
      tiers: [
        { name: 'Starter', reels: '6 REELS', old: '₹2,850', price: '₹1,999', per: '~₹333/reel', icon: 'Rocket' },
        { name: 'Growth', reels: '12 REELS', old: '₹5,499', price: '₹3,899', per: '~₹325/reel', icon: 'TrendingUp', popular: true },
        { name: 'Pro', reels: '20 REELS', old: '₹8,499', price: '₹6,199', per: '~₹310/reel', icon: 'Crown' }
      ]
    },
    premium: {
      id: "premium",
      name: "Premium",
      desc: "High-end editing for serious creators & brands",
      colorText: "text-cyan-600 dark:text-cyan-400",
      colorBg: "bg-cyan-600",
      colorBorder: "border-cyan-500",
      features: ["Everything in Standard", "Cinematic editing", "Advanced color grading", "Hook-based viral editing", "AI Thumbnails", "Smart beat sync"],
      tiers: [
        { name: 'Starter', reels: '6 REELS', old: '₹4,499', price: '₹2,799', per: '~₹465/reel', icon: 'Rocket' },
        { name: 'Growth', reels: '12 REELS', old: '₹8,499', price: '₹5,199', per: '~₹433/reel', icon: 'TrendingUp' },
        { name: 'Pro', reels: '20 REELS', old: '₹13,499', price: '₹7,999', per: '~₹400/reel', icon: 'Crown', popular: true }
      ]
    }
  }
};

const IconMap = {
  Rocket: Rocket,
  TrendingUp: TrendingUp,
  Crown: Crown,
  Zap: Zap,
  Star: Sparkles
};

export default function AgencyWebsite() {
  // Global State
  const [currentPage, setCurrentPage] = useState('home');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [theme, setTheme] = useState('dark');
  const [pricingTab, setPricingTab] = useState('standard');
  const [popupDismissed, setPopupDismissed] = useState(false);
  
  // Database State
  const [db, setDb] = useState(initialData);

  // Admin State
  const [isAdminAuth, setIsAdminAuth] = useState(false);
  const [loginUsername, setLoginUsername] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [adminTab, setAdminTab] = useState('settings');
  const [saveMessage, setSaveMessage] = useState('');

  // Scroll to top when page changes
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [currentPage]);

  // Ensure selected pricing tab exists, fallback to first available
  useEffect(() => {
    if (!db.retainerPackages[pricingTab]) {
      const availableKeys = Object.keys(db.retainerPackages);
      if (availableKeys.length > 0) {
        setPricingTab(availableKeys[0]);
      }
    }
  }, [db.retainerPackages, pricingTab]);

  const navigateTo = (page) => {
    setCurrentPage(page);
    setIsMobileMenuOpen(false);
  };

  const toggleTheme = () => {
    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
  };

  const handleAdminLogin = (e) => {
    e.preventDefault();
    if (loginUsername === 'admin' && loginPassword === 'admin123') {
      setIsAdminAuth(true);
      setLoginUsername('');
      setLoginPassword('');
      setLoginError('');
    } else {
      setLoginError("Invalid username or password.");
    }
  };

  const handleAdminLogout = () => {
    setIsAdminAuth(false);
    setCurrentPage('home');
  };

  const showSaveMessage = () => {
    setSaveMessage('Changes Saved Successfully!');
    setTimeout(() => setSaveMessage(''), 3000);
  };

  const handleAddCategory = () => {
    const newId = `cat_${Date.now()}`;
    setDb(prev => ({
      ...prev,
      retainerPackages: {
        ...prev.retainerPackages,
        [newId]: {
          id: newId,
          name: "New Category",
          desc: "Description of the new category",
          colorText: "text-blue-500",
          colorBg: "bg-blue-600",
          colorBorder: "border-blue-500",
          features: ["Feature 1", "Feature 2"],
          tiers: [
            { name: 'Starter', reels: '0 REELS', old: '₹0', price: '₹0', per: '~₹0/reel', icon: 'Rocket' }
          ]
        }
      }
    }));
    showSaveMessage();
  };

  const handleDeleteCategory = (pkgKey) => {
    if (Object.keys(db.retainerPackages).length <= 1) {
      alert("You must have at least one category.");
      return;
    }
    if (confirm("Are you sure you want to delete this entire category?")) {
      setDb(prev => {
        const newPackages = { ...prev.retainerPackages };
        delete newPackages[pkgKey];
        return { ...prev, retainerPackages: newPackages };
      });
      showSaveMessage();
    }
  };

  const handleAddTier = (pkgKey) => {
    setDb(prev => {
      const newPkg = { ...prev.retainerPackages[pkgKey] };
      newPkg.tiers = [
        ...newPkg.tiers, 
        { name: 'New Plan', reels: '0 REELS', old: '₹0', price: '₹0', per: '~₹0/unit', icon: 'Zap' }
      ];
      return { ...prev, retainerPackages: { ...prev.retainerPackages, [pkgKey]: newPkg } };
    });
    showSaveMessage();
  };

  const handleDeleteTier = (pkgKey, tIdx) => {
    setDb(prev => {
      const newPkg = { ...prev.retainerPackages[pkgKey] };
      newPkg.tiers = newPkg.tiers.filter((_, idx) => idx !== tIdx);
      return { ...prev, retainerPackages: { ...prev.retainerPackages, [pkgKey]: newPkg } };
    });
    showSaveMessage();
  };

  const NavLinks = () => (
    <>
      {['home', 'services', 'portfolio', 'pricing'].map((page) => (
        <button
          key={page}
          onClick={() => navigateTo(page)}
          className={`capitalize font-medium transition-all duration-300 ${
            currentPage === page 
              ? 'text-fuchsia-600 dark:text-fuchsia-400 border-b-2 border-fuchsia-600 dark:border-fuchsia-400 pb-1' 
              : 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'
          }`}
        >
          {page}
        </button>
      ))}
      {isAdminAuth && (
        <button
          onClick={() => navigateTo('admin')}
          className={`capitalize font-bold flex items-center gap-1 transition-all duration-300 ${
            currentPage === 'admin' 
              ? 'text-amber-500 border-b-2 border-amber-500 pb-1' 
              : 'text-amber-600/70 hover:text-amber-500'
          }`}
        >
          <Settings className="w-4 h-4" /> Admin
        </button>
      )}
    </>
  );

  // === ADMIN PANEL COMPONENT ===
  const AdminDashboard = () => {
    if (!isAdminAuth) {
      return (
        <section className="min-h-[80vh] flex items-center justify-center py-24 px-6">
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 p-8 rounded-3xl w-full max-w-md shadow-2xl relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-fuchsia-500 to-cyan-500"></div>
            <div className="flex justify-center mb-6">
              <div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center">
                <Lock className="w-8 h-8 text-slate-500 dark:text-slate-400" />
              </div>
            </div>
            <h2 className="text-3xl font-bold text-center text-slate-900 dark:text-white mb-8">Admin Portal</h2>
            <form onSubmit={handleAdminLogin} className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">Username</label>
                <input 
                  type="text" 
                  value={loginUsername}
                  onChange={(e) => setLoginUsername(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500 transition-colors"
                  placeholder="Enter admin username"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">Password</label>
                <input 
                  type="password" 
                  value={loginPassword}
                  onChange={(e) => setLoginPassword(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500 transition-colors"
                  placeholder="Enter admin password"
                  required
                />
              </div>
              
              {loginError && (
                <div className="text-red-500 text-sm font-bold bg-red-100 dark:bg-red-500/10 p-3 rounded-lg border border-red-200 dark:border-red-500/20">
                  {loginError}
                </div>
              )}

              <button type="submit" className="w-full py-4 bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white font-bold rounded-xl hover:scale-105 transition-all duration-300 shadow-lg mt-4">
                Secure Login
              </button>
            </form>
          </div>
        </section>
      );
    }

    return (
      <section className="py-24 min-h-screen">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
            <div>
              <h1 className="text-4xl font-bold text-slate-900 dark:text-white flex items-center gap-3">
                <Settings className="w-10 h-10 text-fuchsia-500" />
                Agency Dashboard
              </h1>
              <p className="text-slate-500 dark:text-slate-400 mt-2">Manage your brand, content, offers, and pricing instantly.</p>
            </div>
            <button 
              onClick={handleAdminLogout}
              className="flex items-center gap-2 px-6 py-3 rounded-full border border-red-200 dark:border-red-900/50 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 font-bold transition-all"
            >
              <LogOut className="w-4 h-4" /> Sign Out
            </button>
          </div>

          <div className="grid lg:grid-cols-4 gap-8">
            {/* Sidebar */}
            <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-white/10 p-4 shadow-sm h-fit">
              <nav className="flex flex-col space-y-2">
                {[
                  { id: 'settings', label: 'Brand & Global', icon: Megaphone },
                  { id: 'packages', label: 'Manage Packages', icon: Layers }
                ].map(tab => (
                  <button
                    key={tab.id}
                    onClick={() => setAdminTab(tab.id)}
                    className={`flex items-center gap-3 w-full text-left px-5 py-4 rounded-2xl font-bold transition-all ${
                      adminTab === tab.id 
                        ? 'bg-fuchsia-50 dark:bg-fuchsia-500/10 text-fuchsia-600 dark:text-fuchsia-400' 
                        : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'
                    }`}
                  >
                    <tab.icon className="w-5 h-5" /> {tab.label}
                  </button>
                ))}
              </nav>
            </div>

            {/* Content Area */}
            <div className="lg:col-span-3 bg-white dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-white/10 p-8 shadow-sm relative">
              {saveMessage && (
                <div className="absolute top-8 right-8 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 px-4 py-2 rounded-lg font-bold flex items-center gap-2 animate-in fade-in slide-in-from-top-4 z-50">
                  <CheckCircle2 className="w-5 h-5" /> {saveMessage}
                </div>
              )}

              {/* Settings Tab */}
              {adminTab === 'settings' && (
                <div>
                  <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 border-b border-slate-100 dark:border-white/10 pb-4">Brand & Settings</h2>
                  
                  <div className="grid md:grid-cols-2 gap-8 mb-8">
                    {/* Brand Section */}
                    <div className="space-y-4">
                      <h3 className="font-bold text-slate-800 dark:text-slate-200 flex items-center gap-2">
                        <ImageIcon className="w-5 h-5" /> Brand Identity
                      </h3>
                      <div>
                        <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">Website Name</label>
                        <input 
                          type="text" 
                          value={db.settings.siteName}
                          onChange={(e) => setDb({...db, settings: {...db.settings, siteName: e.target.value}})}
                          className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">Logo URL / Path</label>
                        <input 
                          type="text" 
                          value={db.settings.logoUrl}
                          onChange={(e) => setDb({...db, settings: {...db.settings, logoUrl: e.target.value}})}
                          className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                        />
                      </div>
                    </div>

                    {/* Top Banner Section */}
                    <div className="space-y-4">
                      <h3 className="font-bold text-slate-800 dark:text-slate-200 flex items-center gap-2">
                        <Megaphone className="w-5 h-5" /> Top Banner
                      </h3>
                      <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-950 rounded-xl border border-slate-200 dark:border-white/5">
                        <span className="font-medium text-sm text-slate-900 dark:text-white">Enable Top Banner</span>
                        <button 
                          onClick={() => setDb({...db, settings: {...db.settings, announcementActive: !db.settings.announcementActive}})}
                          className={`w-12 h-6 rounded-full flex items-center transition-colors p-1 ${db.settings.announcementActive ? 'bg-fuchsia-500' : 'bg-slate-300 dark:bg-slate-700'}`}
                        >
                          <div className={`w-4 h-4 bg-white rounded-full shadow-md transform transition-transform ${db.settings.announcementActive ? 'translate-x-6' : 'translate-x-0'}`}></div>
                        </button>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">Banner Text</label>
                        <input 
                          type="text" 
                          value={db.settings.announcementText}
                          onChange={(e) => setDb({...db, settings: {...db.settings, announcementText: e.target.value}})}
                          className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Popup Modal Section */}
                  <div className="border-t border-slate-100 dark:border-white/10 pt-8 mb-8 space-y-4">
                    <h3 className="font-bold text-slate-800 dark:text-slate-200 flex items-center gap-2">
                      <BellRing className="w-5 h-5" /> Global Popup Announcement
                    </h3>
                    <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-950 rounded-xl border border-slate-200 dark:border-white/5 max-w-xl">
                      <span className="font-medium text-sm text-slate-900 dark:text-white">Enable Popup Modal on Website Load</span>
                      <button 
                        onClick={() => setDb({...db, settings: {...db.settings, popupActive: !db.settings.popupActive}})}
                        className={`w-12 h-6 rounded-full flex items-center transition-colors p-1 ${db.settings.popupActive ? 'bg-fuchsia-500' : 'bg-slate-300 dark:bg-slate-700'}`}
                      >
                        <div className={`w-4 h-4 bg-white rounded-full shadow-md transform transition-transform ${db.settings.popupActive ? 'translate-x-6' : 'translate-x-0'}`}></div>
                      </button>
                    </div>
                    
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">Popup Title</label>
                        <input 
                          type="text" 
                          value={db.settings.popupTitle}
                          onChange={(e) => setDb({...db, settings: {...db.settings, popupTitle: e.target.value}})}
                          className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                        />
                      </div>
                      <div className="md:col-span-2">
                        <label className="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">Popup Message</label>
                        <textarea 
                          rows="3"
                          value={db.settings.popupText}
                          onChange={(e) => setDb({...db, settings: {...db.settings, popupText: e.target.value}})}
                          className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500 resize-none"
                        ></textarea>
                      </div>
                    </div>
                  </div>

                  <button onClick={showSaveMessage} className="px-6 py-3 bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold rounded-xl hover:scale-105 transition-transform flex items-center gap-2">
                    <Save className="w-5 h-5" /> Save Brand & Settings
                  </button>
                </div>
              )}

              {/* Packages Tab */}
              {adminTab === 'packages' && (
                <div>
                  <div className="flex justify-between items-center mb-6 border-b border-slate-100 dark:border-white/10 pb-4">
                    <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Package Categories & Plans</h2>
                    <button onClick={handleAddCategory} className="flex items-center gap-2 px-4 py-2 bg-fuchsia-100 dark:bg-fuchsia-500/20 text-fuchsia-600 dark:text-fuchsia-400 rounded-lg font-bold hover:bg-fuchsia-200 dark:hover:bg-fuchsia-500/30 transition-colors text-sm">
                      <Plus className="w-4 h-4" /> Add Category
                    </button>
                  </div>
                  
                  <div className="space-y-10">
                    {Object.keys(db.retainerPackages).map((pkgKey) => {
                      const pkg = db.retainerPackages[pkgKey];
                      return (
                        <div key={pkgKey} className="bg-slate-50 dark:bg-slate-950/50 rounded-2xl border border-slate-200 dark:border-white/5 p-6 shadow-inner">
                          {/* Category Header Editor */}
                          <div className="flex flex-col md:flex-row justify-between gap-4 mb-6 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-white/10">
                            <div className="flex-1 space-y-3">
                              <div className="flex items-center gap-3">
                                <div className={`w-4 h-4 rounded-full ${pkg.colorBg}`}></div>
                                <input 
                                  value={pkg.name} 
                                  onChange={(e) => setDb(prev => ({...prev, retainerPackages: {...prev.retainerPackages, [pkgKey]: {...pkg, name: e.target.value}}}))}
                                  className="text-xl font-bold bg-transparent border-b border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500 w-full max-w-xs"
                                  placeholder="Category Name (e.g. Reels Plan)"
                                />
                              </div>
                              <input 
                                value={pkg.desc} 
                                onChange={(e) => setDb(prev => ({...prev, retainerPackages: {...prev.retainerPackages, [pkgKey]: {...pkg, desc: e.target.value}}}))}
                                className="text-sm text-slate-500 dark:text-slate-400 bg-transparent border-b border-slate-300 dark:border-slate-700 focus:outline-none focus:border-fuchsia-500 w-full"
                                placeholder="Category Description"
                              />
                            </div>
                            <div className="flex items-start gap-2">
                              <button onClick={() => handleDeleteCategory(pkgKey)} className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg transition-colors" title="Delete Category">
                                <Trash2 className="w-5 h-5" />
                              </button>
                            </div>
                          </div>
                          
                          {/* Category Tiers */}
                          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {pkg.tiers.map((tier, tIdx) => (
                              <div key={tIdx} className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm relative group">
                                <button onClick={() => handleDeleteTier(pkgKey, tIdx)} className="absolute top-3 right-3 text-slate-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100">
                                  <Trash2 className="w-4 h-4" />
                                </button>
                                
                                <div className="space-y-4">
                                  <div>
                                    <label className="block text-xs text-slate-500 mb-1">Plan Name</label>
                                    <input 
                                      type="text" 
                                      value={tier.name}
                                      onChange={(e) => {
                                        const newDb = {...db};
                                        newDb.retainerPackages[pkgKey].tiers[tIdx].name = e.target.value;
                                        setDb(newDb);
                                      }}
                                      className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm font-bold text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                                    />
                                  </div>
                                  <div>
                                    <label className="block text-xs text-slate-500 mb-1">Quantity/Highlight (e.g. 6 REELS)</label>
                                    <input 
                                      type="text" 
                                      value={tier.reels}
                                      onChange={(e) => {
                                        const newDb = {...db};
                                        newDb.retainerPackages[pkgKey].tiers[tIdx].reels = e.target.value;
                                        setDb(newDb);
                                      }}
                                      className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                                    />
                                  </div>
                                  <div className="grid grid-cols-2 gap-2">
                                    <div>
                                      <label className="block text-xs text-slate-500 mb-1">Old Price</label>
                                      <input 
                                        type="text" 
                                        value={tier.old}
                                        onChange={(e) => {
                                          const newDb = {...db};
                                          newDb.retainerPackages[pkgKey].tiers[tIdx].old = e.target.value;
                                          setDb(newDb);
                                        }}
                                        className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                                      />
                                    </div>
                                    <div>
                                      <label className="block text-xs text-slate-500 mb-1">New Price</label>
                                      <input 
                                        type="text" 
                                        value={tier.price}
                                        onChange={(e) => {
                                          const newDb = {...db};
                                          newDb.retainerPackages[pkgKey].tiers[tIdx].price = e.target.value;
                                          setDb(newDb);
                                        }}
                                        className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm font-bold text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                                      />
                                    </div>
                                  </div>
                                  <div>
                                    <label className="block text-xs text-slate-500 mb-1">Subtitle (e.g., ~₹195/reel)</label>
                                    <input 
                                      type="text" 
                                      value={tier.per}
                                      onChange={(e) => {
                                        const newDb = {...db};
                                        newDb.retainerPackages[pkgKey].tiers[tIdx].per = e.target.value;
                                        setDb(newDb);
                                      }}
                                      className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:border-fuchsia-500"
                                    />
                                  </div>
                                  <div className="flex items-center gap-2 pt-2">
                                    <input 
                                      type="checkbox" 
                                      checked={tier.popular || false}
                                      onChange={(e) => {
                                        const newDb = {...db};
                                        newDb.retainerPackages[pkgKey].tiers[tIdx].popular = e.target.checked;
                                        setDb(newDb);
                                      }}
                                      className="rounded border-slate-300 text-fuchsia-500 focus:ring-fuchsia-500"
                                    />
                                    <label className="text-xs font-bold text-slate-700 dark:text-slate-300">Mark as "Best Value"</label>
                                  </div>
                                </div>
                              </div>
                            ))}
                            
                            {/* Add Tier Button */}
                            <button 
                              onClick={() => handleAddTier(pkgKey)}
                              className="bg-transparent border-2 border-dashed border-slate-300 dark:border-slate-700 rounded-xl flex flex-col items-center justify-center p-8 text-slate-500 hover:text-slate-700 hover:border-slate-400 dark:hover:text-slate-300 dark:hover:border-slate-500 transition-colors min-h-[250px]"
                            >
                              <Plus className="w-8 h-8 mb-2" />
                              <span className="font-bold">Add New Plan</span>
                            </button>
                          </div>
                          <div className="mt-6 flex justify-end">
                            <button onClick={showSaveMessage} className="px-6 py-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold rounded-xl hover:scale-105 transition-transform flex items-center gap-2 text-sm">
                              <Save className="w-4 h-4" /> Save Plans
                            </button>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    );
  };

  return (
    <div className={theme}>
      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-300 font-sans selection:bg-fuchsia-500/30 selection:text-fuchsia-900 dark:selection:text-white transition-colors duration-500 relative overflow-hidden">
        
        {/* Global Popup Announcement */}
        {db.settings.popupActive && !popupDismissed && !isAdminAuth && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/60 dark:bg-black/60 backdrop-blur-sm px-4 animate-in fade-in duration-300">
            <div className="bg-white dark:bg-slate-900 p-8 rounded-3xl max-w-md w-full relative shadow-[0_0_50px_rgba(0,0,0,0.3)] border border-slate-200 dark:border-white/10 transform animate-in zoom-in-95 duration-500">
              <button 
                onClick={() => setPopupDismissed(true)} 
                className="absolute top-4 right-4 p-2 bg-slate-100 dark:bg-slate-800 rounded-full text-slate-500 hover:text-slate-800 dark:hover:text-white transition-colors"
              >
                <X className="w-5 h-5"/>
              </button>
              <div className="w-12 h-12 bg-amber-100 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 rounded-2xl flex items-center justify-center mb-6">
                <BellRing className="w-6 h-6" />
              </div>
              <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-3">{db.settings.popupTitle}</h3>
              <p className="text-slate-600 dark:text-slate-300 mb-8 leading-relaxed">
                {db.settings.popupText}
              </p>
              <button 
                onClick={() => { setPopupDismissed(true); navigateTo('pricing'); }}
                className="w-full py-4 bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white font-bold rounded-xl hover:scale-105 transition-all duration-300 shadow-lg"
              >
                View Packages Now
              </button>
            </div>
          </div>
        )}

        {/* Ambient Colorful Background Glows */}
        <div className="fixed top-[-20%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-violet-600/10 dark:bg-violet-600/20 blur-[100px] pointer-events-none z-0 mix-blend-screen transition-opacity duration-500"></div>
        <div className="fixed bottom-[-20%] right-[-10%] w-[60vw] h-[60vw] rounded-full bg-cyan-600/10 blur-[100px] pointer-events-none z-0 mix-blend-screen transition-opacity duration-500"></div>
        <div className="fixed top-[40%] left-[60%] w-[40vw] h-[40vw] rounded-full bg-fuchsia-600/10 blur-[100px] pointer-events-none z-0 mix-blend-screen transition-opacity duration-500"></div>

        {/* Navigation */}
        <nav className="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-950/70 backdrop-blur-xl border-b border-slate-200 dark:border-white/10 transition-colors duration-500">
          <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
            <button onClick={() => navigateTo('home')} className="flex items-center gap-3 group relative z-10">
              <img 
                src={db.settings.logoUrl} 
                alt={db.settings.siteName} 
                className="w-11 h-11 rounded-xl object-contain bg-black shadow-lg group-hover:scale-105 transition-all duration-300 border border-slate-200 dark:border-white/10"
                onError={(e) => { e.target.onerror = null; e.target.src = "https://via.placeholder.com/150/000000/FFFFFF?text=SV"; }}
              />
              <span className="text-slate-900 dark:text-white font-bold tracking-widest text-xl transition-colors duration-500 uppercase">{db.settings.siteName}</span>
            </button>
            
            {/* Desktop Nav */}
            <div className="hidden md:flex items-center gap-8 text-sm z-10">
              <NavLinks />
              
              {/* Theme Toggle Button */}
              <button 
                onClick={toggleTheme} 
                className="p-2 ml-2 rounded-full bg-slate-100 dark:bg-white/5 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
                aria-label="Toggle Theme"
              >
                {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              </button>

              <button 
                onClick={() => navigateTo('pricing')}
                className="px-6 py-2.5 rounded-full bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white font-semibold hover:scale-105 hover:shadow-lg hover:shadow-fuchsia-500/25 transition-all duration-300"
              >
                Start Project
              </button>
            </div>

            {/* Mobile Menu & Theme Toggle */}
            <div className="md:hidden flex items-center gap-4 z-50">
              <button 
                onClick={toggleTheme} 
                className="p-2 rounded-full bg-slate-100 dark:bg-white/5 text-slate-600 dark:text-slate-300"
              >
                {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              </button>
              <button 
                className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors"
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              >
                {isMobileMenuOpen ? <X className="w-7 h-7" /> : <Menu className="w-7 h-7" />}
              </button>
            </div>
          </div>

          {/* Mobile Nav Overlay */}
          {isMobileMenuOpen && (
            <div className="absolute top-20 left-0 w-full bg-white/95 dark:bg-slate-900/95 backdrop-blur-3xl border-b border-slate-200 dark:border-white/10 py-8 px-6 flex flex-col gap-6 shadow-2xl md:hidden transition-colors duration-500 z-50">
              <NavLinks />
              <button 
                onClick={() => navigateTo('pricing')}
                className="mt-4 px-6 py-3 rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white font-semibold text-center shadow-md"
              >
                Start Project
              </button>
            </div>
          )}
        </nav>

        {/* Main Content Area */}
        <main className="relative z-10 pt-20 animate-in fade-in duration-700">
          
          {currentPage === 'admin' ? (
            <AdminDashboard />
          ) : (
            <>
              {/* === HOME PAGE === */}
              {currentPage === 'home' && (
                <>
                  <section className="relative pt-24 pb-20 lg:pt-32 lg:pb-28">
                    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
                      <div className="z-10">
                        {db.settings.announcementActive && (
                          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-amber-300 dark:border-amber-500/30 bg-amber-100 dark:bg-amber-500/10 text-xs font-bold text-amber-700 dark:text-amber-400 mb-6 backdrop-blur-md transition-colors duration-500 shadow-lg">
                            <span className="flex h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span>
                            {db.settings.announcementText}
                          </div>
                        )}

                        <h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 dark:text-white tracking-tight leading-[1.1] transition-colors duration-500">
                          We Edit Videos That <br />
                          <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-fuchsia-500 to-cyan-500 dark:from-amber-400 dark:via-fuchsia-400 dark:to-cyan-400 drop-shadow-sm">
                            Go Viral
                          </span>
                        </h1>
                        
                        <p className="mt-6 text-sm font-black tracking-[0.25em] text-slate-500 dark:text-slate-400 uppercase transition-colors">
                          Capture • Create • Inspire
                        </p>

                        <p className="mt-6 text-lg md:text-xl text-slate-600 dark:text-slate-300 leading-relaxed max-w-xl font-medium transition-colors duration-500">
                          Transforming raw footage into cinematic masterpieces. Get high-retention edits, advanced color grading, and viral hooks for the lowest price guaranteed.
                        </p>

                        <div className="mt-10 flex flex-wrap gap-4">
                          <button 
                            onClick={() => navigateTo('pricing')}
                            className="group flex items-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 text-white font-black hover:scale-105 transition-all duration-300 shadow-[0_10px_30px_-10px_rgba(245,158,11,0.5)]"
                          >
                            Claim Launch Offer
                            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                          </button>

                          <button 
                            onClick={() => navigateTo('portfolio')}
                            className="px-8 py-4 rounded-full border-2 border-slate-300 dark:border-white/20 bg-white/50 dark:bg-white/5 backdrop-blur-md hover:bg-slate-100 dark:hover:bg-white/10 text-slate-900 dark:text-white font-bold transition-all duration-300"
                          >
                            Explore Gallery
                          </button>
                        </div>

                        <div className="mt-14 grid grid-cols-3 gap-6 text-sm border-t border-slate-200 dark:border-white/10 pt-8 transition-colors duration-500">
                          <div>
                            <h3 className="text-3xl font-black text-slate-900 dark:text-white">100%</h3>
                            <p className="text-slate-500 dark:text-slate-400 mt-1 font-bold text-xs uppercase tracking-wider">Satisfaction</p>
                          </div>
                          <div>
                            <h3 className="text-3xl font-black text-slate-900 dark:text-white">24h</h3>
                            <p className="text-slate-500 dark:text-slate-400 mt-1 font-bold text-xs uppercase tracking-wider">Fast Delivery</p>
                          </div>
                          <div>
                            <h3 className="text-3xl font-black text-slate-900 dark:text-white">PRO</h3>
                            <p className="text-slate-500 dark:text-slate-400 mt-1 font-bold text-xs uppercase tracking-wider">Premium Quality</p>
                          </div>
                        </div>
                      </div>

                      {/* Dynamic Floating Editor Dashboard */}
                      <div className="relative lg:h-[650px] w-full perspective-1000 animate-[float_6s_ease-in-out_infinite] z-20 mt-10 lg:mt-0">
                        <div className="absolute inset-0 bg-gradient-to-tr from-amber-500/20 via-fuchsia-500/20 to-cyan-500/20 dark:from-amber-500/30 dark:via-fuchsia-600/30 dark:to-cyan-600/30 rounded-[2.5rem] blur-3xl transform rotate-3 transition-colors duration-500 animate-[pulse_4s_ease-in-out_infinite]"></div>
                        
                        <div className="relative h-full w-full rounded-[2.5rem] border-2 border-white/50 dark:border-white/20 overflow-hidden bg-black shadow-2xl transition-all duration-500 group">
                          <img
                            src={db.settings.logoUrl}
                            alt={db.settings.siteName}
                            className="w-full h-full object-contain p-4 lg:p-12 animate-[slowZoom_20s_ease-in-out_infinite_alternate]"
                            onError={(e) => { e.target.onerror = null; e.target.src = "https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?q=80&w=1600&auto=format&fit=crop"; e.target.className = "w-full h-full object-cover opacity-90 dark:opacity-80 animate-[slowZoom_20s_ease-in-out_infinite_alternate]"; }}
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent transition-colors duration-500 pointer-events-none"></div>
                          
                          {/* Floating Card 1: Retention Rate */}
                          <div className="absolute top-10 -left-4 lg:-left-8 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border border-slate-200 dark:border-white/10 rounded-2xl p-4 shadow-xl transform -rotate-3 animate-[float_4s_ease-in-out_infinite_reverse] hidden md:block">
                            <div className="flex items-center gap-4">
                              <div className="bg-emerald-100 dark:bg-emerald-500/20 p-3 rounded-xl">
                                <TrendingUp className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
                              </div>
                              <div>
                                <p className="text-[10px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-widest mb-1">Retention Rate</p>
                                <p className="text-xl font-black text-slate-900 dark:text-white">+340%</p>
                              </div>
                            </div>
                          </div>

                          {/* Floating Card 2: Quality Badge */}
                          <div className="absolute top-40 -right-4 lg:-right-6 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border border-slate-200 dark:border-white/10 rounded-2xl p-4 shadow-xl transform rotate-6 animate-[float_5s_ease-in-out_infinite] hidden md:block" style={{ animationDelay: '1s' }}>
                            <div className="flex items-center gap-3">
                              <div className="bg-amber-100 dark:bg-amber-500/20 p-2 rounded-xl text-amber-600 dark:text-amber-400 font-bold">
                                4K
                              </div>
                              <p className="text-xs font-bold text-slate-700 dark:text-slate-200 uppercase">Premium<br/>Export</p>
                            </div>
                          </div>
                          
                          {/* Main Rendering Card (Bottom) */}
                          <div className="absolute bottom-8 left-8 right-8 bg-white/90 dark:bg-slate-950/80 backdrop-blur-2xl border border-slate-200 dark:border-white/20 rounded-2xl p-6 flex items-center justify-between shadow-[0_20px_50px_rgba(0,0,0,0.2)] overflow-hidden transform group-hover:-translate-y-2 transition-transform duration-500">
                            <div className="absolute bottom-0 left-0 h-1.5 bg-gradient-to-r from-fuchsia-500 via-cyan-500 to-amber-500 animate-[renderProgress_3s_ease-in-out_infinite]"></div>
                            <div>
                              <p className="text-slate-900 dark:text-white font-black text-lg transition-colors flex items-center gap-2">
                                Adobe Premiere Pro
                                <span className="flex space-x-1 ml-2">
                                  <span className="w-1.5 h-1.5 bg-cyan-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></span>
                                  <span className="w-1.5 h-1.5 bg-cyan-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></span>
                                  <span className="w-1.5 h-1.5 bg-cyan-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></span>
                                </span>
                              </p>
                              <p className="text-cyan-600 dark:text-cyan-400 text-sm font-bold transition-colors mt-1">Rendering Final Cut... 84%</p>
                            </div>
                            <div className="relative flex items-center justify-center">
                              <div className="w-14 h-14 rounded-full border-4 border-slate-200 dark:border-slate-800 border-t-fuchsia-500 dark:border-t-fuchsia-500 animate-spin"></div>
                              <Sparkles className="w-5 h-5 text-fuchsia-500 absolute" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>

                  {/* === SOFTWARE STACK SECTION === */}
                  <section className="py-12 border-y border-slate-200 dark:border-white/5 bg-white/40 dark:bg-slate-950/50 backdrop-blur-md relative z-10 transition-colors duration-500">
                    <div className="max-w-7xl mx-auto px-6">
                      <p className="text-center text-sm font-bold text-slate-500 uppercase tracking-widest mb-10">
                        Powered By Industry-Leading Tools
                      </p>
                      <div className="flex flex-wrap justify-center items-center gap-8 md:gap-14">
                        {[
                          { name: 'Premiere Pro', Component: () => <AdobeIcon bg="#00005C" text="#EA77FF" label="Pr" /> },
                          { name: 'After Effects', Component: () => <AdobeIcon bg="#00005C" text="#9999FF" label="Ae" /> },
                          { name: 'Photoshop', Component: () => <AdobeIcon bg="#001E36" text="#31A8FF" label="Ps" /> },
                          { name: 'CapCut', Component: CapCutIcon },
                          { name: 'AI Generation', Component: AIcon }
                        ].map((tool, idx) => (
                          <div key={idx} className="flex items-center gap-3 group cursor-default">
                            <div className="transform group-hover:scale-110 transition-transform duration-300 group-hover:-translate-y-1">
                              <tool.Component />
                            </div>
                            <span className="text-slate-600 dark:text-slate-400 font-semibold group-hover:text-slate-900 dark:group-hover:text-white transition-colors">
                              {tool.name}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </section>
                </>
              )}

              {/* === SERVICES PAGE === */}
              {currentPage === 'services' && (
                <section className="py-24">
                  <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-20">
                      <h1 className="text-5xl md:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6 transition-colors duration-500">Our Capabilities</h1>
                      <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto font-light transition-colors duration-500">
                        End-to-end post-production engineered to capture attention, hold retention, and drive massive engagement.
                      </p>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-24">
                      {[
                        { icon: Smartphone, color: 'text-pink-500 dark:text-pink-400', bg: 'bg-pink-100 dark:bg-pink-400/10', title: 'Reel Editing', desc: 'Short-form, high-retention edits optimized for Instagram & TikTok.' },
                        { icon: MonitorPlay, color: 'text-cyan-600 dark:text-cyan-400', bg: 'bg-cyan-100 dark:bg-cyan-400/10', title: 'YouTube Videos', desc: 'Professional long-form cuts with dynamic pacing and viewer strategies.' },
                        { icon: Layers, color: 'text-violet-600 dark:text-violet-400', bg: 'bg-violet-100 dark:bg-violet-400/10', title: 'Motion Graphics', desc: 'Custom kinetic typography, VFX, and cinematic brand animations.' },
                        { icon: Zap, color: 'text-amber-500 dark:text-amber-400', bg: 'bg-amber-100 dark:bg-amber-400/10', title: 'Brand Adverts', desc: 'High-converting promotional material designed for paid media.' }
                      ].map((service, index) => (
                        <div key={index} className="p-8 rounded-3xl bg-white dark:bg-slate-900/50 backdrop-blur-sm border border-slate-200 dark:border-white/10 hover:shadow-xl dark:hover:border-white/30 transition-all duration-300 group">
                          <div className={`w-14 h-14 rounded-2xl ${service.bg} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                            <service.icon className={`w-7 h-7 ${service.color}`} />
                          </div>
                          <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3 transition-colors">{service.title}</h3>
                          <p className="text-slate-600 dark:text-slate-400 leading-relaxed text-sm transition-colors">{service.desc}</p>
                        </div>
                      ))}
                    </div>

                    <div className="bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-[3rem] p-8 lg:p-16 shadow-2xl transition-colors duration-500">
                      <div className="text-center mb-16">
                        {db.settings.announcementActive && (
                          <div className="inline-block px-4 py-1.5 rounded-full bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 font-bold text-sm tracking-widest uppercase mb-4">
                            {db.settings.announcementText}
                          </div>
                        )}
                        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white transition-colors">Individual Services</h2>
                        <p className="text-slate-600 dark:text-slate-400 mt-4 transition-colors">Special pricing! Best quality at the lowest price.</p>
                      </div>

                      <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
                        <div className="bg-white dark:bg-white/5 rounded-3xl p-8 border border-slate-200 dark:border-white/10 shadow-sm transition-colors duration-500">
                          <h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-8 flex items-center gap-3">
                            <div className="p-2 bg-gradient-to-r from-pink-500 to-fuchsia-500 rounded-lg">
                              <Video className="w-5 h-5 text-white" />
                            </div>
                            Reels Editing
                          </h4>
                          <div className="space-y-5">
                            <div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-white/5">
                              <span className="text-slate-600 dark:text-slate-300">Basic</span>
                              <div className="text-right">
                                <span className="text-xs text-slate-400 line-through mr-2">₹300</span>
                                <span className="font-bold text-slate-900 dark:text-white">₹199 <span className="text-xs font-normal text-slate-500">/ reel</span></span>
                              </div>
                            </div>
                            <div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-white/5">
                              <span className="text-slate-600 dark:text-slate-300">Standard</span>
                              <div className="text-right">
                                <span className="text-xs text-slate-400 line-through mr-2">₹500</span>
                                <span className="font-bold text-slate-900 dark:text-white">₹349 <span className="text-xs font-normal text-slate-500">/ reel</span></span>
                              </div>
                            </div>
                            <div className="flex justify-between items-center py-2">
                              <span className="text-slate-600 dark:text-slate-300">Premium</span>
                              <div className="text-right">
                                <span className="text-xs text-slate-400 line-through mr-2">₹800</span>
                                <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 dark:from-fuchsia-400 dark:to-cyan-400">₹499 <span className="text-xs font-normal text-slate-500 dark:text-slate-400">/ reel</span></span>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div className="bg-white dark:bg-white/5 rounded-3xl p-8 border border-slate-200 dark:border-white/10 shadow-sm transition-colors duration-500">
                          <h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-8 flex items-center gap-3">
                            <div className="p-2 bg-gradient-to-r from-red-500 to-rose-500 rounded-lg">
                              <MonitorPlay className="w-5 h-5 text-white" />
                            </div>
                            YouTube Editing
                          </h4>
                          <div className="space-y-5">
                            <div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-white/5">
                              <span className="text-slate-600 dark:text-slate-300">Basic</span>
                              <div className="text-right">
                                <span className="text-xs text-slate-400 line-through mr-2">₹800</span>
                                <span className="font-bold text-slate-900 dark:text-white">₹499 <span className="text-xs font-normal text-slate-500">/ video</span></span>
                              </div>
                            </div>
                            <div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-white/5">
                              <span className="text-slate-600 dark:text-slate-300">Standard</span>
                              <div className="text-right">
                                <span className="text-xs text-slate-400 line-through mr-2">₹1200</span>
                                <span className="font-bold text-slate-900 dark:text-white">₹799 <span className="text-xs font-normal text-slate-500">/ video</span></span>
                              </div>
                            </div>
                            <div className="flex justify-between items-center py-2">
                              <span className="text-slate-600 dark:text-slate-300">Advanced</span>
                              <div className="text-right">
                                <span className="text-xs text-slate-400 line-through mr-2">₹2000</span>
                                <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-orange-600 dark:from-red-400 dark:to-orange-400">₹1,299 <span className="text-xs font-normal text-slate-500 dark:text-slate-400">/ video</span></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              )}

              {/* === PORTFOLIO PAGE === */}
              {currentPage === 'portfolio' && (
                <section className="py-24">
                  <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-16">
                      <h1 className="text-5xl md:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6 transition-colors duration-500">Our Premium Work</h1>
                      <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto font-light transition-colors duration-500">
                        A curated gallery of our recent cinematic edits, motion graphics, and viral social media campaigns.
                      </p>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                      {[
                        { id: 1, title: 'Tech Review Series', category: 'YouTube Edit', color: 'from-cyan-500', img: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=800&auto=format&fit=crop' },
                        { id: 2, title: 'Fitness Apparel Ad', category: 'Commercial', color: 'from-fuchsia-500', img: 'https://images.unsplash.com/photo-1526506114869-c646fa01c349?q=80&w=800&auto=format&fit=crop' },
                        { id: 3, title: 'Lifestyle Vlogs', category: 'Social Media', color: 'from-violet-500', img: 'https://images.unsplash.com/photo-1616423640778-28d1b53229bd?q=80&w=800&auto=format&fit=crop' },
                        { id: 4, title: 'Music Video Cut', category: 'Cinematic', color: 'from-pink-500', img: 'https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop' },
                        { id: 5, title: 'Podcast Highlights', category: 'Shorts/Reels', color: 'from-amber-500', img: 'https://images.unsplash.com/photo-1590602847861-f357a9332bbc?q=80&w=800&auto=format&fit=crop' },
                        { id: 6, title: 'Real Estate Tour', category: 'Promo Video', color: 'from-emerald-500', img: 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=800&auto=format&fit=crop' }
                      ].map((work) => (
                        <div key={work.id} className="group relative aspect-[4/5] rounded-3xl overflow-hidden bg-slate-200 dark:bg-slate-900 cursor-pointer border border-slate-200 dark:border-white/10 shadow-xl transition-colors duration-500">
                          <img
                            src={work.img}
                            alt={work.title}
                            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-90 dark:opacity-70 group-hover:opacity-100"
                          />
                          <div className={`absolute inset-0 bg-gradient-to-t ${work.color} mix-blend-overlay opacity-0 group-hover:opacity-40 dark:group-hover:opacity-60 transition-opacity duration-500`}></div>
                          <div className="absolute inset-0 bg-gradient-to-t from-white via-white/80 dark:from-slate-950 dark:via-slate-950/40 to-transparent flex flex-col justify-end p-8 transition-colors duration-500">
                            <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                              <span className="inline-block px-3 py-1 rounded-full bg-slate-900/10 dark:bg-white/20 backdrop-blur-md text-xs font-bold tracking-wider text-slate-800 dark:text-white uppercase mb-3 border border-slate-900/10 dark:border-white/10">
                                {work.category}
                              </span>
                              <h3 className="text-2xl font-bold text-slate-900 dark:text-white drop-shadow-sm transition-colors">{work.title}</h3>
                              <div className="w-0 h-1 bg-fuchsia-500 mt-4 group-hover:w-12 transition-all duration-500"></div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </section>
              )}

              {/* === PRICING PAGE (WITH DYNAMIC DATA) === */}
              {currentPage === 'pricing' && (
                <section className="py-24">
                  <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-12">
                      {db.settings.announcementActive && (
                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 font-bold text-sm tracking-widest uppercase mb-6 border border-amber-200 dark:border-amber-500/20">
                          {db.settings.announcementText}
                        </div>
                      )}
                      <h1 className="text-5xl md:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6 transition-colors duration-500">Package Plans</h1>
                      <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto font-light transition-colors duration-500">
                        Structured monthly deliverables for consistent growth. Pick a tier that fits your needs.
                      </p>
                    </div>

                    {/* Package Tabs */}
                    <div className="flex justify-center mb-16">
                      <div className="bg-slate-200/70 dark:bg-slate-900/70 p-1.5 rounded-full flex gap-2 border border-slate-300 dark:border-white/10 shadow-inner overflow-x-auto max-w-full">
                        {Object.keys(db.retainerPackages).map(tab => (
                          <button
                            key={tab}
                            onClick={() => setPricingTab(tab)}
                            className={`px-8 py-3 rounded-full text-sm md:text-base font-bold uppercase tracking-wider transition-all duration-300 ${
                              pricingTab === tab 
                                ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-lg border border-slate-200 dark:border-white/10' 
                                : 'text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50'
                            }`}
                          >
                            {db.retainerPackages[tab].name}
                          </button>
                        ))}
                      </div>
                    </div>

                    <div className="text-center mb-10 animate-in slide-in-from-bottom-4 duration-500">
                      <h2 className={`text-3xl font-bold ${db.retainerPackages[pricingTab]?.colorText}`}>{db.retainerPackages[pricingTab]?.name} Package</h2>
                      <p className="text-slate-500 dark:text-slate-400 mt-2">{db.retainerPackages[pricingTab]?.desc}</p>
                    </div>

                    {/* Cards for selected package using dynamic DB state */}
                    <div className="grid lg:grid-cols-3 gap-8 mb-24 items-center animate-in fade-in zoom-in-95 duration-500">
                      {db.retainerPackages[pricingTab]?.tiers.map((plan, index) => {
                        const IconComponent = IconMap[plan.icon] || Rocket;
                        
                        return (
                          <div 
                            key={index} 
                            className={`relative flex flex-col rounded-[2.5rem] p-8 lg:p-10 transition-all duration-500 ${
                              plan.popular 
                                ? `bg-white dark:bg-slate-900 border-2 ${db.retainerPackages[pricingTab].colorBorder} shadow-[0_20px_50px_-12px_rgba(0,0,0,0.1)] dark:shadow-none lg:-translate-y-4` 
                                : 'bg-white/80 dark:bg-slate-900/50 backdrop-blur-sm border border-slate-200 dark:border-white/10 hover:border-slate-300 dark:hover:border-white/30 shadow-sm'
                            }`}
                          >
                            {plan.popular && (
                              <div className={`absolute -top-5 left-1/2 -translate-x-1/2 px-6 py-2 ${db.retainerPackages[pricingTab].colorBg} text-white text-xs font-bold tracking-widest uppercase rounded-full shadow-lg`}>
                                Best Value
                              </div>
                            )}
                            
                            <div className="flex items-center gap-4 mb-4">
                              <div className={`w-12 h-12 rounded-2xl ${db.retainerPackages[pricingTab].colorBg} flex items-center justify-center shadow-lg text-white`}>
                                <IconComponent className="w-6 h-6" />
                              </div>
                              <div>
                                <h3 className="text-2xl font-extrabold text-slate-900 dark:text-white transition-colors">{plan.name}</h3>
                                <p className={`text-sm font-bold ${db.retainerPackages[pricingTab].colorText}`}>{plan.reels}</p>
                              </div>
                            </div>
                            
                            <div className="my-6 pb-6 border-b border-slate-100 dark:border-white/10 transition-colors">
                              <div className="text-slate-400 dark:text-slate-500 line-through text-lg font-bold mb-1">{plan.old}</div>
                              <div className="flex items-end gap-2">
                                <span className={`text-5xl font-black ${db.retainerPackages[pricingTab].colorText} transition-colors`}>{plan.price}</span>
                                <span className="text-slate-400 dark:text-slate-500 font-medium mb-1">/ mo</span>
                              </div>
                              <div className="mt-3 inline-block px-3 py-1 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-sm font-bold border border-slate-200 dark:border-white/5">
                                {plan.per}
                              </div>
                            </div>

                            <ul className="space-y-4 mb-10 flex-1">
                              {db.retainerPackages[pricingTab].features.map((feature, idx) => (
                                <li key={idx} className="flex items-start gap-3 text-slate-700 dark:text-slate-300 transition-colors">
                                  <CheckCircle2 className={`w-5 h-5 shrink-0 ${db.retainerPackages[pricingTab].colorText}`} />
                                  <span className="font-medium text-sm lg:text-base">{feature}</span>
                                </li>
                              ))}
                            </ul>

                            <button className={`w-full py-4 rounded-xl font-bold text-lg transition-all duration-300 ${
                              plan.popular 
                                ? `${db.retainerPackages[pricingTab].colorBg} text-white shadow-lg hover:scale-105` 
                                : 'bg-slate-100 dark:bg-white/10 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-white/20'
                            }`}>
                              Select Package
                            </button>
                          </div>
                        )
                      })}
                    </div>

                    {/* Payment Widget */}
                    <div className="max-w-4xl mx-auto">
                      <div className="bg-gradient-to-r from-fuchsia-500/20 to-cyan-500/20 rounded-[3rem] p-1 shadow-xl overflow-hidden">
                        <div className="bg-white/95 dark:bg-slate-950/90 backdrop-blur-2xl rounded-[2.8rem] p-8 md:p-12 border border-white/50 dark:border-white/10 transition-colors duration-500">
                          <div className="flex flex-col md:flex-row gap-12 items-center">
                            <div className="flex-1">
                              <div className="inline-flex items-center gap-2 text-sm font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-400/10 px-4 py-2 rounded-full mb-8 transition-colors">
                                <ShieldCheck className="w-5 h-5" /> 100% Secure Transaction
                              </div>
                              <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4 transition-colors">Instant UPI Payment</h2>
                              <p className="text-slate-600 dark:text-slate-400 leading-relaxed mb-8 text-lg transition-colors">
                                Scan the QR or copy the VPA to start your project immediately. We support all major Indian payment apps.
                              </p>

                              <div className="space-y-6">
                                <div className="bg-slate-50 dark:bg-slate-900 rounded-2xl p-5 flex justify-between items-center border border-slate-200 dark:border-white/10 shadow-inner transition-colors duration-500">
                                  <div>
                                    <p className="text-xs text-slate-500 uppercase tracking-wider mb-1 font-bold">UPI ID (VPA)</p>
                                    <p className="text-slate-900 dark:text-white font-mono text-xl tracking-wide font-medium transition-colors">srivisual@slc</p>
                                  </div>
                                  <button className="text-sm font-bold px-6 py-3 bg-slate-900 text-white dark:bg-white dark:text-slate-950 hover:opacity-90 rounded-xl transition-all shadow-md">
                                    Copy ID
                                  </button>
                                </div>
                                
                                <div className="flex flex-wrap items-center gap-4 text-slate-500 text-sm font-medium">
                                  <span>Supported Apps:</span>
                                  <span className="px-3 py-1 bg-slate-100 dark:bg-white/5 rounded-lg text-slate-700 dark:text-slate-300 transition-colors">GPay</span>
                                  <span className="px-3 py-1 bg-slate-100 dark:bg-white/5 rounded-lg text-slate-700 dark:text-slate-300 transition-colors">PhonePe</span>
                                  <span className="px-3 py-1 bg-slate-100 dark:bg-white/5 rounded-lg text-slate-700 dark:text-slate-300 transition-colors">Paytm</span>
                                </div>
                              </div>
                            </div>

                            <div className="w-full md:w-80 bg-slate-50 dark:bg-slate-900 p-8 rounded-3xl border border-slate-200 dark:border-white/10 text-center shadow-xl relative overflow-hidden transition-colors duration-500">
                              <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/40 dark:via-white/5 to-transparent"></div>
                              
                              <div className="aspect-square bg-white rounded-2xl mb-8 flex items-center justify-center p-6 shadow-inner border border-slate-100 dark:border-slate-800 relative z-10 transition-colors duration-500">
                                <div className="w-full h-full border-4 border-dashed border-slate-300 dark:border-slate-700 rounded-xl flex flex-col items-center justify-center gap-2 bg-slate-50 dark:bg-slate-950 transition-colors">
                                  <Smartphone className="w-8 h-8 text-slate-400" />
                                  <span className="text-slate-500 font-bold text-sm text-center">Scan with<br/>Any App</span>
                                </div>
                              </div>
                              <button className="w-full py-4 bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold rounded-xl hover:scale-105 transition-all duration-300 shadow-lg shadow-cyan-500/25 relative z-10">
                                I Have Paid
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              )}
            </>
          )}

        </main>

        {/* Footer */}
        <footer className="relative z-10 bg-white dark:bg-slate-950 border-t border-slate-200 dark:border-white/10 pt-20 pb-10 transition-colors duration-500">
          <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-12">
            <div className="md:col-span-2">
              <div className="flex items-center gap-3 mb-6">
                <img 
                  src={db.settings.logoUrl} 
                  alt="SV" 
                  className="w-10 h-10 rounded-lg object-contain bg-black shadow-md border border-slate-200 dark:border-white/10"
                  onError={(e) => { e.target.onerror = null; e.target.src = "https://via.placeholder.com/150/000000/FFFFFF?text=SV"; }}
                />
                <span className="text-slate-900 dark:text-white font-bold tracking-widest text-lg transition-colors uppercase">{db.settings.siteName}</span>
              </div>
              <p className="text-slate-500 dark:text-slate-400 max-w-md leading-relaxed transition-colors">
                A premium post-production agency dedicated to scaling brands and creators through high-retention, cinematic visual content.
              </p>
              <div className="flex gap-4 mt-8">
                <a href="#" className="w-12 h-12 rounded-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-fuchsia-500 hover:border-fuchsia-500 dark:hover:text-white dark:hover:bg-fuchsia-500 transition-all duration-300">
                  <Instagram className="w-5 h-5" />
                </a>
                <a href="#" className="w-12 h-12 rounded-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-cyan-500 hover:border-cyan-500 dark:hover:text-white dark:hover:bg-cyan-500 transition-all duration-300">
                  <Mail className="w-5 h-5" />
                </a>
              </div>
            </div>
            
            <div>
              <h4 className="text-slate-900 dark:text-white font-bold text-lg mb-6 transition-colors">Navigation</h4>
              <ul className="space-y-4 font-medium text-slate-500 dark:text-slate-400 transition-colors">
                <li><button onClick={() => navigateTo('home')} className="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Home</button></li>
                <li><button onClick={() => navigateTo('services')} className="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Services</button></li>
                <li><button onClick={() => navigateTo('portfolio')} className="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Portfolio</button></li>
                <li><button onClick={() => navigateTo('pricing')} className="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Pricing</button></li>
              </ul>
            </div>

            <div>
              <h4 className="text-slate-900 dark:text-white font-bold text-lg mb-6 transition-colors">Legal</h4>
              <ul className="space-y-4 font-medium text-slate-500 dark:text-slate-400 transition-colors">
                <li><a href="#" className="hover:text-slate-900 dark:hover:text-white transition-colors">Terms of Service</a></li>
                <li><a href="#" className="hover:text-slate-900 dark:hover:text-white transition-colors">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-slate-900 dark:hover:text-white transition-colors">Refund Policy</a></li>
              </ul>
            </div>
          </div>
          
          <div className="max-w-7xl mx-auto px-6 mt-20 pt-8 border-t border-slate-200 dark:border-white/10 text-slate-400 dark:text-slate-500 font-medium flex flex-col md:flex-row justify-between items-center gap-4 transition-colors duration-500">
            <p>© {new Date().getFullYear()} {db.settings.siteName}. All rights reserved.</p>
            <div className="flex items-center gap-4">
              <p className="flex items-center gap-2">Crafted with <span className="text-fuchsia-500">♥</span> for Creators</p>
              <button 
                onClick={() => navigateTo('admin')}
                className="text-xs text-slate-300 dark:text-slate-700 hover:text-slate-500 dark:hover:text-slate-500 transition-colors ml-4"
              >
                Admin Portal
              </button>
            </div>
          </div>
        </footer>

        {/* Global CSS for custom animations */}
        <style dangerouslySetInnerHTML={{__html: `
          @keyframes shimmer {
            100% { transform: translateX(100%); }
          }
          @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
          }
          @keyframes slowZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
          }
          @keyframes renderProgress {
            0% { width: 0%; }
            50% { width: 84%; }
            100% { width: 100%; }
          }
        `}} />
      </div>
    </div>
  );
}