<x-site-layout title="MITH Studios — Record. Mix. Master. Release.">

    @php $heroImage = $galleryImages->first(); @endphp

    {{-- Hero: headline left, spray-framed studio photo right --}}
    <section class="overflow-hidden border-b border-ink-700">
        <div class="mx-auto grid max-w-7xl gap-14 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8 lg:py-24">
            <div>
                <p class="font-mono text-xs uppercase tracking-[0.25em] text-amber-500">
                    Professional sound. Creative vibes.
                </p>
                <h1 class="mt-6 text-6xl uppercase leading-[0.92] text-stone-50 sm:text-7xl lg:text-8xl">
                    Record.<br>Mix.<br>Master.<br>Release.
                </h1>
                <p class="mt-6 max-w-md text-lg text-stone-400">
                    High quality studio time for artists who take their sound seriously.
                </p>
                <div class="mt-9 flex flex-wrap gap-3">
                    <a href="{{ route('packages') }}"
                       class="rounded-md bg-amber-500 px-6 py-3 text-sm font-bold uppercase tracking-widest text-ink-950 hover:bg-amber-400">
                        View packages
                    </a>
                    <a href="{{ route('book') }}"
                       class="rounded-md border-2 border-amber-500 px-6 py-3 text-sm font-bold uppercase tracking-widest text-amber-400 hover:bg-amber-500/10">
                        Book now
                    </a>
                </div>
            </div>

            <div class="spray-corners mx-6 lg:mx-0">
                <div class="overflow-hidden rounded-lg border-[3px] border-amber-500 shadow-[0_0_80px_rgba(232,137,26,0.18)]">
                    @if ($heroImage)
                        <img src="{{ $heroImage->url() }}" alt="{{ $heroImage->title }}"
                             class="aspect-[4/3] w-full object-cover">
                    @else
                        <div class="grid aspect-[4/3] w-full place-items-center bg-gradient-to-br from-ink-600 via-ink-800 to-ink-950">
                            <div class="text-center">
                                <x-logo size="lg" class="mx-auto" />
                                <p class="mt-6 font-mono text-[10px] uppercase tracking-widest text-stone-400">
                                    Studio photography — add in Admin &rsaquo; Gallery
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Built for artists --}}
    <section class="border-b border-ink-700 bg-ink-900/40">
        <div class="mx-auto grid max-w-7xl gap-12 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
            <div class="overflow-hidden rounded-lg border border-ink-700">
                @if ($galleryImages->count() > 1)
                    <img src="{{ $galleryImages[1]->url() }}" alt="{{ $galleryImages[1]->title }}"
                         class="aspect-[4/3] w-full object-cover">
                @else
                    <div class="grid aspect-[4/3] w-full place-items-center bg-gradient-to-tr from-ink-800 via-ink-900 to-ink-700">
                        <span class="font-mono text-[10px] uppercase tracking-widest text-stone-400">Inside the live room</span>
                    </div>
                @endif
            </div>

            <div>
                <p class="font-mono text-xs uppercase tracking-[0.25em] text-amber-500">Welcome to MITH Studios</p>
                <h2 class="mt-4 text-4xl uppercase text-stone-50 sm:text-5xl">Built for artists.</h2>
                <p class="mt-5 max-w-lg text-stone-400">
                    MITH Studios is a professional recording studio designed for artists, by
                    artists. From tracking to final master, we provide the tools, vibes and
                    expertise to bring your vision to life.
                </p>

                <ul class="mt-8 grid list-none gap-6 p-0 sm:grid-cols-2">
                    @php
                        $features = [
                            ['label' => 'Industry standard equipment', 'icon' => '<path d="M6 4v7m0 4v5M12 4v3m0 4v9M18 4v11m0 4v1"/><circle cx="6" cy="13" r="1.8"/><circle cx="12" cy="9" r="1.8"/><circle cx="18" cy="17" r="1.8"/>'],
                            ['label' => 'Experienced engineers', 'icon' => '<path d="M4 14v-2a8 8 0 0 1 16 0v2"/><rect x="3" y="14" width="4" height="6" rx="1.5"/><rect x="17" y="14" width="4" height="6" rx="1.5"/>'],
                            ['label' => 'Creative environment', 'icon' => '<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><circle cx="19" cy="17" r="1.4"/>'],
                            ['label' => 'Artist focused', 'icon' => '<rect x="9" y="3" width="6" height="10" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>'],
                        ];
                    @endphp
                    @foreach ($features as $feature)
                        <li class="flex items-center gap-3">
                            <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full border border-amber-500/50 text-amber-400">
                                <svg class="h-5 w-5" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
                                    {!! $feature['icon'] !!}
                                </svg>
                            </span>
                            <span class="text-sm font-semibold text-stone-200">{{ $feature['label'] }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>

    {{-- The rooms — priced from the same records the booking engine uses --}}
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8" aria-labelledby="rooms-heading">
        <h2 id="rooms-heading" class="font-mono text-xs uppercase tracking-[0.25em] text-amber-500">The rooms</h2>
        <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($rooms as $room)
                <div class="rounded-lg border border-ink-700 bg-ink-900 p-5">
                    <h3 class="font-display text-xl uppercase tracking-wide text-stone-100">{{ $room->name }}</h3>
                    <div class="mt-1 text-sm text-stone-400">{{ $room->description }}</div>
                    <div class="mt-4 font-mono text-amber-400">
                        @if ($room->isDayRate())
                            £{{ number_format((float) $room->day_rate, 0) }}
                            <span class="text-xs text-stone-400">/ {{ $room->day_length_hours }}h day</span>
                        @else
                            £{{ number_format((float) $room->hourly_rate, 0) }}
                            <span class="text-xs text-stone-400">/ hour</span>
                        @endif
                    </div>
                    @if ($room->hourly_rate_with_engineer)
                        <div class="mt-1 font-mono text-sm text-stone-400">
                            £{{ number_format((float) $room->hourly_rate_with_engineer, 0) }}
                            <span class="text-xs text-stone-400">/ hour with an engineer</span>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
        <p class="mt-4 text-xs text-stone-400">
            Minimum two hours in Studios A, B and C. Sessions need 24 hours notice.
        </p>
    </section>

    {{-- Packages --}}
    <section class="border-y border-ink-700 bg-ink-900/40">
        <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
            <h2 class="text-center text-4xl uppercase text-stone-50">Choose your package</h2>

            <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                @foreach ($packages as $package)
                    @php $popular = $package->slug === 'pro-artist'; @endphp
                    <div class="relative flex flex-col rounded-lg border p-5 {{ $popular ? 'border-amber-500 bg-amber-500/5' : 'border-ink-700 bg-ink-900' }}">
                        @if ($popular)
                            <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-amber-500 px-3 py-1 font-mono text-[9px] font-bold uppercase tracking-widest text-ink-950">
                                Most popular
                            </span>
                        @endif

                        <h3 class="font-display text-lg uppercase tracking-wide text-stone-100">{{ $package->name }}</h3>
                        <div class="mt-2 font-display text-3xl text-amber-400">£{{ number_format((float) $package->price, 0) }}</div>
                        <div class="mt-1 border-b border-ink-700 pb-3 text-xs uppercase tracking-wider text-stone-400">
                            {{ $package->studio_hours }} hours studio time
                        </div>

                        <ul class="mt-4 flex-1 space-y-1.5 text-xs text-stone-400">
                            <li class="flex gap-2"><span class="text-amber-500">&bull;</span>
                                @if ($package->engineer_hours < $package->studio_hours)
                                    Engineer for {{ $package->engineer_hours }} of the {{ $package->studio_hours }}
                                @else
                                    Engineer included
                                @endif
                            </li>
                            <li class="flex gap-2"><span class="text-amber-500">&bull;</span>
                                {{ $package->mixmaster_credits }} {{ Str::plural('track', $package->mixmaster_credits) }} mixed &amp; mastered
                            </li>
                            @if ($package->skips_lead_time)
                                <li class="flex gap-2"><span class="text-amber-500">&bull;</span> Priority booking</li>
                            @endif
                            @if ($package->staff_per_session > 1)
                                <li class="flex gap-2"><span class="text-amber-500">&bull;</span> {{ $package->staff_per_session }} people on every session</li>
                            @endif
                            <li class="flex gap-2"><span class="text-amber-500">&bull;</span> Valid {{ $package->validity_days }} days</li>
                        </ul>

                        <a href="{{ route('packages') }}#{{ $package->slug }}"
                           class="mt-5 block rounded-md px-3 py-2.5 text-center text-xs font-bold uppercase tracking-widest
                            {{ $popular ? 'bg-amber-500 text-ink-950 hover:bg-amber-400' : 'border border-ink-600 text-stone-200 hover:border-amber-500' }}">
                            Select
                        </a>
                    </div>
                @endforeach
            </div>

            <p class="mt-6 text-center text-xs text-stone-400">
                Custom packages available.
                <a href="mailto:{{ config('studio.contact.email') }}" class="text-amber-400 hover:underline">Contact us</a>
                for more info.
            </p>
        </div>
    </section>

    {{-- Inside MITH Studios — gallery strip --}}
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8" aria-labelledby="gallery-heading">
        <h2 id="gallery-heading" class="font-mono text-xs uppercase tracking-[0.25em] text-amber-500">Inside MITH Studios</h2>

        <div class="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($galleryImages as $image)
                <a href="{{ route('gallery') }}" class="group overflow-hidden rounded-lg border border-ink-700">
                    <img src="{{ $image->url() }}" alt="{{ $image->title }}"
                         class="aspect-[4/3] w-full object-cover transition duration-300 group-hover:scale-105">
                </a>
            @endforeach

            @for ($i = $galleryImages->count(); $i < 4; $i++)
                @php $placeholderLabels = ['Live room', 'Control room', 'Podcast suite', 'The lounge']; @endphp
                <div class="grid aspect-[4/3] place-items-center rounded-lg border border-dashed border-ink-600 bg-gradient-to-br from-ink-800 to-ink-950">
                    <div class="text-center">
                        <p class="font-display text-sm uppercase tracking-wide text-stone-300">{{ $placeholderLabels[$i] }}</p>
                        <p class="mt-1 font-mono text-[10px] uppercase tracking-widest text-stone-400">Photo coming soon</p>
                    </div>
                </div>
            @endfor
        </div>

        <div class="mt-8 text-center">
            <a href="{{ route('gallery') }}"
               class="inline-block rounded-md border border-ink-600 px-6 py-3 text-xs font-bold uppercase tracking-widest text-stone-200 hover:border-amber-500 hover:text-amber-400">
                View full gallery
            </a>
        </div>
    </section>

    {{-- Why + testimonial --}}
    <section class="border-t border-ink-700 bg-ink-900/40">
        <div class="mx-auto grid max-w-7xl gap-12 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:px-8">
            <div>
                <h2 class="text-3xl uppercase text-stone-50">Why artists choose MITH</h2>
                <ul class="mt-7 space-y-4">
                    @foreach ([
                        'High end equipment',
                        'Top tier engineers',
                        'Creative & comfortable vibes',
                        'Fast turnaround',
                        'Trusted by independent artists',
                    ] as $point)
                        <li class="flex items-center gap-3 text-stone-300">
                            <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-amber-500 text-amber-400">
                                <svg class="h-3.5 w-3.5" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M5 12.5l4.5 4.5L19 7.5"/>
                                </svg>
                            </span>
                            {{ $point }}
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="flex flex-col justify-center rounded-lg border border-ink-700 bg-ink-900 p-8">
                <h2 class="text-2xl uppercase text-stone-50">What artists say</h2>
                <blockquote class="mt-5 text-lg text-stone-300">
                    &ldquo;The vibe is unreal and the sound is even better. MITH Studios helped
                    bring my vision to life.&rdquo;
                </blockquote>
                <div class="mt-4 flex gap-1 text-amber-400" role="img" aria-label="Rated 5 out of 5">
                    @for ($i = 0; $i < 5; $i++)
                        <svg class="h-5 w-5" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17l-6.1 3.6 1.4-6.8L2.2 9.1l6.9-.8z"/>
                        </svg>
                    @endfor
                </div>
                <div class="mt-3 font-mono text-xs uppercase tracking-widest text-stone-400">— Jay Kay</div>
            </div>
        </div>
    </section>

    {{-- CTA. overflow-hidden because the spray splatter hangs outside the
         card and would otherwise widen the page on mobile. --}}
    <section class="mx-auto max-w-7xl overflow-hidden px-4 py-16 sm:px-6 lg:px-8">
        <div class="spray-corners">
            <div class="rounded-lg border-2 border-amber-500/60 bg-ink-900 p-10 text-center">
                <h2 class="text-3xl uppercase text-stone-50 sm:text-4xl">Ready to bring your sound to life?</h2>
                <p class="mx-auto mt-3 max-w-xl text-stone-400">
                    Create your account to book sessions, manage your projects and more.
                </p>
                <div class="mt-7 flex flex-wrap justify-center gap-3">
                    @auth
                        <a href="{{ route('book') }}"
                           class="rounded-md bg-amber-500 px-6 py-3 text-sm font-bold uppercase tracking-widest text-ink-950 hover:bg-amber-400">
                            Book a session
                        </a>
                    @else
                        <a href="{{ route('register') }}"
                           class="rounded-md bg-amber-500 px-6 py-3 text-sm font-bold uppercase tracking-widest text-ink-950 hover:bg-amber-400">
                            Sign up now
                        </a>
                        <a href="{{ route('login') }}"
                           class="rounded-md border border-ink-600 px-6 py-3 text-sm font-bold uppercase tracking-widest text-stone-200 hover:border-amber-500">
                            Log in
                        </a>
                    @endauth
                </div>
            </div>
        </div>
    </section>
</x-site-layout>
