feat: placement mur/sol pour templates carrelage avec prompt adapté

src/components/mockup/MockupModal.tsx

@@ -35,6 +35,7 @@ export function MockupModal({ product, onClose }: Props) {
 
   const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null)
   const [family, setFamily] = useState('')
+  const [placement, setPlacement] = useState<string>('')
   const [selectedMeta, setSelectedMeta] = useState<string[]>([])
   const [cutoutB64, setCutoutB64] = useState<string | null>(null)
   const [selectedImageUrl, setSelectedImageUrl] = useState<string | null>(null)
@@ -67,9 +68,13 @@ export function MockupModal({ product, onClose }: Props) {
     }).finally(() => setLoadingMeta(false))
   }, [product.shopifyId])
 
-  const filteredTemplates = templates.filter(t =>
-    !family || t.family === family || t.family === 'Tous'
-  )
+  const isCarrelage = family.toLowerCase().includes('carrelage')
+
+  const filteredTemplates = templates.filter(t => {
+    if (t.family !== family && t.family !== 'Tous') return false
+    if (isCarrelage && placement && t.placement && t.placement !== placement) return false
+    return true
+  })
 
   const dimensionStr = selectedMeta.length > 0
     ? selectedMeta.map(key => {
@@ -137,6 +142,7 @@ export function MockupModal({ product, onClose }: Props) {
           productImageBase64: cutoutB64,
           productName: product.title,
           family: family || 'Tous',
+          placement: placement || undefined,
           dimensions: dimensionStr,
           instruction: instruction || undefined,
         }),
@@ -218,14 +224,29 @@ export function MockupModal({ product, onClose }: Props) {
             )}
           </section>
 
-          {/* 2. Famille */}
+          {/* 2. Famille + placement */}
           <section>
             <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wide mb-2">2. Famille</h3>
             {families.length > 0 ? (
-              <select value={family} onChange={e => setFamily(e.target.value)}
-                className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
-                {families.map(f => <option key={f}>{f}</option>)}
-              </select>
+              <div className="space-y-2">
+                <select value={family} onChange={e => { setFamily(e.target.value); setPlacement('') }}
+                  className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                  {families.map(f => <option key={f}>{f}</option>)}
+                </select>
+                {isCarrelage && (
+                  <div>
+                    <p className="text-xs text-gray-400 mb-1.5">Placement</p>
+                    <div className="flex gap-2">
+                      {[{ val: 'sol', label: 'Sol' }, { val: 'mur', label: 'Mur (faïence)' }].map(({ val, label }) => (
+                        <button key={val} type="button" onClick={() => setPlacement(p => p === val ? '' : val)}
+                          className={`px-3 py-1.5 rounded text-xs font-medium transition-colors ${placement === val ? 'bg-indigo-600 text-white' : 'bg-slate-700 text-gray-300 hover:bg-slate-600'}`}>
+                          {label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
             ) : (
               <p className="text-xs text-gray-500">{loadingMeta ? 'Chargement…' : 'Aucune famille disponible'}</p>
             )}