import { Card } from '@/components/ui/card';
import { ResponsiveImage } from '@/components/ResponsiveImage';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { ArrowRight } from 'lucide-react';

// ===== IMAGENS DOS PRODUTOS =====
// INSTRUÇÕES: Para trocar as capas, substitua os nomes dos arquivos abaixo
// Exemplo: se sua capa se chama "capa-mobiliarios.jpg", troque "meeting-room.jpg" por "capa-mobiliarios.jpg"
// IMPORTANTE: Coloque todas as suas capas na pasta src/assets/

// 1. MOBILIÁRIOS
import capaMobiliarios from '@/assets/aqui comeca.webp';

// 2. DIVISÓRIAS
import capaDivisorias from '@/assets/WhatsApp Image 2025-08-31 at 13.37.18.webp';

// 3. PAISAGISMO
import capaPaisagismo from '@/assets/3.webp';

// 4. ASSENTOS
import capaAssentos from '@/assets/capa nova.jpeg';

// 5. COLABORATIVOS
import capaColaborativos from '@/assets/5.webp';

// 6. MARCENARIA
import capaMarcenaria from '@/assets/6.webp';

// 7. PERSIANAS
import capaPersianas from '@/assets/imagemnovamobi.jpeg';

// 8. ESTOFADOS
import capaEstofados from '@/assets/estofadossssscapa.jpeg';

// 9. LINHA AÇO
import capaLinhaAco from '@/assets/8.webp';

// 10. LINHA EXTERNA
import capaLinhaExterna from '@/assets/10.webp';

// 11. PAINÉIS ACÚSTICOS
import capaPaineisAcusticos from '@/assets/9.webp';

// 12. POLTRONAS
import capaPoltronas from '@/assets/hero-office.jpg';

// 13. DECORATIVOS
import capaDecorativos from '@/assets/DECORATIVO.webp';

export const ProductsSection = () => {
  const navigate = useNavigate();
  
  // ===== LISTA DE PRODUTOS =====
  // Cada produto usa uma das imagens importadas acima na propriedade "image"
  // Para trocar a capa de um produto específico, mude o nome da variável após "image:"
  
  const allProducts = [
    {
      title: 'Mobiliários',
      description: 'Mobiliário corporativo que une forma e função. Nossas soluções traduzem o equilíbrio entre design, conforto e praticidade, criando ambientes que inspiram produtividade, bem-estar e identidade visual consistente.',
      image: capaMobiliarios, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 13
      categories: ['Mesas Executivas', 'Cadeiras Ergonômicas', 'Estações de Trabalho', 'Armários'],
      detailedDescription: 'Mobiliário corporativo que une forma e função. Nossas soluções traduzem o equilíbrio entre design, conforto e praticidade, criando ambientes que inspiram produtividade, bem-estar e identidade visual consistente. linha de Mobiliário corporativo que une forma e função. Nossas soluções traduzem o equilíbrio entre design, conforto e praticidade, criando ambientes que inspiram produtividade, bem-estar e identidade visual consistente. corporativos oferece soluções completas para ambientes de trabalho modernos. Desenvolvidos com materiais de alta qualidade e design ergonômico, nossos móveis proporcionam conforto, funcionalidade e elegância. Cada peça é cuidadosamente projetada para atender às necessidades específicas do ambiente corporativo, garantindo durabilidade e estilo.',
      gallery: [capaMobiliarios, capaDivisorias, capaPaisagismo]
    },
    {
      title: 'Divisórias',
      description: 'Modularidade, resistência e organização inteligente. As divisórias industriais redefinem o aproveitamento dos espaços com soluções robustas que se adaptam a diferentes layouts, garantindo funcionalidade e fluidez operacional.',
      image: capaDivisorias, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 16
      categories: ['Divisórias de Vidro', 'Biombos', 'Sistemas Modulares', 'Painéis Decorativos'],
      detailedDescription: 'Nossas divisórias são ideais para criar ambientes funcionais e privados. Com design moderno, oferecemos soluções que combinam estética e funcionalidade. Perfeitas para escritórios que precisam de flexibilidade na organização dos espaços.',
      gallery: [capaDivisorias, capaMobiliarios, capaAssentos]
    },
    {
      title: 'Paisagismo',
      description: 'Transformamos ambientes corporativos com projetos de paisagismo que integram natureza e arquitetura. Nossos projetos incluem jardins internos, jardins verticais e terraços verdes.',
      image: capaPaisagismo, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 19
      categories: ['Jardins Verticais', 'Vasos Decorativos', 'Plantas Corporativas', 'Design Biofílico'],
      detailedDescription: 'Transforme seu ambiente corporativo com nossos projetos de paisagismo. Integramos elementos naturais ao espaço de trabalho, criando ambientes mais saudáveis e produtivos. Nossos projetos incluem jardins verticais, vasos decorativos e soluções de design biofílico que melhoram o bem-estar dos colaboradores.',
      gallery: [capaPaisagismo, capaAssentos, capaMobiliarios]
    },
    {
      title: 'Assentos',
      description: 'Ergonomia, estilo e conforto em cada detalhe. Os Assentos oferece cadeiras e poltronas que valorizam o bem-estar no ambiente corporativo, com design funcional, apoio adequado e soluções que acompanham a rotina de trabalho.',
      image: capaAssentos, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 22
      categories: ['Cadeiras Operacionais', 'Cadeiras de Reunião', 'Bancos', 'Assentos Especiais'],
      detailedDescription: 'Desenvolvemos assentos ergonômicos que priorizam a saúde e produtividade dos usuários. Com tecnologia avançada em ergonomia e materiais de alta qualidade, nossos assentos oferecem suporte adequado para longas jornadas de trabalho, reduzindo fadiga e melhorando o desempenho.',
      gallery: [capaMobiliarios, capaAssentos, capaDivisorias]
    },
    {
      title: 'Colaborativo',
      description: 'Interação, fluidez e inteligência espacial. A Linha Colaborativos foi pensada para ambientes dinâmicos, que valorizam o trabalho em equipe, com soluções que promovem conexões, conforto e produtividade em espaços integrados.',
      image: capaColaborativos, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 25
      categories: ['Mesas Colaborativas', 'Assentos Flexíveis', 'Ilhas de Trabalho', 'Lounges'],
      detailedDescription: 'Criamos soluções mobiliárias que facilitam a colaboração e criatividade. Nossos móveis colaborativos são flexíveis, modulares e projetados para se adaptar às diferentes necessidades de trabalho em equipe, promovendo interação e produtividade.',
      gallery: [capaColaborativos, capaDivisorias, capaAssentos]
    },
    {
      title: 'Marcenaria',
      description: 'Móveis sob medida pensados para refletir a identidade da sua empresa e trazer soluções personalizadas com acabamentos únicos, com durabilidade e sofisticação.',
      image: capaMarcenaria, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 28
      categories: ['Móveis Sob Medida', 'Revestimentos', 'Painéis Decorativos', 'Acabamentos Especiais'],
      detailedDescription: 'Nossa marcenaria especializada cria móveis únicos e personalizados. Trabalhamos com madeiras nobres e técnicas artesanais para desenvolver peças exclusivas que atendem perfeitamente às necessidades específicas de cada projeto corporativo.',
      gallery: [capaMarcenaria, capaMobiliarios, capaDivisorias]
    },
    {
      title: 'Persianas e Toldos',
      description: 'Soluções em proteção solar e controlo de luminosidade para ambientes internos e externos. As persianas e toldos da Mövo combinam funcionalidade, conforto térmico e elegância, sendo um elemento indispensável em qualquer espaço corporativo moderno.',
      image: capaPersianas, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 31
      categories: ['Persianas Verticais', 'Persianas Horizontais', 'Toldos Retráteis', 'Cortinas Corporativas'],
      detailedDescription: 'Nossos sistemas de proteção solar oferecem controle total sobre a luminosidade e temperatura dos ambientes. Com tecnologia moderna e design elegante, proporcionam conforto visual e térmico, contribuindo para um ambiente de trabalho mais agradável e produtivo.',
      gallery: [capaPersianas, capaDivisorias, capaMobiliarios]
    },
    {
      title: 'Estofados',
      description: 'Linha completa de estofados corporativos, pensada para ambientes que exigem conforto, elegância e sofisticação. Ideal para áreas de espera, receção, salas de convivência, diretorias e presidência — proporciona um toque de aconchego e requinte ao seu espaço.',
      image: capaEstofados, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 34
      categories: ['Sofás Corporativos', 'Poltronas Executivas', 'Banquetas', 'Assentos Modulares'],
      detailedDescription: 'Nossa linha de estofados combina conforto excepcional com design sofisticado. Utilizamos materiais premium e técnicas artesanais para criar peças que proporcionam bem-estar e elegância aos ambientes corporativos. Ideais para áreas de recepção, salas de espera e espaços de descanso.',
      gallery: [capaEstofados, capaMobiliarios, capaPaisagismo]
    },
    {
      title: 'Móveis de Aço',
      description: 'Versáteis e resistentes, os móveis de aço são ideais para complementar e diversificar diversos ambientes corporativos — desde vestiários e portarias até áreas administrativas. Com opções de armários, lockers e estantes, aliam durabilidade, funcionalidade e um design que pode ser personalizado conforme a identidade visual da empresa.',
      image: capaLinhaAco, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 37
      categories: ['Armários de Aço', 'Mesas Industriais', 'Estantes Metálicas', 'Vestiários'],
      detailedDescription: 'Nossa linha de móveis de aço oferece máxima resistência e durabilidade. Ideais para ambientes industriais e corporativos que exigem mobiliário robusto, nossos produtos em aço são tratados com pintura eletrostática, garantindo proteção contra corrosão e longa vida útil.',
      gallery: [capaLinhaAco, capaAssentos, capaMobiliarios]
    },
    {
      title: 'Mobiliário Externo',
      description: 'Projetado para áreas externas de empresas ou residências, o mobiliário externo é ideal para ambientes de descompressão, descanso e convivência ao ar livre. Com materiais de alta durabilidade e resistência às condições climáticas, oferece conforto, estética e funcionalidade para espaços abertos que valorizam o bem-estar.',
      image: capaLinhaExterna, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 40
      categories: ['Mesas Externas', 'Cadeiras Outdoor', 'Bancos de Jardim', 'Pergolados'],
      detailedDescription: 'Desenvolvemos mobiliário especialmente projetado para resistir às condições externas. Com materiais tratados contra intempéries e design funcional, nossos móveis externos criam espaços agradáveis para reuniões ao ar livre, pausas e eventos corporativos.',
      gallery: [capaLinhaExterna, capaPaisagismo, capaMobiliarios]
    },
    {
      title: 'Painéis Acústicos',
      description: 'Soluções acústicas de alta performance, ideais para reduzir ruídos entre ambientes e melhorar a concentração, o foco e o conforto sonoro. Com design personalizado, os painéis podem simular acabamentos em marcenaria ou revestimentos variados, integrando-se perfeitamente ao projeto. São a escolha certa para estúdios de gravação, espaços de podcast e ambientes corporativos que exigem privacidade e produtividade.',
      image: capaPaineisAcusticos, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 43
      categories: ['Painéis Absorventes', 'Divisórias Acústicas', 'Revestimentos Sonoros', 'Isolamento Acústico'],
      detailedDescription: 'Nossos painéis acústicos utilizam tecnologia avançada para controle eficiente de ruído. Combinam funcionalidade acústica com design moderno, criando ambientes mais silenciosos e confortáveis, essenciais para a concentração e produtividade no trabalho.',
      gallery: [capaPoltronas, capaAssentos, capaPaisagismo]
    },
    {
      title: 'Decorativos',
      description: 'Elementos decorativos que transformam ambientes corporativos em espaços únicos e inspiradores. Nossa linha de decorativos inclui peças artísticas, objetos de design e acessórios que agregam personalidade e sofisticação ao seu ambiente de trabalho.',
      image: capaDecorativos, // ← AQUI: Para trocar esta capa, mude o arquivo na linha 46
      categories: ['Quadros Corporativos', 'Esculturas', 'Vasos Decorativos', 'Objetos de Arte'],
      detailedDescription: 'Nossa coleção de elementos decorativos foi cuidadosamente selecionada para complementar ambientes corporativos modernos. Cada peça é escolhida por sua capacidade de criar atmosferas inspiradoras e acolhedoras, contribuindo para o bem-estar dos colaboradores e impressionando visitantes. Trabalhamos com artistas locais e designers renomados para oferecer peças exclusivas que refletem a identidade da sua empresa.',
      gallery: [capaDecorativos, capaMobiliarios, capaPaisagismo]
    }
  ];



  return (
    <section id="produtos" className="py-16 bg-background">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16 animate-slide-up">
          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
            Nossos Produtos
          </h2>
          <p className="text-xl md:text-2xl text-muted-foreground">
            Soluções completas para transformar seu ambiente corporativo em um espaço 
            de produtividade, conforto e bem-estar.
          </p>
        </div>

        {/* Products Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8 max-w-6xl mx-auto">
          {allProducts.map((product, index) => (
            <Card 
              key={product.title}
              className="overflow-hidden group hover:shadow-elegant transition-all duration-300 animate-fade-in"
              style={{ animationDelay: `${index * 0.2}s` }}
            >
              <div className="relative overflow-hidden">
                <ResponsiveImage
                  src={product.image}
                  alt={product.title}
                  className="w-full aspect-[1/1.414] object-cover object-[50%_20%] group-hover:scale-105 transition-transform duration-500"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  rootMargin="100px"
                  threshold={0.1}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              </div>
              
              <div className="p-6">
                <h3 className="text-2xl font-bold text-foreground mb-3">
                  {product.title}
                </h3>

                

                
                <Button 
                  onClick={() => {
                    // Mapear títulos para as chaves corretas do CatalogDetails
                    const productKeyMap: { [key: string]: string } = {
                      'Mobiliários': 'mobiliários',
                      'Divisórias': 'divisórias', 
                      'Paisagismo': 'paisagismo',
                      'Assentos': 'assentos',
                      'Colaborativo': 'colaborativo',
                      'Marcenaria': 'marcenaria',
                      'Estofados': 'estofados',
                      'Persianas e Toldos': 'persianas-e-toldos',
                      'Móveis de Aço': 'móveis-de-aço',
                      'Mobiliário Externo': 'mobiliário-externo',
                      'Painéis Acústicos': 'painéis-acústicos',
                      'Decorativos': 'decorativos'
                    };
                    const productKey = productKeyMap[product.title] || product.title.toLowerCase();
                    navigate(`/catalogo/${productKey}`);
                  }}
                  className="w-full bg-movo-green hover:bg-movo-green/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
                >
                  Ver Mais
                  <ArrowRight className="w-4 h-4" />
                </Button>
              </div>
            </Card>
          ))}
        </div>





      </div>
    </section>
  );
};