@extends('layouts.main')

@section('title', 'Home')
@section('description', 'Aruku R&B Limited - Revolutionary gaming experience with blockchain integration, AI-powered gameplay, and NFTs. The future of gaming is here.')
@section('keywords', 'blockchain gaming, NFT games, AI gameplay, football management, revolutionary gaming')

@section('content')
<x-hero-slider />

<!-- Hero 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/dots.webp') }}" alt="Image" class="absolute -mt-12 -ml-12 h-52 md:h-72">
            <img src="{{ url('assets/img/game.webp') }}" alt="Image" class="absolute hidden md:block -right-8 -bottom-64 ">
            <img src="{{ url('assets/img/stadium1.jpg') }}" alt="Image" class="relative rounded-xl glass-blue hover-glow">
            
        </div>
        <div class="pt-10 pr-10 md:pt-0">
            <div class="text-xs uppercase text-glow text-accent-blue-primary font-bold mb-2">About Us</div>
            <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>
            <div :id="ids.art" id="about-hero-art" class="tilt-container">
                <div class="group tilt-3d card card-variant-primary shine relative">
                    <div class="corner-accent corner-accent-tl"></div>
                    <div class="corner-accent corner-accent-br"></div>
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 glass-blue rounded-2xl flex items-center justify-center shrink-0">
                            <svg class="w-7 h-7 text-accent-blue-primary" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2 2 7l10 5 10-5-10-5ZM2 17l10 5 10-5M2 12l10 5 10-5"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-heading text-xl text-text-primary">Invincible Football Manager</h3>
                            <p class="text-text-secondary text-sm">A premium aesthetic tailored for a next‑gen game studio.</p>
                        </div>
                    </div>
                    <div class="mt-6 grid grid-cols-3 gap-4 text-center">
                        <div class="glass p-4 rounded-xl">
                            <div class="text-2xl font-heading text-text-primary">USDT</div>
                            <div class="text-xs text-text-secondary mt-1">Play to Earn</div>
                        </div>
                        <div class="glass p-4 rounded-xl">
                            <div class="text-2xl font-heading text-text-primary">AI</div>
                            <div class="text-xs text-text-secondary mt-1">Adaptive Play</div>
                        </div>
                        <div class="glass p-4 rounded-xl">
                            <div class="text-2xl font-heading text-text-primary">NFT</div>
                            <div class="text-xs text-text-secondary mt-1">True Ownership</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<section class="section bg-dark-container/20">
    <div class="container-custom">
        <div class="text-center mb-16">
            <h2 class="section-title fade-in">Revolutionary <span class="text-accent-blue-primary">Gaming</span> Technology</h2>
            <p class="section-subtitle fade-in">
                Pushing the boundaries of traditional gaming with cutting-edge technology
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="card scale-in">
                <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-accent-blue-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </div>
                <h3 class="card-title">Blockchain Integration</h3>
                <p class="card-content">
                    Experience true ownership of your digital assets with our blockchain-powered gaming ecosystem.
                </p>
            </div>
            
            <div class="card scale-in">
                <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-accent-blue-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M9.5 16.5c0 .28.22.5.5.5s.5-.22.5-.5-.22-.5-.5-.5-.5.22-.5.5zm2.5 0c0 .28.22.5.5.5s.5-.22.5-.5-.22-.5-.5-.5-.5.22-.5.5zm2.5 0c0 .28.22.5.5.5s.5-.22.5-.5-.22-.5-.5-.5-.5.22-.5.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.12.23-2.18.65-3.15L8 10.5c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1L4.65 7.85C5.82 5.18 8.69 3.5 12 3.5s6.18 1.68 7.35 4.35L16 9.5c0-.55-.45-1-1-1s-1 .45-1 1 .45 1 1 1l3.35 1.65c.42.97.65 2.03.65 3.15 0 4.41-3.59 8-8 8z"/>
                    </svg>
                </div>
                <h3 class="card-title">AI-Powered Gameplay</h3>
                <p class="card-content">
                    Intelligent AI adapts to your playing style, creating unique and challenging gaming experiences.
                </p>
            </div>
            
            <div class="card scale-in">
                <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-accent-blue-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                </div>
                <h3 class="card-title">NFT Gaming Assets</h3>
                <p class="card-content">
                    Collect, trade, and utilize unique NFT assets that have real-world value and cross-game compatibility.
                </p>
            </div>
            
            <!-- Real-World Value -->
            <div class="card scale-in">
                <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-accent-blue-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
                    </svg>
                </div>
                <h3 class="card-title">Real-World Value</h3>
                <p class="card-content">
                    Every game played brings tangible value, with opportunities to trade and monetize your success.
                </p>
            </div>
            
            <!-- Global Community -->
            <div class="card scale-in">
                <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-accent-blue-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                    </svg>
                </div>
                <h3 class="card-title">Global Community</h3>
                <p class="card-content">
                    Connect with football enthusiasts worldwide, compete in tournaments, and build your reputation.
                </p>
            </div>
            
            <!-- Authentic Experience -->
            <div class="card scale-in">
                <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-accent-blue-primary" 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.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                </div>
                <h3 class="card-title">Authentic Experience</h3>
                <p class="card-content">
                    The most authentic football management experience, where every decision reflects the true essence of the sport.
                </p>
            </div>
        </div>
    </div>
</section>

<x-partner-logos />

<!-- CTA Section -->
<section class="section -mt-16 -mb-32">
    <div class="container-custom">
        <div class="glass-dark rounded-3xl p-8 lg:p-12 text-center">
            <h2 class="font-heading text-3xl lg:text-4xl font-bold text-text-primary mb-6 slide-up">
                Ready to Join the <span class="text-glow text-accent-blue-primary">Revolution?</span>
            </h2>
            <p class="text-lg text-text-secondary mb-8 max-w-2xl mx-auto slide-up">
                Be part of the future of gaming. Connect with us to learn more about our innovative projects and career opportunities.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center slide-up">
                <a href="{{ route('careers') }}" class="btn-primary">
                    Explore Careers
                </a>
                <a href="{{ route('contact') }}" class="btn-secondary">
                    Contact Us Today
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    // Custom animations for this page
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof window.gsap === 'undefined') {
            return; // GSAP not loaded; skip animations (content remains visible)
        }

        // Subtle floating animation to cards on this page only
        gsap.utils.toArray('.card').forEach((card, index) => {
            gsap.to(card, {
                y: -5,
                duration: 2 + (index * 0.1),
                repeat: -1,
                yoyo: true,
                ease: "power1.inOut",
                delay: index * 0.2
            });
        });
        
        // Hero text stagger animation (target only the hero section)
        const tl = gsap.timeline();
        tl.from("#hero h1", { 
                opacity: 0, 
                y: 50, 
                duration: 0.9, 
                ease: "power2.out" 
            })
          .from("#hero p", { 
                opacity: 0, 
                y: 30, 
                duration: 0.7, 
                ease: "power2.out" 
            }, "-=0.45")
          .from("#hero .btn-primary, #hero .btn-secondary", { 
                opacity: 0, 
                scale: 0.95, 
                duration: 0.5, 
                stagger: 0.1,
                ease: "back.out(1.7)" 
            }, "-=0.25");
    });
</script>
@endpush