@extends('layouts.app')

@section('title', 'Stateless Local Time Linker - 100 Toolbox')
@section('meta_description',
    'Create shareable event links that automatically display in the viewer\'s local time zone.
    No timezone math required. Perfect for international meetings.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-12" x-data="localTimeTool()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Stateless Local Time Linker</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Share a time, let the link handle the time zones.
                <span class="text-indigo-400 font-medium">Zero database, 100% client-side.</span>
            </p>
        </div>

        <!-- Mode Switcher (Implicit based on URL) -->
        <div class="relative">

            <!-- CREATOR MODE -->
            <div x-show="mode === 'create'" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0">
                <div class="bg-slate-900/50 border border-white/10 rounded-3xl p-8 space-y-8">

                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-slate-400">Event Name</label>
                        <input type="text" x-model="eventName"
                            placeholder="e.g., Project Kickoff, Coffee Chat, Raid Night"
                            class="w-full bg-slate-950 border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors">
                    </div>

                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-slate-400">Your Date & Time (Local)</label>
                        <input type="datetime-local" x-model="eventTime"
                            class="w-full bg-slate-950 border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors [color-scheme:dark]">
                    </div>

                    <button @click="generateLink" :disabled="!eventName || !eventTime"
                        class="w-full bg-indigo-500 hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-indigo-500/20 transform hover:-translate-y-0.5">
                        Generate Shareable Link
                    </button>

                    <!-- Result Link -->
                    <div x-show="generatedLink" class="space-y-4 pt-4 border-t border-white/5" x-cloak x-transition>
                        <label class="block text-sm font-medium text-emerald-400">Your Link is Ready!</label>
                        <div class="flex gap-2">
                            <input type="text" readonly :value="generatedLink"
                                class="flex-grow bg-slate-950 border-emerald-500/30 rounded-xl px-4 py-3 text-slate-300 font-mono text-sm focus:outline-none focus:border-emerald-500">
                            <button @click="copyLink"
                                class="bg-slate-800 hover:bg-slate-700 text-white px-6 rounded-xl transition-colors font-medium">
                                <span x-show="!copied">Copy</span>
                                <span x-show="copied" class="text-emerald-400" x-cloak>Copied!</span>
                            </button>
                        </div>
                        <p class="text-xs text-slate-500">Send this link to anyone. They will see the time in THEIR local
                            time zone.</p>
                    </div>

                </div>
            </div>

            <!-- VIEWER MODE -->
            <div x-show="mode === 'view'" x-cloak x-transition:enter="transition ease-out duration-500"
                x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                <div
                    class="bg-indigo-900/10 border border-indigo-500/20 rounded-3xl p-8 md:p-12 text-center space-y-8 relative overflow-hidden">

                    <!-- Background decoration -->
                    <div
                        class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-50">
                    </div>

                    <div>
                        <div
                            class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-xs font-bold uppercase tracking-wider mb-4">
                            Event Invitation
                        </div>
                        <h2 class="text-4xl md:text-6xl font-extrabold text-white mb-2 leading-tight"
                            x-text="viewEventName"></h2>
                    </div>

                    <div class="bg-slate-950/50 rounded-2xl p-6 border border-white/5 inline-block w-full max-w-lg mx-auto">
                        <p class="text-slate-400 text-sm uppercase tracking-wider font-bold mb-2">When</p>
                        <div class="text-3xl md:text-4xl font-mono text-white mb-1" x-text="viewLocalTime"></div>
                        <div class="text-indigo-400 font-medium" x-text="viewLocalDate"></div>
                        <div class="text-xs text-slate-500 mt-4 pt-4 border-t border-white/5">
                            (This is your local time: <span x-text="userTimezone"></span>)
                        </div>
                    </div>

                    <div>
                        <a href="{{ route('tools.local-time') }}"
                            class="text-slate-400 hover:text-white text-sm font-medium transition-colors border-b border-white/10 hover:border-white pb-0.5">
                            Create your own event link
                        </a>
                    </div>

                </div>
            </div>

        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('localTimeTool', () => ({
                mode: 'create', // 'create' or 'view'

                // Creator State
                eventName: '',
                eventTime: '',
                generatedLink: '',
                copied: false,

                // Viewer State
                viewEventName: '',
                viewLocalTime: '',
                viewLocalDate: '',
                userTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,

                init() {
                    const params = new URLSearchParams(window.location.search);
                    const event = params.get('event');
                    const timestamp = params.get('t');

                    if (event && timestamp) {
                        this.mode = 'view';
                        this.viewEventName = decodeURIComponent(event);
                        this.renderViewerTime(parseInt(timestamp));
                    } else {
                        // Set default time to now for creator
                        const now = new Date();
                        now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
                        this.eventTime = now.toISOString().slice(0, 16);
                    }
                },

                generateLink() {
                    if (!this.eventName || !this.eventTime) return;

                    const date = new Date(this.eventTime);
                    const timestamp = Math.floor(date.getTime() / 1000);

                    const url = new URL(window.location.href);
                    url.searchParams.set('event', this.eventName);
                    url.searchParams.set('t', timestamp);

                    this.generatedLink = url.toString();
                },

                copyLink() {
                    navigator.clipboard.writeText(this.generatedLink);
                    this.copied = true;
                    setTimeout(() => this.copied = false, 2000);
                },

                renderViewerTime(timestamp) {
                    const date = new Date(timestamp * 1000);

                    // Format: 10:00 AM
                    this.viewLocalTime = date.toLocaleTimeString(undefined, {
                        hour: 'numeric',
                        minute: '2-digit',
                        hour12: true
                    });

                    // Format: Monday, March 14, 2026
                    this.viewLocalDate = date.toLocaleDateString(undefined, {
                        weekday: 'long',
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    });
                }
            }));
        });
    </script>
    <div class="mt-24 bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-white/5 relative overflow-hidden">
        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl"></div>

        <div class="relative z-10 grid md:grid-cols-2 gap-12">
            <div class="space-y-6">
                <h2 class="text-2xl font-bold text-white">Why use this tool?</h2>
                <p class="text-slate-400 leading-relaxed">
                    Scheduling calls across time zones is a headache. Sending "Let's meet at 2 PM PST" forces everyone to do
                    mental math.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    This tool creates a magic link that automatically shows the event time in the <strong>viewer's local
                        time zone</strong>. No math required.
                </p>
            </div>

            <div class="space-y-6">
                <h2 class="text-2xl font-bold text-white">Who is this for?</h2>
                <ul class="space-y-3 text-slate-400">
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-indigo-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span><strong>Remote Teams</strong> coordinating globally.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-indigo-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span><strong>Event Organizers</strong> simplifying invites.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-indigo-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span><strong>Freelancers</strong> booking client calls.</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="mt-12 pt-8 border-t border-white/5">
            <div class="flex items-center gap-4 text-sm text-indigo-300 bg-indigo-500/10 p-4 rounded-xl">
                <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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">
                    </path>
                </svg>
                <p>
                    <strong>Privacy Guarantee:</strong> Links are stateless. We don't save your event details in a database;
                    they are encoded directly into the URL itself.
                </p>
            </div>
        </div>
    </div>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.meeting.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Golden
                Hour Meeting Planner</a>
            <a href="{{ route('tools.trial.alarm') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Free
                Trial Cancellation Reminder</a>
        </div>
    </div>
@endsection