@extends('layouts.main')

@section('title', 'About Us')
@section('description', 'Learn about Aruku R&B Limited — pioneering game development with blockchain, AI-driven gameplay and NFTs, built with a minimalist, glassy, dark aesthetic.')
@section('keywords', 'about aruku, aruku r&b, blockchain gaming, ai gameplay, nft studio')

@section('content')

<!-- About: Hero with Parallax and Particles -->
<section id="about-root" x-data="aboutPage()" x-init="Alpine.store('about', { ids: this.ids })" class="relative overflow-hidden py-10">
    <!-- background layers -->
    <div class="absolute inset-0 -z-10">
        <div class="absolute inset-0 bg-dark-gradient opacity-90"></div>
        <div class="absolute inset-0 bg-dots opacity-10"></div>
    </div>

    <!-- floating particles -->
    <div class="particles -z-0" aria-hidden="true">
        <template x-for="(p,i) in particles" :key="i">
            <span class="particle" :style="`--x:${p.x};--y:${p.y};--dx:${p.dx};--dy:${p.dy};--dur:${p.d};--delay:${p.delay};`"></span>
        </template>
    </div>


    <div class="container-custom relative">
        <div class="text-center max-w-3xl mx-auto">
            <span class="badge badge-accent reveal-up">About Aruku R&B Limited</span>
            <h1 :id="ids.title" class="mt-4 font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold text-text-primary text-glow leading-tight">
            Pioneering the future of <span class="text-glow text-accent-blue-primary">gaming</span> with blockchain, AI, and NFTs
            </h1>
            <p :id="ids.sub" class="mt-4 text-text-secondary text-lg">
                We merge blockchain technology, AI-powered gameplay, and NFTs to deliver immersive football
                management experiences where players truly own their digital assets.
            </p>
        </div>
    </div>
</section>

<!-- About Us -->
<div class="max-w-5xl px-4 mx-auto md:mb-10 xl:px-0">
    <div class="grid grid-cols-1 my-20 md:grid-cols-2 gap-x-10">
        <div class="relative">
            <img src="{{ url('assets/img/player.jpg') }}" alt="Image" class="absolute -mt-12 -ml-12 h-32 z-10">
            <!-- <img src="{{ url('assets/img/stadium3.jpg') }}" alt="Image" class="absolute hidden md:block -left-8 -bottom-16 h-32 z-10"> -->
            <img src="{{ url('assets/img/stadium2.jpg') }}" alt="Image" class="relative rounded-xl glass-blue hover-glow">
            <!-- <img src="{{ url('assets/img/player2.jpg') }}" alt="Image" class="absolute hidden md:block -right-8 -bottom-16 h-32">          -->
        </div>
        <div class="pt-10 pr-10 md:pt-0">
        <h2 class="font-heading text-2xl text-text-primary">About Us</h2>
            <p class="pb-4 card-content">Aruku R&B Limited is pioneering the future of gaming by integrating blockchain technology with immersive football management experiences. We’re redefining what it means to be a football manager, giving players true ownership of their digital assets.</p>
            <p class="pb-4 card-content">We are proud to build a community of dedicated football enthusiasts who share our vision. Our partnerships with elite football organisations and influencers ensure that our games remain authentic and engaging.</p>
            <!-- <div class="mt-8 flex flex-col sm:flex-row gap-4">
                <a href="{{ route('careers') }}" class="btn-primary shine group">
                    Join Our Team
                </a>
                <a href="{{ route('contact') }}" class="btn-secondary shine group">
                    Contact Us
                </a>
            </div> -->
        </div>
    </div>
</div>

<!-- Mission & Vision -->
<section class="section relative -mt-28">
    <div class="container-custom">
        <div class="grid md:grid-cols-2 gap-8">
            <div class="group tilt-container card card-variant-dark shine card-animate">
                <div class="corner-accent corner-accent-tl"></div>
                <h2 class="font-heading text-2xl text-text-primary">Our Mission</h2>
                <p class="text-text-secondary mt-3">
                    To redefine gaming by blending blockchain technology with immersive football management,
                    creating a global community where each play has real‑world value.
                </p>
            </div>
            <div class="group tilt-container card card-variant-dark shine card-animate">
                <div class="corner-accent corner-accent-br"></div>
                <h2 class="font-heading text-2xl text-text-primary">Our Vision</h2>
                <p class="text-text-secondary mt-3">
                    A future where players have true ownership of digital assets and a vibrant ecosystem built on
                    transparency, innovation, and community.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Studio Values / Highlights -->
<section class="section bg-dark-container/20">
    <div class="container-custom">
        <div class="text-center mb-12">
            <h2 class="section-title">What Drives Us</h2>
            <p class="section-subtitle">Crafting innovative, player‑first experiences with cutting‑edge tech</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="group tilt-container card card-variant-dark shine card-animate">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 glass-blue rounded-xl flex items-center justify-center">
                        <svg class="w-5 h-5 text-accent-blue-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8 2 5 5 5 9c0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>
                    </div>
                    <h3 class="font-heading text-lg text-text-primary">Player Ownership</h3>
                </div>
                <p class="text-text-secondary">NFT‑backed assets ensure meaningful collections, trading, and cross‑game value.</p>
            </div>
            <div class="group tilt-container card card-variant-dark shine card-animate">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 glass-blue rounded-xl flex items-center justify-center">
                        <svg class="w-5 h-5 text-accent-blue-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3a9 9 0 1 0 9 9A9.01 9.01 0 0 0 12 3Zm1 13h-2v-2H9v-2h2V8h2v4h2v2h-2Z"/></svg>
                    </div>
                    <h3 class="font-heading text-lg text-text-primary">AI‑Driven Play</h3>
                </div>
                <p class="text-text-secondary">Adaptive AI creates dynamic matches that respond to your strategies.</p>
            </div>
            <div class="group tilt-container card card-variant-dark shine card-animate">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 glass-blue rounded-xl flex items-center justify-center">
                        <svg class="w-5 h-5 text-accent-blue-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 3 7v10l9 5 9-5V7Zm0 2.2 6 3.33v6.94l-6 3.33-6-3.33V7.53Z"/></svg>
                    </div>
                    <h3 class="font-heading text-lg text-text-primary">Premium Craft</h3>
                </div>
                <p class="text-text-secondary">A minimalist, glassy, dark aesthetic elevates every interface and interaction.</p>
            </div>
        </div>
    </div>
</section>

<x-road-map />

<!-- Call To Action -->
<section class="section1 pt-6">
    <div class="container-custom">
        <div class="glass-dark rounded-3xl p-8 lg:p-12 text-center shine group">
            <h2 class="font-heading text-3xl lg:text-4xl font-bold text-text-primary mb-4">Be part of our journey</h2>
            <p class="text-text-secondary max-w-2xl mx-auto">We’re building the future of football management gaming.
                Explore careers or reach out to collaborate.</p>
            <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('careers') }}" class="btn-primary">View Open Positions</a>
                <a href="{{ route('contact') }}" class="btn-secondary">Get in Touch</a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    function aboutPage() {
        const uid = () => 'id-' + Math.random().toString(36).slice(2, 8);
        return {
            ids: { title: uid(), sub: uid(), art: uid() },
            particles: Array.from({ length: 26 }).map(() => {
                const d = (Math.random() * 8 + 8).toFixed(2) + 's';
                const delay = (-Math.random() * 6).toFixed(2) + 's';
                const x = (Math.random() * 100).toFixed(2) + '%';
                const y = (Math.random() * 100).toFixed(2) + '%';
                const dx = ((Math.random() * 50) - 25).toFixed(0) + 'px';
                const dy = ((Math.random() * 50) - 25).toFixed(0) + 'px';
                return { x, y, dx, dy, d, delay };
            })
        };
    }

    document.addEventListener('DOMContentLoaded', () => {
        const ids = Alpine.store('about')?.ids || { title: 'about-hero-title', sub: 'about-hero-sub', art: 'about-hero-art' };

        // Stagger reveal for value cards
        gsap.utils.toArray('.card-animate').forEach((el, i) => {
            gsap.from(el, {
                y: 24,
                opacity: 0,
                duration: 0.6,
                ease: 'power2.out',
                delay: i * 0.05,
                scrollTrigger: {
                    trigger: el,
                    start: 'top 85%'
                }
            });
        });

        // Parallax for hero (desktop only)
        const mm = gsap.matchMedia();
        mm.add('(min-width: 1024px)', () => {
            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: '#about-root',
                    start: 'top top',
                    end: '+=400',
                    scrub: true
                }
            });
            tl.to('#' + ids.title, { yPercent: -10 }, 0)
              .to('#' + ids.sub, { yPercent: -16 }, 0)
              .to('#' + ids.art, { yPercent: -22 }, 0);
        });

        // Clean up on unload (defensive)
        window.addEventListener('unload', () => {
            ScrollTrigger.getAll().forEach(t => t.kill());
        });
    });
</script>
@endpush