@extends('website.app')

@section('content')
    <section class="page-hero">
        <div class="container">
            <div class="page-hero-content" data-aos="fade-up">
                <h1>Fleet Motorcycle Solutions</h1>
                <ul class="breadcrumbs">
                    <li><a href="https://old-swit.test">Home</a></li>
                    <li><a href="https://old-swit.test/fleet">Fleet Industries</a></li>
                    <li>Fleet Motorcycle Solutions</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Fleet Details Section -->
    <section class="section-padding bg-white">
        <div class="container fleet-detail-grid">

            <!-- Main Content -->
            <div data-aos="fade-right">
                <div class="section-header" style="margin-bottom: 2rem;">
                    <span class="tag">Overview</span>
                    <h2>Industry Strategy & Performance Guidelines</h2>
                </div>
                <p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 2.5rem; color: var(--text-medium);">Delivery
                    and courier fleets require high-revving motorcycle engines to remain cool and protected under constant
                    daily delivery operation.</p>

                <h3 style="font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--primary-color);">Lubrication Solutions &
                    Benefits</h3>
                <ul class="bullets-list" style="margin-bottom: 3rem;">
                    <li style="font-size: 1.05rem; margin-bottom: 1.25rem;">Optimized friction coefficients to prevent
                        clutch slip.</li>
                    <li style="font-size: 1.05rem; margin-bottom: 1.25rem;">Active cooling properties to prevent piston
                        varnish.</li>
                    <li style="font-size: 1.05rem; margin-bottom: 1.25rem;">Durable anti-wear film for gearbox components.
                    </li>
                </ul>

                <!-- Recommended Products -->
                <h3 style="font-size: 1.5rem; margin-bottom: 2rem; color: var(--primary-color);">Recommended Lubricants &
                    Fluids</h3>
                <div class="products-grid" style="grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
                    <div class="product-card" style="padding: 1.25rem;" data-aos="fade-up" data-aos-delay="100">
                        <span class="cat-badge" style="font-size: 0.7rem;">Passenger Car Engine Oil</span>
                        <h4 style="font-size: 1.1rem; margin-bottom: 0.5rem;">Swiftec Premium Engine Oil</h4>
                        <p style="font-size: 0.8rem; margin-bottom: 1rem; line-height: 1.5; min-height: auto;">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"
                            style="font-size: 0.85rem; font-weight: 700; color: var(--secondary-color);">Specs & Datasheets
                            &rarr;</a>
                    </div>
                </div>
            </div>

            <!-- Sidebar Challenges -->
            <aside class="challenges-panel" data-aos="fade-left">
                <h3>Key Operational Challenges</h3>
                <ul class="challenges-list">
                    <li>High operational heat in air-cooled delivery engines.</li>
                    <li>Wet clutch slippage in stop-and-go courier routes.</li>
                    <li>Rapid oil degradation from short delivery trips.</li>
                </ul>

                <div style="margin-top: 3rem; text-align: center;">
                    <p style="font-size: 0.85rem; opacity: 0.8; margin-bottom: 1.5rem; line-height: 1.5;">Need a tailored
                        maintenance lubrication study for your business fleet?</p>
                    <a href="https://old-swit.test/contact" class="btn btn-primary" style="width: 100%;">Request Technical
                        Support</a>
                </div>
            </aside>

        </div>
    </section>
@endsection