@extends('frontend.layouts.main')

@section('title', 'Lash Vanshy - Extensiones de Pestañas Profesionales')

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 order-2 order-lg-1">
                <div class="hero-content text-center text-lg-start">
                    <h1 class="hero-title">
                        <span>Lash Vanshy</span>
                    </h1>
                    <p class="hero-subtitle">
                        Extensiones de pestañas profesionales con productos de la más alta calidad. 
                        Destaca tu belleza natural con nuestros servicios especializados y personalizados.
                    </p>
                    <a href="{{ route('productos') }}" class="hero-btn">
                        Ver Servicios <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0">
                <div class="hero-image-wrapper">
                    <img src="https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?w=600&h=500&fit=crop" 
                         alt="Extensiones de pestañas profesionales" 
                         class="hero-image img-fluid"
                         onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 300%22%3E%3Crect fill=%22%23FFE4EC%22 width=%22400%22 height=%22300%22/%3E%3Ctext x=%22200%22 y=%22150%22 text-anchor=%22middle%22 fill=%22%23E89AAD%22 font-size=%2240%22%3E%E2%9C%A8%3C/text%3E%3Ctext x=%22200%22 y=%22190%22 text-anchor=%22middle%22 fill=%22%234A4A4A%22 font-size=%2216%22%3ELash Vanshy%3C/text%3E%3C/svg%3E'">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Servicios Destacados -->
@if($productosDestacados->isNotEmpty())
<section class="section-padding">
    <div class="container">
        <div class="section-title">
            <h2>Servicios <span>Destacados</span></h2>
            <p>Descubre nuestros servicios más populares y solicitados por nuestras clientas.</p>
        </div>
        
        <div class="row g-4">
            @foreach($productosDestacados as $producto)
            <div class="col-md-6 col-lg-4">
                <div class="card-custom h-100">
                    <div class="position-relative">
                        @if($producto->imagen)
                        <img src="{{ asset('storage/' . $producto->imagen) }}" 
                             alt="{{ $producto->nombre }}" 
                             class="card-img-top">
                        @else
                        <div class="card-img-top placeholder-img">
                            <i class="fas fa-eye"></i>
                        </div>
                        @endif
                        <span class="badge-destacado">⭐ Destacado</span>
                    </div>
                    <div class="card-body">
                        <span class="text-primary small text-uppercase fw-bold">{{ $producto->categoria }}</span>
                        <h5 class="card-title mt-2">{{ $producto->nombre }}</h5>
                        <p class="card-text">{{ Str::limit($producto->descripcion, 100) }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="price">{{ $producto->precio_formateado }}</span>
                            <a href="{{ route('contacto') }}" class="btn btn-sm btn-outline-primary">
                                Reservar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-4">
            <a href="{{ route('productos') }}" class="hero-btn">
                Ver Todos los Servicios <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- Galería Preview -->
@if($galeria->isNotEmpty())
<section class="section-padding bg-secondary">
    <div class="container">
        <div class="section-title">
            <h2>Nuestro <span>Trabajo</span></h2>
            <p>Mira algunos de nuestros trabajos realizados. Cada cliente es único y especial para nosotros.</p>
        </div>
        
        <div class="row g-3">
            @foreach($galeria as $item)
            <div class="col-6 col-md-4 col-lg-3">
                <div class="gallery-item">
                    @if($item->tipo === 'video')
                        @if($item->thumbnail)
                        <img src="{{ asset('storage/' . $item->thumbnail) }}" alt="{{ $item->titulo }}">
                        @else
                        <div class="placeholder-img w-100 h-100">
                            <i class="fas fa-play"></i>
                        </div>
                        @endif
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    @else
                        @if($item->archivo)
                        <img src="{{ asset('storage/' . $item->archivo) }}" alt="{{ $item->titulo }}">
                        @else
                        <div class="placeholder-img w-100 h-100">
                            <i class="fas fa-image"></i>
                        </div>
                        @endif
                    @endif
                    <div class="overlay">
                        <div class="overlay-content">
                            <h4>{{ $item->titulo }}</h4>
                            @if($item->descripcion)
                            <p>{{ Str::limit($item->descripcion, 50) }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-4">
            <a href="{{ route('galeria') }}" class="hero-btn">
                Ver Galería Completa <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- Por qué elegirnos -->
<section class="section-padding">
    <div class="container">
        <div class="section-title">
            <h2>¿Por qué <span>Elegirnos?</span></h2>
            <p>Nos comprometemos a darte los mejores resultados.</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-gem"></i>
                    </div>
                    <h4>Productos de Calidad</h4>
                    <p class="text-muted">Utilizamos solo productos premium y seguros para tus pestañas.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h4>Profesionales Expertas</h4>
                    <p class="text-muted">Nuestro equipo tiene años de experiencia en el sector.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h4>Atención Personalizada</h4>
                    <p class="text-muted">Cada clienta recibe un tratamiento adaptado a sus necesidades.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Contacto -->
<section class="section-padding bg-primary-custom">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="mb-3">¿Lista para transformar tu mirada?</h2>
                <p class="mb-4">Contáctanos hoy mismo y agenda tu cita. Estaremos encantadas de atenderte.</p>
                <a href="{{ route('contacto') }}" class="hero-btn">
                    Contactar Ahora <i class="fas fa-envelope ms-2"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<style>
.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-dark);
}
</style>
@endsection