import { motion, AnimatePresence } from "motion/react";
import { ShoppingCart, Star, Truck, ShieldCheck, Clock, Award, ChevronLeft, ChevronRight, Instagram, MessageCircle, CheckCircle2, Calendar, ShoppingBag, X, User, Phone, Wind, ChefHat, Heart } from "lucide-react";
import { useState, useEffect, FormEvent, useCallback } from "react";

// Helper for Facebook Tracking
const trackFBEvent = async (eventName: string, eventData?: any, userData?: any) => {
  // 1. Browser Pixel (fbq)
  if (typeof window !== "undefined" && (window as any).fbq) {
    (window as any).fbq('track', eventName, eventData);
  }

  // 2. Server-side CAPI
  try {
    await fetch("/api/fb-event", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ eventName, eventData, userData }),
    });
  } catch (error) {
    console.error("CAPI Tracking Error:", error);
  }
};

const FeatureCard = ({ icon: Icon, title, description }: { icon: any, title: string, description: string }) => (
  <motion.div 
    initial={{ opacity: 0, y: 10 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    className="flex items-center gap-3 p-3 sm:p-6 bg-white rounded-xl sm:rounded-3xl shadow-sm border border-brand-gold/10 sm:flex-col sm:text-center sm:gap-0"
  >
    <div className="w-8 h-8 sm:w-12 sm:h-12 bg-brand-gold/10 rounded-lg sm:rounded-xl flex items-center justify-center sm:mb-4 text-brand-gold shrink-0">
      <Icon size={18} className="sm:w-6 sm:h-6" />
    </div>
    <div className="text-left sm:text-center">
      <h3 className="font-display text-xs sm:text-lg font-bold text-brand-dark sm:mb-2">{title}</h3>
      <p className="text-[9px] sm:text-xs text-brand-dark/60 leading-tight sm:leading-relaxed">{description}</p>
    </div>
  </motion.div>
);

const TestimonialCard = ({ user, review, rating = 5 }: { user: string, review: string, rating?: number }) => (
  <motion.div 
    initial={{ opacity: 0, scale: 0.95 }}
    whileInView={{ opacity: 1, scale: 1 }}
    viewport={{ once: true }}
    className="bg-white p-6 rounded-[24px] border border-brand-gold/10 shadow-sm flex flex-col h-full"
  >
    <div className="flex justify-between items-start mb-4">
      <div>
        <p className="font-bold text-sm text-brand-dark">{user}</p>
      </div>
      <div className="flex text-brand-gold gap-0.5">
        {Array.from({ length: rating }).map((_, i) => <Star key={i} size={10} fill="currentColor" />)}
      </div>
    </div>
    <p className="text-xs text-brand-dark/80 leading-relaxed italic">"{review}"</p>
  </motion.div>
);

const LeadModal = ({ 
  isOpen, 
  onClose, 
  onSubmit, 
  productName, 
  variantName 
}: { 
  isOpen: boolean, 
  onClose: () => void, 
  onSubmit: (data: { name: string, whatsapp: string }) => void,
  productName: string,
  variantName: string
}) => {
  const [name, setName] = useState("");
  const [whatsapp, setWhatsapp] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!name || !whatsapp) return;
    
    setIsSubmitting(true);
    await onSubmit({ name, whatsapp });
    setIsSubmitting(false);
  };

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center p-6">
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
        className="absolute inset-0 bg-brand-dark/60 backdrop-blur-sm"
      />
      <motion.div 
        initial={{ opacity: 0, scale: 0.9, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        className="relative bg-white w-full max-w-md rounded-[32px] overflow-hidden shadow-2xl"
      >
        <div className="p-8">
          <button 
            onClick={onClose}
            className="absolute top-6 right-6 text-brand-dark/20 hover:text-brand-dark transition-colors"
          >
            <X size={24} />
          </button>

          <div className="text-center mb-8">
            <div className="w-16 h-16 bg-brand-gold/10 rounded-2xl flex items-center justify-center text-brand-gold mx-auto mb-4">
              <ShoppingBag size={32} />
            </div>
            <h3 className="font-display text-2xl font-bold text-brand-dark mb-2">Konfirmasi Pesanan</h3>
            <p className="text-xs text-brand-dark/60 leading-relaxed">
              Silahkan isi data Anda untuk melanjutkan pesanan <br />
              <span className="font-bold text-brand-gold">{productName} ({variantName})</span> ke Shopee.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-1.5">
              <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 ml-1">Nama Lengkap</label>
              <div className="relative">
                <input 
                  required
                  type="text" 
                  placeholder="Masukkan nama Anda"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full pl-11 pr-4 py-4 bg-brand-gold/5 border border-brand-gold/10 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-gold/20 transition-all"
                />
                <User size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-brand-gold/40" />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 ml-1">Nomor WhatsApp</label>
              <div className="relative">
                <input 
                  required
                  type="tel" 
                  placeholder="Contoh: 08123456789"
                  value={whatsapp}
                  onChange={(e) => setWhatsapp(e.target.value)}
                  className="w-full pl-11 pr-4 py-4 bg-brand-gold/5 border border-brand-gold/10 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-gold/20 transition-all"
                />
                <Phone size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-brand-gold/40" />
              </div>
            </div>

            <button 
              disabled={isSubmitting}
              type="submit"
              className="w-full bg-brand-gold text-white py-4 rounded-2xl font-bold flex items-center justify-center gap-3 shadow-xl hover:bg-brand-gold/90 transition-all disabled:opacity-50 mt-4"
            >
              {isSubmitting ? (
                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
              ) : (
                <>
                  <span>Lanjutkan ke Shopee</span>
                  <ChevronRight size={18} />
                </>
              )}
            </button>
          </form>
          
          <p className="text-[9px] text-center text-brand-dark/30 mt-6 uppercase tracking-widest">
            Data Anda aman & hanya digunakan untuk konversi pesanan.
          </p>
        </div>
      </motion.div>
    </div>
  );
};

const WhatsAppOrderModal = ({ 
  isOpen, 
  onClose, 
  productName, 
  variant,
  orderType,
  preOrderDate
}: { 
  isOpen: boolean, 
  onClose: () => void, 
  productName: string, 
  variant: { size: string, price: string, originalPrice?: string, priceNum: number, savingsNum?: number, savings?: string },
  orderType: "direct" | "preorder",
  preOrderDate?: string
}) => {
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [whatsapp, setWhatsapp] = useState("");
  const [quantity, setQuantity] = useState(1);

  // Dynamic Discount Logic
  const getDynamicDiscount = () => {
    // If variant already has a specific discount (e.g. 600g variant), use it
    if (variant.savingsNum) return variant.savingsNum;
    
    // If quantity > 1, apply product-specific multi-item discount
    if (quantity > 1) {
      if (productName.toLowerCase().includes("classic")) return 9000;
      if (productName.toLowerCase().includes("wijsman")) return 10000;
      if (productName.toLowerCase().includes("combo")) return 9000;
    }
    
    return 0;
  };

  const currentDiscount = getDynamicDiscount();
  const currentSavingsLabel = variant.savings || (currentDiscount > 0 ? `Hemat ${currentDiscount/1000}RB` : null);

  if (!isOpen) return null;

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    
    const totalPrice = (variant.priceNum * quantity) - currentDiscount;
    const typeText = orderType === "direct" ? "Order Langsung (Stok Ready)" : "Pre-Order";
    const dateText = orderType === "preorder" && preOrderDate ? `\n- Rencana Kirim: ${preOrderDate}` : "";
    const savingsInfo = currentSavingsLabel ? `\n- Promo: ${currentSavingsLabel} (-Rp ${currentDiscount.toLocaleString('id-ID')})` : "";

    const message = `Halo Admin Ellass Pastry, saya mau pesan Nastar Sultan! 😍\n\n📦 DETAIL PESANAN:\n- Produk: ${productName}\n- Varian: ${variant.size}\n- Jumlah: ${quantity} Toples\n- Jenis: ${typeText}${dateText}${savingsInfo}\n\n📍 DETAIL PENGIRIMAN:\n- Nama: ${name}\n- Alamat: ${address}\n- No. WA: ${whatsapp}\n\n--------------------------\n💰 TOTAL BAYAR: Rp ${totalPrice.toLocaleString('id-ID')}\n--------------------------\n\nMohon info nomor rekeningnya ya min. Terima kasih!`;

    // Track Lead instead of Purchase for WhatsApp clicks to be more realistic
    trackFBEvent('Lead', {
      content_name: productName,
      content_ids: [variant.size],
      value: totalPrice,
      currency: 'IDR',
      order_type: orderType,
      method: 'WhatsApp'
    }, {
      fn: name,
      ph: whatsapp
    });

    window.open(`https://wa.me/628133354431?text=${encodeURIComponent(message)}`, '_blank');
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[200] flex items-end sm:items-center justify-center p-4 sm:p-6">
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
        className="absolute inset-0 bg-brand-dark/60 backdrop-blur-sm"
      />
      <motion.div 
        initial={{ y: "100%", opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        exit={{ y: "100%", opacity: 0 }}
        transition={{ type: "spring", damping: 25, stiffness: 200 }}
        className="relative bg-white w-full sm:max-w-md rounded-[32px] overflow-hidden shadow-2xl max-h-[90vh] flex flex-col"
      >
        {/* Mobile Drag Handle */}
        <div className="sm:hidden flex justify-center pt-4 pb-2">
          <div className="w-12 h-1.5 bg-brand-dark/10 rounded-full" />
        </div>

        <div className="p-6 sm:p-8 overflow-y-auto custom-scrollbar">
          <button 
            onClick={onClose}
            className="absolute top-4 sm:top-6 right-4 sm:right-6 text-brand-dark/20 hover:text-brand-dark transition-colors z-10 p-2"
          >
            <X size={24} />
          </button>

          <div className="text-center mb-6 sm:mb-8 mt-2 sm:mt-0">
            <div className="w-14 h-14 sm:w-16 sm:h-16 bg-brand-gold/10 rounded-2xl flex items-center justify-center text-brand-gold mx-auto mb-4">
              <MessageCircle size={30} />
            </div>
            <h3 className="font-display text-xl sm:text-2xl font-bold text-brand-dark mb-2">Formulir Pesanan</h3>
            <div className="inline-block px-3 py-1 bg-brand-gold/5 rounded-full mb-2">
              <p className="text-[10px] sm:text-xs font-bold text-brand-gold uppercase tracking-wider">
                {productName}
              </p>
            </div>
            <p className="text-[11px] sm:text-xs text-brand-dark/60">
              Varian: <span className="font-bold text-brand-dark">{variant.size}</span>
            </p>
            <div className="mt-3 flex justify-center gap-4">
              <div className="flex items-center gap-1 text-[9px] font-bold text-green-600 uppercase">
                <CheckCircle2 size={10} />
                <span>Stok Ready</span>
              </div>
              <div className="flex items-center gap-1 text-[9px] font-bold text-brand-gold uppercase">
                <Truck size={10} />
                <span>Gratis Ongkir</span>
              </div>
            </div>
          </div>

          <form onSubmit={handleSubmit} className="space-y-5">
            <div className="space-y-2">
              <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 ml-1">Nama Penerima</label>
              <input 
                required
                type="text" 
                placeholder="Masukkan nama Anda"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full px-5 py-4 bg-brand-gold/5 border border-brand-gold/10 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-gold/20 transition-all placeholder:text-brand-dark/20"
              />
            </div>

            <div className="space-y-2">
              <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 ml-1">Alamat Lengkap Pengiriman</label>
              <textarea 
                required
                rows={2}
                placeholder="Jl. Nama Jalan, No. Rumah, RT/RW, Kelurahan, Kecamatan, Kota, Kode Pos"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
                className="w-full px-5 py-4 bg-brand-gold/5 border border-brand-gold/10 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-gold/20 transition-all resize-none placeholder:text-brand-dark/20"
              />
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div className="space-y-2">
                <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 ml-1">Nomor WhatsApp</label>
                <input 
                  required
                  type="tel" 
                  placeholder="0812..."
                  value={whatsapp}
                  onChange={(e) => setWhatsapp(e.target.value)}
                  className="w-full px-5 py-4 bg-brand-gold/5 border border-brand-gold/10 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-gold/20 transition-all placeholder:text-brand-dark/20"
                />
              </div>
              <div className="space-y-2">
                <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 ml-1">Jumlah Pesanan</label>
                <div className="flex items-center gap-2 bg-brand-gold/5 p-1.5 rounded-2xl border border-brand-gold/10">
                  <button 
                    type="button"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="w-10 h-10 sm:w-9 sm:h-9 bg-white rounded-xl flex items-center justify-center text-brand-gold shadow-sm font-bold active:scale-90 transition-transform"
                  >
                    -
                  </button>
                  <span className="flex-1 text-center font-bold text-brand-dark text-base">{quantity}</span>
                  <button 
                    type="button"
                    onClick={() => setQuantity(quantity + 1)}
                    className="w-10 h-10 sm:w-9 sm:h-9 bg-brand-gold text-white rounded-xl flex items-center justify-center shadow-md font-bold active:scale-90 transition-transform"
                  >
                    +
                  </button>
                </div>
              </div>
            </div>

            <div className="bg-brand-dark p-5 rounded-[24px] mt-6 relative overflow-hidden group">
              <div className="absolute top-0 right-0 w-24 h-24 bg-brand-gold/10 rounded-full -mr-12 -mt-12 blur-2xl group-hover:bg-brand-gold/20 transition-colors" />
              <div className="relative z-10">
                <div className="flex items-center gap-2 text-white/50 text-[10px] uppercase tracking-widest mb-3 font-bold">
                  <span>Estimasi Total</span>
                  <span className="text-white/20">|</span>
                  <span className="text-brand-gold">Gratis Ongkir</span>
                </div>
                
                <p className="text-white font-display text-3xl font-bold mb-3">
                  Rp {((variant.priceNum * quantity) - currentDiscount).toLocaleString('id-ID')}
                </p>

                {currentDiscount > 0 ? (
                  <motion.p 
                    initial={{ scale: 0.9, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    className="text-brand-gold text-[10px] font-bold flex items-center gap-1"
                  >
                    <Star size={10} fill="currentColor" />
                    Voucher Sultan Aktif: -Rp {currentDiscount.toLocaleString('id-ID')}
                  </motion.p>
                ) : (
                  <p className="text-brand-gold/90 text-[10px] font-bold flex items-center gap-1">
                    <Star size={10} fill="currentColor" className="animate-pulse" />
                    Tambah 1: Hemat Rp 10.000 + Prioritas
                  </p>
                )}
              </div>
            </div>

            <div className="flex flex-col items-center">
              <motion.button 
                type="submit"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                animate={{ 
                  boxShadow: ["0px 10px 20px rgba(242, 125, 38, 0.2)", "0px 15px 30px rgba(242, 125, 38, 0.4)", "0px 10px 20px rgba(242, 125, 38, 0.2)"]
                }}
                transition={{ duration: 2, repeat: Infinity }}
                className="w-full bg-brand-gold text-white py-4 rounded-2xl font-bold flex items-center justify-center shadow-xl shadow-brand-gold/20 hover:bg-brand-gold/90 transition-all mt-6 mb-2 relative overflow-hidden"
              >
                <span className="text-base uppercase tracking-wider">Amankan Stok & Klaim Diskon</span>
                
                {/* Shine effect */}
                <motion.div 
                  initial={{ x: "-100%" }}
                  animate={{ x: "200%" }}
                  transition={{ duration: 1.5, repeat: Infinity, repeatDelay: 3 }}
                  className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12"
                />
              </motion.button>
              <div className="flex items-center gap-1.5 text-[9px] text-brand-dark/40 font-bold uppercase tracking-wider">
                <ShieldCheck size={12} className="text-brand-gold" />
                <span>Garansi 100% Ganti Baru Jika Tidak Sesuai</span>
              </div>
            </div>

            {quantity === 1 ? (
              <motion.p 
                initial={{ opacity: 0, y: 5 }}
                animate={{ opacity: 1, y: 0 }}
                className="text-[10px] text-center text-brand-dark/40 italic mt-2 px-4"
              >
                Psst.. Beli 2 toples lebih hemat & otomatis dapat <span className="text-brand-gold font-bold">Voucher Potongan</span> lho! 😍
              </motion.p>
            ) : (
              <motion.p 
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                className="text-[10px] text-center text-brand-gold font-bold mt-2 px-4 bg-brand-gold/5 py-2 rounded-xl border border-brand-gold/10"
              >
                Luar biasa! Anda menghemat <span className="underline">Rp {currentDiscount.toLocaleString('id-ID')}</span> & mengamankan stok Sultan hari ini. 👑
              </motion.p>
            )}
          </form>
        </div>
      </motion.div>
    </div>
  );
};

const ProductCard = ({ 
  name, 
  variants, 
  images, 
  description, 
  features,
  stockLeft,
  isBestSeller
}: { 
  name: string, 
  variants: { 
    size: string, 
    price: string, 
    originalPrice?: string,
    priceNum: number, 
    shopeeUrl: string,
    label?: string,
    badge?: string,
    savings?: string,
    savingsNum?: number,
    isHero?: boolean
  }[], 
  images: string[], 
  description: string,
  features: string[],
  stockLeft?: number,
  isBestSeller?: boolean
}) => {
  const [selectedVariant, setSelectedVariant] = useState(variants[0]);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [orderType, setOrderType] = useState<"direct" | "preorder">("direct");
  const [preOrderDate, setPreOrderDate] = useState("");
  const [isLeadModalOpen, setIsLeadModalOpen] = useState(false);
  const [isWhatsAppModalOpen, setIsWhatsAppModalOpen] = useState(false);

  const handleWhatsAppOrder = () => {
    trackFBEvent('InitiateCheckout', {
      content_name: name,
      content_category: 'Nastar',
      value: selectedVariant.priceNum,
      currency: 'IDR',
      method: 'WhatsApp'
    });
    setIsWhatsAppModalOpen(true);
  };

  const handleShopeeClick = () => {
    trackFBEvent('InitiateCheckout', {
      content_name: name,
      value: selectedVariant.priceNum,
      currency: 'IDR'
    });
    setIsLeadModalOpen(true);
  };

  const handleLeadSubmit = async (data: { name: string, whatsapp: string }) => {
    try {
      await fetch("/api/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...data,
          product: name,
          variant: selectedVariant.size,
          timestamp: new Date().toLocaleString("id-ID")
        })
      });

      // Track Lead for Shopee instead of Purchase
      trackFBEvent('Lead', {
        content_name: name,
        content_category: 'Nastar',
        content_ids: [selectedVariant.size],
        value: selectedVariant.priceNum,
        currency: 'IDR',
        method: 'Shopee'
      }, {
        fn: data.name,
        ph: data.whatsapp
      });

    } catch (error) {
      console.error("Error saving lead:", error);
    } finally {
      window.open(selectedVariant.shopeeUrl, '_blank');
      setIsLeadModalOpen(false);
    }
  };

  return (
    <>
      <LeadModal 
        isOpen={isLeadModalOpen}
        onClose={() => setIsLeadModalOpen(false)}
        onSubmit={handleLeadSubmit}
        productName={name}
        variantName={selectedVariant.size}
      />
      <WhatsAppOrderModal 
        isOpen={isWhatsAppModalOpen}
        onClose={() => setIsWhatsAppModalOpen(false)}
        productName={name}
        variant={selectedVariant}
        orderType={orderType}
        preOrderDate={preOrderDate}
      />
      <motion.div 
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="bg-white rounded-[32px] overflow-hidden shadow-xl border border-brand-gold/10 flex flex-col"
    >
      <div className="relative aspect-square overflow-hidden group">
        <div className="flex transition-transform duration-500 ease-out h-full" style={{ transform: `translateX(-${currentImageIndex * 100}%)` }}>
          {images.map((img, i) => (
            <img 
              key={i}
              src={img} 
              alt={`${name} ${i + 1}`} 
              className="w-full h-full object-cover shrink-0"
              referrerPolicy="no-referrer"
            />
          ))}
        </div>
        
        {images.length > 1 && (
          <>
            <button 
              onClick={() => setCurrentImageIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1))}
              className="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-brand-dark shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <ChevronLeft size={16} />
            </button>
            <button 
              onClick={() => setCurrentImageIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1))}
              className="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-brand-dark shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <ChevronRight size={16} />
            </button>
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5">
              {images.map((_, i) => (
                <div 
                  key={i} 
                  className={`w-1.5 h-1.5 rounded-full transition-all ${currentImageIndex === i ? "bg-brand-gold w-3" : "bg-white/50"}`}
                />
              ))}
            </div>
          </>
        )}

        <div className="absolute top-4 left-4 bg-brand-gold text-white text-[9px] uppercase tracking-[0.2em] px-3 py-1.5 rounded-full font-bold shadow-lg">
          Premium Quality
        </div>
        
        {stockLeft && (
          <div className="absolute top-4 right-4 bg-red-600 text-white text-[9px] uppercase tracking-[0.1em] px-3 py-1.5 rounded-full font-bold shadow-lg animate-pulse">
            Sisa {stockLeft} Toples
          </div>
        )}

        {isBestSeller && (
          <div className="absolute top-14 left-4 bg-brand-dark text-white text-[9px] uppercase tracking-[0.2em] px-3 py-1.5 rounded-full font-bold shadow-lg">
            🔥 Best Seller
          </div>
        )}
      </div>
      
      <div className="p-6 sm:p-8 flex flex-col">
        <div className="mb-6">
          <div className="flex justify-between items-start mb-2">
            <h3 className="font-display text-2xl font-bold text-brand-dark">{name}</h3>
            <div className="flex items-center gap-1 bg-brand-gold/10 px-2 py-1 rounded-lg">
              <Star size={12} className="text-brand-gold" fill="currentColor" />
              <span className="text-brand-gold font-bold text-[10px]">4.9</span>
            </div>
          </div>
          <div className="flex text-brand-gold gap-0.5 mb-3">
            {[1,2,3,4].map(i => <Star key={i} size={14} fill="currentColor" />)}
            <div className="relative">
              <Star size={14} className="text-brand-gold/20" fill="currentColor" />
              <div className="absolute inset-0 overflow-hidden w-[90%]">
                <Star size={14} fill="currentColor" />
              </div>
            </div>
          </div>
          <p className="text-brand-dark/70 text-sm leading-relaxed mb-4">{description}</p>
          <ul className="space-y-2">
            {features.map((f, i) => (
              <li key={i} className="flex items-center gap-2 text-xs text-brand-gold font-medium">
                <CheckCircle2 size={14} />
                <span>{f}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Size Selection */}
        <div className="mb-6">
          <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 mb-3 block">Pilih Ukuran & Penawaran</label>
          <div className="grid grid-cols-1 gap-3">
            {variants.map((v, i) => (
              <button 
                key={i}
                onClick={() => {
                  setSelectedVariant(v);
                  trackFBEvent('AddToCart', {
                    content_name: name,
                    content_ids: [v.size],
                    value: v.priceNum,
                    currency: 'IDR'
                  });
                }}
                className={`relative py-4 px-4 rounded-2xl border-2 transition-all text-left flex flex-col ${selectedVariant.size === v.size ? "border-brand-gold bg-brand-gold/5 ring-1 ring-brand-gold/20" : "border-brand-gold/10 bg-white"}`}
              >
                {v.badge && (
                  <div className="absolute -top-2.5 -right-2 bg-brand-dark text-white text-[8px] font-bold px-3 py-1 rounded-full shadow-md z-10 border border-brand-gold/20">
                    {v.badge}
                  </div>
                )}
                <div className="flex justify-between items-start mb-3">
                  <span className="text-[10px] font-bold text-brand-dark/40 uppercase tracking-widest">{v.size}</span>
                  {v.savings && (
                    <span className="text-[9px] font-bold text-green-600 bg-green-50 px-2 py-0.5 rounded-full border border-green-100">
                      {v.savings}
                    </span>
                  )}
                </div>
                <div className="flex justify-between items-center mb-3">
                  <div className="flex flex-col">
                    <span className="text-xl font-bold text-brand-dark leading-tight">{v.price}</span>
                    {v.originalPrice && (
                      <span className="text-[10px] text-brand-dark/30 line-through font-medium">
                        {v.originalPrice}
                      </span>
                    )}
                  </div>
                  <div className="flex flex-col items-end gap-1">
                    {v.isHero && <span className="text-[10px] text-brand-gold font-bold italic">Best Value</span>}
                    {v.size.includes("300") && (
                      <span className="text-[9px] text-brand-gold font-bold animate-pulse">
                        🔥 BELI 2+ HEMAT 10RB
                      </span>
                    )}
                  </div>
                </div>
                {v.label && <p className="text-[10px] text-brand-dark/60 mt-3 leading-tight font-medium">{v.label}</p>}
              </button>
            ))}
          </div>
        </div>

        {/* Order Type */}
        <div className="mb-6">
          <label className="text-[10px] uppercase tracking-widest font-bold text-brand-dark/40 mb-3 block">Waktu Pengiriman</label>
          <div className="grid grid-cols-2 gap-2 p-1 bg-brand-gold/5 rounded-xl mb-3">
            <button 
              onClick={() => setOrderType("direct")}
              className={`py-2.5 text-xs font-bold rounded-lg transition-all ${orderType === "direct" ? "bg-white text-brand-dark shadow-sm" : "text-brand-gold"}`}
            >
              Order Langsung
            </button>
            <button 
              onClick={() => setOrderType("preorder")}
              className={`py-2.5 text-xs font-bold rounded-lg transition-all ${orderType === "preorder" ? "bg-white text-brand-dark shadow-sm" : "text-brand-gold"}`}
            >
              Pre-Order
            </button>
          </div>
          
          {orderType === "preorder" && (
            <motion.div 
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              className="relative"
            >
              <input 
                type="date" 
                value={preOrderDate}
                onChange={(e) => setPreOrderDate(e.target.value)}
                className="w-full p-3 bg-white border border-brand-gold/10 rounded-xl text-sm text-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-gold/20"
              />
              <Calendar size={16} className="absolute right-3 top-1/2 -translate-y-1/2 text-brand-gold pointer-events-none" />
            </motion.div>
          )}
        </div>

        {/* Action Buttons */}
        <div className="flex flex-col gap-3">
            <button 
            onClick={handleWhatsAppOrder}
            className="w-full bg-brand-dark text-white py-3 rounded-xl font-bold flex flex-col items-center justify-center hover:bg-black active:scale-[0.98] transition-all shadow-md"
          >
            <span className="text-xs uppercase tracking-wider">
              {orderType === "direct" ? "Chat Sekarang – Slot Terbatas" : "Booking Pre-Order via WA"}
            </span>
            <span className="text-[7px] uppercase tracking-widest opacity-60 mt-0.5">Fast Response • Admin Ramah</span>
          </button>
          
          <div className="flex items-center justify-center gap-2 py-2 px-4 bg-brand-gold/5 rounded-xl border border-brand-gold/20">
            <ShieldCheck size={14} className="text-brand-gold" />
            <p className="text-[9px] font-bold text-brand-dark uppercase tracking-wider">
              Garansi 100% Ganti Baru Jika Produk Tidak Sesuai penawaran
            </p>
          </div>

          {selectedVariant.savings ? (
            <div className="text-center py-3 px-4 bg-green-50 rounded-xl border border-dashed border-green-200">
              <p className="text-[10px] font-bold text-green-700 uppercase tracking-wider">
                🎁 Promo Hemat Ini Khusus Order via WhatsApp
              </p>
            </div>
          ) : (
            orderType === "direct" ? (
              <button 
                onClick={handleShopeeClick}
                className="w-full bg-white text-[#ee4d2d] border-2 border-[#ee4d2d] py-4 rounded-xl font-bold flex items-center justify-center gap-3 hover:bg-[#ee4d2d]/5 active:scale-[0.98] transition-all"
              >
                <ShoppingBag size={20} />
                <span className="text-sm">Order via Shopee</span>
              </button>
            ) : (
              <div className="text-center py-2 px-4 bg-brand-gold/5 rounded-xl border border-dashed border-brand-gold/30">
                <p className="text-[10px] font-bold text-brand-gold uppercase tracking-wider">
                  Khusus Pre-Order Hanya Melalui WhatsApp
                </p>
              </div>
            )
          )}
        </div>
      </div>
    </motion.div>
    </>
  );
};

const ConversionPopup = ({ isOpen, onClose }: { isOpen: boolean, onClose: () => void }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-[300] flex items-center justify-center p-4 sm:p-6">
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-brand-dark/80 backdrop-blur-md"
          />
          <motion.div 
            initial={{ opacity: 0, scale: 0.9, y: 40 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 40 }}
            className="relative bg-white w-full max-w-md rounded-[24px] sm:rounded-[40px] overflow-hidden shadow-2xl border border-brand-gold/20 max-h-[85vh] flex flex-col"
          >
            <button 
              onClick={onClose}
              className="absolute top-3 right-3 sm:top-6 sm:right-6 w-8 h-8 sm:w-10 sm:h-10 bg-brand-gold/10 rounded-full flex items-center justify-center text-brand-gold hover:bg-brand-gold/20 transition-colors z-20"
            >
              <X size={18} />
            </button>

            <div className="relative flex-1 overflow-y-auto no-scrollbar">
              <div className="h-24 sm:h-48 bg-brand-dark relative overflow-hidden shrink-0">
                <img 
                  src="https://picsum.photos/seed/nastar-gold/800/600" 
                  alt="Promo" 
                  className="w-full h-full object-cover opacity-60"
                  referrerPolicy="no-referrer"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-brand-dark to-transparent" />
                <div className="absolute bottom-3 left-5 sm:bottom-6 sm:left-8">
                  <div className="bg-brand-gold text-white text-[7px] sm:text-[10px] font-bold px-2 py-0.5 sm:px-3 sm:py-1 rounded-full mb-1 sm:mb-2 inline-block uppercase tracking-widest">
                    Moment Lebaran Terbatas
                  </div>
                  <h2 className="font-display text-xl sm:text-3xl font-bold text-white">Tunggu Sebentar, Sultan! 👑</h2>
                </div>
              </div>

              <div className="p-5 sm:p-8">
                <p className="text-brand-dark/70 text-[11px] sm:text-sm leading-relaxed mb-4 sm:mb-6">
                  Produksi <span className="text-brand-gold font-bold">Golden Nastar</span> untuk moment Lebaran sangat terbatas. Karena kualitas premium, tidak semua orang bisa mendapatkan slot order hari ini.
                </p>

                <div className="space-y-2.5 sm:space-y-4 mb-5 sm:mb-8">
                  {[
                    { icon: Truck, text: "Gratis Ongkir Seluruh Indonesia", sub: "Khusus pemesanan sekarang" },
                    { icon: ShieldCheck, text: "Garansi Paket Aman (Triple Safety)", sub: "Rusak di jalan? Kami ganti baru 100%" },
                    { icon: Clock, text: "Slot Produksi Lebaran Terbatas", sub: "Hanya untuk yang melakukan pemesanan hari ini" }
                  ].map((item, i) => (
                    <div key={i} className="flex gap-3 sm:gap-4 items-start">
                      <div className="w-7 h-7 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-brand-gold/10 flex items-center justify-center text-brand-gold shrink-0">
                        <item.icon size={14} className="sm:w-5 sm:h-5" />
                      </div>
                      <div>
                        <p className="text-[11px] sm:text-sm font-bold text-brand-dark">{item.text}</p>
                        <p className="text-[8px] sm:text-[10px] text-brand-dark/40">{item.sub}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="space-y-3">
                  <button 
                    onClick={() => {
                      onClose();
                      const el = document.getElementById('products');
                      el?.scrollIntoView({ behavior: 'smooth' });
                    }}
                    className="w-full bg-brand-gold text-white py-3.5 sm:py-5 rounded-xl sm:rounded-2xl font-bold flex items-center justify-center gap-2 sm:gap-3 shadow-xl shadow-brand-gold/20 hover:bg-brand-gold/90 active:scale-[0.98] transition-all"
                  >
                    <ShoppingBag size={18} className="sm:w-5 sm:h-5" />
                    <span className="text-xs sm:text-base">AMBIL PROMO SEKARANG</span>
                  </button>
                  
                  <div className="bg-brand-gold/5 border border-brand-gold/20 rounded-xl p-2.5 text-center">
                    <p className="text-[9px] sm:text-xs font-bold text-brand-gold">
                      🎁 TERSEDIA VOUCHER POTONGAN HINGGA 20RB UNTUK ANDA!
                    </p>
                  </div>
                </div>
                
                <p className="text-[8px] sm:text-[10px] text-center text-brand-dark/30 mt-3 sm:mt-4 italic">
                  *Slot produksi Lebaran akan ditutup sewaktu-waktu jika kuota terpenuhi.
                </p>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
};

export default function App() {
  const [scrolled, setScrolled] = useState(false);
  const [showStickyCta, setShowStickyCta] = useState(false);
  const [activeProductTab, setActiveProductTab] = useState<"classic" | "wijsman">("wijsman");
  const [isConversionPopupOpen, setIsConversionPopupOpen] = useState(false);
  const [hasShownPopup, setHasShownPopup] = useState(false);

  useEffect(() => {
    const shown = localStorage.getItem('hasShownConversionPopup');
    if (shown) setHasShownPopup(true);

    const handleScroll = () => {
      setScrolled(window.scrollY > 100);
      setShowStickyCta(window.scrollY > 600);

      // Trigger popup on scroll depth (70%)
      const scrollPercent = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight;
      if (scrollPercent > 0.7 && !hasShownPopup) {
        setIsConversionPopupOpen(true);
        setHasShownPopup(true);
        localStorage.setItem('hasShownConversionPopup', 'true');
      }
    };

    const handleMouseLeave = (e: MouseEvent) => {
      // Trigger popup on exit intent
      if (e.clientY < 0 && !hasShownPopup) {
        setIsConversionPopupOpen(true);
        setHasShownPopup(true);
        localStorage.setItem('hasShownConversionPopup', 'true');
      }
    };

    window.addEventListener("scroll", handleScroll);
    document.addEventListener("mouseleave", handleMouseLeave);

    // Track ViewContent on load
    trackFBEvent('ViewContent', {
      content_name: 'Nastar Sultan Landing Page',
      content_category: 'Food & Pastry'
    });

    return () => {
      window.removeEventListener("scroll", handleScroll);
      document.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [hasShownPopup]);

  return (
    <div className="min-h-screen bg-brand-light selection:bg-brand-gold selection:text-white pb-24">
      <ConversionPopup 
        isOpen={isConversionPopupOpen} 
        onClose={() => setIsConversionPopupOpen(false)} 
      />
      {/* Announcement Bar */}
      <div className="bg-brand-dark text-white py-2 px-4 text-center overflow-hidden relative z-[60]">
        <motion.p 
          initial={{ x: "100%" }}
          animate={{ x: "-100%" }}
          transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
          className="text-[10px] uppercase tracking-[0.3em] font-bold whitespace-nowrap"
        >
          ✨ UPDATE LIVE: READY STOCK • GRATIS ONGKIR SELURUH INDONESIA • PREMIUM QUALITY NASTAR • 100% WIJSMAN BUTTER • ✨
        </motion.p>
      </div>

      {/* Simple Mobile Header */}
      <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? "bg-white/90 backdrop-blur-md shadow-sm h-16 mt-0" : "bg-transparent h-20 mt-8"}`}>
        <div className="max-w-7xl mx-auto px-6 h-full flex items-center justify-between">
          <div className="flex items-center">
            <img 
              src="https://lh3.googleusercontent.com/d/170FV7iJPgqvU872pfBFHgs5U53ANliCB" 
              alt="Ellass Logo" 
              className="h-12 w-auto object-contain"
              referrerPolicy="no-referrer"
            />
          </div>
          <a href="https://wa.me/628133354431" className="bg-brand-gold text-white p-2 rounded-full shadow-md">
            <MessageCircle size={18} />
          </a>
        </div>
      </header>

      {/* Hero Section */}
      <section className="pt-28 pb-12 px-6 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <div className="flex flex-wrap justify-center gap-2 mb-4">
            <span className="inline-block text-brand-gold font-bold tracking-[0.2em] uppercase text-[10px] bg-brand-gold/10 px-3 py-1.5 rounded-full">The Queen of Nastar</span>
            <span className="inline-block text-green-600 font-bold tracking-[0.2em] uppercase text-[10px] bg-green-50 px-3 py-1.5 rounded-full border border-green-100 animate-pulse">Ready Stock - Siap Kirim</span>
          </div>
          <h1 className="font-display text-4xl sm:text-6xl font-bold leading-[1.1] text-brand-dark mb-4">
            Sajikan <span className="italic font-light text-brand-gold">Kemewahan</span> <br />
            di Meja Lebaran Anda.
          </h1>
          <p className="text-sm sm:text-lg font-bold text-brand-gold mb-4 uppercase tracking-wider">
            ⚠️ Slot Produksi Terbatas Menjelang Lebaran. Amankan Sebelum Penuh!
          </p>
          <p className="text-[11px] sm:text-sm text-brand-dark/70 mb-10 leading-relaxed max-w-md mx-auto">
            <span className="font-bold text-brand-dark">Dipilih ratusan pelanggan setiap musim Lebaran.</span> Dibuat dengan <span className="text-brand-dark font-bold">100% Full Wijsman Butter</span>. Wangi, lembut & Lumer di mulut serta tanpa pengawet, aman untuk keluarga.
          </p>
          <div className="flex flex-col gap-4 max-w-xs mx-auto">
            <a href="#products" className="w-full py-4 bg-brand-gold text-white rounded-2xl font-bold text-base shadow-xl active:scale-95 transition-transform">
              Amankan Pengiriman Sebelum Lebaran
            </a>
            <div className="flex flex-wrap items-center justify-center gap-3">
              <div className="flex items-center gap-1 bg-white px-3 py-1.5 rounded-full shadow-sm border border-brand-gold/20">
                <Star size={14} className="text-brand-gold" fill="currentColor" />
                <span className="text-brand-dark font-bold text-xs">4.9/5</span>
                <span className="text-brand-dark/40 text-[10px] ml-1">Rating Shopee</span>
              </div>
              <div className="flex items-center gap-1 bg-brand-gold text-white px-3 py-1.5 rounded-full shadow-md border border-brand-gold/20">
                <Truck size={14} />
                <span className="font-bold text-[10px] uppercase tracking-wider">Gratis Ongkir</span>
              </div>
            </div>
          </div>
        </motion.div>
      </section>

      {/* Voucher Section - MOVED UP */}
      <section className="pb-10 px-6">
        <div className="max-w-4xl mx-auto">
          <div className="grid grid-cols-2 gap-4">
            <motion.div 
              whileHover={{ y: -5 }}
              className="bg-white border-2 border-dashed border-brand-gold/30 rounded-3xl p-5 relative overflow-hidden shadow-sm"
            >
              <div className="absolute -right-4 -top-4 w-12 h-12 bg-brand-gold/10 rounded-full" />
              <p className="text-[9px] font-bold text-brand-gold uppercase tracking-widest mb-1">Voucher Hemat 1</p>
              <h4 className="font-display text-xl font-bold text-brand-dark">Potongan 10RB</h4>
              <p className="text-[10px] text-brand-dark/60 mt-1">Min. Belanja Rp 120.000</p>
              <div className="mt-3 inline-block bg-brand-gold/10 text-brand-gold text-[8px] font-bold px-2 py-1 rounded">OTOMATIS DI WA</div>
            </motion.div>
            <motion.div 
              whileHover={{ y: -5 }}
              className="bg-brand-dark border-2 border-dashed border-brand-gold/30 rounded-3xl p-5 relative overflow-hidden shadow-lg"
            >
              <div className="absolute -right-4 -top-4 w-12 h-12 bg-white/5 rounded-full" />
              <p className="text-[9px] font-bold text-brand-gold uppercase tracking-widest mb-1">Voucher Sultan</p>
              <h4 className="font-display text-xl font-bold text-white">Potongan 20RB</h4>
              <p className="text-[10px] text-white/60 mt-1">Min. Belanja Rp 250.000 + Prioritas</p>
              <div className="mt-3 inline-block bg-brand-gold text-white text-[8px] font-bold px-2 py-1 rounded">VIP TREATMENT</div>
            </motion.div>
          </div>
          <p className="text-center text-[10px] text-brand-gold mt-4 uppercase tracking-widest font-bold animate-pulse">
            🔥 Batas Pengiriman Sebelum Lebaran: 15 Maret 2026
          </p>
        </div>
      </section>

      {/* Features - MOVED DOWN */}
      <section className="py-8 sm:py-16 bg-brand-gold/5 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
            <FeatureCard icon={Award} title="100% Full Wijsman" description="Tanpa campuran margarin. Aroma & rasa premium." />
            <FeatureCard icon={ShieldCheck} title="Triple Safety Packing" description="Bubble wrap + Box + Air Pack. Garansi sampai utuh." />
            <FeatureCard icon={Heart} title="Tanpa Pengawet" description="100% Bahan alami. Aman untuk seluruh keluarga." />
            <FeatureCard icon={Truck} title="Gratis Ongkir" description="Seluruh Indonesia tanpa minimal belanja hari ini." />
          </div>
        </div>
      </section>


      {/* Products Section */}
      <section id="products" className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <span className="text-brand-gold font-bold tracking-[0.3em] uppercase text-[10px] mb-2 block">Signature Menu</span>
            <h2 className="font-display text-4xl font-bold text-brand-dark">Pilih Nastar Anda</h2>
            <p className="text-xs text-brand-dark/60 mt-2 italic">"Untuk suguhan lebih lengkap, banyak pelanggan memilih varian 600gr."</p>
          </div>

          {/* Product Tabs for Mobile */}
          <div className="flex p-1 bg-brand-gold/5 rounded-2xl mb-8 md:hidden">
            <button 
              onClick={() => setActiveProductTab("wijsman")}
              className={`flex-1 py-3 text-xs font-bold rounded-xl transition-all ${activeProductTab === "wijsman" ? "bg-brand-dark text-white shadow-lg" : "text-brand-gold"}`}
            >
              Full Wijsman (Best)
            </button>
            <button 
              onClick={() => setActiveProductTab("classic")}
              className={`flex-1 py-3 text-xs font-bold rounded-xl transition-all ${activeProductTab === "classic" ? "bg-brand-dark text-white shadow-lg" : "text-brand-gold"}`}
            >
              Premium Classic
            </button>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className={`${activeProductTab === "classic" ? "block" : "hidden md:block"}`}>
              <ProductCard 
                name="Nastar Premium Classic"
                stockLeft={14}
                images={[
                  "https://lh3.googleusercontent.com/d/1jdvOrNIhZc9gCBp_KbaaJdx80U0fctP7",
                  "https://lh3.googleusercontent.com/d/1dMj-9QsTPJDCMAaFfe1bggS4tbb_IY6S",
                  "https://lh3.googleusercontent.com/d/1991C9yIYmC08QUM0sO8Gkb6q2AtUQHjm",
                  "https://lh3.googleusercontent.com/d/131ZTR3Q3tpokx2UPkuXAtgWseYbuxBQX",
                  "https://lh3.googleusercontent.com/d/1UQAlTUPG6osMVkzBsU78Nsc7ZCzspPhB"
                ]}
                description="Versi Classic hadir untuk anda yang menginginkan tekstur premium Ellass dengan harga lebih terjangkau."
                features={[
                  "Gratis Ongkir Seluruh Indonesia",
                  "Tekstur lembut, wangi & lumer",
                  "Selai nanas produksi sendiri",
                  "Higienis & 100% Bahan pilihan"
                ]}
                variants={[
                  { 
                    size: "300 Gram", 
                    price: "Rp 69.000", 
                    priceNum: 69000, 
                    shopeeUrl: "https://shopee.co.id/product/21536298/56356259858/",
                    label: "Cukup untuk konsumsi sendiri"
                  },
                  { 
                    size: "600 Gram", 
                    price: "Rp 129.000", 
                    originalPrice: "Rp 138.000",
                    priceNum: 129000, 
                    shopeeUrl: "https://shopee.co.id/product/21536298/55256287949/",
                    label: "Cukup untuk suguhan tamu",
                    badge: "⭐ PALING DIPILIH",
                    savings: "Hemat 9RB",
                    savingsNum: 9000,
                    isHero: true
                  }
                ]}
              />
            </div>
            <div className={`${activeProductTab === "wijsman" ? "block" : "hidden md:block"}`}>
              <ProductCard 
                name="Nastar 100% Full Wijsman"
                stockLeft={8}
                isBestSeller={true}
                images={[
                  "https://lh3.googleusercontent.com/d/1Tc6jVq_0vI_UmfLudnTTJjiGcLUGADc6",
                  "https://lh3.googleusercontent.com/d/1bQLWNwAfKqCidqetp92nbEBxBEDKyUh7",
                  "https://lh3.googleusercontent.com/d/1ag1aTTw5gBvpSV-z239tN8uMp3tu94D3",
                  "https://lh3.googleusercontent.com/d/1iMpUbRaVKnmm_jM2z1NMY1y4w9yGxDxD",
                  "https://lh3.googleusercontent.com/d/1-dcoWW2Yv5dOBXl8C-fe_xB90w1tvB1u"
                ]}
                description="100% Full Wijsman Butter & Tanpa Campuran. Pilihan premium untuk tamu spesial."
                features={[
                  "Gratis Ongkir Seluruh Indonesia",
                  "100% Full Wijsman Butter",
                  "Rasa Mewah di setiap gigitan",
                  "The Queen of Nastar"
                ]}
                variants={[
                  { 
                    size: "300 Gram", 
                    price: "Rp 119.000", 
                    priceNum: 119000, 
                    shopeeUrl: "https://shopee.co.id/product/21536298/25070397144/",
                    label: "Pilihan Premium"
                  },
                  { 
                    size: "600 Gram", 
                    price: "Rp 228.000", 
                    originalPrice: "Rp 238.000",
                    priceNum: 228000, 
                    shopeeUrl: "https://shopee.co.id/product/21536298/24872379094/",
                    label: "Ideal untuk keluarga & Hadiah",
                    badge: "⭐ PRESTIGE UPGRADE",
                    savings: "Special Lebaran Saving 10RB",
                    savingsNum: 10000,
                    isHero: true
                  }
                ]}
              />
            </div>
          </div>

          {/* Combo Package */}
          <div className="mt-12">
            <ProductCard 
              name="Paket Suguhan Lebaran (Combo)"
              stockLeft={5}
              images={[
                "https://lh3.googleusercontent.com/d/1ag1aTTw5gBvpSV-z239tN8uMp3tu94D3"
              ]}
              description="Kombinasi sempurna untuk variasi rasa di meja tamu. 1 Toples Classic & 1 Toples Wijsman."
              features={[
                "Gratis Ongkir Seluruh Indonesia",
                "Variasi Rasa Favorit",
                "Hemat & Lengkap",
                "Packaging Eksklusif"
              ]}
              variants={[
                { 
                  size: "Combo 300g + 300g", 
                  price: "Rp 179.000", 
                  originalPrice: "Rp 188.000",
                  priceNum: 179000, 
                  shopeeUrl: "https://shopee.co.id/product/21536298/25070397144/",
                  label: "Hemat & Variasi Rasa",
                  badge: "🔥 BEST VALUE COMBO",
                  savings: "Hemat 9RB",
                  savingsNum: 9000,
                  isHero: true
                }
              ]}
            />
          </div>
        </div>
      </section>

      {/* Mother's Trigger: Health & Quality */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="font-display text-4xl sm:text-5xl font-bold text-brand-dark mb-6">
              Terbaik Untuk <span className="text-brand-gold">Keluarga Tercinta.</span>
            </h2>
            <p className="text-brand-dark/60 text-lg">
              Karena kami tahu, Anda hanya ingin memberikan yang paling aman dan berkualitas untuk anak-anak dan orang tua di rumah.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { 
                title: "Homemade Selai Nanas", 
                desc: "Selai nanas kami produksi sendiri dari buah segar pilihan, bukan selai kiloan pabrik yang penuh pemanis buatan.",
                icon: <ChefHat size={32} />
              },
              { 
                title: "Tanpa Pengawet & Pewarna", 
                desc: "Warna kuning emas kami murni dari kuning telur omega dan butter premium. Tanpa bahan kimia berbahaya.",
                icon: <Heart size={32} />
              },
              { 
                title: "Konsistensi Rasa", 
                desc: "Setiap batch dipantau ketat untuk memastikan rasa yang sama: Lumer, Gurih, dan Wangi Wijsman yang khas.",
                icon: <CheckCircle2 size={32} />
              }
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="p-10 bg-brand-gold/5 rounded-[40px] border border-brand-gold/10 hover:bg-brand-gold/10 transition-colors group"
              >
                <div className="text-brand-gold mb-6 group-hover:scale-110 transition-transform duration-500">{item.icon}</div>
                <h3 className="text-xl font-bold text-brand-dark mb-4">{item.title}</h3>
                <p className="text-brand-dark/60 text-sm leading-relaxed">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 px-6 bg-brand-gold/5 overflow-hidden">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <span className="text-brand-gold font-bold tracking-[0.3em] uppercase text-[10px] mb-2 block">Customer Love</span>
            <h2 className="font-display text-4xl font-bold text-brand-dark">Apa Kata Mereka?</h2>
          </div>

          {/* Image Reviews Gallery */}
          <div className="mb-12">
            <p className="text-[10px] font-bold text-brand-gold uppercase tracking-widest mb-6 text-center">Bukti Nyata dari Shopee</p>
            <div className="flex gap-4 overflow-x-auto pb-6 snap-x no-scrollbar px-6 -mx-6">
              {[
                "164RtXjq9qtFsRpC6ea6x1m8bT4X3bmhv",
                "1rRGrAeDp63wdiJNkstP54O3SC3EGa48b",
                "1RrPdGsbKr_bawKyH_RG0EWg8KC7tAwhu",
                "1MNCcd_yd3BS6uPuh3zUpXUdDA6n_Xg3l",
                "1gq2MLrcN2x_fXFbI0glqoHZRmD4G-olS",
                "1e8_EjZZaMqpWUt7WBKm59Ey6jVK89dXb"
              ].map((id, i) => (
                <motion.div 
                  key={i}
                  whileTap={{ scale: 0.95 }}
                  className="w-[85vw] sm:w-[500px] rounded-xl overflow-hidden shadow-sm border border-brand-gold/10 snap-center shrink-0 bg-white"
                >
                  <img 
                    src={`https://lh3.googleusercontent.com/d/${id}`} 
                    alt={`Review ${i}`} 
                    className="w-full h-auto block"
                    referrerPolicy="no-referrer"
                  />
                </motion.div>
              ))}
            </div>
          </div>

          {/* Text Reviews Grid */}
          <div className="grid gap-4">
            <TestimonialCard 
              user="rattnade19too"
              review="Nastar terenak yg pernah kubeli. Teksturnya pas sekali tdk mudah rapuh tp lumer dimulut, manisnya pas sekali. Cantik glowing tp ttp lumer dimulut, jempoll empat deh!"
            />
            <TestimonialCard 
              user="arnolpuhzar13"
              review="Seller langsung sigap mengirimkan penggantinya tanpa banyak syarat dan tanya. Asli dengan harga segini dan pelayanan memuaskan patut diapresiasi bintang lima!"
            />
            <TestimonialCard 
              user="khairi.ahmad"
              review="Packaging premium niat banget sellernya, rapi, aman ga hancur. Ini nastar yg basah ya, lebih lembut dan lebih halus ketika dikunyah, tidak seret. Enak!"
            />
            <TestimonialCard 
              user="qonitafrozen"
              review="Kuker terbaik beda dengan kuker yg lain. Tidak sia-sia beli meskipun harganya mahal tapi puas dengan rasanya. Pertahankan rasa jangan berubah!"
            />
          </div>
        </div>
      </section>

      {/* Status & Gengsi: Suguhan Berkelas */}
      <section className="py-24 bg-brand-gold/5">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col lg:flex-row gap-16 items-center">
            <div className="lg:w-1/2 order-2 lg:order-1 hidden lg:block">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-4">
                  <img src="https://lh3.googleusercontent.com/d/1ag1aTTw5gBvpSV-z239tN8uMp3tu94D3" alt="Nastar Classic" className="rounded-3xl shadow-lg w-full object-cover" referrerPolicy="no-referrer" />
                  <img src="https://lh3.googleusercontent.com/d/1RrPdGsbKr_bawKyH_RG0EWg8KC7tAwhu" alt="Nastar Combo" className="rounded-3xl shadow-lg w-full object-cover" referrerPolicy="no-referrer" />
                </div>
                <div className="space-y-4 pt-8">
                  <img src="https://lh3.googleusercontent.com/d/1rRGrAeDp63wdiJNkstP54O3SC3EGa48b" alt="Nastar Wijsman" className="rounded-3xl shadow-lg w-full object-cover" referrerPolicy="no-referrer" />
                  <img src="https://lh3.googleusercontent.com/d/1MNCcd_yd3BS6uPuh3zUpXUdDA6n_Xg3l" alt="Nastar Review" className="rounded-3xl shadow-lg w-full object-cover" referrerPolicy="no-referrer" />
                </div>
              </div>
            </div>
            
            <div className="lg:w-1/2 order-1 lg:order-2">
              <div className="inline-block px-4 py-1.5 bg-brand-gold/10 border border-brand-gold/20 rounded-full mb-6">
                <span className="text-brand-gold text-[10px] font-bold uppercase tracking-[0.2em]">Perfect untuk Hadiah & Hampers</span>
              </div>
              <h2 className="font-display text-4xl sm:text-5xl font-bold text-brand-dark mb-6 leading-tight">
                Bukan Sekadar Kue, <br /><span className="text-brand-gold">Tapi Sebuah Kebanggaan.</span>
              </h2>
              <p className="text-brand-dark/60 text-lg mb-8 leading-relaxed">
                Jangan biarkan meja Lebaran Anda terlihat "biasa saja". Sajikan Nastar Sultan untuk tamu spesial, atau kirimkan sebagai hantaran berkelas untuk atasan dan kolega. Produk premium mencerminkan citra diri Anda.
              </p>
              
              <div className="mb-10 rounded-3xl overflow-hidden shadow-xl border-4 border-brand-gold/10 lg:hidden">
                <img 
                  src="https://lh3.googleusercontent.com/d/1ag1aTTw5gBvpSV-z239tN8uMp3tu94D3" 
                  alt="Ellass Premium Nastar" 
                  className="w-full h-auto object-cover"
                  referrerPolicy="no-referrer"
                />
              </div>

              <ul className="space-y-4 mb-10">
                {[
                  "Packaging Mewah & Elegan",
                  "Kualitas Rasa Bintang Lima",
                  "Cocok untuk Hampers Korporat",
                  "Siap Kirim Langsung ke Penerima"
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 text-brand-dark font-medium">
                    <div className="w-6 h-6 bg-brand-gold rounded-full flex items-center justify-center text-white">
                      <CheckCircle2 size={14} />
                    </div>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <button 
                onClick={() => document.getElementById('products')?.scrollIntoView({ behavior: 'smooth' })}
                className="bg-brand-dark text-white px-8 py-4 rounded-2xl font-bold hover:bg-black transition-all shadow-xl"
              >
                Pilih Paket Hampers
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Detailed USP Section */}
      <section className="py-24 px-6 bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-brand-gold font-bold tracking-[0.3em] uppercase text-[10px] mb-2 block">Why Ellass?</span>
            <h2 className="font-display text-3xl sm:text-4xl font-bold text-brand-dark">Rahasia di Balik Kemewahan Rasa</h2>
          </div>

          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-12">
              <div className="flex gap-6">
                <div className="w-12 h-12 bg-brand-gold/10 rounded-2xl flex items-center justify-center text-brand-gold shrink-0">
                  <Award size={24} />
                </div>
                <div>
                  <h4 className="font-display text-xl font-bold text-brand-dark mb-2">100% Wijsman Butter Belanda</h4>
                  <p className="text-sm text-brand-dark/60 leading-relaxed">
                    Menggunakan Wijsman Butter asli produksi B.V., Aalburg, Belanda. Memberikan aroma khas yang sangat spesial, tekstur sangat lembut, dan karakter lumer yang mewah saat dinikmati.
                  </p>
                </div>
              </div>

              <div className="flex gap-6">
                <div className="w-12 h-12 bg-brand-gold/10 rounded-2xl flex items-center justify-center text-brand-gold shrink-0">
                  <Star size={24} />
                </div>
                <div>
                  <h4 className="font-display text-xl font-bold text-brand-dark mb-2">Kilau Emas Telur Omega 3</h4>
                  <p className="text-sm text-brand-dark/60 leading-relaxed">
                    Tampilan "Glowing" seperti kaca dengan warna kuning emas alami dari olesan Telur Omega 3. Kami menjamin 100% tanpa pewarna buatan untuk kesehatan Anda.
                  </p>
                </div>
              </div>

              <div className="flex gap-6">
                <div className="w-12 h-12 bg-brand-gold/10 rounded-2xl flex items-center justify-center text-brand-gold shrink-0">
                  <CheckCircle2 size={24} />
                </div>
                <div>
                  <h4 className="font-display text-xl font-bold text-brand-dark mb-2">Selai Nanas Produksi Sendiri</h4>
                  <p className="text-sm text-brand-dark/60 leading-relaxed">
                    Selai nanas 100% diproduksi sendiri dengan standar kualitas ketat. Karakter lembut, tidak terlalu kering & tidak terlalu basah. Rasa asam-manis yang sangat pas di lidah.
                  </p>
                </div>
              </div>

              <div className="flex gap-6">
                <div className="w-12 h-12 bg-brand-gold/10 rounded-2xl flex items-center justify-center text-brand-gold shrink-0">
                  <Clock size={24} />
                </div>
                <div>
                  <h4 className="font-display text-xl font-bold text-brand-dark mb-2">Fresh From The Oven</h4>
                  <p className="text-sm text-brand-dark/60 leading-relaxed">
                    Nastar kami 100% Fresh. Setiap produk dibuat sesaat setelah pesanan Anda masuk ke sistem kami, memastikan kesegaran maksimal sampai di tangan Anda.
                  </p>
                </div>
              </div>
            </div>
            
            <div className="relative">
              <div className="aspect-[4/5] rounded-[40px] overflow-hidden shadow-2xl border-8 border-brand-gold/5">
                <img 
                  src="https://lh3.googleusercontent.com/d/1ag1aTTw5gBvpSV-z239tN8uMp3tu94D3" 
                  alt="Ellass Premium Nastar" 
                  className="w-full h-full object-cover"
                  referrerPolicy="no-referrer"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison Section */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="font-display text-3xl font-bold text-brand-dark">Bingung Pilih yang Mana?</h2>
            <p className="text-brand-dark/60 text-sm mt-2">Bandingkan dan pilih sesuai selera Anda</p>
          </div>
          
          <div className="grid grid-cols-3 gap-2 sm:gap-4">
            <div className="col-span-1 pt-12 space-y-6">
              <div className="h-10 flex items-center text-[10px] font-bold uppercase text-brand-dark/40">Butter</div>
              <div className="h-10 flex items-center text-[10px] font-bold uppercase text-brand-dark/40">Tekstur</div>
              <div className="h-10 flex items-center text-[10px] font-bold uppercase text-brand-dark/40">Aroma</div>
              <div className="h-10 flex items-center text-[10px] font-bold uppercase text-brand-dark/40">Selai</div>
            </div>
            
            <div className="col-span-1 bg-brand-gold/5 p-4 rounded-2xl border border-brand-gold/10 text-center space-y-6">
              <div className="font-display font-bold text-xs text-brand-gold mb-2">Classic</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Premium Blend</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Lembut & Pas</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Harum Susu</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Nanas Pilihan</div>
            </div>

            <div className="col-span-1 bg-brand-dark p-4 rounded-2xl text-center space-y-6 text-white relative overflow-hidden">
              <div className="absolute top-0 right-0 bg-brand-gold text-[6px] px-2 py-1 font-bold">REKOMENDASI</div>
              <div className="font-display font-bold text-xs text-brand-gold mb-2">Full Wijsman</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">100% Wijsman</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Sangat Lumer</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Wangi Mewah</div>
              <div className="h-10 flex items-center justify-center text-[10px] font-medium">Nanas Pilihan</div>
            </div>
          </div>
        </div>
      </section>

      {/* Guarantee & FAQ Section */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12">
            {/* Guarantee */}
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              className="bg-brand-gold/10 p-8 rounded-[32px] border border-brand-gold/20"
            >
              <div className="w-16 h-16 bg-brand-gold rounded-2xl flex items-center justify-center mb-6 text-white shadow-lg">
                <ShieldCheck size={32} />
              </div>
              <h3 className="font-display text-2xl font-bold text-brand-dark mb-4">Garansi Kepuasan 100%</h3>
              <p className="text-sm text-brand-dark/70 leading-relaxed mb-6">
                Kami sangat percaya dengan kualitas nastar kami. Jika toples pecah saat pengiriman atau rasa tidak sesuai ekspektasi premium, <strong>kami ganti baru atau uang kembali 100%.</strong>
              </p>
              <div className="flex items-center gap-3 text-brand-gold font-bold text-xs">
                <CheckCircle2 size={16} />
                <span>Tanpa Ribet, Tanpa Syarat Sulit.</span>
              </div>
            </motion.div>

            {/* FAQ */}
            <div className="space-y-6">
              <h3 className="font-display text-2xl font-bold text-brand-dark mb-8">Pertanyaan Umum</h3>
              {[
                { q: "Berapa lama daya tahan nastar?", a: "Nastar kami tahan hingga 3-4 bulan di suhu ruang karena proses pemanggangan yang sempurna dan higienis." },
                { q: "Apakah produk ini Halal?", a: "Ya, 100% Halal. Kami hanya menggunakan bahan-bahan bersertifikat halal dan proses yang bersih." },
                { q: "Bisa kirim ke luar pulau?", a: "Sangat bisa! Dengan Triple Safety Delivery, kami sudah mengirim ke seluruh Indonesia dengan aman." }
              ].map((faq, i) => (
                <div key={i} className="border-b border-brand-gold/10 pb-4">
                  <h4 className="font-bold text-sm text-brand-dark mb-2 flex items-center gap-2">
                    <span className="text-brand-gold">Q:</span> {faq.q}
                  </h4>
                  <p className="text-xs text-brand-dark/60 leading-relaxed">
                    <span className="text-brand-gold font-bold">A:</span> {faq.a}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Safety Delivery Section */}
      <section className="py-20 px-6 bg-brand-dark text-white">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-12">
            <Truck size={48} className="mx-auto mb-6 text-brand-gold" />
            <h2 className="font-display text-3xl font-bold mb-4">Triple Safety Delivery</h2>
            <p className="text-brand-gold/60 text-sm leading-relaxed">
              Kami menjaga konsistensi rasa & keamanan pengiriman dengan 5 tahap perlindungan maksimal.
            </p>
          </div>

          <div className="space-y-6">
            {[
              "Toples dibungkus bubble wrap tebal.",
              "Dimasukkan ke dalam box pelindung khusus.",
              "Box dilindungi dengan Air Pack tambahan.",
              "Dibungkus kembali dengan bubble wrap luar.",
              "Paket dilaminasi total sebelum dikirim.",
              "Biaya pengiriman premium ini 100% GRATIS."
            ].map((step, i) => (
              <div key={i} className="flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/10">
                <div className="w-8 h-8 rounded-full bg-brand-gold flex items-center justify-center font-bold text-xs shrink-0">
                  {i + 1}
                </div>
                <p className="text-sm font-medium">{step}</p>
              </div>
            ))}
          </div>

          <div className="mt-12 p-8 bg-brand-gold/10 rounded-[40px] border border-brand-gold/20 text-center max-w-2xl mx-auto">
            <p className="text-[#FFFDF5]/80 text-sm leading-relaxed mb-6 italic">
              "Sekarang alasan terbaik untuk Anda menikmati Golden Nastar dari Ellass sudah Anda temukan. Bahan premium, Fresh from the oven, dan kemewahan rasa. Langsung lakukan pesanan dengan gratis pengiriman sekarang juga. Jangan khawatir, paket Anda aman dengan Triple Safety Packaging kami."
            </p>
            <div className="flex flex-col items-center">
              <p className="text-[#FFFDF5] font-bold">Lot of Love,</p>
              <p className="font-display text-2xl font-bold text-brand-gold mt-1">Ellas</p>
              <p className="text-[10px] text-[#FFFDF5]/40 uppercase tracking-[0.2em] mt-1">Founder Of Ellas Pastry</p>
            </div>
          </div>
        </div>
      </section>

      {/* Sticky Mobile CTA */}
      <motion.div 
        initial={{ y: 100 }}
        animate={{ y: showStickyCta ? 0 : 100 }}
        className="fixed bottom-0 left-0 right-0 z-[100] p-4 bg-white/80 backdrop-blur-lg border-t border-brand-gold/10 md:hidden"
      >
        <button 
          onClick={() => {
            const el = document.getElementById('products');
            el?.scrollIntoView({ behavior: 'smooth' });
          }}
          className="w-full bg-brand-gold text-white py-4 rounded-2xl font-bold flex items-center justify-center gap-3 shadow-xl"
        >
          <ShoppingCart size={20} />
          <span>Pilih & Pesan Sekarang</span>
        </button>
      </motion.div>

      {/* Footer */}
      <footer className="py-12 px-6 text-center">
        <div className="flex flex-col items-center justify-center mb-6">
          <img 
            src="https://lh3.googleusercontent.com/d/170FV7iJPgqvU872pfBFHgs5U53ANliCB" 
            alt="Ellass Logo" 
            className="h-20 w-auto object-contain"
            referrerPolicy="no-referrer"
          />
        </div>
        <div className="flex justify-center gap-6 mb-4">
          <a href="https://www.instagram.com/ellass.id/" target="_blank" rel="noopener noreferrer" className="text-brand-dark hover:text-brand-gold transition-colors"><Instagram size={20} /></a>
          <a href="https://wa.me/628133354431" target="_blank" rel="noopener noreferrer" className="text-brand-dark hover:text-brand-gold transition-colors"><MessageCircle size={20} /></a>
        </div>
        <p className="text-[10px] text-brand-dark/60 font-medium mb-4 max-w-[200px] mx-auto leading-relaxed">
          Perum Green Garder Regency D2, Tanggul - Jember
        </p>
        <p className="text-[10px] text-brand-dark/40 uppercase tracking-widest">© 2024 Ellass Pastry. Jakarta.</p>
      </footer>

    </div>
  );
}