.elementor-29 .elementor-element.elementor-element-7ff4b3a{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-a3d99c7.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-29 .elementor-element.elementor-element-7ff4b3a{--width:100%;}}/* Start custom CSS */import React, { useState, useEffect } from 'react';
import { 
  Package, 
  ShoppingCart, 
  FileText, 
  Bell, 
  Plus, 
  Trash2, 
  Edit, 
  Search, 
  User, 
  Check, 
  X, 
  LogOut,
  ChevronRight,
  DollarSign,
  Send,
  Image as ImageIcon,
  MessageCircle // Ícone do WhatsApp
} from 'lucide-react';

// --- Dados Iniciais Mockados (Traduzidos) ---
const INITIAL_PRODUCTS = [
  { id: 1, name: 'Bomba Industrial X200', description: 'Bomba de água de alta capacidade para uso industrial.', image: 'https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?auto=format&fit=crop&q=80&w=400', category: 'Maquinário' },
  { id: 2, name: 'Válvula de Segurança A1', description: 'Válvula de segurança padrão em latão, limite de 100psi.', image: 'https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=400', category: 'Componentes' },
  { id: 3, name: 'Segmento de Correia', description: 'Correia de borracha reforçada, resistente ao calor.', image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=400', category: 'Peças' },
];

export default function ProductCatalogApp() {
  // --- Estado ---
  const [role, setRole] = useState('admin'); // 'admin' | 'customer'
  const [activeTab, setActiveTab] = useState('products');
  
  // Configuração do WhatsApp do Admin (Para demonstração)
  const ADMIN_PHONE_NUMBER = "5511999999999"; // Substitua pelo seu número real no formato internacional

  // Estado dos Dados
  const [products, setProducts] = useState(() => {
    const saved = localStorage.getItem('mvp_products');
    return saved ? JSON.parse(saved) : INITIAL_PRODUCTS;
  });
  
  const [quotes, setQuotes] = useState(() => {
    const saved = localStorage.getItem('mvp_quotes');
    return saved ? JSON.parse(saved) : [];
  });

  const [cart, setCart] = useState([]); // Array de { productId, quantity }

  // Estado da UI
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentProduct, setCurrentProduct] = useState(null); // Para edição
  const [searchTerm, setSearchTerm] = useState('');
  const [notificationCount, setNotificationCount] = useState(0);

  // --- Efeitos ---
  useEffect(() => {
    localStorage.setItem('mvp_products', JSON.stringify(products));
  }, [products]);

  useEffect(() => {
    localStorage.setItem('mvp_quotes', JSON.stringify(quotes));
    // Atualizar contagem de notificações (Orçamentos pendentes)
    const pending = quotes.filter(q => q.status === 'pending').length;
    setNotificationCount(pending);
  }, [quotes]);

  // --- Ações: Produtos ---
  const handleSaveProduct = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const newProduct = {
      id: currentProduct ? currentProduct.id : Date.now(),
      name: formData.get('name'),
      description: formData.get('description'),
      image: formData.get('image') || 'https://placehold.co/400', // Fallback
      category: 'Geral'
    };

    if (currentProduct) {
      setProducts(products.map(p => p.id === newProduct.id ? newProduct : p));
    } else {
      setProducts([...products, newProduct]);
    }
    setIsModalOpen(false);
    setCurrentProduct(null);
  };

  const handleDeleteProduct = (id) => {
    if (confirm('Tem certeza que deseja excluir este produto?')) {
      setProducts(products.filter(p => p.id !== id));
    }
  };

  // --- Ações: Carrinho & Orçamentos ---
  const addToCart = (productId, qty) => {
    const existing = cart.find(item => item.productId === productId);
    if (existing) {
      setCart(cart.map(item => item.productId === productId ? { ...item, quantity: item.quantity + parseInt(qty) } : item));
    } else {
      setCart([...cart, { productId, quantity: parseInt(qty) }]);
    }
    alert("Adicionado ao Pedido de Orçamento!");
  };

  const submitQuoteRequest = () => {
    if (cart.length === 0) return;
    
    // 1. Criar o objeto do pedido internamente
    const newQuote = {
      id: Date.now(),
      customerName: 'Cliente Demo',
      status: 'pending', // pending -> priced -> sent
      timestamp: new Date().toISOString(),
      items: cart.map(c => {
        const prod = products.find(p => p.id === c.productId);
        return { ...c, name: prod?.name, priceProposed: 0 };
      })
    };

    // 2. Preparar Mensagem do WhatsApp
    const whatsappMessage = `Olá! Gostaria de solicitar um orçamento:
    
*Cliente:* ${newQuote.customerName}
*ID do Pedido:* ${newQuote.id}
    
*Itens:*
${newQuote.items.map(item => `- ${item.quantity}x ${item.name}`).join('\n')}
    
Aguardo o retorno!`;

    // 3. Gerar Link do WhatsApp
    const whatsappUrl = `https://wa.me/${ADMIN_PHONE_NUMBER}?text=${encodeURIComponent(whatsappMessage)}`;

    // 4. Salvar estado e abrir WhatsApp
    setQuotes([newQuote, ...quotes]);
    setCart([]);
    setActiveTab('my-quotes');
    
    // Abre o WhatsApp em nova aba
    window.open(whatsappUrl, '_blank'); 
    
    alert("Pedido registrado! Redirecionando para o WhatsApp...");
  };

  // --- Ações: Gestão de Orçamentos (Admin) ---
  const handlePriceUpdate = (quoteId, itemId, price) => {
    setQuotes(quotes.map(q => {
      if (q.id !== quoteId) return q;
      return {
        ...q,
        items: q.items.map(item => item.productId === itemId ? { ...item, priceProposed: parseFloat(price) } : item)
      };
    }));
  };

  const submitPricing = (quoteId) => {
    setQuotes(quotes.map(q => {
      if (q.id !== quoteId) return q;
      return { ...q, status: 'priced', pricedAt: new Date().toISOString() };
    }));
    alert("Orçamento enviado de volta para o cliente!");
  };

  // --- Auxiliares de Renderização ---
  const filteredProducts = products.filter(p => 
    p.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    p.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gray-50 text-slate-800 font-sans">
      
      {/* Barra de Navegação Superior */}
      <nav className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center gap-2">
              <div className="bg-blue-600 p-2 rounded-lg">
                <Package className="h-6 w-6 text-white" />
              </div>
              <span className="font-bold text-xl tracking-tight text-slate-900">ProCatalog <span className="text-blue-600">MVP</span></span>
            </div>
            
            <div className="flex items-center gap-4">
              {/* Alternador de Papel para Demo */}
              <div className="hidden md:flex bg-gray-100 rounded-lg p-1">
                <button 
                  onClick={() => { setRole('admin'); setActiveTab('products'); }}
                  className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${role === 'admin' ? 'bg-white shadow-sm text-blue-700' : 'text-gray-500 hover:text-gray-700'}`}
                >
                  Visão Admin
                </button>
                <button 
                  onClick={() => { setRole('customer'); setActiveTab('catalog'); }}
                  className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${role === 'customer' ? 'bg-white shadow-sm text-green-700' : 'text-gray-500 hover:text-gray-700'}`}
                >
                  Visão Cliente
                </button>
              </div>

              {role === 'customer' && (
                <div className="relative cursor-pointer" onClick={() => setActiveTab('cart')}>
                  <ShoppingCart className="h-6 w-6 text-gray-600 hover:text-blue-600" />
                  {cart.length > 0 && (
                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
                      {cart.length}
                    </span>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </nav>

      <div className="flex max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 gap-6">
        
        {/* Navegação Lateral */}
        <aside className="w-64 flex-shrink-0 hidden md:block">
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sticky top-24">
            <div className="flex items-center gap-3 mb-6 px-2">
              <div className={`h-2 w-2 rounded-full ${role === 'admin' ? 'bg-blue-500' : 'bg-green-500'}`}></div>
              <span className="text-sm font-semibold uppercase tracking-wider text-gray-500">Portal {role === 'admin' ? 'Admin' : 'Cliente'}</span>
            </div>
            
            <nav className="space-y-1">
              {role === 'admin' ? (
                <>
                  <SidebarItem icon={Package} label="Gestão de Produtos" active={activeTab === 'products'} onClick={() => setActiveTab('products')} />
                  <SidebarItem 
                    icon={Bell} 
                    label="Pedidos de Orçamento" 
                    active={activeTab === 'admin-quotes'} 
                    onClick={() => setActiveTab('admin-quotes')} 
                    badge={notificationCount}
                  />
                </>
              ) : (
                <>
                  <SidebarItem icon={Search} label="Navegar no Catálogo" active={activeTab === 'catalog'} onClick={() => setActiveTab('catalog')} />
                  <SidebarItem icon={ShoppingCart} label="Meu Carrinho" active={activeTab === 'cart'} onClick={() => setActiveTab('cart')} badge={cart.length} />
                  <SidebarItem icon={FileText} label="Status dos Orçamentos" active={activeTab === 'my-quotes'} onClick={() => setActiveTab('my-quotes')} />
                </>
              )}
            </nav>
          </div>
        </aside>

        {/* Área Principal de Conteúdo */}
        <main className="flex-1">
          {/* Alternador de Papel Mobile */}
          <div className="md:hidden mb-6 flex justify-center">
             <div className="bg-gray-100 rounded-lg p-1 inline-flex">
                <button 
                  onClick={() => { setRole('admin'); setActiveTab('products'); }}
                  className={`px-4 py-1.5 rounded-md text-sm font-medium ${role === 'admin' ? 'bg-white shadow-sm text-blue-700' : 'text-gray-500'}`}
                >
                  Admin
                </button>
                <button 
                  onClick={() => { setRole('customer'); setActiveTab('catalog'); }}
                  className={`px-4 py-1.5 rounded-md text-sm font-medium ${role === 'customer' ? 'bg-white shadow-sm text-green-700' : 'text-gray-500'}`}
                >
                  Cliente
                </button>
              </div>
          </div>

          {/* ADMIN: GESTÃO DE PRODUTOS */}
          {role === 'admin' && activeTab === 'products' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h1 className="text-2xl font-bold text-gray-900">Gestão de Produtos</h1>
                <button 
                  onClick={() => { setCurrentProduct(null); setIsModalOpen(true); }}
                  className="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-700 transition-colors"
                >
                  <Plus size={18} /> Adicionar Produto
                </button>
              </div>

              <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div className="p-4 border-b border-gray-100 bg-gray-50 flex gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                    <input 
                      type="text" 
                      placeholder="Buscar produtos..." 
                      className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                </div>
                
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-sm">
                    <thead className="bg-gray-50 text-gray-600">
                      <tr>
                        <th className="px-6 py-4 font-medium">Produto</th>
                        <th className="px-6 py-4 font-medium">Categoria</th>
                        <th className="px-6 py-4 font-medium text-right">Ações</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100">
                      {filteredProducts.map(product => (
                        <tr key={product.id} className="hover:bg-gray-50 group">
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-4">
                              <img src={product.image} alt="" className="h-10 w-10 rounded-md object-cover bg-gray-200" />
                              <div>
                                <div className="font-medium text-gray-900">{product.name}</div>
                                <div className="text-gray-500 truncate max-w-xs">{product.description}</div>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 text-gray-500">{product.category}</td>
                          <td className="px-6 py-4 text-right">
                            <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                              <button onClick={() => { setCurrentProduct(product); setIsModalOpen(true); }} className="p-1 hover:bg-gray-200 rounded text-gray-600">
                                <Edit size={16} />
                              </button>
                              <button onClick={() => handleDeleteProduct(product.id)} className="p-1 hover:bg-red-50 rounded text-red-500">
                                <Trash2 size={16} />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                      {filteredProducts.length === 0 && (
                        <tr><td colSpan="3" className="text-center py-8 text-gray-400">Nenhum produto encontrado</td></tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

          {/* ADMIN: GESTÃO DE ORÇAMENTOS */}
          {role === 'admin' && activeTab === 'admin-quotes' && (
            <div className="space-y-6">
               <h1 className="text-2xl font-bold text-gray-900">Pedidos Recebidos</h1>
               <div className="space-y-4">
                 {quotes.length === 0 ? (
                   <div className="text-center py-12 bg-white rounded-xl border border-dashed border-gray-300">
                     <p className="text-gray-500">Nenhum pedido de orçamento ainda.</p>
                   </div>
                 ) : (
                   quotes.map(quote => (
                     <div key={quote.id} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                       <div className="p-6 border-b border-gray-100 flex justify-between items-start bg-gray-50">
                         <div>
                           <div className="flex items-center gap-3 mb-1">
                             <h3 className="font-semibold text-gray-900">{quote.customerName}</h3>
                             <StatusBadge status={quote.status} />
                           </div>
                           <p className="text-sm text-gray-500">Solicitado em {new Date(quote.timestamp).toLocaleDateString('pt-BR')}</p>
                         </div>
                         {quote.status === 'pending' && (
                           <button 
                             onClick={() => submitPricing(quote.id)}
                             className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 flex items-center gap-2"
                           >
                             <Send size={14} /> Enviar Orçamento
                           </button>
                         )}
                       </div>
                       <div className="p-6">
                         <div className="space-y-4">
                           {quote.items.map(item => (
                             <div key={item.productId} className="flex items-center justify-between p-3 rounded-lg border border-gray-100">
                               <div className="flex items-center gap-4">
                                 <div className="h-8 w-8 bg-gray-100 rounded flex items-center justify-center text-xs font-bold text-gray-500">
                                   x{item.quantity}
                                 </div>
                                 <span className="font-medium text-gray-700">{item.name}</span>
                               </div>
                               <div className="flex items-center gap-2">
                                 <span className="text-sm text-gray-500">Preço Unit.:</span>
                                 {quote.status === 'pending' ? (
                                   <div className="relative">
                                     <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">R$</span>
                                     <input 
                                       type="number" 
                                       className="w-24 pl-8 pr-2 py-1 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                       placeholder="0.00"
                                       onChange={(e) => handlePriceUpdate(quote.id, item.productId, e.target.value)}
                                     />
                                   </div>
                                 ) : (
                                   <span className="font-mono font-medium">R$ {item.priceProposed?.toFixed(2) || '0.00'}</span>
                                 )}
                               </div>
                             </div>
                           ))}
                         </div>
                         {quote.status !== 'pending' && (
                           <div className="mt-4 flex justify-end pt-4 border-t border-gray-100">
                             <div className="text-right">
                               <span className="text-sm text-gray-500 block">Valor Total Orçado</span>
                               <span className="text-xl font-bold text-gray-900">
                                 R$ {quote.items.reduce((acc, i) => acc + (i.priceProposed * i.quantity), 0).toFixed(2)}
                               </span>
                             </div>
                           </div>
                         )}
                       </div>
                     </div>
                   ))
                 )}
               </div>
            </div>
          )}

          {/* CLIENTE: CATÁLOGO */}
          {role === 'customer' && activeTab === 'catalog' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h1 className="text-2xl font-bold text-gray-900">Catálogo de Produtos</h1>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                  <input 
                    type="text" 
                    placeholder="Buscar no catálogo..." 
                    className="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-green-500 w-64"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredProducts.map(product => (
                  <ProductCard key={product.id} product={product} onAdd={addToCart} />
                ))}
              </div>
            </div>
          )}

          {/* CLIENTE: CARRINHO */}
          {role === 'customer' && activeTab === 'cart' && (
            <div className="space-y-6">
              <h1 className="text-2xl font-bold text-gray-900">Resumo do Pedido</h1>
              {cart.length === 0 ? (
                <div className="text-center py-12 bg-white rounded-xl border border-dashed border-gray-300">
                  <ShoppingCart className="h-12 w-12 text-gray-300 mx-auto mb-3" />
                  <p className="text-gray-500">Seu carrinho de orçamentos está vazio.</p>
                  <button onClick={() => setActiveTab('catalog')} className="mt-4 text-blue-600 font-medium hover:underline">Navegar no Catálogo</button>
                </div>
              ) : (
                <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                  <div className="p-6 space-y-4">
                    {cart.map((item, idx) => {
                       const prod = products.find(p => p.id === item.productId);
                       return (
                         <div key={idx} className="flex items-center justify-between border-b border-gray-50 pb-4 last:border-0 last:pb-0">
                           <div className="flex items-center gap-4">
                             <img src={prod?.image} className="h-16 w-16 rounded object-cover bg-gray-100" />
                             <div>
                               <h3 className="font-medium text-gray-900">{prod?.name || 'Produto Desconhecido'}</h3>
                               <p className="text-sm text-gray-500">{prod?.category}</p>
                             </div>
                           </div>
                           <div className="flex items-center gap-6">
                             <div className="text-sm text-gray-500">Qtd: <span className="font-bold text-gray-900">{item.quantity}</span></div>
                             <button 
                               onClick={() => setCart(cart.filter((_, i) => i !== idx))}
                               className="text-red-400 hover:text-red-600"
                             >
                               <X size={18} />
                             </button>
                           </div>
                         </div>
                       );
                    })}
                  </div>
                  <div className="bg-gray-50 p-6 flex justify-end">
                    <button 
                      onClick={submitQuoteRequest}
                      className="bg-green-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-green-700 shadow-sm transition-transform active:scale-95 flex items-center gap-2"
                    >
                      <MessageCircle size={20} />
                      Enviar Pedido e Notificar no WhatsApp
                    </button>
                  </div>
                  <p className="text-center text-xs text-gray-400 pb-4">
                    Isso abrirá seu WhatsApp para enviar os detalhes ao vendedor.
                  </p>
                </div>
              )}
            </div>
          )}

           {/* CLIENTE: STATUS DO ORÇAMENTO */}
           {role === 'customer' && activeTab === 'my-quotes' && (
            <div className="space-y-6">
              <h1 className="text-2xl font-bold text-gray-900">Histórico de Orçamentos</h1>
              <div className="space-y-4">
                {quotes.filter(q => q.customerName === 'Cliente Demo').length === 0 ? (
                  <p className="text-gray-500">Você ainda não enviou nenhum pedido.</p>
                ) : (
                   quotes.filter(q => q.customerName === 'Cliente Demo').map(quote => (
                     <div key={quote.id} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                       <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
                         <div>
                            <span className="text-xs text-gray-500 font-medium">ID PEDIDO: #{quote.id.toString().slice(-6)}</span>
                            <div className="text-sm text-gray-500">{new Date(quote.timestamp).toLocaleDateString('pt-BR')}</div>
                         </div>
                         <StatusBadge status={quote.status} />
                       </div>
                       <div className="p-4">
                         <div className="space-y-2">
                           {quote.items.map((item, i) => (
                             <div key={i} className="flex justify-between text-sm">
                               <span className="text-gray-700">{item.quantity}x {item.name}</span>
                               {quote.status === 'priced' ? (
                                 <span className="font-mono">R$ {(item.priceProposed * item.quantity).toFixed(2)}</span>
                               ) : (
                                 <span className="text-gray-400 italic">--</span>
                               )}
                             </div>
                           ))}
                         </div>
                         {quote.status === 'priced' && (
                           <div className="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
                             <span className="font-medium text-gray-900">Preço Total</span>
                             <span className="text-xl font-bold text-green-600">
                               R$ {quote.items.reduce((acc, i) => acc + (i.priceProposed * i.quantity), 0).toFixed(2)}
                             </span>
                           </div>
                         )}
                       </div>
                     </div>
                   ))
                )}
              </div>
            </div>
          )}

        </main>
      </div>

      {/* Modal Adicionar/Editar Produto */}
      {isModalOpen && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
          <div className="bg-white rounded-xl shadow-xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in duration-200">
            <div className="p-6 border-b border-gray-100 flex justify-between items-center">
              <h3 className="font-bold text-lg">{currentProduct ? 'Editar Produto' : 'Adicionar Novo Produto'}</h3>
              <button onClick={() => setIsModalOpen(false)}><X className="text-gray-400 hover:text-gray-600" /></button>
            </div>
            <form onSubmit={handleSaveProduct} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nome do Produto</label>
                <input required name="name" defaultValue={currentProduct?.name} className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
                <textarea required name="description" defaultValue={currentProduct?.description} rows="3" className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">URL da Imagem</label>
                <div className="flex gap-2">
                   <input name="image" defaultValue={currentProduct?.image} placeholder="https://..." className="flex-1 border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none" />
                   <div className="h-10 w-10 bg-gray-100 rounded border border-gray-200 flex items-center justify-center">
                     <ImageIcon size={16} className="text-gray-400"/>
                   </div>
                </div>
                <p className="text-xs text-gray-400 mt-1">Cole uma URL ou deixe em branco para padrão</p>
              </div>
              <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 font-medium">Salvar Produto</button>
            </form>
          </div>
        </div>
      )}

    </div>
  );
}

// --- Subcomponentes ---

function SidebarItem({ icon: Icon, label, active, onClick, badge }) {
  return (
    <button 
      onClick={onClick}
      className={`w-full flex items-center justify-between px-4 py-3 rounded-lg text-sm font-medium transition-colors mb-1 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50'}`}
    >
      <div className="flex items-center gap-3">
        <Icon size={18} className={active ? 'text-blue-600' : 'text-gray-400'} />
        {label}
      </div>
      {badge > 0 && (
        <span className="bg-red-100 text-red-600 py-0.5 px-2 rounded-full text-xs font-bold">
          {badge}
        </span>
      )}
    </button>
  );
}

function ProductCard({ product, onAdd }) {
  const [qty, setQty] = useState(1);
  
  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow overflow-hidden flex flex-col">
      <div className="h-48 overflow-hidden bg-gray-100 relative group">
        <img src={product.image} alt={product.name} className="w-full h-full object-cover transition-transform group-hover:scale-105" />
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
      </div>
      <div className="p-5 flex-1 flex flex-col">
        <div className="flex-1">
          <span className="text-xs font-semibold text-blue-600 uppercase tracking-wide">{product.category}</span>
          <h3 className="font-bold text-gray-900 text-lg mt-1 mb-2">{product.name}</h3>
          <p className="text-sm text-gray-500 line-clamp-2">{product.description}</p>
        </div>
        
        <div className="mt-6 flex items-center gap-3">
          <div className="flex items-center border border-gray-200 rounded-lg">
            <button onClick={() => setQty(Math.max(1, qty - 1))} className="px-3 py-1 hover:bg-gray-50 text-gray-600">-</button>
            <input 
              type="text" 
              readOnly 
              value={qty} 
              className="w-8 text-center text-sm font-medium focus:outline-none" 
            />
            <button onClick={() => setQty(qty + 1)} className="px-3 py-1 hover:bg-gray-50 text-gray-600">+</button>
          </div>
          <button 
            onClick={() => { onAdd(product.id, qty); setQty(1); }}
            className="flex-1 bg-blue-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-700 flex items-center justify-center gap-2"
          >
            Adicionar ao Orçamento
          </button>
        </div>
      </div>
    </div>
  );
}

function StatusBadge({ status }) {
  const styles = {
    pending: 'bg-yellow-100 text-yellow-700 border-yellow-200',
    priced: 'bg-green-100 text-green-700 border-green-200',
    sent: 'bg-blue-100 text-blue-700 border-blue-200',
  };
  
  const labels = {
    pending: 'Aguardando Preço',
    priced: 'Preço Disponível',
    sent: 'Enviado',
  };

  return (
    <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium border ${styles[status] || styles.pending}`}>
      {labels[status] || status}
    </span>
  );
}/* End custom CSS */