@extends('layouts.app')

@section('title', $page->title)

@push('styles')
@if($page->compiled_css)
<style>{!! $page->compiled_css !!}</style>
@endif
@endpush

@section('content')
@if($page->body_html)
    {{-- Builder-rendered body (drag-and-drop output) --}}
    <div class="landing-builder-output">{!! $page->body_html !!}</div>
@else
<section class="relative overflow-hidden">
    @if($page->hero_image_url)
        <div class="absolute inset-0 -z-10">
            <img src="{{ $page->hero_image_url }}" alt="" class="w-full h-full object-cover opacity-30">
            <div class="absolute inset-0 bg-gradient-to-b from-gray-950/70 via-gray-950/85 to-gray-950"></div>
        </div>
    @else
        <div class="absolute inset-0 -z-10 bg-gradient-to-br from-gray-950 via-red-950/30 to-gray-950"></div>
    @endif

    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 text-center">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight">
            {{ $page->headline }}
        </h1>
        @if($page->subheadline)
        <p class="mt-4 text-lg text-gray-300 max-w-2xl mx-auto">{{ $page->subheadline }}</p>
        @endif
    </div>
</section>
@endif

{{-- The signup form is appended after the builder content. --}}
<section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="max-w-md mx-auto bg-gradient-to-br from-gray-900/80 to-gray-950/80 backdrop-blur border border-gray-800 rounded-2xl p-6 shadow-2xl shadow-red-900/20">
        @if(session('success'))
            <div class="mb-4 p-3 rounded-lg bg-emerald-900/30 border border-emerald-700/50 text-emerald-300 text-sm">{{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ route('landing.subscribe', $page->slug) }}" class="space-y-3 text-left">
            @csrf

            <div class="grid grid-cols-2 gap-2">
                <input type="text" name="first_name" placeholder="First name"
                       value="{{ old('first_name') }}"
                       class="px-3 py-2.5 rounded-lg bg-gray-950 border border-gray-700 text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
                <input type="text" name="last_name" placeholder="Last name"
                       value="{{ old('last_name') }}"
                       class="px-3 py-2.5 rounded-lg bg-gray-950 border border-gray-700 text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
            </div>
            <input type="email" name="email" required placeholder="you@example.com"
                   value="{{ old('email') }}"
                   class="w-full px-3 py-2.5 rounded-lg bg-gray-950 border border-gray-700 text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">

            {{-- honeypot --}}
            <div class="absolute opacity-0 -z-10" aria-hidden="true">
                <input type="text" name="website" tabindex="-1" autocomplete="off">
            </div>

            @error('email')<p class="text-xs text-red-400">{{ $message }}</p>@enderror

            <button type="submit"
                    class="w-full py-3 px-4 bg-red-600 hover:bg-red-500 text-white font-semibold rounded-lg shadow-lg shadow-red-900/40 transition-all hover:-translate-y-0.5">
                {{ $page->cta_button_text }}
            </button>
            <p class="text-xs text-gray-500 text-center">No spam. Unsubscribe anytime with one click.</p>
        </form>
    </div>
</section>
@endsection