{{-- resources/views/connect/products/index.blade.php --}}
@extends('connect.layouts.main')

@section('title', 'Products Catalog - CLEDA Connect')
@section('description', 'Discover quality products from verified suppliers across the Caribbean and Latin America. Browse by category, compare prices, and connect directly with manufacturers.')

@push('styles')
<style>
    /* Premium Color Scheme */
    :root {
        --cleda-navy: #003876;
        --cleda-blue: #0066B3;
        --cleda-teal: #00A19C;
        --cleda-light-teal: #4AC7C2;
        --cleda-dark: #1a1a2e;
        --cleda-gray: #F8F9FA;
        --cleda-white: #FFFFFF;
        --gradient-primary: linear-gradient(135deg, #003876 0%, #0066B3 50%, #00A19C 100%);
        --gradient-secondary: linear-gradient(135deg, #00A19C 0%, #4AC7C2 100%);
        --shadow-sm: 0 2px 8px rgba(0,56,118,0.08);
        --shadow-md: 0 4px 20px rgba(0,56,118,0.12);
        --shadow-lg: 0 8px 40px rgba(0,56,118,0.15);
        --shadow-xl: 0 12px 60px rgba(0,56,118,0.2);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: #F5F7FA;
        color: #333;
    }

    /* Premium Header with CLEDA Logo */
    .marketplace-header {
        background: var(--gradient-primary);
        padding: 2rem 0;
        position: relative;
        overflow: hidden;
    }

    .marketplace-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
        background-size: cover;
    }

    .header-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 1;
    }

    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
    }

    .cleda-logo {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .logo-icon {
        width: 60px;
        height: 60px;
        background: white;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-lg);
    }

    .logo-text {
        color: white;
    }

    .logo-text h1 {
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
    }

    .logo-text p {
        font-size: 0.9rem;
        opacity: 0.9;
        margin: 0;
    }

    .header-nav {
        display: flex;
        gap: 2rem;
        align-items: center;
    }

    .nav-link {
        color: white;
        text-decoration: none;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .nav-link:hover {
        background: rgba(255,255,255,0.1);
    }

    .nav-link.active {
        background: rgba(255,255,255,0.2);
    }

    /* Hero Section */
    .hero-section {
        padding: 3rem 0 4rem;
    }

    .hero-content h2 {
        font-size: 3rem;
        color: white;
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .hero-content p {
        font-size: 1.2rem;
        color: white;
        opacity: 0.95;
        max-width: 800px;
    }

    /* Premium Search and Filter Bar */
    .search-filter-section {
        background: white;
        margin: -3rem auto 3rem;
        max-width: 1400px;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: var(--shadow-xl);
        position: relative;
        z-index: 10;
    }

    .search-bar {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .search-input-group {
        flex: 1;
        position: relative;
    }

    .search-input {
        width: 100%;
        padding: 1rem 1rem 1rem 3rem;
        border: 2px solid #E5E7EB;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .search-input:focus {
        outline: none;
        border-color: var(--cleda-teal);
        box-shadow: 0 0 0 4px rgba(0,161,156,0.1);
    }

    .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9CA3AF;
    }

    .search-btn {
        padding: 1rem 2rem;
        background: var(--gradient-secondary);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .search-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    /* Filter Pills */
    .filter-pills {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .filter-pill {
        padding: 0.75rem 1.5rem;
        background: var(--cleda-gray);
        border: 2px solid transparent;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
        color: #4B5563;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .filter-pill:hover {
        background: white;
        border-color: var(--cleda-teal);
        color: var(--cleda-teal);
    }

    .filter-pill.active {
        background: var(--gradient-secondary);
        color: white;
        border-color: var(--cleda-teal);
    }

    .filter-pill .count {
        background: rgba(0,0,0,0.1);
        padding: 0.2rem 0.5rem;
        border-radius: 12px;
        font-size: 0.85rem;
    }

    /* Main Content Grid */
    .main-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .results-info {
        font-size: 1.1rem;
        color: #4B5563;
    }

    .results-info strong {
        color: var(--cleda-navy);
        font-size: 1.3rem;
    }

    .view-controls {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .view-toggle {
        display: flex;
        background: white;
        border: 2px solid #E5E7EB;
        border-radius: 12px;
        overflow: hidden;
    }

    .view-btn {
        padding: 0.75rem 1.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6B7280;
    }

    .view-btn.active {
        background: var(--gradient-secondary);
        color: white;
    }

    .sort-dropdown {
        padding: 0.75rem 1.5rem;
        background: white;
        border: 2px solid #E5E7EB;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 500;
        color: #4B5563;
    }

    /* Premium Product Grid */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .product-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: var(--shadow-sm);
        position: relative;
        cursor: pointer;
    }

    .product-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-xl);
    }

    .product-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-secondary);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .product-card:hover::before {
        opacity: 1;
    }

    .product-image {
        height: 250px;
        background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-badges {
        position: absolute;
        top: 1rem;
        left: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .badge-featured {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: white;
    }

    .badge-verified {
        background: rgba(0,161,156,0.9);
        color: white;
    }

    .badge-new {
        background: rgba(239, 68, 68, 0.9);
        color: white;
    }

    .product-content {
        padding: 1.5rem;
    }

    .product-header {
        margin-bottom: 1rem;
    }

    .product-category {
        color: var(--cleda-teal);
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }

    .product-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--cleda-navy);
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

    .product-company {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6B7280;
        font-size: 0.9rem;
    }

    .product-company .verified-icon {
        color: var(--cleda-teal);
    }

    .product-description {
        color: #6B7280;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .product-features {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .feature-tag {
        padding: 0.35rem 0.75rem;
        background: var(--cleda-gray);
        border-radius: 8px;
        font-size: 0.85rem;
        color: #4B5563;
    }

    .product-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1.5rem;
        border-top: 1px solid #E5E7EB;
    }

    .product-price {
        display: flex;
        flex-direction: column;
    }

    .price-label {
        font-size: 0.85rem;
        color: #6B7280;
        margin-bottom: 0.25rem;
    }

    .price-value {
        font-size: 1.5rem;
        font-weight: 700;
        background: var(--gradient-secondary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .product-actions {
        display: flex;
        gap: 0.5rem;
    }

    .action-btn {
        padding: 0.75rem 1.25rem;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

    .btn-primary {
        background: var(--gradient-secondary);
        color: white;
        border: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-secondary {
        background: white;
        color: var(--cleda-teal);
        border: 2px solid var(--cleda-teal);
    }

    .btn-secondary:hover {
        background: var(--cleda-teal);
        color: white;
    }

    /* Premium Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin: 4rem 0;
    }

    .page-link {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        color: #6B7280;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-sm);
    }

    .page-link:hover {
        background: var(--cleda-gray);
        color: var(--cleda-navy);
        transform: translateY(-2px);
    }

    .page-link.active {
        background: var(--gradient-secondary);
        color: white;
    }

    .page-link.prev,
    .page-link.next {
        width: auto;
        padding: 0 1.5rem;
    }

    /* Loading States */
    .loading-skeleton {
        animation: shimmer 2s infinite;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 1000px 100%;
    }

    @keyframes shimmer {
        0% { background-position: -1000px 0; }
        100% { background-position: 1000px 0; }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .hero-content h2 {
            font-size: 2rem;
        }
        
        .products-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        .header-nav {
            display: none;
        }
        
        .search-bar {
            flex-direction: column;
        }
        
        .filter-pills {
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 0.5rem;
        }
    }
</style>
@endpush

@section('content')
<!-- Premium Header with CLEDA Branding -->
<div class="marketplace-header">
    <div class="header-content">
        <div class="header-top">
            <div class="cleda-logo">
                <div class="logo-icon">
                    <!-- CLEDA Logo SVG -->
                    <svg width="40" height="40" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="45" fill="none" stroke="#003876" stroke-width="2"/>
                        <path d="M50 10 L60 40 L90 50 L60 60 L50 90 L40 60 L10 50 L40 40 Z" fill="#00A19C"/>
                        <circle cx="50" cy="50" r="15" fill="#003876"/>
                    </svg>
                </div>
                <div class="logo-text">
                    <h1>CLEDA Connect</h1>
                    <p>Premium B2B Marketplace</p>
                </div>
            </div>
            
            <nav class="header-nav">
                <a href="/connect" class="nav-link">Marketplace</a>
                <a href="/connect/suppliers" class="nav-link">Suppliers</a>
                <a href="/connect/products" class="nav-link active">Products</a>
                <a href="/connect/categories" class="nav-link">Categories</a>
                <a href="/connect/rfq" class="nav-link">RFQs</a>
            </nav>
        </div>
        
        <div class="hero-section">
            <div class="hero-content">
                <h2>Premium Products Catalog</h2>
                <p>Connect with verified suppliers and discover quality products from across the Caribbean and Latin America</p>
            </div>
        </div>
    </div>
</div>

<!-- Premium Search and Filter Section -->
<div class="search-filter-section">
    <div class="search-bar">
        <div class="search-input-group">
            <span class="search-icon">🔍</span>
            <input type="text" class="search-input" placeholder="Search for products, suppliers, or categories...">
        </div>
        <button class="search-btn">Search Products</button>
    </div>
    
    <div class="filter-pills">
        <div class="filter-pill active">
            All Products
            <span class="count">15,634</span>
        </div>
        <div class="filter-pill">
            Agriculture & Food
            <span class="count">2,340</span>
        </div>
        <div class="filter-pill">
            Manufacturing
            <span class="count">1,890</span>
        </div>
        <div class="filter-pill">
            Tourism & Hospitality
            <span class="count">1,560</span>
        </div>
        <div class="filter-pill">
            Construction
            <span class="count">1,230</span>
        </div>
        <div class="filter-pill">
            Electronics
            <span class="count">870</span>
        </div>
        <div class="filter-pill">
            Textiles
            <span class="count">650</span>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="main-content">
    <div class="content-header">
        <div class="results-info">
            Showing <strong>1,248</strong> premium products
        </div>
        
        <div class="view-controls">
            <div class="view-toggle">
                <button class="view-btn active">
                    <span>⊞</span> Grid
                </button>
                <button class="view-btn">
                    <span>☰</span> List
                </button>
            </div>
            
            <select class="sort-dropdown">
                <option>Most Relevant</option>
                <option>Price: Low to High</option>
                <option>Price: High to Low</option>
                <option>Newest First</option>
                <option>Most Popular</option>
            </select>
        </div>
    </div>
    
    <!-- Premium Product Grid -->
    <div class="products-grid">
        @php
        $products = [
            ['name' => 'Premium Blue Mountain Coffee', 'company' => 'Jamaica Coffee Co.', 'category' => 'Agriculture & Food', 'price' => '$24.99', 'moq' => '100 kg', 'featured' => true, 'verified' => true],
            ['name' => 'Organic Coconut Oil', 'company' => 'Caribbean Naturals', 'category' => 'Beauty & Care', 'price' => '$18.50', 'moq' => '50 units', 'new' => true, 'verified' => true],
            ['name' => 'Industrial Steel Components', 'company' => 'Trinidad Manufacturing', 'category' => 'Manufacturing', 'price' => '$450.00', 'moq' => '10 pieces', 'verified' => true],
            ['name' => 'Resort Furniture Collection', 'company' => 'Island Designs', 'category' => 'Tourism & Hospitality', 'price' => '$2,850.00', 'moq' => '5 sets', 'featured' => true],
            ['name' => 'Solar Panel Systems', 'company' => 'Costa Rica Energy', 'category' => 'Electronics', 'price' => '$1,200.00', 'moq' => '1 unit', 'new' => true, 'verified' => true],
            ['name' => 'Premium Rum Collection', 'company' => 'Barbados Distillery', 'category' => 'Agriculture & Food', 'price' => '$89.99', 'moq' => '12 bottles', 'featured' => true, 'verified' => true],
            ['name' => 'Textile Manufacturing Equipment', 'company' => 'Panama Textiles', 'category' => 'Manufacturing', 'price' => '$8,500.00', 'moq' => '1 unit', 'verified' => true],
            ['name' => 'Organic Spice Collection', 'company' => 'Grenada Spice Co.', 'category' => 'Agriculture & Food', 'price' => '$35.00', 'moq' => '24 units', 'new' => true],
        ];
        @endphp
        
        @foreach($products as $product)
        <div class="product-card">
            <div class="product-image">
                <div class="product-badges">
                    @if(isset($product['featured']))
                        <span class="badge badge-featured">⭐ Featured</span>
                    @endif
                    @if(isset($product['verified']))
                        <span class="badge badge-verified">✓ Verified</span>
                    @endif
                    @if(isset($product['new']))
                        <span class="badge badge-new">New</span>
                    @endif
                </div>
                <!-- Placeholder for product image -->
                <div style="font-size: 4rem; color: #E5E7EB;">📦</div>
            </div>
            
            <div class="product-content">
                <div class="product-header">
                    <div class="product-category">{{ $product['category'] }}</div>
                    <h3 class="product-title">{{ $product['name'] }}</h3>
                    <div class="product-company">
                        {{ $product['company'] }}
                        @if(isset($product['verified']))
                            <span class="verified-icon">✓</span>
                        @endif
                    </div>
                </div>
                
                <p class="product-description">
                    High-quality premium product sourced directly from certified suppliers. International standards compliance with competitive bulk pricing.
                </p>
                
                <div class="product-features">
                    <span class="feature-tag">Export Ready</span>
                    <span class="feature-tag">ISO Certified</span>
                    <span class="feature-tag">MOQ: {{ $product['moq'] }}</span>
                </div>
                
                <div class="product-footer">
                    <div class="product-price">
                        <span class="price-label">Starting at</span>
                        <span class="price-value">{{ $product['price'] }}</span>
                    </div>
                    
                    <div class="product-actions">
                        <a href="#" class="action-btn btn-secondary">Details</a>
                        <a href="#" class="action-btn btn-primary">Quote</a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- Premium Pagination -->
    <div class="pagination">
        <a href="#" class="page-link prev">← Previous</a>
        <a href="#" class="page-link active">1</a>
        <a href="#" class="page-link">2</a>
        <a href="#" class="page-link">3</a>
        <span style="color: #9CA3AF;">...</span>
        <a href="#" class="page-link">24</a>
        <a href="#" class="page-link">25</a>
        <a href="#" class="page-link next">Next →</a>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Premium animations
document.addEventListener('DOMContentLoaded', function() {
    // Animate cards on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    document.querySelectorAll('.product-card').forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = `all 0.6s ease ${index * 0.1}s`;
        observer.observe(card);
    });
    
    // Filter pill interactions
    document.querySelectorAll('.filter-pill').forEach(pill => {
        pill.addEventListener('click', function() {
            document.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
            this.classList.add('active');
        });
    });
    
    // View toggle
    document.querySelectorAll('.view-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });
});
</script>
@endpush