@extends('layouts.app')

@section('title', 'How It Works | OneQRScan')

@section('content')
    <header class="relative bg-[#32445a] pt-28 pb-10 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden pointer-events-none z-0">
            <div
                class="absolute -top-24 right-0 w-[300px] h-[300px] bg-[#f5b11c] rounded-full mix-blend-screen filter blur-[80px] opacity-10 animate-pulse">
            </div>
            <div
                class="absolute bottom-0 left-0 w-[250px] h-[250px] bg-blue-500 rounded-full mix-blend-multiply filter blur-[60px] opacity-10">
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <nav class="mb-4 flex justify-center lg:justify-start">
                <ol
                    class="inline-flex items-center space-x-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 bg-white/5 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10">
                    <li><a href="/" class="hover:text-white transition-colors">Home</a></li>
                    <li><svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"></path>
                        </svg></li>
                    <li class="text-[#f5b11c]">How It Works</li>
                </ol>
            </nav>

            <div class="max-w-4xl mx-auto lg:mx-0 text-center lg:text-left">
                <span class="text-[#f5b11c] font-bold uppercase tracking-[0.2em] text-[11px] mb-2 block">Simple & Secure
                    Process</span>
                <h1 class="font-heading text-4xl md:text-5xl font-black text-white leading-tight tracking-tight mb-3">
                    Up and Running in <span
                        class="text-transparent bg-clip-text bg-gradient-to-r from-[#f5b11c] to-yellow-300">Minutes.</span>
                </h1>
                <p class="text-base text-slate-300 font-light leading-relaxed max-w-2xl mx-auto lg:mx-0">
                    No technical skills required. Bridge your physical assets with secure digital identity instantly.
                </p>
            </div>
        </div>
    </header>
    <section id="steps" class="py-24 bg-[#fcfcfd] relative overflow-hidden">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

            <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-24 mb-24 lg:mb-32 relative">
                <div
                    class="hidden lg:block absolute left-[50%] top-[80%] w-0.5 h-32 bg-gradient-to-b from-[#32445a]/20 to-transparent">
                </div>

                <div class="w-full lg:w-1/2 order-2 lg:order-1">
                    <div class="flex items-center gap-4 mb-6">
                        <div
                            class="w-16 h-16 rounded-2xl bg-[#32445a] text-[#f5b11c] font-heading font-black text-3xl flex items-center justify-center shadow-lg transform -rotate-6">
                            01</div>
                        <h2 class="font-heading text-3xl md:text-4xl font-black text-[#32445a]">Order Your Tag</h2>
                    </div>
                    <p class="text-lg text-slate-500 leading-relaxed mb-6">
                        Start by choosing the perfect smart hardware from our catalog. Whether you need a heavy-duty
                        keychain for your car, a comfortable collar tag for your pet, or an ID card for a student, we have a
                        form factor designed to last.
                    </p>
                    <ul class="space-y-3">
                        <li class="flex items-center gap-3 text-slate-600 font-medium">
                            <div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            Delivered anywhere in India within 3-5 days
                        </li>
                        <li class="flex items-center gap-3 text-slate-600 font-medium">
                            <div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            Waterproof and scratch-resistant materials
                        </li>
                    </ul>
                </div>
                <div class="w-full lg:w-1/2 order-1 lg:order-2">
                    <div
                        class="relative rounded-[2.5rem] bg-slate-100 p-4 shadow-[0_20px_50px_rgba(50,68,90,0.08)] border border-white transform hover:scale-105 transition-transform duration-500 group">
                        <div
                            class="absolute inset-0 bg-gradient-to-tr from-[#f5b11c]/20 to-transparent rounded-[2.5rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        </div>
                        <img src="https://alltopstartups.com/wp-content/uploads/2020/11/How-To-Package-Your-Products-Ready-For-Shipping.png"
                            alt="Shipping Box" class="w-full h-[350px] object-cover rounded-[2rem]">
                        <div
                            class="absolute -bottom-6 -left-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center gap-3 animate-float">
                            <div
                                class="w-10 h-10 bg-[#f5b11c] rounded-full flex items-center justify-center text-[#32445a]">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4">
                                    </path>
                                </svg>
                            </div>
                            <div class="font-bold text-[#32445a]">Fast Shipping</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-24 mb-24 lg:mb-32 relative">
                <div
                    class="hidden lg:block absolute left-[50%] top-[80%] w-0.5 h-32 bg-gradient-to-b from-[#32445a]/20 to-transparent">
                </div>

                <div class="w-full lg:w-1/2">
                    <div
                        class="relative rounded-[2.5rem] bg-slate-100 p-4 shadow-[0_20px_50px_rgba(50,68,90,0.08)] border border-white transform hover:scale-105 transition-transform duration-500 group">
                        <div
                            class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-transparent rounded-[2.5rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        </div>
                        <img src="https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&w=800&q=80"
                            alt="Smartphone Setup" class="w-full h-[350px] object-cover rounded-[2rem] object-left">
                        <div class="absolute -top-6 -right-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center gap-3 animate-float"
                            style="animation-delay: 1s;">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                    </path>
                                </svg>
                            </div>
                            <div class="font-bold text-[#32445a]">AES-256 Secured</div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2">
                    <div class="flex items-center gap-4 mb-6">
                        <div
                            class="w-16 h-16 rounded-2xl bg-[#32445a] text-[#f5b11c] font-heading font-black text-3xl flex items-center justify-center shadow-lg transform rotate-6">
                            02</div>
                        <h2 class="font-heading text-3xl md:text-4xl font-black text-[#32445a]">Create Your Profile</h2>
                    </div>
                    <p class="text-lg text-slate-500 leading-relaxed mb-6">
                        Log into our secure, mobile-friendly cloud dashboard. Create a digital profile and add the vital
                        information you want to share—emergency contacts, medical allergies, or vehicle RC details.
                    </p>
                    <p
                        class="text-lg text-slate-500 leading-relaxed font-medium bg-blue-50 p-4 rounded-xl border border-blue-100">
                        <span class="text-blue-600 font-bold">Privacy First:</span> You have complete control. Choose what
                        data is visible to the public and what stays hidden behind a secure PIN code.
                    </p>
                </div>
            </div>

            <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-24 mb-24 lg:mb-32 relative">
                <div
                    class="hidden lg:block absolute left-[50%] top-[80%] w-0.5 h-32 bg-gradient-to-b from-[#32445a]/20 to-transparent">
                </div>

                <div class="w-full lg:w-1/2 order-2 lg:order-1">
                    <div class="flex items-center gap-4 mb-6">
                        <div
                            class="w-16 h-16 rounded-2xl bg-[#32445a] text-[#f5b11c] font-heading font-black text-3xl flex items-center justify-center shadow-lg transform -rotate-3">
                            03</div>
                        <h2 class="font-heading text-3xl md:text-4xl font-black text-[#32445a]">Link & Attach</h2>
                    </div>
                    <p class="text-lg text-slate-500 leading-relaxed mb-6">
                        When your physical tag arrives, simply scan it with your phone's camera. Click "Link to Profile" on
                        your screen, and you are done. The hardware is now permanently synced with your cloud data.
                    </p>
                    <p class="text-lg text-slate-500 leading-relaxed">
                        Attach the keychain to your car keys, the ID card to your child's backpack, or the tag to your pet’s
                        collar.
                    </p>
                </div>
                <div class="w-full lg:w-1/2 order-1 lg:order-2">
                    <div
                        class="relative rounded-[2.5rem] bg-slate-100 p-4 shadow-[0_20px_50px_rgba(50,68,90,0.08)] border border-white transform hover:scale-105 transition-transform duration-500 group">
                        <div
                            class="absolute inset-0 bg-gradient-to-tr from-green-400/20 to-transparent rounded-[2.5rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        </div>
                        <img src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?auto=format&fit=crop&w=800&q=80"
                            alt="Attaching Tag" class="w-full h-[350px] object-cover rounded-[2rem]">
                        <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center gap-3 animate-float"
                            style="animation-delay: 2s;">
                            <div
                                class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div class="font-bold text-[#32445a]">Ready to Go</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-24">
                <div class="w-full lg:w-1/2">
                    <div class="relative w-full h-[400px] flex items-center justify-center">
                        <div class="absolute inset-0 bg-[#f5b11c]/10 rounded-full blur-[80px]"></div>
                        <div
                            class="w-[240px] h-[480px] bg-white rounded-[2.5rem] shadow-2xl border-[8px] border-[#32445a] relative z-10 overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
                            <div class="absolute top-0 inset-x-0 h-6 bg-[#32445a] rounded-b-xl mx-16"></div>
                            <div class="h-full bg-slate-50 flex flex-col pt-10">
                                <div class="bg-[#32445a] p-6 text-center rounded-b-3xl shadow-sm">
                                    <div class="w-16 h-16 mx-auto bg-white rounded-full p-1 mb-2">
                                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=OneQR"
                                            class="w-full h-full rounded-full">
                                    </div>
                                    <h3 class="text-white font-bold text-lg">Max's Profile</h3>
                                </div>
                                <div class="p-5 flex-grow">
                                    <div class="bg-red-50 border border-red-100 p-3 rounded-xl mb-4 text-center">
                                        <div class="text-red-600 font-bold text-xs uppercase tracking-wide">Emergency
                                            Action</div>
                                        <div class="text-xl font-black text-red-700">Call Owner</div>
                                    </div>
                                    <div
                                        class="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-center gap-3">
                                        <div
                                            class="w-8 h-8 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                                </path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            </svg>
                                        </div>
                                        <div class="text-sm font-bold text-[#32445a]">Send GPS Alert</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2">
                    <div class="flex items-center gap-4 mb-6">
                        <div
                            class="w-16 h-16 rounded-2xl bg-[#32445a] text-[#f5b11c] font-heading font-black text-3xl flex items-center justify-center shadow-lg transform rotate-3">
                            04</div>
                        <h2 class="font-heading text-3xl md:text-4xl font-black text-[#32445a]">Scan & Update Anytime</h2>
                    </div>
                    <p class="text-lg text-slate-500 leading-relaxed mb-6">
                        Anyone who finds your asset can scan the QR code using their native iOS or Android camera. They do
                        <strong class="text-[#32445a]">not</strong> need to download any app to view your public profile or
                        contact you.
                    </p>
                    <p class="text-lg text-slate-500 leading-relaxed">
                        The best part? You never have to buy a new tag. Change your phone number, upload a new vehicle
                        document, or update a medical prescription in your dashboard, and the physical tag updates
                        instantly.
                    </p>
                </div>
            </div>

        </div>
    </section>

    <section class="py-24 bg-white border-t border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="text-[#f5b11c] font-bold uppercase tracking-widest text-sm mb-3 block">Under The Hood</span>
                <h2 class="font-heading text-4xl md:text-5xl font-black text-[#32445a]">Powered by Modern Tech</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[250px]">
                <div class="md:col-span-2 bg-[#32445a] rounded-3xl p-8 shadow-xl relative overflow-hidden group">
                    <div
                        class="absolute right-0 top-0 w-64 h-full bg-gradient-to-l from-blue-500/20 to-transparent pointer-events-none">
                    </div>
                    <div
                        class="w-14 h-14 bg-white/10 rounded-2xl flex items-center justify-center text-[#f5b11c] mb-6 backdrop-blur-sm border border-white/10">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
                            </path>
                        </svg>
                    </div>
                    <h4 class="font-heading text-2xl font-bold text-white mb-3">Cloud Infrastructure</h4>
                    <p class="text-slate-300 max-w-md text-lg">Your data doesn't live on the hardware. It lives on
                        lightning-fast, highly secure cloud servers, meaning it cannot be corrupted or lost.</p>
                </div>

                <div
                    class="bg-slate-50 border border-slate-200 rounded-3xl p-8 shadow-sm relative overflow-hidden group hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all">
                    <div
                        class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-[#32445a] mb-6">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h4 class="font-heading text-2xl font-bold text-[#32445a] mb-3">No Native Apps</h4>
                    <p class="text-slate-500 font-medium">100% browser-based. Scans open securely via Safari or Chrome
                        instantly.</p>
                </div>

                <div
                    class="bg-[#fcfcfd] border border-slate-200 rounded-3xl p-8 shadow-sm relative overflow-hidden group hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all">
                    <div
                        class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-red-500 mb-6">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                    <h4 class="font-heading text-2xl font-bold text-[#32445a] mb-3">Dynamic GPS Pings</h4>
                    <p class="text-slate-500 font-medium">When scanned, our system can request location access to alert you
                        where your tag is.</p>
                </div>

                <div class="md:col-span-2 bg-[#f5b11c] rounded-3xl p-8 shadow-xl relative overflow-hidden group">
                    <div
                        class="absolute -right-10 -bottom-10 w-64 h-64 bg-white rounded-full blur-3xl opacity-20 pointer-events-none">
                    </div>
                    <div
                        class="w-14 h-14 bg-white/30 rounded-2xl flex items-center justify-center text-[#32445a] mb-6 backdrop-blur-md border border-white/20">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                            </path>
                        </svg>
                    </div>
                    <h4 class="font-heading text-2xl font-bold text-[#32445a] mb-3">Remote Kill-Switch</h4>
                    <p class="text-[#32445a]/80 font-bold max-w-md text-lg">Lost your keys permanently? Login to the
                        dashboard and instantly deactivate your tag. No one can access your data ever again.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-24 bg-slate-50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div
                class="bg-[#32445a] rounded-[3rem] p-12 md:p-20 text-center relative overflow-hidden shadow-2xl border border-slate-700">
                <div class="absolute -top-24 -right-24 w-72 h-72 rounded-full border-4 border-white/5"></div>
                <div class="absolute -top-12 -right-12 w-48 h-48 rounded-full border-4 border-white/10"></div>
                <div class="absolute -bottom-24 -left-24 w-72 h-72 rounded-full border-4 border-[#f5b11c]/10"></div>

                <h2 class="font-heading text-4xl md:text-5xl font-black text-white mb-6 relative z-10">Experience It
                    Yourself</h2>
                <p class="text-lg text-slate-300 mb-10 max-w-2xl mx-auto relative z-10 font-light">Set up takes less than 2
                    minutes. Order your smart hardware today and secure what matters most.</p>

                <div class="flex flex-col sm:flex-row justify-center gap-4 relative z-10">
                    <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                        class="bg-[#f5b11c] hover:bg-yellow-500 text-[#32445a] font-bold px-10 py-4 rounded-full transition-all shadow-[0_0_30px_rgba(245,177,28,0.3)] transform hover:-translate-y-1">
                        View Hardware Catalog
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection
