@extends('layouts.app')

@section('title', 'Contact - InovaTech Global Services')

@section('content')
<section class="bg-brand-dark text-white py-5 text-center">
    <div class="container py-3">
        <h1 class="fw-bold display-5">Contactez INOVATECH</h1>
        <p class="lead text-white-50">Une question ou un projet ? Discutons-en dès aujourd'hui.</p>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-5">
                <h3 class="fw-bold text-brand-dark mb-4">Nos Coordonnées</h3>
                
                <div class="d-flex mb-4">
                    <div class="bg-light p-3 rounded me-3 text-brand-blue">
                        <i class="bi bi-geo-alt-fill fs-4"></i>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-1">Localisation</h5>
                        <p class="text-muted mb-0">Sénégal</p>
                    </div>
                </div>

                <div class="d-flex mb-4">
                    <div class="bg-light p-3 rounded me-3 text-brand-orange">
                        <i class="bi bi-telephone-fill fs-4"></i>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-1">Téléphone </h5>
                        <p class="text-muted mb-0">+221 70 970 91 86</p>
                    </div>
                </div>

                <div class="d-flex mb-4">
                    <div class="bg-light p-3 rounded me-3 text-brand-blue">
                        <i class="bi bi-envelope-fill fs-4"></i>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-1">Email</h5>
                        <p class="text-muted mb-0">contact@inovatech.com</p>
                        <p class="text-muted mb-0"><a href="mailto:contact@inovatech.com" class="text-decoration-underline">Nous envoyer un email</a></p>
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="card border-0 shadow-sm p-4">
                    <h3 class="fw-bold text-brand-dark mb-4">Envoyez-nous un message</h3>

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('contact.send') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Nom complet *</label>
                                <input type="text" name="nom" class="form-control" value="{{ old('nom') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Adresse Email *</label>
                                <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Téléphone</label>
                                <input type="text" name="telephone" class="form-control" value="{{ old('telephone') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Service concerné</label>
                                <select name="service" class="form-select">
                                    <option value="Développement Web">Développement Web / Application</option>
                                    <option value="Hébergement & Nom de domaine">Hébergement &amp; Noms de Domaine</option>
                                    <option value="Formation">Formation Informatique</option>
                                    <option value="Vente Matériel">Vente de Matériel</option>
                                    <option value="Autre">Autre demande</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Votre message *</label>
                                <textarea name="message" rows="5" class="form-control" required>{{ old('message') }}</textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-brand-orange px-5 py-2">Envoyer le message</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</section>
@endsection