'use client';

import { useState } from 'react';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import {
  ShoppingCart,
  X,
  Sparkles,
  Minus,
  Plus,
  Package,
  Wallet,
  Truck,
} from 'lucide-react';
import { SiShopee } from 'react-icons/si';
import { useProducts } from '@/hooks';
import { useIsAdmin, useUser } from '@/store/auth.store';
import { cn, formatIDR } from '@/lib/utils';
import type { Product, ProductVariant } from '@/lib/services/product.service';

import Image from 'next/image';
import { Button } from '@/components/ui/button';

// ── Helpers ────────────────────────────────────────────────────────────
function getStockMeta(v: ProductVariant) {
  if (v.is_out_of_stock)
    return { label: 'Habis', color: 'text-rose-700', bg: 'bg-rose-100' };
  if (v.is_low_stock)
    return {
      label: 'Terbatas',
      color: 'text-amber-700',
      bg: 'bg-amber-100',
    };
  return {
    label: `Sisa ${v.stock}`,
    color: 'text-emerald-700',
    bg: 'bg-emerald-100',
  };
}

// ── Quick-add bottom sheet / Modal ─────────────────────────────────────
function QuickAddSheet({
  product,
  onClose,
}: {
  product: Product;
  onClose: () => void;
}) {
  const user = useUser();
  const [selected, setSelected] = useState<ProductVariant>(
    product.variants.find((v) => !v.is_out_of_stock) ?? product.variants[0]
  );
  const [qty, setQty] = useState(1);

  const handleAdd = () => {
    window.open('https://shopee.co.id/garamcapkapal', '_blank');
    onClose();
  };

  const handleBuyNow = () => {
    window.open('https://shopee.co.id/garamcapkapal', '_blank');
    onClose();
  };

  const stockMeta = getStockMeta(selected);

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center sm:p-4">
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      <motion.div
        initial={{ y: '100%', opacity: 0, scale: 0.95 }}
        animate={{ y: 0, opacity: 1, scale: 1 }}
        exit={{ y: '100%', opacity: 0, scale: 0.95 }}
        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
        className="relative w-full sm:max-w-md bg-white/90 backdrop-blur-2xl border border-white/50 overflow-hidden shadow-2xl rounded-t-3xl sm:rounded-3xl"
      >
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-40 bg-yellow-400/20 blur-3xl pointer-events-none rounded-full" />

        <div className="sm:hidden flex justify-center pt-4 pb-2">
          <div className="w-12 h-1.5 bg-gray-300/50 rounded-full" />
        </div>

        <div className="p-6 pt-2 sm:pt-6">
          <div className="flex items-start gap-4 mb-6">
            <div className="w-20 h-20 bg-white/50 border border-white/50 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden shadow-sm">
              {product.primary_image_url ? (
                <Image
                  src={product.primary_image_url}
                  alt={product.name}
                  className="w-full h-full object-cover grayscale-20"
                  width={500}
                  height={500}
                />
              ) : (
                <Package className="w-8 h-8 text-gray-500" />
              )}
            </div>
            <div className="flex-1 min-w-0 pt-1">
              <p className="font-bold text-gray-900 text-base leading-snug line-clamp-2 tracking-wide mb-1">
                {product.name}
              </p>
              <div className="flex items-center gap-2 mb-2">
                <span className="text-[10px] bg-gray-100 px-2 py-0.5 rounded-md text-gray-500 font-mono font-medium tracking-widest border border-gray-200">
                  {product.sku}
                </span>
              </div>
              <p className="text-xl font-black text-yellow-600 tracking-tight">
                {formatIDR(
                  user?.user_type === 'agen' && selected.price_distributor
                    ? Number(selected.price_distributor)
                    : Number(selected.price)
                )}
              </p>
            </div>
            <button
              onClick={onClose}
              className="p-2 rounded-full bg-white/50 border border-white/50 shadow-sm hover:bg-white text-gray-500 hover:text-gray-900 transition-colors shrink-0"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

          {product.variants.length > 1 && (
            <div className="mb-6">
              <p className="text-xs font-bold text-gray-600 tracking-wide mb-3">
                Pilih Ukuran / Varian
              </p>
              <div className="flex gap-2.5 flex-wrap">
                {product.variants.map((v) => (
                  <button
                    key={v.id}
                    disabled={v.is_out_of_stock}
                    onClick={() => {
                      setSelected(v);
                      setQty(1);
                    }}
                    className={cn(
                      'px-4 py-2.5 rounded-xl text-xs font-bold tracking-wide transition-all border',
                      v.is_out_of_stock
                        ? 'border-gray-200 text-gray-400 bg-gray-50 cursor-not-allowed line-through'
                        : selected.id === v.id
                          ? 'border-yellow-400 bg-yellow-50 text-yellow-700 shadow-sm'
                          : 'border-white/50 text-gray-600 bg-white/50 hover:border-yellow-400 hover:text-gray-900 shadow-sm'
                    )}
                  >
                    {v.name}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="flex items-center justify-between mb-8">
            <div className="flex items-center bg-white/50 border border-white/50 shadow-sm rounded-xl p-1">
              <button
                onClick={() => setQty((q) => Math.max(1, q - 1))}
                className="p-2.5 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900 transition-colors"
              >
                <Minus className="w-4 h-4" />
              </button>
              <span className="w-12 text-center font-bold text-gray-900 text-base tabular-nums">
                {qty}
              </span>
              <button
                onClick={() => setQty((q) => Math.min(q + 1, selected.stock))}
                disabled={qty >= selected.stock || selected.is_out_of_stock}
                className="p-2.5 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900 disabled:opacity-30 transition-colors"
              >
                <Plus className="w-4 h-4" />
              </button>
            </div>
            <span
              className={cn(
                'text-[11px] font-bold px-3 py-1.5 rounded-lg uppercase tracking-widest',
                stockMeta.bg,
                stockMeta.color
              )}
            >
              {stockMeta.label}
            </span>
          </div>

          <div className="flex flex-col sm:flex-row gap-3">
            {!selected.is_out_of_stock && (
              <Button
                variant="outline"
                onClick={handleBuyNow}
                className="flex-1 border-2 border-yellow-500 text-yellow-600 font-bold uppercase tracking-wider hover:bg-yellow-50 hover:text-yellow-700 hover:border-yellow-600 h-auto py-4 rounded-xl"
              >
                Beli di Shopee
              </Button>
            )}
            <motion.button
              whileTap={{ scale: 0.98 }}
              onClick={handleAdd}
              disabled={selected.is_out_of_stock}
              className={cn(
                'flex-1 py-4 rounded-xl text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2.5 transition-all shadow-lg',
                selected.is_out_of_stock
                  ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200 shadow-none'
                  : 'bg-[#FFD738] hover:bg-yellow-400 text-[#1C1D1F] shadow-md shadow-[#FFD738]/20'
              )}
            >
              <span className="flex items-center gap-2">
                <ShoppingCart className="w-5 h-5" />
                {selected.is_out_of_stock ? 'Stok Habis' : `Ke Shopee`}
              </span>
            </motion.button>
          </div>
        </div>
      </motion.div>
    </div>
  );
}

// ── Product Card ───────────────────────────────────────────────────────
function ProductCard({
  product,
  index,
  onQuickAdd,
}: {
  product: Product;
  index: number;
  onQuickAdd: (p: Product) => void;
}) {
  const isAdmin = useIsAdmin();
  const user = useUser();

  const isOutOfStock = product.variants.every((v) => v.is_out_of_stock);

  let minPrice = product.min_price;
  let maxPrice = product.max_price;

  if (user?.user_type === 'agen') {
    const prices = product.variants.map((v) =>
      Number(v.price_distributor || v.price)
    );
    if (prices.length > 0) {
      minPrice = Math.min(...prices);
      maxPrice = Math.max(...prices);
    }
  }

  const priceLabel =
    minPrice === maxPrice
      ? formatIDR(minPrice)
      : `${formatIDR(minPrice)} - ${formatIDR(maxPrice)}`;

  const handleBuyNow = (e: React.MouseEvent) => {
    e.preventDefault();
    onQuickAdd(product);
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.05, duration: 0.4 }}
      className="group bg-white border border-gray-200 hover:border-[#FFD738] rounded-[16px] md:rounded-[20px] flex flex-col overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 relative p-2.5 md:p-4"
    >
      <Link
        href={`/products/${product.slug}`}
        className="block relative mb-2 md:mb-4"
      >
        {/* Official Store Badge & Icon */}
        <div className="absolute top-0 left-0 right-0 flex justify-between items-start z-10 pointer-events-none">
          <div className="bg-[#FFD738] text-[#1C1D1F] text-[8px] md:text-[10px] font-black px-2 py-0.5 md:px-3 md:py-1 rounded-full uppercase tracking-wider shadow-sm pointer-events-auto">
            Official Store
          </div>
          <div className="w-6 h-6 md:w-8 md:h-8 pointer-events-auto">
            <Image
              src="/images/mascots/icon/capt-yodi-icon.avif"
              alt="Capt Yodi"
              width={32}
              height={32}
              className="object-contain drop-shadow-md"
            />
          </div>
        </div>

        {/* Product Image */}
        <div className="relative h-36 md:h-48 lg:h-64 mt-6 md:mt-8 flex items-center justify-center bg-white rounded-xl">
          {product.primary_image_url ? (
            <Image
              src={product.primary_image_url}
              alt={product.name}
              className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-500"
              width={500}
              height={500}
            />
          ) : (
            <Package className="w-10 h-10 md:w-16 md:h-16 text-gray-300" />
          )}
          {isOutOfStock && (
            <div className="absolute inset-0 bg-white/60 backdrop-blur-[2px] z-10 flex items-center justify-center rounded-xl">
              <span className="bg-rose-500 text-white text-[10px] md:text-xs font-bold px-2 md:px-4 py-1 md:py-1.5 rounded-full uppercase tracking-widest shadow-lg">
                Stok Habis
              </span>
            </div>
          )}
        </div>
      </Link>

      <div className="flex flex-col flex-1 px-0.5 md:px-1">
        {/* Category */}
        <div className="text-[#D08700] text-[9px] md:text-[11px] lg:text-xs font-black uppercase tracking-[0.1em] mb-1.5 md:mb-2">
          {product.category?.name || 'Garam Dapur'}
        </div>

        {/* Product Name */}
        <Link
          href={`/products/${product.slug}`}
          className="font-bold text-[13px] md:text-xl lg:text-[28px] text-[#101828] leading-tight line-clamp-2 hover:text-[#D08700] transition-colors mb-3 md:mb-4 lg:mb-6"
        >
          {product.name}
        </Link>

        {/* Price & Action */}
        <div className="mt-auto flex flex-col gap-2.5 md:gap-4">
          <div className="flex items-center justify-between gap-1">
            <p className="text-sm md:text-lg lg:text-2xl font-bold text-[#101828]">
              {priceLabel}
            </p>
            {!isAdmin && (
              <button
                onClick={(e) => {
                  e.preventDefault();
                  onQuickAdd(product);
                }}
                disabled={isOutOfStock}
                className={cn(
                  'w-7 h-7 md:w-10 md:h-10 lg:w-12 lg:h-12 rounded-full flex items-center justify-center transition-all shrink-0',
                  isOutOfStock
                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                    : 'bg-[#FFD738] text-[#1C1D1F] hover:bg-yellow-400 hover:scale-105 active:scale-95 shadow-md shadow-[#FFD738]/30'
                )}
              >
                <ShoppingCart className="w-3.5 h-3.5 md:w-5 md:h-5 lg:w-6 lg:h-6" />
              </button>
            )}
          </div>

          {!isAdmin && (
            <button
              onClick={handleBuyNow}
              disabled={isOutOfStock}
              className={cn(
                'w-full py-2.5 md:py-3.5 lg:py-4 rounded-lg md:rounded-xl text-[10px] md:text-sm font-black uppercase tracking-wider transition-all',
                isOutOfStock
                  ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                  : 'bg-[#FFD738] text-[#6E5904] hover:bg-yellow-400 shadow-[0_4px_10px_rgba(255,215,56,0.3)] active:scale-[0.98]'
              )}
            >
              Beli Sekarang
            </button>
          )}
        </div>
      </div>
    </motion.div>
  );
}

// ── Page ───────────────────────────────────────────────────────────────
export default function ProductsPage() {
  const [quickAddProduct, setQuickAddProduct] = useState<Product | null>(null);

  const { data: productsData, isLoading } = useProducts();

  const products = (productsData?.data ?? []).sort((a, b) => {
    const catA = a.category?.name?.toLowerCase() ?? '';
    const catB = b.category?.name?.toLowerCase() ?? '';

    const isCapkapalA = catA === 'garam capkapal' || catA === 'garam cap kapal';
    const isCapkapalB = catB === 'garam capkapal' || catB === 'garam cap kapal';

    if (isCapkapalA && !isCapkapalB) return -1;
    if (!isCapkapalA && isCapkapalB) return 1;

    const weightA = Math.min(...a.variants.map((v) => Number(v.weight) || 0));
    const weightB = Math.min(...b.variants.map((v) => Number(v.weight) || 0));
    return weightA - weightB;
  });

  return (
    <>
      <div className="min-h-screen bg-white text-gray-900 relative">
        {/* ── Hero Banner ── */}
        <div className="relative w-full aspect-[4/3] md:aspect-video xl:aspect-[1710/846] bg-[#e0f2fe] z-20">
          <Image
            src="/images/products/assets/product-banner.avif"
            alt="Produk Garam Cap Kapal Banner"
            fill
            className="object-cover object-center"
            priority
          />

          <div className="absolute inset-0 max-w-7xl mx-auto px-4 sm:px-6 pointer-events-none">
            <div className="relative w-full h-full flex flex-col justify-end items-end pb-8 md:pb-16 gap-4">
              {/* Badges Container */}
              <div className="flex items-center justify-end w-full pr-4 md:pr-12 relative z-20">
                <div className="relative flex items-center -mr-4 md:-mr-8">
                  <div className="relative w-24 h-24 md:w-32 md:h-32 lg:w-44 lg:h-44 rounded-full flex items-center justify-center z-0">
                    <Image
                      src="/images/products/assets/logo-halal.avif"
                      alt="Halal Logo"
                      fill
                      className="object-contain p-2"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="absolute hidden md:block bottom-4 right-4 md:bottom-12 md:right-12 xl:-bottom-48 xl:right-24 w-[300px] md:w-[385px] h-[220px] md:h-[278px] z-10 overflow-hidden">
            <Image
              src="/images/products/assets/card-hero.avif"
              alt="Card Background"
              fill
              className="object-cover"
            />
          </div>
        </div>

        {/* ── Title Section ── */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-12 md:py-20 relative z-10">
          <div className="flex flex-col items-center md:items-start uppercase">
            <div className="mb-4 md:mb-6">
              <motion.h2
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.1 }}
                className="text-4xl sm:text-5xl md:text-[64px] lg:text-[72px] font-title uppercase tracking-wide flex flex-row items-center gap-3 sm:gap-4 md:gap-6 mb-2"
              >
                <div className="relative shrink-0">
                  {/* Back solid text */}
                  <span
                    className="absolute top-[3px] left-[3px] md:top-[4px] md:left-[4px] text-[#6E5904] leading-[1.1] whitespace-nowrap"
                    aria-hidden="true"
                  >
                    PRODUK
                  </span>
                  {/* Front hollow text */}
                  <span
                    className="relative leading-[1.1] block whitespace-nowrap"
                    style={{
                      WebkitTextStroke: '2px #1C1D1F',
                      color: 'transparent',
                    }}
                  >
                    PRODUK
                  </span>
                </div>

                <div className="relative shrink-0">
                  {/* Back solid text */}
                  <span
                    className="absolute top-[3px] left-[3px] md:top-[4px] md:left-[4px] text-[#FFD738] leading-[1.1] whitespace-nowrap"
                    aria-hidden="true"
                  >
                    KAMI
                  </span>
                  {/* Front hollow text */}
                  <span
                    className="relative leading-[1.1] block whitespace-nowrap"
                    style={{
                      WebkitTextStroke: '2px #1C1D1F',
                      color: 'transparent',
                    }}
                  >
                    KAMI
                  </span>
                </div>
              </motion.h2>
            </div>
            <p className="max-w-4xl text-base md:text-lg lg:text-2xl leading-relaxed text-black normal-case mt-4 lg:mt-0 text-center md:text-start">
              <span className="font-bold">Garam Cap Kapal</span> merupakan
              produk garam yang dilengkapi dengan iodium, yang diproduksi
              berdasarkan Standar Nasional Indonesia dan sempurna untuk
              menambahkan rasa masakan maupun membuat kue serta dapat langsung
              dikonsumsi saat makan.
            </p>
          </div>
        </div>

        {/* ── Product grid ── */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 pb-20 relative z-10">
          {/* Skeleton */}
          {isLoading && (
            <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6 lg:gap-8">
              {Array.from({ length: 6 }).map((_, i) => (
                <div
                  key={i}
                  className="bg-white border border-gray-200 rounded-[16px] md:rounded-[20px] animate-pulse overflow-hidden p-2.5 md:p-4"
                >
                  <div className="h-36 md:h-48 lg:h-64 bg-gray-200 rounded-xl mb-2 md:mb-4" />
                  <div className="px-1 space-y-2 md:space-y-4">
                    <div className="h-2.5 md:h-3 bg-gray-200 rounded w-1/4" />
                    <div className="h-4 md:h-6 bg-gray-200 rounded w-3/4" />
                    <div className="h-3 md:h-5 bg-gray-200 rounded w-1/2 mt-2 md:mt-4" />
                    <div className="h-8 md:h-12 bg-gray-200 rounded-lg md:rounded-xl w-full mt-2 md:mt-4" />
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Empty */}
          {!isLoading && products.length === 0 && (
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              className="flex flex-col items-center py-24 text-center bg-white border border-gray-200 rounded-[20px]"
            >
              <div className="w-20 h-20 bg-gray-50 border border-gray-200 rounded-full flex items-center justify-center mb-6">
                <Package className="w-10 h-10 text-gray-400" />
              </div>
              <p className="font-black text-gray-900 text-2xl tracking-tight mb-2">
                Produk Tidak Ditemukan
              </p>
              <p className="text-gray-600 text-sm max-w-sm">
                Belum ada produk yang tersedia saat ini.
              </p>
            </motion.div>
          )}

          {/* Grid */}
          {!isLoading && products.length > 0 && (
            <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6 lg:gap-8">
              {products.map((product, i) => (
                <ProductCard
                  key={product.id}
                  product={product}
                  index={i}
                  onQuickAdd={setQuickAddProduct}
                />
              ))}
            </div>
          )}
        </div>

        {/* ── Footer Banner Section ── */}
        <div className="w-full bg-white relative -mb-[1px]">
          <svg
            viewBox="0 0 1440 120"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="w-full h-auto text-black"
            preserveAspectRatio="none"
          >
            <path
              d="M0,60 Q120,100 240,60 T480,60 T720,60 T960,60 T1200,60 T1440,60 V120 H0 Z"
              fill="currentColor"
            />
          </svg>
        </div>
        <div className="relative bg-black text-white overflow-hidden pb-52">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 pt-10 grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12 items-center">
            {/* Column 1: Mascots */}
            <div className="flex justify-center lg:justify-start relative">
              <div className="absolute -top-10 -left-10 text-[#FFD738] opacity-50">
                <Sparkles className="w-8 h-8" />
              </div>
              <Image
                src="/images/products/assets/group-happy.avif"
                alt="Mascots"
                width={600}
                height={400}
                className="w-[80%] max-w-[400px] lg:max-w-[500px] object-contain drop-shadow-2xl z-10"
              />
              <div className="absolute -bottom-10 -right-10 text-[#FFD738] opacity-50">
                <Sparkles className="w-12 h-12" />
              </div>
            </div>

            {/* Column 2: Info boxes */}
            <div className="flex flex-col gap-6 md:gap-8 w-full max-w-[400px] mx-auto lg:mx-0">
              {/* Box 1 */}
              <div className="relative w-full">
                <div className="absolute inset-0 bg-white rounded-xl translate-x-1.5 translate-y-1.5 md:translate-x-2 md:translate-y-2"></div>
                <div className="relative bg-[#FFD738] border-2 border-[#1C1D1F] rounded-xl p-4 md:p-5 flex items-center gap-4">
                  <div className="shrink-0">
                    <Wallet className="w-8 h-8 md:w-10 md:h-10 text-[#1C1D1F]" />
                  </div>
                  <div>
                    <h3 className="font-title text-xl md:text-2xl text-[#1C1D1F] leading-none mb-1">
                      PASTI
                    </h3>
                    <p className="text-[10px] md:text-xs font-bold uppercase tracking-wider text-[#1C1D1F]">
                      30 Hari Garansi Uang Kembali
                    </p>
                  </div>
                </div>
              </div>

              {/* Box 2 */}
              <div className="relative w-full">
                <div className="absolute inset-0 bg-white rounded-xl translate-x-1.5 translate-y-1.5 md:translate-x-2 md:translate-y-2"></div>
                <div className="relative bg-[#FFD738] border-2 border-[#1C1D1F] rounded-xl p-4 md:p-5 flex items-center gap-4">
                  <div className="shrink-0">
                    <Truck className="w-8 h-8 md:w-10 md:h-10 text-[#1C1D1F]" />
                  </div>
                  <div>
                    <h3 className="font-title text-xl md:text-2xl text-[#1C1D1F] leading-none mb-1">
                      GRATIS PENGIRIMAN
                    </h3>
                    <p className="text-[10px] md:text-xs uppercase tracking-wider text-[#1C1D1F]">
                      Gratis Biaya Ongkir Hingga Rp500.000
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Column 3: Marketplaces */}
            <div className="flex flex-col gap-6 md:gap-8 items-center lg:items-start text-center lg:text-left mt-8 lg:mt-0">
              <h3 className="text-2xl md:text-3xl text-[#FFD738] leading-tight font-title">
                PRODUK KAMI
                <br />
                JUGA TERSEDIA DI
              </h3>
              <div className="flex gap-4 md:gap-6">
                <Link
                  target="_blank"
                  href="https://www.blibli.com/brand/cap-kapal"
                  className="w-16 h-16 md:w-20 md:h-20 bg-[#FFD738] rounded-full flex items-center justify-center hover:scale-110 transition-transform shadow-lg"
                >
                  <div className="relative w-8 h-8 md:w-10 md:h-10">
                    <Image
                      src="/images/products/assets/blibli-logo.avif"
                      alt="Blibli"
                      fill
                      className="object-contain"
                    />
                  </div>
                </Link>
                <Link
                  href="https://shopee.co.id/garamcapkapal"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-16 h-16 md:w-20 md:h-20 bg-[#FFD738] rounded-full flex items-center justify-center hover:scale-110 transition-transform shadow-lg"
                >
                  <SiShopee className="w-8 h-8 md:w-10 md:h-10 text-[#1C1D1F]" />
                </Link>
                <Link
                  target="_blank"
                  href="https://www.tokopedia.com/garamcapkapal"
                  className="w-16 h-16 md:w-20 md:h-20 bg-[#FFD738] rounded-full flex items-center justify-center hover:scale-110 transition-transform shadow-lg"
                >
                  <div className="relative w-8 h-8 md:w-10 md:h-10">
                    <Image
                      src="/images/products/assets/tokopedia-logo.avif"
                      alt="Tokopedia"
                      fill
                      className="object-contain"
                    />
                  </div>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Quick add sheet */}
      <AnimatePresence>
        {quickAddProduct && (
          <QuickAddSheet
            product={quickAddProduct}
            onClose={() => setQuickAddProduct(null)}
          />
        )}
      </AnimatePresence>
    </>
  );
}