import { MessageCircle, ShoppingCart, X } from 'lucide-react'; import { useEffect, useState } from 'react'; import type { Product } from '@/types'; // ─── Config ─────────────────────────────────────────────────────────────────── // Change WHATSAPP_NUMBER to your number (digits only, include country code, no + or spaces) // Example: '8801712345678' for Bangladesh const WHATSAPP_NUMBER = '8801XXXXXXXXX'; // ─── Types ──────────────────────────────────────────────────────────────────── type GarmentType = 'panjabi' | 'shirt' | 'kabli'; interface Garment { type: GarmentType; label: string; labelBn: string; viewBox: string; // fill-rule="evenodd": outer silhouette + neck hole subpath combined path: string; } // ─── Garment SVG path definitions ───────────────────────────────────────────── // Each path = outer garment silhouette (CW) + neck opening hole (CW, evenodd creates transparent hole) // To customize shapes, edit the 'd' strings below. const GARMENTS: Garment[] = [ { type: 'panjabi', label: 'Panjabi', labelBn: 'পাঞ্জাবি', viewBox: '0 0 280 480', // Long kurta: long sleeves, long body to knee, round neck path: 'M 140,22 L 105,40 Q 60,52 35,72 L 20,85 L 4,195 L 38,207 L 45,230 L 42,458 L 238,458 L 235,230 L 242,207 L 276,195 L 260,85 Q 220,52 175,40 L 140,22 Z' + ' M 140,40 Q 162,46 170,62 Q 160,84 140,90 Q 120,84 110,62 Q 118,46 140,40 Z', }, { type: 'shirt', label: 'Shirt', labelBn: 'শার্ট', viewBox: '0 0 280 410', // Regular dress shirt: long sleeves, hip-length, V-neck opening path: 'M 140,22 L 106,40 Q 62,52 38,72 L 22,84 L 5,192 L 40,204 L 48,228 L 46,388 L 234,388 L 232,228 L 240,204 L 275,192 L 258,84 Q 218,52 174,40 L 140,22 Z' + ' M 115,45 L 140,80 L 165,45 Z', }, { type: 'kabli', label: 'Kabli', labelBn: 'কাবলি', viewBox: '0 0 280 430', // Sleeveless vest: curved armholes, hip-length, V-neck opening path: 'M 140,22 L 108,40 Q 72,50 52,68 L 36,90 Q 22,140 28,190 L 34,215 L 32,408 L 248,408 L 246,215 L 252,190 Q 258,140 244,90 L 228,68 Q 208,50 172,40 L 140,22 Z' + ' M 112,45 L 140,86 L 168,45 Z', }, ]; // ─── WhatsApp SVG icon ──────────────────────────────────────────────────────── function WhatsAppIcon() { return ( ); } // ─── Garment SVG renderer ───────────────────────────────────────────────────── function GarmentSVG({ garment, fabricUrl, productName, }: { garment: Garment; fabricUrl: string; productName: string; }) { const id = `fp-${garment.type}`; const [, , vwStr, vhStr] = garment.viewBox.split(' '); const vw = Number(vwStr); const vh = Number(vhStr); return ( ); } // ─── Main Modal ─────────────────────────────────────────────────────────────── export default function FabricPreviewModal({ product, onClose, }: { product: Product | null; onClose: () => void; }) { const [garmentType, setGarmentType] = useState('panjabi'); const garment = GARMENTS.find((g) => g.type === garmentType)!; // Lock scroll & handle Escape key useEffect(() => { if (!product) return; document.body.style.overflow = 'hidden'; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => { document.body.style.overflow = ''; document.removeEventListener('keydown', onKey); }; }, [product, onClose]); // Reset to panjabi whenever a new product is opened useEffect(() => { setGarmentType('panjabi'); }, [product?.id]); if (!product) return null; const img = product.images?.find((i) => i.is_primary) ?? product.images?.[0]; const fabricUrl = img ? `/storage/${img.image}` : ''; const garmentLabel = GARMENTS.find((g) => g.type === garmentType)?.label ?? 'Panjabi'; const waMsg = encodeURIComponent( `Hello! I am interested in *${product.name}*.\n\nI previewed it as a *${garmentLabel}* on your website and would like to discuss ordering or custom stitching. Please share details and pricing.`, ); const waUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${waMsg}`; return (