import React, { useState, useEffect } from 'react';

// --- DESIGN TOKENS & GLOBALS ---
const COLORS = {
  primary: '#351C42',    // Deep Velvet Purple
  secondary: '#581D32',  // Royal Burgundy
  accent: '#123F35',     // Emerald Velvet
  gold: '#C5A46D',       // Luxury Gold
  ivory: '#F5F0E8',      // Warm Ivory
  plum: '#1B1420'        // Midnight Plum
};

const PHONE_NUMBER = "60193226196";

// --- DATA LISTS ---
const HEAD_SPA_PACKAGES = [
  { id: 'hs1', name: 'Basic Head Spa', price: 'RM69', desc: 'A refreshing introductory head spa treatment for scalp health.' },
  { id: 'hs2', name: 'Sakura Head Spa', price: 'RM169', originalPrice: 'RM199', desc: 'Premium treatment with deep cleansing and relaxing massage.' },
  { id: 'hs3', name: 'Fuji Head Spa', price: 'RM249', desc: 'Luxurious extended treatment focusing on scalp rejuvenation and stress relief.' },
  { id: 'hs4', name: 'Imperial Head Spa', price: 'RM329', desc: 'The ultimate royal velvet experience. Complete scalp, neck, and shoulder therapy.' }
];

const MASSAGES = [
  { name: 'Urutan Full Body', price: 'RM100' },
  { name: 'Hot Stone Massage', price: 'RM160' },
  { name: 'Urutan Postnatal', price: 'RM130' },
  { name: 'Urutan Moden GenQi', price: 'RM150 / RM190' },
  { name: 'Sport Massage', price: 'RM160' },
  { name: 'Urutan Regangan', price: 'RM160' },
  { name: 'Urutan Remedi', price: 'RM160' },
  { name: 'Half Body Massage', price: 'RM65' }
];

const FACIALS = [
  { name: 'Facial Basic', price: 'RM50' },
  { name: 'Facial Deep Cleansing / Acne', price: 'RM100' },
  { name: 'Facial Dermabrasion', price: 'RM100' },
  { name: 'Facial Picolaser', price: 'RM150' },
  { name: 'Facial Dermapen', price: 'RM150' }
];

const AESTHETICS = [
  { name: 'Skin Booster', price: 'RM200' },
  { name: 'PRP', price: 'RM150' },
  { name: 'Mati Akar Jeragat', price: 'RM200' },
  { name: 'PRP + Mati Akar Jeragat', price: 'RM330' }
];

const SPA_POSTERS = [
  "https://platform-bcl.bsb-cdn.com/media/2026/10/ls8CdrWlZ2nPLyiBX0Bsd2upiD8OfSIOOt6flhpx.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/IkNjQjRNLguN7Qwk2Ovn1x0ikFuiByc7vxdzKjUn.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/SQMcL4Ju4uyfoqQjrVKxBlTFBS7bhYHYkOnsjzut.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/p4dfA3tZErZDXxprGpGYExJCYQjJgt2lhcMtGV5B.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/C1Nn6LNrD0wXqurL629TPYctysLTClYpFGYmvQqQ.jpg"
];

const UNIFORM_CATEGORIES = [
  "DSA Wanita — Pembantu Pembedahan Pergigian",
  "Sister (SR/KUP)",
  "Juruteknik Pergigian / Nurse / Sister / Matron",
  "PPEM Wanita — Pembantu Penyediaan Makanan",
  "Pembantu Pegawai Perubatan (PPP/MA)",
  "Jururawat (SN/JM)",
  "Inspektor Kesihatan Wanita (IK)",
  "Pregnant / Maternity Uniform",
  "Pembantu Perawatan Kesihatan (PPK)"
];

const UNIFORM_IMAGES = [
  "https://platform-bcl.bsb-cdn.com/media/2026/10/gPHpD0ajEzqB7d1ejyL1eRA1CtXEy6VbBxVQRFnk.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/keGXJc60S5S8FoCbuXCWAIq3OWEZRHHVNwWU1Gua.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/uL0f5zXsU1koBT9weXDEiUKL3l8WCsdmHIpTbKJG.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/EOqNghyN6e1Cqjts5zUkrKwTXXanHjhaxwGNhVMi.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/7uSo1MQtdLbf8PyfBhW1srfNs7S9Gv6F6d5iLxje.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/MfLmlLpBDTBViICxq0tO2QMo3lXZYB3w7C3aYiKa.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/9sWQi5c7d9UHz14mwOYENEleQqZmTkn1WQdC2DVQ.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/S8bUNxuD4cc8BpUEFI4uVsxogPf3awYI6Yb9Wj7w.jpg",
  "https://platform-bcl.bsb-cdn.com/media/2026/10/5mJ58bKLLD1WkiJ9h7zzVIjNqSPfOERIcCnlAgxk.jpg"
];

const MOCK_UNIFORMS = UNIFORM_CATEGORIES.map((cat, index) => ({
  id: `u${index + 1}`,
  name: `Uniform ${cat.split('—')[0].trim()}`,
  category: cat,
  price: 'TANYA HARGA',
  colors: ['Putih', 'Biru', 'Hitam'],
  sizes: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
  image: UNIFORM_IMAGES[index]
}));

// --- COMPONENTS ---

// 1. Icons (Inline SVG to guarantee availability)
const IconChevronDown = () => <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>;
const IconMenu = () => <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>;
const IconX = () => <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>;
const IconWhatsApp = () => <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12.031 0C5.397 0 .013 5.385.013 12.018c0 2.122.553 4.195 1.603 6.01L0 24l6.113-1.602c1.745.955 3.738 1.458 5.918 1.458 6.634 0 12.018-5.385 12.018-12.018S18.665 0 12.031 0zm0 22.036c-1.802 0-3.565-.484-5.112-1.402l-.366-.217-3.799.996.996-3.702-.238-.378c-1.008-1.602-1.54-3.46-1.54-5.315 0-5.717 4.65-10.366 10.366-10.366 5.717 0 10.366 4.65 10.366 10.366 0 5.717-4.65 10.366-10.366 10.366zm5.688-7.77c-.312-.156-1.844-.912-2.13-1.017-.281-.104-.488-.156-.692.156-.204.312-.807 1.017-.99 1.225-.182.208-.364.234-.676.078-1.503-.746-2.583-1.428-3.562-2.922-.204-.312.204-.286.802-1.482.078-.156.039-.286-.039-.442-.078-.156-.692-1.666-.948-2.28-.246-.602-.492-.52-.692-.53-.182-.01-.39-.01-.598-.01-.208 0-.546.078-.832.39-.286.312-1.092 1.066-1.092 2.6 0 1.534 1.118 3.016 1.274 3.224.156.208 2.197 3.354 5.317 4.706 2.054.892 2.795.962 3.822.806 1.131-.17 3.224-1.317 3.68-2.59.454-1.274.454-2.366.312-2.59-.143-.224-.533-.354-.845-.51z"/></svg>;

// 2. Shared UI Components
const Button = ({ children, variant = 'primary', onClick, className = '' }) => {
  const base = "px-6 py-3 rounded-md transition-all duration-300 font-medium tracking-wide";
  const variants = {
    primary: "bg-[#C5A46D] text-[#1B1420] hover:bg-yellow-600 shadow-lg",
    secondary: "bg-transparent border-2 border-[#C5A46D] text-[#C5A46D] hover:bg-[#C5A46D] hover:text-[#1B1420]",
    dark: "bg-[#351C42] text-[#F5F0E8] hover:bg-[#1B1420] shadow-md"
  };
  return (
    <button onClick={onClick} className={`${base} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

const SectionHeading = ({ title, subtitle, dark = false }) => (
  <div className="text-center mb-12">
    <h2 className={`font-serif text-4xl md:text-5xl mb-4 ${dark ? 'text-[#351C42]' : 'text-[#C5A46D]'}`}>{title}</h2>
    {subtitle && <p className={`text-lg max-w-2xl mx-auto ${dark ? 'text-gray-600' : 'text-[#F5F0E8] opacity-80'}`}>{subtitle}</p>}
    <div className={`h-1 w-24 mx-auto mt-6 ${dark ? 'bg-[#351C42]' : 'bg-[#C5A46D]'}`}></div>
  </div>
);

// 3. Modals & Widgets
const FloatingWhatsApp = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openWA = (type) => {
    let msg = type === 'spa' 
      ? "Hi Addinmedics Beauty Lounge, saya nak tanya tentang servis spa."
      : "Hi Addinmedics Boutique, saya nak tanya tentang uniform.";
    window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(msg)}`, '_blank');
    setIsOpen(false);
  };

  return (
    <div className="fixed bottom-6 right-6 z-50">
      {isOpen && (
        <div className="absolute bottom-16 right-0 mb-4 bg-white rounded-lg shadow-2xl overflow-hidden w-72 border border-gray-200 animate-fade-in-up">
          <div className="bg-[#351C42] text-white p-4 font-serif text-lg border-b-2 border-[#C5A46D]">
            How can we help you?
          </div>
          <div className="flex flex-col">
            <button onClick={() => openWA('spa')} className="p-4 text-left hover:bg-gray-50 border-b transition-colors text-[#351C42] font-medium flex items-center gap-3">
              <span className="bg-[#581D32] text-white p-2 rounded-full"><IconWhatsApp /></span>
              Beauty Lounge
            </button>
            <button onClick={() => openWA('uniform')} className="p-4 text-left hover:bg-gray-50 transition-colors text-[#351C42] font-medium flex items-center gap-3">
              <span className="bg-[#123F35] text-white p-2 rounded-full"><IconWhatsApp /></span>
              Uniform Boutique
            </button>
          </div>
        </div>
      )}
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="bg-[#25D366] text-white p-4 rounded-full shadow-2xl hover:bg-green-600 transition-transform hover:scale-110 flex items-center justify-center"
      >
        {isOpen ? <IconX /> : <IconWhatsApp />}
      </button>
    </div>
  );
};

// 4. Main Views
export default function App() {
  const [currentRoute, setCurrentRoute] = useState('home'); // home, beauty, uniform, admin
  const [subRoute, setSubRoute] = useState('home'); // for specific pages within sections
  const [selectedProduct, setSelectedProduct] = useState(null);

  // Global styles injection for fonts
  useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');
      body { font-family: 'Inter', sans-serif; background-color: ${COLORS.ivory}; color: #333; }
      h1, h2, h3, h4, h5, h6, .font-serif { font-family: 'Cormorant Garamond', serif; }
      .bg-velvet { background: linear-gradient(135deg, ${COLORS.primary} 0%, ${COLORS.plum} 100%); }
      .text-gold { color: ${COLORS.gold}; }
      .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
      @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      .hide-scrollbar::-webkit-scrollbar { display: none; }
    `;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  const navigate = (main, sub = 'home', product = null) => {
    window.scrollTo(0, 0);
    setCurrentRoute(main);
    setSubRoute(sub);
    setSelectedProduct(product);
  };

  return (
    <div className="min-h-screen flex flex-col">
      {currentRoute !== 'home' && (
        <Navbar currentRoute={currentRoute} navigate={navigate} />
      )}

      <main className="flex-grow">
        {currentRoute === 'home' && <MainHome navigate={navigate} />}
        {currentRoute === 'beauty' && (
          <BeautyLounge subRoute={subRoute} navigate={navigate} />
        )}
        {currentRoute === 'uniform' && (
          <UniformBoutique subRoute={subRoute} navigate={navigate} product={selectedProduct} />
        )}
        {currentRoute === 'admin' && <AdminMockup navigate={navigate} />}
      </main>

      {currentRoute !== 'home' && <Footer />}
      <FloatingWhatsApp />
    </div>
  );
}

// --- NAVIGATION & FOOTER ---
const Navbar = ({ currentRoute, navigate }) => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const isBeauty = currentRoute === 'beauty';
  
  const navLinks = isBeauty ? [
    { label: 'Home', route: 'home' },
    { label: 'Head Spa', route: 'head-spa' },
    { label: 'Massage', route: 'massage' },
    { label: 'Facials', route: 'facial' },
    { label: 'Packages', route: 'packages' },
    { label: 'All Treatments', route: 'all' },
  ] : [
    { label: 'Home', route: 'home' },
    { label: 'Catalogue', route: 'catalog' }
  ];

  return (
    <nav className={`sticky top-0 z-40 transition-colors duration-300 ${isBeauty ? 'bg-[#351C42] text-[#F5F0E8]' : 'bg-white text-[#351C42] shadow-sm'}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20 items-center">
          <div className="flex-shrink-0 flex items-center cursor-pointer" onClick={() => navigate(currentRoute, 'home')}>
            {currentRoute === 'uniform' ? (
              <img src="https://platform-bcl.bsb-cdn.com/media/2026/10/hJ9ASwQLl5Qt8ajATjYfF6AEx1Xy6fdB2rotyxrM.jpg" alt="Addinmedics Boutique Logo" className="h-14 md:h-16 w-auto object-contain" />
            ) : currentRoute === 'beauty' ? (
              <img src="https://platform-bcl.bsb-cdn.com/media/2026/10/WEIRLg7SiBgLlwIiRmTLTHbPnptFfLIgk8AMXQM0.jpg" alt="Addinmedics Beauty Lounge Logo" className="h-14 md:h-16 w-auto object-contain" />
            ) : (
              <span className="font-serif text-2xl tracking-widest font-bold">
                ADDINMEDICS
              </span>
            )}
          </div>
          
          <div className="hidden md:flex space-x-8 items-center">
            {navLinks.map((link) => (
              <button 
                key={link.label}
                onClick={() => navigate(currentRoute, link.route)}
                className={`text-sm tracking-wide uppercase hover:text-[#C5A46D] transition-colors`}
              >
                {link.label}
              </button>
            ))}
            <button onClick={() => navigate('home')} className="text-xs opacity-70 hover:opacity-100">Switch Business</button>
          </div>

          <div className="md:hidden flex items-center">
            <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
              {isMobileMenuOpen ? <IconX /> : <IconMenu />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className={`md:hidden ${isBeauty ? 'bg-[#1B1420]' : 'bg-gray-50'}`}>
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {navLinks.map((link) => (
              <button
                key={link.label}
                onClick={() => { navigate(currentRoute, link.route); setIsMobileMenuOpen(false); }}
                className="block px-3 py-2 w-full text-left uppercase text-sm"
              >
                {link.label}
              </button>
            ))}
            <button onClick={() => navigate('home')} className="block w-full text-left px-3 py-2 text-sm opacity-70">
              Switch Business
            </button>
          </div>
        </div>
      )}
    </nav>
  );
};

const Footer = () => (
  <footer className="bg-[#1B1420] text-[#F5F0E8] py-16 border-t-4 border-[#C5A46D]">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left">
      <div>
        <h3 className="font-serif text-2xl text-[#C5A46D] mb-4">ADDINMEDICS</h3>
        <p className="opacity-80 text-sm leading-relaxed mb-4">
          Two Distinct Experiences.<br/> One Trusted Brand.
        </p>
        <p className="opacity-60 text-xs">© 2026 Addinmedics. All rights reserved.</p>
      </div>
      <div>
        <h4 className="font-serif text-xl mb-4 text-[#C5A46D]">Visit Us</h4>
        <p className="opacity-80 text-sm leading-relaxed">
          1698, Ibai Landmark Garden,<br/>
          Jalan Tok Adis, Kuala Ibai,<br/>
          20400 Kuala Terengganu,<br/>
          Terengganu, Malaysia.
        </p>
      </div>
      <div>
        <h4 className="font-serif text-xl mb-4 text-[#C5A46D]">Contact</h4>
        <p className="opacity-80 text-sm leading-relaxed mb-4">
          Phone/WhatsApp: +60 19-322 6196
        </p>
        <Button variant="secondary" onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}`, '_blank')}>
          Contact Us via WhatsApp
        </Button>
      </div>
    </div>
  </footer>
);


// --- 1. MAIN HOMEPAGE ---
const MainHome = ({ navigate }) => {
  return (
    <div className="min-h-screen bg-velvet text-[#F5F0E8] flex flex-col justify-center relative overflow-hidden">
      {/* Background aesthetic overlay */}
      <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] pointer-events-none"></div>
      
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center w-full">
        <h1 className="font-serif text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-wide animate-fade-in text-gold">
          WELCOME TO ADDINMEDICS
        </h1>
        <p className="text-xl md:text-2xl mb-16 font-light opacity-90 max-w-3xl mx-auto animate-fade-in" style={{animationDelay: '0.2s'}}>
          Two Distinct Experiences. One Trusted Brand.
        </p>
        <p className="text-sm md:text-base opacity-75 max-w-2xl mx-auto mb-16 animate-fade-in" style={{animationDelay: '0.3s'}}>
          Discover premium beauty and wellness experiences alongside professional healthcare uniforms, thoughtfully brought together under ADDINMEDICS.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 w-full animate-fade-in" style={{animationDelay: '0.4s'}}>
          {/* Card 1: Beauty */}
          <div className="group relative bg-[#1B1420] rounded-2xl overflow-hidden border border-[#581D32] hover:border-[#C5A46D] transition-all duration-500 shadow-2xl flex flex-col h-[500px]">
            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1600334129128-685c5582fd35?q=80&w=800&auto=format&fit=crop')] bg-cover bg-center opacity-40 group-hover:opacity-60 transition-opacity duration-700 group-hover:scale-105 transform"></div>
            <div className="absolute inset-0 bg-gradient-to-t from-[#1B1420] via-transparent to-transparent"></div>
            <div className="relative z-10 p-8 flex flex-col h-full justify-end items-center text-center">
              <img src="https://platform-bcl.bsb-cdn.com/media/2026/10/WEIRLg7SiBgLlwIiRmTLTHbPnptFfLIgk8AMXQM0.jpg" alt="Addinmedics Beauty Lounge Logo" className="h-24 md:h-28 mb-4 object-contain" />
              <h2 className="font-serif text-3xl md:text-4xl text-[#C5A46D] mb-2">BEAUTY LOUNGE</h2>
              <p className="tracking-[0.2em] text-xs uppercase mb-6 opacity-80">Beauty • Confidence • Care</p>
              <p className="text-sm md:text-base mb-8 opacity-90 leading-relaxed max-w-sm">
                Experience luxurious head spa treatments, therapeutic massages, professional facial care and complete wellness services.
              </p>
              <Button onClick={() => navigate('beauty', 'home')} variant="primary" className="w-full md:w-auto">EXPLORE BEAUTY LOUNGE</Button>
            </div>
          </div>

          {/* Card 2: Uniform */}
          <div className="group relative bg-[#1B1420] rounded-2xl overflow-hidden border border-[#123F35] hover:border-[#C5A46D] transition-all duration-500 shadow-2xl flex flex-col h-[500px]">
            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1576091160550-2173ae9e5e3c?q=80&w=800&auto=format&fit=crop')] bg-cover bg-center opacity-40 group-hover:opacity-60 transition-opacity duration-700 group-hover:scale-105 transform"></div>
            <div className="absolute inset-0 bg-gradient-to-t from-[#1B1420] via-transparent to-transparent"></div>
            <div className="relative z-10 p-8 flex flex-col h-full justify-end items-center text-center">
              <img src="https://platform-bcl.bsb-cdn.com/media/2026/10/hJ9ASwQLl5Qt8ajATjYfF6AEx1Xy6fdB2rotyxrM.jpg" alt="Addinmedics Boutique Logo" className="h-24 md:h-28 mb-4 object-contain" />
              <h2 className="font-serif text-3xl md:text-4xl text-[#C5A46D] mb-2">BOUTIQUE</h2>
              <p className="tracking-[0.2em] text-xs uppercase mb-6 opacity-80">Your Nursing Medical Outfit</p>
              <p className="text-sm md:text-base mb-8 opacity-90 leading-relaxed max-w-sm">
                Discover professional healthcare uniforms designed for comfort, confidence and everyday performance.
              </p>
              <Button onClick={() => navigate('uniform', 'home')} variant="primary" className="w-full md:w-auto">EXPLORE UNIFORMS</Button>
            </div>
          </div>
        </div>

        {/* Hidden Admin Entry */}
        <button onClick={() => navigate('admin')} className="absolute top-4 right-4 text-xs opacity-10 hover:opacity-100">Admin</button>
      </div>
    </div>
  );
};


// --- 2. BEAUTY LOUNGE SECTION ---
const BeautyLounge = ({ subRoute, navigate }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [subRoute]);

  const renderContent = () => {
    switch (subRoute) {
      case 'home': return <BeautyHome navigate={navigate} />;
      case 'head-spa': return <BeautyHeadSpa />;
      case 'massage': return <BeautyMassage />;
      case 'facial': return <BeautyFacial />;
      case 'packages': return <BeautyPackages />;
      case 'all': return <BeautyAllTreatments />;
      default: return <BeautyHome navigate={navigate} />;
    }
  };

  return (
    <div className="bg-[#F5F0E8]">
      {renderContent()}
    </div>
  );
};

const BeautyHome = ({ navigate }) => (
  <div>
    {/* Hero Section */}
    <section className="relative h-[80vh] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?q=80&w=1920&auto=format&fit=crop')] bg-cover bg-center"></div>
      <div className="absolute inset-0 bg-black/60"></div>
      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto flex flex-col items-center">
        <img src="https://platform-bcl.bsb-cdn.com/media/2026/10/WEIRLg7SiBgLlwIiRmTLTHbPnptFfLIgk8AMXQM0.jpg" alt="Addinmedics Beauty Lounge Logo" className="h-32 md:h-40 mb-8 object-contain animate-fade-in" />
        <h1 className="font-serif text-5xl md:text-7xl text-white mb-6 animate-fade-in" style={{animationDelay:'0.1s'}}>ESCAPE INTO LUXURY.<br/>REDISCOVER YOURSELF.</h1>
        <p className="text-xl md:text-2xl text-[#C5A46D] font-serif italic mb-6 animate-fade-in" style={{animationDelay:'0.2s'}}>
          Premium Head Spa, Therapeutic Massage & Facial Experiences in Kuala Terengganu.
        </p>
        <p className="text-white/80 mb-10 text-sm md:text-base max-w-2xl mx-auto animate-fade-in" style={{animationDelay:'0.3s'}}>
          Nikmati pengalaman spa eksklusif yang direka untuk membantu anda berehat, menyegarkan diri dan memanjakan tubuh serta wajah.
        </p>
        <div className="flex flex-col md:flex-row gap-4 justify-center animate-fade-in" style={{animationDelay:'0.4s'}}>
          <Button onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent('Hi Addinmedics Beauty Lounge, saya nak booking slot rawatan.')}`, '_blank')}>BOOK YOUR EXPERIENCE</Button>
          <Button variant="secondary" onClick={() => navigate('beauty', 'head-spa')}>EXPLORE TREATMENTS</Button>
        </div>
      </div>
    </section>

    {/* Featured Services Quick Links */}
    <section className="py-20 px-4 max-w-7xl mx-auto">
      <SectionHeading title="Signature Experiences" dark={true} subtitle="Curated treatments for your absolute well-being." />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {[
          { title: 'Japanese Head Spa', route: 'head-spa', img: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?q=80&w=600&auto=format&fit=crop' },
          { title: 'Therapeutic Massage', route: 'massage', img: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?q=80&w=600&auto=format&fit=crop' },
          { title: 'Facial & Aesthetics', route: 'facial', img: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?q=80&w=600&auto=format&fit=crop' }
        ].map((s, i) => (
          <div key={i} onClick={() => navigate('beauty', s.route)} className="group cursor-pointer bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all">
            <div className="h-64 overflow-hidden relative">
              <img src={s.img} alt={s.title} className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"/>
              <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors"></div>
            </div>
            <div className="p-6 text-center">
              <h3 className="font-serif text-2xl text-[#351C42] mb-2">{s.title}</h3>
              <p className="text-sm text-gray-500 uppercase tracking-widest group-hover:text-[#C5A46D] transition-colors">Discover More</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  </div>
);

const BeautyHeadSpa = () => (
  <div className="py-20 px-4 max-w-7xl mx-auto">
    <SectionHeading title="THE ART OF JAPANESE HEAD SPA" subtitle="Relax. Refresh. Rejuvenate." dark={true} />
    
    {/* Featured Promo (Editable via mock admin) */}
    <div className="mb-16 bg-[#581D32] rounded-2xl p-8 text-center text-[#F5F0E8] shadow-2xl relative overflow-hidden">
      <div className="absolute top-0 right-0 p-4 opacity-20"><svg className="w-24 h-24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></div>
      <h3 className="font-serif text-3xl mb-2 text-[#C5A46D]">SPECIAL PROMOTION</h3>
      <p className="text-xl mb-4">Sakura Head Spa — Limited Time Offer</p>
      <p className="text-4xl font-bold mb-6">RM99 <span className="text-lg line-through opacity-60 ml-2">RM169</span></p>
      <Button variant="primary" onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent('Hi Addinmedics Beauty Lounge, saya berminat untuk booking promo Sakura Japanese Head Spa RM99. Boleh saya tahu slot yang available?')}`, '_blank')}>BOOK PROMO NOW</Button>
    </div>

    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {HEAD_SPA_PACKAGES.map((pkg, idx) => (
        <div key={idx} className="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-xl hover:border-[#C5A46D] transition-all flex flex-col">
          <div className="h-48 bg-[#351C42] p-6 text-center flex flex-col justify-center relative">
            <h4 className="font-serif text-2xl text-white mb-2 relative z-10">{pkg.name}</h4>
            <div className="text-[#C5A46D] font-bold text-3xl relative z-10">{pkg.price}</div>
            {pkg.originalPrice && <div className="text-sm text-gray-400 line-through mt-1 relative z-10">{pkg.originalPrice}</div>}
          </div>
          <div className="p-6 flex-grow flex flex-col justify-between">
            <p className="text-gray-600 text-sm text-center mb-6 leading-relaxed">{pkg.desc}</p>
            <Button 
              variant="dark" 
              className="w-full"
              onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(`Hi Addinmedics Beauty Lounge, saya berminat untuk booking ${pkg.name} (${pkg.price}). Boleh saya tahu slot yang available?`)}`, '_blank')}
            >
              BOOK NOW
            </Button>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const BeautyMassage = () => (
  <div className="py-20 px-4 max-w-7xl mx-auto">
    <SectionHeading title="RESTORE YOUR BODY. RELAX YOUR MIND." subtitle="Therapeutic massage experiences tailored to your needs." dark={true} />
    
    <div className="mb-12 rounded-2xl overflow-hidden shadow-2xl h-80 relative">
      <img src="https://images.unsplash.com/photo-1519824145371-296894a0daa9?q=80&w=1200&auto=format&fit=crop" alt="Massage" className="w-full h-full object-cover" />
    </div>

    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
      {MASSAGES.map((m, i) => (
        <div key={i} className="flex justify-between items-center border-b border-gray-300 py-4 hover:border-[#C5A46D] transition-colors group">
          <div>
            <h4 className="font-serif text-xl text-[#351C42] group-hover:text-[#581D32] transition-colors">{m.name}</h4>
          </div>
          <div className="flex items-center gap-6">
            <span className="text-[#C5A46D] font-medium">{m.price}</span>
            <button 
              onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(`Hi Addinmedics Beauty Lounge, saya berminat untuk booking rawatan urutan: ${m.name}.`)}`, '_blank')}
              className="text-xs uppercase tracking-wider bg-[#351C42] text-white px-3 py-1 rounded hover:bg-[#C5A46D] transition-colors"
            >
              Book
            </button>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const BeautyFacial = () => (
  <div className="py-20 px-4 max-w-7xl mx-auto">
    <SectionHeading title="REVEAL YOUR NATURAL RADIANCE" subtitle="Professional Facial & Skin Wellness Treatments." dark={true} />
    
    <div className="bg-[#123F35] text-white text-center py-4 px-6 rounded-lg mb-12 shadow-lg inline-block mx-auto">
      <p className="font-serif text-lg text-[#C5A46D]">✨ SPECIAL: FREE LED TREATMENT WITH FACIAL SERVICES ✨</p>
    </div>

    <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
      {/* Facials */}
      <div>
        <h3 className="font-serif text-3xl text-[#351C42] mb-6 border-b-2 border-[#C5A46D] pb-2 inline-block">Facial Services</h3>
        <div className="space-y-4 mt-6">
          {FACIALS.map((f, i) => (
            <div key={i} className="flex justify-between items-center bg-white p-4 rounded-lg shadow-sm">
              <span className="font-medium text-gray-800">{f.name}</span>
              <div className="flex items-center gap-4">
                <span className="text-[#581D32] font-semibold">{f.price}</span>
                <button onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(`Hi Addinmedics, saya nak booking: ${f.name}.`)}`, '_blank')} className="text-sm bg-gray-100 hover:bg-[#C5A46D] hover:text-white px-3 py-1 rounded transition-colors">Book</button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Aesthetics */}
      <div>
        <h3 className="font-serif text-3xl text-[#351C42] mb-6 border-b-2 border-[#C5A46D] pb-2 inline-block">Aesthetic Services</h3>
        <p className="text-xs text-gray-500 mb-6 italic">* Consultations available to ensure the best care for your skin.</p>
        <div className="space-y-4">
          {AESTHETICS.map((a, i) => (
            <div key={i} className="flex justify-between items-center bg-white p-4 rounded-lg shadow-sm border-l-4 border-[#351C42]">
              <span className="font-medium text-gray-800">{a.name}</span>
              <div className="flex items-center gap-4">
                <span className="text-[#581D32] font-semibold">{a.price}</span>
                <button onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(`Hi Addinmedics, saya nak booking aesthetic: ${a.name}.`)}`, '_blank')} className="text-sm bg-[#351C42] text-white hover:bg-[#C5A46D] px-3 py-1 rounded transition-colors">Book</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const BeautyPackages = () => (
  <div className="py-20 px-4 max-w-7xl mx-auto">
    <SectionHeading title="EXCLUSIVE SPA PACKAGES" subtitle="Curated combos and special promotions for your ultimate relaxation." dark={true} />
    
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mt-12">
      {SPA_POSTERS.map((poster, idx) => (
        <div key={idx} className="flex flex-col items-center group animate-fade-in" style={{animationDelay: `${idx * 0.1}s`}}>
          <div className="rounded-xl overflow-hidden shadow-2xl mb-6 border-4 border-[#C5A46D]/20 group-hover:border-[#C5A46D] transition-colors duration-300 w-full">
            <img 
              src={poster} 
              alt={`Spa Package ${idx + 1}`} 
              className="w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-700" 
            />
          </div>
          <Button 
            variant="primary" 
            onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(`Hi Addinmedics Beauty Lounge, saya nak booking/tanya tentang pakej spa dari poster ini: ${poster}`)}`, '_blank')}
            className="w-full flex items-center justify-center gap-2 shadow-lg"
          >
            <IconWhatsApp /> BOOK THIS PACKAGE
          </Button>
        </div>
      ))}
    </div>
  </div>
);

const BeautyAllTreatments = () => {
  const CATEGORIES = [
    {
      title: "Hair Spa & Saloon",
      items: [
        { name: "Cuci Rambut Biasa (Add-On)", price: "RM15" },
        { name: "Mandian Kulit Kepala", price: "RM35" },
        { name: "Normal Treatment", price: "RM50" },
        { name: "Treatment Kelemumur", price: "RM70" },
        { name: "Treatment Keratin", price: "From RM80" },
        { name: "Treatment Keratin Brazilian", price: "From RM150" },
        { name: "Rebonding / Relaxing", price: "From RM50" },
        { name: "Warna / Highlight", price: "From RM50" },
        { name: "Warna + Bleaching", price: "From RM100" }
      ]
    },
    {
      title: "Beauty & Wellness",
      items: [
        { name: "Sauna", price: "RM50" },
        { name: "Back Body Acne Treatment", price: "RM100" },
        { name: "Medi (Tangan)", price: "RM35" },
        { name: "Pedic (Kaki)", price: "RM50" },
        { name: "Combo Medi + Pedic", price: "RM79" },
        { name: "Foot Spa & Relaxing", price: "RM100" },
        { name: "Totok Wajah", price: "RM80" },
        { name: "Body Scrub / Body Bleach", price: "RM100" }
      ]
    },
    {
      title: "Lash & Brow Studio",
      items: [
        { name: "Korean Eyelash Perm", price: "RM55" },
        { name: "Brow Laminating", price: "RM59" },
        { name: "Hybrid Dye / Henna + Mapping", price: "RM55" },
        { name: "Brow Bleach + Mapping", price: "RM55" },
        { name: "Brow Sculpture", price: "RM89" }
      ]
    }
  ];

  return (
    <div className="py-20 px-4 max-w-7xl mx-auto">
      <SectionHeading title="ALL TREATMENTS" subtitle="Explore our complete range of beauty and wellness services." dark={true} />
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {CATEGORIES.map((cat, idx) => (
          <div key={idx} className="bg-white rounded-xl shadow-lg p-6 border-t-4 border-[#351C42]">
            <h3 className="font-serif text-2xl text-[#C5A46D] mb-6 text-center">{cat.title}</h3>
            <ul className="space-y-3">
              {cat.items.map((item, i) => (
                <li key={i} className="flex justify-between text-sm border-b border-gray-100 pb-2">
                  <span className="text-gray-700">{item.name}</span>
                  <span className="font-medium text-[#581D32] whitespace-nowrap ml-4">{item.price}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="text-center mt-12">
        <p className="text-sm text-gray-500 mb-6">* All prices are subject to change. Please contact us for the latest information and bookings.</p>
        <Button onClick={() => window.open(`https://wa.me/${PHONE_NUMBER}`, '_blank')} variant="primary">CONTACT FOR BOOKING</Button>
      </div>
    </div>
  );
};


// --- 3. UNIFORM BOUTIQUE SECTION ---
const UniformBoutique = ({ subRoute, navigate, product }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [subRoute, product]);

  const renderContent = () => {
    switch (subRoute) {
      case 'home': return <UniformHome navigate={navigate} />;
      case 'catalog': return <UniformCatalog navigate={navigate} />;
      case 'product': return <UniformProductDetail product={product} navigate={navigate} />;
      default: return <UniformHome navigate={navigate} />;
    }
  };

  return (
    <div className="bg-[#fcfbf9]">
      {renderContent()}
    </div>
  );
};

const UniformHome = ({ navigate }) => (
  <div>
    <section className="relative h-[70vh] flex items-center justify-center overflow-hidden bg-white">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1584982751601-97dcc096659c?q=80&w=1920&auto=format&fit=crop')] bg-cover bg-center opacity-30"></div>
      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto flex flex-col items-center">
        <img src="https://platform-bcl.bsb-cdn.com/media/2026/10/hJ9ASwQLl5Qt8ajATjYfF6AEx1Xy6fdB2rotyxrM.jpg" alt="Addinmedics Boutique Logo" className="h-32 md:h-40 mb-8 object-contain animate-fade-in" />
        <h1 className="font-serif text-5xl md:text-7xl text-[#123F35] mb-6 font-bold animate-fade-in" style={{animationDelay:'0.1s'}}>PROFESSIONAL UNIFORMS.<br/>EXCEPTIONAL CONFIDENCE.</h1>
        <p className="text-xl text-[#351C42] mb-8 font-light max-w-2xl mx-auto animate-fade-in" style={{animationDelay:'0.2s'}}>
          Premium Nursing & Medical Uniforms for Healthcare Professionals. Designed for everyday comfort and practicality.
        </p>
        <Button onClick={() => navigate('uniform', 'catalog')} variant="primary" className="!bg-[#123F35] !text-white hover:!bg-[#0a231d] animate-fade-in" style={{animationDelay:'0.3s'}}>
          SHOP COLLECTION
        </Button>
      </div>
    </section>

    <section className="py-20 px-4 max-w-7xl mx-auto">
      <SectionHeading title="Quality You Can Trust" dark={true} subtitle="Crafted for the demanding environments of healthcare." />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center mt-12">
        <div className="p-6 bg-white shadow rounded-lg border-t-2 border-[#123F35]">
          <h4 className="font-bold text-lg text-[#351C42] mb-3">Premium Fabric</h4>
          <p className="text-gray-600 text-sm">Breathable, durable materials that withstand frequent washing.</p>
        </div>
        <div className="p-6 bg-white shadow rounded-lg border-t-2 border-[#123F35]">
          <h4 className="font-bold text-lg text-[#351C42] mb-3">Perfect Fit</h4>
          <p className="text-gray-600 text-sm">Tailored designs offering professional appearance without restricting movement.</p>
        </div>
        <div className="p-6 bg-white shadow rounded-lg border-t-2 border-[#123F35]">
          <h4 className="font-bold text-lg text-[#351C42] mb-3">Ministry Standard</h4>
          <p className="text-gray-600 text-sm">Compliant with healthcare standards across various departments.</p>
        </div>
      </div>
    </section>
  </div>
);

const UniformCatalog = ({ navigate }) => (
  <div className="py-20 px-4 max-w-7xl mx-auto">
    <SectionHeading title="Our Collection" dark={true} subtitle="Explore our complete range of healthcare uniforms." />
    
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
      {MOCK_UNIFORMS.map((u) => (
        <div key={u.id} className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow group flex flex-col">
          <div className="h-72 overflow-hidden bg-gray-100 relative cursor-pointer" onClick={() => navigate('uniform', 'product', u)}>
            <img src={u.image} alt={u.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
            <div className="absolute top-4 right-4 bg-white/90 px-3 py-1 text-xs font-bold rounded shadow text-[#123F35]">
              {u.price}
            </div>
          </div>
          <div className="p-6 flex-grow flex flex-col justify-between">
            <div>
              <p className="text-xs text-[#C5A46D] font-bold uppercase tracking-wider mb-2">{u.category.split('—')[0]}</p>
              <h3 className="font-serif text-xl text-[#351C42] mb-4 leading-tight">{u.category}</h3>
            </div>
            <div className="mt-4 flex gap-2">
              <Button onClick={() => navigate('uniform', 'product', u)} variant="secondary" className="flex-1 text-sm py-2">View Details</Button>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const UniformProductDetail = ({ product, navigate }) => {
  const [selectedColor, setSelectedColor] = useState(product?.colors[0]);
  const [selectedSize, setSelectedSize] = useState(product?.sizes[2]); // Default M
  const [quantity, setQuantity] = useState(1);

  if (!product) return <div className="p-20 text-center">Product not found. <button onClick={()=>navigate('uniform','catalog')} className="text-blue-500 underline">Go back</button></div>;

  const handleOrder = () => {
    const msg = `Hi Addinmedics Boutique, saya berminat untuk order:\n\nProduk: ${product.category}\nWarna: ${selectedColor}\nSaiz: ${selectedSize}\nKuantiti: ${quantity} set\n\nBoleh saya dapatkan harga dan maklumat stok?`;
    window.open(`https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(msg)}`, '_blank');
  };

  return (
    <div className="py-12 px-4 max-w-7xl mx-auto">
      <button onClick={() => navigate('uniform', 'catalog')} className="mb-8 text-sm text-gray-500 hover:text-[#351C42] flex items-center">
        &larr; Back to Catalog
      </button>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 bg-white p-6 md:p-12 rounded-2xl shadow-lg">
        {/* Images */}
        <div className="space-y-4">
          <div className="bg-gray-100 rounded-xl overflow-hidden h-[500px]">
            <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
          </div>
        </div>

        {/* Details */}
        <div className="flex flex-col">
          <p className="text-sm text-[#C5A46D] font-bold uppercase tracking-wider mb-2">ADDINMEDICS BOUTIQUE</p>
          <h1 className="font-serif text-3xl md:text-4xl text-[#351C42] mb-4">{product.category}</h1>
          <p className="text-2xl text-[#123F35] font-semibold mb-6">{product.price}</p>
          
          <div className="w-full h-px bg-gray-200 mb-6"></div>

          <div className="mb-6">
            <h4 className="font-medium text-gray-800 mb-3">Color: <span className="text-gray-500 font-normal">{selectedColor}</span></h4>
            <div className="flex gap-3">
              {product.colors.map(c => (
                <button 
                  key={c}
                  onClick={() => setSelectedColor(c)}
                  className={`px-4 py-2 border rounded-md text-sm transition-colors ${selectedColor === c ? 'border-[#123F35] bg-[#123F35]/5 text-[#123F35] font-semibold' : 'border-gray-300 text-gray-600 hover:border-gray-400'}`}
                >
                  {c}
                </button>
              ))}
            </div>
          </div>

          <div className="mb-6">
            <h4 className="font-medium text-gray-800 mb-3 flex justify-between">
              <span>Size: <span className="text-gray-500 font-normal">{selectedSize}</span></span>
              <button className="text-xs text-[#C5A46D] underline">Size Guide</button>
            </h4>
            <div className="flex flex-wrap gap-2">
              {product.sizes.map(s => (
                <button 
                  key={s}
                  onClick={() => setSelectedSize(s)}
                  className={`w-12 h-12 flex items-center justify-center border rounded-md text-sm transition-colors ${selectedSize === s ? 'border-[#123F35] bg-[#123F35] text-white font-semibold shadow-md' : 'border-gray-300 text-gray-600 hover:border-gray-400'}`}
                >
                  {s}
                </button>
              ))}
            </div>
          </div>

          <div className="mb-8">
            <h4 className="font-medium text-gray-800 mb-3">Quantity</h4>
            <div className="flex items-center border border-gray-300 rounded-md w-32">
              <button onClick={() => setQuantity(Math.max(1, quantity - 1))} className="px-4 py-2 text-gray-600 hover:bg-gray-100">-</button>
              <input type="text" value={quantity} readOnly className="w-full text-center text-gray-800 font-medium bg-transparent focus:outline-none" />
              <button onClick={() => setQuantity(quantity + 1)} className="px-4 py-2 text-gray-600 hover:bg-gray-100">+</button>
            </div>
          </div>

          <Button onClick={handleOrder} variant="primary" className="w-full py-4 text-lg flex items-center justify-center gap-2 !bg-[#25D366] !text-white hover:!bg-green-600">
            <IconWhatsApp /> ORDER VIA WHATSAPP
          </Button>

          <p className="text-xs text-gray-500 mt-4 text-center">
            * Final price and stock availability will be confirmed via WhatsApp by our team.
          </p>
        </div>
      </div>
    </div>
  );
};


// --- 4. ADMIN MOCKUP SECTION ---
const AdminMockup = ({ navigate }) => {
  const [activeTab, setActiveTab] = useState('beauty');

  return (
    <div className="min-h-screen bg-gray-100 text-gray-800 p-8">
      <div className="max-w-6xl mx-auto">
        <div className="flex justify-between items-center mb-8 bg-white p-4 rounded shadow">
          <h1 className="text-2xl font-bold text-[#351C42]">Addinmedics Admin Dashboard</h1>
          <button onClick={() => navigate('home')} className="text-sm bg-gray-200 px-4 py-2 rounded hover:bg-gray-300">Exit Admin</button>
        </div>

        <div className="flex gap-4 mb-6">
          <button onClick={() => setActiveTab('beauty')} className={`px-6 py-3 rounded font-bold ${activeTab === 'beauty' ? 'bg-[#351C42] text-white' : 'bg-white text-gray-600'}`}>Beauty Lounge Menu</button>
          <button onClick={() => setActiveTab('uniform')} className={`px-6 py-3 rounded font-bold ${activeTab === 'uniform' ? 'bg-[#123F35] text-white' : 'bg-white text-gray-600'}`}>Uniform Catalogue</button>
          <button onClick={() => setActiveTab('promos')} className={`px-6 py-3 rounded font-bold ${activeTab === 'promos' ? 'bg-[#C5A46D] text-white' : 'bg-white text-gray-600'}`}>Promotions</button>
        </div>

        <div className="bg-white p-8 rounded shadow-lg">
          {activeTab === 'beauty' && (
            <div>
              <h2 className="text-xl font-bold mb-4 border-b pb-2">Manage Beauty Treatments</h2>
              <p className="text-gray-500 mb-6">Edit prices, update descriptions, and add new services.</p>
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-gray-50 text-gray-600 text-sm uppercase">
                    <th className="p-3 border-b">Service Name</th>
                    <th className="p-3 border-b">Category</th>
                    <th className="p-3 border-b">Price</th>
                    <th className="p-3 border-b">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {HEAD_SPA_PACKAGES.map((p, i) => (
                    <tr key={i} className="border-b hover:bg-gray-50">
                      <td className="p-3 font-medium">{p.name}</td>
                      <td className="p-3 text-sm text-gray-500">Head Spa</td>
                      <td className="p-3">
                        <input type="text" defaultValue={p.price} className="border rounded px-2 py-1 w-24" />
                      </td>
                      <td className="p-3">
                        <button className="text-blue-500 text-sm hover:underline mr-3">Save</button>
                      </td>
                    </tr>
                  ))}
                  {MASSAGES.slice(0,3).map((p, i) => (
                    <tr key={`m${i}`} className="border-b hover:bg-gray-50">
                      <td className="p-3 font-medium">{p.name}</td>
                      <td className="p-3 text-sm text-gray-500">Massage</td>
                      <td className="p-3">
                        <input type="text" defaultValue={p.price} className="border rounded px-2 py-1 w-24" />
                      </td>
                      <td className="p-3">
                        <button className="text-blue-500 text-sm hover:underline mr-3">Save</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <button className="mt-6 bg-[#351C42] text-white px-4 py-2 rounded">+ Add New Service</button>
            </div>
          )}

          {activeTab === 'uniform' && (
            <div>
              <h2 className="text-xl font-bold mb-4 border-b pb-2">Manage Uniform Inventory</h2>
              <table className="w-full text-left border-collapse mt-4">
                <thead>
                  <tr className="bg-gray-50 text-gray-600 text-sm uppercase">
                    <th className="p-3 border-b">Category</th>
                    <th className="p-3 border-b">Price</th>
                    <th className="p-3 border-b">Colors</th>
                    <th className="p-3 border-b">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {MOCK_UNIFORMS.map((u, i) => (
                    <tr key={i} className="border-b hover:bg-gray-50">
                      <td className="p-3 font-medium text-sm">{u.category}</td>
                      <td className="p-3">
                        <input type="text" defaultValue={u.price} className="border rounded px-2 py-1 w-32" />
                      </td>
                      <td className="p-3 text-sm text-gray-500">{u.colors.join(', ')}</td>
                      <td className="p-3">
                        <button className="text-blue-500 text-sm hover:underline">Edit</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {activeTab === 'promos' && (
            <div>
              <h2 className="text-xl font-bold mb-4 border-b pb-2">Active Promotions</h2>
              <div className="border border-green-200 bg-green-50 p-4 rounded mb-4 flex justify-between items-center">
                <div>
                  <h4 className="font-bold text-green-800">Sakura Head Spa RM99</h4>
                  <p className="text-sm text-green-600">Active until Dec 31, 2026. Displaying on Head Spa page.</p>
                </div>
                <button className="bg-red-500 text-white px-4 py-2 rounded text-sm font-bold">Deactivate</button>
              </div>
              <div className="border border-gray-200 bg-gray-50 p-4 rounded mb-4 flex justify-between items-center">
                <div>
                  <h4 className="font-bold text-gray-800">FREE LED Treatment with Facial</h4>
                  <p className="text-sm text-gray-500">Currently active on Facial page.</p>
                </div>
                <button className="bg-red-500 text-white px-4 py-2 rounded text-sm font-bold">Deactivate</button>
              </div>
              <button className="bg-[#C5A46D] text-white px-4 py-2 rounded">+ Create Promotion</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};