{{include "header.html"}}
{{include "nav.html"}}

{{$content := .Content}}
{{$col := .CurrentColumn}}
{{$albums := .Content.Albums}}

<section class="bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="flex items-center text-sm text-gray-500 mb-6">
            <a href="/" class="hover:text-primary">Home</a>
            <svg class="w-4 h-4 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            {{if $col}}
            <a href="/{{$col.Slug}}" class="hover:text-primary">{{$col.Name}}</a>
            <svg class="w-4 h-4 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            {{end}}
            <span class="text-gray-900">{{$content.Title}}</span>
        </nav>
    </div>
</section>

<section class="bg-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
                <div class="relative rounded-xl overflow-hidden bg-gray-100 mb-4">
                    {{if $content.Img}}
                    <img id="main-image" src="{{$content.Img}}" alt="{{$content.Title}}" class="w-full h-96 object-cover">
                    {{else}}
                    <div class="w-full h-96 flex items-center justify-center">
                        <svg class="w-24 h-24 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    {{end}}
                </div>
                {{if $albums}}
                <div class="grid grid-cols-4 gap-2">
                    {{range $albums}}
                    <img src="{{.}}" alt="Product image" class="w-full h-20 object-cover rounded cursor-pointer hover:opacity-75 transition" onclick="document.getElementById('main-image').src='{{.}}'">
                    {{end}}
                </div>
                {{end}}
            </div>
            
            <div>
                <div class="flex items-center gap-3 mb-4">
                    {{$powerType := index $content.Ext "power_type"}}
                    {{if $powerType}}
                    <span class="
                        {{if eq $powerType "Electric"}}bg-green-100 text-green-800{{else if eq $powerType "Hybrid"}}bg-orange-100 text-orange-800{{else}}bg-blue-100 text-blue-800{{end}} 
                        px-3 py-1 rounded-full text-sm font-medium">
                        {{$powerType}}
                    </span>
                    {{end}}
                    {{$model := index $content.Ext "model"}}
                    {{if $model}}
                    <span class="text-gray-500 text-sm">Model: {{$model}}</span>
                    {{end}}
                </div>
                
                <h1 class="text-3xl font-bold text-gray-900 mb-4">{{$content.Title}}</h1>
                <p class="text-gray-600 mb-6">{{$content.Description}}</p>
                
                <div class="flex flex-wrap gap-2 mb-8">
                    {{$certifications := index $content.Ext "certifications"}}
                    {{if $certifications}}
                    <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded text-sm">{{$certifications}}</span>
                    {{end}}
                </div>
                
                <div class="border-t border-gray-200 pt-6 mb-8">
                    <div class="grid grid-cols-2 gap-4 mb-6">
                        {{$moq := index $content.Ext "moq"}}
                        {{if $moq}}
                        <div>
                            <span class="text-gray-500 text-sm">Minimum Order</span>
                            <p class="font-semibold text-gray-900">{{$moq}}</p>
                        </div>
                        {{end}}
                        {{$leadTime := index $content.Ext "lead_time"}}
                        {{if $leadTime}}
                        <div>
                            <span class="text-gray-500 text-sm">Lead Time</span>
                            <p class="font-semibold text-gray-900">{{$leadTime}}</p>
                        </div>
                        {{end}}
                    </div>
                    
                    <a href="/contact?product={{index $content.Ext "model"}}" class="w-full bg-accent hover:bg-accent-hover text-white py-3 px-6 rounded-lg font-semibold text-center inline-block transition">
                        Request Quote for This Model
                    </a>
                    <p class="text-sm text-gray-500 text-center mt-3">Response within 24 hours</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-gray-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Technical Specifications</h2>
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                {{$motor := index $content.Ext "motor_power"}}
                {{if $motor}}
                <div class="p-4 border-b border-gray-100 md:border-r">
                    <span class="text-gray-500 text-sm">Motor / Engine</span>
                    <p class="font-semibold text-gray-900">{{$motor}}</p>
                </div>
                {{end}}
                
                {{$battery := index $content.Ext "battery"}}
                {{if $battery}}
                <div class="p-4 border-b border-gray-100 lg:border-r">
                    <span class="text-gray-500 text-sm">Battery</span>
                    <p class="font-semibold text-gray-900">{{$battery}}</p>
                </div>
                {{end}}
                
                {{$maxSpeed := index $content.Ext "max_speed"}}
                {{if $maxSpeed}}
                <div class="p-4 border-b border-gray-100 md:border-r lg:border-r-0">
                    <span class="text-gray-500 text-sm">Max Speed</span>
                    <p class="font-semibold text-gray-900">{{$maxSpeed}}</p>
                </div>
                {{end}}
                
                {{$load := index $content.Ext "load_capacity"}}
                {{if $load}}
                <div class="p-4 border-b border-gray-100 lg:border-b-0 md:border-r">
                    <span class="text-gray-500 text-sm">Load Capacity</span>
                    <p class="font-semibold text-gray-900">{{$load}}</p>
                </div>
                {{end}}
                
                {{$range := index $content.Ext "range"}}
                {{if $range}}
                <div class="p-4 border-b border-gray-100 md:border-b-0 lg:border-r">
                    <span class="text-gray-500 text-sm">Range per Charge</span>
                    <p class="font-semibold text-gray-900">{{$range}}</p>
                </div>
                {{end}}
                
                {{$dimensions := index $content.Ext "dimensions"}}
                {{if $dimensions}}
                <div class="p-4 md:border-r lg:border-r-0">
                    <span class="text-gray-500 text-sm">Dimensions (L×W×H)</span>
                    <p class="font-semibold text-gray-900">{{$dimensions}}</p>
                </div>
                {{end}}
                
                {{$wheelSize := index $content.Ext "wheel_size"}}
                {{if $wheelSize}}
                <div class="p-4 border-b border-gray-100 md:border-b-0 lg:border-b lg:border-r">
                    <span class="text-gray-500 text-sm">Wheel Size</span>
                    <p class="font-semibold text-gray-900">{{$wheelSize}}</p>
                </div>
                {{end}}
                
                {{$customization := index $content.Ext "customization"}}
                {{if $customization}}
                <div class="p-4 md:col-span-2 lg:col-span-2">
                    <span class="text-gray-500 text-sm">Customization Options</span>
                    <p class="font-semibold text-gray-900">{{$customization}}</p>
                </div>
                {{end}}
            </div>
        </div>
    </div>
</section>

{{if $content.Content}}
<section class="bg-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">Product Description</h2>
        <div class="prose max-w-none text-gray-700">
            {{$content.Content|Str2Html}}
        </div>
    </div>
</section>
{{end}}

{{$related := Related $content.Id 4}}
{{if $related}}
<section class="bg-gray-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Related Products</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {{range $related}}
            <a href="{{.URL}}" class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition group">
                <div class="relative h-48 overflow-hidden">
                    {{if .Img}}
                    <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                    {{else}}
                    <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                        <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    {{end}}
                </div>
                <div class="p-4">
                    <h3 class="font-semibold text-gray-900 mb-1 group-hover:text-primary transition">{{.Title}}</h3>
                </div>
            </a>
            {{end}}
        </div>
    </div>
</section>
{{end}}

{{if or .Prev .Next}}
<section class="bg-white py-8 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between">
            {{if .Prev}}
            <a href="{{.Prev.URL}}" class="flex items-center text-gray-600 hover:text-primary transition">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                <div>
                    <span class="text-sm text-gray-500">Previous</span>
                    <p class="font-medium">{{.Prev.Title}}</p>
                </div>
            </a>
            {{else}}
            <div></div>
            {{end}}
            {{if .Next}}
            <a href="{{.Next.URL}}" class="flex items-center text-right text-gray-600 hover:text-primary transition">
                <div>
                    <span class="text-sm text-gray-500">Next</span>
                    <p class="font-medium">{{.Next.Title}}</p>
                </div>
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
            {{end}}
        </div>
    </div>
</section>
{{end}}

{{include "footer.html"}}
{{include "js.html"}}