@extends('layouts.app')

@section('title', config('gerg.name') . ' — ' . config('gerg.tagline'))

@section('content')
    @include('partials.hero-slider')

    {{-- Stats strip --}}
    <section class="border-b border-gerg-grey/40 bg-white py-10">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                @foreach (config('gerg.stats') as $stat)
                    <div class="rounded-xl border border-gerg-100 bg-gerg-50/50 p-5 text-center">
                        <p class="font-display text-2xl font-bold text-gerg-600 md:text-3xl">{{ $stat['value'] }}</p>
                        <p class="mt-1 text-sm text-slate-600">{{ $stat['label'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('partials.welcome-gerg')

    {{-- Group of Companies --}}
    <section class="relative overflow-hidden bg-slate-50 py-20 lg:py-28">
        <div class="pointer-events-none absolute right-0 top-0 h-64 w-64 rounded-full bg-gerg-200/40 blur-3xl" aria-hidden="true"></div>
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
                <div class="max-w-2xl">
                    <p class="text-sm font-bold uppercase tracking-widest text-gerg-500">Our Portfolio</p>
                    <h2 class="section-heading mt-2">Group of Companies</h2>
                    <p class="section-subheading">Seven synchronized companies delivering customized solutions across India.</p>
                </div>
                <a href="{{ route('companies') }}" class="btn-outline-dark shrink-0">View all companies</a>
            </div>

            @include('partials.portfolio-companies', ['featured' => true])

            <div class="mt-12 rounded-2xl border border-gerg-200 bg-white p-8 text-center shadow-sm md:p-10">
                <p class="text-lg font-semibold text-gerg-900">Need guidance across multiple segments?</p>
                <p class="mt-2 text-slate-600">Our teams work together to deliver end-to-end solutions under one roof.</p>
                <a href="{{ route('contact') }}" class="btn-primary mt-6">Request Quote</a>
            </div>
        </div>
    </section>

    {{-- Services --}}
    <section id="services" class="bg-white py-20 lg:py-28">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="text-center md:text-left">
                <p class="text-sm font-bold uppercase tracking-widest text-gerg-500">Services</p>
                <h2 class="section-heading mt-2">What We Provide</h2>
                <p class="section-subheading md:max-w-2xl">You always get the best guidance — explore each segment of Golden Era Royal Group.</p>
            </div>

            @include('partials.services-segments')
        </div>
    </section>

    {{-- Initiatives --}}
    <section class="bg-gerg-900 py-20 text-white lg:py-28">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="text-center">
                <p class="text-sm font-semibold uppercase tracking-wider text-gerg-400">CSR & Impact</p>
                <h2 class="font-display mt-2 text-3xl font-semibold md:text-4xl">Our Initiatives</h2>
            </div>
            <div class="mt-14 grid gap-8 md:grid-cols-2">
                @foreach (config('gerg.initiatives') as $initiative)
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
                        <h3 class="font-display text-2xl font-semibold text-gerg-400">{{ $initiative['name'] }}</h3>
                        <p class="mt-1 text-sm text-slate-400">{{ $initiative['subtitle'] }}</p>
                        <p class="mt-4 text-slate-300 leading-relaxed">{{ $initiative['description'] }}</p>
                        <a href="{{ $initiative['url'] }}" target="_blank" rel="noopener" class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-gerg-400 hover:text-gerg-300 transition">
                            {{ $initiative['cta'] }}
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('partials.progress-milestones')

    {{-- CTA / Meeting form --}}
    <section class="bg-gradient-to-br from-gerg-600 to-gerg-900 py-20 text-white lg:py-28">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
                <div>
                    <h2 class="font-display text-3xl font-semibold md:text-4xl">Set up a meeting with us</h2>
                    <p class="mt-4 text-slate-300 leading-relaxed">Get the best guidance across property, software, solar, recruitment, and more. Select your area of interest and we will connect you with the right team.</p>
                    <ul class="mt-8 space-y-4 text-sm">
                        <li class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-gerg-500/20 text-gerg-400">📍</span>
                            {{ config('gerg.address') }}
                        </li>
                        <li class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-gerg-500/20 text-gerg-400">📞</span>
                            <a href="tel:{{ preg_replace('/\s+/', '', config('gerg.phone')) }}" class="hover:text-gerg-400 transition">{{ config('gerg.phone') }}</a>
                        </li>
                    </ul>
                </div>
                <form id="meeting-form" class="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
                    <div id="form-success" class="hidden mb-6 p-4 bg-green-500/20 border border-green-400/30 rounded-lg text-green-300">
                    </div>
                    <div id="form-errors" class="hidden mb-6 p-4 bg-red-500/20 border border-red-400/30 rounded-lg text-red-300">
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label for="guidance" class="block text-sm font-medium text-slate-300">Select Guidance</label>
                            <select id="guidance" name="guidance" class="mt-1 w-full rounded-lg border border-white/20 bg-gerg-800 px-4 py-3 text-white focus:border-gerg-500 focus:outline-none focus:ring-1 focus:ring-gerg-500">
                                <option value="">Choose a segment...</option>
                                @foreach (config('gerg.companies') as $company)
                                    <option value="{{ $company['slug'] }}">{{ $company['name'] }}</option>
                                @endforeach
                                <option value="uthhan">Uthhan E-Commerce</option>
                                <option value="other">Other Services</option>
                            </select>
                            <p id="guidance-error" class="text-xs text-red-400 mt-1 hidden"></p>
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label for="first_name" class="block text-sm font-medium text-slate-300">First Name</label>
                                <input type="text" id="first_name" name="first_name" class="mt-1 w-full rounded-lg border border-white/20 bg-gerg-800 px-4 py-3 text-white placeholder-slate-500 focus:border-gerg-500 focus:outline-none focus:ring-1 focus:ring-gerg-500" placeholder="First name">
                                <p id="first_name-error" class="text-xs text-red-400 mt-1 hidden"></p>
                            </div>
                            <div>
                                <label for="last_name" class="block text-sm font-medium text-slate-300">Last Name</label>
                                <input type="text" id="last_name" name="last_name" class="mt-1 w-full rounded-lg border border-white/20 bg-gerg-800 px-4 py-3 text-white placeholder-slate-500 focus:border-gerg-500 focus:outline-none focus:ring-1 focus:ring-gerg-500" placeholder="Last name">
                                <p id="last_name-error" class="text-xs text-red-400 mt-1 hidden"></p>
                            </div>
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label for="phone" class="block text-sm font-medium text-slate-300">Phone</label>
                                <input type="tel" id="phone" name="phone" class="mt-1 w-full rounded-lg border border-white/20 bg-gerg-800 px-4 py-3 text-white placeholder-slate-500 focus:border-gerg-500 focus:outline-none focus:ring-1 focus:ring-gerg-500" placeholder="10 digit phone number">
                                <p id="phone-error" class="text-xs text-red-400 mt-1 hidden"></p>
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-slate-300">Email</label>
                                <input type="email" id="email" name="email" class="mt-1 w-full rounded-lg border border-white/20 bg-gerg-800 px-4 py-3 text-white placeholder-slate-500 focus:border-gerg-500 focus:outline-none focus:ring-1 focus:ring-gerg-500" placeholder="you@email.com">
                                <p id="email-error" class="text-xs text-red-400 mt-1 hidden"></p>
                            </div>
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-medium text-slate-300">Message</label>
                            <textarea id="message" name="message" rows="4" class="mt-1 w-full rounded-lg border border-white/20 bg-gerg-800 px-4 py-3 text-white placeholder-slate-500 focus:border-gerg-500 focus:outline-none focus:ring-1 focus:ring-gerg-500" placeholder="How can we help?"></textarea>
                            <p id="message-error" class="text-xs text-red-400 mt-1 hidden"></p>
                        </div>
                        <button type="submit" id="submit-btn" class="btn-primary w-full">Request Quote</button>
                    </div>
                </form>

                <script>
                    document.getElementById('meeting-form').addEventListener('submit', async function(e) {
                        e.preventDefault();

                        const form = e.target;
                        const submitBtn = document.getElementById('submit-btn');
                        const formSuccess = document.getElementById('form-success');
                        const formErrors = document.getElementById('form-errors');

                        const errorElements = ['first_name', 'last_name', 'email', 'phone', 'guidance', 'message'];
                        errorElements.forEach(field => {
                            const errorEl = document.getElementById(field + '-error');
                            const inputEl = document.getElementById(field);
                            if (errorEl) errorEl.classList.add('hidden');
                            if (inputEl) inputEl.classList.remove('border-red-500');
                        });

                        formSuccess.classList.add('hidden');
                        formErrors.classList.add('hidden');

                        submitBtn.disabled = true;
                        submitBtn.innerHTML = 'Submitting...';

                        const formData = new FormData(form);

                        try {
                            const response = await fetch('{{ route("meeting.store") }}', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                },
                                body: formData
                            });

                            if (!response.ok) {
                                const errorData = await response.json();
                                if (errorData.errors) {
                                    Object.keys(errorData.errors).forEach(field => {
                                        const errorEl = document.getElementById(field + '-error');
                                        const inputEl = document.getElementById(field);
                                        if (errorEl && inputEl) {
                                            errorEl.textContent = errorData.errors[field][0];
                                            errorEl.classList.remove('hidden');
                                            inputEl.classList.add('border-red-500');
                                        }
                                    });
                                } else {
                                    formErrors.textContent = 'Something went wrong. Please try again.';
                                    formErrors.classList.remove('hidden');
                                }
                            } else {
                                const data = await response.json();
                                if (data.success) {
                                    formSuccess.textContent = data.message;
                                    formSuccess.classList.remove('hidden');
                                    form.reset();
                                }
                            }
                        } catch (error) {
                            formErrors.textContent = 'Something went wrong. Please try again.';
                            formErrors.classList.remove('hidden');
                        } finally {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'Request Quote';
                        }
                    });
                </script>
            </div>
        </div>
    </section>
@endsection