@extends('layouts.app')

@section('content')

<!-- FUENTES MODERNAS -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    h1, h2, h3 {
        font-family: 'Montserrat', sans-serif;
    }
    .hero {
        position: relative;
        height: 100vh;
        background: url('{{ asset("public/img/hero-cleanup.jpg") }}') center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
    }
    .hero .overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.55);
    }
    .hero-content {
        position: relative;
        z-index: 2;
    }
    .logo {
        width: 190px;
        margin-bottom: 20px;
    }
    .btn-hero {
        padding: 12px 30px;
        background: #ffcc00;
        color: #000;
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none;
    }

    /* GENERAL SECTIONS */
    section {
        padding: 80px 10%;
    }

    .services, .extras {
        background: #f8f8f8;
    }

    /* SERVICE CARDS */
    /* SERVICE LIST */
.service-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;
    margin-top: 40px;
}

/* SERVICE CARD */
.service-card {
    width: 380px; /* 🔥 Más grande */
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    padding-bottom: 25px;
    text-align: center;
    transition: all .35s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    cursor: pointer;
    position: relative;
}

/* IMAGEN MÁS GRANDE Y MEJOR */
.service-card img {
    width: 100%;
    height: 260px; /* 🔥 Más alto */
    object-fit: cover;
    transition: .4s ease-in-out;
}

/* EFECTO HOVER PROFESIONAL */
.service-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

/* ZOOM DE IMAGEN */
.service-card:hover img {
    transform: scale(1.08);
}

/* TITULO */
.service-card h3 {
    margin-top: 18px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
}

/* TEXTO */
.service-card p {
    padding: 0 20px;
    margin-top: 10px;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}


    /* GALLERY */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    .gallery-grid img {
        width: 100%;
        border-radius: 10px;
        object-fit: cover;
    }

    /* EXTRAS FEATURES */
    .feature-box {
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transition: .3s;
    }
    .feature-box:hover {
        transform: scale(1.04);
    }

    /* CONTACT */
    .contact-form {
        max-width: 500px;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .contact-form input, .contact-form textarea {
        padding: 12px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }
    .contact-form button {
        background: black;
        color: white;
        padding: 12px;
        border-radius: 8px;
        border: none;
        font-weight: 600;
    }

</style>

<header id="home" class="hero">
    <div class="overlay"></div>
    <div class="hero-content" data-aos="fade-up">
        <img src="{{ asset('public/img/logo.png') }}" alt="Logo SunWest CleanUp" class="logo">
        <h1>Limpieza Profesional Para Todo Tipo de Obra</h1>
        <p>Demoliciones — Excavaciones — Sitios Industriales — Post-Construcción</p>
        <a href="#contacto" class="btn-hero">Solicitar Presupuesto</a>
    </div>
</header>

<section id="about" class="about" data-aos="fade-right">
    <h2>¿Quiénes Somos?</h2>
    <p>En <strong>SunWest CleanUp</strong> somos especialistas en limpieza para demoliciones, excavaciones, construcción e industria. Nuestro equipo cuenta con herramientas profesionales, experiencia comprobada y compromiso absoluto con la seguridad y resultados impecables.</p>
</section>

<section id="services" class="services">
    <h2 data-aos="fade-left">Servicios</h2>

    <div class="service-list">

        <div class="service-card" data-aos="zoom-in">
            <img src="{{ asset('public/img/limpieza1.jpg') }}" alt="">
            <h3>Limpieza de Demoliciones</h3>
            <p>Remoción completa de escombros, materiales pesados y residuos de demolición.</p>
        </div>

        <div class="service-card" data-aos="zoom-in">
            <img src="{{ asset('public/img/limpieza2.jpg') }}" alt="">
            <h3>Limpieza en Excavaciones</h3>
            <p>Mantenimiento constante de hoyos, zanjas y áreas de excavación.</p>
        </div>

        <div class="service-card" data-aos="zoom-in">
            <img src="{{ asset('public/img/limpieza4.jpg') }}" alt="">
            <h3>Limpieza Post-Construcción</h3>
            <p>Dejamos el área lista para entrega final o siguiente fase del proyecto.</p>
        </div>

        <div class="service-card" data-aos="zoom-in">
            <img src="{{ asset('public/img/limpieza5.jpg') }}" alt="">
            <h3>Retiro de Basura Industrial</h3>
            <p>Recolección y retiro de materiales, metales, madera, concreto y más.</p>
        </div>

        <div class="service-card" data-aos="zoom-in">
            <img src="{{ asset('public/img/limpieza6.jpg') }}" alt="">
            <h3>Servicios con Mano de Obra</h3>
            <p>Personal capacitado para apoyo en carga, limpieza y mantenimiento.</p>
        </div>

    </div>
</section>

<section id="gallery" class="gallery" data-aos="fade-up">
    <h2>Galería de Trabajos Realizados</h2>
    <div class="gallery-grid">
        <img src="{{ asset('public/img/gal1.jpg') }}">
        <img src="{{ asset('public/img/gal2.jpg') }}">
        <img src="{{ asset('public/img/gal3.jpg') }}">
        <img src="{{ asset('public/img/gal4.jpg') }}">
        <img src="{{ asset('public/img/gal5.jpg') }}">
        <img src="{{ asset('public/img/gal6.jpg') }}">
    </div>
</section>

<section class="extras" id="extras">
    <h2 data-aos="fade-right">¿Por Qué Elegirnos?</h2>
    <div class="service-list">

        <div class="feature-box" data-aos="zoom-in">
            <h3>🚧 Experiencia Profesional</h3>
            <p>Años trabajando con constructoras y empresas industriales.</p>
        </div>

        <div class="feature-box" data-aos="zoom-in">
            <h3>⚡ Atención Inmediata</h3>
            <p>Respuesta rápida y disponibilidad para trabajos urgentes.</p>
        </div>

        <div class="feature-box" data-aos="zoom-in">
            <h3>🧰 Equipo Especializado</h3>
            <p>Herramientas industriales y procesos eficientes.</p>
        </div>

        <div class="feature-box" data-aos="zoom-in">
            <h3>💸 Precios Accesibles</h3>
            <p>Los mejores costos en La Paz, BCS.</p>
        </div>

    </div>
</section>

<section id="contacto" class="contact" data-aos="fade-up">
    <h2>Contáctanos</h2>
    <p>Solicita un presupuesto sin compromiso.</p>

    <form action="{{ route('send.contact') }}" method="POST" class="contact-form">
        @csrf
        <input type="text" name="name" placeholder="Tu nombre" required>
        <input type="email" name="email" placeholder="Correo electrónico" required>
        <textarea name="message" rows="5" placeholder="Mensaje" required></textarea>
        <button type="submit">Enviar Mensaje</button>
    </form>

    <div class="direct-contacts" data-aos="fade-right">
        <p><strong>Teléfono:</strong> +52 612 555 7890</p>
        <p><strong>Email:</strong> contacto@sunwestcleanup.com</p>
        <p><strong>Ubicación:</strong> La Paz, Baja California Sur</p>
    </div>
</section>

<footer>
    <p>© {{ date('Y') }} SunWest CleanUp. Todos los derechos reservados.</p>
</footer>

@endsection