import React, { useState, useEffect } from 'react';
import { 
  ShoppingBag, 
  TreeDeciduous, 
  Sun, 
  Wind, 
  Umbrella, 
  CheckCircle2, 
  ChevronRight, 
  X, 
  MapPin, 
  Waves, 
  Utensils, 
  Hotel,
  ShieldCheck,
  Clock,
  Ruler,
  Palette,
  MessageCircle,
  Anchor,
  Maximize2
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('todos');
  const [cart, setCart] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState(null);
  
  // Estado para personalização no modal
  const [selectedColor, setSelectedColor] = useState('Bege');
  const [selectedSize, setSelectedSize] = useState('2.70m');

  const WHATSAPP_NUMBER = "5551983012284";

  const colors = [
    { name: 'Roxo', hex: '#9370DB' },
    { name: 'Azul Royal', hex: '#4169E1' },
    { name: 'Azul Marinho', hex: '#000080' },
    { name: 'Verde Militar', hex: '#4B5320' },
    { name: 'Verde Bandeira', hex: '#006847' },
    { name: 'Marrom', hex: '#5D4037' },
    { name: 'Cinza', hex: '#9E9E9E' },
    { name: 'Preto', hex: '#212121' },
    { name: 'Branco', hex: '#FFFFFF' },
    { name: 'Bege', hex: '#F5F5DC' },
    { name: 'Amarelo', hex: '#FFEB3B' },
    { name: 'Laranja', hex: '#FF8C00' },
    { name: 'Vermelho', hex: '#D32F2F' },
    { name: 'Rosa', hex: '#FFC0CB' }
  ];

  const sizes = ['2.00m', '2.40m', '2.70m', '3.00m', '4.00m'];

  const products = [
    {
      id: 1,
      name: "Ombrelone Lateral Artori",
      category: "residencial",
      description: "Haste lateral em madeira Grapia com base giratória 360º. Estrutura robusta para áreas de lazer.",
      features: ["Lona Protec-Sol UV+", "Haste Bipartida", "Madeira Maciça Grapia"],
      image: "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&q=80&w=800",
    },
    {
      id: 2,
      name: "Ombrelone Central Gourmet",
      category: "comercial",
      description: "O clássico para mesas e quiosques. Resistência extrema para uso diário intenso.",
      features: ["Fácil Abertura", "Haste Bipartida", "Verniz Náutico"],
      image: "https://images.unsplash.com/photo-1621259182978-fbf93132d53d?auto=format&fit=crop&q=80&w=800",
    },
    {
      id: 3,
      name: "Ombrelone Gigante Hotelaria",
      category: "comercial",
      description: "Cobertura de larga escala para lounges e espaços abertos em hotéis.",
      features: ["Extra Cobertura", "Haste Bipartida", "Durabilidade 50 anos"],
      image: "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&q=80&w=800",
    },
    {
      id: 4,
      name: "Ombrelone Suspenso Design",
      category: "residencial",
      description: "Sofisticação e leveza visual. Ideal para jardins contemporâneos e decks.",
      features: ["Cabo de Aço Inox", "Haste Bipartida", "Garantia Artori"],
      image: "https://images.unsplash.com/photo-1511192336575-5a79af67a629?auto=format&fit=crop&q=80&w=800",
    }
  ];

  const handleWhatsAppContact = (customMessage = "") => {
    let message = customMessage;
    
    if (!message && cart.length > 0) {
      message = "Olá Artori Ombrelones! Gostaria de um orçamento para os seguintes itens:\n\n";
      cart.forEach((item, index) => {
        message += `${index + 1}. ${item.name}\n   - Cor: ${item.chosenColor}\n   - Raio: ${item.chosenSize}\n   - Obs: Haste Bipartida inclusa\n\n`;
      });
      message += "Poderiam me enviar mais informações sobre prazos e valores?";
    } else if (!message) {
      message = "Olá Artori Ombrelones! Gostaria de conhecer mais sobre os modelos e personalizações exclusivas.";
    }

    const encodedMessage = encodeURIComponent(message);
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${encodedMessage}`, '_blank');
  };

  const addToCart = (product) => {
    setCart([...cart, { 
      ...product, 
      cartId: Date.now(),
      chosenColor: selectedColor,
      chosenSize: selectedSize
    }]);
    setIsCartOpen(true);
  };

  const removeFromCart = (cartId) => {
    setCart(cart.filter(item => item.cartId !== cartId));
  };

  const filteredProducts = activeTab === 'todos' 
    ? products 
    : products.filter(p => p.category === activeTab);

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
      {/* Header / Navbar */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 bg-gradient-to-tr from-[#4169E1] via-[#9370DB] to-[#FF8C00] rounded-lg flex items-center justify-center text-white font-bold text-xl">
              A
            </div>
            <span className="text-2xl font-black tracking-tight bg-gradient-to-r from-[#4169E1] to-[#9370DB] bg-clip-text text-transparent">
              ARTORI
            </span>
          </div>
          
          <div className="hidden md:flex gap-8 font-medium">
            <a href="#beneficios" className="hover:text-[#4169E1] transition-colors">Benefícios</a>
            <a href="#catalogo" className="hover:text-[#4169E1] transition-colors">Catálogo</a>
            <a href="#madeira" className="hover:text-[#4169E1] transition-colors">Tecnologia</a>
          </div>

          <button 
            onClick={() => setIsCartOpen(true)}
            className="relative p-2 bg-slate-100 rounded-full hover:bg-slate-200 transition-all"
          >
            <ShoppingBag size={24} />
            {cart.length > 0 && (
              <span className="absolute -top-1 -right-1 bg-[#FF8C00] text-white text-xs w-5 h-5 rounded-full flex items-center justify-center font-bold">
                {cart.length}
              </span>
            )}
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative h-[80vh] flex items-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&q=80&w=1600" 
            className="w-full h-full object-cover brightness-50"
            alt="Ambiente Artori"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"></div>
        </div>
        
        <div className="relative z-10 max-w-7xl mx-auto px-6 text-white">
          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
            A Sombra que <br /> 
            <span className="text-[#FF8C00]">Define o seu Luxo</span>
          </h1>
          <p className="text-xl md:text-2xl text-slate-200 mb-8 max-w-2xl">
            Artori Ombrelones: A união da madeira Grapia com hastes bipartidas e tecnologia Protec-Sol.
          </p>
          <div className="flex flex-wrap gap-4">
            <a href="#catalogo" className="px-8 py-4 bg-[#4169E1] hover:bg-[#3451b2] rounded-full font-bold text-lg transition-all shadow-lg shadow-[#4169E1]/30">
              Personalizar Agora
            </a>
            <button 
              onClick={() => handleWhatsAppContact()}
              className="px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/30 rounded-full font-bold text-lg transition-all flex items-center gap-2"
            >
              <MessageCircle size={20} /> Falar com Consultor
            </button>
          </div>
        </div>
      </section>

      {/* Seção de Benefícios */}
      <section id="beneficios" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">Onde a Artori Transforma</h2>
            <div className="w-24 h-1.5 bg-[#9370DB] mx-auto rounded-full"></div>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl transition-all group">
              <div className="w-14 h-14 bg-blue-100 text-[#4169E1] rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Waves size={32} />
              </div>
              <h3 className="text-2xl font-bold mb-4">Residencial & Piscinas</h3>
              <p className="text-slate-600">Transforme seu deck em um refúgio. Proteção UV total com hastes práticas para montar e desmontar quando quiser.</p>
            </div>

            <div className="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl transition-all group">
              <div className="w-14 h-14 bg-orange-100 text-[#FF8C00] rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Utensils size={32} />
              </div>
              <h3 className="text-2xl font-bold mb-4">Áreas Gourmet</h3>
              <p className="text-slate-600">Harmonia perfeita com espaços gourmet. O design em madeira realça a estética com a praticidade da haste bipartida.</p>
            </div>

            <div className="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl transition-all group">
              <div className="w-14 h-14 bg-purple-100 text-[#9370DB] rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Hotel size={32} />
              </div>
              <h3 className="text-2xl font-bold mb-4">Setor Comercial</h3>
              <p className="text-slate-600">Resistência comercial e facilidade logística. Armazene seus ombrelones com segurança ocupando menos espaço.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Seção da Madeira Grapia */}
      <section id="madeira" className="py-24 relative overflow-hidden bg-slate-900 text-white">
        <div className="absolute right-0 top-0 w-1/2 h-full opacity-20 hidden lg:block">
           <img src="https://images.unsplash.com/photo-1541123437800-1bb1317badc2?auto=format&fit=crop&q=80&w=800" className="w-full h-full object-cover" alt="Grapia Detail" />
        </div>
        
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="lg:w-1/2">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-[#FF8C00]/20 text-[#FF8C00] rounded-full text-sm font-bold mb-6">
              <ShieldCheck size={16} /> ENGENHARIA DA NATUREZA
            </div>
            <h2 className="text-4xl md:text-5xl font-bold mb-8">Haste Bipartida: <br/><span className="text-[#9370DB]">Praticidade e Robusteza</span></h2>
            <p className="text-lg text-slate-400 mb-8">
              A Artori inova ao unir a tradição da <strong>Madeira Grapia</strong> com o sistema de <strong>haste bipartida</strong>. Todos os nossos modelos contam com este sistema que facilita o transporte, sem comprometer a estabilidade estrutural.
            </p>
            
            <div className="space-y-6">
              {[
                { title: "Transporte Inteligente", desc: "A haste central bipartida permite levar seu ombrelone em veículos comuns com facilidade.", icon: <Maximize2 size={20} /> },
                { title: "Encaixe de Precisão", desc: "Sistema de fixação que garante a mesma rigidez de uma peça única.", icon: <ShieldCheck size={20} /> },
                { title: "Durabilidade Lendária", desc: "Verniz náutico e madeira Grapia para uma vida útil de até 50 anos.", icon: <Clock size={20} /> }
              ].map((item, idx) => (
                <div key={idx} className="flex gap-4">
                  <div className="flex-shrink-0 w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-[#9370DB]">
                    {item.icon}
                  </div>
                  <div>
                    <h4 className="font-bold text-lg">{item.title}</h4>
                    <p className="text-slate-400">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Seção de Bases de Concreto */}
      <section className="py-24 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col lg:flex-row items-center gap-16">
            <div className="lg:w-1/2 order-2 lg:order-1">
              <div className="relative">
                <div className="absolute -inset-4 bg-slate-100 rounded-[3rem] -rotate-3"></div>
                <img 
                  src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&q=80&w=800" 
                  className="relative rounded-[2.5rem] shadow-2xl z-10 w-full h-[500px] object-cover" 
                  alt="Base de Concreto Artori" 
                />
                <div className="absolute bottom-8 -right-8 z-20 bg-slate-900 text-white p-6 rounded-3xl shadow-xl hidden md:block border-4 border-white">
                  <div className="flex items-center gap-3 mb-2">
                    <Anchor className="text-[#4169E1]" />
                    <span className="font-bold text-xl">Estabilidade Real</span>
                  </div>
                  <p className="text-slate-400 text-sm max-w-[200px]">Engenharia de peso calculada para cada envergadura.</p>
                </div>
              </div>
            </div>
            
            <div className="lg:w-1/2 order-1 lg:order-2">
              <h2 className="text-sm font-black text-[#4169E1] uppercase tracking-[0.3em] mb-4">Infraestrutura & Segurança</h2>
              <h3 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">Não tem onde fixar? <br/><span className="text-slate-400">Nós resolvemos para você.</span></h3>
              
              <div className="space-y-8">
                <p className="text-lg text-slate-600 leading-relaxed">
                  Esqueça as preocupações com a instalação. Nossos ombrelones são acompanhados por <strong>bases de concreto maciço</strong>, dimensionadas especificamente para o raio de cobertura escolhido, garantindo a segurança que seu produto merece.
                </p>
                
                <div className="grid gap-6">
                  <div className="flex gap-4 items-start p-4 rounded-2xl bg-slate-50 border border-slate-100">
                    <div className="p-2 bg-white rounded-lg shadow-sm text-[#4169E1]">
                      <ShieldCheck size={24} />
                    </div>
                    <div>
                      <h4 className="font-bold">Segurança Certificada</h4>
                      <p className="text-slate-500 text-sm">O peso exato para garantir que seu ombrelone permaneça imóvel, mesmo em rajadas de vento inesperadas.</p>
                    </div>
                  </div>

                  <div className="flex gap-4 items-start p-4 rounded-2xl bg-slate-50 border border-slate-100">
                    <div className="p-2 bg-white rounded-lg shadow-sm text-[#9370DB]">
                      <Wind size={24} />
                    </div>
                    <div>
                      <h4 className="font-bold">Robustez Inquestionável</h4>
                      <p className="text-slate-500 text-sm">Acabamento refinado que complementa a estética do ambiente, unindo força bruta e design elegante.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Catálogo Estilo Catálogo */}
      <section id="catalogo" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
            <div>
              <h2 className="text-4xl font-bold mb-4">Escolha seu Artori</h2>
              <p className="text-slate-600">Modelos exclusivos com haste bipartida e cores vibrantes.</p>
            </div>
            
            <div className="flex bg-slate-100 p-1.5 rounded-2xl gap-2">
              {['todos', 'residencial', 'comercial'].map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`px-6 py-2 rounded-xl font-bold transition-all capitalize ${
                    activeTab === tab 
                      ? 'bg-white shadow-sm text-[#4169E1]' 
                      : 'text-slate-500 hover:text-slate-800'
                  }`}
                >
                  {tab}
                </button>
              ))}
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {filteredProducts.map((product) => (
              <div 
                key={product.id}
                className="bg-white rounded-[2rem] border border-slate-200 overflow-hidden hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group"
              >
                <div className="relative h-64 overflow-hidden">
                  <img 
                    src={product.image} 
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    alt={product.name}
                  />
                  <div className="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-[10px] font-bold text-slate-800 shadow-sm border border-slate-100">
                    HASTE BIPARTIDA
                  </div>
                </div>
                
                <div className="p-6">
                  <h3 className="text-xl font-bold mb-2">{product.name}</h3>
                  <p className="text-slate-500 text-sm mb-4 line-clamp-2">{product.description}</p>
                  
                  <div className="flex flex-wrap gap-2 mb-6">
                    {product.features.map((feat, i) => (
                      <span key={i} className="text-[10px] bg-slate-100 px-2 py-1 rounded-md font-medium text-slate-600">
                        {feat}
                      </span>
                    ))}
                  </div>

                  <button 
                    onClick={() => {
                      setSelectedProduct(product);
                      setSelectedColor('Bege'); 
                      setSelectedSize('2.70m'); 
                    }}
                    className="w-full py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-[#4169E1] transition-colors flex items-center justify-center gap-2 group"
                  >
                    Personalizar <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Seção de Personalização para Marcas/Empresas */}
      <section className="py-24 bg-white border-y border-slate-200">
        <div className="max-w-7xl mx-auto px-6">
          <div className="bg-slate-50 rounded-[3rem] p-8 md:p-16 flex flex-col lg:flex-row items-center gap-12 shadow-sm border border-slate-100 overflow-hidden relative">
            <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-[#FF8C00]/10 to-transparent rounded-full -mr-32 -mt-32"></div>
            
            <div className="lg:w-1/2">
              <div className="w-16 h-16 bg-orange-100 text-[#FF8C00] rounded-2xl flex items-center justify-center mb-8">
                <Palette size={32} />
              </div>
              <h2 className="text-4xl font-black mb-6 leading-tight">Sua Marca em <br /> <span className="text-[#FF8C00]">Destaque Absoluto</span></h2>
              <p className="text-lg text-slate-600 mb-8 leading-relaxed">
                Desenvolvemos projetos exclusivos de plotagem para marcas, brasões familiares ou identidades visuais corporativas. Perfeito para hotéis, pousadas e eventos que buscam uma padronização premium.
              </p>
              <button 
                onClick={() => handleWhatsAppContact("Olá! Gostaria de saber mais sobre a personalização exclusiva de ombrelones com minha marca/brasão.")}
                className="px-10 py-5 bg-[#FF8C00] text-white rounded-2xl font-black text-lg hover:bg-[#e67e00] hover:scale-105 transition-all shadow-xl shadow-orange-200 flex items-center gap-3"
              >
                Consultar Personalização <MessageCircle size={22} />
              </button>
            </div>
            <div className="lg:w-1/2 grid grid-cols-2 gap-4">
              <div className="h-64 rounded-3xl bg-slate-200 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover grayscale" alt="Plotagem 1" />
              </div>
              <div className="h-64 rounded-3xl bg-slate-200 overflow-hidden translate-y-8">
                <img src="https://images.unsplash.com/photo-1574914629385-46448b767aec?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover grayscale" alt="Plotagem 2" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Seção Extra: Lona Protec-Sol */}
      <section className="py-24 bg-gradient-to-br from-[#4169E1] via-[#9370DB] to-[#FF8C00]">
        <div className="max-w-5xl mx-auto px-6 text-center text-white">
          <Sun size={64} className="mx-auto mb-8 animate-pulse" />
          <h2 className="text-4xl md:text-5xl font-bold mb-6">Lonas Protec-Sol®</h2>
          <p className="text-xl text-white/90 mb-10">
            Cores que resistem ao tempo. Nossa tecnologia de pigmentação em massa garante que seu Artori mantenha a cor vibrante mesmo sob sol forte por anos. Bloqueio UV de 99% garantido.
          </p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {["Proteção UV+", "100% Acrílico", "Respirável", "Hidro-Repelente"].map((item, i) => (
              <div key={i} className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/20">
                <CheckCircle2 size={24} className="mx-auto mb-2 text-white" />
                <span className="font-bold">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white border-t border-slate-200 py-16">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid md:grid-cols-4 gap-12 mb-12">
            <div className="col-span-2">
              <div className="flex items-center gap-2 mb-6">
                <div className="w-8 h-8 bg-[#4169E1] rounded-md flex items-center justify-center text-white font-bold">A</div>
                <span className="text-2xl font-black tracking-tight">ARTORI</span>
              </div>
              <p className="text-slate-500 max-w-sm mb-6">
                Fabricação nacional de ombrelones premium. A Artori combina técnicas artesanais em madeira com engenharia têxtil de ponta e praticidade logística.
              </p>
            </div>
            
            <div>
              <h4 className="font-bold mb-6">Contato</h4>
              <p className="text-slate-500 mb-2">vendas@artoriombrelones.com.br</p>
              <p className="text-slate-500 mb-2">+55 51 98301-2284</p>
              <p className="text-slate-500">Fabricação Própria</p>
            </div>

            <div>
              <h4 className="font-bold mb-6">Localização</h4>
              <p className="text-slate-500">Showroom Central e Fábrica</p>
              <p className="text-slate-500">RS, Brasil</p>
            </div>
          </div>
          <div className="pt-12 border-t border-slate-100 text-center text-slate-400 text-sm">
            © 2024 Artori Ombrelones. Todos os modelos incluem haste bipartida.
          </div>
        </div>
      </footer>

      {/* Modal de Personalização do Produto */}
      {selectedProduct && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-900/70 backdrop-blur-md" onClick={() => setSelectedProduct(null)}></div>
          <div className="relative bg-white w-full max-w-5xl rounded-[2.5rem] overflow-hidden shadow-2xl flex flex-col md:flex-row h-[90vh] md:h-auto overflow-y-auto">
            <button 
              onClick={() => setSelectedProduct(null)}
              className="absolute top-6 right-6 z-10 p-2 bg-white rounded-full shadow-lg hover:bg-slate-100"
            >
              <X size={20} />
            </button>
            
            <div className="md:w-5/12 bg-slate-100 relative">
              <img src={selectedProduct.image} className="w-full h-full object-cover" alt={selectedProduct.name} />
              <div className="absolute inset-0 opacity-20 pointer-events-none" style={{ backgroundColor: colors.find(c => c.name === selectedColor)?.hex }}></div>
              <div className="absolute bottom-6 left-6 bg-slate-900/80 backdrop-blur text-white text-[10px] px-3 py-1 rounded-full border border-white/20">
                SISTEMA BIPARTIDO PADRÃO
              </div>
            </div>
            
            <div className="md:w-7/12 p-8 md:p-12">
              <h3 className="text-3xl font-bold mb-2">{selectedProduct.name}</h3>
              <p className="text-slate-600 mb-6 leading-relaxed">{selectedProduct.description}</p>
              
              <div className="flex items-center gap-2 text-[#4169E1] font-bold text-sm mb-8 bg-blue-50 p-3 rounded-xl border border-blue-100">
                <Maximize2 size={16} /> Este modelo inclui Haste Central Bipartida em Grapia.
              </div>
              
              <div className="space-y-8">
                {/* Seleção de Cores */}
                <div>
                  <label className="text-sm font-black text-slate-400 uppercase tracking-widest block mb-4">Selecione a Lona Protec-Sol:</label>
                  <div className="grid grid-cols-7 gap-3">
                    {colors.map((color) => (
                      <button
                        key={color.name}
                        onClick={() => setSelectedColor(color.name)}
                        title={color.name}
                        className={`w-10 h-10 rounded-full border-2 transition-all ${
                          selectedColor === color.name ? 'border-[#4169E1] scale-110 shadow-lg' : 'border-transparent hover:scale-105'
                        }`}
                        style={{ backgroundColor: color.hex, border: color.name === 'Branco' ? '1px solid #ddd' : undefined }}
                      >
                        {selectedColor === color.name && (
                          <div className={`mx-auto ${color.name === 'Branco' || color.name === 'Amarelo' ? 'text-black' : 'text-white'}`}>
                            <CheckCircle2 size={16} />
                          </div>
                        )}
                      </button>
                    ))}
                  </div>
                  <p className="mt-2 text-sm font-bold text-[#4169E1]">{selectedColor}</p>
                </div>

                {/* Seleção de Tamanhos */}
                <div>
                  <label className="text-sm font-black text-slate-400 uppercase tracking-widest block mb-4 flex items-center gap-2">
                    <Ruler size={14} /> Raio de Sombra:
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {sizes.map((size) => (
                      <button
                        key={size}
                        onClick={() => setSelectedSize(size)}
                        className={`px-5 py-2 rounded-xl font-bold border-2 transition-all ${
                          selectedSize === size 
                          ? 'border-[#9370DB] bg-[#9370DB]/5 text-[#9370DB]' 
                          : 'border-slate-100 hover:border-slate-300 text-slate-500'
                        }`}
                      >
                        {size}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              <div className="mt-12 flex flex-col gap-4">
                <button 
                  onClick={() => {
                    addToCart(selectedProduct);
                    setSelectedProduct(null);
                  }}
                  className="w-full py-4 bg-slate-900 text-white rounded-2xl font-bold text-lg hover:bg-[#4169E1] transition-all shadow-xl"
                >
                  Confirmar e Adicionar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Slide-over do Carrinho */}
      <div className={`fixed inset-y-0 right-0 w-full max-w-md bg-white z-[110] shadow-2xl transition-transform duration-500 ease-in-out ${isCartOpen ? 'translate-x-0' : 'translate-x-full'}`}>
        <div className="h-full flex flex-col">
          <div className="p-6 border-b border-slate-100 flex items-center justify-between">
            <h2 className="text-2xl font-bold flex items-center gap-2">
              <ShoppingBag className="text-[#4169E1]" /> Orçamento Artori
            </h2>
            <button onClick={() => setIsCartOpen(false)} className="p-2 hover:bg-slate-100 rounded-full">
              <X size={24} />
            </button>
          </div>

          <div className="flex-1 overflow-y-auto p-6 space-y-6">
            {cart.length === 0 ? (
              <div className="h-full flex flex-col items-center justify-center text-slate-400">
                <Umbrella size={64} className="mb-4 opacity-20" />
                <p>Nenhum item selecionado.</p>
              </div>
            ) : (
              cart.map((item) => (
                <div key={item.cartId} className="flex gap-4 p-5 bg-slate-50 rounded-3xl group relative border border-slate-100">
                  <div className="w-20 h-20 rounded-2xl overflow-hidden bg-slate-200">
                    <img src={item.image} className="w-full h-full object-cover" alt={item.name} />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-bold">{item.name}</h4>
                    <div className="flex flex-col gap-1 mt-1">
                      <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: colors.find(c => c.name === item.chosenColor)?.hex }}></div>
                        Cor: {item.chosenColor}
                      </div>
                      <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
                        <Ruler size={12} /> Raio: {item.chosenSize}
                      </div>
                      <div className="text-[10px] font-bold text-blue-600 flex items-center gap-1 mt-1">
                        <Maximize2 size={10} /> Haste Bipartida Inclusa
                      </div>
                    </div>
                  </div>
                  <button onClick={() => removeFromCart(item.cartId)} className="text-slate-300 hover:text-red-500 transition-colors">
                    <X size={18} />
                  </button>
                </div>
              ))
            )}
          </div>

          {cart.length > 0 && (
            <div className="p-6 bg-slate-50 border-t border-slate-100">
              <p className="text-sm text-slate-500 mb-6 text-center leading-relaxed">
                Nossos consultores analisarão sua seleção de cores, tamanhos e especificações bipartidas para enviar a proposta final.
              </p>
              <button 
                onClick={() => handleWhatsAppContact()}
                className="w-full py-4 bg-gradient-to-r from-[#4169E1] to-[#9370DB] text-white rounded-2xl font-bold text-lg hover:shadow-xl transition-all flex items-center justify-center gap-3"
              >
                Enviar Pedido via WhatsApp <MessageCircle size={22} />
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default App;