@extends('front.layout.app')
@section('title', 'Touro Resources Limited Japan — Premium Automotive & Heavy Machinery Export')
@section('meta_description', 'Your trusted partner for sourcing high-quality Japanese vehicles, heavy machinery, spare parts, and direct auction access. Shipping reliably across six continents.')

@section('content')

    @php
        $listingHref = auth()->check()
            ? (auth()->user()->hasRole('admin') ? route('admin.listings.create') : route('vendor.listings.create'))
            : '#';
    @endphp

    {{-- Premium Modern Fonts Styling --}}
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Sora:wght@600;700;800&display=swap');

        .trl-wrapper {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .trl-wrapper h1,
        .trl-wrapper h2,
        .trl-wrapper h3,
        .trl-wrapper h5 {
            font-family: 'Sora', sans-serif;
            letter-spacing: -0.02em;
        }
        .trl-badge-premium {
            background: rgba(var(--primary-rgb), 0.08);
            border: 1px solid rgba(var(--primary-rgb), 0.15);
            padding: 6px 14px;
            border-radius: 50px;
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
        }
    </style>

    <div class="trl-wrapper">

        {{-- Hero Section --}}
        <section class="dealer-hero">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="trl-badge-premium text-primary mb-3">
                            <i class="fal fa-sparkles"></i> {{ \App\Models\CmsPage::get($cms, 'hero_subtitle') }}
                        </div>
                        <h1 class="dealer-hero-title fw-8">
                            {!! \App\Models\CmsPage::get($cms, 'hero_list', 'title') !!}
                        </h1>
                        <p class="dealer-hero-desc text-muted fs-15">
                            {{ \App\Models\CmsPage::get($cms, 'hero_list', 'description') }}
                        </p>
                        <div class="dealer-trust-badges">
                            @foreach(\App\Models\CmsPage::get($cms, 'hero_list', 'items', []) as $item)
                                <span><i class="fas fa-check-circle text-primary"></i> {{ trim($item) }}</span>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="dealer-hero-image-wrap">
                            <img src="{{ \App\Models\CmsPage::image($cms, 'hero_image', 'assets/images/header.jpg') }}"
                                 alt="Premium vehicles ready for global export at TRL Japan" class="dealer-hero-image rounded-4">
                            <div class="dealer-stats-overlay">
                                @php
                                    $heroCards = \App\Models\CmsPage::cardsByPrefix($cms, 'hero_image_card_');
                                @endphp
                                @foreach($heroCards as $card)
                                    <div class="dealer-stats-overlay-item">
                                        <span class="dealer-stats-overlay-label">{{ $card['title'] }}</span>
                                        <span class="dealer-stats-overlay-value {{ $loop->last ? 'text-primary' : '' }}">{{ $card['description'] }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- Corporate Identity & Core Values --}}
        <section class="dealer-stats">
            <div class="container">
                <div class="text-center mb-5">
                    <p class="text-primary fw-6 text-uppercase ls-1 fs-14">{{ \App\Models\CmsPage::get($cms, 'section_one_subtitle') }}</p>
                    <h2 class="fw-7">{{ \App\Models\CmsPage::get($cms, 'section_one_title') }}</h2>
                    <p class="text-muted mt-2 max-w-3xl mx-auto fs-15 lh-relaxed">
                        {{ \App\Models\CmsPage::get($cms, 'section_one_description') }}
                    </p>
                </div>
                <div class="row">
                    @php
                        $sectionOneIcons = ['fal fa-shield-check', 'fal fa-star', 'fal fa-globe', 'fal fa-handshake'];
                        $sectionOneCards = \App\Models\CmsPage::cardsByPrefix($cms, 'section_one_card_');
                    @endphp
                    @foreach($sectionOneCards as $index => $card)
                        <div class="col-lg-3 col-md-6 mb-4">
                            <div class="dealer-stat-card fade-up">
                                <div class="dealer-stat-icon"><i class="{{ $sectionOneIcons[$index] ?? 'fal fa-star' }}"></i></div>
                                <div class="dealer-stat-number fw-6 fs-20">{{ $card['title'] }}</div>
                                <div class="dealer-stat-label">{{ $card['description'] }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- Strategic Focus: Vision & Mission --}}
        <section class="dealer-benefits" id="vision-mission">
            <div class="container">
                <div class="text-center mb-5">
                    <p class="text-primary fw-6 text-uppercase ls-1 fs-14">{{ \App\Models\CmsPage::get($cms, 'section_two_subtitle') }}</p>
                    <h2 class="fw-7">{{ \App\Models\CmsPage::get($cms, 'section_two_title') }}</h2>
                </div>
                <div class="row justify-content-center">
                    @php
                        $visionCard = \App\Models\CmsPage::cardsByPrefix($cms, 'section_two_card_')->first();
                    @endphp
                    @if($visionCard)
                        <div class="col-lg-6 col-md-6 mb-4">
                            <div class="dealer-benefit-card fade-up h-100">
                                <div class="dealer-benefit-icon"><i class="fal fa-eye"></i></div>
                                <p class="text-primary fw-7 fs-12 ls-1 text-uppercase mb-1">{{ $visionCard['title'] }}</p>
                                <h5 class="fw-5 lh-base">{{ $visionCard['description'] }}</h5>
                            </div>
                        </div>
                    @endif

                    <div class="col-lg-6 col-md-6 mb-4">
                        <div class="dealer-benefit-card fade-up h-100">
                            <div class="dealer-benefit-icon"><i class="fal fa-bullseye"></i></div>
                            <p class="text-primary fw-7 fs-12 ls-1 text-uppercase mb-1">{{ \App\Models\CmsPage::get($cms, 'section_two_list', 'title') }}</p>
                            <ul class="text-start list-unstyled ps-0 mt-3 market-list fs-14">
                                @foreach(\App\Models\CmsPage::get($cms, 'section_two_list', 'items', []) as $item)
                                    <li class="mb-2"><i class="fas fa-chevron-right text-primary me-2"></i> {{ trim($item) }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- Core Services Grid --}}
        <section class="dealer-benefits seller-features">
            <div class="container">
                <div class="text-center mb-5">
                    <p class="text-primary fw-6 text-uppercase ls-1 fs-14">{{ \App\Models\CmsPage::get($cms, 'section_three_subtitle') }}</p>
                    <h2 class="fw-7">{{ \App\Models\CmsPage::get($cms, 'section_three_title') }}</h2>
                </div>
                <div class="row">
                    @php
                        $serviceIcons = ['fal fa-ship', 'fal fa-gavel', 'fal fa-cogs', 'fal fa-wrench', 'fal fa-clipboard-check', 'fal fa-boxes'];
                        $serviceCards = \App\Models\CmsPage::cardsByPrefix($cms, 'section_three_card_');
                    @endphp
                    @foreach($serviceCards as $index => $card)
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="dealer-benefit-card fade-up">
                                <div class="dealer-benefit-icon"><i class="{{ $serviceIcons[$index] ?? 'fal fa-star' }}"></i></div>
                                <h5 class="fw-6">{{ trim($card['title']) }}</h5>
                                <p class="text-muted fs-14">{{ trim($card['description']) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- Value Proposition Showcase --}}
        <section class="seller-pricing-wrap" id="why-choose-us">
            <div class="container">
                <div class="text-center mb-4">
                    <p class="text-primary fw-6 text-uppercase ls-1 fs-14">{{ \App\Models\CmsPage::get($cms, 'section_four_subtitle') }}</p>
                    <h2 class="fw-7">{{ \App\Models\CmsPage::get($cms, 'section_four_title') }}</h2>
                    <p class="text-muted mt-2 fs-15">{{ \App\Models\CmsPage::get($cms, 'section_four_description') }}</p>
                </div>
                <div class="seller-pricing-shell fade-up">
                    <div class="seller-pricing-card">
                        <div class="seller-pricing-headline">
                            <div>
                                <p class="text-primary fw-7 text-uppercase ls-1 fs-12 mb-2">{{ \App\Models\CmsPage::get($cms, 'section_five_subtitle') }}</p>
                                <div class="seller-pricing-amount fw-7">
                                    {!! \App\Models\CmsPage::get($cms, 'section_five_list', 'title') !!}
                                </div>
                                <p class="seller-pricing-vs fs-14">{{ \App\Models\CmsPage::get($cms, 'section_five_description') }}</p>
                            </div>
                            <a href="{{ $listingHref }}" class="dealer-btn dealer-btn-primary"
                               @guest data-bs-toggle="modal" data-bs-target="#popup_bid" @endguest>
                                Inquire for Procurement <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                        <div class="seller-pricing-includes fs-14">
                            @foreach(\App\Models\CmsPage::get($cms, 'section_five_list', 'items', []) as $item)
                                <div><i class="fas fa-check-circle text-primary"></i> {{ trim($item) }}</div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
    {{-- Scroll Animation --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.15 });

            document.querySelectorAll('.fade-up').forEach(function (el) {
                observer.observe(el);
            });
        });
    </script>

@endsection