@extends('layouts.app')

@section('title', "{$vehicle->full_name} (Lot #{$vehicle->lot_number}) – Japan Live Auction | MotoSolution")
@section('meta_description', "Live Japan auction bidding for {$vehicle->full_name} at {$vehicle->auctionHouse->name}. Grade {$vehicle->auction_grade}, verified inspection sheet, live landed cost breakdown.")

@section('content')
<!-- Breadcrumbs -->
<div class="bg-[#0B0F19] border-b border-white/10 text-xs py-3 text-slate-400">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-white">Home</a>
        <span>/</span>
        <a href="{{ route('auction.index') }}" class="hover:text-white">Japan Live Auctions</a>
        <span>/</span>
        <span class="text-white font-medium truncate">{{ $vehicle->full_name }} (Lot #{{ $vehicle->lot_number }})</span>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10" 
     x-data="{ 
        activeImage: '{{ $vehicle->main_image }}',
        sheetZoomModal: false,
        bidModalOpen: false,
        bidAmountJpy: {{ (int) $vehicle->starting_bid_jpy }},
        startingBidJpy: {{ (int) $vehicle->starting_bid_jpy }},
        rate: {{ config('motosolution.currency.jpy_to_bdt_rate') }},
        engineCc: {{ $vehicle->engine_cc }},
        fuelType: '{{ $vehicle->fuel_type }}',
        year: {{ $vehicle->year }},
        termsAccepted: false,
        isCalculating: false,
        
        get calculatedBdCost() {
            // Live formula calculation based on NBR tariffs
            let jpy = parseFloat(this.bidAmountJpy) || this.startingBidJpy;
            let jpyTotal = jpy + 25000 + 35000 + 180000;
            let cifBdt = (jpyTotal * this.rate) + 25000;
            
            // Age depreciation
            let currentYear = new Date().getFullYear();
            let age = Math.max(0, currentYear - this.year);
            let depRate = age >= 4 ? 0.40 : (age === 3 ? 0.30 : (age === 2 ? 0.20 : (age === 1 ? 0.10 : 0.0)));
            let av = cifBdt * (1 - depRate);

            // Duty rate based on CC and Hybrid
            let isHyb = this.fuelType.toLowerCase().includes('hybrid');
            let sdRate = this.engineCc <= 1500 ? 0.20 : (this.engineCc <= 1800 ? (isHyb ? 0.45 : 0.60) : (this.engineCc <= 2000 ? (isHyb ? 0.60 : 1.00) : (isHyb ? 1.50 : 2.00)));
            
            let cd = av * 0.25;
            let rd = av * 0.03;
            let baseSd = av + cd + rd;
            let sd = baseSd * sdRate;
            let baseVat = baseSd + sd;
            let vat = baseVat * 0.15;
            let ait = av * 0.05;
            let at = baseVat * 0.05;
            
            let duties = cd + rd + sd + vat + ait + at;
            let localCharges = 55000 + 135000 + 50000 + 15000;
            
            return Math.round(cifBdt + duties + localCharges);
        }
     }">

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        
        <!-- Left 7 Cols: Images, Auction Sheet, Condition Map -->
        <div class="lg:col-span-7 space-y-6">
            
            <!-- Main Lot Image -->
            <div class="relative bg-slate-950 rounded-3xl overflow-hidden aspect-[16/10] border border-white/10 shadow-2xl">
                <img :src="activeImage" alt="{{ $vehicle->full_name }}" class="w-full h-full object-cover transition duration-300">
                
                <div class="absolute top-4 left-4 flex gap-2">
                    <span class="bg-red-600 text-white text-xs font-black px-3 py-1 rounded-lg shadow">
                        {{ $vehicle->auctionHouse->name }} • Lot #{{ $vehicle->lot_number }}
                    </span>
                    <span class="bg-amber-400 text-slate-950 text-xs font-black px-3 py-1 rounded-lg shadow">
                        Grade {{ $vehicle->auction_grade }}
                    </span>
                </div>

                <div class="absolute bottom-4 inset-x-4 bg-black/75 backdrop-blur-md rounded-xl p-3 flex items-center justify-between text-xs text-white border border-white/10">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping"></span>
                        <span class="font-bold">Live Auction Schedule:</span>
                    </div>
                    <span class="font-extrabold text-amber-300">{{ $vehicle->auction_date->format('M d, Y') }} at {{ $vehicle->auction_time }}</span>
                </div>
            </div>

            <!-- Thumbnail Gallery -->
            <div class="grid grid-cols-4 sm:grid-cols-6 gap-2.5">
                <button type="button" @click="activeImage = '{{ $vehicle->main_image }}'" class="aspect-[4/3] rounded-xl overflow-hidden border-2 transition" :class="activeImage === '{{ $vehicle->main_image }}' ? 'border-red-600 ring-2 ring-red-600/30' : 'border-transparent opacity-70 hover:opacity-100'">
                    <img src="{{ $vehicle->main_image }}" class="w-full h-full object-cover">
                </button>
                @if($vehicle->gallery)
                    @foreach($vehicle->gallery as $img)
                        <button type="button" @click="activeImage = '{{ $img }}'" class="aspect-[4/3] rounded-xl overflow-hidden border-2 transition" :class="activeImage === '{{ $img }}' ? 'border-red-600 ring-2 ring-red-600/30' : 'border-transparent opacity-70 hover:opacity-100'">
                            <img src="{{ $img }}" class="w-full h-full object-cover">
                        </button>
                    @endforeach
                @endif
                <!-- Auction Sheet Thumbnail -->
                <button type="button" @click="sheetZoomModal = true" class="aspect-[4/3] rounded-xl overflow-hidden border-2 border-amber-400/60 bg-amber-950/30 flex flex-col items-center justify-center text-amber-300 text-xs font-bold p-1 hover:bg-amber-900/40 transition">
                    <i class="fa-solid fa-magnifying-glass-plus text-base mb-1"></i>
                    <span>Zoom Sheet</span>
                </button>
            </div>

            <!-- Authentic Japanese Auction Sheet Viewer Component -->
            <div class="bg-[#111827] text-white p-6 rounded-2xl border border-white/10 space-y-4">
                <div class="flex items-center justify-between border-b border-white/10 pb-3">
                    <div class="flex items-center gap-2">
                        <i class="fa-solid fa-file-contract text-red-500 text-lg"></i>
                        <h3 class="font-bold text-white text-base font-heading">Original Japanese Auction Sheet</h3>
                    </div>
                    <button type="button" @click="sheetZoomModal = true" class="text-xs font-bold text-red-400 hover:text-red-300 flex items-center gap-1">
                        <i class="fa-solid fa-expand"></i> Full-Screen High Res Zoom
                    </button>
                </div>

                <!-- Preview Thumbnail with Zoom Trigger -->
                <div class="relative rounded-xl overflow-hidden border border-white/10 cursor-pointer group bg-black/50" @click="sheetZoomModal = true">
                    <img src="{{ $vehicle->auction_sheet_url }}" alt="Auction Sheet Lot {{ $vehicle->lot_number }}" class="w-full max-h-72 object-contain group-hover:scale-105 transition duration-300">
                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                        <span class="px-4 py-2 rounded-xl bg-red-600 text-white font-bold text-xs shadow-xl flex items-center gap-2">
                            <i class="fa-solid fa-magnifying-glass-plus"></i> Click to Zoom High-Res Sheet
                        </span>
                    </div>
                </div>

                <!-- Condition Codes Explainer Translation Table -->
                <div class="pt-2">
                    <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2.5">Japanese Inspector Condition Marks Guide</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
                        <div class="p-2.5 rounded-lg bg-white/5 border border-white/5">
                            <span class="font-black text-amber-400">A1 / A2 / A3</span>
                            <p class="text-[10px] text-slate-400 mt-0.5">Scratch (Light / Noticeable / Deep)</p>
                        </div>
                        <div class="p-2.5 rounded-lg bg-white/5 border border-white/5">
                            <span class="font-black text-amber-400">U1 / U2 / U3</span>
                            <p class="text-[10px] text-slate-400 mt-0.5">Dent (Dimple / Noticeable / Large)</p>
                        </div>
                        <div class="p-2.5 rounded-lg bg-white/5 border border-white/5">
                            <span class="font-black text-amber-400">W1 / W2 / W3</span>
                            <p class="text-[10px] text-slate-400 mt-0.5">Repaint / Wave (Good / Fair / Visible)</p>
                        </div>
                        <div class="p-2.5 rounded-lg bg-white/5 border border-white/5">
                            <span class="font-black text-amber-400">XX / S</span>
                            <p class="text-[10px] text-slate-400 mt-0.5">Panel Replaced / Rust Underbody</p>
                        </div>
                    </div>
                </div>

                <!-- Specific Damage Notes for this Lot -->
                @if($vehicle->damage_info)
                    <div class="p-3.5 rounded-xl bg-amber-500/10 border border-amber-500/20 text-xs text-amber-200 space-y-1">
                        <span class="font-bold flex items-center gap-1.5 text-amber-300">
                            <i class="fa-solid fa-circle-info"></i> Inspector Notes on Lot #{{ $vehicle->lot_number }}:
                        </span>
                        <p class="leading-relaxed text-slate-300">{{ $vehicle->damage_info }}</p>
                    </div>
                @endif
            </div>

            <!-- Equipment & Factory Options -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 space-y-3 text-xs">
                <h3 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-2">Factory Specifications & Options</h3>
                <p class="text-slate-600 leading-relaxed">{{ $vehicle->equipment_options }}</p>
            </div>
        </div>

        <!-- Right 5 Cols: Pricing, Live Landed Cost, Bidding Authorization Box -->
        <div class="lg:col-span-5 space-y-6">
            <div class="bg-[#111827] text-white p-6 rounded-3xl border border-white/10 shadow-2xl space-y-6 sticky top-24" id="bid-section">
                
                <!-- Lot Header -->
                <div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-red-400 uppercase tracking-wider">{{ $vehicle->auctionHouse->name }}</span>
                        <span class="text-xs font-mono bg-red-600/30 text-red-400 border border-red-500/30 px-2 py-0.5 rounded font-bold">Lot #{{ $vehicle->lot_number }}</span>
                    </div>
                    <h1 class="text-2xl font-extrabold text-white font-heading mt-1">{{ $vehicle->full_name }}</h1>
                    <p class="text-xs text-slate-400 mt-0.5">{{ $vehicle->color }} • {{ $vehicle->transmission }} • Chassis: {{ $vehicle->chassis_number }}</p>
                </div>

                <!-- Starting Bid & Landed Cost Baseline -->
                <div class="p-4 rounded-2xl bg-black/40 border border-white/10 space-y-3">
                    <div class="flex items-baseline justify-between">
                        <div>
                            <span class="text-[10px] uppercase font-bold text-slate-400 block">Starting Floor Price</span>
                            <span class="text-2xl font-extrabold text-white font-heading">{{ $vehicle->formatted_starting_bid }}</span>
                        </div>
                        <div class="text-right">
                            <span class="text-[10px] uppercase font-bold text-slate-400 block">Estimated Landed Cost</span>
                            <span class="text-xl font-extrabold text-emerald-400 font-heading" x-text="'৳' + calculatedBdCost.toLocaleString()">
                                {{ $vehicle->formatted_estimated_bd_cost }}
                            </span>
                        </div>
                    </div>
                    <p class="text-[10px] text-slate-400 leading-tight">
                        *Includes ocean freight, customs duty, Chittagong Port charges, and registration.
                    </p>
                </div>

                <!-- Customer Bidding Console -->
                <div class="space-y-4 pt-2 border-t border-white/10">
                    <div>
                        <div class="flex items-center justify-between mb-1.5">
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-200">
                                Your Authorized Maximum Bid (JPY)
                            </label>
                            <span class="text-xs text-amber-400 font-bold" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></span>
                        </div>
                        
                        <div class="relative">
                            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-sm">¥</span>
                            <input type="number" x-model.number="bidAmountJpy" step="10000" min="{{ (int) $vehicle->starting_bid_jpy }}"
                                class="w-full pl-8 pr-4 py-3 bg-black/60 border border-white/20 rounded-xl text-white font-bold text-base focus:outline-none focus:border-red-500">
                        </div>

                        <!-- Quick Increment Buttons -->
                        <div class="grid grid-cols-3 gap-2 mt-2">
                            <button type="button" @click="bidAmountJpy += 50000" class="py-1.5 px-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-semibold text-slate-300 border border-white/5 transition">
                                +¥50,000
                            </button>
                            <button type="button" @click="bidAmountJpy += 100000" class="py-1.5 px-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-semibold text-slate-300 border border-white/5 transition">
                                +¥100,000
                            </button>
                            <button type="button" @click="bidAmountJpy = startingBidJpy" class="py-1.5 px-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-semibold text-slate-400 border border-white/5 transition">
                                Reset
                            </button>
                        </div>
                    </div>

                    <!-- Live Breakdown Summary Box -->
                    <div class="p-3.5 bg-black/30 rounded-xl border border-white/10 space-y-1.5 text-xs text-slate-300">
                        <div class="flex justify-between">
                            <span>Max Japan Bid authorized:</span>
                            <span class="font-bold text-white" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></span>
                        </div>
                        <div class="flex justify-between">
                            <span>CIF + Freight + Insurance (BDT):</span>
                            <span class="font-bold text-slate-300" x-text="'৳' + Math.round(((bidAmountJpy + 240000) * rate) + 25000).toLocaleString()"></span>
                        </div>
                        <div class="flex justify-between">
                            <span>Customs Duty + SD + VAT (Est.):</span>
                            <span class="font-bold text-slate-300" x-text="'৳' + Math.round(calculatedBdCost * 0.48).toLocaleString()"></span>
                        </div>
                        <div class="flex justify-between pt-1.5 border-t border-white/10 font-bold text-sm">
                            <span class="text-white">Est. Bangladesh Total:</span>
                            <span class="text-emerald-400" x-text="'৳' + calculatedBdCost.toLocaleString()"></span>
                        </div>
                    </div>

                    <!-- Terms Checkbox -->
                    <div class="flex items-start gap-2 text-xs text-slate-300">
                        <input type="checkbox" id="agree_terms" x-model="termsAccepted" class="mt-0.5 rounded bg-black/60 border-white/20 text-red-600 focus:ring-0">
                        <label for="agree_terms">
                            I authorize MotoSolution to bid up to <strong class="text-white" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></strong> on my behalf in Japan. I agree to the <a href="{{ route('faq') }}" target="_blank" class="text-red-400 hover:underline">Auction Terms & Conditions</a>.
                        </label>
                    </div>

                    <!-- Action Trigger Button -->
                    @auth
                        <button type="button" @click="bidModalOpen = true" :disabled="!termsAccepted || bidAmountJpy < startingBidJpy"
                            class="w-full py-4 px-6 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-bold rounded-xl shadow-xl shadow-red-900/40 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-gavel"></i>
                            <span>Submit Maximum Authorized Bid</span>
                        </button>
                    @else
                        <a href="{{ route('login') }}" class="w-full py-4 px-6 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl shadow-xl shadow-red-900/40 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-lock"></i>
                            <span>Login to Place Authorized Bid</span>
                        </a>
                    @endauth

                    <!-- Critical Business Rule Note -->
                    <div class="p-3 bg-red-950/30 border border-red-500/20 rounded-xl text-[11px] text-red-300 leading-relaxed">
                        <i class="fa-solid fa-shield-halved text-red-400 mr-1"></i>
                        <strong>Important Commercial Workflow:</strong> Your bid is authorization for our Tokyo floor team. The bid is first reviewed and verified by MotoSolution administration before dispatching to the Japanese auction floor.
                    </div>
                </div>

                <!-- Complete Specifications Table -->
                <div class="border-t border-white/10 pt-4">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Lot Technical Specifications</h3>
                    <div class="divide-y divide-white/10 text-xs">
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Auction House</span><span class="font-bold text-white">{{ $vehicle->auctionHouse->name }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Lot Number</span><span class="font-bold text-white">#{{ $vehicle->lot_number }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Year / Month</span><span class="font-bold text-white">{{ $vehicle->year }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Engine CC</span><span class="font-bold text-white">{{ $vehicle->engine_cc }} cc</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Fuel</span><span class="font-bold text-white">{{ $vehicle->fuel_type }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Transmission</span><span class="font-bold text-white">{{ $vehicle->transmission }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Drive</span><span class="font-bold text-white">{{ $vehicle->drive_type }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Color</span><span class="font-bold text-white">{{ $vehicle->color }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Mileage</span><span class="font-bold text-white">{{ number_format($vehicle->mileage) }} km</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Overall Auction Grade</span><span class="font-bold text-amber-400">Grade {{ $vehicle->auction_grade }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Interior / Exterior</span><span class="font-bold text-white">{{ $vehicle->interior_grade }} / {{ $vehicle->exterior_grade }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Chassis</span><span class="font-mono font-bold text-slate-300">{{ $vehicle->chassis_number }}</span></div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- Final Bid Confirmation Modal -->
    <div x-show="bidModalOpen" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md" style="display: none;">
        <div class="bg-[#111827] text-white rounded-3xl max-w-lg w-full p-7 border border-white/10 shadow-2xl relative" @click.outside="bidModalOpen = false">
            <button @click="bidModalOpen = false" class="absolute top-4 right-4 text-slate-400 hover:text-white">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>

            <div class="text-center pb-4 border-b border-white/10">
                <div class="w-12 h-12 rounded-2xl bg-red-600/20 text-red-500 flex items-center justify-center text-xl mx-auto mb-2 border border-red-500/30">
                    <i class="fa-solid fa-gavel"></i>
                </div>
                <h3 class="text-xl font-bold text-white font-heading">Confirm Bid Authorization</h3>
                <p class="text-xs text-slate-400 mt-0.5">Please review your maximum authorized ceiling before submission.</p>
            </div>

            <form method="POST" action="{{ route('auction.bid', $vehicle->id) }}" class="space-y-4 pt-4 text-xs">
                @csrf
                <input type="hidden" name="max_bid_jpy" :value="bidAmountJpy">
                <input type="hidden" name="terms" value="1">

                <div class="p-4 bg-black/40 rounded-xl border border-white/10 space-y-2">
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-300">Vehicle:</span>
                        <span class="font-bold text-white">{{ $vehicle->full_name }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-300">Auction Lot:</span>
                        <span class="font-bold text-red-400">{{ $vehicle->auctionHouse->name }} #{{ $vehicle->lot_number }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm pt-2 border-t border-white/10">
                        <span class="text-slate-300">Maximum Floor Bid:</span>
                        <span class="font-extrabold text-white text-base" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-300">Estimated Bangladesh Landed:</span>
                        <span class="font-extrabold text-emerald-400 text-base" x-text="'৳' + calculatedBdCost.toLocaleString()"></span>
                    </div>
                </div>

                <div>
                    <label class="block font-bold text-slate-300 uppercase mb-1">Special Instructions for Tokyo Desk (Optional)</label>
                    <textarea name="notes" rows="2" placeholder="e.g. Do not exceed ¥2,600,000 if bidding gets competitive" class="w-full bg-black/40 border border-white/10 rounded-xl p-2.5 text-white focus:outline-none focus:border-red-500"></textarea>
                </div>

                <div class="p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl text-[11px] text-amber-300 leading-relaxed">
                    By confirming, you authorize MotoSolution Bangladesh to bid at the Japanese auction hall up to this ceiling. If won, you will only pay the actual winning hammer price.
                </div>

                <div class="grid grid-cols-2 gap-3 pt-2">
                    <button type="button" @click="bidModalOpen = false" class="py-3 px-4 bg-white/10 hover:bg-white/15 text-white font-bold rounded-xl transition">
                        Cancel
                    </button>
                    <button type="submit" class="py-3 px-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow-lg shadow-red-900/40 transition">
                        Authorize Bid Now
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Full-Screen Auction Sheet Lightbox Modal -->
    <div x-show="sheetZoomModal" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 backdrop-blur-md" style="display: none;">
        <div class="max-w-4xl w-full bg-[#111827] rounded-3xl p-6 border border-white/15 shadow-2xl relative" @click.outside="sheetZoomModal = false">
            <button @click="sheetZoomModal = false" class="absolute top-4 right-4 text-slate-400 hover:text-white text-xl">
                <i class="fa-solid fa-xmark"></i>
            </button>
            <div class="flex items-center justify-between pb-3 border-b border-white/10 mb-4">
                <h3 class="font-bold text-white text-base">Auction Inspection Sheet – Lot #{{ $vehicle->lot_number }} (Grade {{ $vehicle->auction_grade }})</h3>
                <span class="text-xs text-amber-400 font-bold mr-8">Verified Japanese Certificate</span>
            </div>
            <div class="overflow-auto max-h-[75vh] flex justify-center bg-black/60 rounded-xl p-2">
                <img src="{{ $vehicle->auction_sheet_url }}" class="max-w-full h-auto object-contain">
            </div>
            <p class="text-center text-xs text-slate-400 mt-3">High-resolution original inspection document recorded by certified Japanese auction inspectors.</p>
        </div>
    </div>

</div>
@endsection