@extends('layouts.app')

@section('content')
    <div class="relative isolate overflow-hidden">
        <div class="absolute inset-x-0 top-0 -z-10 h-[34rem] bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.16),transparent_45%),radial-gradient(circle_at_top_left,rgba(99,102,241,0.16),transparent_42%)]"></div>

        <div class="mx-auto grid max-w-7xl gap-16 px-6 py-20 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:px-8 lg:py-28">
            <div>
                <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-cyan-300/20 bg-cyan-300/10 px-3 py-1 text-xs font-medium uppercase tracking-[0.18em] text-cyan-200">
                    <span class="size-1.5 rounded-full bg-cyan-300"></span>
                    HTTP request workspace
                </div>
                <h1 class="max-w-3xl text-4xl font-semibold tracking-tight text-white sm:text-6xl">
                    See every webhook exactly as it arrives.
                </h1>
                <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                    Create a temporary endpoint, send it requests from any service, and inspect headers, query data and payloads in one focused workspace.
                </p>

                <div class="mt-10 flex flex-wrap items-center gap-4">
                    <form action="{{ route('inspectors.store') }}" method="POST">
                        @csrf
                        <button type="submit" class="rounded-xl bg-cyan-400 px-5 py-3 font-semibold text-slate-950 shadow-lg shadow-cyan-950/30 transition hover:bg-cyan-300">
                            Create test URL
                        </button>
                    </form>
                    @guest
                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="rounded-xl border border-white/15 px-5 py-3 font-medium text-white transition hover:border-cyan-300/50 hover:text-cyan-200">Create a private workspace</a>
                        @endif
                    @endguest
                </div>
            </div>

            <div class="rounded-3xl border border-white/10 bg-slate-900/80 p-5 shadow-2xl shadow-black/30 backdrop-blur sm:p-6">
                <div class="flex items-center justify-between border-b border-white/10 pb-4">
                    <div class="flex items-center gap-2 text-sm font-medium text-slate-200">
                        <span class="size-2 rounded-full bg-emerald-400"></span>
                        Incoming request
                    </div>
                    <span class="font-mono text-xs text-slate-500">LIVE</span>
                </div>
                <div class="space-y-4 py-5 font-mono text-sm">
                    <div class="flex items-center justify-between gap-4"><span class="text-cyan-300">POST</span><span class="truncate text-slate-400">/hook/••••••••••••</span></div>
                    <div class="rounded-xl border border-white/10 bg-black/20 p-4 text-slate-300">
                        <div class="text-slate-500">content-type</div>
                        <div class="mt-1">application/json</div>
                        <div class="mt-4 text-slate-500">body</div>
                        <div class="mt-1 text-emerald-300">{ "event": "payment.created" }</div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-slate-500"><span>127.0.0.1</span><span>just now</span></div>
                </div>
            </div>
        </div>

        <div class="mx-auto grid max-w-7xl gap-4 px-6 pb-20 sm:grid-cols-3 lg:px-8">
            @foreach ([['Temporary URLs', 'Start without an account.'], ['Full request context', 'Headers, query and raw body.'], ['Live updates', 'Requests appear as they arrive.']] as [$title, $description])
                <div class="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
                    <h2 class="font-medium text-white">{{ $title }}</h2>
                    <p class="mt-2 text-sm leading-6 text-slate-400">{{ $description }}</p>
                </div>
            @endforeach
        </div>
    </div>
@endsection