@extends('layouts.app')

@section('title', 'Contactos JC — Fale com a nossa equipa')
@section('description', 'Entre em contacto com o Grupo JC para projetos, oportunidades, recrutamento ou parcerias institucionais.')

@section('content')
    <section class="relative overflow-hidden bg-slate-950 pt-36 pb-24 text-white lg:pt-44 lg:pb-28">
        <div class="absolute inset-0">
            <img
                src="/media/IMG_0655-scaled.jpg"
                alt="Contactos JC"
                class="h-full w-full object-cover opacity-30"
            >
            <div class="absolute inset-0 bg-gradient-to-r from-[#2d231d]/85 via-[#2d231d]/65 to-[#2d231d]/40"></div>
        </div>

        <div class="relative mx-auto max-w-7xl px-6 lg:px-8">
            <p data-reveal class="text-[11px] font-semibold uppercase tracking-[0.28em] text-white/60">
                Contactos
            </p>

            <h1 data-reveal class="mt-6 max-w-5xl text-5xl font-semibold leading-[0.95] tracking-[-0.04em] sm:text-6xl xl:text-7xl">
                Uma equipa pronta para falar sobre
                <span class="font-serif italic text-white/85">projetos, oportunidades e crescimento</span>.
            </h1>

            <p data-reveal class="mt-8 max-w-3xl text-lg leading-8 text-white/75 xl:text-xl">
                Estamos disponíveis para responder a contactos institucionais, oportunidades de desenvolvimento,
                recrutamento e potenciais parcerias.
            </p>
        </div>
    </section>

    <section class="bg-white py-24 lg:py-28">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="grid gap-10 overflow-hidden rounded-[2.5rem] border border-slate-200 bg-white xl:grid-cols-[0.9fr_1.1fr]">
                <div class="bg-slate-950 p-10 text-white lg:p-14">
                    <p data-reveal class="text-[11px] font-semibold uppercase tracking-[0.28em] text-white/45">
                        Informação
                    </p>

                    <h2 data-reveal class="mt-5 text-4xl font-semibold leading-tight tracking-[-0.03em] lg:text-5xl">
                        Contactos institucionais.
                    </h2>

                    <div class="mt-10 grid gap-5">
                        <div data-reveal class="rounded-[1.75rem] border border-white/10 bg-white/5 p-5">
                            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Email</p>
                            <p class="mt-2 text-lg font-semibold text-white">geral@jcgroup.pt</p>
                        </div>

                        <div data-reveal class="rounded-[1.75rem] border border-white/10 bg-white/5 p-5">
                            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Telefone</p>
                            <p class="mt-2 text-lg font-semibold text-white">+351 253 304 230</p>
                        </div>

                        <div data-reveal class="rounded-[1.75rem] border border-white/10 bg-white/5 p-5">
                            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Localização</p>
                            <p class="mt-2 text-lg font-semibold text-white">Braga, Portugal</p>
                        </div>
                    </div>
                </div>

                <div class="p-10 lg:p-14">
                    <p data-reveal class="text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-400">
                        Enviar mensagem
                    </p>

                    @if (session('success'))
                        <div class="mt-8 rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm font-medium text-emerald-800">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="mt-8 rounded-2xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">
                            <p class="font-semibold">Não foi possível enviar a mensagem.</p>
                            <ul class="mt-2 list-disc pl-5 space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('contactos.store') }}" method="POST" class="mt-8 grid gap-5">
                        @csrf

                        <div data-reveal class="grid gap-5 md:grid-cols-2">
                            <div>
                                <input
                                    type="text"
                                    name="nome"
                                    value="{{ old('nome') }}"
                                    placeholder="Nome"
                                    required
                                    class="w-full rounded-2xl border border-slate-300 px-5 py-4 text-slate-900 outline-none transition focus:border-slate-500"
                                >
                            </div>

                            <div>
                                <input
                                    type="email"
                                    name="email"
                                    value="{{ old('email') }}"
                                    placeholder="Email"
                                    required
                                    class="w-full rounded-2xl border border-slate-300 px-5 py-4 text-slate-900 outline-none transition focus:border-slate-500"
                                >
                            </div>
                        </div>

                        <div data-reveal class="grid gap-5 md:grid-cols-2">
                            <div>
                                <input
                                    type="text"
                                    name="telefone"
                                    value="{{ old('telefone') }}"
                                    placeholder="Telefone"
                                    class="w-full rounded-2xl border border-slate-300 px-5 py-4 text-slate-900 outline-none transition focus:border-slate-500"
                                >
                            </div>

                            <div>
                                <input
                                    type="text"
                                    name="assunto"
                                    value="{{ old('assunto') }}"
                                    placeholder="Assunto"
                                    required
                                    class="w-full rounded-2xl border border-slate-300 px-5 py-4 text-slate-900 outline-none transition focus:border-slate-500"
                                >
                            </div>
                        </div>

                        <div data-reveal>
                            <select
                                name="empreendimento_id"
                                class="w-full rounded-2xl border border-slate-300 bg-white px-5 py-4 text-slate-900 outline-none transition focus:border-slate-500"
                            >
                                <option value="">Selecione um empreendimento (opcional)</option>
                                @foreach ($empreendimentos as $empreendimento)
                                    <option value="{{ $empreendimento->IDEmpreendimento }}" {{ old('empreendimento_id') == $empreendimento->IDEmpreendimento ? 'selected' : '' }}>
                                        {{ $empreendimento->NomeEmpreendimento }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <textarea
                            data-reveal
                            name="mensagem"
                            rows="7"
                            placeholder="Mensagem"
                            required
                            class="rounded-[1.75rem] border border-slate-300 px-5 py-4 text-slate-900 outline-none transition focus:border-slate-500"
                        >{{ old('mensagem') }}</textarea>

                        <div data-reveal>
                            <button
                                type="submit"
                                class="rounded-full bg-slate-950 px-7 py-4 text-sm font-semibold text-white transition hover:bg-slate-800"
                            >
                                Enviar mensagem
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection