@extends('layouts.app')

@section('title', __('contactos.title'))

@section('content')

{{-- =====================================================
     HERO: Cabeçalho da Página
====================================================== --}}
<section class="relative h-[45vh] min-h-[350px] flex items-center justify-center overflow-hidden">
    {{-- Imagem de fundo com overlay --}}
    <div class="absolute inset-0 bg-black">
        <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-45 filter contrast-125 brightness-90"
            style="background-image: url('{{ asset('backgound_sobre.jpg') }}');">
        </div>
        <div class="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-transparent"></div>
    </div>
    <div class="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-[#06458F]/40"></div>

    <div class="relative z-10 text-center px-6 fade-in-up max-w-5xl mx-auto">
        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-tight">
            {{ __('contactos.hero_title') }}
        </h1>
        <p class="text-white/80 text-xs sm:text-sm mt-4 font-light tracking-widest uppercase flex items-center justify-center gap-2">
            <a href="{{ route('welcome') }}" class="hover:text-white transition duration-200">{{ __('app.navbar.home') }}</a>
            <span>/</span>
            <span class="text-white/50">{{ __('contactos.breadcrumb') }}</span>
        </p>
    </div>
</section>

{{-- =====================================================
     SECÇÃO PRINCIPAL: Formulário + Info
====================================================== --}}
<section style="background-color: #FFFFFF; padding: 70px 0 80px;">
    <div style="max-width: 1100px; margin: 0 auto; padding: 0 24px;">

        @if ($message = Session::get('success'))
        <div style="background-color: #EAF6DB; border: 1px solid #8BCB4A; border-left: 4px solid #8BCB4A; color: #4C7A23; padding: 16px 20px; border-radius: 8px; margin-bottom: 32px; font-weight: 500;">
            ✓ {{ $message }}
        </div>
        @endif

        @if ($errors->any())
        <div style="background-color: #fef2f2; border: 1px solid #fca5a5; border-left: 4px solid #dc2626; color: #b91c1c; padding: 16px 20px; border-radius: 8px; margin-bottom: 32px;">
            <ul style="margin: 0; padding-left: 16px;">
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <div class="contacto-grid" style="display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start;">

            {{-- Formulário --}}
            <div>
                <h2 style="font-size: 1.6rem; font-weight: 800; color: #06458F; margin: 0 0 8px;">{{ __('contactos.form_title') }}</h2>
                <p style="color: #64748b; font-size: 0.95rem; margin-bottom: 36px;">{{ __('contactos.form_subtitle') }}</p>

                <form action="{{ route('contacto.enviar') }}" method="POST">
                    @csrf

                    <div class="nome-tel-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        {{-- Nome --}}
                        <div>
                            <label for="nome" style="display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; letter-spacing: 0.03em; text-transform: uppercase;">{{ __('contactos.field_name') }}</label>
                            <input
                                type="text"
                                id="nome"
                                name="nome"
                                value="{{ old('nome') }}"
                                placeholder="{{ __('contactos.placeholder_name') }}"
                                required
                                style="width: 100%; padding: 13px 16px; background: #f8fafc; border: 1.5px solid {{ $errors->has('nome') ? '#dc2626' : '#e2e8f0' }}; border-radius: 8px; font-size: 15px; color: #0f172a; box-sizing: border-box; transition: border-color 0.2s; outline: none; font-family: inherit;"
                                onfocus="this.style.borderColor='#06458F'"
                                onblur="this.style.borderColor='{{ $errors->has('nome') ? '#dc2626' : '#e2e8f0' }}'">
                            @error('nome')
                                <p style="color: #dc2626; font-size: 12px; margin-top: 6px;">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Telefone --}}
                        <div>
                            <label for="telefone" style="display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; letter-spacing: 0.03em; text-transform: uppercase;">{{ __('contactos.field_phone') }}</label>
                            <input
                                type="tel"
                                id="telefone"
                                name="telefone"
                                value="{{ old('telefone') }}"
                                placeholder="{{ __('contactos.placeholder_phone') }}"
                                style="width: 100%; padding: 13px 16px; background: #f8fafc; border: 1.5px solid {{ $errors->has('telefone') ? '#dc2626' : '#e2e8f0' }}; border-radius: 8px; font-size: 15px; color: #0f172a; box-sizing: border-box; transition: border-color 0.2s; outline: none; font-family: inherit;"
                                onfocus="this.style.borderColor='#06458F'"
                                onblur="this.style.borderColor='{{ $errors->has('telefone') ? '#dc2626' : '#e2e8f0' }}'">
                            @error('telefone')
                                <p style="color: #dc2626; font-size: 12px; margin-top: 6px;">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    {{-- Email --}}
                    <div style="margin-bottom: 20px;">
                        <label for="email" style="display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; letter-spacing: 0.03em; text-transform: uppercase;">{{ __('contactos.field_email') }}</label>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="{{ __('contactos.placeholder_email') }}"
                            required
                            style="width: 100%; padding: 13px 16px; background: #f8fafc; border: 1.5px solid {{ $errors->has('email') ? '#dc2626' : '#e2e8f0' }}; border-radius: 8px; font-size: 15px; color: #0f172a; box-sizing: border-box; transition: border-color 0.2s; outline: none; font-family: inherit;"
                            onfocus="this.style.borderColor='#06458F'"
                            onblur="this.style.borderColor='{{ $errors->has('email') ? '#dc2626' : '#e2e8f0' }}'">
                        @error('email')
                            <p style="color: #dc2626; font-size: 12px; margin-top: 6px;">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Mensagem --}}
                    <div style="margin-bottom: 32px;">
                        <label for="mensagem" style="display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; letter-spacing: 0.03em; text-transform: uppercase;">{{ __('contactos.field_message') }}</label>
                        <textarea
                            id="mensagem"
                            name="mensagem"
                            rows="6"
                            placeholder="{{ __('contactos.placeholder_message') }}"
                            required
                            style="width: 100%; padding: 13px 16px; background: #f8fafc; border: 1.5px solid {{ $errors->has('mensagem') ? '#dc2626' : '#e2e8f0' }}; border-radius: 8px; font-size: 15px; color: #0f172a; box-sizing: border-box; resize: vertical; transition: border-color 0.2s; outline: none; font-family: inherit;"
                            onfocus="this.style.borderColor='#06458F'"
                            onblur="this.style.borderColor='{{ $errors->has('mensagem') ? '#dc2626' : '#e2e8f0' }}'">{{ old('mensagem') }}</textarea>
                        @error('mensagem')
                            <p style="color: #dc2626; font-size: 12px; margin-top: 6px;">{{ $message }}</p>
                        @enderror
                    </div>

                    <div style="display: flex; gap: 14px;">
                        <a href="{{ route('welcome') }}" style="display: inline-block; padding: 14px 28px; background: #f1f5f9; color: #475569; font-weight: 700; font-size: 14px; border-radius: 8px; text-decoration: none; letter-spacing: 0.05em; transition: background 0.2s;">
                            {{ __('contactos.btn_cancel') }}
                        </a>
                        <button type="submit" style="flex: 1; padding: 14px 28px; background-color: #06458F; color: #FFFFFF; font-weight: 700; font-size: 14px; border-radius: 8px; border: none; cursor: pointer; letter-spacing: 0.05em; text-transform: uppercase; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.88'" onmouseout="this.style.opacity='1'">
                            {{ __('contactos.btn_submit') }}
                        </button>
                    </div>
                </form>
            </div>

            {{-- Painel de Informações --}}
            <div>
                <div style="background-color: #06458F; border-radius: 16px; padding: 36px 32px; color: #FFFFFF;">
                    <h3 style="font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; color: #FFFFFF;">{{ __('contactos.info_title') }}</h3>
                    <p style="color: #A9B8C9; font-size: 0.9rem; margin-bottom: 32px; line-height: 1.6;">{{ __('contactos.info_subtitle') }}</p>

                    <div style="display: flex; flex-direction: column; gap: 24px;">
                        <div style="display: flex; align-items: flex-start; gap: 16px;">
                            <div style="width: 44px; height: 44px; background: rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;">📞</div>
                            <div>
                                <p style="font-size: 11px; color: #A9B8C9; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 4px;">{{ __('contactos.info_phone') }}</p>
                                <a href="tel:{{ preg_replace('/\D/', '', $empresaConfig->telefone ?? '+244948944582') }}" style="color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 0.9rem;">{{ $empresaConfig->telefone ?? '+244 948 944 582' }}</a><br>
                                <a href="tel:+244953587406" style="color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 0.9rem;">+244 953 587 406</a>
                            </div>
                        </div>
                        <div style="display: flex; align-items: flex-start; gap: 16px;">
                            <div style="width: 44px; height: 44px; background: rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;">✉️</div>
                            <div>
                                <p style="font-size: 11px; color: #A9B8C9; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 4px;">{{ __('contactos.info_email') }}</p>
                                <a href="mailto:{{ $empresaConfig->email ?? 'info@amdtopografia.com' }}" style="color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 0.9rem;">{{ $empresaConfig->email ?? 'info@amdtopografia.com' }}</a>
                            </div>
                        </div>
                        <div style="display: flex; align-items: flex-start; gap: 16px;">
                            <div style="width: 44px; height: 44px; background: rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;">📍</div>
                            <div>
                                <p style="font-size: 11px; color: #A9B8C9; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 4px;">{{ __('contactos.info_location') }}</p>
                                <span style="color: #FFFFFF; font-weight: 600; font-size: 0.9rem; line-height: 1.5;">{{ __('contactos.info_location_val') }}</span>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15);">
                        <p style="color: #A9B8C9; font-size: 12px; line-height: 1.7; margin: 0;">
                            {!! __('contactos.info_hours') !!}
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<style>
@media (max-width: 768px) {
    .contacto-grid { grid-template-columns: 1fr !important; }
    .nome-tel-grid { grid-template-columns: 1fr !important; }
}
</style>

@endsection