@extends('layouts.app')

@section('title', 'About OneQRScan | India\'s Leading Smart QR Identity Infrastructure')

@section('content')

    <header class="relative bg-[#32445a] pt-24 pb-12 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden pointer-events-none z-0">
            <div
                class="absolute -top-24 right-0 w-[400px] h-[400px] bg-[#f5b11c] rounded-full mix-blend-screen filter blur-[100px] opacity-10 animate-pulse">
            </div>
            <div
                class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-blue-500 rounded-full mix-blend-multiply filter blur-[80px] 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-6 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-4 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]">Our Story</li>
                </ol>
            </nav>

            <div class="grid lg:grid-cols-2 gap-8 items-center text-center lg:text-left">
                <div>
                    <h1 class="font-heading text-4xl md:text-5xl font-black text-white leading-tight tracking-tight mb-4">
                        The Next Era of <span
                            class="text-transparent bg-clip-text bg-gradient-to-r from-[#f5b11c] to-yellow-300">Security.</span>
                    </h1>
                    <p class="text-base text-slate-300 font-light leading-relaxed max-w-xl mx-auto lg:mx-0">
                        Bridging physical assets with secure digital intelligence through India's leading safety ecosystem.
                    </p>
                </div>
                {{-- <div class="hidden lg:flex justify-end">
                    <div class="grid grid-cols-2 gap-3">
                        <div
                            class="bg-white/5 backdrop-blur-lg border border-white/10 p-4 rounded-2xl text-center min-w-[120px]">
                            <div class="text-[#f5b11c] text-2xl font-black font-heading">50K+</div>
                            <div class="text-white text-[10px] font-bold uppercase tracking-wider mt-1">Active Tags</div>
                        </div>
                        <div
                            class="bg-white/5 backdrop-blur-lg border border-white/10 p-4 rounded-2xl text-center min-w-[120px]">
                            <div class="text-[#f5b11c] text-2xl font-black font-heading">100%</div>
                            <div class="text-white text-[10px] font-bold uppercase tracking-wider mt-1">Privacy</div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </header>

    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row gap-20 items-center">

                <div class="w-full lg:w-1/2 relative">
                    <div class="absolute -inset-4 bg-[#f5b11c]/10 rounded-[3rem] transform -rotate-2"></div>
                    <div class="relative rounded-[2.5rem] overflow-hidden shadow-2xl border-4 border-white">
                        <img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?auto=format&fit=crop&w=800&q=80"
                            alt="Corporate Team" class="w-full h-[500px] object-cover">
                    </div>
                </div>

                <div class="w-full lg:w-1/2">
                    <h2 class="text-[#32445a] font-heading text-3xl md:text-5xl font-black mb-8 leading-tight">
                        Why We Built <br><span class="text-[#f5b11c]">OneQRScan</span>
                    </h2>
                    <article class="prose prose-lg text-slate-600 space-y-6">
                        <p>
                            In a world that moves at lightning speed, our physical security remains stuck in the past.
                            Traditional ID cards, vehicle stickers, and pet tags are <strong>static, unchangeable, and
                                insecure.</strong>
                        </p>
                        <p>
                            We saw the frustration of vehicle owners getting harassed by publicizing their phone numbers on
                            windshields. We saw the anxiety of parents whose children carried IDs with outdated addresses.
                        </p>
                        <p class="font-bold text-[#32445a]">
                            Our solution was simple yet revolutionary: Give every physical object a secure, dynamic digital
                            voice.
                        </p>
                        <div class="flex items-start gap-4 pt-6">
                            <div class="w-1 bg-[#f5b11c] h-16 rounded-full"></div>
                            <p class="italic text-xl text-slate-500">
                                "Our mission is to ensure that no vital piece of information is ever out of reach when it
                                matters most."
                            </p>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <section class="py-24 bg-slate-50 border-y 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-4 block">The OneQR
                    Advantage</span>
                <h2 class="text-[#32445a] font-heading text-3xl md:text-4xl font-black">Corporate Standards, Human Focus
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div
                    class="group bg-white p-10 rounded-[2.5rem] shadow-sm border border-slate-100 hover:shadow-xl hover:border-[#f5b11c]/30 transition-all duration-500">
                    <div
                        class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <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="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="font-heading text-2xl font-bold text-[#32445a] mb-4">Unmatched Privacy</h3>
                    <p class="text-slate-500 leading-relaxed">We hide your personal phone number. People who scan can
                        contact you through our secure gateway, keeping you safe from spam and harassment.</p>
                </div>

                <div
                    class="group bg-white p-10 rounded-[2.5rem] shadow-sm border border-slate-100 hover:shadow-xl hover:border-[#f5b11c]/30 transition-all duration-500">
                    <div
                        class="w-14 h-14 bg-orange-50 text-orange-600 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                            </path>
                        </svg>
                    </div>
                    <h3 class="font-heading text-2xl font-bold text-[#32445a] mb-4">Cloud Synchronization</h3>
                    <p class="text-slate-500 leading-relaxed">Unlike engraved tags, our QR tags are dynamic. Update your
                        address or emergency contacts in the cloud, and the tag updates instantly.</p>
                </div>

                <div
                    class="group bg-white p-10 rounded-[2.5rem] shadow-sm border border-slate-100 hover:shadow-xl hover:border-[#f5b11c]/30 transition-all duration-500">
                    <div
                        class="w-14 h-14 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <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="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="font-heading text-2xl font-bold text-[#32445a] mb-4">Zero Infrastructure</h3>
                    <p class="text-slate-500 leading-relaxed">No app downloads, no batteries, and no complex setups. Just
                        scan and go. Our technology works on every modern smartphone in India.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div
                class="bg-[#32445a] rounded-[3.5rem] p-10 lg:p-20 relative overflow-hidden flex flex-col lg:flex-row items-center gap-12">
                <div
                    class="absolute top-0 right-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 pointer-events-none">
                </div>

                <div class="w-full lg:w-1/2 relative z-10">
                    <h2 class="font-heading text-3xl md:text-5xl font-black text-white mb-8">Your Data Security is <span
                            class="text-[#f5b11c]">Non-Negotiable.</span></h2>
                    <p class="text-slate-300 text-lg mb-10 leading-relaxed">
                        Identity technology requires extreme trust. That's why OneQRScan is built on a foundation of
                        bank-grade security protocols to protect every user.
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="flex items-center gap-3 bg-white/5 border border-white/10 p-4 rounded-2xl">
                            <svg class="w-6 h-6 text-[#f5b11c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    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>
                            <span class="text-white font-bold text-sm">AES-256 Bit Encryption</span>
                        </div>
                        <div class="flex items-center gap-3 bg-white/5 border border-white/10 p-4 rounded-2xl">
                            <svg class="w-6 h-6 text-[#f5b11c]" 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>
                            <span class="text-white font-bold text-sm">ISO 27001 Datacenters</span>
                        </div>
                    </div>
                </div>

                <div class="w-full lg:w-1/2 flex justify-center relative z-10">
                    <div class="relative w-72 h-72">
                        <div
                            class="absolute inset-0 rounded-full border-2 border-dashed border-[#f5b11c] animate-[spin_10s_linear_infinite] opacity-30">
                        </div>

                        <div
                            class="absolute inset-4 bg-[#f5b11c] rounded-full flex items-center justify-center shadow-[0_0_80px_rgba(245,177,28,0.4)] transition-transform duration-500 hover:scale-105">

                            <div
                                class="absolute inset-6 bg-white/20 backdrop-blur-md rounded-full border border-white/30 shadow-inner">
                            </div>

                            <div class="relative flex items-center justify-center">
                                <svg class="w-40 h-40 text-[#32445a] opacity-20 absolute" fill="currentColor"
                                    viewBox="0 0 24 24">
                                    <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z" />
                                </svg>
                                <svg class="w-24 h-24 text-[#32445a] relative z-10 drop-shadow-lg" fill="none"
                                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        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" />
                                </svg>
                            </div>
                        </div>

                        <div class="absolute top-0 left-0 w-4 h-4 bg-accent rounded-full animate-ping"></div>
                        <div class="absolute bottom-10 right-0 w-3 h-3 bg-white rounded-full animate-bounce"
                            style="animation-delay: 1s;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-24 bg-slate-50">
        <div class="max-w-4xl mx-auto px-4 text-center">
            <h2 class="font-heading text-4xl md:text-5xl font-black text-[#32445a] mb-6">Ready to Join the Ecosystem?</h2>
            <p class="text-lg text-slate-500 mb-10">Protect your assets with the smart technology they deserve. Available
                across Pondicherry, Chennai, and all of India.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <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-xl hover:-translate-y-1">
                    Shop Products
                </a>
                <a href="/contact"
                    class="bg-[#32445a] hover:bg-slate-800 text-white font-bold px-10 py-4 rounded-full transition-all shadow-xl hover:-translate-y-1">
                    Contact Enterprise Sales
                </a>
            </div>
        </div>
    </section>

@endsection
