@extends('frontend.layouts.app')
@section('title', 'Home')

@section('content')

@if($slides->count())
<div id="heroSlider" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">

        @foreach($slides as $index => $hero)
        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
            <section class="hero-section position-relative">

                <img src="{{ asset('storage/'.$hero->image) }}"
                     class="hero-bg"
                     alt="{{ $hero->title }}">

                <div class="hero-overlay"></div>

                <div class="container hero-content">
                    <div class="row">
                        <div class="col-md-7 text-white animate__animated animate__fadeInLeft">
                            <h1 class="fw-bold display-4 mb-3">
                                {{ $hero->title }}
                            </h1>

                            @if($hero->subtitle)
                                <p class="lead mb-4">{{ $hero->subtitle }}</p>
                            @endif

                            <div class="d-flex flex-wrap gap-3">
                                @if($hero->button_text && $hero->button_link)
                                    <a href="{{ $hero->button_link }}"
                                       class="btn btn-warning btn-lg shadow">
                                        {{ $hero->button_text }}
                                    </a>
                                @endif

                                <a href="{{ route('frontend.about') }}"
                                   class="btn btn-outline-light btn-lg">
                                    Company Profile
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </div>
        @endforeach

    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>
@endif




{{-- ======================================================
STATISTICS
====================================================== --}}
<section class="section-spacing bg-light">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-md-3">
                <h2 class="fw-bold text-warning mb-1">150+</h2>
                <p class="mb-0">Projects Completed</p>
            </div>
            <div class="col-md-3">
                <h2 class="fw-bold text-warning mb-1">80+</h2>
                <p class="mb-0">Engineers & Technicians</p>
            </div>
            <div class="col-md-3">
                <h2 class="fw-bold text-warning mb-1">10+</h2>
                <p class="mb-0">Years Experience</p>
            </div>
            <div class="col-md-3">
                <h2 class="fw-bold text-warning mb-1">25+</h2>
                <p class="mb-0">Active Projects</p>
            </div>
        </div>
    </div>
</section>


{{-- ======================================================
ABOUT
====================================================== --}}
<section class="section-spacing">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-md-6">
                <img src="{{ asset('images/hasalogo.jpg') }}"
                     class="img-fluid rounded shadow-sm">
            </div>

            <div class="col-md-6">
                <h6 class="text-warning fw-bold mb-2">ABOUT US</h6>
                <h2 class="fw-bold mb-3">HASA Constructions Limited</h2>

                <p class="text-muted mb-4">
                    We are a multidisciplinary construction and engineering
                    company specializing in civil works, electrical systems,
                    infrastructure development and project management.
                </p>

                <a href="{{ route('frontend.about') }}" class="btn btn-warning">
                    Read Full Profile
                </a>
            </div>
        </div>
    </div>
</section>


{{-- ======================================================
SERVICES
====================================================== --}}
<section class="section-spacing bg-dark text-white">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="fw-bold">Our Core Services</h2>
            <p class="text-light mb-0">Professional construction solutions</p>
        </div>

        <div class="row g-4">
            @foreach($services->take(6) as $service)
            <div class="col-md-4">
                <div class="service-card h-100">
                    <h5 class="fw-bold mb-3">{{ $service->title }}</h5>

                    <p class="small text-light mb-4">
                        {{ Str::limit($service->description,120) }}
                    </p>

                    <a href="{{ route('frontend.services.show',$service->slug) }}"
                       class="service-link">
                        Learn More →
                    </a>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</section>


{{-- ======================================================
WHY CHOOSE US
====================================================== --}}
<section class="section-spacing">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="fw-bold">Why Choose HASA</h2>
        </div>

        <div class="row g-4 text-center">
            <div class="col-md-3">
                <div class="feature-box">
                    <h5 class="fw-bold">Quality Assurance</h5>
                    <p class="small text-muted mb-0">International standards</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="feature-box">
                    <h5 class="fw-bold">Safety First</h5>
                    <p class="small text-muted mb-0">Zero compromise policy</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="feature-box">
                    <h5 class="fw-bold">Professional Team</h5>
                    <p class="small text-muted mb-0">Qualified engineers</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="feature-box">
                    <h5 class="fw-bold">On-Time Delivery</h5>
                    <p class="small text-muted mb-0">Reliable scheduling</p>
                </div>
            </div>
        </div>

    </div>
</section>


{{-- ======================================================
CALL TO ACTION
====================================================== --}}
<section class="cta-section">
    <div class="container text-center text-white">
        <h2 class="fw-bold mb-3">Ready to Start Your Project?</h2>
        <p class="mb-4">
            Contact HASA Constructions today for professional consultation.
        </p>
        <a href="{{ route('frontend.contact') }}" class="btn btn-warning btn-lg">
            Contact Us
        </a>
    </div>
</section>

@endsection


@push('styles')
<style>

/* GLOBAL SPACING */
.section-spacing {
    padding: 80px 0;
}

/* HERO */
.hero-section {
    height: 90vh;
    position: relative;
    overflow: hidden;
}
.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1;
    pointer-events: none; /* VERY IMPORTANT */
}
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* SERVICES */
.service-card {
    background: #1f1f1f;
    padding: 30px;
    border-left: 4px solid #ffc107;
    transition: all .3s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    background: #2a2a2a;
}
.service-link {
    color: #ffc107;
    font-weight: 600;
    text-decoration: none;
}
.service-link:hover {
    text-decoration: underline;
}

/* FEATURES */
.feature-box {
    padding: 30px;
    border-radius: 8px;
    background: #fff;
    transition: .3s;
}
.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
}

/* CTA */
.cta-section {
    padding: 90px 0;
    background: linear-gradient(90deg, #111, #333);
}

</style>
@endpush
