feat(booking): display luminous custom design specification attachment card and auto-check services

src/components/BookingForm.tsx

@@ -4,6 +4,12 @@ import React, { useState, useEffect } from 'react';
 
 export default function BookingForm() {
   const [submitted, setSubmitted] = useState(false);
+  const [attachedDesign, setAttachedDesign] = useState<{
+    eventType: string;
+    vision: string;
+    services: string[];
+  } | null>(null);
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -19,10 +25,34 @@ export default function BookingForm() {
   useEffect(() => {
     const handlePrefill = (e: any) => {
       if (e.detail) {
+        const detail = e.detail;
+        setAttachedDesign(detail);
+
+        // Map event type string to dropdown value
+        let mappedType = 'Birthday Party';
+        const lowerType = (detail.eventType || '').toLowerCase();
+        if (lowerType.includes('wedding')) mappedType = 'Wedding / Engagement';
+        else if (lowerType.includes('baby')) mappedType = 'Baby Shower';
+        else if (lowerType.includes('graduation')) mappedType = 'Graduation';
+        else if (lowerType.includes('corporate') || lowerType.includes('gala')) mappedType = 'Corporate / Grand Opening';
+        else if (lowerType.includes('themed') || lowerType.includes('1st')) mappedType = 'Holiday / Themed Party';
+
+        // Auto-check corresponding checkboxes
+        const mappedServices: string[] = [];
+        if (detail.vision) {
+          if (detail.vision.includes('Balloon')) mappedServices.push('Organic Balloon Garland');
+          if (detail.vision.includes('Arch') || detail.vision.includes('Panel')) mappedServices.push('Custom Arched Backdrops');
+          if (detail.vision.includes('Floral') || detail.vision.includes('Botanical')) mappedServices.push('Faux Florals & Greenery');
+          if (detail.vision.includes('Mosaic') || detail.vision.includes('Letter')) mappedServices.push('Mosaic Letters / Numbers');
+          if (detail.vision.includes('Drink') || detail.vision.includes('Station')) mappedServices.push('Beverage / Dessert Station');
+          if (detail.vision.includes('Gold') || detail.vision.includes('Styling')) mappedServices.push('Full Event Styling Package');
+        }
+
         setFormData(prev => ({
           ...prev,
-          eventType: e.detail.eventType || prev.eventType,
+          eventType: mappedType,
-          vision: e.detail.vision ? (prev.vision ? `${e.detail.vision}\n\nAdditional Notes:\n${prev.vision}` : e.detail.vision) : prev.vision,
+          services: Array.from(new Set([...prev.services, ...mappedServices])),
+          vision: detail.vision || prev.vision,
         }));
       }
     };
@@ -77,7 +107,7 @@ export default function BookingForm() {
           padding: '10px 20px',
           textAlign: 'center',
           maxWidth: '680px',
-          margin: '0 auto 30px',
+          margin: '0 auto 24px',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -89,6 +119,47 @@ export default function BookingForm() {
           <span><strong>2026/2027 Calendar Open:</strong> Weekend dates book 4–8 weeks in advance. Reserve early to lock in your date!</span>
         </div>
 
+        {/* Dynamic Studio Design Specification Attachment Card */}
+        {attachedDesign && (
+          <div style={{
+            background: 'linear-gradient(135deg, rgba(224, 0, 111, 0.18) 0%, rgba(212, 175, 55, 0.18) 100%)',
+            border: '2px solid var(--color-gold)',
+            borderRadius: '16px',
+            padding: '18px 22px',
+            marginBottom: '24px',
+            boxShadow: '0 10px 30px rgba(212, 175, 55, 0.2)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '12px',
+            animation: 'slideUpBar 0.3s ease',
+          }}>
+            <div>
+              <div style={{ fontSize: '0.78rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: '4px' }}>
+                ✨ Custom Design Spec Attached from Studio
+              </div>
+              <div style={{ fontSize: '1.05rem', fontWeight: 800, color: '#FFFFFF' }}>
+                {attachedDesign.eventType}
+              </div>
+              <div style={{ fontSize: '0.84rem', color: '#CBD5E1', marginTop: '2px' }}>
+                Your custom palette and decor choices have been automatically loaded into your quote request below.
+              </div>
+            </div>
+            <a 
+              href="#custom-studio" 
+              style={{ 
+                fontSize: '0.8rem', 
+                color: 'var(--color-gold-light)', 
+                textDecoration: 'underline',
+                fontWeight: 700,
+              }}
+            >
+              Edit in Studio ↗
+            </a>
+          </div>
+        )}
+
         {/* Form Box */}
         <div className="glass-panel" style={{
           padding: 'clamp(20px, 4vw, 36px)',