@php
    // Core company values with icons and descriptions
    $values = [
        [
            'title' => 'Innovation First',
            'description' => 'We push boundaries and embrace cutting-edge technology to create revolutionary gaming experiences that redefine what\'s possible.',
            'icon' => 'innovation',
            'colorClasses' => [
                'bg' => 'bg-cyan-500/20',
                'ring' => 'ring-cyan-500/30',
                'hoverBg' => 'group-hover:bg-cyan-500/30',
                'hoverRing' => 'group-hover:ring-cyan-500/50',
                'text' => 'text-cyan-400',
                'hoverText' => 'group-hover:text-cyan-300',
                'titleHover' => 'group-hover:text-cyan-100',
                'gradient' => 'from-cyan-500/10 via-transparent to-cyan-600/5',
                'indicator' => 'text-cyan-400',
                'border' => 'border-cyan-500/30'
            ]
        ],
        [
            'title' => 'Player Ownership',
            'description' => 'True digital ownership through blockchain technology. Players control their assets, achievements, and gaming destiny.',
            'icon' => 'ownership',
            'colorClasses' => [
                'bg' => 'bg-blue-500/20',
                'ring' => 'ring-blue-500/30',
                'hoverBg' => 'group-hover:bg-blue-500/30',
                'hoverRing' => 'group-hover:ring-blue-500/50',
                'text' => 'text-blue-400',
                'hoverText' => 'group-hover:text-blue-300',
                'titleHover' => 'group-hover:text-blue-100',
                'gradient' => 'from-blue-500/10 via-transparent to-blue-600/5',
                'indicator' => 'text-blue-400',
                'border' => 'border-blue-500/30'
            ]
        ],
        [
            'title' => 'Community Driven',
            'description' => 'Our community shapes the game. Every decision reflects player feedback and collaborative development principles.',
            'icon' => 'community',
            'colorClasses' => [
                'bg' => 'bg-indigo-500/20',
                'ring' => 'ring-indigo-500/30',
                'hoverBg' => 'group-hover:bg-indigo-500/30',
                'hoverRing' => 'group-hover:ring-indigo-500/50',
                'text' => 'text-indigo-400',
                'hoverText' => 'group-hover:text-indigo-300',
                'titleHover' => 'group-hover:text-indigo-100',
                'gradient' => 'from-indigo-500/10 via-transparent to-indigo-600/5',
                'indicator' => 'text-indigo-400',
                'border' => 'border-indigo-500/30'
            ]
        ],
        [
            'title' => 'Excellence & Quality',
            'description' => 'Uncompromising standards in gameplay, design, and user experience. We deliver polished, professional gaming products.',
            'icon' => 'quality',
            'colorClasses' => [
                'bg' => 'bg-violet-500/20',
                'ring' => 'ring-violet-500/30',
                'hoverBg' => 'group-hover:bg-violet-500/30',
                'hoverRing' => 'group-hover:ring-violet-500/50',
                'text' => 'text-violet-400',
                'hoverText' => 'group-hover:text-violet-300',
                'titleHover' => 'group-hover:text-violet-100',
                'gradient' => 'from-violet-500/10 via-transparent to-violet-600/5',
                'indicator' => 'text-violet-400',
                'border' => 'border-violet-500/30'
            ]
        ],
        [
            'title' => 'Transparency',
            'description' => 'Open development processes, clear communication, and honest roadmaps. Trust built through consistent transparency.',
            'icon' => 'transparency',
            'colorClasses' => [
                'bg' => 'bg-purple-500/20',
                'ring' => 'ring-purple-500/30',
                'hoverBg' => 'group-hover:bg-purple-500/30',
                'hoverRing' => 'group-hover:ring-purple-500/50',
                'text' => 'text-purple-400',
                'hoverText' => 'group-hover:text-purple-300',
                'titleHover' => 'group-hover:text-purple-100',
                'gradient' => 'from-purple-500/10 via-transparent to-purple-600/5',
                'indicator' => 'text-purple-400',
                'border' => 'border-purple-500/30'
            ]
        ],
        [
            'title' => 'Global Accessibility',
            'description' => 'Gaming experiences designed for everyone, everywhere. Breaking barriers through inclusive design and fair play.',
            'icon' => 'global',
            'colorClasses' => [
                'bg' => 'bg-pink-500/20',
                'ring' => 'ring-pink-500/30',
                'hoverBg' => 'group-hover:bg-pink-500/30',
                'hoverRing' => 'group-hover:ring-pink-500/50',
                'text' => 'text-pink-400',
                'hoverText' => 'group-hover:text-pink-300',
                'titleHover' => 'group-hover:text-pink-100',
                'gradient' => 'from-pink-500/10 via-transparent to-pink-600/5',
                'indicator' => 'text-pink-400',
                'border' => 'border-pink-500/30'
            ]
        ]
    ];

    // SVG Icons for each value
    $icons = [
        'innovation' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>',
        'ownership' => '<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"/>',
        'community' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>',
        'quality' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>',
        'transparency' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>',
        'global' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>'
    ];
@endphp

<section
    x-data="coreValues(@js($values))"
    x-init="init()"
    role="region"
    aria-label="Our Core Values"
    class="relative isolate overflow-hidden bg-black text-white">
    
    <!-- Decorative background elements -->
    <div class="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-cyan-500/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-violet-500/10 blur-3xl"></div>
    <div class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-96 w-96 rounded-full bg-blue-500/5 blur-3xl"></div>
    
    <div class="mx-auto max-w-7xl px-6 lg:px-10 pt-16 pb-16 lg:pt-20 lg:pb-24">
        <!-- Header -->
        <header data-header class="text-center max-w-4xl mx-auto mb-12 lg:mb-20">
            <p class="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-white/70">
                <span class="inline-block h-2 w-2 rounded-full bg-cyan-400"></span>
                Our Foundation
            </p>
            <h2 class="mt-2 font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight text-white">
                Core Values That Drive Us
            </h2>
            <p class="mt-4 text-white/70 text-lg lg:text-xl max-w-3xl mx-auto">
                These principles guide every decision, shape our culture, and define how we build the future of blockchain gaming.
            </p>
        </header>

        <!-- Values Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" data-grid>
            @foreach ($values as $index => $value)
                <article
                    data-card="{{ $index }}"
                    x-data="{ hovered: false }"
                    @mouseenter="hovered = true; onCardHover({{ $index }})"
                    @mouseleave="hovered = false"
                    class="group relative">
                    
                    <!-- Card Container -->
                    <div class="relative h-full rounded-2xl p-6 lg:p-8 backdrop-blur-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:ring-white/20 transition-all duration-500 group-hover:scale-[1.02] transform-gpu">
                        
                        <!-- Animated background gradient -->
                        <div class="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br {{ $value['colorClasses']['gradient'] }}"></div>
                        
                        <!-- Content -->
                        <div class="relative z-10">
                            <!-- Icon -->
                            <div class="mb-6">
                                <div class="inline-flex items-center justify-center w-12 h-12 lg:w-14 lg:h-14 rounded-xl {{ $value['colorClasses']['bg'] }} ring-1 {{ $value['colorClasses']['ring'] }} {{ $value['colorClasses']['hoverBg'] }} {{ $value['colorClasses']['hoverRing'] }} transition-all duration-300">
                                    <svg class="w-6 h-6 lg:w-7 lg:h-7 {{ $value['colorClasses']['text'] }} {{ $value['colorClasses']['hoverText'] }} transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        {!! $icons[$value['icon']] !!}
                                    </svg>
                                </div>
                            </div>

                            <!-- Title -->
                            <h3 class="font-heading text-xl lg:text-2xl font-bold text-white mb-3 {{ $value['colorClasses']['titleHover'] }} transition-colors duration-300">
                                {{ $value['title'] }}
                            </h3>

                            <!-- Description -->
                            <p class="text-white/70 group-hover:text-white/85 transition-colors duration-300 leading-relaxed">
                                {{ $value['description'] }}
                            </p>

                            <!-- Hover indicator -->
                            <div class="mt-6 flex items-center {{ $value['colorClasses']['indicator'] }} opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
                                <span class="text-sm font-medium">Learn more</span>
                                <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </div>
                        </div>

                        <!-- Corner accents -->
                        <div class="absolute top-0 left-0 w-8 h-8 rounded-tl-2xl border-t-2 border-l-2 {{ $value['colorClasses']['border'] }} opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <div class="absolute bottom-0 right-0 w-8 h-8 rounded-br-2xl border-b-2 border-r-2 {{ $value['colorClasses']['border'] }} opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    </div>
                </article>
            @endforeach
        </div>

        <!-- Bottom CTA Section -->
        <div class="mt-16 lg:mt-20 text-center" data-cta>
            <div class="inline-block rounded-2xl px-8 py-6 backdrop-blur-xl bg-white/5 ring-1 ring-white/15 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.6)]">
                <h3 class="font-heading text-2xl lg:text-3xl font-bold text-white mb-3">
                    Ready to Join Our Mission?
                </h3>
                <p class="text-white/70 mb-6 max-w-2xl mx-auto">
                    Be part of a team that's reshaping the gaming industry with these core values as our compass.
                </p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                    <a href="{{ route('careers') }}" 
                       class="inline-flex items-center gap-2 rounded-xl px-6 py-3 bg-white/10 hover:bg-white/15 active:bg-white/20 transition backdrop-blur-xl ring-1 ring-white/20 text-white">
                        <span>View Open Positions</span>
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M5 12h12m0 0-5-5m5 5-5 5"/></svg>
                    </a>
                    <a href="{{ route('contact') }}" 
                       class="inline-flex items-center gap-2 rounded-xl px-6 py-3 bg-black/40 hover:bg-black/50 active:bg-black/60 transition backdrop-blur-xl ring-1 ring-white/10 text-white/90">
                        <span>Get In Touch</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@once
    @push('scripts')
        <script>
            function coreValues(values) {
                return {
                    values: values || [],
                    hoveredCard: null,
                    reduced: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches,

                    init() {
                        this.$nextTick(() => {
                            this.setupGsap();
                            this.revealHeader();
                            this.staggerCards();
                            this.revealCta();
                        });
                    },

                    onCardHover(index) {
                        this.hoveredCard = index;
                        this.animateCardFocus(index);
                    },

                    animateCardFocus(index) {
                        const G = window.gsap;
                        if (!G || this.reduced) return;

                        const card = this.$root.querySelector(`[data-card="${index}"]`);
                        if (!card) return;

                        // Subtle pulse animation on the icon
                        const icon = card.querySelector('svg');
                        if (icon) {
                            G.to(icon, {
                                scale: 1.1,
                                duration: 0.3,
                                ease: 'power2.out',
                                yoyo: true,
                                repeat: 1
                            });
                        }
                    },

                    setupGsap() {
                        const G = window.gsap;
                        const ST = window.ScrollTrigger;
                        if (!G || this.reduced) return;

                        // Parallax effect on background elements
                        if (ST) {
                            const bgElements = this.$root.querySelectorAll('.pointer-events-none');
                            bgElements.forEach((el, i) => {
                                G.to(el, {
                                    yPercent: -10 * (i + 1),
                                    ease: 'none',
                                    scrollTrigger: {
                                        trigger: this.$root,
                                        start: 'top bottom',
                                        end: 'bottom top',
                                        scrub: true
                                    }
                                });
                            });

                            // Cards entrance on scroll
                            const cards = this.$root.querySelectorAll('[data-card]');
                            cards.forEach((card, i) => {
                                G.from(card, {
                                    y: 40,
                                    opacity: 0,
                                    duration: 0.8,
                                    ease: 'power3.out',
                                    delay: i * 0.1,
                                    scrollTrigger: {
                                        trigger: card,
                                        start: 'top 85%',
                                        toggleActions: 'play none none reverse'
                                    }
                                });
                            });
                        }

                        // Cleanup
                        window.addEventListener('unload', () => {
                            if (ST) {
                                ST.getAll().forEach(t => t.kill());
                            }
                        });
                    },

                    revealHeader() {
                        const G = window.gsap;
                        if (!G || this.reduced) return;
                        
                        const header = this.$root.querySelector('[data-header]');
                        if (!header) return;
                        
                        G.set(header.children, { y: 32, opacity: 0 });
                        G.to(header.children, { 
                            y: 0, 
                            opacity: 1, 
                            duration: 0.8, 
                            stagger: 0.15, 
                            ease: 'power3.out',
                            delay: 0.2
                        });
                    },

                    staggerCards() {
                        const G = window.gsap;
                        if (!G || this.reduced) return;
                        
                        const cards = this.$root.querySelectorAll('[data-card]');
                        
                        G.set(cards, { y: 48, opacity: 0, scale: 0.95 });
                        G.to(cards, {
                            y: 0,
                            opacity: 1,
                            scale: 1,
                            duration: 0.7,
                            stagger: {
                                amount: 0.6,
                                from: 'start',
                                ease: 'power2.out'
                            },
                            ease: 'power3.out',
                            delay: 0.8
                        });
                    },

                    revealCta() {
                        const G = window.gsap;
                        if (!G || this.reduced) return;
                        
                        const cta = this.$root.querySelector('[data-cta]');
                        if (!cta) return;
                        
                        G.set(cta, { y: 24, opacity: 0 });
                        G.to(cta, { 
                            y: 0, 
                            opacity: 1, 
                            duration: 0.6, 
                            ease: 'power2.out',
                            delay: 1.8
                        });
                    }
                }
            }
        </script>
    @endpush
@endonce