import { useState, useRef, useEffect } from 'react'; // Pencil Design Colors const colors = { primary: '#213A7E', primaryDark: '#152850', primaryLight: '#4A6BA8', textDark: '#1A1A1A', textBody: '#444444', textGray: '#666666', textLight: '#888888', bgLight: '#FAFAFA', border: '#E5E5E5', white: '#FFFFFF', success: '#22C55E', }; const TOTAL_QUOTA = 8; // ---------- Config-driven product definitions ---------- type ProductKey = 'maleta' | 'mochila' | 'bolso'; interface Option { id: string; title: string; desc?: string; } interface Question { key: string; label: string; layout: 'cards' | 'grid'; options: Option[]; } interface ProductConfig { label: string; article: string; // "tu maleta" questions: Question[]; caracteristicas: string[]; referenceHint: string; referenceRecommended: boolean; } const COLOR_OPTS = [ { name: 'Negro', hex: '#1A1A1A' }, { name: 'Azul marino', hex: '#213A7E' }, { name: 'Gris', hex: '#8A8F98' }, { name: 'Vino', hex: '#7B2233' }, { name: 'Verde', hex: '#2F5D50' }, { name: 'Rosa', hex: '#D98BA6' }, { name: 'Dorado', hex: '#C8A24B' }, { name: 'Plata', hex: '#C4C7CC' }, ]; const PRODUCTS: Record = { maleta: { label: 'Maleta', article: 'tu maleta', questions: [ { key: 'construccion', label: 'CONSTRUCCIÓN', layout: 'cards', options: [ { id: 'rigida', title: 'Rígida', desc: 'Cáscara dura (PC / ABS). Protección máxima.' }, { id: 'blanda', title: 'Blanda', desc: 'Tela flexible (nylon / poliéster). Más ligera y expandible.' }, ], }, { key: 'tamano', label: 'TAMAÑO', layout: 'grid', options: [ { id: 'cabina', title: 'Cabina', desc: '20" · carry-on' }, { id: 'mediana', title: 'Mediana', desc: '24" · documentada' }, { id: 'grande', title: 'Grande', desc: '28" · viaje largo' }, { id: 'set', title: 'Set', desc: '3 piezas' }, ], }, ], caracteristicas: ['Candado TSA', 'Expandible', 'Ruedas 360°', 'Puerto USB'], referenceHint: '¿Tienes una maleta o estilo que te gusta? Súbela y creamos tu versión.', referenceRecommended: false, }, mochila: { label: 'Mochila', article: 'tu mochila', questions: [ { key: 'tipo', label: 'TIPO', layout: 'grid', options: [ { id: 'laptop', title: 'Laptop', desc: 'Trabajo / oficina' }, { id: 'viaje', title: 'Viaje', desc: 'Cabina / expandible' }, { id: 'casual', title: 'Casual', desc: 'Diario / urbano' }, { id: 'outdoor', title: 'Outdoor', desc: 'Senderismo / técnica' }, ], }, { key: 'tamano', label: 'CAPACIDAD', layout: 'grid', options: [ { id: 'peque', title: 'Pequeña', desc: '15–20 L' }, { id: 'media', title: 'Mediana', desc: '25–30 L' }, { id: 'grande', title: 'Grande', desc: '35 L+' }, ], }, ], caracteristicas: ['Compartimento laptop', 'Puerto USB', 'Antirrobo', 'Impermeable', 'Correa de trolley'], referenceHint: '¿Un modelo que te inspira? Súbelo y adaptamos el estilo a tu marca.', referenceRecommended: false, }, bolso: { label: 'Bolso', article: 'tu bolso', questions: [ { key: 'tipo', label: 'ESTILO', layout: 'grid', options: [ { id: 'tote', title: 'Tote', desc: 'Amplio / diario' }, { id: 'crossbody', title: 'Crossbody', desc: 'Bandolera' }, { id: 'clutch', title: 'Clutch', desc: 'De mano / noche' }, { id: 'weekender', title: 'Weekender', desc: 'Fin de semana' }, ], }, { key: 'material', label: 'MATERIAL', layout: 'grid', options: [ { id: 'nylon', title: 'Nylon', desc: 'Ligero / resistente' }, { id: 'lona', title: 'Lona', desc: 'Casual / natural' }, { id: 'piel', title: 'Piel sint.', desc: 'Elegante / premium' }, { id: 'poli', title: 'Poliéster', desc: 'Económico / versátil' }, ], }, ], caracteristicas: ['Cierre magnético', 'Correa ajustable', 'Herrajes dorados'], referenceHint: 'Recomendado: sube una referencia del bolso que te gusta — el estilo de bolso es muy variado.', referenceRecommended: true, }, }; // ---------- Product silhouettes ---------- function Silhouette({ product, hex }: { product: ProductKey; hex: string }) { const common = { fill: hex }; if (product === 'mochila') { return ( ); } if (product === 'bolso') { return ( ); } // maleta (default) return ( ); } interface Prefill { nombre?: string; empresa?: string; email?: string; whatsapp?: string; } interface Props { product?: ProductKey; prefill?: Prefill; } interface ColorState { name: string; hex: string; } export default function ProductCreator({ product: initialProduct, prefill }: Props) { const [product, setProduct] = useState(initialProduct ?? null); const [step, setStep] = useState(1); const [selections, setSelections] = useState>({}); const [color, setColor] = useState(COLOR_OPTS[1]); const [caracteristicas, setCaracteristicas] = useState([]); const [superficie, setSuperficie] = useState(null); const [disenoTexto, setDisenoTexto] = useState(''); const [refImg, setRefImg] = useState(null); const [logoImg, setLogoImg] = useState(null); const [generating, setGenerating] = useState(false); const [generated, setGenerated] = useState(false); const [used, setUsed] = useState(0); // Color picker modes const [eyedropOpen, setEyedropOpen] = useState(false); const [eyedropImg, setEyedropImg] = useState(null); // Quote modal const [showQuote, setShowQuote] = useState(false); const [quoteSent, setQuoteSent] = useState(false); const [form, setForm] = useState({ nombre: prefill?.nombre ?? '', empresa: prefill?.empresa ?? '', email: prefill?.email ?? '', whatsapp: prefill?.whatsapp ?? '', mensaje: '', }); const refInput = useRef(null); const logoInput = useRef(null); const eyedropInput = useRef(null); const canvasRef = useRef(null); // Restore config from URL (design link) after mount — lets sales reopen a design useEffect(() => { if (typeof window === 'undefined') return; const p = new URLSearchParams(window.location.search); const prod = p.get('producto') as ProductKey | null; if (prod && PRODUCTS[prod]) { setProduct(prod); const restored: Record = {}; PRODUCTS[prod].questions.forEach((q) => { const v = p.get(q.key); if (v) restored[q.key] = v; }); if (Object.keys(restored).length) setSelections(restored); const hex = p.get('color'); if (hex) setColor({ name: 'Personalizado', hex }); const extras = p.get('extras'); if (extras) setCaracteristicas(extras.split(',').filter(Boolean)); const sup = p.get('superficie'); if (sup) setSuperficie(sup); const dis = p.get('diseno'); if (dis) setDisenoTexto(dis); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const cfg = product ? PRODUCTS[product] : null; const stepLabels = ['Detalles', 'Color', 'Personalización', 'Resultado']; const remaining = TOTAL_QUOTA - used; // Surface-design chips — "Relieve" only makes sense on hard-shell luggage (in-mold) const surfaceChips = ['Liso', 'Rayas', 'Degradado', 'Estampado']; if (product === 'maleta' && selections.construccion === 'rigida') { surfaceChips.splice(3, 0, 'Relieve'); } const pickProduct = (p: ProductKey) => { setProduct(p); setSelections({}); setStep(1); setGenerated(false); }; const select = (qKey: string, optId: string) => setSelections((prev) => ({ ...prev, [qKey]: optId })); const toggleCaracteristica = (c: string) => setCaracteristicas((prev) => (prev.includes(c) ? prev.filter((x) => x !== c) : [...prev, c])); const readFile = (file: File, setter: (v: string) => void) => { const reader = new FileReader(); reader.onload = () => setter(reader.result as string); reader.readAsDataURL(file); }; const canContinue = () => { if (!cfg) return false; if (step === 1) return cfg.questions.every((q) => selections[q.key]); return true; }; const goGenerate = () => { setGenerating(true); setGenerated(false); // MOCK — real model call goes here later setTimeout(() => { setGenerating(false); setGenerated(true); setUsed((u) => Math.min(TOTAL_QUOTA, u + 1)); }, 2600); }; const optTitle = (qKey: string) => { if (!cfg) return '—'; const q = cfg.questions.find((x) => x.key === qKey); const o = q?.options.find((x) => x.id === selections[qKey]); return o?.title ?? '—'; }; // ---- Eyedropper: pick color from an uploaded image ---- const loadEyedropImage = (file: File) => { const reader = new FileReader(); reader.onload = () => { const src = reader.result as string; setEyedropImg(src); const img = new Image(); img.onload = () => { const canvas = canvasRef.current; if (!canvas) return; const maxW = 460; const scale = Math.min(1, maxW / img.width); canvas.width = Math.round(img.width * scale); canvas.height = Math.round(img.height * scale); const ctx = canvas.getContext('2d'); ctx?.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = src; }; reader.readAsDataURL(file); }; const pickColorFromCanvas = (e: React.MouseEvent) => { const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const x = Math.round((e.clientX - rect.left) * (canvas.width / rect.width)); const y = Math.round((e.clientY - rect.top) * (canvas.height / rect.height)); const ctx = canvas.getContext('2d'); const d = ctx?.getImageData(x, y, 1, 1).data; if (!d) return; const hex = '#' + [d[0], d[1], d[2]].map((v) => v.toString(16).padStart(2, '0')).join(''); setColor({ name: 'De imagen', hex }); }; // ---- Design link: encode config so it can be reopened ---- const buildDesignLink = () => { if (typeof window === 'undefined' || !product) return ''; const p = new URLSearchParams(); p.set('producto', product); Object.entries(selections).forEach(([k, v]) => p.set(k, v)); p.set('color', color.hex); if (caracteristicas.length) p.set('extras', caracteristicas.join(',')); if (superficie) p.set('superficie', superficie); if (disenoTexto.trim()) p.set('diseno', disenoTexto.trim()); return `${window.location.origin}/es/crea-tu-producto?${p.toString()}`; }; const submitQuote = () => { // MOCK — later POSTs to lead endpoint with design context + token identity setQuoteSent(true); }; // ---------- PRODUCT PICKER ---------- if (!product || !cfg) { return (
{(Object.keys(PRODUCTS) as ProductKey[]).map((p) => ( ))}
); } return (
{/* Progress */}
{stepLabels.map((label, i) => { const n = i + 1; const active = n === step; const done = n < step; return (
{done ? '✓' : n}
{label} {n < 4 &&
}
); })}
{/* STEP 1 — dynamic category questions */} {step === 1 && (

Diseña {cfg.article}

Elige las características principales. Podrás afinar color y marca después.

{cfg.questions.map((q, qi) => (
{q.label}
{q.options.map((o) => ( ))}
))}
)} {/* STEP 2 — color + features */} {step === 2 && (

Elige el color base

Es el punto de partida — el color exacto y acabado se afina en producción.

COLOR
{COLOR_OPTS.map((c) => ( ))}
{/* Custom color + eyedropper */}
{ if (e.target.files?.[0]) { setEyedropOpen(true); loadEyedropImage(e.target.files[0]); } }} />
{eyedropOpen && eyedropImg && (

Toca cualquier punto de la imagen para tomar ese color.

{color.hex.toUpperCase()}
)} CARACTERÍSTICAS (opcional)
{cfg.caracteristicas.map((c) => ( ))}
)} {/* STEP 3 — personalization */} {step === 3 && (

Personalización (opcional)

Describe el diseño que imaginas, sube una referencia y/o tu logo. Todo ayuda a acercar el resultado a lo que buscas.

{/* Surface design — technique (chip) + content (text) work together */} ACABADO cómo se aplica
{surfaceChips.map((s) => ( ))}
DESCRIBE TU DISEÑO qué quieres ver