```react
import React, { useState, useMemo, useRef, useEffect } from 'react';
import { 
  ShoppingCart, Plus, Minus, Trash2, Upload, CheckCircle, X, 
  Home, Grid, PenTool, Image as ImageIcon, Star, Search, 
  Facebook, Instagram, MessageCircle, Heart, Sparkles, ChevronRight, Settings, Package, ClipboardList, Edit3, PlusCircle, Database
} from 'lucide-react';

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, doc, setDoc, updateDoc, deleteDoc } from 'firebase/firestore';

const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

export default function App() {
  // --- State Management ---
  const [activeTab, setActiveTab] = useState('home'); 
  const [user, setUser] = useState(null);

  // Dynamic Data States (from Firebase)
  const [categories, setCategories] = useState([]);
  const [orderWorks, setOrderWorks] = useState([]);
  const [reviews, setReviews] = useState([]);
  const [orders, setOrders] = useState([]);

  // Review Form
  const [newReviewText, setNewReviewText] = useState('');
  const [newReviewName, setNewReviewName] = useState('');
  const [newReviewRating, setNewReviewRating] = useState(5);

  // Admin States
  const [isAdminMode, setIsAdminMode] = useState(false);
  const [adminTab, setAdminTab] = useState('orders'); // orders, products, services, reviews
  const [showAdminLogin, setShowAdminLogin] = useState(false);
  const [adminPasswordInput, setAdminPasswordInput] = useState('');
  const [adminLoginError, setAdminLoginError] = useState(false);
  
  // Settings States
  const [adminPin, setAdminPin] = useState("123456"); // รหัสผ่านตั้งต้น
  const [lineUrl, setLineUrl] = useState("");
  const [newPinInput, setNewPinInput] = useState("");
  const [newLineUrlInput, setNewLineUrlInput] = useState("");
  
  // Shop Info States
  const [shopInfo, setShopInfo] = useState({
    logo: 'https://i.postimg.cc/9fdRrYWG/att-b-TBt8GNQs1JNUVZ4Z20Nqzig-JMn-Jm-Dz-Tg6i-Hdk-XGp-Vg.jpg',
    name: 'Nori Design',
    slogan: '🌻ร้านโนริพร้อมบริการลูกค้าที่น่ารักทุกท่านค้าบ🌈 มีบัตรสะสมแต้ม สำหรับลูกค้าเข้ากลุ่มรับผ่อนด้วยนะคะ 💥สนใจ/สั่งซื้อ สามารถทักถามได้เลยค้าบ✨',
    marquee1: '💗 ยินดีต้อนรับเข้าสู้ร้านโนริ 💗',
    marquee2: 'พร้อมบริการตลอด25ชั่วโมง',
    marquee3: '🌻Have a good day 🌻',
    fbMain: 'https://www.facebook.com/nori.desing?',
    fbSub: 'https://www.facebook.com/profile.php?id=61574306123714'
  });
  const [editShopInfo, setEditShopInfo] = useState(shopInfo);
  const shopLogoInputRef = useRef(null);
  
  // Item Edit Form
  const [isEditingItem, setIsEditingItem] = useState(false);
  const [editType, setEditType] = useState('categories'); // 'categories' or 'services'
  const [editFormData, setEditFormData] = useState({ id: '', name: '', price: 0, image: '', desc: '', tag: '', previewUrl: '', addons: [], subcategory: '' });
  const itemFileInputRef = useRef(null);

  // Category Subcategory & Search States
  const [selectedSubcategory, setSelectedSubcategory] = useState('ทั้งหมด');
  const [searchQuery, setSearchQuery] = useState('');

  // Cart & Checkout States
  const [cart, setCart] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [slipImage, setSlipImage] = useState(null);
  const [customerName, setCustomerName] = useState('');
  const [customerPhone, setCustomerPhone] = useState('');
  const [orderStatus, setOrderStatus] = useState('idle');
  const fileInputRef = useRef(null);

  // Addon Selection Modal States
  const [addonModalItem, setAddonModalItem] = useState(null);
  const [selectedAddons, setSelectedAddons] = useState([]);

  // ผลงานของร้าน
  const portfolios = [
    { name: 'งานเว็บ', url: 'https://www.facebook.com/profile.php?id=61574306123714', image: 'https://i.postimg.cc/3xfvL4s0/att-Xi-Rr-QYx-FFfwak-V-cjxz9MT4YLUdd-GIEz-XD8-2Rz-D3UE.jpg' },
    { name: 'งานป้าย', url: 'https://drive.google.com/drive/folders/1ovnS1imBV8jKO-fCHfBhnd3NDw8Yl1lv', image: 'https://i.postimg.cc/3xfvL4s0/att-Xi-Rr-QYx-FFfwak-V-cjxz9MT4YLUdd-GIEz-XD8-2Rz-D3UE.jpg' },
    { name: 'งานสติกเกอร์', url: 'https://drive.google.com/drive/folders/1rd5PkbYVH5lnOSqgqLH7SdDBvwX5Ae3b', image: 'https://i.postimg.cc/3xfvL4s0/att-Xi-Rr-QYx-FFfwak-V-cjxz9MT4YLUdd-GIEz-XD8-2Rz-D3UE.jpg' },
    { name: 'ปล่อยเอฟ', url: 'https://www.facebook.com/media/set/?set=a.122153343278842506&type=3', image: 'https://i.postimg.cc/3xfvL4s0/att-Xi-Rr-QYx-FFfwak-V-cjxz9MT4YLUdd-GIEz-XD8-2Rz-D3UE.jpg' }
  ];

  // --- Optimized Data Calculations (ใส่เกราะป้องกันข้อมูลว่าง) ---
  const uniqueSubcategories = useMemo(() => {
    const subs = categories.map(c => c.subcategory).filter(Boolean);
    return ['ทั้งหมด', ...new Set(subs)];
  }, [categories]);

  const filteredCategories = useMemo(() => {
    return categories.filter(item => {
      const matchSub = selectedSubcategory === 'ทั้งหมด' || item.subcategory === selectedSubcategory;
      // ป้องกัน Error หาก item.name เป็นค่าว่าง (undefined)
      const itemName = item.name || '';
      const matchSearch = !searchQuery || itemName.toLowerCase().includes(searchQuery.toLowerCase());
      return matchSub && matchSearch;
    });
  }, [categories, selectedSubcategory, searchQuery]);

  // --- Firebase Effects ---
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;

    // Fetch Categories (สินค้า)
    const catRef = collection(db, 'artifacts', appId, 'public', 'data', 'categories');
    const unsubCat = onSnapshot(catRef, (snapshot) => {
      setCategories(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })).sort((a,b) => (b.createdAt || 0) - (a.createdAt || 0)));
    }, (err) => console.error(err));

    // Fetch Services (งานสั่งทำ)
    const servRef = collection(db, 'artifacts', appId, 'public', 'data', 'services');
    const unsubServ = onSnapshot(servRef, (snapshot) => {
      setOrderWorks(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })).sort((a,b) => (b.createdAt || 0) - (a.createdAt || 0)));
    }, (err) => console.error(err));

    // Fetch Reviews
    const reviewsRef = collection(db, 'artifacts', appId, 'public', 'data', 'reviews');
    const unsubRev = onSnapshot(reviewsRef, (snapshot) => {
      setReviews(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)));
    }, (err) => console.error(err));

    // Fetch Settings (PIN & LINE URL)
    const settingsRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'adminConfig');
    const unsubSettings = onSnapshot(settingsRef, (docSnap) => {
      if (docSnap.exists()) {
        if (docSnap.data().pin) setAdminPin(docSnap.data().pin);
        if (docSnap.data().lineUrl) {
          setLineUrl(docSnap.data().lineUrl);
          setNewLineUrlInput(docSnap.data().lineUrl);
        }
      }
    }, (err) => console.error(err));

    // Fetch Shop Info
    const shopConfigRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'shopConfig');
    const unsubShop = onSnapshot(shopConfigRef, (docSnap) => {
      if (docSnap.exists()) {
        setShopInfo(prev => ({...prev, ...docSnap.data()}));
        setEditShopInfo(prev => ({...prev, ...docSnap.data()}));
      }
    }, (err) => console.error(err));

    return () => { unsubCat(); unsubServ(); unsubRev(); unsubSettings(); unsubShop(); };
  }, [user]);

  // Fetch Orders (Admin Only)
  useEffect(() => {
    if (!user || !isAdminMode) return;
    const ordersRef = collection(db, 'artifacts', appId, 'public', 'data', 'orders');
    const unsubscribe = onSnapshot(ordersRef, (snapshot) => {
      setOrders(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)));
    }, (error) => console.error(error));
    return () => unsubscribe();
  }, [user, isAdminMode]);

  // --- Cart Functions ---
  const addToCart = (product, newAddons = null) => {
    let finalProduct = { ...product };
    
    // คำนวณราคาใหม่ถ้ารายการนั้นมี Addons แนบมาด้วยจากการกดใหม่
    if (newAddons !== null) {
      if (newAddons.length > 0) {
        const addonsTotal = newAddons.reduce((sum, a) => sum + (Number(a.price) || 0), 0);
        finalProduct.price = (Number(product.price) || 0) + addonsTotal;
        finalProduct.selectedAddons = newAddons;
      } else {
        finalProduct.selectedAddons = null;
      }
    }

    // สร้าง ID พิเศษให้ตะกร้า เพื่อแยกสินค้าที่เลือก addon ไม่เหมือนกัน
    const uid = finalProduct.id + (finalProduct.selectedAddons ? JSON.stringify(finalProduct.selectedAddons) : '');
    finalProduct.cartUid = uid;

    setCart((prev) => {
      const existing = prev.find((item) => item.cartUid === uid);
      if (existing) return prev.map((item) => item.cartUid === uid ? { ...item, quantity: item.quantity + 1 } : item);
      return [...prev, { ...finalProduct, quantity: 1 }];
    });
    setIsCartOpen(true);
  };

  const decreaseQuantity = (cartUid) => {
    setCart((prev) => {
      const existing = prev.find((item) => item.cartUid === cartUid);
      if (existing.quantity === 1) return prev.filter((item) => item.cartUid !== cartUid);
      return prev.map((item) => item.cartUid === cartUid ? { ...item, quantity: item.quantity - 1 } : item);
    });
  };

  const removeFromCart = (cartUid) => setCart((prev) => prev.filter((item) => item.cartUid !== cartUid));
  const totalPrice = useMemo(() => cart.reduce((total, item) => total + (Number(item.price) || 0) * (Number(item.quantity) || 0), 0), [cart]);
  const totalItems = useMemo(() => cart.reduce((total, item) => total + (Number(item.quantity) || 0), 0), [cart]);

  const handleFileUpload = (e, setter) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setter(reader.result);
      reader.readAsDataURL(file);
    }
  };

  // --- Checkout ---
  const handleCheckout = async () => {
    if (cart.length === 0) return alert('ตะกร้าว่างเปล่าจ้า');
    if (!slipImage) return alert('รบกวนแนบสลิปด้วยน้า');
    if (!customerName || !customerPhone) return alert('กรอกข้อมูลให้ครบถ้วนก่อนน้า');
    if (!user) return alert('ระบบกำลังเชื่อมต่อฐานข้อมูล กรุณารอสักครู่ค่ะ');

    setOrderStatus('processing');
    
    const newOrder = {
      items: cart,
      totalPrice,
      customerName,
      customerPhone,
      slipImage,
      status: 'pending',
      createdAt: Date.now(),
      userId: user.uid
    };

    try {
      const orderId = Date.now().toString();
      const orderRef = doc(db, 'artifacts', appId, 'public', 'data', 'orders', orderId);
      await setDoc(orderRef, newOrder);

      setOrderStatus('success');
    } catch (error) {
      console.error("Error saving order:", error);
      alert('เกิดข้อผิดพลาดในการสั่งซื้อค่ะ (ไฟล์สลิปอาจจะใหญ่เกินไป)');
      setOrderStatus('idle');
    }
  };

  const finishAndCloseCart = () => {
    setIsCartOpen(false); 
    setOrderStatus('idle');
    setCart([]); 
    setSlipImage(null); 
    setCustomerName(''); 
    setCustomerPhone('');
  };

  const openLineChat = () => {
    const finalLineUrl = lineUrl || 'https://lin.ee/nhLfGj0';
    window.open(finalLineUrl, '_blank');
    finishAndCloseCart();
  };

  const handleAddReview = async () => {
    if (!newReviewText.trim()) return alert('กรุณาพิมพ์ข้อความรีวิวก่อนน้า');
    if (!user) return alert('รอโหลดระบบสักครู่นะคะ');
    
    try {
      const reviewId = Date.now().toString();
      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'reviews', reviewId), {
        name: newReviewName.trim() || 'ลูกค้าไม่ประสงค์ออกนาม',
        text: newReviewText,
        rating: newReviewRating,
        createdAt: Date.now(),
        userId: user.uid
      });
      setNewReviewText(''); setNewReviewName(''); setNewReviewRating(5);
    } catch (error) {
      alert('เกิดข้อผิดพลาดในการส่งรีวิว');
    }
  };

  // --- Admin Functions ---
  const handleAdminLogin = () => {
    if (adminPasswordInput === adminPin) {
      setIsAdminMode(true);
      setShowAdminLogin(false);
      setAdminPasswordInput('');
      setAdminLoginError(false);
    } else {
      setAdminLoginError(true);
      setAdminPasswordInput('');
    }
  };

  const handleSaveSettings = async () => {
    if (window.confirm('คุณแน่ใจหรือไม่ที่จะบันทึกการตั้งค่า?')) {
      try {
        const payload = {};
        if (newPinInput.trim() !== "") payload.pin = newPinInput.trim();
        payload.lineUrl = newLineUrlInput.trim(); 
        
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'adminConfig'), payload, { merge: true });
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'shopConfig'), editShopInfo, { merge: true });
        
        alert('บันทึกการตั้งค่าเรียบร้อยแล้ว!');
        setNewPinInput(''); 
      } catch (error) {
        console.error(error);
        alert('เปลี่ยนการตั้งค่าไม่สำเร็จ');
      }
    }
  };

  const handleUpdateOrderStatus = async (orderId, currentStatus) => {
    try {
      await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'orders', orderId), { 
        status: currentStatus === 'pending' ? 'completed' : 'pending' 
      });
    } catch (error) { console.error(error); }
  };

  const handleDeleteItem = async (collectionName, id) => {
    if(window.confirm('ต้องการลบรายการนี้ใช่หรือไม่?')) {
      try {
        await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', collectionName, id));
      } catch (error) { console.error(error); }
    }
  };

  const openEditModal = (type, item = null) => {
    setEditType(type);
    if (item) {
      setEditFormData({ ...item, addons: item.addons || [], subcategory: item.subcategory || '' });
    } else {
      setEditFormData({ id: '', name: '', price: '', image: '', desc: '', tag: '', previewUrl: '', addons: [], subcategory: '' });
    }
    setIsEditingItem(true);
  };

  // Addon Editor Functions (Admin)
  const handleAddonChange = (idx, field, value) => {
    const newAddons = [...(editFormData.addons || [])];
    newAddons[idx] = { ...newAddons[idx], [field]: value };
    setEditFormData({ ...editFormData, addons: newAddons });
  };
  const handleAddAddonField = () => {
    setEditFormData({ ...editFormData, addons: [...(editFormData.addons || []), { name: '', price: '' }] });
  };
  const handleRemoveAddonField = (idx) => {
    const newAddons = [...(editFormData.addons || [])];
    newAddons.splice(idx, 1);
    setEditFormData({ ...editFormData, addons: newAddons });
  };

  const handleSaveItem = async () => {
    if(!editFormData.name || !editFormData.price) return alert('กรุณากรอกชื่อและราคาให้ครบ');
    
    try {
      const isNew = !editFormData.id;
      const itemId = isNew ? Date.now().toString() : editFormData.id;
      const itemRef = doc(db, 'artifacts', appId, 'public', 'data', editType, itemId);
      
      const payload = {
        name: editFormData.name,
        price: Number(editFormData.price) || 0,
        image: editFormData.image || 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=300&q=80',
        tag: editFormData.tag || '',
        subcategory: editType === 'categories' ? (editFormData.subcategory || '') : '',
        desc: editFormData.desc || '',
        previewUrl: editFormData.previewUrl || '',
        addons: editFormData.addons ? editFormData.addons.filter(a => (a.name || '').trim() !== '').map(a => ({ name: a.name, price: Number(a.price) || 0 })) : [],
        createdAt: editFormData.createdAt || Date.now()
      };

      await setDoc(itemRef, payload, { merge: true });
      setIsEditingItem(false);
    } catch (error) {
      console.error(error);
      alert('บันทึกไม่สำเร็จ');
    }
  };

  const loadSampleData = async () => {
    if(!user) return;
    try {
      const sampleCats = [
        { id: 'c1', name: 'พรีเซ็ตแต่งรูป', price: 150, image: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=300&q=80', tag: 'Hot', subcategory: 'พรีเซ็ต' },
        { id: 'c2', name: 'เทมเพลต IG Story', price: 290, image: 'https://images.unsplash.com/photo-1616469829581-73993eb86b02?auto=format&fit=crop&w=300&q=80', tag: 'New', subcategory: 'เทมเพลต' },
      ];
      const sampleServs = [
        { id: 'w1', name: 'ออกแบบงานเว็บ', desc: 'มีบริการเพิ่มรูปและเพลงได้ตามใจชอบเลยค่ะ', price: 129, image: 'https://images.unsplash.com/photo-1559589689-577aabd1ce4c?auto=format&fit=crop&w=300&q=80', addons: [{name: 'ใส่รูป 10 รูป', price: 50}, {name: 'ใส่เพลง', price: 59}, {name: 'ใส่วิดีโอ', price: 69}] },
      ];
      
      for(let cat of sampleCats) {
         await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'categories', Date.now().toString() + Math.random()), { ...cat, createdAt: Date.now() });
      }
      for(let srv of sampleServs) {
         await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'services', Date.now().toString() + Math.random()), { ...srv, createdAt: Date.now() });
      }
      alert('โหลดข้อมูลตัวอย่างสำเร็จ!');
    } catch(e) { console.error(e); }
  };

  // --- Render Views ---
  const renderHome = () => (
    <div className="animate-in fade-in duration-500 flex flex-col items-center">
      <div className="w-full flex items-center justify-center gap-4 mb-8 mt-4">
        <div className="w-24 h-24 rounded-full border-4 border-white shadow-lg overflow-hidden bg-pink-100 flex-shrink-0">
          <img src={shopInfo.logo} alt="Shop Logo" className="w-full h-full object-cover" />
        </div>
        <div className="flex flex-col flex-1">
          <h2 className="text-2xl font-extrabold text-[#785346] flex items-center gap-2">
            {shopInfo.name} <Sparkles size={20} className="text-pink-400" />
          </h2>
          <p className="text-[#a07768] text-[12px] mt-1 leading-relaxed">
            {shopInfo.slogan}
          </p>
        </div>
      </div>

      <div className="flex flex-wrap justify-center gap-2 mb-8">
        <button onClick={() => window.open(shopInfo.fbMain || 'https://www.facebook.com/nori.desing?', '_blank')} className="px-4 py-2 bg-white border-2 border-pink-200 rounded-full text-pink-500 font-medium hover:bg-pink-50 shadow-sm flex items-center gap-2 transition-all text-xs"><Facebook size={14} /> เฟสหลัก</button>
        <button onClick={() => window.open(shopInfo.fbSub || 'https://www.facebook.com/profile.php?id=61574306123714', '_blank')} className="px-4 py-2 bg-white border-2 border-pink-200 rounded-full text-pink-500 font-medium hover:bg-pink-50 shadow-sm flex items-center gap-2 transition-all text-xs"><Facebook size={14} /> เฟสสำรอง</button>
        <button onClick={() => window.open(lineUrl || 'https://lin.ee/nhLfGj0', '_blank')} className="px-4 py-2 bg-white border-2 border-[#A8E6CF] rounded-full text-[#4CAF50] font-medium hover:bg-[#F0FFF4] shadow-sm flex items-center gap-2 transition-all text-xs"><MessageCircle size={14} /> ไลน์</button>
      </div>

      <div className="w-full bg-white rounded-[2rem] p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-pink-100/50 min-h-[300px] flex flex-col items-center relative overflow-hidden">
        <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-pink-100 to-orange-50 rounded-bl-[100px] opacity-50"></div>
        <div className="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-pink-100 to-orange-50 rounded-tr-[100px] opacity-50"></div>
        
        <h3 className="text-lg font-bold text-[#785346] mb-4 z-10 relative flex items-center gap-2">
          <Heart size={20} className="text-pink-400" /> รายละเอียด & กฎของร้าน
        </h3>
        
        <div className="text-[#a07768] text-[13px] text-left space-y-4 z-10 relative w-full bg-[#FFFBFB] p-4 rounded-2xl border border-pink-100/50 shadow-sm">
          <div>
            <p className="font-bold text-[#785346] mb-1">ระยะเวลารองาน</p>
            <ul className="list-disc list-inside pl-1 space-y-0.5">
              <li>งานเว็บ: ตามปกติรองาน 4-8 ชั่วโมง แล้วแต่คิวของวันนั้นๆ</li>
              <li>งานป้าย/สติกเกอร์: คิวไม่เยอะรอภายในวันที่สั่ง ปกติ 1-2 วัน แล้วแต่คิวแต่ละวัน</li>
            </ul>
          </div>
          <div>
            <p className="font-bold text-[#785346] mb-1">เรทราคางาน</p>
            <ul className="list-disc list-inside pl-1 space-y-0.5">
              <li>งานเว็บ เอาตามแบบที่ร้านมีให้ราคา 129.-</li>
              <li>งานเว็บ ให้ทางร้านออกแบบใหม่ไม่ซ้ำใครราคา 329.-</li>
              <li>งานเว็บ ที่ร้านปล่อยเอฟไม่เหมือนใครราคา 300.-</li>
              <li>งานป้าย เริ่มต้น 89.- {'{ขึ้นอยู่กับแนวและรายละเอียด}'}</li>
              <li>งานสติกเกอร์แชท 6 ตัว 59.- / 9 ตัว 75.-</li>
              <li>งานสติกเกอร์เจนรูป/รูปตัวเอง เซ็ตละ 110.-</li>
              <li>งานสติกเกอร์ไลน์เริ่มต้น 280.-</li>
            </ul>
            <p className="text-red-400 font-bold mt-2 text-center text-sm">*** งานเร่งราคาคูณ 2 ***</p>
          </div>
          <div className="bg-white p-3 rounded-xl border border-pink-100 mt-2">
            <p className="font-bold text-[#785346] mb-2 text-center">📍 กฎของร้าน 📍</p>
            <ul className="list-none space-y-1 text-xs">
              <li>• ถ้าโอนเงินแล้วทางร้านไม่คืนเงินทุกกรณีนะคะ</li>
              <li>• หากยกเลิกงานหลังส่งบรีฟมาแล้ว หากงานเริ่มไปแล้วจะคืนแค่ 50% ค่ะ</li>
              <li>• หากยกเลิกหลังจากเช็คงาน = ไม่คืน และส่งงานให้ตามปกติ</li>
              <li>• หากแก้งานหลัง 1 เดือน นับจากส่งเว็บ +เพิ่มครั้งละ 50 {'{ขึ้นอยู่กับความยาก}'}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );

  const renderCategory = () => {
    return (
      <div className="animate-in fade-in duration-500 flex flex-col">
        <div className="relative mb-4">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-pink-300" size={20} />
          <input 
            type="text" 
            placeholder="ค้นหาสินค้า..." 
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-pink-100 rounded-full focus:outline-none focus:border-pink-300 focus:ring-4 focus:ring-pink-100/50 text-[#785346] shadow-sm transition-all placeholder:text-pink-200" 
          />
        </div>

        {uniqueSubcategories.length > 1 && (
          <div className="flex gap-2 overflow-x-auto pb-4 mb-2 hide-scrollbar">
            {uniqueSubcategories.map(sub => (
              <button
                key={sub}
                onClick={() => setSelectedSubcategory(sub)}
                className={`px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-all border ${selectedSubcategory === sub ? 'bg-pink-400 text-white border-pink-400 shadow-md shadow-pink-200' : 'bg-white text-pink-400 border-pink-200 hover:bg-pink-50'}`}
              >
                {sub}
              </button>
            ))}
          </div>
        )}

        <p className="text-center text-[#a07768] mb-4 font-medium text-sm">
          สินค้า {selectedSubcategory !== 'ทั้งหมด' ? `หมวดหมู่ "${selectedSubcategory}"` : 'ทั้งหมด'}
        </p>

        <div className="w-full bg-white rounded-[2rem] p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-pink-100/50 min-h-[400px]">
          {filteredCategories.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-40 text-pink-300">
              <Package size={40} className="mb-2 opacity-50" />
              <p>ไม่พบสินค้าที่ค้นหา</p>
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-4">
              {filteredCategories.map((item) => (
                <div key={item.id} className="group relative bg-pink-50/50 rounded-2xl p-3 flex flex-col items-center text-center hover:bg-pink-50 transition-colors border border-transparent hover:border-pink-100">
                  {item.tag && <span className="absolute top-2 right-2 bg-gradient-to-r from-orange-400 to-pink-400 text-white text-[10px] font-bold px-2 py-1 rounded-full z-10">{item.tag}</span>}
                  <div className="w-full aspect-square rounded-xl overflow-hidden mb-3">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                  </div>
                  <h4 className="font-medium text-[#785346] text-sm mb-1 line-clamp-1">{item.name}</h4>
                  <p className="text-pink-500 font-bold mb-3">฿{item.price}</p>
                  <div className="flex gap-2 w-full">
                    {item.previewUrl && (
                      <button onClick={() => window.open(item.previewUrl, '_blank')} className="flex-1 py-2 bg-pink-50 text-pink-500 border border-pink-200 rounded-xl text-[11px] font-bold hover:bg-pink-100 transition-all">
                        ดูตัวอย่าง
                      </button>
                    )}
                    <button onClick={() => addToCart(item)} className="flex-1 py-2 bg-white text-pink-500 border border-pink-200 rounded-xl text-sm font-medium hover:bg-pink-500 hover:text-white hover:border-pink-500 transition-all">
                      ใส่ตะกร้า
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  };

  const renderOrder = () => (
    <div className="animate-in fade-in duration-500">
      <h2 className="text-2xl font-bold text-[#785346] mb-6 text-center">รายการสั่งงาน</h2>
      <div className="space-y-4">
        {orderWorks.length === 0 ? (
          <div className="text-center py-10 text-pink-300 bg-white rounded-3xl border border-pink-50">ยังไม่มีรายการงานสั่งทำ</div>
        ) : (
          orderWorks.map((work) => (
            <div key={work.id} className="bg-white rounded-3xl p-4 shadow-sm border border-pink-100 flex gap-4 items-center">
              <div className="w-24 h-24 rounded-2xl overflow-hidden flex-shrink-0 relative">
                <img src={work.image} alt={work.name} className="w-full h-full object-cover bg-pink-50" />
                {work.addons && work.addons.length > 0 && (
                  <div className="absolute bottom-0 left-0 right-0 bg-pink-500/80 text-white text-[9px] text-center py-0.5 font-bold">มีออปชั่นเสริม</div>
                )}
              </div>
              <div className="flex-1 min-w-0">
                <h3 className="font-bold text-[#785346] text-lg line-clamp-1">{work.name}</h3>
                <p className="text-[#a07768] text-xs mb-2 line-clamp-2">{work.desc}</p>
                <div className="text-pink-500 font-bold text-sm mb-2">เริ่มต้น ฿{work.price}</div>
                <div className="flex gap-2">
                  {work.previewUrl && (
                    <button onClick={() => window.open(work.previewUrl, '_blank')} className="bg-white text-pink-500 border border-pink-200 px-3 py-1.5 rounded-full text-xs font-bold hover:bg-pink-50 transition-all">
                      ดูตัวอย่าง
                    </button>
                  )}
                  <button onClick={() => {
                      if (work.addons && work.addons.length > 0) {
                        setAddonModalItem(work);
                        setSelectedAddons([]);
                      } else {
                        addToCart(work, []);
                      }
                    }} 
                    className="bg-gradient-to-r from-pink-400 to-orange-400 text-white px-4 py-1.5 rounded-full text-sm font-medium hover:opacity-90 shadow-sm shadow-pink-200 flex items-center gap-1"
                  >
                    <Plus size={14} /> เลือกงานนี้
                  </button>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );

  const renderPortfolio = () => (
    <div className="animate-in fade-in duration-500">
      <h2 className="text-2xl font-bold text-[#785346] mb-6 text-center">ผลงานของเรา</h2>
      <div className="grid grid-cols-2 gap-4 mb-6">
        {portfolios.map((item, idx) => (
          <div key={idx} onClick={() => window.open(item.url, '_blank')} className="bg-white p-2 rounded-2xl shadow-sm border border-pink-50 cursor-pointer hover:shadow-md transition-all group">
            <div className="relative overflow-hidden rounded-xl h-32 mb-2">
              <img src={item.image} alt={item.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300 bg-pink-50" />
            </div>
            <h3 className="text-center font-bold text-[#785346] text-sm py-1">{item.name}</h3>
          </div>
        ))}
      </div>
      
      {/* กฎข้อบังคับผลงาน */}
      <div className="bg-red-50 p-4 rounded-2xl border border-red-100 text-center space-y-2 shadow-sm mb-4">
        <p className="text-red-500 font-bold text-[13px] leading-relaxed">💥ไม่อนุญาตให้ก๊อป ตัด หิ้ว ผลงานของทางร้าน ผิดกฎพบเจอ ชิ้นงานละ 500 บาท📍</p>
        <p className="text-[#a07768] text-xs leading-relaxed border-t border-red-100/50 pt-2 mt-2">
          หลังจากได้รับงานแล้วให้เซฟภายในสิ้นเดือน ร้านลบไฟล์ทุกสิ้นเดือน หากไม่เซฟทางร้านไม่รับผิดชอบใดๆทั้งสิ้น<br/>
          ได้รับงานแล้วแต่อยากแก้ จุดละ 10 บาท 📍
        </p>
      </div>
    </div>
  );

  const renderReview = () => (
    <div className="animate-in fade-in duration-500">
      <h2 className="text-2xl font-bold text-[#785346] mb-6 text-center">รีวิวจากลูกค้า</h2>
      <div className="bg-white rounded-3xl p-5 shadow-sm border border-pink-100 mb-6 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-20 h-20 bg-pink-50 rounded-bl-full opacity-50"></div>
        <h3 className="text-[#785346] font-bold mb-3 flex items-center gap-2 relative z-10"><Sparkles size={16} className="text-pink-400" /> เขียนรีวิวให้ร้านเรา</h3>
        <div className="space-y-3 relative z-10">
          <div className="flex gap-1 mb-2">
            {[1, 2, 3, 4, 5].map((star) => (
              <button key={star} onClick={() => setNewReviewRating(star)} className="focus:outline-none transition-transform hover:scale-110">
                <Star size={24} className={star <= newReviewRating ? "text-orange-400 fill-orange-400" : "text-gray-300"} />
              </button>
            ))}
          </div>
          <input type="text" placeholder="ชื่อของคุณ (ไม่บังคับ)" value={newReviewName} onChange={(e) => setNewReviewName(e.target.value)} className="w-full px-4 py-2.5 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none text-sm"/>
          <textarea placeholder="พิมพ์ความประทับใจของคุณได้เลยค่ะ..." value={newReviewText} onChange={(e) => setNewReviewText(e.target.value)} className="w-full px-4 py-3 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none text-sm min-h-[80px] resize-none"/>
          <button onClick={handleAddReview} className="w-full bg-gradient-to-r from-pink-400 to-orange-400 text-white py-3 rounded-xl font-bold hover:opacity-90 shadow-sm shadow-pink-200 text-sm flex justify-center gap-2">ส่งรีวิว 💕</button>
        </div>
      </div>
      <div className="space-y-4">
        {reviews.length === 0 ? (
          <div className="text-center py-8 text-pink-300 font-medium bg-pink-50/50 rounded-3xl border border-dashed border-pink-200">ยังไม่มีรีวิวเลย มารีวิวเป็นคนแรกให้ร้านเรากันเถอะน้า ✨</div>
        ) : (
          reviews.map((item) => (
            <div key={item.id} className="bg-white rounded-3xl p-5 shadow-sm border border-pink-100 animate-in slide-in-from-top-4">
              <div className="flex text-orange-400 mb-2">
                {[...Array(5)].map((_, i) => <Star key={i} size={16} fill={i < item.rating ? "currentColor" : "none"} className={i >= item.rating ? "text-gray-300" : ""} />)}
              </div>
              <p className="text-[#a07768] text-sm italic mb-3">"{item.text}"</p>
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center text-pink-500 font-bold text-xs uppercase">{item.name ? item.name.charAt(0) : '?'}</div>
                <span className="text-xs font-bold text-[#785346]">{item.name}</span>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );

  // --- Admin Panel ---
  const renderAdminPanel = () => (
    <div className="min-h-screen bg-[#FFFBFB] pb-28 pt-6 px-4 animate-in fade-in duration-500">
      <div className="max-w-md mx-auto">
        <div className="flex justify-between items-center mb-6 bg-white p-4 rounded-3xl shadow-sm border border-pink-100">
          <h2 className="text-xl font-bold text-[#785346] flex items-center gap-2"><Settings className="text-pink-400" /> ระบบหลังบ้าน</h2>
          <button onClick={() => setIsAdminMode(false)} className="px-4 py-2 bg-pink-50 text-pink-500 rounded-xl text-sm font-bold hover:bg-pink-100">กลับหน้าร้าน</button>
        </div>

        {/* Admin Navigation */}
        <div className="flex gap-2 overflow-x-auto pb-4 mb-2 hide-scrollbar">
          {[
            { id: 'orders', name: 'ออเดอร์', icon: ClipboardList },
            { id: 'categories', name: 'สินค้า', icon: Package },
            { id: 'services', name: 'งานสั่งทำ', icon: PenTool },
            { id: 'reviews', name: 'รีวิว', icon: Star },
            { id: 'settings', name: 'ตั้งค่า', icon: Settings },
          ].map(tab => (
            <button 
              key={tab.id}
              onClick={() => setAdminTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-bold whitespace-nowrap transition-all ${adminTab === tab.id ? 'bg-pink-400 text-white shadow-md shadow-pink-200' : 'bg-white text-[#a07768] border border-pink-100 hover:bg-pink-50'}`}
            >
              <tab.icon size={16} /> {tab.name}
            </button>
          ))}
        </div>

        {/* Tab Content: Orders */}
        {adminTab === 'orders' && (
          <div className="space-y-4">
            {orders.length === 0 ? <div className="text-center py-6 text-pink-300">ยังไม่มีรายการสั่งซื้อ</div> : orders.map(order => (
              <div key={order.id} className="bg-white rounded-2xl p-4 border border-pink-100 shadow-sm">
                <div className="flex justify-between items-start border-b border-pink-50 pb-2 mb-2">
                  <div>
                    <div className="font-bold text-[#785346] text-sm">{order.customerName}</div>
                    <div className="text-xs text-[#a07768]">โทร: {order.customerPhone}</div>
                  </div>
                  <button onClick={() => handleUpdateOrderStatus(order.id, order.status)} className={`px-3 py-1 rounded-full text-xs font-bold ${order.status === 'completed' ? 'bg-green-100 text-green-600' : 'bg-orange-100 text-orange-500'}`}>
                    {order.status === 'completed' ? 'ตรวจสอบแล้ว' : 'รอตรวจสอบ'}
                  </button>
                </div>
                <ul className="text-xs text-[#a07768] space-y-2 mb-2">
                  {order.items.map((item, idx) => (
                    <li key={idx} className="bg-pink-50/50 p-2 rounded-xl">
                      <div className="font-bold">- {item.name} (x{item.quantity})</div>
                      {item.selectedAddons && item.selectedAddons.length > 0 && (
                        <div className="pl-3 mt-1 space-y-0.5">
                          {item.selectedAddons.map((addon, aIdx) => (
                            <div key={aIdx} className="text-[10px] text-pink-500 font-bold">+ {addon.name}</div>
                          ))}
                        </div>
                      )}
                    </li>
                  ))}
                </ul>
                <div className="flex justify-between items-center pt-2 border-t border-pink-50">
                  <span className="font-bold text-pink-500">฿{order.totalPrice}</span>
                  {order.slipImage && <a href={order.slipImage} target="_blank" rel="noreferrer" className="text-xs bg-blue-50 text-blue-500 px-2 py-1 rounded-lg">ดูสลิป</a>}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Tab Content: Categories & Services (Items) */}
        {(adminTab === 'categories' || adminTab === 'services') && (
          <div className="space-y-4">
            <button 
              onClick={() => openEditModal(adminTab)}
              className="w-full bg-white border-2 border-dashed border-pink-300 text-pink-500 py-3 rounded-2xl font-bold flex justify-center items-center gap-2 hover:bg-pink-50"
            >
              <PlusCircle size={20} /> เพิ่มรายการใหม่
            </button>
            
            {/* โชว์ปุ่มโหลดข้อมูลถ้าว่างเปล่า */}
            {(adminTab === 'categories' ? categories : orderWorks).length === 0 && (
              <button onClick={loadSampleData} className="w-full bg-orange-100 text-orange-600 py-2 rounded-xl text-sm font-bold flex justify-center gap-2">
                <Database size={16}/> โหลดข้อมูลตัวอย่าง
              </button>
            )}

            {(adminTab === 'categories' ? categories : orderWorks).map(item => (
              <div key={item.id} className="bg-white rounded-2xl p-4 border border-pink-100 flex gap-4 items-center">
                <img src={item.image} alt="" className="w-16 h-16 object-cover rounded-xl bg-pink-50" />
                <div className="flex-1 min-w-0">
                  <h4 className="font-bold text-[#785346] text-sm line-clamp-1">{item.name}</h4>
                  <div className="flex items-center gap-2 mb-1">
                    <p className="text-pink-500 font-bold text-sm">฿{item.price}</p>
                    {item.subcategory && <span className="text-[9px] bg-purple-100 text-purple-600 px-2 py-0.5 rounded-full font-bold">{item.subcategory}</span>}
                  </div>
                  {item.addons && item.addons.length > 0 && (
                    <span className="text-[9px] bg-pink-100 text-pink-600 px-2 py-0.5 rounded-full font-bold flex max-w-fit">มีตัวเลือกเสริม {item.addons.length} รายการ</span>
                  )}
                </div>
                <div className="flex gap-2">
                  <button onClick={() => openEditModal(adminTab, item)} className="p-2 bg-blue-50 text-blue-500 rounded-lg hover:bg-blue-100"><Edit3 size={16}/></button>
                  <button onClick={() => handleDeleteItem(adminTab, item.id)} className="p-2 bg-red-50 text-red-500 rounded-lg hover:bg-red-100"><Trash2 size={16}/></button>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Tab Content: Reviews */}
        {adminTab === 'reviews' && (
          <div className="space-y-3">
            {reviews.map(review => (
              <div key={review.id} className="flex justify-between items-center bg-white p-4 rounded-2xl border border-pink-100">
                <div className="flex-1 min-w-0 pr-4">
                  <div className="font-bold text-[#785346] text-sm">{review.name}</div>
                  <div className="text-[#a07768] text-xs truncate">"{review.text}"</div>
                </div>
                <button onClick={() => handleDeleteItem('reviews', review.id)} className="p-2 text-red-400 bg-red-50 hover:bg-red-100 rounded-lg"><Trash2 size={16} /></button>
              </div>
            ))}
          </div>
        )}

        {/* Tab Content: Settings */}
        {adminTab === 'settings' && (
          <div className="bg-white rounded-[2rem] p-6 shadow-sm border border-pink-100">
            <h3 className="font-bold text-[#785346] mb-4 flex items-center gap-2">
              <Settings className="text-pink-400" /> ตั้งค่าร้านค้า
            </h3>
            <div className="space-y-5">
              
              {/* ข้อมูลร้านค้า Setting */}
              <div className="p-4 bg-pink-50 rounded-xl border border-pink-100 space-y-3">
                <h4 className="text-sm font-bold text-pink-700 mb-2 flex items-center gap-1">
                  <ImageIcon size={16}/> ข้อมูลและโปรไฟล์ร้านค้า
                </h4>
                
                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">รูปโปรไฟล์โลโก้</label>
                  <input type="file" accept="image/*" ref={shopLogoInputRef} className="hidden" onChange={(e) => handleFileUpload(e, (url) => setEditShopInfo({...editShopInfo, logo: url}))} />
                  <div className="flex items-center gap-4">
                    <img src={editShopInfo.logo} alt="Logo" className="w-16 h-16 rounded-full border-2 border-white shadow-sm object-cover" />
                    <button onClick={() => shopLogoInputRef.current?.click()} className="px-3 py-1.5 bg-white text-pink-500 rounded-lg text-xs font-bold border border-pink-200 shadow-sm hover:bg-pink-100">เปลี่ยนรูปโปรไฟล์</button>
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">ชื่อร้าน</label>
                  <input type="text" value={editShopInfo.name} onChange={e => setEditShopInfo({...editShopInfo, name: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346]" />
                </div>
                
                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">คำโปรย / สโลแกน</label>
                  <textarea value={editShopInfo.slogan} onChange={e => setEditShopInfo({...editShopInfo, slogan: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346] min-h-[60px]" />
                </div>

                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">ข้อความประกาศวิ่ง (ข้อความที่ 1)</label>
                  <input type="text" value={editShopInfo.marquee1} onChange={e => setEditShopInfo({...editShopInfo, marquee1: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346]" />
                </div>
                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">ข้อความประกาศวิ่ง (ข้อความที่ 2)</label>
                  <input type="text" value={editShopInfo.marquee2} onChange={e => setEditShopInfo({...editShopInfo, marquee2: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346]" />
                </div>
                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">ข้อความประกาศวิ่ง (ข้อความที่ 3)</label>
                  <input type="text" value={editShopInfo.marquee3} onChange={e => setEditShopInfo({...editShopInfo, marquee3: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346]" />
                </div>

                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">ลิงก์ Facebook หลัก</label>
                  <input type="text" value={editShopInfo.fbMain} onChange={e => setEditShopInfo({...editShopInfo, fbMain: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346]" />
                </div>

                <div>
                  <label className="block text-xs font-bold text-pink-600 mb-1">ลิงก์ Facebook สำรอง</label>
                  <input type="text" value={editShopInfo.fbSub} onChange={e => setEditShopInfo({...editShopInfo, fbSub: e.target.value})} className="w-full px-3 py-2 bg-white border border-pink-200 rounded-xl focus:outline-none focus:border-pink-400 text-sm text-[#785346]" />
                </div>
              </div>

              {/* LINE URL Setting */}
              <div className="p-4 bg-green-50 rounded-xl border border-green-100">
                <h4 className="text-sm font-bold text-green-700 mb-1 flex items-center gap-1">
                  <MessageCircle size={16}/> ลิงก์เพิ่มเพื่อน LINE ของร้าน
                </h4>
                <p className="text-xs text-green-600 mb-3 leading-relaxed">
                  นำลิงก์ LINE ของคุณมาใส่ที่นี่ (เช่น https://lin.ee/xxxxx) เมื่อลูกค้าสั่งซื้อเสร็จ ระบบจะพาไปที่ LINE ของคุณอัตโนมัติ
                </p>
                <input 
                  type="text" 
                  value={newLineUrlInput}
                  onChange={e => setNewLineUrlInput(e.target.value)}
                  placeholder="https://lin.ee/..."
                  className="w-full px-4 py-3 bg-white border border-green-200 rounded-xl focus:outline-none focus:border-green-400 text-sm text-[#785346]"
                />
              </div>

              {/* PIN Setting */}
              <div className="p-4 bg-orange-50 rounded-xl border border-orange-100">
                <h4 className="text-sm font-bold text-orange-700 mb-1">รหัสผ่านหลังบ้าน (PIN)</h4>
                <p className="text-xs text-orange-600 mb-3">รหัสสำหรับเข้าหน้าระบบจัดการนี้ (ค่าเริ่มต้นคือ 123456)</p>
                <input 
                  type="text" 
                  value={newPinInput}
                  onChange={e => setNewPinInput(e.target.value)}
                  placeholder="เว้นว่างไว้ถ้าไม่ต้องการเปลี่ยน"
                  className="w-full px-4 py-3 bg-white border border-orange-200 rounded-xl focus:outline-none focus:border-orange-400 text-sm tracking-widest text-[#785346]"
                />
              </div>

              <button 
                onClick={handleSaveSettings}
                className="w-full py-4 rounded-xl bg-gradient-to-r from-pink-400 to-orange-400 text-white font-bold text-sm shadow-md shadow-pink-200 hover:opacity-90"
              >
                บันทึกการตั้งค่า
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Item Edit Modal */}
      {isEditingItem && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-stone-900/40 backdrop-blur-sm" onClick={() => setIsEditingItem(false)}></div>
          <div className="relative bg-white w-full max-w-sm rounded-[2rem] p-6 shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh] overflow-y-auto">
            <h3 className="text-lg font-bold text-[#785346] mb-4 border-b border-pink-50 pb-2">
              {editFormData.id ? 'แก้ไขข้อมูล' : 'เพิ่มรายการใหม่'}
            </h3>
            
            <div className="space-y-4">
              {/* Image Upload */}
              <div>
                <label className="block text-xs font-bold text-[#a07768] mb-1">รูปภาพ</label>
                <input type="file" accept="image/*" ref={itemFileInputRef} className="hidden" onChange={(e) => handleFileUpload(e, (url) => setEditFormData({...editFormData, image: url}))} />
                <div 
                  onClick={() => itemFileInputRef.current?.click()}
                  className="w-full h-32 border-2 border-dashed border-pink-200 rounded-2xl bg-pink-50/50 flex flex-col items-center justify-center cursor-pointer overflow-hidden relative group"
                >
                  {editFormData.image ? (
                     <>
                      <img src={editFormData.image} alt="" className="w-full h-full object-cover" />
                      <div className="absolute inset-0 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-white text-xs font-bold">
                        <ImageIcon size={20} className="mb-1"/> เปลี่ยนรูป
                      </div>
                     </>
                  ) : (
                    <><Upload className="text-pink-300 mb-2" size={24}/> <span className="text-pink-400 text-xs font-bold">กดอัปโหลดรูปภาพ</span></>
                  )}
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-[#a07768] mb-1">ชื่อรายการ <span className="text-red-400">*</span></label>
                <input type="text" value={editFormData.name} onChange={e => setEditFormData({...editFormData, name: e.target.value})} className="w-full px-4 py-2 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none focus:border-pink-300 text-sm"/>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-[#a07768] mb-1">ราคาเริ่มต้น (บาท) <span className="text-red-400">*</span></label>
                  <input type="number" value={editFormData.price} onChange={e => setEditFormData({...editFormData, price: e.target.value})} className="w-full px-4 py-2 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none focus:border-pink-300 text-sm"/>
                </div>
                {editType === 'categories' && (
                  <div>
                    <label className="block text-xs font-bold text-[#a07768] mb-1">หมวดหมู่ย่อย</label>
                    <input type="text" placeholder="เช่น พรีเซ็ต, เทมเพลต" value={editFormData.subcategory || ''} onChange={e => setEditFormData({...editFormData, subcategory: e.target.value})} className="w-full px-4 py-2 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none focus:border-pink-300 text-sm"/>
                  </div>
                )}
              </div>

              {editType === 'categories' && (
                <div>
                  <label className="block text-xs font-bold text-[#a07768] mb-1">ป้ายกำกับ (เช่น Hot)</label>
                  <input type="text" value={editFormData.tag || ''} onChange={e => setEditFormData({...editFormData, tag: e.target.value})} className="w-full px-4 py-2 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none focus:border-pink-300 text-sm"/>
                </div>
              )}

              <div>
                <label className="block text-xs font-bold text-[#a07768] mb-1">ลิงก์ตัวอย่าง (เผื่อลูกค้ากดดูก่อน)</label>
                <input type="text" placeholder="https://..." value={editFormData.previewUrl || ''} onChange={e => setEditFormData({...editFormData, previewUrl: e.target.value})} className="w-full px-4 py-2 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none focus:border-pink-300 text-sm"/>
              </div>

              {editType === 'services' && (
                 <div className="space-y-4">
                  <div>
                    <label className="block text-xs font-bold text-[#a07768] mb-1">รายละเอียด</label>
                    <textarea value={editFormData.desc} onChange={e => setEditFormData({...editFormData, desc: e.target.value})} className="w-full px-4 py-2 bg-[#FFFBFB] border border-pink-100 rounded-xl focus:outline-none focus:border-pink-300 text-sm min-h-[60px]"/>
                  </div>
                  
                  {/* กล่องรายการพิเศษ (Addons) สำหรับงานสั่งทำ */}
                  <div className="border border-pink-200 rounded-xl p-3 bg-pink-50/50">
                     <label className="text-xs font-bold text-[#785346] mb-2 flex justify-between items-center">
                        รายการพิเศษ (ตัวเลือกเสริม)
                        <button onClick={handleAddAddonField} className="text-pink-500 bg-white shadow-sm flex items-center gap-1 hover:bg-pink-100 px-2 py-1 rounded-lg transition-colors border border-pink-100"><Plus size={12}/> เพิ่ม</button>
                     </label>
                     <div className="space-y-2">
                        {editFormData.addons && editFormData.addons.length > 0 ? editFormData.addons.map((addon, idx) => (
                           <div key={idx} className="flex gap-2 items-center">
                              <input type="text" placeholder="ชื่อ (เช่น ใส่รูป 10 รูป)" value={addon.name} onChange={e => handleAddonChange(idx, 'name', e.target.value)} className="flex-1 px-3 py-2 bg-white border border-pink-100 rounded-lg text-[11px] focus:outline-none focus:border-pink-300"/>
                              <input type="number" placeholder="+ ราคา" value={addon.price} onChange={e => handleAddonChange(idx, 'price', e.target.value)} className="w-16 px-2 py-2 bg-white border border-pink-100 rounded-lg text-[11px] focus:outline-none focus:border-pink-300"/>
                              <button onClick={() => handleRemoveAddonField(idx)} className="p-1.5 text-red-400 bg-white shadow-sm border border-red-100 hover:bg-red-50 rounded-lg"><Trash2 size={12}/></button>
                           </div>
                        )) : (
                           <p className="text-[10px] text-center text-[#a07768] py-2 bg-white rounded-lg border border-dashed border-pink-200">ยังไม่มีตัวเลือกเสริมให้ลูกค้ากดเลือก</p>
                        )}
                     </div>
                  </div>
                </div>
              )}

              <div className="flex gap-3 pt-2">
                <button onClick={() => setIsEditingItem(false)} className="flex-1 py-3 rounded-xl bg-gray-100 text-gray-600 font-bold text-sm">ยกเลิก</button>
                <button onClick={handleSaveItem} className="flex-1 py-3 rounded-xl bg-pink-400 text-white font-bold text-sm shadow-md shadow-pink-200">บันทึก</button>
              </div>
            </div>
          </div>
        </div>
      )}

      <style dangerouslySetInnerHTML={{__html: `.hide-scrollbar::-webkit-scrollbar { display: none; }`}} />
    </div>
  );

  if (isAdminMode) return renderAdminPanel();

  return (
    <div className="min-h-screen bg-[#FFFBFB] font-sans text-stone-700 pb-28 selection:bg-pink-200">
      <div className="bg-gradient-to-r from-pink-300 via-orange-300 to-pink-300 text-white text-sm py-2 overflow-hidden shadow-sm">
        <div className="whitespace-nowrap animate-[marquee_15s_linear_infinite] font-medium flex items-center gap-4">
          <span>{shopInfo.marquee1}</span>
          <span>{shopInfo.marquee2}</span>
          <span>{shopInfo.marquee3}</span>
        </div>
      </div>

      <div className="max-w-md mx-auto relative px-4 pt-4 pb-2 flex justify-between items-center">
         <button onClick={() => setShowAdminLogin(true)} className="p-2 text-pink-300 hover:text-pink-500 hover:bg-pink-50 rounded-xl transition-all flex flex-col items-center gap-1">
           <Settings size={20} /><span className="text-[10px] font-bold">หลังบ้าน</span>
         </button>
         <button onClick={() => setIsCartOpen(true)} className="relative p-3 bg-white border border-pink-100 text-[#785346] rounded-2xl shadow-sm hover:shadow-md transition-all">
          <ShoppingCart size={24} className="text-pink-400" />
          {totalItems > 0 && <span className="absolute -top-2 -right-2 bg-gradient-to-r from-orange-400 to-pink-500 text-white text-xs font-bold rounded-full h-6 w-6 flex items-center justify-center border-2 border-white shadow-sm">{totalItems}</span>}
        </button>
      </div>

      <main className="max-w-md mx-auto px-4 pb-8">
        {activeTab === 'home' && renderHome()}
        {activeTab === 'category' && renderCategory()}
        {activeTab === 'order' && renderOrder()}
        {activeTab === 'portfolio' && renderPortfolio()}
        {activeTab === 'review' && renderReview()}
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-pink-100 rounded-t-[2rem] shadow-[0_-10px_40px_rgba(255,192,203,0.15)] z-40 pb-safe">
        <div className="max-w-md mx-auto px-2 h-20 flex justify-between items-center relative">
          <button onClick={() => setActiveTab('category')} className={`flex-1 flex flex-col items-center gap-1 ${activeTab === 'category' ? 'text-pink-500 font-bold' : 'text-[#a07768]'}`}>
            <div className={`px-4 py-1.5 rounded-full border-2 transition-colors ${activeTab === 'category' ? 'border-pink-300 bg-pink-50' : 'border-transparent'}`}>กลุ่ม</div>
          </button>
          <button onClick={() => setActiveTab('order')} className={`flex-1 flex flex-col items-center gap-1 ${activeTab === 'order' ? 'text-pink-500 font-bold' : 'text-[#a07768]'}`}>
            <div className={`px-4 py-1.5 rounded-full border-2 transition-colors ${activeTab === 'order' ? 'border-pink-300 bg-pink-50' : 'border-transparent'}`}>สั่งงาน</div>
          </button>
          <div className="relative flex-1 flex justify-center h-full">
            <button onClick={() => setActiveTab('home')} className={`absolute -top-8 w-16 h-16 rounded-full flex items-center justify-center border-[6px] border-[#FFFBFB] shadow-lg transition-transform hover:scale-105 ${activeTab === 'home' ? 'bg-gradient-to-tr from-pink-400 to-orange-400 text-white' : 'bg-stone-800 text-white'}`}>
              <Home size={28} fill={activeTab === 'home' ? "white" : "none"} />
            </button>
          </div>
          <button onClick={() => setActiveTab('portfolio')} className={`flex-1 flex flex-col items-center gap-1 ${activeTab === 'portfolio' ? 'text-pink-500 font-bold' : 'text-[#a07768]'}`}>
            <div className={`px-4 py-1.5 rounded-full border-2 transition-colors ${activeTab === 'portfolio' ? 'border-pink-300 bg-pink-50' : 'border-transparent'}`}>ผลงาน</div>
          </button>
          <button onClick={() => setActiveTab('review')} className={`flex-1 flex flex-col items-center gap-1 ${activeTab === 'review' ? 'text-pink-500 font-bold' : 'text-[#a07768]'}`}>
             <div className={`px-4 py-1.5 rounded-full border-2 transition-colors ${activeTab === 'review' ? 'border-pink-300 bg-pink-50' : 'border-transparent'}`}>รีวิว</div>
          </button>
        </div>
      </nav>

      {/* Addon Selection Modal (หน้าต่างเลือกบริการเสริมก่อนลงตะกร้า) */}
      {addonModalItem && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-stone-900/40 backdrop-blur-sm" onClick={() => setAddonModalItem(null)}></div>
          <div className="relative bg-white w-full max-w-sm rounded-[2rem] p-6 shadow-2xl animate-in zoom-in-95 duration-200">
             <div className="flex justify-between items-start mb-4">
               <h3 className="font-bold text-lg text-[#785346] flex-1 pr-4 line-clamp-2">{addonModalItem?.name}</h3>
               <button onClick={() => setAddonModalItem(null)} className="p-1 bg-pink-50 text-pink-300 hover:bg-pink-100 hover:text-pink-500 rounded-full transition-colors"><X size={18}/></button>
             </div>
             <p className="text-sm text-pink-500 font-bold mb-4 bg-pink-50 p-3 rounded-xl border border-pink-100">ราคาเริ่มต้น ฿{addonModalItem?.price}</p>
             <p className="text-xs text-[#a07768] font-bold mb-2">เลือกรายการพิเศษเพิ่มเติม (ไม่บังคับ)</p>
             
             <div className="space-y-2 mb-6">
                {addonModalItem?.addons?.map((addon, idx) => {
                   const isSelected = selectedAddons.some(a => a.name === addon.name);
                   return (
                      <label key={idx} className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all ${isSelected ? 'border-pink-400 bg-pink-50/50 shadow-sm' : 'border-pink-100 hover:bg-pink-50'}`}>
                         <input type="checkbox" checked={isSelected} onChange={(e) => {
                            if(e.target.checked) setSelectedAddons([...selectedAddons, addon]);
                            else setSelectedAddons(selectedAddons.filter(a => a.name !== addon.name));
                         }} className="w-4 h-4 text-pink-500 rounded focus:ring-pink-400 border-pink-300" />
                         <div className="flex-1 text-sm text-[#785346] font-medium">{addon?.name}</div>
                         <div className="text-sm font-bold text-pink-500">+฿{addon?.price}</div>
                      </label>
                   );
                })}
             </div>
             <button onClick={() => {
                 addToCart(addonModalItem, selectedAddons);
                 setAddonModalItem(null);
             }} className="w-full py-4 rounded-xl bg-gradient-to-r from-pink-400 to-orange-400 text-white font-bold text-sm shadow-md shadow-pink-200 hover:opacity-90 transition-opacity">
                เพิ่มลงตะกร้า • รวม ฿{(Number(addonModalItem?.price || 0) + selectedAddons.reduce((sum, a) => sum + Number(a.price || 0), 0)).toLocaleString()}
             </button>
          </div>
        </div>
      )}

      {/* Cart Sidebar Modal */}
      {isCartOpen && (
        <div className="fixed inset-0 z-[60] flex justify-end">
          <div className="absolute inset-0 bg-stone-900/20 backdrop-blur-sm transition-opacity" onClick={() => setIsCartOpen(false)}></div>
          <div className="relative w-full max-w-md bg-[#FFFBFB] h-full flex flex-col shadow-2xl animate-in slide-in-from-right duration-300 rounded-l-[2rem] overflow-hidden">
            <div className="p-6 border-b border-pink-100 flex justify-between items-center bg-white">
              <h2 className="text-xl font-extrabold text-[#785346] flex items-center gap-2"><ShoppingCart className="text-pink-400" /> ตะกร้าของหนู</h2>
              <button onClick={() => setIsCartOpen(false)} className="p-2 text-pink-300 hover:text-pink-500 hover:bg-pink-50 rounded-full transition-colors"><X size={24} /></button>
            </div>
            {orderStatus === 'success' ? (
              <div className="flex-1 flex flex-col items-center justify-center p-8 text-center bg-white">
                <div className="w-24 h-24 bg-gradient-to-tr from-green-300 to-emerald-300 rounded-full flex items-center justify-center mb-6 shadow-lg shadow-green-200"><CheckCircle size={48} className="text-white" /></div>
                <h3 className="text-2xl font-bold text-[#785346] mb-2">ส่งคำสั่งซื้อสำเร็จ! 🎉</h3>
                <p className="text-[#a07768] mb-8 text-sm leading-relaxed">
                  ทางร้านได้รับออเดอร์และหลักฐานการโอนแล้ว<br/>
                  <span className="font-bold text-pink-500">กรุณากดปุ่มด้านล่างเพื่อทักแชทแจ้งแอดมินนะคะ</span>
                </p>
                <button onClick={openLineChat} className="w-full bg-[#00B900] text-white py-4 rounded-2xl font-bold shadow-lg shadow-green-200 hover:opacity-90 transition-all flex justify-center items-center gap-2 mb-3">
                  <MessageCircle size={22} /> ทักแชท LINE ร้านค้า
                </button>
                <button onClick={finishAndCloseCart} className="w-full bg-gray-100 text-gray-500 py-3 rounded-2xl font-bold hover:bg-gray-200 transition-all text-sm">
                  ปิดหน้าต่าง
                </button>
              </div>
            ) : (
              <>
                <div className="flex-1 overflow-y-auto p-4 space-y-4">
                  {cart.length === 0 ? (
                    <div className="h-full flex flex-col items-center justify-center text-pink-200 gap-4"><ShoppingCart size={64} className="opacity-50" /><p className="text-[#a07768]">ตะกร้ายังว่างเปล่าอยู่เลย</p></div>
                  ) : (
                    <>
                      <div className="bg-white p-4 rounded-3xl shadow-sm border border-pink-50">
                        <h3 className="font-bold text-[#785346] mb-4 text-sm flex items-center gap-2"><Sparkles size={16} className="text-orange-400"/> รายการที่เลือก</h3>
                        <div className="space-y-4">
                          {cart.map((item) => (
                            <div key={item.cartUid} className="flex gap-4 items-start pb-4 border-b border-pink-50 last:border-0 last:pb-0">
                              <img src={item.image} alt={item.name} className="w-16 h-16 object-cover rounded-2xl bg-pink-50 flex-shrink-0" />
                              <div className="flex-1 min-w-0">
                                <h4 className="text-sm font-bold text-[#785346] leading-tight mb-1">{item.name}</h4>
                                
                                {/* แสดงตัวเลือกเสริมที่ลูกค้าเลือก (ถ้ามี) */}
                                {item.selectedAddons && item.selectedAddons.length > 0 && (
                                  <div className="bg-pink-50/50 rounded-lg p-1.5 mb-2">
                                    {item.selectedAddons.map((addon, idx) => (
                                      <div key={idx} className="text-[10px] font-bold text-pink-400 flex justify-between">
                                        <span>+ {addon.name}</span>
                                        <span>฿{addon.price}</span>
                                      </div>
                                    ))}
                                  </div>
                                )}

                                <div className="text-sm text-pink-500 font-bold mb-2">฿{item.price}</div>
                                <div className="flex items-center gap-3">
                                  <div className="flex items-center bg-[#FFFBFB] rounded-xl border border-pink-100 px-1 py-0.5">
                                    <button onClick={() => decreaseQuantity(item.cartUid)} className="p-1 text-[#a07768] hover:text-pink-500"><Minus size={14} /></button>
                                    <span className="w-6 text-center text-sm font-bold text-[#785346]">{item.quantity}</span>
                                    <button onClick={() => addToCart(item)} className="p-1 text-[#a07768] hover:text-pink-500"><Plus size={14} /></button>
                                  </div>
                                  <button onClick={() => removeFromCart(item.cartUid)} className="text-pink-200 hover:text-red-400 p-1"><Trash2 size={16} /></button>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                      <div className="bg-white p-4 rounded-3xl shadow-sm border border-pink-50 space-y-4">
                        <div className="flex justify-between items-end border-b border-pink-50 pb-4">
                          <span className="text-[#a07768] text-sm">ยอดชำระสุทธิ</span>
                          <span className="text-2xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-orange-500">฿{totalPrice}</span>
                        </div>
                        <div className="space-y-3">
                          <input type="text" placeholder="ชื่อ-นามสกุล" value={customerName} onChange={(e) => setCustomerName(e.target.value)} className="w-full px-5 py-3 bg-[#FFFBFB] border border-pink-100 rounded-2xl focus:outline-none focus:border-pink-300 text-sm text-[#785346]"/>
                          <input type="text" placeholder="รายละเอียดต่างๆ/ไอดีกรณีเข้ากลุ่ม" value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} className="w-full px-5 py-3 bg-[#FFFBFB] border border-pink-100 rounded-2xl focus:outline-none focus:border-pink-300 text-sm text-[#785346]"/>
                        </div>
                        
                        {/* กล่องแสดงเลขบัญชี */}
                        <div className="p-4 bg-gradient-to-r from-pink-50 to-orange-50 rounded-2xl border border-pink-100 flex flex-col gap-2">
                          <p className="text-xs text-[#a07768] font-medium mb-1">โอนเงินชำระค่าสินค้าที่นี่ 👇</p>
                          
                          <div className="flex justify-between items-center">
                            <div>
                              <p className="text-sm font-bold text-[#785346]">ธนาคาร: กสิกรไทย</p>
                              <p className="text-base font-extrabold text-pink-500 tracking-wider">2218845595</p>
                            </div>
                            <button 
                              onClick={(e) => {
                                const textArea = document.createElement("textarea");
                                textArea.value = "2218845595";
                                document.body.appendChild(textArea);
                                textArea.select();
                                document.execCommand('copy');
                                document.body.removeChild(textArea);
                                
                                const btn = e.currentTarget;
                                const originalText = btn.innerText;
                                btn.innerText = "คัดลอกแล้ว!";
                                setTimeout(() => btn.innerText = originalText, 2000);
                              }}
                              className="px-3 py-1.5 bg-white rounded-xl text-pink-500 text-[10px] font-bold shadow-sm border border-pink-200 hover:bg-pink-100 transition-all active:scale-95 whitespace-nowrap"
                            >
                              คัดลอก
                            </button>
                          </div>

                          <div className="flex justify-between items-center mt-1">
                            <div>
                              <p className="text-sm font-bold text-[#785346]">True money (+2)</p>
                              <p className="text-base font-extrabold text-pink-500 tracking-wider">0829259486</p>
                            </div>
                            <button 
                              onClick={(e) => {
                                const textArea = document.createElement("textarea");
                                textArea.value = "0829259486";
                                document.body.appendChild(textArea);
                                textArea.select();
                                document.execCommand('copy');
                                document.body.removeChild(textArea);
                                
                                const btn = e.currentTarget;
                                const originalText = btn.innerText;
                                btn.innerText = "คัดลอกแล้ว!";
                                setTimeout(() => btn.innerText = originalText, 2000);
                              }}
                              className="px-3 py-1.5 bg-white rounded-xl text-pink-500 text-[10px] font-bold shadow-sm border border-pink-200 hover:bg-pink-100 transition-all active:scale-95 whitespace-nowrap"
                            >
                              คัดลอก
                            </button>
                          </div>

                          <p className="text-xs text-[#a07768] mt-2 pt-2 border-t border-pink-100/50">ชื่อบัญชี: นภัสสร ปวงรังษี</p>
                        </div>

                        <div>
                          <input type="file" accept="image/*" ref={fileInputRef} className="hidden" onChange={e => handleFileUpload(e, setSlipImage)} />
                          {!slipImage ? (
                            <button onClick={() => fileInputRef.current?.click()} className="w-full border-2 border-dashed border-pink-200 bg-pink-50/50 hover:bg-pink-50 text-pink-400 rounded-2xl p-6 flex flex-col items-center justify-center gap-2 transition-all">
                              <div className="bg-white p-3 rounded-full shadow-sm"><Upload size={24} /></div><span className="text-sm font-bold mt-2">กดเพื่อแนบสลิปโอนเงิน</span>
                            </button>
                          ) : (
                            <div className="relative rounded-2xl overflow-hidden border-2 border-pink-200 group">
                              <img src={slipImage} alt="Slip" className="w-full h-40 object-cover" />
                              <div className="absolute inset-0 bg-stone-900/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                <button onClick={() => fileInputRef.current?.click()} className="bg-white text-[#785346] px-4 py-2 rounded-xl text-sm font-bold flex items-center gap-2 shadow-lg"><ImageIcon size={16} /> เปลี่ยนรูปสลิป</button>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    </>
                  )}
                </div>
                <div className="p-4 bg-white border-t border-pink-100 rounded-bl-[2rem]">
                  <button onClick={handleCheckout} disabled={cart.length === 0 || orderStatus === 'processing'} className={`w-full py-4 rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg ${cart.length === 0 ? 'bg-pink-50 text-pink-200 shadow-none' : 'bg-gradient-to-r from-pink-400 to-orange-400 text-white hover:opacity-90 shadow-pink-200'}`}>
                    {orderStatus === 'processing' ? 'กำลังส่งข้อมูล...' : 'ส่งคำสั่งซื้อเลย 💕'}
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* Admin Login Modal */}
      {showAdminLogin && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-stone-900/40 backdrop-blur-sm" onClick={() => setShowAdminLogin(false)}></div>
          <div className="relative bg-white w-full max-w-sm rounded-[2rem] p-6 shadow-2xl animate-in zoom-in-95 duration-200">
            <h3 className="text-xl font-bold text-[#785346] mb-2 text-center flex items-center justify-center gap-2">
              <Settings className="text-pink-400" /> เข้าสู่ระบบหลังบ้าน
            </h3>
            <p className="text-sm text-[#a07768] text-center mb-6">กรุณากรอกรหัสผ่านเพื่อเข้าสู่ระบบจัดการร้านค้า</p>
            
            <div className="space-y-4">
              <input 
                type="password" 
                placeholder="รหัสผ่าน (PIN)" 
                value={adminPasswordInput}
                onChange={(e) => {
                  setAdminPasswordInput(e.target.value);
                  setAdminLoginError(false);
                }}
                onKeyDown={(e) => e.key === 'Enter' && handleAdminLogin()}
                className={`w-full px-4 py-3 bg-[#FFFBFB] border ${adminLoginError ? 'border-red-400 focus:border-red-500 focus:ring-red-100' : 'border-pink-100 focus:border-pink-300 focus:ring-pink-100'} rounded-xl focus:outline-none focus:ring-4 transition-all text-center text-lg tracking-widest text-[#785346]`}
              />
              {adminLoginError && (
                <p className="text-xs text-red-500 text-center font-bold">รหัสผ่านไม่ถูกต้อง กรุณาลองใหม่!</p>
              )}
              <div className="flex gap-3 pt-2">
                <button onClick={() => setShowAdminLogin(false)} className="flex-1 py-3 rounded-xl bg-gray-100 text-gray-600 font-bold text-sm">ยกเลิก</button>
                <button onClick={handleAdminLogin} className="flex-1 py-3 rounded-xl bg-gradient-to-r from-pink-400 to-orange-400 text-white font-bold text-sm shadow-md shadow-pink-200">เข้าสู่ระบบ</button>
              </div>
            </div>
          </div>
        </div>
      )}

      <style dangerouslySetInnerHTML={{__html: `
        @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
        .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
      `}} />
    </div>
  );
}