@extends('layouts.app')

@section('content')

<section class="contact-section py-5">
    <div class="container">

        {{-- HEADER --}}
        <div class="text-center mb-5 contact-header">
            <h2 class="fw-bold text-white mb-2">
                Entre em <span class="text-gold">Contacto</span>
            </h2>
            <p class="text-light opacity-75">
                Atendimento exclusivo para clientes. Estamos prontos para ajudar-te.
            </p>
        </div>

        <div class="row g-4 align-items-stretch">

            {{-- FORM --}}
            <div class="col-lg-6">
                <div class="contact-card glass p-4 h-100">

                    <h5 class="fw-bold text-white mb-4">
                        <i class="fas fa-paper-plane text-gold me-2"></i>
                        Enviar mensagem
                    </h5>

                    @if(session('success'))
                        <div class="alert alert-success rounded-3">
                            {{ session('success') }}
                        </div>
                    @endif

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

                        <div class="form-group mb-3">
                            <label>Nome</label>
                            <input type="text" name="name" class="form-control luxury-input" required>
                        </div>

                        <div class="form-group mb-3">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control luxury-input" required>
                        </div>

                        <div class="form-group mb-3">
                            <label>Telefone</label>
                            <input type="text" name="phone" class="form-control luxury-input">
                        </div>

                        <div class="form-group mb-4">
                            <label>Mensagem</label>
                            <textarea name="message" rows="5" class="form-control luxury-input" required></textarea>
                        </div>

                        <button class="btn btn-gold w-100">
                            <i class="fas fa-paper-plane me-2"></i>
                            Enviar Mensagem
                        </button>
                    </form>

                </div>
            </div>

            {{-- INFO --}}
            <div class="col-lg-6">
                <div class="contact-card glass p-4 h-100 d-flex flex-column">

                    <h5 class="fw-bold text-white mb-4">
                        <i class="fas fa-location-dot text-gold me-2"></i>
                        Contactos & Localização
                    </h5>

                    <div class="info-box mb-4">

                        <div class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <strong>Endereço</strong>
                                <p>Talatona, Luanda – Angola</p>
                            </div>
                        </div>

                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <div>
                                <strong>Telefone</strong>
                                <p>+244 948 159 330</p>
                            </div>
                        </div>

                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <div>
                                <strong>Email</strong>
                                <p>loja@grupoap.ao</p>
                            </div>
                        </div>

                    </div>

                    {{-- SOCIAL --}}
                    <div class="social-box mb-3">
                        <h6 class="text-white mb-3">Redes Sociais</h6>

                        <div class="social-icons">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-whatsapp"></i></a>
                        </div>
                    </div>

                    {{-- MAPA --}}
                    <div class="map">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18..."
                            loading="lazy">
                        </iframe>
                    </div>

                </div>
            </div>

        </div>
    </div>
</section>
@endsection
<style>
    .contact-section{
    background: radial-gradient(circle at top, #0f172a, #020617);
}

/* HEADER */
.contact-header h2{
    font-size: 2.2rem;
    letter-spacing: .5px;
}
.text-gold{
    color:#fbbf24;
}

/* CARD GLASS */
.glass{
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,.5);
    transition:.3s ease;
}
.glass:hover{
    transform: translateY(-5px);
}

/* INPUTS PREMIUM */
.luxury-input{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color:#fff;
    border-radius: 12px;
    padding: 12px;
}
.luxury-input:focus{
    border-color:#fbbf24;
    box-shadow:0 0 0 .2rem rgba(251,191,36,.15);
    background: rgba(255,255,255,0.05);
    color:#fff;
}

/* LABEL */
label{
    color:#cbd5e1;
    font-size: 13px;
    margin-bottom: 6px;
}

/* BOTÃO GOLD PERFUME */
.btn-gold{
    background: linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#111827;
    font-weight:600;
    padding:12px;
    border-radius:12px;
    transition:.3s;
}
.btn-gold:hover{
    transform: translateY(-3px);
    box-shadow:0 15px 30px rgba(251,191,36,.25);
}

/* INFO BOX */
.info-item{
    display:flex;
    gap:12px;
    margin-bottom:16px;
    color:#e2e8f0;
}
.info-item i{
    color:#fbbf24;
    font-size:18px;
    margin-top:4px;
}
.info-item p{
    margin:0;
    font-size:14px;
    color:#94a3b8;
}

/* SOCIAL */
.social-icons{
    display:flex;
    gap:12px;
}
.social-icons a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    color:#fff;
    transition:.3s;
}
.social-icons a:hover{
    background:#fbbf24;
    color:#111;
    transform: translateY(-3px);
}

/* MAP */
.map{
    height:200px;
    border-radius:14px;
    overflow:hidden;
}
.map iframe{
    width:100%;
    height:100%;
    border:0;
}
</style>