@extends('layouts.app')

@section('content')

    <section class="hero-dreamwell">

        <div class="hero-overlay">

            <div class="hero-content">

                <h1 class="hero-title">
                    We provide <span>the best house</span> to be your home
                </h1>

                <p class="hero-subtitle">
                    We provide the best house to be your home
                </p>

                <!-- BUSCADOR -->

                <div class="search-box">

                    <ul class="nav nav-tabs search-tabs">

                        <li class="nav-item">
                            <a class="nav-link active">Buy</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link">Co-Living</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link">Rent</a>
                        </li>

                    </ul>

                    <div class="search-fields">

                        <select>
                            <option>Type</option>
                            <option>House</option>
                        </select>

                        <select>
                            <option>Location</option>
                            <option>La Paz</option>
                        </select>

                        <input type="text" placeholder="Advanced Search">

                        <button class="btn-search">
                            <i class="fas fa-search"></i> Search
                        </button>

                    </div>

                </div>

            </div>

        </div>

    </section>

@endsection


<style>
    /* HERO COMPLETO */

    .hero-dreamwell {

        position: relative;

        width: 100vw;

        height: 100vh;

        background-image: url("{{ asset('img/imggg.jpg') }}");

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        display: flex;

        align-items: center;

    }

    /* CAPA PARA MEJORAR LECTURA */

    .hero-overlay {

        width: 100%;

        height: 100%;

        background: linear-gradient(to right,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.85) 35%,
                rgba(255, 255, 255, 0.3) 55%,
                rgba(255, 255, 255, 0) 75%);

        display: flex;

        align-items: center;

    }

    /* CONTENIDO */

    .hero-content {

        max-width: 700px;

        margin-left: 8%;

    }

    /* TITULO */

    .hero-title {

        font-size: 64px;

        font-weight: 800;

        color: #1f2c40;

        line-height: 1.1;

    }

    .hero-title span {

        color: #22c55e;

    }

    /* SUBTITULO */

    .hero-subtitle {

        font-size: 18px;

        color: #6b7280;

        margin-top: 20px;

        margin-bottom: 40px;

    }

    /* BUSCADOR */

    .search-box {

        background: white;

        padding: 25px;

        border-radius: 14px;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        max-width: 850px;

    }

    /* TABS */

    .search-tabs {

        border: none;

    }

    .search-tabs .nav-link {

        border: none;

        color: #666;

        font-weight: 500;

    }

    .search-tabs .nav-link.active {

        color: #22c55e;

        font-weight: 600;

    }

    /* CAMPOS */

    .search-fields {

        display: flex;

        gap: 15px;

        margin-top: 15px;

    }

    .search-fields select,
    .search-fields input {

        height: 60px;

        border-radius: 8px;

        border: 1px solid #ddd;

        padding: 10px;

        flex: 1;

    }

    /* BOTON */

    .btn-search {

        background: #22c55e;

        border: none;

        padding: 0 25px;

        border-radius: 8px;

        color: white;

        font-weight: 600;

        height: 60px;

    }
</style>