@extends('site_builder.layouts.app')

@section('title', 'Marka · Sihirbaz')

@section('content')
    @include('site_builder.wizard._steps', ['current' => 2])

    <h1 class="font-display text-2xl font-semibold text-ink-900">Marka</h1>
    <p class="mt-2 text-sm text-ink-700">Sitenin adı ve renkleri — dilediğinde daha sonra değiştirebilirsin.</p>

    <form
        method="POST"
        action="{{ route('sitebuilder.wizard.branding.save') }}"
        class="mt-8 space-y-5"
        x-data="{
            primary: '{{ old('primary_color', $site->primary_color ?? '#7440c9') }}',
            accent: '{{ old('accent_color', $site->accent_color ?? '#cda23e') }}',
        }"
    >
        @csrf

        <div>
            <label for="brand_name" class="block text-sm font-medium text-ink-800">Marka Adı</label>
            <input
                type="text"
                name="brand_name"
                id="brand_name"
                value="{{ old('brand_name', $site->brand_name) }}"
                placeholder="Örn. Ay Yolu Astroloji"
                required
                class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
            >
            @error('brand_name')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
            <div>
                <label for="primary_color" class="block text-sm font-medium text-ink-800">Ana Renk</label>
                <div class="mt-1 flex items-center gap-3">
                    <input
                        type="color"
                        name="primary_color"
                        id="primary_color"
                        x-model="primary"
                        class="h-10 w-14 cursor-pointer rounded-lg border border-brand-200 bg-white p-1"
                    >
                    <span class="h-8 w-8 rounded-full border border-brand-200 shadow-sm" :style="`background:${primary}`"></span>
                    <span class="text-sm text-ink-700" x-text="primary"></span>
                </div>
                @error('primary_color')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="accent_color" class="block text-sm font-medium text-ink-800">Vurgu Rengi</label>
                <div class="mt-1 flex items-center gap-3">
                    <input
                        type="color"
                        name="accent_color"
                        id="accent_color"
                        x-model="accent"
                        class="h-10 w-14 cursor-pointer rounded-lg border border-brand-200 bg-white p-1"
                    >
                    <span class="h-8 w-8 rounded-full border border-brand-200 shadow-sm" :style="`background:${accent}`"></span>
                    <span class="text-sm text-ink-700" x-text="accent"></span>
                </div>
                @error('accent_color')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <button
            type="submit"
            class="w-full rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700 sm:w-auto"
        >
            Devam Et
        </button>
    </form>
@endsection