@extends('layouts.base')

@section('content')
<!-- Hero Section -->
<section class="hero-section bg-gradient-primary text-white py-5">
    <div class="container">
        <div class="row align-items-center min-vh-75">
            <div class="col-lg-6 mb-lg-0 mb-4">
                <h1 class="display-4 fw-bold mb-4 text-primary">
                    Bienvenue dans l'immobilier <span class="text-warning">opérationnel</span>
                </h1>
                <p class="lead mb-4 text-primary">
                    OCTAVE est la plateforme digitale conçue pour les promoteurs immobiliers qui veulent 
                    fluidifier leur gestion et accélérer leur commercialisation.
                </p>
                <div class="d-flex gap-3">
                    <a href="#demo" class="btn btn-warning btn-lg px-4">Découvrir OCTAVE</a>
                    <a href="#contact" class="btn btn-outline-primary btn-lg px-4">Nous contacter</a>
                </div>
            </div>
            <div class="col-lg-6 mb-lg-0 mb-4">
                <div class="hero-image text-center">
                    <div class="bg-white rounded-4 p-4 shadow-lg">
                        <img src="{{ secure_asset('images/logo/logo.webp') }}" alt="logo OCTAVE" class="img-fluid" style="width: 200px; height: 100%;">
                        <h3 class="text-primary">Plateforme OCTAVE</h3>
                        <p class="text-muted">Digitalisation • Automatisation • Performance</p>
                        <!-- Auth Buttons -->
                        <div class="mt-4">
                            @auth
                                <a href="{{ route('front.index') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-home me-2"></i>Accueil
                                </a>
                            @else
                                <a href="{{ route('login') }}" class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-sign-in-alt me-2"></i>Se connecter
                                </a>
                            @endauth
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#subscriptionsModal">
                                <i class="fas fa-credit-card me-2"></i>Voir les abonnements
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission Section -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="h1 mb-4">Notre Mission</h2>
                <p class="lead text-muted mb-5">
                    Offrir aux promoteurs une plateforme à leur image pour digitaliser leurs programmes, 
                    accélérer leur commercialisation et simplifier la gestion de leurs ventes.
                </p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-chart-line fa-2x text-light"></i>
                        </div>
                        <h5 class="card-title">Performance</h5>
                        <p class="card-text text-muted">
                            Accélération de la commercialisation et amélioration de la qualité des flux
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-cogs fa-2x text-light"></i>
                        </div>
                        <h5 class="card-title">Automatisation</h5>
                        <p class="card-text text-muted">
                            Automatisation de l'ADV et fiabilisation des données
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-eye fa-2x text-light"></i>
                        </div>
                        <h5 class="card-title">Visibilité</h5>
                        <p class="card-text text-muted">
                            Pilotage et gestion optimisée de vos programmes
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Manifeste Section -->
<section class="bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="text-center mb-5">
                    <h2 class="h1 mb-4">Notre Manifeste</h2>
                </div>
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5>Performance & Simplicité</h5>
                                <p class="text-muted mb-0">
                                    Un promoteur ne devrait pas avoir à choisir entre performance et simplicité.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5>Technologie Invisible</h5>
                                <p class="text-muted mb-0">
                                    Un bon outil ne se voit pas : il fonctionne, il anticipe, il fluidifie.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5>Données Fiables</h5>
                                <p class="text-muted mb-0">
                                    Les décisions les plus efficaces s'appuient sur des données fiables et partagées.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5>Partenaire de Croissance</h5>
                                <p class="text-muted mb-0">
                                    Nous devenons un partenaire de votre croissance, pas un prestataire de plus.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Personnalité de Marque -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center mb-5">
                <h2 class="h1 mb-4">Notre Personnalité</h2>
                <p class="lead text-muted">
                    Cinq traits-clés qui définissent OCTAVE et notre approche
                </p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="text-primary mb-3">
                            <i class="fas fa-bullseye fa-2x"></i>
                        </div>
                        <h5 class="card-title">Pragmatique</h5>
                        <p class="card-text text-muted">
                            OCTAVE va droit au but, parle vrai, propose des solutions concrètes et efficaces.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="text-primary mb-3">
                            <i class="fas fa-graduation-cap fa-2x"></i>
                        </div>
                        <h5 class="card-title">Expert</h5>
                        <p class="card-text text-muted">
                            La marque maîtrise parfaitement les enjeux techniques, fiscaux et commerciaux.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="text-primary mb-3">
                            <i class="fas fa-stream fa-2x"></i>
                        </div>
                        <h5 class="card-title">Fluide</h5>
                        <p class="card-text text-muted">
                            OCTAVE rend les choses complexes plus simples avec une expérience sans friction.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="text-primary mb-3">
                            <i class="fas fa-handshake fa-2x"></i>
                        </div>
                        <h5 class="card-title">Engagée</h5>
                        <p class="card-text text-muted">
                            Un partenaire de transformation avec une volonté d'amélioration continue.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="text-primary mb-3">
                            <i class="fas fa-heart fa-2x"></i>
                        </div>
                        <h5 class="card-title">Accessible</h5>
                        <p class="card-text text-muted">
                            Claire, humaine, accueillante, même lorsqu'elle parle de technologie.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="bg-primary text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="h1 mb-4">Prêt à transformer votre gestion immobilière ?</h2>
                <p class="lead mb-4">
                    Découvrez comment OCTAVE peut accélérer votre digitalisation et simplifier vos processus.
                </p>
                <div class="d-flex gap-3 justify-content-center">
                    <a href="#demo" class="btn btn-warning btn-lg px-5">Demander une démo</a>
                    <a href="#contact" class="btn btn-outline-light btn-lg px-5">Nous contacter</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer CTA -->
<section class="py-4 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h5 class="mb-1">Besoin d'informations ?</h5>
                <p class="text-muted mb-0">Notre équipe d'experts est là pour vous accompagner</p>
            </div>
            <div class="col-md-4 text-md-end">
                <a href="mailto:contact@octave.fr" class="btn btn-primary">
                    <i class="fas fa-envelope me-2"></i>Nous écrire
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, #5a00cc 100%);
    min-height: 70vh;
}

.min-vh-75 {
    min-height: 75vh;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #5a00cc 100%);
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.hero-image {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.text-warning {
    color: #ffc107 !important;
}
@media (min-width: 992px) {
  #subscriptionsModal .modal-dialog { max-width: 1200px; }
}
</style>
@endpush

@push('scripts')
<script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
@endpush

<!-- Subscriptions Modal -->
<div class="modal fade" id="subscriptionsModal" tabindex="-1" aria-labelledby="subscriptionsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-uppercase text-primary" id="subscriptionsModalLabel"><i class="fas fa-credit-card me-2"></i>Nos abonnements</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        @if(isset($subscriptions) && $subscriptions->count())
          <div class="row g-3">
            @foreach($subscriptions as $sub)
              <div class="col-md-4 col-12">
                <div class="card h-100 border-0 shadow-sm">
                  <div class="card-body">
                    <div class="d-flex align-items-start">
                      <div class="me-3">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                          <i class="fas fa-credit-card text-white"></i>
                        </div>
                      </div>
                      <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start">
                          <h5 class="mb-1 text-uppercase">{{ $sub->name }}</h5>
                        </div>
                        @if($sub->description)
                          <p class="text-muted small mb-2">{{ Str::limit($sub->description, 140) }}</p>
                        @endif
                        <div class="d-flex gap-3 align-items-center mb-2">
                          <div>
                            <small class="text-muted d-block">Mensuel</small>
                            @if(!is_null($sub->price_monthly))
                              <span class="fw-bold text-primary">{{ number_format($sub->price_monthly, 2, ',', ' ') }} €</span>
                            @else
                              <span class="text-muted">Gratuit</span>
                            @endif
                          </div>
                          <div>
                            <small class="text-muted d-block">Annuel</small>
                            @if(!is_null($sub->price_yearly))
                              <span class="fw-bold text-primary">{{ number_format($sub->price_yearly, 2, ',', ' ') }} €</span>
                            @else
                              <span class="text-muted">Gratuit</span>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        @else
          <div class="text-center py-4 text-muted">
            <i class="fas fa-credit-card fa-2x mb-2"></i>
            <div>Aucun abonnement disponible pour le moment.</div>
          </div>
        @endif
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>