@extends('layouts.app')

@section('title', 'Prochains événements Tech au Togo')
@section('description', 'Plateforme événementielle dédiée au Togo - Restez informé de nos prochains événements tech')

@section('content')
<!-- Hero Section -->
<section id="hero" class="hero-section">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h1 class="display-4 mb-4">Prochains événements Tech au Togo</h1>
                <p class="lead mb-5">
                    Nous préparons des événements tech exceptionnels à Lomé et dans tout le Togo. 
                    Restez connecté pour être informé en avant-première des prochaines opportunités.
                </p>
                
                <div class="row g-4 mt-5">
                    <div class="col-md-4">
                        <div class="text-center">
                            <i class="bi bi-laptop display-6 text-primary mb-3"></i>
                            <h4>Innovation Tech</h4>
                            <p>Fintech, AgriTech, HealthTech - L'innovation au service du développement togolais</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <i class="bi bi-people display-6 text-primary mb-3"></i>
                            <h4>Communauté</h4>
                            <p>Rencontrez entrepreneurs, développeurs et innovateurs de l'écosystème tech togolais</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <i class="bi bi-globe-africa display-6 text-primary mb-3"></i>
                            <h4>Impact Local</h4>
                            <p>Des solutions technologiques adaptées aux défis et opportunités du Togo</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="bg-light-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="section-title">
                    <h2>Restez informé</h2>
                    <p>Laissez-nous vos coordonnées pour être alerté de nos prochains événements tech au Togo</p>
                </div>
                
                <div class="card shadow-sm">
                    <div class="card-body p-5">
                        <form>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Nom complet *</label>
                                    <input type="text" class="form-control" id="name" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email *</label>
                                    <input type="email" class="form-control" id="email" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="company" class="form-label">Entreprise/Startup</label>
                                    <input type="text" class="form-control" id="company">
                                </div>
                                <div class="col-md-6">
                                    <label for="phone" class="form-label">Téléphone/WhatsApp</label>
                                    <input type="tel" class="form-control" id="phone" placeholder="+228 XX XX XX XX">
                                </div>
                                <div class="col-12">
                                    <label for="interests" class="form-label">Domaines d'intérêt</label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="fintech">
                                                <label class="form-check-label" for="fintech">
                                                    Fintech
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="agritech">
                                                <label class="form-check-label" for="agritech">
                                                    AgriTech
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="ecommerce">
                                                <label class="form-check-label" for="ecommerce">
                                                    E-commerce
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="dev">
                                                <label class="form-check-label" for="dev">
                                                    Développement
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="startup">
                                                <label class="form-check-label" for="startup">
                                                    Entrepreneuriat
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="ai">
                                                <label class="form-check-label" for="ai">
                                                    Intelligence Artificielle
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label">Message</label>
                                    <textarea class="form-control" id="message" rows="4" placeholder="Quel type d'événement tech souhaiteriez-vous voir organisé au Togo ?"></textarea>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary btn-cta">
                                        <i class="bi bi-send me-2"></i>Envoyer ma demande
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Info -->
        <div class="row mt-5">
            <div class="col-lg-4 text-center">
                <i class="bi bi-envelope display-6 text-primary mb-3"></i>
                <h5>Email</h5>
                <p>contact@techevents.tg</p>
            </div>
            <div class="col-lg-4 text-center">
                <i class="bi bi-telephone display-6 text-primary mb-3"></i>
                <h5>Téléphone</h5>
                <p>+228 22 50 20 30</p>
            </div>
            <div class="col-lg-4 text-center">
                <i class="bi bi-whatsapp display-6 text-primary mb-3"></i>
                <h5>WhatsApp</h5>
                <p>+228 90 15 25 35</p>
            </div>
        </div>
    </div>
    </div>
</section>

<!-- Info Section -->
<section class="py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0">
                    <div class="card-body">
                        <i class="bi bi-envelope display-6 text-primary mb-3"></i>
                        <h5>Email</h5>
                        <p class="text-muted">contact@events.com</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0">
                    <div class="card-body">
                        <i class="bi bi-telephone display-6 text-primary mb-3"></i>
                        <h5>Téléphone</h5>
                        <p class="text-muted">+33 1 23 45 67 89</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0">
                    <div class="card-body">
                        <i class="bi bi-geo-alt display-6 text-primary mb-3"></i>
                        <h5>Localisation</h5>
                        <p class="text-muted">Paris, France</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection