{label}

); }; // ─────────────────────────────────────────────────────────── // Promo banner (controlado desde Ajustes del panel) // ─────────────────────────────────────────────────────────── const PromoBanner = () => { const cv = window.CV_APPEARANCE || {}; if (!cv.promoActivo || !cv.promoTexto) return null; const tones = { verde: { bg: 'var(--primary)', fg: '#fff' }, terracota: { bg: 'var(--accent)', fg: '#fff' }, amarillo: { bg: 'var(--sun)', fg: 'var(--ink)' }, negro: { bg: '#1a1a1a', fg: '#fff' }, }; const t = tones[cv.promoColor] || tones.verde; return (

{cv.promoTexto}

); }; // ─────────────────────────────────────────────────────────── // User menu (dropdown del avatar del header) // ─────────────────────────────────────────────────────────── const UserMenu = ({ user, onLogout }) => { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const onDocClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onDocClick); return () => document.removeEventListener('mousedown', onDocClick); }, [open]); const firstName = user.name?.split(' ')[0] || 'Cuenta'; const isAdmin = user.role === 'admin'; return (

setOpen((o) => !o)} > {firstName} {open && (

{user.name}

{user.email}

{isAdmin && (

Admin

)}

{isAdmin && ( )}

)}

); }; // ─────────────────────────────────────────────────────────── // Header // ─────────────────────────────────────────────────────────── const Header = ({ route, navigate, cartCount, openCart, searchQuery, setSearchQuery, showImages, user, onLogout }) => { const cv = window.CV_APPEARANCE || {}; const brandName = cv.nombre || 'Casa Viva SRL'; return (

navigate('home')}>

{cv.logo ? (

) : ( )}

{brandName.split(' ')[0]}

{brandName.split(' ').slice(1).join(' ') || ''}

{user ? ( ) : ( navigate('login')} > Log In )}

); }; // ─────────────────────────────────────────────────────────── // Footer // ─────────────────────────────────────────────────────────── const Footer = ({ navigate, contact }) => ( ); // ─────────────────────────────────────────────────────────── // ProductCard // ─────────────────────────────────────────────────────────── const ProductCard = ({ p, onAdd, onOpen, justAdded, showImages }) => (

{p.badge &&

{p.badge}

} {showImages && (

onOpen(p.id)}>

)}

onOpen(p.id)}>{p.name}

{p.origin} por {p.unit}

); // ─────────────────────────────────────────────────────────── // CartDrawer // ─────────────────────────────────────────────────────────── const formatCurrency = (n) => `RD$${n.toLocaleString('es-DO', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`; const CartItemRow = ({ item, onInc, onDec, onRemove, onUnit }) => { const product = window.PRODUCTS.find(p => p.id === item.id); if (!product) return null; return (

{product.name}

{item.qty} {item.unit} · {product.origin}

{item.qty}

); }; const CartDrawer = ({ open, onClose, cart, onInc, onDec, onRemove, total, navigate, contact, openEmailForm }) => { if (!open) return null; const sendWA = () => { let msg = 'Hola, quiero cotizar estos productos:\n\n'; cart.forEach((it, i) => { const p = window.PRODUCTS.find(x => x.id === it.id); msg += `${i + 1}. ${p.name}, ${it.qty} ${it.unit}\n`; }); msg += `\nMi nombre:\nMi dirección:\nComentario adicional:`; const url = `https://wa.me/${contact.waRaw}?text=${encodeURIComponent(msg)}`; window.open(url, '_blank'); }; return ( <>

Tu cotización

{cart.length > 0 && {cart.length} {cart.length === 1 ? 'item' : 'items'}}

{cart.length === 0 ? (

∅

Tu carrito está vacío

Agrega productos para armar tu cotización. Lo confirmamos por WhatsApp o correo.

) : ( cart.map(it => ( )) )}

{cart.length > 0 && (

Productos{cart.length} en lista

Unidades{cart.reduce((s, i) => s + i.qty, 0)} unidades

Entrega estimadaPor confirmar

Te confirmaremos disponibilidad y precio por WhatsApp o correo en cuanto recibamos tu solicitud.

)}

); }; // ─────────────────────────────────────────────────────────── // Email cotización modal // ─────────────────────────────────────────────────────────── const EmailQuoteForm = ({ open, onClose, cart, total }) => { const [submitted, setSubmitted] = useState(false); const [loading, setLoading] = useState(false); const [form, setForm] = useState({ name: '', phone: '', email: '', address: '', note: '' }); if (!open) return null; const submit = async (e) => { e.preventDefault(); setLoading(true); try { const response = await api.quotationAPI.requestQuotation(form.email, form.name, form.phone); if (response.success) { setSubmitted(true); } else { alert('Error: ' + response.error); } } catch (error) { alert('Error enviando cotización: ' + error.message); } finally { setLoading(false); } }; return (

e.stopPropagation()}> {submitted ? ( <>

¡Solicitud enviada!

Gracias, {form.name}. Recibimos tu solicitud de cotización con {cart.length} productos.

Te responderemos en menos de 2 horas hábiles al correo {form.email} con disponibilidad y precio final.

¿Prefieres WhatsApp? Escríbenos y te atendemos de una.

) : ( <>

Cotización por correo

Solicita tu cotización

Nombre completo setForm({ ...form, name: e.target.value })} placeholder="Ej: María Pérez" />

Teléfono setForm({ ...form, phone: e.target.value })} placeholder="809 555 0000" />

Correo setForm({ ...form, email: e.target.value })} placeholder="tu@correo.com" />

Dirección de entrega setForm({ ...form, address: e.target.value })} placeholder="Calle, sector, ciudad" />

Comentario adicional

setForm({ ...form, note: e.target.value })} placeholder="Horario de entrega preferido, observaciones, etc." />
              </div>
              <div className="note" style={{ marginTop: 4 }}>
                <b>Productos en tu cotización:</b>
                <div style={{ marginTop: 6, fontFamily: 'var(--font-mono)', fontSize: 11.5, lineHeight: 1.7 }}>
                  {cart.map((it, i) => {
                    const p = window.PRODUCTS.find(x => x.id === it.id);
                    return <div key={it.id}>{i + 1}. {p?.name} — {it.qty} {it.unit}</div>;
                  })}
                </div>
              </div>
              <button type="submit" disabled={loading} className="btn btn-primary btn-block">
                <Icon name="mail" size={16} /> {loading ? 'Enviando...' : 'Enviar solicitud de cotización'}
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
};

// ───────────────────────────────────────────────────────────
// Floating WhatsApp
// ───────────────────────────────────────────────────────────
const FloatingWA = ({ contact }) => (
  <a className="wa-float" href={`https://wa.me/${contact.waRaw}`} target="_blank" rel="noopener" aria-label="WhatsApp">
    <Icon name="wa" size={26} />
  </a>
);

Object.assign(window, {
  Icon, Placeholder, Header, Footer, PromoBanner,
  ProductCard, CartDrawer, CartItemRow,
  EmailQuoteForm, FloatingWA, formatCurrency,
});