@extends('public.layouts.app')

@section('title', config('app.name'))

@section('content')
  <!-- Hero Section -->
  <section id="inicio" class="hero">
    <div class="container">
      <h1>Transforma tu Negocio con Nuestra Plataforma</h1>
      <p class="lead">Gestiona tu empresa con tecnología avanzada. Mejora la experiencia del cliente con procesos automatizados, seguros y siempre disponibles.</p>
      <div class="hero-cta mt-4">
        <a href="{{ route('register') }}" class="btn btn-light btn-lg hero-btn">
          <i class="fas fa-rocket me-2"></i>
          <span class="btn-text">Prueba gratis 30 días</span>
          <i class="fas fa-arrow-right ms-2"></i>
        </a>
        <div class="hero-badge">
          <i class="fas fa-shield-alt me-1"></i>
          Sin tarjeta de crédito
        </div>
      </div>
    </div>
  </section>


  <!-- Características -->
  <section id="caracteristicas" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Funcionalidades que Impulsarán tu Negocio</h2>
      <div class="row text-center">
        <div class="col-md-4">
          <i class="fas fa-desktop feature-icon"></i>
          <h5 class="mt-3">Panel de Administración Intuitivo</h5>
          <p>Gestiona tu empresa fácilmente desde un panel centralizado y moderno.</p>
        </div>
        <div class="col-md-4">
          <i class="fas fa-robot feature-icon"></i>
          <h5 class="mt-3">Automatización de Procesos</h5>
          <p>Configura procesos automáticos y alertas para optimizar tu operación.</p>
        </div>
        <div class="col-md-4">
          <i class="fas fa-lock feature-icon"></i>
          <h5 class="mt-3">Seguridad y Privacidad</h5>
          <p>Todos los datos son encriptados y almacenados conforme a estándares internacionales.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Planes y Precios -->
  <section id="precios" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Elige el Plan Perfecto para tu Empresa</h2>
      @include('public.components.pricing-cards', ['planes' => $planes])
    </div>
  </section>

  <!-- Formulario de Contacto -->
  <section id="contacto" class="py-3">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8">
        <div class="card shadow-sm">
          <div class="card-body p-4">
          @include('public.components.contact-form')
          </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@push('styles')
<style>
.hero-cta {
  text-align: center;
  position: relative;
}

.hero-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(45deg, #ffffff, #f8f9fa);
  color: #0d6efd;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0d6efd, #0056b3);
  transition: left 0.3s ease;
  z-index: -1;
}

.hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(13, 110, 253, 0.4);
  color: white;
}

.hero-btn:hover::before {
  left: 0;
}

.hero-btn:hover .btn-text {
  color: white;
}

.hero-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
}

.hero-badge {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-badge i {
  color: #28a745;
}

/* Animación de pulso para el botón */
@keyframes pulse {
  0% {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.5), 0 0 0 10px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
  }
}

.hero-btn {
  animation: pulse 2s infinite;
}

.hero-btn:hover {
  animation: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-btn {
    padding: 12px 24px;
    font-size: 1rem;
  }
  
  .hero-badge {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}
</style>
@endpush