@extends('layouts.main')

@section('title', 'Contact')
@section('description', 'Get in touch with Aruku R&B Limited — questions, partnerships, careers, and media inquiries.')
@section('keywords', 'contact, support, inquiries, partnerships, careers')

@section('content')
<!-- Contact: Hero with Parallax and Particles -->
<section id="contact-root" x-data="contactPage()" x-init="Alpine.store('contact', { 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="'pc-'+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">Contact</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">
                Let's build the <span class="text-accent-blue-primary">future</span> together
            </h1>
            <p :id="ids.sub" class="mt-4 text-text-secondary text-lg">
                Questions, partnerships, careers or media. We’d love to hear from you.
            </p>
        </div>
    </div>
</section>

<!-- Contact content -->
<section class="py-10">
    <div class="container-custom">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Form -->
            <div class="lg:col-span-7">
                @if (session('success'))
                    <div class="glass-blue border border-accent-blue-primary/20 text-text-primary rounded-2xl p-4 mb-6">
                        {{ session('success') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('contact.submit') }}" class="card card-variant-dark shine relative" x-data="{ submitting: false }" @submit="submitting = true">
                    @csrf
                    <div class="corner-accent corner-accent-tl"></div>
                    <div class="corner-accent corner-accent-br"></div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Name -->
                        <div>
                            <label for="name" class="form-label">Name <span class="text-red-400">*</span></label>
                            <input id="name" name="name" type="text" class="form-input w-full px-4 py-3" value="{{ old('name') }}" required autocomplete="name"/>
                            @error('name')
                                <p class="form-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="form-label">Email <span class="text-red-400">*</span></label>
                            <input id="email" name="email" type="email" class="form-input w-full px-4 py-3" value="{{ old('email') }}" required autocomplete="email"/>
                            @error('email')
                                <p class="form-error">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Subject -->
                    <div class="mt-4">
                        <label for="subject" class="form-label">Subject <span class="text-red-400">*</span></label>
                        <input id="subject" name="subject" type="text" class="form-input w-full px-4 py-3" value="{{ old('subject') }}" required/>
                        @error('subject')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Message -->
                    <div class="mt-4">
                        <label for="message" class="form-label">Message <span class="text-red-400">*</span></label>
                        <textarea id="message" name="message" rows="6" class="form-input w-full px-4 py-3" required>{{ old('message') }}</textarea>
                        @error('message')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mt-6 flex items-center gap-3">
                        <button type="submit" class="btn-primary" :disabled="submitting">
                            <span x-show="!submitting">Send Message</span>
                            <span x-show="submitting">Sending...</span>
                        </button>
                        <a href="{{ route('home') }}" class="btn-secondary">Back to Home</a>
                    </div>
                </form>
            </div>

            <!-- Info panel -->
            <div class="lg:col-span-5">
                <div class="card card-variant-primary shine relative">
                    <div class="corner-accent corner-accent-tl"></div>
                    <div class="corner-accent corner-accent-br"></div>
                    <h2 class="font-heading text-xl text-text-primary">Contact Information</h2>
                    <p class="text-text-secondary mt-2">Reach us via email or phone, or connect through our social channels.</p>
                    <div class="mt-6 space-y-4 text-text-secondary">
                        <div class="flex items-center gap-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="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8m-2 11H5a2 2 0 01-2-2V7a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2z" />
                                </svg>
                            </div>
                            <span>hello@arukurb.com</span>
                        </div>
                        <div class="flex items-center gap-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="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <span>+1 (555) 123-4567</span>
                        </div>
                        <div class="flex items-start gap-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="none" stroke="currentColor">
                                    <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </div>
                            <span>123 Innovation Street<br>Tech City, TC 12345</span>
                        </div>
                    </div>

                    <div class="mt-6 flex items-center gap-3">
                        <!-- Facebook -->
                        <a href="https://www.facebook.com/InvincibleFM/" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Follow us on Facebook">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>
                        <!-- X (Twitter) -->
                        <a href="https://x.com/invincibleMgr/" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Follow us on X">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                            </svg>
                        </a>
                        <!-- Discord -->
                        <a href="https://discord.gg/9EWhV6r8cR" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Join us on Discord">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0188 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z"/>
                            </svg>
                        </a>
                        <!-- Telegram -->
                        <a href="https://t.me/InvincibleFM" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Join us on Telegram">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                            </svg>
                        </a>
                        <!-- YouTube -->
                        <a href="https://www.youtube.com/@invinciblefm" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Subscribe to our YouTube channel">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    function contactPage() {
        const uid = () => 'id-' + Math.random().toString(36).slice(2, 8);
        return {
            ids: { title: uid(), sub: uid() },
            particles: Array.from({ length: 20 }).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() * 40) - 20).toFixed(0) + 'px';
                const dy = ((Math.random() * 40) - 20).toFixed(0) + 'px';
                return { x, y, dx, dy, d, delay };
            })
        };
    }

    document.addEventListener('DOMContentLoaded', () => {
        const ids = Alpine.store('contact')?.ids || {};

        // Stagger in form and info cards
        gsap.utils.toArray('.card-variant-dark, .card-variant-primary').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 90%' }
            });
        });

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

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