@extends('layouts.public')

@section('title', 'Anywhere Phone Repair')

@section('content')
<!-- HERO -->
<section class="w-full bg-zinc-950 text-white relative pt-24 pb-32 overflow-hidden">
    <div class="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/20 blur-[120px] rounded-full translate-x-1/3 -translate-y-1/3 pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-500/10 blur-[100px] rounded-full -translate-x-1/3 translate-y-1/3 pointer-events-none"></div>
    
    <div class="container mx-auto px-4 md:px-8 relative z-10 flex flex-col lg:flex-row items-center gap-12 lg:gap-8">
        <div class="flex-1 max-w-2xl">
            <div class="inline-flex items-center gap-2 bg-zinc-900 border border-zinc-800 rounded-full px-4 py-1.5 text-xs font-bold text-zinc-300 mb-8 uppercase tracking-widest shadow-lg">
                <svg class="h-3.5 w-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
                Same-Day Service Available
            </div>
            
            <h1 class="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight mb-8 leading-[1.05] text-white">
                We repair <br/> <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-indigo-400 to-primary/80 animate-gradient-x">everything.</span>
            </h1>
            
            <p class="text-lg md:text-xl text-zinc-400 mb-10 leading-relaxed font-medium">
                Professional repair services for smartphones, tablets, laptops, and consoles. Backed by our lifetime warranty and fixed by certified experts.
            </p>
            
            <div class="flex flex-col sm:flex-row gap-4 mb-12">
                <a href="{{ url('/book') }}" class="flex items-center justify-center gap-2 h-14 md:h-16 px-8 rounded-2xl bg-primary hover:bg-primary/90 text-white font-black text-base md:text-lg shadow-xl shadow-primary/20 transition-all active:scale-95 ring-4 ring-primary/20">
                    Book a Repair
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
                <a href="{{ url('/quotation') }}" class="flex items-center justify-center gap-2 h-14 md:h-16 px-8 rounded-2xl bg-zinc-900 border-2 border-zinc-800 hover:border-zinc-700 text-white font-bold text-base md:text-lg transition-colors">
                    Get an Estimate
                </a>
            </div>
            
            <div class="flex items-center gap-6">
                <div class="flex -space-x-4">
                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix&backgroundColor=e4e4e7" class="w-12 h-12 rounded-full border-4 border-zinc-950 bg-zinc-100" alt="Customer avatar" />
                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka&backgroundColor=e4e4e7" class="w-12 h-12 rounded-full border-4 border-zinc-950 bg-zinc-100" alt="Customer avatar" />
                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Oliver&backgroundColor=e4e4e7" class="w-12 h-12 rounded-full border-4 border-zinc-950 bg-zinc-100" alt="Customer avatar" />
                    <div class="w-12 h-12 rounded-full border-4 border-zinc-950 bg-zinc-800 flex items-center justify-center text-xs font-bold text-white z-10">+10k</div>
                </div>
                <div>
                    <div class="flex text-yellow-500 mb-1">
                        @for($i=0; $i<5; $i++)
                            <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                        @endfor
                    </div>
                    <p class="text-sm font-bold text-zinc-300">Trusted by over 10,000 customers</p>
                </div>
            </div>
        </div>
        
        <div class="flex-1 relative hidden lg:block">
            <div class="w-full aspect-square rounded-[3rem] overflow-hidden border-8 border-zinc-900 bg-zinc-900 relative shadow-2xl">
                <div class="absolute inset-0 bg-gradient-to-tr from-primary/30 to-transparent z-10 mix-blend-overlay"></div>
                <img src="https://images.unsplash.com/photo-1597872253142-0a8b98eb79e2?auto=format&fit=crop&q=80&w=1000" alt="Phone repair process" class="w-full h-full object-cover opacity-80" />
            </div>
            
            <div class="absolute top-10 -left-6 bg-white text-zinc-900 px-6 py-4 rounded-2xl shadow-xl border border-zinc-100 flex items-center gap-4 animate-in slide-in-from-bottom-4 duration-1000 delay-300 fill-mode-both">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
                </div>
                <div>
                    <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-0.5">Warranty</p>
                    <p class="font-black text-lg">90 Days Covered</p>
                </div>
            </div>
            
            <div class="absolute bottom-12 -right-6 bg-white text-zinc-900 px-6 py-4 rounded-2xl shadow-xl border border-zinc-100 flex items-center gap-4 animate-in slide-in-from-bottom-4 duration-1000 delay-500 fill-mode-both">
                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <div>
                    <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-0.5">Turnaround</p>
                    <p class="font-black text-lg">&lt; 2 Hours Avg</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SERVICES & DEVICES -->
<section class="w-full py-24 bg-zinc-50">
    <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-20">
            @foreach($services as $s)
                <a href="{{ url('/services') }}" class="group bg-white border border-zinc-200 p-6 rounded-3xl hover:border-primary hover:shadow-xl transition-all flex flex-col items-start aspect-square relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-500"></div>
                    <h3 class="font-bold text-zinc-900 text-lg mb-2 z-10">{{ $s->name }}</h3>
                    <div class="mt-auto pt-4 flex items-end justify-between w-full z-10">
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-400 mb-0.5">Starts At</p>
                            <p class="text-primary font-black text-xl">${{ number_format($s->price, 2) }}</p>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-zinc-100 flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-colors">
                            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

<!-- LIVE REPAIR TRACKER -->
<section class="w-full py-24 bg-zinc-950 text-white relative overflow-hidden">
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[600px] bg-primary/10 blur-[120px] rounded-full pointer-events-none"></div>
    
    <div class="container mx-auto px-4 md:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
                <span class="text-primary text-xs font-black uppercase tracking-widest">Real-Time Updates</span>
                <h2 class="text-4xl md:text-5xl font-black mt-4 mb-6 tracking-tight">Track Your Repair</h2>
                <p class="text-zinc-400 font-medium text-lg mb-10 leading-relaxed max-w-lg">
                    No more wondering when your device will be ready. Enter your tracking code to see exactly where your device is in the repair process.
                </p>
                <form action="{{ route('public.track') }}" method="GET" class="flex flex-col sm:flex-row gap-3 max-w-md">
                    <div class="relative flex-1">
                        <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                        <input type="text" name="code" placeholder="Enter tracking code..." class="w-full bg-white/10 border-2 border-white/10 text-white placeholder-zinc-500 rounded-xl pl-12 pr-4 py-4 font-bold focus:outline-none focus:border-primary focus:bg-white/15 transition-all" required>
                    </div>
                    <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-xl font-bold transition-colors shrink-0">Track</button>
                </form>
            </div>
            
            <div class="hidden lg:flex justify-end">
                <div class="bg-white/5 border border-white/10 p-8 rounded-[2rem] backdrop-blur-md w-full max-w-md relative">
                    <div class="absolute -top-4 -right-4 bg-green-500 text-white text-xs font-black uppercase tracking-widest px-4 py-2 rounded-xl shadow-lg rotate-3">
                        Live Example
                    </div>
                    
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 pb-8 border-b border-white/10 gap-4">
                        <div>
                            <p class="text-[10px] font-black text-zinc-500 uppercase tracking-widest mb-1.5">Example repair timeline — not a live order</p>
                            <p class="font-bold text-xl text-white">iPhone 15 Pro</p>
                        </div>
                        <span class="bg-blue-500/20 border border-blue-500/30 text-blue-400 text-xs font-black px-4 py-2 rounded-xl uppercase tracking-widest">
                            In Progress
                        </span>
                    </div>
                    
                    <div class="space-y-0 relative">
                        <div class="absolute left-[19px] top-6 bottom-6 w-0.5 bg-white/10 z-0"></div>
                        
                        <div class="relative z-10 flex items-center gap-5 pb-6">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 border-4 bg-zinc-900 border-green-500 text-green-500">
                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            </div>
                            <div class="flex-1">
                                <p class="font-bold text-base text-zinc-300">Order Received</p>
                            </div>
                        </div>
                        
                        <div class="relative z-10 flex items-center gap-5 pb-6">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 border-4 bg-zinc-900 border-green-500 text-green-500">
                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            </div>
                            <div class="flex-1">
                                <p class="font-bold text-base text-zinc-300">Device Received</p>
                            </div>
                        </div>
                        
                        <div class="relative z-10 flex items-center gap-5 pb-6">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 border-4 bg-primary text-white shadow-lg shadow-primary/40 animate-pulse border-primary">
                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                            </div>
                            <div class="flex-1">
                                <p class="font-bold text-base text-white">Repairing</p>
                            </div>
                        </div>
                        
                        <div class="relative z-10 flex items-center gap-5 pb-6 opacity-30">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 border-4 bg-zinc-900 border-zinc-700 text-zinc-500">
                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
                            </div>
                            <div class="flex-1">
                                <p class="font-bold text-base text-zinc-500">Repair Completed</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- HOW IT WORKS -->
<section class="w-full py-24 bg-zinc-50 border-b border-zinc-200">
    <div class="container mx-auto px-4 md:px-8">
        <div class="text-center mb-16">
            <span class="text-primary text-xs font-black uppercase tracking-widest">Simple Process</span>
            <h2 class="text-3xl md:text-5xl font-black mt-3 mb-4 tracking-tight text-zinc-900">How It Works</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
            <div class="bg-white border border-zinc-200 p-8 rounded-3xl relative">
                <span class="absolute -top-4 -left-4 w-12 h-12 bg-zinc-950 text-white font-black text-lg flex items-center justify-center rounded-xl shadow-lg rotate-[-5deg]">01</span>
                <h3 class="text-xl font-bold text-zinc-900 mt-2 mb-3">Get a Quote</h3>
                <p class="text-zinc-500 font-medium">Select your device and see transparent pricing upfront.</p>
            </div>
            <div class="bg-white border border-zinc-200 p-8 rounded-3xl relative">
                <span class="absolute -top-4 -left-4 w-12 h-12 bg-zinc-950 text-white font-black text-lg flex items-center justify-center rounded-xl shadow-lg rotate-[-5deg]">02</span>
                <h3 class="text-xl font-bold text-zinc-900 mt-2 mb-3">Book Service</h3>
                <p class="text-zinc-500 font-medium">Choose drop-off at a store or mail-in repair option.</p>
            </div>
            <div class="bg-white border border-zinc-200 p-8 rounded-3xl relative">
                <span class="absolute -top-4 -left-4 w-12 h-12 bg-zinc-950 text-white font-black text-lg flex items-center justify-center rounded-xl shadow-lg rotate-[-5deg]">03</span>
                <h3 class="text-xl font-bold text-zinc-900 mt-2 mb-3">We Fix It</h3>
                <p class="text-zinc-500 font-medium">Our certified technicians repair your device using premium parts.</p>
            </div>
            <div class="bg-white border border-zinc-200 p-8 rounded-3xl relative">
                <span class="absolute -top-4 -left-4 w-12 h-12 bg-primary text-white font-black text-lg flex items-center justify-center rounded-xl shadow-lg shadow-primary/30 rotate-[-5deg]">04</span>
                <h3 class="text-xl font-bold text-zinc-900 mt-2 mb-3">Return & Warranty</h3>
                <p class="text-zinc-500 font-medium">Get your device back working perfectly, backed by our 90-day warranty.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="w-full py-32 bg-primary text-white text-center relative overflow-hidden">
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-white/10 blur-[100px] rounded-full pointer-events-none"></div>
    <div class="container mx-auto px-4 md:px-8 max-w-4xl relative z-10">
        <h2 class="text-4xl md:text-6xl font-black mb-6 tracking-tight">Ready to fix your device?</h2>
        <p class="text-primary-foreground/90 font-medium text-lg md:text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
            Book online in minutes. Same-day service available. Drop off at any of our {{ $storesCount }} locations.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ url('/book') }}" class="flex items-center justify-center gap-2 h-16 px-10 rounded-2xl bg-white text-primary font-black text-lg shadow-2xl hover:scale-105 transition-all">
                Book a Repair Now <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
            <a href="{{ url('/stores') }}" class="flex items-center justify-center gap-2 h-16 px-10 rounded-2xl border-4 border-white/20 text-white font-black text-lg hover:bg-white/10 transition-colors">
                Find a Location
            </a>
        </div>
    </div>
</section>
@endsection