@props([])

<section
    aria-labelledby="briefing-heading"
    class="home-chapter border-b border-amare-border bg-amare-bg"
    data-chapter="contato"
    id="contato"
>
    <div class="container-amare grid gap-12 py-16 md:py-24 lg:grid-cols-[0.8fr_1.2fr] lg:gap-[80px]" data-reveal-group>
        <div class="flex flex-col gap-6" data-reveal data-reveal-from="up">
            <div class="space-y-4">
                <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">07 — Briefing comercial</p>
                <h2 id="briefing-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">Conte sobre o evento que você está imaginando.</h2>
            </div>
            <p class="max-w-[760px] text-[clamp(1.1875rem,2vw,1.5rem)] leading-[1.55] text-amare-text-muted">Este formulário é para potenciais clientes. Ele continua existindo mesmo com os CTAs dos pacotes: são portas de entrada complementares.</p>
            <p class="max-w-xl text-sm text-amare-muted">Para quem já sabe a modalidade, WhatsApp contextual. Para quem quer contextualizar o projeto, briefing. Para fornecedores/parcerias, outro fluxo.</p>
        </div>

        <form
            method="POST"
            action="{{ route('briefing.store') }}"
            class="flex flex-col gap-[18px]"
            data-contact-form
            data-reveal
            data-reveal-from="up"
        >
            @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-[18px] sm:grid-cols-2">
                <div>
                    <label for="briefing-nome" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Nome *</label>
                    <input
                        type="text"
                        id="briefing-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="briefing-nome-error" @enderror
                    >
                    @error('nome')
                        <p id="briefing-nome-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-email" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">E-mail *</label>
                    <input
                        type="email"
                        id="briefing-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="briefing-email-error" @enderror
                    >
                    @error('email')
                        <p id="briefing-email-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-telefone" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Telefone/WhatsApp *</label>
                    <input
                        type="tel"
                        id="briefing-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="briefing-telefone-error" @enderror
                    >
                    @error('telefone')
                        <p id="briefing-telefone-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-tipo_evento" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Tipo de evento *</label>
                    <select
                        id="briefing-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="briefing-tipo_evento-error" @enderror
                    >
                        <option value="" selected disabled>Selecione...</option>
                        <option value="Casamento" @selected(old('tipo_evento') === 'Casamento')>Casamento</option>
                        <option value="Evento corporativo" @selected(old('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="briefing-tipo_evento-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-data_periodo" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Data ou período desejado</label>
                    <input
                        type="text"
                        id="briefing-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="briefing-data_periodo-error" @enderror
                    >
                    @error('data_periodo')
                        <p id="briefing-data_periodo-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-cidade" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Cidade do evento *</label>
                    <input
                        type="text"
                        id="briefing-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="briefing-cidade-error" @enderror
                    >
                    @error('cidade')
                        <p id="briefing-cidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-convidados" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Número estimado de convidados</label>
                    <input
                        type="number"
                        id="briefing-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="briefing-convidados-error" @enderror
                    >
                    @error('convidados')
                        <p id="briefing-convidados-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="briefing-servico_interesse" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Serviço de interesse</label>
                    <input
                        type="text"
                        id="briefing-servico_interesse"
                        name="servico_interesse"
                        value="{{ old('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="briefing-servico_interesse-error" @enderror
                    >
                    @error('servico_interesse')
                        <p id="briefing-servico_interesse-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <label for="briefing-mensagem" class="mb-2 block text-xs font-bold uppercase tracking-[0.1em] text-amare-accent-deep">Mensagem / principal preocupação *</label>
                <textarea
                    id="briefing-mensagem"
                    name="mensagem"
                    required
                    rows="5"
                    maxlength="3000"
                    placeholder="O que já está definido? Em que ponto você precisa de ajuda?"
                    class="textarea w-full min-h-[110px] text-amare-text placeholder:text-amare-muted/60 @error('mensagem') textarea-error @enderror"
                    @error('mensagem') aria-invalid="true" aria-describedby="briefing-mensagem-error" @enderror
                >{{ old('mensagem') }}</textarea>
                @error('mensagem')
                    <p id="briefing-mensagem-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="briefing-privacidade" class="flex items-start gap-3 py-2">
                    <input
                        type="checkbox"
                        id="briefing-privacidade"
                        name="privacidade"
                        value="1"
                        required
                        @checked(old('privacidade'))
                        class="checkbox checkbox-primary mt-1 shrink-0"
                        @error('privacidade') aria-invalid="true" aria-describedby="briefing-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="briefing-privacidade-error" class="mt-2 text-sm text-amare-error">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex flex-col items-start gap-4 pt-2">
                <button
                    type="submit"
                    data-submit-button
                    class="btn btn-primary text-xs font-bold uppercase tracking-[0.09em]"
                >
                    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>

            <div class="border border-dashed border-amare-sage px-6 py-5">
                <p class="text-sm text-amare-muted">Fornecedores e parcerias — pós-MVP. Não misturar este público ao briefing comercial. Quando validado, criar um canal/formulário institucional próprio.</p>
            </div>
        </form>
    </div>
</section>