@extends('website.app')

@section('content')
    <!-- 1. Hero Carousel Section -->
    <section class="hero-carousel">
        <img src="{{ asset('assets/images/banner/banner.png') }}" alt="Swiftec Lubricants Showcase" class="hero-image">
    </section>

    <!-- 2. About Swiftec Snapshot -->
    <section class="section-padding bg-white">
        <div class="container about-grid">
            <!-- Left Side: Content & Key Highlights -->
            <div data-aos="fade-right">
                <div class="section-header">
                    <span class="tag">About Swiftec</span>
                    <h2>A Premium Brand for Global Industry Demands</h2>
                    <p>Swiftec Lubricants, manufactured in ISO-certified plants and distributed globally via Noorhan Auto
                        Parts, stands for exceptional chemical stability, advanced engine cleaning, and premium durability.
                    </p>
                </div>
                <p style="margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.7;">Our formulas integrate modern synthetic
                    base stocks and chemical additives sourced from leading global developers. This ensures that every drop
                    of Swiftec oil resists oxidation and thermal shearing, even in high ambient temperatures like the GCC
                    region.</p>

                <div
                    style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 2rem 0; padding-top: 1.5rem;">
                    <div style="display: flex; gap: 12px; align-items: flex-start;">
                        <span
                            style="color: var(--secondary-color); font-weight: bold; font-size: 1.25rem; line-height: 1;">✓</span>
                        <div>
                            <h4 style="font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px;">
                                Anti-Wear Defense</h4>
                            <p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin: 0;">Friction
                                protection under heavy loads.</p>
                        </div>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start;">
                        <span
                            style="color: var(--secondary-color); font-weight: bold; font-size: 1.25rem; line-height: 1;">✓</span>
                        <div>
                            <h4 style="font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px;">
                                Thermal Stability</h4>
                            <p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin: 0;">Resists
                                breakdown under extreme heat.</p>
                        </div>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start;">
                        <span
                            style="color: var(--secondary-color); font-weight: bold; font-size: 1.25rem; line-height: 1;">✓</span>
                        <div>
                            <h4 style="font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px;">
                                OEM Standards</h4>
                            <p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin: 0;">API and
                                ACEA qualified formulas.</p>
                        </div>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start;">
                        <span
                            style="color: var(--secondary-color); font-weight: bold; font-size: 1.25rem; line-height: 1;">✓</span>
                        <div>
                            <h4 style="font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px;">
                                Extended Drain</h4>
                            <p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin: 0;">Prolonged
                                servicing schedules.</p>
                        </div>
                    </div>
                </div>

                <a href="{{ url('/about') }}" class="btn btn-outline" style="margin-top: 1rem;">Read Corporate Profile
                    &rarr;</a>
            </div>

            <!-- Right Side: Rotating Border Image Frame -->
            <div data-aos="fade-left">
                <div class="about-image-card">
                    <img src="{{ asset('assets/images/about-img.png') }}" alt="Swiftec Quality Control Laboratory">
                </div>
            </div>
        </div>
    </section>

    <!-- 3. Product Categories Showcase -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="section-header text-center mx-auto" data-aos="fade-up">
                <span class="tag">Product Lines</span>
                <h2>Lubricants Formulated For Every Sector</h2>
                <p>Explore our segmented range of heavy-duty oils and technical fluids engineered for specific operating
                    criteria.</p>
            </div>

            <div class="category-grid">
                <div class="category-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                    <div class="cat-img">
                        <img src="{{ asset('assets/images/automotive.png') }}" alt="Automotive Lubricants">
                    </div>
                    <div class="cat-content">
                        <h3>Automotive Lubricants</h3>
                        <span class="cat-subtitle">High-Performance Formulas</span>

                        <p class="cat-desc">High-performance engine oils and specialized fluids designed to optimize
                            performance and extend the lifespan of passenger cars, heavy trucks, and motorcycles.</p>

                        <div class="cat-hover-content">
                            <ul class="cat-links">
                                <li><a
                                        href="https://old-swit.test/products?category=automotive&amp;subcategory=passenger-car">Passenger
                                        Car Engine Oil</a></li>
                                <li><a
                                        href="https://old-swit.test/products?category=automotive&amp;subcategory=diesel-engine">Diesel
                                        Engine Oil</a></li>
                                <li><a href="https://old-swit.test/products?category=automotive&amp;subcategory=motorcycle">Motorcycle
                                        Oil</a></li>
                                <li><a
                                        href="https://old-swit.test/products?category=automotive&amp;subcategory=transmission">Transmission
                                        Fluid</a></li>
                            </ul>

                            <a href="https://old-swit.test/products?category=automotive" class="btn btn-dark">View All
                                Automotive Lubricants</a>
                        </div>
                    </div>
                </div>
                <div class="category-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
                    <div class="cat-img">
                        <img src="{{ asset('assets/images/industrial.png') }}" alt="Industrial Lubricants">
                    </div>
                    <div class="cat-content">
                        <h3>Industrial Lubricants</h3>
                        <span class="cat-subtitle">Heavy-Duty Industrial Range</span>

                        <p class="cat-desc">Heavy-duty industrial formulations engineered to withstand extreme pressures and
                            shearing loads, ensuring uninterrupted operation of factory equipment.</p>

                        <div class="cat-hover-content">
                            <ul class="cat-links">
                                <li><a
                                        href="https://old-swit.test/products?category=industrial&amp;subcategory=hydraulic-oil">Hydraulic
                                        Oil</a></li>
                                <li><a href="https://old-swit.test/products?category=industrial&amp;subcategory=compressor">Compressor
                                        Oil</a></li>
                                <li><a href="https://old-swit.test/products?category=industrial&amp;subcategory=gear-oil">Gear
                                        Oil</a></li>
                                <li><a href="https://old-swit.test/products?category=industrial&amp;subcategory=turbine">Turbine
                                        Oil</a></li>
                            </ul>

                            <a href="https://old-swit.test/products?category=industrial" class="btn btn-dark">View All
                                Industrial Lubricants</a>
                        </div>
                    </div>
                </div>
                <div class="category-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
                    <div class="cat-img">
                        <img src="{{ asset('assets/images/marine.png') }}" alt="Marine Lubricants">
                    </div>
                    <div class="cat-content">
                        <h3>Marine Lubricants</h3>
                        <span class="cat-subtitle">Seawater Corrosion Defense</span>

                        <p class="cat-desc">Premium maritime formulas specifically synthesized to deliver outstanding
                            moisture separation, high TBN acid-neutralization, and corrosion defense.</p>

                        <div class="cat-hover-content">
                            <ul class="cat-links">
                                <li><a href="https://old-swit.test/products?category=marine&amp;subcategory=marine-engine">Marine
                                        Engine Oil</a></li>
                                <li><a
                                        href="https://old-swit.test/products?category=marine&amp;subcategory=marine-hydraulic">Marine
                                        Hydraulic Oil</a></li>
                                <li><a href="https://old-swit.test/products?category=marine&amp;subcategory=marine-gear">Marine
                                        Gear Oil</a></li>
                            </ul>

                            <a href="https://old-swit.test/products?category=marine" class="btn btn-dark">View All Marine
                                Lubricants</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. Featured Products Section -->
    <section class="section-padding bg-white">
        <div class="container">
            <div class="section-header text-center mx-auto" data-aos="fade-up">
                <span class="tag">Featured Products</span>
                <h2>Our Best Selling B2B Formulations</h2>
                <p>Engineered for high performance, thermal resistance, and machinery life extension.</p>
            </div>

            <div class="products-grid">
                <div class="product-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                    <div class="prod-img">
                        <img src="https://old-swit.test/storage/products/engine_oil_5w30.png"
                            alt="Swiftec Premium Engine Oil">
                    </div>
                    <span class="cat-badge">Passenger Car Engine Oil</span>
                    <h3>Swiftec Premium Engine Oil</h3>
                    <p>Swiftec Premium Engine Oil is engineered to provide ultimate wear protection, high temperature
                        stability, and optimized fuel efficiency for all engines.</p>
                    <a href="https://old-swit.test/products/engine-oil" class="btn-view">View Specifications →</a>
                </div>
                <div class="product-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
                    <div class="prod-img">
                        <img src="https://old-swit.test/storage/products/hydraulic_oil.png"
                            alt="Swiftec Premium Hydraulic Oil">
                    </div>
                    <span class="cat-badge">Hydraulic Oil</span>
                    <h3>Swiftec Premium Hydraulic Oil</h3>
                    <p>Swiftec Premium Hydraulic Oil is a premium anti-wear fluid designed for outstanding chemical
                        stability, corrosion protection, and power transfer in hydraulic systems.</p>
                    <a href="https://old-swit.test/products/hydraulic-oil" class="btn-view">View Specifications →</a>
                </div>
                <div class="product-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
                    <div class="prod-img">
                        <img src="https://old-swit.test/storage/products/coolant_green.png"
                            alt="Swiftec Premium Coolant Oil">
                    </div>
                    <span class="cat-badge">Coolant</span>
                    <h3>Swiftec Premium Coolant Oil</h3>
                    <p>Swiftec Premium Coolant Oil is an organic acid technology (OAT) coolant and anti-freeze formulated to
                        prevent overheating, freezing, rust, and cavitation.</p>
                    <a href="https://old-swit.test/products/coolant" class="btn-view">View Specifications →</a>
                </div>
                <div class="product-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
                    <div class="prod-img">
                        <img src="https://old-swit.test/storage/products/test_placeholder.png"
                            alt="Swiftec Speciality Oil">
                    </div>
                    <span class="cat-badge">Transmission Fluid</span>
                    <h3>Swiftec Speciality Oil</h3>
                    <p>Swiftec Speciality Oil represents our range of custom-engineered fluids including transmission
                        fluids, brake fluids, compressor oils, gear oils, and turbine oils.</p>
                    <a href="https://old-swit.test/products/speciality-oil" class="btn-view">View Specifications →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. Core Capabilities Section -->
    {{-- <section class="section-padding bg-white">
        <div class="container">
            <div class="section-header text-center mx-auto" data-aos="fade-up">
                <span class="tag">Core Capabilities</span>
                <h2>Industrial Capabilities & Certified Quality</h2>
                <p>Swiftec provides high-grade base oils, customized technical services, and certified lubricants to support
                    global B2B operations.</p>
            </div>

            <div class="category-grid">
                <!-- Card 1: Base Oil -->
                <div class="fleet-card" data-aos="fade-up" data-aos-delay="100"
                    style="background-image: url('{{ asset('assets/images/base_oil_showcase.png') }}'); background-size: cover; background-position: center;">
                    <div class="fleet-card-content">
                        <h3>Base Oil</h3>
                        <p>Swiftec offers top-quality base oils for lubricant blenders around the world, sourcing premium
                            grades to ensure exceptional performance.</p>
                        <a href="{{ url('/contact') }}" class="fleet-btn">Find Out More</a>
                    </div>
                </div>

                <!-- Card 2: Services -->
                <div class="fleet-card" data-aos="fade-up" data-aos-delay="200"
                    style="background-image: url('{{ asset('assets/images/services_showcase.png') }}'); background-size: cover; background-position: center;">
                    <div class="fleet-card-content">
                        <h3>Services</h3>
                        <p>We are proud of our relationships with our customers from around the world and in every industry,
                            providing customized technical consultancy and diagnostics.</p>
                        <a href="{{ url('/contact') }}" class="fleet-btn">Find Out More</a>
                    </div>
                </div>

                <!-- Card 3: Certified Quality -->
                <div class="fleet-card" data-aos="fade-up" data-aos-delay="300"
                    style="background-image: url('{{ asset('assets/images/quality_showcase.png') }}'); background-size: cover; background-position: center;">
                    <div class="fleet-card-content">
                        <h3>Certified Quality</h3>
                        <p>Swiftec operates under internationally recognized certifications, ensuring high manufacturing
                            standards, strict quality control, and reliable performance worldwide.</p>
                        <a href="{{ url('/about') }}" class="fleet-btn">Find Out More</a>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <!-- 6. Why Choose Swiftec Section -->
    <section class="section-padding bg-white">
        <div class="container why-grid">
            <div data-aos="fade-right">
                <div class="section-header">
                    <span class="tag">The Swiftec Edge</span>
                    <h2>Engineered for Ultimate Protection & Machinery Life</h2>
                    <p>Swiftec combines high-purity virgin base oils with custom additives to deliver outstanding
                        lubrication stability and reduce carbon emissions.</p>
                </div>

                <div class="why-list">
                    <div class="why-item">
                        <div class="why-icon">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                            </svg>
                        </div>
                        <div class="why-text">
                            <h3>Advanced Cavitation Protection</h3>
                            <p>Prevents fluid cavitation and mechanical wear inside hydraulic pumps and steering gear lines.
                            </p>
                        </div>
                    </div>
                    <div class="why-item">
                        <div class="why-icon">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z" />
                            </svg>
                        </div>
                        <div class="why-text">
                            <h3>Extreme Heat Resistance</h3>
                            <p>Retains film thickness and viscosity at high desert temperatures without oil breakdown.</p>
                        </div>
                    </div>
                    <div class="why-item">
                        <div class="why-icon">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
                            </svg>
                        </div>
                        <div class="why-text">
                            <h3>Fast Water Demulsibility</h3>
                            <p>Enables quick moisture separation to protect bearings and liners from rust under wet marine
                                conditions.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div data-aos="fade-left">
                <!-- Right column showcase block -->
                <div class="why-showcase-card">
                    <div
                        style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background-color: rgba(37,76,99,0.02); border-radius: 50%;">
                    </div>

                    <h3 style="color: var(--text-dark); font-size: 1.85rem; margin-bottom: 1.5rem; line-height: 1.2;">
                        Backed by Noorhan's 30+ Years of Automotive Heritage</h3>
                    <p style="font-size: 1rem; color: var(--text-medium); margin-bottom: 2rem; line-height: 1.7;">As one of
                        the region's premier auto parts suppliers, Noorhan ensures that Swiftec products adhere to stringent
                        quality control, prompt logistics supply lines, and dedicated B2B sales support.</p>

                    <ul style="list-style: none; margin-bottom: 2.5rem; color: var(--text-medium);">
                        <li style="margin-bottom: 0.75rem; display: flex; align-items: center; font-size: 0.95rem;"><span
                                style="color: var(--secondary-color); margin-right: 12px; font-weight: bold;">✓</span> 100%
                            Virgin Base Oils only</li>
                        <li style="margin-bottom: 0.75rem; display: flex; align-items: center; font-size: 0.95rem;"><span
                                style="color: var(--secondary-color); margin-right: 12px; font-weight: bold;">✓</span>
                            Direct warehouse logistics in the UAE</li>
                        <li style="margin-bottom: 0.75rem; display: flex; align-items: center; font-size: 0.95rem;"><span
                                style="color: var(--secondary-color); margin-right: 12px; font-weight: bold;">✓</span>
                            Technical support engineers on call</li>
                    </ul>

                    <a href="{{ url('/about') }}" class="btn btn-primary">Discover Why Swiftec</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 6.5. Swiftec in Numbers Section (3D Cover Flow Carousel) -->
    <section class="bg-light stats-section" style="position: relative; overflow: hidden; padding: 6rem 0;">
        <div class="container">
            <div class="stats-3d-grid">

                <!-- Left Side: Content & Navigation -->
                <div class="stats-left-col" data-aos="fade-right">
                    <span class="tag">Swiftec Global Scale</span>
                    <h2>Swiftec in Numbers</h2>
                    <p>Our blending infrastructure capacity, global logistics footprint, and strict quality approvals
                        represent our commitment to international manufacturing excellence.</p>
                    <div class="stats-carousel-nav">
                        <button class="stats-prev-btn" aria-label="Previous Stat">&#10094;</button>
                        <button class="stats-next-btn" aria-label="Next Stat">&#10095;</button>
                    </div>
                </div>

                <!-- Right Side: 3D Cover Flow Carousel -->
                <div class="stats-right-col" data-aos="fade-left">
                    <div class="stats-3d-carousel">

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2">
                                    </rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                    <path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01"></path>
                                </svg>
                            </div>
                            <div class="stat-number">2005</div>
                            <div class="stat-label">Year of Establishment</div>
                        </div>

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="2" y1="12" x2="22" y2="12"></line>
                                    <path
                                        d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z">
                                    </path>
                                </svg>
                            </div>
                            <div class="stat-number">86+</div>
                            <div class="stat-label">Export Countries</div>
                        </div>

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                            </div>
                            <div class="stat-number">20+</div>
                            <div class="stat-label">Quality Certificates</div>
                        </div>

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M2 20h20"></path>
                                    <path d="M5 17V8l5 4V8l5 4V8l4 3v6H5z"></path>
                                    <path d="M17 8h2"></path>
                                </svg>
                            </div>
                            <div class="stat-number">5</div>
                            <div class="stat-label">Automated Blending Sites</div>
                        </div>

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="8" r="7"></circle>
                                    <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
                                </svg>
                            </div>
                            <div class="stat-number">60+</div>
                            <div class="stat-label">OEM / API Approvals</div>
                        </div>

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2">
                                    </rect>
                                    <line x1="2" y1="10" x2="22" y2="10"></line>
                                    <line x1="12" y1="3" x2="12" y2="17"></line>
                                    <line x1="7" y1="3" x2="7" y2="17"></line>
                                    <line x1="17" y1="3" x2="17" y2="17"></line>
                                    <path d="M17 21H7a2 2 0 0 1-2-2v-2h14v2a2 2 0 0 1-2 2z"></path>
                                </svg>
                            </div>
                            <div class="stat-number">3,150+</div>
                            <div class="stat-label">Containers Exported Annually</div>
                        </div>

                        <div class="stat-3d-card">
                            <div class="stat-icon-wrapper">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <ellipse cx="12" cy="5" rx="6" ry="3"></ellipse>
                                    <path d="M6 5v14c0 1.66 2.7 3 6 3s6-1.34 6-3V5"></path>
                                    <path d="M6 12c0 1.66 2.7 3 6 3s6-1.34 6-3"></path>
                                </svg>
                            </div>
                            <div class="stat-number">115M</div>
                            <div class="stat-label">Litres Annual Capacity</div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- 7. Certifications & Standards Section -->
    <section class="section-padding bg-light certifications-section">
        <div class="container">
            <div class="section-header text-center mx-auto" style="max-width: 600px; margin-bottom: 3.5rem;"
                data-aos="fade-up">
                <span class="tag">Global Standards</span>
                <h2 style="font-size: 2.25rem;">Meeting Global Quality & Approvals</h2>
            </div>

            <div style="display: flex; justify-content: center; align-items: center; gap: 4rem; flex-wrap: wrap;"
                data-aos="fade-up" data-aos-delay="200">
                <div class="cert-logo-item">
                    <img src="{{ asset('assets/images/cert_esma.png') }}" alt="ESMA Certified"
                        style="height: 75px; width: auto; object-fit: contain;">
                </div>
                <div class="cert-divider"></div>
                <div class="cert-logo-item">
                    <img src="{{ asset('assets/images/cert_iso.png') }}" alt="ISO Standard"
                        style="height: 75px; width: auto; object-fit: contain;">
                </div>
                <div class="cert-divider"></div>
                <div class="cert-logo-item">
                    <img src="{{ asset('assets/images/cert_emirates.png') }}" alt="The Emirates Quality Mark"
                        style="height: 75px; width: auto; object-fit: contain;">
                </div>
            </div>
        </div>
    </section>

    <!-- 8. Distributor Opportunity Section -->
    <section class="section-padding distributor-cta">
        <div class="container dist-cta-content">
            <div class="dist-cta-text" data-aos="fade-right">
                <h2>Expand Your Portfolio. Become a Swiftec Distributor.</h2>
                <p>We provide global partners with competitive pricing, custom packaging volumes, robust technical sheets,
                    marketing support, and certified lubrication guarantees.</p>
            </div>
            <div style="display: flex; gap: 1rem; flex-wrap: wrap;" data-aos="fade-left">
                <a href="{{ url('/distributor') }}" class="btn btn-primary"
                    style="background-color: #ffffff; color: white; border-color: #ffffff;">Apply For Partnership
                    &rarr;</a>
                <a href="{{ url('/downloads') }}" class="btn btn-outline-white">Download Catalog &darr;</a>
            </div>
        </div>
    </section>

    <!-- 9. Blog Preview Section -->
    <section class="section-padding bg-white">
        <div class="container">
            <div class="section-header text-center mx-auto" data-aos="fade-up">
                <span class="tag">Blogs & News</span>
                <h2>Swiftec Insights & Industrial Updates</h2>
                <p>Stay updated on advanced lubrication chemical breakthroughs, heavy machinery tips, and fleet management
                    guides.</p>
            </div>

            @if ($blogs->isNotEmpty())
                <div class="blog-grid">
                    @foreach ($blogs as $blog)
                        <div class="blog-card aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                            <div class="blog-img">
                                <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}">
                            </div>
                            <div class="blog-body">
                                <div class="blog-meta">
                                    <span>{{ $blog->category }}</span>
                                    <span>{{ $blog->created_at->format('M j, Y') }}</span>
                                </div>
                                <h3>{{ $blog->title }}</h3>
                                <p>{{ $blog->short_description }}</p>
                                <a href="{{ url("/blogs/{$blog->slug}") }}" class="read-more">Read Full Post</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <!-- 10. Contact CTA Section -->
    <section class="section-padding bg-light">
        <div class="container text-center" style="max-width: 800px;" data-aos="fade-up">
            <div class="section-header text-center mx-auto" style="margin-bottom: 2rem;">
                <span class="tag">Get in Touch</span>
                <h2>Have Technical or Pricing Queries?</h2>
                <p>Our engineers are ready to analyze your equipment operating criteria and recommend the ideal cost-saving
                    lubrication solutions.</p>
            </div>
            <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;" data-aos="fade-up"
                data-aos-delay="200">
                <a href="{{ url('/contact') }}" class="btn btn-primary">Contact Sales Team</a>
                <a href="tel:{{ str_replace(' ', '', config('static_data.settings.SITE_PHONE', '+971 4 339 7110')) }}"
                    class="btn btn-outline">Call {{ config('static_data.settings.SITE_PHONE', '+971 4 339 7110') }}</a>
            </div>
        </div>
    </section>
@endsection