@extends('layouts.public')

@section('content')
    <section class="flex min-h-[calc(100dvh-14rem)] flex-col border-b border-amare-border bg-amare-bg" data-motion="page-open">
        <div class="container-amare grid flex-1 content-start gap-12 py-16 md:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)] md:py-24">
            <div class="space-y-6" data-motion-beat="heading">
                <p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Vamos conversar</p>
                <h1 class="text-headline font-medium tracking-tight text-amare-text">Todo grande encontro começa com uma boa conversa.</h1>
                <p class="max-w-2xl text-lg text-amare-muted">
                    Conte sobre o seu evento no briefing abaixo. Retornaremos com uma proposta sob medida e sem compromisso.
                </p>
            </div>

            <div class="space-y-4 border-t border-amare-border pt-6 text-amare-muted md:border-t-0 md:border-l md:pt-0 md:pl-10" data-reveal-group>
                <p data-reveal data-reveal-from="up">{{ $siteSettings->city ?: 'São Paulo - SP' }}</p>
                @if ($siteSettings->email)
                    <p data-reveal data-reveal-from="up">
                        <a href="mailto:{{ $siteSettings->email }}" class="inline-flex max-w-full min-h-11 items-center text-amare-accent transition-colors hover:text-amare-accent-deep"><span class="min-w-0 break-words">{{ $siteSettings->email }}</span></a>
                    </p>
                @endif
                @if ($siteSettings->phone)
                    <p data-reveal data-reveal-from="up">
                        <a href="tel:{{ preg_replace('/\D/', '', (string) $siteSettings->phone) }}" class="inline-flex max-w-full min-h-11 items-center text-amare-accent transition-colors hover:text-amare-accent-deep"><span class="min-w-0 break-words">{{ $siteSettings->phone }}</span></a>
                    </p>
                @endif
                @foreach ($siteSettings->social_links ?? [] as $network => $url)
                    @if (filled($url))
                        <p data-reveal data-reveal-from="up">
                            <a href="{{ $url }}" class="inline-flex max-w-full min-h-11 items-center text-amare-accent transition-colors hover:text-amare-accent-deep" rel="noopener noreferrer" target="_blank"><span class="min-w-0 break-words">{{ ucfirst((string) $network) }}</span></a>
                        </p>
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    <section class="border-b border-amare-border bg-amare-bg" aria-labelledby="briefing-heading">
        <div class="container-amare py-16 md:py-24" data-reveal-group>
            <h2 id="briefing-heading" class="text-2xl font-medium tracking-tight text-amare-text md:text-3xl" data-reveal data-reveal-from="up">Briefing de contato</h2>
            <p class="mt-2 max-w-2xl text-amare-muted" data-reveal data-reveal-from="up">
                Preencha os campos abaixo. As informações obrigatórias estão marcadas com asterisco (*).
            </p>

            @if (session('status') === 'briefing-sent')
                <div role="status" class="alert mt-8 border border-amare-border bg-amare-bg-deep">
                    <p class="font-semibold text-amare-text">Mensagem enviada.</p>
                    <p class="mt-1 text-amare-muted">Recebemos seu briefing e retornaremos em breve pelo canal informado.</p>
                </div>
            @else
                <form
                    method="POST"
                    action="{{ route('briefing.store') }}"
                    class="mt-10 max-w-3xl space-y-10"
                    data-contact-form
                >
                    @csrf

                    <div class="honeypot" aria-hidden="true">
                        <label for="empresa">Não preencha este campo</label>
                        <input type="text" id="empresa" name="empresa" tabindex="-1" autocomplete="off">
                    </div>

                    @if ($errors->any())
                        <div role="alert" class="alert alert-error border border-amare-error/40">
                            <p class="font-semibold text-amare-error">Não foi possível enviar.</p>
                            <p class="mt-1 text-sm text-amare-muted">Revise os campos destacados abaixo e tente novamente.</p>
                        </div>
                    @endif

                    <div class="grid gap-8 sm:grid-cols-2">
                        <div>
                            <label for="nome" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Nome completo *</label>
                            <input
                                type="text"
                                id="nome"
                                name="nome"
                                value="{{ old('nome') }}"
                                required
                                autocomplete="name"
                                maxlength="120"
                                placeholder="Seu nome"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('nome') input-error @enderror"
                                @error('nome') aria-invalid="true" aria-describedby="nome-error" @enderror
                            >
                            @error('nome')
                                <p id="nome-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="email" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">E-mail *</label>
                            <input
                                type="email"
                                id="email"
                                name="email"
                                value="{{ old('email') }}"
                                required
                                autocomplete="email"
                                maxlength="254"
                                placeholder="voce@email.com"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('email') input-error @enderror"
                                @error('email') aria-invalid="true" aria-describedby="email-error" @enderror
                            >
                            @error('email')
                                <p id="email-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="telefone" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Telefone/WhatsApp *</label>
                            <input
                                type="tel"
                                id="telefone"
                                name="telefone"
                                value="{{ old('telefone') }}"
                                required
                                autocomplete="tel"
                                maxlength="40"
                                placeholder="(11) 90000-0000"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('telefone') input-error @enderror"
                                @error('telefone') aria-invalid="true" aria-describedby="telefone-error" @enderror
                            >
                            @error('telefone')
                                <p id="telefone-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="tipo_evento" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Tipo de evento *</label>
                            <select
                                id="tipo_evento"
                                name="tipo_evento"
                                required
                                class="select w-full text-amare-text @error('tipo_evento') select-error @enderror"
                                @error('tipo_evento') aria-invalid="true" aria-describedby="tipo_evento-error" @enderror
                            >
                                <option value="" selected disabled>Selecione...</option>
                                <option value="Casamento" @selected(old('tipo_evento', request('tipo_evento')) === 'Casamento')>Casamento</option>
                                <option value="Evento corporativo" @selected(old('tipo_evento', request('tipo_evento')) === 'Evento corporativo')>Evento corporativo</option>
                                <option value="Celebração intimista" @selected(old('tipo_evento') === 'Celebração intimista')>Celebração intimista</option>
                                <option value="Outro" @selected(old('tipo_evento') === 'Outro')>Outro tipo de evento</option>
                            </select>
                            @error('tipo_evento')
                                <p id="tipo_evento-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="data_periodo" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Data ou período desejado</label>
                            <input
                                type="text"
                                id="data_periodo"
                                name="data_periodo"
                                value="{{ old('data_periodo') }}"
                                maxlength="80"
                                placeholder="Ex.: novembro de 2027"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('data_periodo') input-error @enderror"
                                @error('data_periodo') aria-invalid="true" aria-describedby="data_periodo-error" @enderror
                            >
                            @error('data_periodo')
                                <p id="data_periodo-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="cidade" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Cidade do evento *</label>
                            <input
                                type="text"
                                id="cidade"
                                name="cidade"
                                value="{{ old('cidade') }}"
                                required
                                maxlength="80"
                                placeholder="Ex.: São Paulo"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('cidade') input-error @enderror"
                                @error('cidade') aria-invalid="true" aria-describedby="cidade-error" @enderror
                            >
                            @error('cidade')
                                <p id="cidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="convidados" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Número estimado de convidados</label>
                            <input
                                type="number"
                                id="convidados"
                                name="convidados"
                                value="{{ old('convidados') }}"
                                min="1"
                                max="100000"
                                inputmode="numeric"
                                autocomplete="off"
                                placeholder="Ex.: 120"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('convidados') input-error @enderror"
                                @error('convidados') aria-invalid="true" aria-describedby="convidados-error" @enderror
                            >
                            @error('convidados')
                                <p id="convidados-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="servico_interesse" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Serviço de interesse</label>
                            <input
                                type="text"
                                id="servico_interesse"
                                name="servico_interesse"
                                value="{{ old('servico_interesse', request('servico_interesse')) }}"
                                maxlength="120"
                                placeholder="Ex.: planejamento completo"
                                class="input w-full text-amare-text placeholder:text-amare-muted/60 @error('servico_interesse') input-error @enderror"
                                @error('servico_interesse') aria-invalid="true" aria-describedby="servico_interesse-error" @enderror
                            >
                            @error('servico_interesse')
                                <p id="servico_interesse-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="mensagem" class="mb-2 block text-xs font-semibold uppercase tracking-[0.14em] text-amare-text">Mensagem / principal preocupação *</label>
                        <textarea
                            id="mensagem"
                            name="mensagem"
                            required
                            rows="6"
                            maxlength="3000"
                            placeholder="Conte sobre o seu evento, expectativas e principais preocupações."
                            class="textarea w-full text-amare-text placeholder:text-amare-muted/60 @error('mensagem') textarea-error @enderror"
                            @error('mensagem') aria-invalid="true" aria-describedby="mensagem-error" @enderror
                        >{{ old('mensagem') }}</textarea>
                        @error('mensagem')
                            <p id="mensagem-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="privacidade" class="flex items-start gap-3 py-2">
                            <input
                                type="checkbox"
                                id="privacidade"
                                name="privacidade"
                                value="1"
                                required
                                @checked(old('privacidade'))
                                class="checkbox checkbox-primary mt-1 shrink-0"
                                @error('privacidade') aria-invalid="true" aria-describedby="privacidade-error" @enderror
                            >
                            <span class="text-sm text-amare-muted">
                                Li e aceito a
                                <a href="{{ route('privacy') }}" class="text-amare-accent underline underline-offset-2 transition-colors hover:text-amare-accent-deep">política de privacidade</a>
                                e autorizo o tratamento dos meus dados para fins de atendimento.*
                            </span>
                        </label>
                        @error('privacidade')
                            <p id="privacidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex flex-col items-start gap-4">
                        <button
                            type="submit"
                            data-submit-button
                            class="btn btn-primary min-h-11 px-8 text-sm font-semibold uppercase tracking-[0.12em]"
                        >
                            Enviar briefing
                        </button>
                        <p class="text-sm text-amare-muted">
                            * Campos obrigatórios. Seus dados são usados apenas para responder à sua solicitação.
                        </p>
                    </div>
                </form>
            @endif
        </div>
    </section>
@endsection