@extends('layouts.app')

@section('title', 'Pamtech Car Batteries - Verify Your Original Battery')

@section('content')
    @include('partials.nav', ['variant' => 'dark'])

    {{-- Hero --}}
    <section class="relative pt-16 overflow-hidden hero-dark min-h-[90vh] flex items-center">
        <div class="absolute inset-0 engineering-grid"></div>
        <div class="absolute inset-0 hero-glow-red"></div>
        <div class="absolute inset-0 hero-glow-blue"></div>
        <div class="absolute inset-0 hero-scan-line pointer-events-none"></div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32 w-full">
            <div class="max-w-4xl">
                <div class="badge-live mb-8 animate-fade-in-up">Verification System Online</div>

                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white mb-6 leading-[1.05] animate-fade-in-up" style="animation-delay: 0.1s">
                    Engineered power.<br>
                    <span class="text-pamtech-red">Verified authenticity.</span>
                </h1>

                <p class="text-lg md:text-xl text-zinc-400 mb-10 max-w-2xl leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s">
                    Advanced AGM battery technology with cryptographic serial verification.
                    Every Pamtech unit is registered, traceable, and warrantied.
                </p>

                <div class="flex flex-col sm:flex-row gap-4 animate-fade-in-up" style="animation-delay: 0.3s">
                    <a href="#verify" class="btn-primary">Verify Your Battery</a>
                    <a href="#products" class="btn-secondary">View Product Line</a>
                </div>

                <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-px bg-zinc-800 rounded-lg overflow-hidden border border-zinc-800 max-w-3xl">
                    <div class="bg-zinc-900/80 p-5 text-center">
                        <div class="text-2xl font-bold text-white stat-number">50K+</div>
                        <div class="label-tech text-zinc-500 mt-1">Units Deployed</div>
                    </div>
                    <div class="bg-zinc-900/80 p-5 text-center">
                        <div class="text-2xl font-bold text-white stat-number">98%</div>
                        <div class="label-tech text-zinc-500 mt-1">Satisfaction</div>
                    </div>
                    <div class="bg-zinc-900/80 p-5 text-center">
                        <div class="text-2xl font-bold text-white stat-number">5+</div>
                        <div class="label-tech text-zinc-500 mt-1">Year Warranty</div>
                    </div>
                    <div class="bg-zinc-900/80 p-5 text-center">
                        <div class="text-2xl font-bold text-pamtech-red stat-number">100%</div>
                        <div class="label-tech text-zinc-500 mt-1">Traceable</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white to-transparent"></div>
    </section>

    {{-- Verification Form --}}
    <section id="verify" class="py-24 bg-white relative">
        <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="badge-outline mb-4">Serial Verification</span>
                <h2 class="text-3xl md:text-4xl font-bold text-zinc-900 mt-4 mb-3">Authenticate Your Battery</h2>
                <p class="text-zinc-500 text-lg">Enter the serial code from your battery label</p>
            </div>

            <div class="hardware-card p-8 md:p-10">
                <form action="{{ route('verify.form') }}" method="GET" class="space-y-6">
                    <div>
                        <label for="serial" class="form-label">Serial Code</label>
                        <div class="relative">
                            <input
                                type="text"
                                id="serial"
                                name="serial"
                                required
                                placeholder="PT-XXXX-XXXX-XXXX"
                                class="form-input font-mono text-base pr-12"
                            >
                            <div class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
                                </svg>
                            </div>
                        </div>
                        <p class="mt-3 text-sm text-zinc-400 flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            Located on the top or side of your battery label
                        </p>
                    </div>
                    <button type="submit" class="btn-primary w-full py-4 text-base">
                        Run Verification
                    </button>
                </form>
            </div>
        </div>
    </section>

    {{-- Features --}}
    <section id="about" class="py-24 bg-zinc-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="badge-outline">Core Capabilities</span>
                <h2 class="text-3xl md:text-4xl font-bold text-zinc-900 mt-4 mb-3">Built for Performance</h2>
                <p class="text-zinc-500 text-lg max-w-2xl mx-auto">Industrial-grade AGM technology with enterprise verification infrastructure</p>
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <div class="hardware-card p-8">
                    <div class="w-10 h-10 rounded-md bg-pamtech-red/10 flex items-center justify-center mb-6">
                        <svg class="w-5 h-5 text-pamtech-red" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-zinc-900 mb-3">Superior Power Output</h3>
                    <p class="text-zinc-500 leading-relaxed text-sm">AGM architecture delivers maximum cranking amps and consistent performance across temperature extremes.</p>
                </div>
                <div class="hardware-card p-8">
                    <div class="w-10 h-10 rounded-md bg-pamtech-blue/10 flex items-center justify-center mb-6">
                        <svg class="w-5 h-5 text-pamtech-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-zinc-900 mb-3">Anti-Counterfeit System</h3>
                    <p class="text-zinc-500 leading-relaxed text-sm">Every unit ships with a unique serial registered in our verification database. Instant authenticity checks.</p>
                </div>
                <div class="hardware-card p-8">
                    <div class="w-10 h-10 rounded-md bg-green-500/10 flex items-center justify-center mb-6">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold text-zinc-900 mb-3">Extended Lifecycle</h3>
                    <p class="text-zinc-500 leading-relaxed text-sm">Designed for thousands of charge cycles with zero maintenance. Install once, drive with confidence.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Technology --}}
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <div>
                    <span class="badge-outline">AGM Technology</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-zinc-900 mt-4 mb-5">Absorbent Glass Mat Architecture</h2>
                    <p class="text-zinc-500 leading-relaxed mb-8">
                        Our AGM batteries use a fine fiberglass mat saturated with electrolyte — a sealed,
                        spill-proof design that outperforms conventional lead-acid cells in every metric that matters.
                    </p>
                    <div class="space-y-4">
                        @foreach(['Spill-proof sealed construction', 'Vibration and shock resistant', 'Rapid recharge capability', 'Zero maintenance required'] as $feature)
                        <div class="flex items-center gap-3">
                            <span class="w-5 h-5 rounded-full bg-pamtech-red/10 flex items-center justify-center flex-shrink-0">
                                <svg class="w-3 h-3 text-pamtech-red" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                            </span>
                            <span class="text-zinc-700 text-sm">{{ $feature }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="hardware-card-dark p-8 text-white">
                    <div class="flex items-center justify-between mb-8">
                        <span class="label-tech text-zinc-500">Verification Status</span>
                        <span class="badge-live text-xs">Active</span>
                    </div>
                    <div class="space-y-6">
                        <div class="flex justify-between items-end border-b border-zinc-800 pb-4">
                            <span class="text-zinc-400 text-sm">Authenticity Rate</span>
                            <span class="text-3xl font-bold text-pamtech-red stat-number">100%</span>
                        </div>
                        <div class="flex justify-between items-end border-b border-zinc-800 pb-4">
                            <span class="text-zinc-400 text-sm">Warranty Coverage</span>
                            <span class="text-3xl font-bold text-white stat-number">5+ yrs</span>
                        </div>
                        <div class="flex justify-between items-end">
                            <span class="text-zinc-400 text-sm">Certification</span>
                            <span class="text-sm font-mono text-green-400">ISO CERTIFIED</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Products --}}
    <section id="products" class="py-24 bg-zinc-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="badge-outline">Product Line</span>
                <h2 class="text-3xl md:text-4xl font-bold text-zinc-900 mt-4 mb-3">Battery Specifications</h2>
                <p class="text-zinc-500 text-lg">From compact vehicles to heavy-duty applications</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                @forelse($batteryTypes as $battery)
                    @php $isRed = $battery['color_theme'] === 'red'; @endphp
                    <div class="product-card {{ $isRed ? 'product-card-accent-red' : 'product-card-accent-blue' }}">
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-6">
                                <div>
                                    <span class="label-tech text-zinc-400">Model</span>
                                    <h3 class="text-2xl font-bold text-zinc-900 mt-1 font-mono">{{ $battery['type'] }}</h3>
                                </div>
                                <div class="w-10 h-10 rounded-md {{ $isRed ? 'bg-pamtech-red/10' : 'bg-pamtech-blue/10' }} flex items-center justify-center">
                                    <svg class="w-5 h-5 {{ $isRed ? 'text-pamtech-red' : 'text-pamtech-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                </div>
                            </div>

                            <div class="data-grid grid grid-cols-2 mb-5">
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Voltage</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery['volts'] }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Capacity</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery['amhs'] }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">CCA</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery['cca'] }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Class</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery['class'] }}</span>
                                </div>
                            </div>

                            <p class="text-sm text-zinc-500 border-t border-zinc-100 pt-4">{{ $battery['description'] }}</p>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full text-center py-12 text-zinc-400">No battery types available.</div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- Warranty --}}
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="hardware-card overflow-hidden">
                <div class="grid md:grid-cols-2">
                    <div class="p-10 md:p-12">
                        <span class="badge-outline">Warranty Program</span>
                        <h2 class="text-3xl font-bold text-zinc-900 mt-4 mb-4">5+ Year Coverage</h2>
                        <p class="text-zinc-500 leading-relaxed mb-8 text-sm">
                            Comprehensive protection against manufacturing defects, premature failure,
                            and performance degradation. Nationwide service network with 24/7 support.
                        </p>
                        <div class="space-y-3">
                            @foreach(['Free replacement within warranty period', 'Nationwide service network', '24/7 customer support'] as $item)
                            <div class="flex items-center gap-3 text-sm text-zinc-600">
                                <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                {{ $item }}
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="bg-zinc-900 p-10 md:p-12 text-white flex flex-col justify-center">
                        <span class="label-tech text-zinc-500 mb-2">Coverage Period</span>
                        <div class="text-6xl font-bold stat-number mb-2">5+</div>
                        <div class="text-zinc-400 mb-8">Years comprehensive warranty</div>
                        <div class="space-y-2">
                            @foreach(['Manufacturing defects', 'Premature failure', 'Performance issues'] as $coverage)
                            <div class="flex items-center gap-2 text-sm text-zinc-300">
                                <span class="status-indicator status-indicator-valid w-2 h-2"></span>
                                {{ $coverage }}
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- FAQ --}}
    <section id="faq" class="py-24 bg-zinc-50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="badge-outline">Support</span>
                <h2 class="text-3xl md:text-4xl font-bold text-zinc-900 mt-4 mb-3">Frequently Asked Questions</h2>
            </div>

            <div class="space-y-3">
                @php
                $faqs = [
                    ['How do I verify my Pamtech battery?', 'Simply enter your battery\'s serial code in the verification form on our homepage. The serial code can be found on the battery label. Once entered, our system will instantly verify if your battery is authentic and registered in our database.'],
                    ['Where can I find my battery serial code?', 'The serial code is printed on the battery label, usually located on the top or side of the battery. It\'s a unique alphanumeric code that identifies your specific battery. Make sure to enter it exactly as shown, including any dashes or special characters.'],
                    ['What does it mean if my battery shows as "Previously Verified"?', 'If your battery shows as "Previously Verified," it means the serial code has been verified before. This is normal and indicates that someone has already checked this battery\'s authenticity. Your battery is still authentic and covered by warranty.'],
                    ['What is AGM technology and why is it better?', 'AGM (Absorbent Glass Mat) technology uses a fine fiberglass mat soaked in electrolyte, making the battery completely sealed and spill-proof. AGM batteries offer superior performance, faster recharging, better vibration resistance, and are maintenance-free compared to traditional lead-acid batteries.'],
                    ['What warranty coverage do Pamtech batteries come with?', 'All Pamtech batteries come with a comprehensive 5+ year warranty that covers manufacturing defects, premature failure, and performance issues. Warranty claims can be processed through our nationwide service network, and we offer 24/7 customer support to assist with any warranty-related inquiries.'],
                    ['How do I know which battery is right for my vehicle?', 'Check your vehicle\'s owner manual for the recommended battery specifications (voltage, capacity, and CCA). Our battery range covers everything from compact cars (AGM-50, AGM-60) to large SUVs and trucks (AGM-100, AGM-120). If you\'re unsure, contact our support team for personalized recommendations based on your vehicle make and model.'],
                    ['What should I do if my battery verification shows as invalid?', 'If your battery shows as invalid, first double-check that you\'ve entered the serial code correctly. If the code is correct but still shows as invalid, the battery may not be a genuine Pamtech product. Contact our support team at info@pamtechautoparts.com or call +234 (903) 358‑9342 for assistance.'],
                    ['Are Pamtech batteries maintenance-free?', 'Yes! All Pamtech AGM batteries are completely maintenance-free. Unlike traditional lead-acid batteries, AGM batteries are sealed and don\'t require water refilling. They\'re designed to be "install and forget" - just ensure proper installation and they\'ll provide reliable power throughout their lifespan.'],
                ];
                @endphp

                @foreach($faqs as $i => $faq)
                <div class="faq-item">
                    <button class="faq-toggle w-full px-6 py-4 text-left flex items-center justify-between hover:bg-zinc-50 transition-colors" onclick="toggleFaq({{ $i + 1 }})">
                        <span class="font-medium text-zinc-900 text-sm pr-4">{{ $faq[0] }}</span>
                        <svg class="w-4 h-4 text-zinc-400 faq-icon flex-shrink-0" id="icon-{{ $i + 1 }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-content hidden px-6 pb-5">
                        <p class="text-zinc-500 text-sm leading-relaxed">{{ $faq[1] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('partials.footer')

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            const menuIcon = document.getElementById('menu-icon');
            const closeIcon = document.getElementById('close-icon');

            if (mobileMenuButton && mobileMenu) {
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.toggle('hidden');
                    menuIcon.classList.toggle('hidden');
                    closeIcon.classList.toggle('hidden');
                });

                mobileMenu.querySelectorAll('a').forEach(link => {
                    link.addEventListener('click', function() {
                        mobileMenu.classList.add('hidden');
                        menuIcon.classList.remove('hidden');
                        closeIcon.classList.add('hidden');
                    });
                });
            }
        });

        function toggleFaq(num) {
            const button = document.querySelector(`button[onclick="toggleFaq(${num})"]`);
            const content = button.nextElementSibling;
            const icon = document.getElementById('icon-' + num);
            const isHidden = content.classList.contains('hidden');

            document.querySelectorAll('.faq-content').forEach(item => {
                if (item !== content) item.classList.add('hidden');
            });
            document.querySelectorAll('.faq-icon').forEach(item => {
                if (item !== icon) item.style.transform = 'rotate(0deg)';
            });

            if (isHidden) {
                content.classList.remove('hidden');
                icon.style.transform = 'rotate(180deg)';
            } else {
                content.classList.add('hidden');
                icon.style.transform = 'rotate(0deg)';
            }
        }
    </script>
    @endpush
@endsection