Avigliana Basket Merch 25\/26<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap\"\r\n rel=\"stylesheet\">\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Urbanist', 'sans-serif'],\r\n },\r\n colors: {\r\n avigliana: {\r\n green: '#90ee90',\r\n darkGreen: '#0d471b',\r\n darkerGreen: '#082f12',\r\n card: '#2a2a2a',\r\n bg: '#1a1a1a',\r\n input: '#3a3a3a',\r\n }\r\n },\r\n animation: {\r\n 'fade-in-up': 'fadeInUp 0.3s ease-out forwards',\r\n },\r\n keyframes: {\r\n fadeInUp: {\r\n '0%': { opacity: '0', transform: 'translateY(20px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #1a1a1a;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #333;\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #90ee90;\r\n }\r\n <\/style>\r\n <script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"react\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\",\r\n \"react-dom\/\": \"https:\/\/aistudiocdn.com\/react-dom@^19.2.0\/\",\r\n \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\/\"\r\n }\r\n}\r\n<\/script>\r\n<\/head>\r\n\r\n<body class=\"bg-avigliana-bg text-gray-200 antialiased selection:bg-avigliana-green selection:text-avigliana-darkGreen\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo, useEffect } = React;\r\n\r\n \/\/ --- CONSTANTS & DATA ---\r\n\r\n const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzZ_cb6U_RTZIJnzE1v4UlK-0UAs_EtZ0F4Xb-bhqg9I3K0TjHuCJnnddVPBjHHeVkK1A\/exec';\r\n\r\n const ProductType = {\r\n DETAILED: 'detailed',\r\n SIMPLE: 'simple'\r\n };\r\n\r\n const ProductStatus = {\r\n AVAILABLE: 'available',\r\n RESTOCKING: 'restocking'\r\n };\r\n\r\n const PRODUCTS = [\r\n \/\/ Detailed Items (With Sizes)\r\n { id: 1, name: \"ICON HOODIE BR\", desc: \"Felpa ADIDAS con cappuccio BIANCA\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 2, name: \"COLLEGE HOODIE V\", desc: \"Felpa ADIDAS con cappuccio VERDE\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 3, name: \"BEE HOODIE V\", desc: \"Felpa ADIDAS tiratura limitata VERDE\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51-2.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 4, name: \"COLLEGE HOODIE B\", desc: \"Felpa ADIDAS con cappuccio BIANCA.\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51-3.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 5, name: \"BEE ZIP V\", desc: \"Felpa ADIDAS con ZIP VERDE\", price: 40.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 6, name: \"COURT TSHIRT N\", desc: \"Tshirt in cotone ADIDAS NERA.\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-2.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 7, name: \"COURT TSHIRT G\", desc: \"Tshirt in cotone ADIDAS GRIGIA\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 8, name: \"COURT TSHIRT NF\", desc: \"Tshirt in cotone ADIDAS NERA FANS\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-4.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 9, name: \"COURT TSHIRT BF\", desc: \"Tshirt in cotone ADIDAS BIANCA FANS\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-3.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 10, name: \"COLLEGE TSHIRT V\", desc: \"Tshirt in cotone di pregio VERDE\", price: 15.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-25-at-12.17.21-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n\r\n { id: 11, name: \"TRAINING TSHIRT V\", desc: \"Tshirt tecnica ufficiale Avigliana Basket Verde\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.53.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 12, name: \"COLLEGE PANTS G\", desc: \"Pantalone sportivo ADIDAS GRIGIO\", price: 50.00, options: [\"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.53-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n\r\n \/\/ Simple Items (Qty Only)\r\n { id: 13, name: \"BACKPACK\", desc: \"Zainetto Ufficiale GREENS\", price: 22.00, imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.34.59.jpeg\", type: ProductType.SIMPLE, status: ProductStatus.RESTOCKING },\r\n { id: 14, name: \"BAG\", desc: \"Borsone ufficiale Avigliana Basket\", price: 30.00, imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.35.00.jpeg\", type: ProductType.SIMPLE, status: ProductStatus.RESTOCKING },\r\n { id: 15, name: \"HAT\", desc: \"Cappello invernale Nero\", price: 20.00, imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-25-at-12.17.21.jpeg\", type: ProductType.SIMPLE, status: ProductStatus.AVAILABLE },\r\n ];\r\n\r\n \/\/ --- ICONS ---\r\n\r\n const ShoppingBagIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"><\/path><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><path d=\"M16 10a4 4 0 0 1-8 0\"><\/path><\/svg>\r\n );\r\n\r\n const CheckCircleIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#90ee90\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>\r\n );\r\n\r\n const AlertCircleIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f87171\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line><\/svg>\r\n );\r\n\r\n const CloseIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\r\n );\r\n\r\n const LoadingIcon = () => (\r\n <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-current\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle><path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg>\r\n );\r\n\r\n const ResetIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"transition-transform group-hover\/reset:-rotate-180\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"><\/path><path d=\"M3 3v5h5\"><\/path><\/svg>\r\n );\r\n\r\n \/\/ --- COMPONENTS ---\r\n\r\n const Modal = ({ isOpen, onClose, children, type = 'default' }) => {\r\n if (!isOpen) return null;\r\n\r\n useEffect(() => {\r\n const handleEsc = (e) => {\r\n if (e.key === 'Escape') onClose();\r\n };\r\n window.addEventListener('keydown', handleEsc);\r\n return () => window.removeEventListener('keydown', handleEsc);\r\n }, [onClose]);\r\n\r\n return (\r\n <div\r\n className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/80 backdrop-blur-sm transition-opacity duration-300\"\r\n onClick={onClose}\r\n >\r\n <div\r\n className={`relative bg-avigliana-card border border-gray-700 rounded-2xl shadow-2xl overflow-hidden animate-fade-in-up flex flex-col max-h-[90vh] ${type === 'image' ? 'max-w-4xl w-auto bg-transparent border-none' : 'max-w-lg w-full'}`}\r\n onClick={(e) => e.stopPropagation()}\r\n >\r\n {type !== 'image' && (\r\n <button\r\n onClick={onClose}\r\n className=\"absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-10\"\r\n >\r\n <CloseIcon \/>\r\n <\/button>\r\n )}\r\n <div className={`overflow-y-auto ${type !== 'image' ? 'p-6' : ''}`}>\r\n {children}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ProductCard = ({ product, cartItem, onUpdate, onImageClick }) => {\r\n const isDetailed = product.type === ProductType.DETAILED;\r\n const quantity = cartItem ? cartItem.quantity : 0;\r\n const size = cartItem ? cartItem.size : '';\r\n const hasSelection = quantity > 0;\r\n const canReset = quantity > 0 || (isDetailed && size !== '' && size !== undefined);\r\n const isRestocking = product.status === ProductStatus.RESTOCKING;\r\n\r\n return (\r\n <div className={`group relative flex flex-col sm:flex-row bg-avigliana-card rounded-2xl overflow-hidden border transition-all duration-300 ${hasSelection ? 'border-avigliana-green\/50 shadow-[0_0_15px_rgba(144,238,144,0.15)]' : 'border-gray-800 hover:border-gray-600 shadow-lg'}`}>\r\n\r\n {\/* \r\n IMAGE FIX:\r\n - Mobile: h-64 (fixed height)\r\n - Desktop: sm:h-auto (matches flex sibling height) + absolute inset-0 (fills container)\r\n *\/}\r\n <div className=\"relative w-full sm:w-1\/3 h-64 sm:h-auto overflow-hidden cursor-zoom-in bg-black\" onClick={() => onImageClick(product.imgUrl)}>\r\n <img\r\n src={product.imgUrl}\r\n alt={product.name}\r\n className=\"absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\r\n onError={(e) => {\r\n e.target.src = 'https:\/\/placehold.co\/400x400\/2a2a2a\/999999?text=NO+IMAGE';\r\n }}\r\n \/>\r\n <div className=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100\">\r\n <span className=\"bg-black\/50 text-white text-xs px-2 py-1 rounded backdrop-blur-md\">Zoom<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Content Section *\/}\r\n <div className=\"flex-1 p-5 flex flex-col justify-between\">\r\n <div>\r\n <div className=\"flex justify-between items-start mb-2\">\r\n <h3 className=\"text-lg font-bold text-white leading-tight\">{product.name}<\/h3>\r\n <span className=\"text-avigliana-green font-bold whitespace-nowrap ml-2\">\r\n \u20ac {product.price.toFixed(2)}\r\n <\/span>\r\n <\/div>\r\n <p className=\"text-sm text-gray-400 mb-4 line-clamp-2\">{product.desc}<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <div className={`grid grid-cols-2 gap-3 items-end ${isRestocking ? 'opacity-50 pointer-events-none' : ''}`}>\r\n {\/* Size Selector *\/}\r\n <div className={isDetailed ? 'opacity-100' : 'opacity-0 pointer-events-none'}>\r\n {isDetailed && (\r\n <>\r\n <label className=\"block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider\">Taglia<\/label>\r\n <div className=\"relative\">\r\n <select\r\n value={size || ''}\r\n onChange={(e) => onUpdate(product.id, { size: e.target.value })}\r\n disabled={isRestocking}\r\n className=\"w-full bg-avigliana-input text-white border border-gray-600 rounded-lg py-2 px-3 text-sm focus:ring-2 focus:ring-avigliana-green focus:border-transparent outline-none appearance-none transition-shadow disabled:cursor-not-allowed\"\r\n >\r\n <option value=\"\" disabled>Seleziona<\/option>\r\n {product.options && product.options.map(opt => (\r\n <option key={opt} value={opt}>{opt}<\/option>\r\n ))}\r\n <\/select>\r\n <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400\">\r\n <svg className=\"fill-current h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\"><path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" \/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/>\r\n )}\r\n <\/div>\r\n\r\n {\/* Quantity Input *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider\">Quantit\u00e0<\/label>\r\n <div className=\"flex items-center\">\r\n <button\r\n type=\"button\"\r\n onClick={() => onUpdate(product.id, { quantity: Math.max(0, quantity - 1) })}\r\n disabled={isRestocking}\r\n className=\"w-8 h-9 bg-gray-700 hover:bg-gray-600 text-white rounded-l-lg border-r border-gray-600 flex items-center justify-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\r\n >\r\n -\r\n <\/button>\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n value={quantity}\r\n onChange={(e) => onUpdate(product.id, { quantity: Math.max(0, parseInt(e.target.value) || 0) })}\r\n disabled={isRestocking}\r\n className=\"w-full h-9 bg-avigliana-input text-center text-white text-sm focus:ring-2 focus:ring-avigliana-green focus:z-10 outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed\"\r\n \/>\r\n <button\r\n type=\"button\"\r\n onClick={() => onUpdate(product.id, { quantity: quantity + 1 })}\r\n disabled={isRestocking}\r\n className=\"w-8 h-9 bg-gray-700 hover:bg-gray-600 text-white rounded-r-lg border-l border-gray-600 flex items-center justify-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\r\n >\r\n +\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Status Indicator & Reset *\/}\r\n <div className=\"mt-3 flex items-center justify-between min-h-[1.5rem]\">\r\n {canReset ? (\r\n <button\r\n type=\"button\"\r\n onClick={() => onUpdate(product.id, { quantity: 0, size: '' })}\r\n className=\"text-xs font-bold text-gray-500 hover:text-red-400 uppercase tracking-wider transition-colors flex items-center gap-1 group\/reset\"\r\n title=\"Azzera selezione\"\r\n >\r\n <ResetIcon \/>\r\n Reset\r\n <\/button>\r\n ) : (\r\n <span><\/span>\r\n )}\r\n\r\n <div className=\"text-xs font-bold uppercase tracking-wider text-right\">\r\n {isRestocking ? (\r\n <span className=\"text-red-500\">In Riordino<\/span>\r\n ) : (\r\n <span className=\"text-avigliana-green\">Disponibile<\/span>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const App = () => {\r\n \/\/ --- State ---\r\n const [customer, setCustomer] = useState({\r\n nome: '', cognome: '', mail: '', telefono: '', note: ''\r\n });\r\n\r\n const [cart, setCart] = useState(() => {\r\n const initialCart = {};\r\n PRODUCTS.forEach(p => {\r\n initialCart[p.id] = { quantity: 0, size: '' };\r\n });\r\n return initialCart;\r\n });\r\n\r\n const [isReviewOpen, setIsReviewOpen] = useState(false);\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n const [statusModal, setStatusModal] = useState({\r\n isOpen: false, type: 'success', title: '', message: ''\r\n });\r\n const [zoomImage, setZoomImage] = useState(null);\r\n\r\n \/\/ --- Helpers ---\r\n const handleCustomerChange = (e) => {\r\n const { name, value } = e.target;\r\n setCustomer(prev => ({ ...prev, [name]: value }));\r\n };\r\n\r\n const handleCartUpdate = (id, updates) => {\r\n setCart(prev => ({\r\n ...prev,\r\n [id]: { ...prev[id], ...updates }\r\n }));\r\n };\r\n\r\n const totalAmount = useMemo(() => {\r\n return PRODUCTS.reduce((sum, product) => {\r\n return sum + (product.price * (cart[product.id]?.quantity || 0));\r\n }, 0);\r\n }, [cart]);\r\n\r\n const selectedProducts = useMemo(() => {\r\n return PRODUCTS\r\n .filter(p => cart[p.id].quantity > 0)\r\n .map(p => ({\r\n ...p,\r\n selectedQty: cart[p.id].quantity,\r\n selectedSize: cart[p.id].size || (p.type === ProductType.SIMPLE ? 'UNICA' : null)\r\n }));\r\n }, [cart]);\r\n\r\n \/\/ --- Handlers ---\r\n\r\n \/\/ 1. Validation and Open Review Modal\r\n const handlePreSubmit = (e) => {\r\n e.preventDefault();\r\n\r\n if (totalAmount <= 0) {\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'error',\r\n title: 'Carrello Vuoto',\r\n message: 'Devi selezionare almeno un articolo per procedere.'\r\n });\r\n return;\r\n }\r\n\r\n const missingSizes = PRODUCTS.filter(p =>\r\n p.type === ProductType.DETAILED &&\r\n cart[p.id].quantity > 0 &&\r\n !cart[p.id].size\r\n );\r\n\r\n if (missingSizes.length > 0) {\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'error',\r\n title: 'Taglia Mancante',\r\n message: `Seleziona la taglia per: ${missingSizes.map(p => p.name).join(', ')}`\r\n });\r\n return;\r\n }\r\n\r\n setIsReviewOpen(true);\r\n };\r\n\r\n \/\/ 2. Final Submission (triggered from Review Modal)\r\n const submitOrder = async () => {\r\n setIsSubmitting(true);\r\n\r\n \/\/ Prepare Payload\r\n const summary = selectedProducts.map(p => ({\r\n titolo: p.name,\r\n prezzo_unitario: p.price,\r\n taglia: p.selectedSize || 'N\/D',\r\n quantita: p.selectedQty,\r\n subtotale: p.price * p.selectedQty\r\n }));\r\n\r\n const orderNumber = `ORD-${Date.now()}-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`;\r\n\r\n const formData = new URLSearchParams();\r\n formData.append('action', 'sendOrderEmail');\r\n formData.append('orderNumber', orderNumber);\r\n formData.append('dataOra', new Date().toLocaleString('it-IT'));\r\n formData.append('nome', customer.nome);\r\n formData.append('cognome', customer.cognome);\r\n formData.append('mail', customer.mail);\r\n formData.append('telefono', customer.telefono);\r\n formData.append('note', customer.note);\r\n formData.append('totaleImporto', totalAmount.toFixed(2));\r\n formData.append('riepilogoOrdine', JSON.stringify(summary));\r\n\r\n try {\r\n await fetch(SCRIPT_URL, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n cache: 'no-cache',\r\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n body: formData.toString()\r\n });\r\n\r\n \/\/ Success - Reset\r\n setCustomer({ nome: '', cognome: '', mail: '', telefono: '', note: '' });\r\n setCart(prev => {\r\n const reset = {};\r\n PRODUCTS.forEach(p => reset[p.id] = { quantity: 0, size: '' });\r\n return reset;\r\n });\r\n\r\n setIsReviewOpen(false); \/\/ Close review modal\r\n\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'success',\r\n title: 'Ordine Inviato!',\r\n message: 'Grazie! Il tuo ordine \u00e8 stato ricevuto correttamente. Riceverai una conferma via email a breve.'\r\n });\r\n\r\n } catch (error) {\r\n setIsReviewOpen(false);\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'error',\r\n title: 'Errore di Invio',\r\n message: 'Si \u00e8 verificato un problema tecnico. Riprova pi\u00f9 tardi o contatta l\\'assistenza.'\r\n });\r\n } finally {\r\n setIsSubmitting(false);\r\n }\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen pb-32\">\r\n {\/* Header *\/}\r\n <header className=\"bg-avigliana-darkGreen\/20 border-b border-avigliana-darkGreen\/50 py-10 px-4\">\r\n <div className=\"max-w-4xl mx-auto text-center\">\r\n <h1 className=\"text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-avigliana-green mb-4 tracking-tight\">\r\n MERCHANDISING 25\/26\r\n <\/h1>\r\n <p className=\"text-gray-400 text-lg max-w-2xl mx-auto\">\r\n Avigliana Basket Official Store. Compila il modulo sottostante per prenotare il tuo equipaggiamento.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <main className=\"max-w-5xl mx-auto p-4 md:p-8 space-y-12\">\r\n <form id=\"orderForm\" onSubmit={handlePreSubmit} className=\"space-y-12\">\r\n {\/* Section 1: Personal Data *\/}\r\n <section className=\"bg-avigliana-card rounded-3xl p-6 md:p-8 border border-gray-800 shadow-xl relative overflow-hidden\">\r\n <div className=\"absolute top-0 left-0 w-2 h-full bg-avigliana-green\"><\/div>\r\n <h2 className=\"text-2xl font-bold text-white mb-6 flex items-center\">\r\n <span className=\"bg-avigliana-green text-avigliana-bg w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm font-black\">1<\/span>\r\n I Tuoi Dati\r\n <\/h2>\r\n\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n {['nome', 'cognome'].map((field) => (\r\n <div key={field}>\r\n <label htmlFor={field} className=\"block text-sm font-medium text-gray-400 mb-1 capitalize\">{field} *<\/label>\r\n <input\r\n required\r\n type=\"text\"\r\n name={field}\r\n id={field}\r\n value={customer[field]}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all\"\r\n placeholder={`Inserisci il tuo ${field}`}\r\n \/>\r\n <\/div>\r\n ))}\r\n <div>\r\n <label htmlFor=\"mail\" className=\"block text-sm font-medium text-gray-400 mb-1\">Email *<\/label>\r\n <input\r\n required\r\n type=\"email\"\r\n name=\"mail\"\r\n id=\"mail\"\r\n value={customer.mail}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all\"\r\n placeholder=\"esempio@email.com\"\r\n \/>\r\n <\/div>\r\n <div>\r\n <label htmlFor=\"telefono\" className=\"block text-sm font-medium text-gray-400 mb-1\">Telefono *<\/label>\r\n <input\r\n required\r\n type=\"tel\"\r\n name=\"telefono\"\r\n id=\"telefono\"\r\n value={customer.telefono}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all\"\r\n placeholder=\"333 1234567\"\r\n \/>\r\n <\/div>\r\n <div className=\"md:col-span-2\">\r\n <label htmlFor=\"note\" className=\"block text-sm font-medium text-gray-400 mb-1\">Note (Opzionale)<\/label>\r\n <textarea\r\n name=\"note\"\r\n id=\"note\"\r\n rows={3}\r\n value={customer.note}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all resize-none\"\r\n placeholder=\"Eventuali comunicazioni aggiuntive...\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Section 2: Products *\/}\r\n <section>\r\n <div className=\"flex items-center mb-6\">\r\n <span className=\"bg-avigliana-green text-avigliana-bg w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm font-black\">2<\/span>\r\n <h2 className=\"text-2xl font-bold text-white\">Scegli i Prodotti<\/h2>\r\n <\/div>\r\n\r\n <div className=\"mb-8\">\r\n <h3 className=\"text-avigliana-green font-bold mb-4 uppercase text-sm tracking-wider border-b border-gray-800 pb-2\">Abbigliamento<\/h3>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\r\n {PRODUCTS.filter(p => p.type === ProductType.DETAILED).map(product => (\r\n <ProductCard\r\n key={product.id}\r\n product={product}\r\n cartItem={cart[product.id]}\r\n onUpdate={handleCartUpdate}\r\n onImageClick={setZoomImage}\r\n \/>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 className=\"text-avigliana-green font-bold mb-4 uppercase text-sm tracking-wider border-b border-gray-800 pb-2\">Accessori<\/h3>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\r\n {PRODUCTS.filter(p => p.type === ProductType.SIMPLE).map(product => (\r\n <ProductCard\r\n key={product.id}\r\n product={product}\r\n cartItem={cart[product.id]}\r\n onUpdate={handleCartUpdate}\r\n onImageClick={setZoomImage}\r\n \/>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Hidden submit button to enable HTML5 validation on Enter key *\/}\r\n <button type=\"submit\" className=\"hidden\"><\/button>\r\n <\/form>\r\n <\/main>\r\n\r\n {\/* Sticky Footer *\/}\r\n <div className=\"fixed bottom-0 left-0 right-0 p-4 z-40 pointer-events-none\">\r\n <div className=\"max-w-5xl mx-auto pointer-events-auto\">\r\n <div className=\"bg-avigliana-darkGreen\/90 backdrop-blur-lg border border-avigliana-green\/30 rounded-2xl p-4 md:p-6 shadow-2xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all hover:bg-avigliana-darkGreen\">\r\n <div className=\"flex flex-col\">\r\n <span className=\"text-green-100 text-sm font-medium\">Totale Ordine<\/span>\r\n <span className=\"text-3xl font-black text-white tracking-tight\">\u20ac {totalAmount.toFixed(2)}<\/span>\r\n <\/div>\r\n <button\r\n onClick={(e) => {\r\n \/\/ Trigger form submit to use browser validation\r\n const form = document.getElementById('orderForm');\r\n if (form.reportValidity()) {\r\n handlePreSubmit(e);\r\n }\r\n }}\r\n className=\"w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-lg flex items-center justify-center gap-2 transition-all duration-200 shadow-lg transform active:scale-95 bg-avigliana-green text-avigliana-darkerGreen hover:bg-white hover:text-black\"\r\n >\r\n Verifica Ordine\r\n <ShoppingBagIcon \/>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Review Modal *\/}\r\n <Modal isOpen={isReviewOpen} onClose={() => setIsReviewOpen(false)}>\r\n <div className=\"space-y-6\">\r\n <div className=\"text-center border-b border-gray-700 pb-4\">\r\n <h3 className=\"text-2xl font-bold text-avigliana-green\">Riepilogo Ordine<\/h3>\r\n <p className=\"text-sm text-gray-400 mt-1\">Controlla i dettagli prima di confermare<\/p>\r\n <\/div>\r\n\r\n <div className=\"bg-avigliana-bg\/50 p-4 rounded-xl border border-gray-700\">\r\n <h4 className=\"text-sm font-bold text-gray-400 uppercase mb-2\">Dati Cliente<\/h4>\r\n <div className=\"text-white font-medium\">{customer.nome} {customer.cognome}<\/div>\r\n <div className=\"text-gray-400 text-sm\">{customer.mail}<\/div>\r\n <div className=\"text-gray-400 text-sm\">{customer.telefono}<\/div>\r\n <\/div>\r\n\r\n <div className=\"max-h-60 overflow-y-auto pr-2 space-y-3\">\r\n {selectedProducts.map((p) => (\r\n <div key={p.id} className=\"flex justify-between items-center bg-avigliana-bg p-3 rounded-lg border border-gray-800\">\r\n <div className=\"flex-1\">\r\n <div className=\"font-bold text-white text-sm\">{p.name}<\/div>\r\n <div className=\"text-xs text-gray-400\">\r\n {p.selectedSize && p.selectedSize !== 'UNICA' ? `Taglia: ${p.selectedSize} | ` : ''}\r\n Qt\u00e0: {p.selectedQty}\r\n <\/div>\r\n <\/div>\r\n <div className=\"text-avigliana-green font-bold text-sm\">\r\n \u20ac {(p.price * p.selectedQty).toFixed(2)}\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n\r\n <div className=\"flex justify-between items-center border-t border-gray-700 pt-4\">\r\n <span className=\"text-lg font-bold text-white\">Totale da pagare<\/span>\r\n <span className=\"text-2xl font-black text-avigliana-green\">\u20ac {totalAmount.toFixed(2)}<\/span>\r\n <\/div>\r\n\r\n <div className=\"flex gap-3 pt-2\">\r\n <button\r\n onClick={() => setIsReviewOpen(false)}\r\n className=\"flex-1 py-3 px-4 rounded-xl font-bold border border-red-500 text-red-500 hover:bg-red-500 hover:text-white transition-all\"\r\n >\r\n Annulla\r\n <\/button>\r\n <button\r\n onClick={submitOrder}\r\n disabled={isSubmitting}\r\n className=\"flex-1 py-3 px-4 rounded-xl font-bold bg-avigliana-green text-avigliana-darkerGreen hover:bg-white transition-all flex justify-center items-center gap-2\"\r\n >\r\n {isSubmitting ? (\r\n <>\r\n <LoadingIcon \/>\r\n Invio...\r\n <\/>\r\n ) : (\r\n \"Conferma\"\r\n )}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/Modal>\r\n\r\n {\/* Image Zoom Modal *\/}\r\n <Modal isOpen={!!zoomImage} onClose={() => setZoomImage(null)} type=\"image\">\r\n {zoomImage && (\r\n <img\r\n src={zoomImage}\r\n alt=\"Zoom\"\r\n className=\"max-h-[85vh] w-auto rounded-lg shadow-2xl\"\r\n \/>\r\n )}\r\n <\/Modal>\r\n\r\n {\/* Status Feedback Modal *\/}\r\n <Modal\r\n isOpen={statusModal.isOpen}\r\n onClose={() => setStatusModal(prev => ({ ...prev, isOpen: false }))}\r\n >\r\n <div className=\"text-center pt-2 pb-4\">\r\n <div className=\"flex justify-center mb-4\">\r\n {statusModal.type === 'success' ? <CheckCircleIcon \/> : <AlertCircleIcon \/>}\r\n <\/div>\r\n <h3 className={`text-2xl font-bold mb-2 ${statusModal.type === 'success' ? 'text-avigliana-green' : 'text-red-400'}`}>\r\n {statusModal.title}\r\n <\/h3>\r\n <p className=\"text-gray-300\">\r\n {statusModal.message}\r\n <\/p>\r\n <button\r\n onClick={() => setStatusModal(prev => ({ ...prev, isOpen: false }))}\r\n className=\"mt-6 w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-xl font-bold transition-colors\"\r\n >\r\n Chiudi\r\n <\/button>\r\n <\/div>\r\n <\/Modal>\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Avigliana Basket Merch 25\/26<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5472","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5472"}],"version-history":[{"count":6,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5472\/revisions"}],"predecessor-version":[{"id":5714,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5472\/revisions\/5714"}],"wp:attachment":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Avigliana Basket Merch 25\/26<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap\"\r\n rel=\"stylesheet\">\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Urbanist', 'sans-serif'],\r\n },\r\n colors: {\r\n avigliana: {\r\n green: '#90ee90',\r\n darkGreen: '#0d471b',\r\n darkerGreen: '#082f12',\r\n card: '#2a2a2a',\r\n bg: '#1a1a1a',\r\n input: '#3a3a3a',\r\n }\r\n },\r\n animation: {\r\n 'fade-in-up': 'fadeInUp 0.3s ease-out forwards',\r\n },\r\n keyframes: {\r\n fadeInUp: {\r\n '0%': { opacity: '0', transform: 'translateY(20px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #1a1a1a;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #333;\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #90ee90;\r\n }\r\n <\/style>\r\n <script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"react\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\",\r\n \"react-dom\/\": \"https:\/\/aistudiocdn.com\/react-dom@^19.2.0\/\",\r\n \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\/\"\r\n }\r\n}\r\n<\/script>\r\n<\/head>\r\n\r\n<body class=\"bg-avigliana-bg text-gray-200 antialiased selection:bg-avigliana-green selection:text-avigliana-darkGreen\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo, useEffect } = React;\r\n\r\n \/\/ --- CONSTANTS & DATA ---\r\n\r\n const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzZ_cb6U_RTZIJnzE1v4UlK-0UAs_EtZ0F4Xb-bhqg9I3K0TjHuCJnnddVPBjHHeVkK1A\/exec';\r\n\r\n const ProductType = {\r\n DETAILED: 'detailed',\r\n SIMPLE: 'simple'\r\n };\r\n\r\n const ProductStatus = {\r\n AVAILABLE: 'available',\r\n RESTOCKING: 'restocking'\r\n };\r\n\r\n const PRODUCTS = [\r\n \/\/ Detailed Items (With Sizes)\r\n { id: 1, name: \"ICON HOODIE BR\", desc: \"Felpa ADIDAS con cappuccio BIANCA\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 2, name: \"COLLEGE HOODIE V\", desc: \"Felpa ADIDAS con cappuccio VERDE\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 3, name: \"BEE HOODIE V\", desc: \"Felpa ADIDAS tiratura limitata VERDE\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51-2.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 4, name: \"COLLEGE HOODIE B\", desc: \"Felpa ADIDAS con cappuccio BIANCA.\", price: 50.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.51-3.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 5, name: \"BEE ZIP V\", desc: \"Felpa ADIDAS con ZIP VERDE\", price: 40.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 6, name: \"COURT TSHIRT N\", desc: \"Tshirt in cotone ADIDAS NERA.\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-2.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 7, name: \"COURT TSHIRT G\", desc: \"Tshirt in cotone ADIDAS GRIGIA\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 8, name: \"COURT TSHIRT NF\", desc: \"Tshirt in cotone ADIDAS NERA FANS\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-4.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 9, name: \"COURT TSHIRT BF\", desc: \"Tshirt in cotone ADIDAS BIANCA FANS\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.52-3.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 10, name: \"COLLEGE TSHIRT V\", desc: \"Tshirt in cotone di pregio VERDE\", price: 15.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-25-at-12.17.21-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n\r\n { id: 11, name: \"TRAINING TSHIRT V\", desc: \"Tshirt tecnica ufficiale Avigliana Basket Verde\", price: 25.00, options: [\"7-8A\", \"8-9A\", \"9-10A\", \"10-11A\", \"11-12A\", \"12-13A\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.53.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n { id: 12, name: \"COLLEGE PANTS G\", desc: \"Pantalone sportivo ADIDAS GRIGIO\", price: 50.00, options: [\"S\", \"M\", \"L\", \"XL\", \"XXL\"], imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.17.53-1.jpeg\", type: ProductType.DETAILED, status: ProductStatus.AVAILABLE },\r\n\r\n \/\/ Simple Items (Qty Only)\r\n { id: 13, name: \"BACKPACK\", desc: \"Zainetto Ufficiale GREENS\", price: 22.00, imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.34.59.jpeg\", type: ProductType.SIMPLE, status: ProductStatus.RESTOCKING },\r\n { id: 14, name: \"BAG\", desc: \"Borsone ufficiale Avigliana Basket\", price: 30.00, imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-24-at-23.35.00.jpeg\", type: ProductType.SIMPLE, status: ProductStatus.RESTOCKING },\r\n { id: 15, name: \"HAT\", desc: \"Cappello invernale Nero\", price: 20.00, imgUrl: \"https:\/\/www.aviglianabasket.it\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-25-at-12.17.21.jpeg\", type: ProductType.SIMPLE, status: ProductStatus.AVAILABLE },\r\n ];\r\n\r\n \/\/ --- ICONS ---\r\n\r\n const ShoppingBagIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"><\/path><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><path d=\"M16 10a4 4 0 0 1-8 0\"><\/path><\/svg>\r\n );\r\n\r\n const CheckCircleIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#90ee90\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>\r\n );\r\n\r\n const AlertCircleIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f87171\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line><\/svg>\r\n );\r\n\r\n const CloseIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\r\n );\r\n\r\n const LoadingIcon = () => (\r\n <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-current\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle><path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg>\r\n );\r\n\r\n const ResetIcon = () => (\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"transition-transform group-hover\/reset:-rotate-180\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"><\/path><path d=\"M3 3v5h5\"><\/path><\/svg>\r\n );\r\n\r\n \/\/ --- COMPONENTS ---\r\n\r\n const Modal = ({ isOpen, onClose, children, type = 'default' }) => {\r\n if (!isOpen) return null;\r\n\r\n useEffect(() => {\r\n const handleEsc = (e) => {\r\n if (e.key === 'Escape') onClose();\r\n };\r\n window.addEventListener('keydown', handleEsc);\r\n return () => window.removeEventListener('keydown', handleEsc);\r\n }, [onClose]);\r\n\r\n return (\r\n <div\r\n className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/80 backdrop-blur-sm transition-opacity duration-300\"\r\n onClick={onClose}\r\n >\r\n <div\r\n className={`relative bg-avigliana-card border border-gray-700 rounded-2xl shadow-2xl overflow-hidden animate-fade-in-up flex flex-col max-h-[90vh] ${type === 'image' ? 'max-w-4xl w-auto bg-transparent border-none' : 'max-w-lg w-full'}`}\r\n onClick={(e) => e.stopPropagation()}\r\n >\r\n {type !== 'image' && (\r\n <button\r\n onClick={onClose}\r\n className=\"absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-10\"\r\n >\r\n <CloseIcon \/>\r\n <\/button>\r\n )}\r\n <div className={`overflow-y-auto ${type !== 'image' ? 'p-6' : ''}`}>\r\n {children}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ProductCard = ({ product, cartItem, onUpdate, onImageClick }) => {\r\n const isDetailed = product.type === ProductType.DETAILED;\r\n const quantity = cartItem ? cartItem.quantity : 0;\r\n const size = cartItem ? cartItem.size : '';\r\n const hasSelection = quantity > 0;\r\n const canReset = quantity > 0 || (isDetailed && size !== '' && size !== undefined);\r\n const isRestocking = product.status === ProductStatus.RESTOCKING;\r\n\r\n return (\r\n <div className={`group relative flex flex-col sm:flex-row bg-avigliana-card rounded-2xl overflow-hidden border transition-all duration-300 ${hasSelection ? 'border-avigliana-green\/50 shadow-[0_0_15px_rgba(144,238,144,0.15)]' : 'border-gray-800 hover:border-gray-600 shadow-lg'}`}>\r\n\r\n {\/* \r\n IMAGE FIX:\r\n - Mobile: h-64 (fixed height)\r\n - Desktop: sm:h-auto (matches flex sibling height) + absolute inset-0 (fills container)\r\n *\/}\r\n <div className=\"relative w-full sm:w-1\/3 h-64 sm:h-auto overflow-hidden cursor-zoom-in bg-black\" onClick={() => onImageClick(product.imgUrl)}>\r\n <img\r\n src={product.imgUrl}\r\n alt={product.name}\r\n className=\"absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\r\n onError={(e) => {\r\n e.target.src = 'https:\/\/placehold.co\/400x400\/2a2a2a\/999999?text=NO+IMAGE';\r\n }}\r\n \/>\r\n <div className=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100\">\r\n <span className=\"bg-black\/50 text-white text-xs px-2 py-1 rounded backdrop-blur-md\">Zoom<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Content Section *\/}\r\n <div className=\"flex-1 p-5 flex flex-col justify-between\">\r\n <div>\r\n <div className=\"flex justify-between items-start mb-2\">\r\n <h3 className=\"text-lg font-bold text-white leading-tight\">{product.name}<\/h3>\r\n <span className=\"text-avigliana-green font-bold whitespace-nowrap ml-2\">\r\n \u20ac {product.price.toFixed(2)}\r\n <\/span>\r\n <\/div>\r\n <p className=\"text-sm text-gray-400 mb-4 line-clamp-2\">{product.desc}<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <div className={`grid grid-cols-2 gap-3 items-end ${isRestocking ? 'opacity-50 pointer-events-none' : ''}`}>\r\n {\/* Size Selector *\/}\r\n <div className={isDetailed ? 'opacity-100' : 'opacity-0 pointer-events-none'}>\r\n {isDetailed && (\r\n <>\r\n <label className=\"block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider\">Taglia<\/label>\r\n <div className=\"relative\">\r\n <select\r\n value={size || ''}\r\n onChange={(e) => onUpdate(product.id, { size: e.target.value })}\r\n disabled={isRestocking}\r\n className=\"w-full bg-avigliana-input text-white border border-gray-600 rounded-lg py-2 px-3 text-sm focus:ring-2 focus:ring-avigliana-green focus:border-transparent outline-none appearance-none transition-shadow disabled:cursor-not-allowed\"\r\n >\r\n <option value=\"\" disabled>Seleziona<\/option>\r\n {product.options && product.options.map(opt => (\r\n <option key={opt} value={opt}>{opt}<\/option>\r\n ))}\r\n <\/select>\r\n <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400\">\r\n <svg className=\"fill-current h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\"><path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" \/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/>\r\n )}\r\n <\/div>\r\n\r\n {\/* Quantity Input *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider\">Quantit\u00e0<\/label>\r\n <div className=\"flex items-center\">\r\n <button\r\n type=\"button\"\r\n onClick={() => onUpdate(product.id, { quantity: Math.max(0, quantity - 1) })}\r\n disabled={isRestocking}\r\n className=\"w-8 h-9 bg-gray-700 hover:bg-gray-600 text-white rounded-l-lg border-r border-gray-600 flex items-center justify-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\r\n >\r\n -\r\n <\/button>\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n value={quantity}\r\n onChange={(e) => onUpdate(product.id, { quantity: Math.max(0, parseInt(e.target.value) || 0) })}\r\n disabled={isRestocking}\r\n className=\"w-full h-9 bg-avigliana-input text-center text-white text-sm focus:ring-2 focus:ring-avigliana-green focus:z-10 outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed\"\r\n \/>\r\n <button\r\n type=\"button\"\r\n onClick={() => onUpdate(product.id, { quantity: quantity + 1 })}\r\n disabled={isRestocking}\r\n className=\"w-8 h-9 bg-gray-700 hover:bg-gray-600 text-white rounded-r-lg border-l border-gray-600 flex items-center justify-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\r\n >\r\n +\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Status Indicator & Reset *\/}\r\n <div className=\"mt-3 flex items-center justify-between min-h-[1.5rem]\">\r\n {canReset ? (\r\n <button\r\n type=\"button\"\r\n onClick={() => onUpdate(product.id, { quantity: 0, size: '' })}\r\n className=\"text-xs font-bold text-gray-500 hover:text-red-400 uppercase tracking-wider transition-colors flex items-center gap-1 group\/reset\"\r\n title=\"Azzera selezione\"\r\n >\r\n <ResetIcon \/>\r\n Reset\r\n <\/button>\r\n ) : (\r\n <span><\/span>\r\n )}\r\n\r\n <div className=\"text-xs font-bold uppercase tracking-wider text-right\">\r\n {isRestocking ? (\r\n <span className=\"text-red-500\">In Riordino<\/span>\r\n ) : (\r\n <span className=\"text-avigliana-green\">Disponibile<\/span>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const App = () => {\r\n \/\/ --- State ---\r\n const [customer, setCustomer] = useState({\r\n nome: '', cognome: '', mail: '', telefono: '', note: ''\r\n });\r\n\r\n const [cart, setCart] = useState(() => {\r\n const initialCart = {};\r\n PRODUCTS.forEach(p => {\r\n initialCart[p.id] = { quantity: 0, size: '' };\r\n });\r\n return initialCart;\r\n });\r\n\r\n const [isReviewOpen, setIsReviewOpen] = useState(false);\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n const [statusModal, setStatusModal] = useState({\r\n isOpen: false, type: 'success', title: '', message: ''\r\n });\r\n const [zoomImage, setZoomImage] = useState(null);\r\n\r\n \/\/ --- Helpers ---\r\n const handleCustomerChange = (e) => {\r\n const { name, value } = e.target;\r\n setCustomer(prev => ({ ...prev, [name]: value }));\r\n };\r\n\r\n const handleCartUpdate = (id, updates) => {\r\n setCart(prev => ({\r\n ...prev,\r\n [id]: { ...prev[id], ...updates }\r\n }));\r\n };\r\n\r\n const totalAmount = useMemo(() => {\r\n return PRODUCTS.reduce((sum, product) => {\r\n return sum + (product.price * (cart[product.id]?.quantity || 0));\r\n }, 0);\r\n }, [cart]);\r\n\r\n const selectedProducts = useMemo(() => {\r\n return PRODUCTS\r\n .filter(p => cart[p.id].quantity > 0)\r\n .map(p => ({\r\n ...p,\r\n selectedQty: cart[p.id].quantity,\r\n selectedSize: cart[p.id].size || (p.type === ProductType.SIMPLE ? 'UNICA' : null)\r\n }));\r\n }, [cart]);\r\n\r\n \/\/ --- Handlers ---\r\n\r\n \/\/ 1. Validation and Open Review Modal\r\n const handlePreSubmit = (e) => {\r\n e.preventDefault();\r\n\r\n if (totalAmount <= 0) {\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'error',\r\n title: 'Carrello Vuoto',\r\n message: 'Devi selezionare almeno un articolo per procedere.'\r\n });\r\n return;\r\n }\r\n\r\n const missingSizes = PRODUCTS.filter(p =>\r\n p.type === ProductType.DETAILED &&\r\n cart[p.id].quantity > 0 &&\r\n !cart[p.id].size\r\n );\r\n\r\n if (missingSizes.length > 0) {\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'error',\r\n title: 'Taglia Mancante',\r\n message: `Seleziona la taglia per: ${missingSizes.map(p => p.name).join(', ')}`\r\n });\r\n return;\r\n }\r\n\r\n setIsReviewOpen(true);\r\n };\r\n\r\n \/\/ 2. Final Submission (triggered from Review Modal)\r\n const submitOrder = async () => {\r\n setIsSubmitting(true);\r\n\r\n \/\/ Prepare Payload\r\n const summary = selectedProducts.map(p => ({\r\n titolo: p.name,\r\n prezzo_unitario: p.price,\r\n taglia: p.selectedSize || 'N\/D',\r\n quantita: p.selectedQty,\r\n subtotale: p.price * p.selectedQty\r\n }));\r\n\r\n const orderNumber = `ORD-${Date.now()}-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`;\r\n\r\n const formData = new URLSearchParams();\r\n formData.append('action', 'sendOrderEmail');\r\n formData.append('orderNumber', orderNumber);\r\n formData.append('dataOra', new Date().toLocaleString('it-IT'));\r\n formData.append('nome', customer.nome);\r\n formData.append('cognome', customer.cognome);\r\n formData.append('mail', customer.mail);\r\n formData.append('telefono', customer.telefono);\r\n formData.append('note', customer.note);\r\n formData.append('totaleImporto', totalAmount.toFixed(2));\r\n formData.append('riepilogoOrdine', JSON.stringify(summary));\r\n\r\n try {\r\n await fetch(SCRIPT_URL, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n cache: 'no-cache',\r\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n body: formData.toString()\r\n });\r\n\r\n \/\/ Success - Reset\r\n setCustomer({ nome: '', cognome: '', mail: '', telefono: '', note: '' });\r\n setCart(prev => {\r\n const reset = {};\r\n PRODUCTS.forEach(p => reset[p.id] = { quantity: 0, size: '' });\r\n return reset;\r\n });\r\n\r\n setIsReviewOpen(false); \/\/ Close review modal\r\n\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'success',\r\n title: 'Ordine Inviato!',\r\n message: 'Grazie! Il tuo ordine \u00e8 stato ricevuto correttamente. Riceverai una conferma via email a breve.'\r\n });\r\n\r\n } catch (error) {\r\n setIsReviewOpen(false);\r\n setStatusModal({\r\n isOpen: true,\r\n type: 'error',\r\n title: 'Errore di Invio',\r\n message: 'Si \u00e8 verificato un problema tecnico. Riprova pi\u00f9 tardi o contatta l\\'assistenza.'\r\n });\r\n } finally {\r\n setIsSubmitting(false);\r\n }\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen pb-32\">\r\n {\/* Header *\/}\r\n <header className=\"bg-avigliana-darkGreen\/20 border-b border-avigliana-darkGreen\/50 py-10 px-4\">\r\n <div className=\"max-w-4xl mx-auto text-center\">\r\n <h1 className=\"text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-avigliana-green mb-4 tracking-tight\">\r\n MERCHANDISING 25\/26\r\n <\/h1>\r\n <p className=\"text-gray-400 text-lg max-w-2xl mx-auto\">\r\n Avigliana Basket Official Store. Compila il modulo sottostante per prenotare il tuo equipaggiamento.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <main className=\"max-w-5xl mx-auto p-4 md:p-8 space-y-12\">\r\n <form id=\"orderForm\" onSubmit={handlePreSubmit} className=\"space-y-12\">\r\n {\/* Section 1: Personal Data *\/}\r\n <section className=\"bg-avigliana-card rounded-3xl p-6 md:p-8 border border-gray-800 shadow-xl relative overflow-hidden\">\r\n <div className=\"absolute top-0 left-0 w-2 h-full bg-avigliana-green\"><\/div>\r\n <h2 className=\"text-2xl font-bold text-white mb-6 flex items-center\">\r\n <span className=\"bg-avigliana-green text-avigliana-bg w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm font-black\">1<\/span>\r\n I Tuoi Dati\r\n <\/h2>\r\n\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n {['nome', 'cognome'].map((field) => (\r\n <div key={field}>\r\n <label htmlFor={field} className=\"block text-sm font-medium text-gray-400 mb-1 capitalize\">{field} *<\/label>\r\n <input\r\n required\r\n type=\"text\"\r\n name={field}\r\n id={field}\r\n value={customer[field]}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all\"\r\n placeholder={`Inserisci il tuo ${field}`}\r\n \/>\r\n <\/div>\r\n ))}\r\n <div>\r\n <label htmlFor=\"mail\" className=\"block text-sm font-medium text-gray-400 mb-1\">Email *<\/label>\r\n <input\r\n required\r\n type=\"email\"\r\n name=\"mail\"\r\n id=\"mail\"\r\n value={customer.mail}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all\"\r\n placeholder=\"esempio@email.com\"\r\n \/>\r\n <\/div>\r\n <div>\r\n <label htmlFor=\"telefono\" className=\"block text-sm font-medium text-gray-400 mb-1\">Telefono *<\/label>\r\n <input\r\n required\r\n type=\"tel\"\r\n name=\"telefono\"\r\n id=\"telefono\"\r\n value={customer.telefono}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all\"\r\n placeholder=\"333 1234567\"\r\n \/>\r\n <\/div>\r\n <div className=\"md:col-span-2\">\r\n <label htmlFor=\"note\" className=\"block text-sm font-medium text-gray-400 mb-1\">Note (Opzionale)<\/label>\r\n <textarea\r\n name=\"note\"\r\n id=\"note\"\r\n rows={3}\r\n value={customer.note}\r\n onChange={handleCustomerChange}\r\n className=\"w-full bg-avigliana-input border border-gray-600 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-avigliana-green focus:border-transparent transition-all resize-none\"\r\n placeholder=\"Eventuali comunicazioni aggiuntive...\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Section 2: Products *\/}\r\n <section>\r\n <div className=\"flex items-center mb-6\">\r\n <span className=\"bg-avigliana-green text-avigliana-bg w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm font-black\">2<\/span>\r\n <h2 className=\"text-2xl font-bold text-white\">Scegli i Prodotti<\/h2>\r\n <\/div>\r\n\r\n <div className=\"mb-8\">\r\n <h3 className=\"text-avigliana-green font-bold mb-4 uppercase text-sm tracking-wider border-b border-gray-800 pb-2\">Abbigliamento<\/h3>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\r\n {PRODUCTS.filter(p => p.type === ProductType.DETAILED).map(product => (\r\n <ProductCard\r\n key={product.id}\r\n product={product}\r\n cartItem={cart[product.id]}\r\n onUpdate={handleCartUpdate}\r\n onImageClick={setZoomImage}\r\n \/>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 className=\"text-avigliana-green font-bold mb-4 uppercase text-sm tracking-wider border-b border-gray-800 pb-2\">Accessori<\/h3>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\r\n {PRODUCTS.filter(p => p.type === ProductType.SIMPLE).map(product => (\r\n <ProductCard\r\n key={product.id}\r\n product={product}\r\n cartItem={cart[product.id]}\r\n onUpdate={handleCartUpdate}\r\n onImageClick={setZoomImage}\r\n \/>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Hidden submit button to enable HTML5 validation on Enter key *\/}\r\n <button type=\"submit\" className=\"hidden\"><\/button>\r\n <\/form>\r\n <\/main>\r\n\r\n {\/* Sticky Footer *\/}\r\n <div className=\"fixed bottom-0 left-0 right-0 p-4 z-40 pointer-events-none\">\r\n <div className=\"max-w-5xl mx-auto pointer-events-auto\">\r\n <div className=\"bg-avigliana-darkGreen\/90 backdrop-blur-lg border border-avigliana-green\/30 rounded-2xl p-4 md:p-6 shadow-2xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all hover:bg-avigliana-darkGreen\">\r\n <div className=\"flex flex-col\">\r\n <span className=\"text-green-100 text-sm font-medium\">Totale Ordine<\/span>\r\n <span className=\"text-3xl font-black text-white tracking-tight\">\u20ac {totalAmount.toFixed(2)}<\/span>\r\n <\/div>\r\n <button\r\n onClick={(e) => {\r\n \/\/ Trigger form submit to use browser validation\r\n const form = document.getElementById('orderForm');\r\n if (form.reportValidity()) {\r\n handlePreSubmit(e);\r\n }\r\n }}\r\n className=\"w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-lg flex items-center justify-center gap-2 transition-all duration-200 shadow-lg transform active:scale-95 bg-avigliana-green text-avigliana-darkerGreen hover:bg-white hover:text-black\"\r\n >\r\n Verifica Ordine\r\n <ShoppingBagIcon \/>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Review Modal *\/}\r\n <Modal isOpen={isReviewOpen} onClose={() => setIsReviewOpen(false)}>\r\n <div className=\"space-y-6\">\r\n <div className=\"text-center border-b border-gray-700 pb-4\">\r\n <h3 className=\"text-2xl font-bold text-avigliana-green\">Riepilogo Ordine<\/h3>\r\n <p className=\"text-sm text-gray-400 mt-1\">Controlla i dettagli prima di confermare<\/p>\r\n <\/div>\r\n\r\n <div className=\"bg-avigliana-bg\/50 p-4 rounded-xl border border-gray-700\">\r\n <h4 className=\"text-sm font-bold text-gray-400 uppercase mb-2\">Dati Cliente<\/h4>\r\n <div className=\"text-white font-medium\">{customer.nome} {customer.cognome}<\/div>\r\n <div className=\"text-gray-400 text-sm\">{customer.mail}<\/div>\r\n <div className=\"text-gray-400 text-sm\">{customer.telefono}<\/div>\r\n <\/div>\r\n\r\n <div className=\"max-h-60 overflow-y-auto pr-2 space-y-3\">\r\n {selectedProducts.map((p) => (\r\n <div key={p.id} className=\"flex justify-between items-center bg-avigliana-bg p-3 rounded-lg border border-gray-800\">\r\n <div className=\"flex-1\">\r\n <div className=\"font-bold text-white text-sm\">{p.name}<\/div>\r\n <div className=\"text-xs text-gray-400\">\r\n {p.selectedSize && p.selectedSize !== 'UNICA' ? `Taglia: ${p.selectedSize} | ` : ''}\r\n Qt\u00e0: {p.selectedQty}\r\n <\/div>\r\n <\/div>\r\n <div className=\"text-avigliana-green font-bold text-sm\">\r\n \u20ac {(p.price * p.selectedQty).toFixed(2)}\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n\r\n <div className=\"flex justify-between items-center border-t border-gray-700 pt-4\">\r\n <span className=\"text-lg font-bold text-white\">Totale da pagare<\/span>\r\n <span className=\"text-2xl font-black text-avigliana-green\">\u20ac {totalAmount.toFixed(2)}<\/span>\r\n <\/div>\r\n\r\n <div className=\"flex gap-3 pt-2\">\r\n <button\r\n onClick={() => setIsReviewOpen(false)}\r\n className=\"flex-1 py-3 px-4 rounded-xl font-bold border border-red-500 text-red-500 hover:bg-red-500 hover:text-white transition-all\"\r\n >\r\n Annulla\r\n <\/button>\r\n <button\r\n onClick={submitOrder}\r\n disabled={isSubmitting}\r\n className=\"flex-1 py-3 px-4 rounded-xl font-bold bg-avigliana-green text-avigliana-darkerGreen hover:bg-white transition-all flex justify-center items-center gap-2\"\r\n >\r\n {isSubmitting ? (\r\n <>\r\n <LoadingIcon \/>\r\n Invio...\r\n <\/>\r\n ) : (\r\n \"Conferma\"\r\n )}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/Modal>\r\n\r\n {\/* Image Zoom Modal *\/}\r\n <Modal isOpen={!!zoomImage} onClose={() => setZoomImage(null)} type=\"image\">\r\n {zoomImage && (\r\n <img\r\n src={zoomImage}\r\n alt=\"Zoom\"\r\n className=\"max-h-[85vh] w-auto rounded-lg shadow-2xl\"\r\n \/>\r\n )}\r\n <\/Modal>\r\n\r\n {\/* Status Feedback Modal *\/}\r\n <Modal\r\n isOpen={statusModal.isOpen}\r\n onClose={() => setStatusModal(prev => ({ ...prev, isOpen: false }))}\r\n >\r\n <div className=\"text-center pt-2 pb-4\">\r\n <div className=\"flex justify-center mb-4\">\r\n {statusModal.type === 'success' ? <CheckCircleIcon \/> : <AlertCircleIcon \/>}\r\n <\/div>\r\n <h3 className={`text-2xl font-bold mb-2 ${statusModal.type === 'success' ? 'text-avigliana-green' : 'text-red-400'}`}>\r\n {statusModal.title}\r\n <\/h3>\r\n <p className=\"text-gray-300\">\r\n {statusModal.message}\r\n <\/p>\r\n <button\r\n onClick={() => setStatusModal(prev => ({ ...prev, isOpen: false }))}\r\n className=\"mt-6 w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-xl font-bold transition-colors\"\r\n >\r\n Chiudi\r\n <\/button>\r\n <\/div>\r\n <\/Modal>\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Avigliana Basket Merch 25\/26<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5472","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5472"}],"version-history":[{"count":6,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5472\/revisions"}],"predecessor-version":[{"id":5714,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5472\/revisions\/5714"}],"wp:attachment":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}