@extends('layouts.webpage.main_two')

@section('page-title', 'Home')

@section('content')

@php
    use Illuminate\Support\Str;
@endphp

<!-- Hero Section -->


<section class="hero-section">
    <div id="carouselExampleDark" class="carousel slide carousel-dark" data-bs-ride="carousel" data-bs-interval="3000">

        <div class="carousel-inner">
             @foreach($hm_hero as $key => $hm)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}" data-bs-interval="3000">
                    <img src="{{ asset('uploads/page_home/' . $hm->hero_banner_img) }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption  d-md-block ">
                        <p class="text-white sub-title">{{ $hm->built_title }} </p>
                        <h1 class="text-white"> {{ $hm->hero_title }}</h1>
                        <p class="text-white">{!! preg_replace('#^<p>(.*)</p>$#', '$1', $hm->built_description) !!}</p>
                        <div class="d-flex gap-2 justify-content-center mt-3 flex-wrap">
                            <a href="{{ route('built.info', $hm->id) }}"> <button class="btn main-butn-white"> Read More <i class="bi bi-chevron-right"></i></button></a>
                            <a href="{{ route('request') }}"><button class="btn main-butn"> Get a Quote<i class="bi bi-chevron-right"></i></button></a>
                            <a href="{{ asset('uploads/brochures/' . $footer->brochure_link) }}" target="_blank"><button class="btn main-butn-white "> Download Brochure <i class="bi bi-chevron-right"></i></button></a>
                        </div>

                    </div>
                </div>
             @endforeach
            <!-- <div class="carousel-item" data-bs-interval="2000">
                <img src="{{ asset('uploads/page_home/banner1.jpg') }}" class="d-block w-100" alt="...">
                <div class="carousel-caption  d-md-block ">
                    <p class="text-white sub-title">Building the Future with</p>
                    <h1 class="text-white"> Meking Steel Redefines Automobile Showroom Design for Mahindra!</h1>
                    <p class="text-white">Meking Steel specializes in pre-engineered building solutions designed for strength, unmatched quality and speed.</p>
                    <div class="d-flex gap-2 justify-content-center mt-3 flex-wrap">
                        <button class="btn main-butn-white"> Read More <i class="bi bi-chevron-right"></i></button>
                        <a href="{{ route('request') }}"><button class="btn main-butn"> Get a Quote<i class="bi bi-chevron-right"></i></button></a>
                         <a href="{{ asset('uploads/brochures/' . $footer->brochure_link) }}" target="_blank"><button class="btn main-butn-white "> Download Broacher <i class="bi bi-chevron-right"></i></button></a>
                    </div>

                </div>
            </div>
            <div class="carousel-item">
                <img src="{{ asset('uploads/page_home/banner2.jpg') }}" class="d-block w-100" alt="...">
                <div class="carousel-caption  d-md-block ">
                    <p class="text-white sub-title">Building the Future with</p>
                    <h1 class="text-white">Transform Your Industrial Construction with Meking Steel</h1>
                    <p class="text-white">Meking Steel specializes in pre-engineered building solutions designed for strength, teel constructions that meet every specification with unmatched quality and speed.</p>
                    <div class="d-flex gap-2 justify-content-center mt-3 flex-wrap">
                        <button class="btn main-butn-white"> Read More <i class="bi bi-chevron-right"></i></button>
                       <a href="{{ route('request') }}"> <button class="btn main-butn"> Get a Quote<i class="bi bi-chevron-right"></i></button></a>
                         <a href="{{ asset('uploads/brochures/' . $footer->brochure_link) }}" target="_blank"><button class="btn main-butn-white "> Download Broacher <i class="bi bi-chevron-right"></i></button></a>
                    </div>

                </div>
            </div> -->
        </div>
        <button class="carousel-control-prev d-md-block d-none" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

        </button>
        <button class="carousel-control-next d-md-block d-none" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>

        </button>
    </div>
    
</section>

<!-- <section class="cate-new">
    <div class="container ">
        <div class=" owl-carousel owl-theme cate ">

            <div class="category-item item">
                <img src="https://picsum.photos/200?1">
                <p>Airport & Hangars</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?2">
                <p>Warehouse</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?3">
                <p>Factories</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?4">
                <p>Stadium</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?5">
                <p>Mezzanine<br>Buildings</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?6">
                <p>Sports<br>Complex</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?7">
                <p>School<br>Buildings</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?8">
                <p>Multi-storey<br>Steel buildings</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?9">
                <p>Infrastructure<br>Project</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?10">
                <p>Roofing<br>Solution</p>
            </div>

            <div class="category-item item">
                <img src="https://picsum.photos/200?11">
                <p>Shelters<br>Aanganwadi Center</p>
            </div>

        </div>
    </div>
</section> -->

<section class="cate-new">
    <div class="container">
        <div class="owl-carousel owl-theme cate">
            @foreach($home_service as $service)
                <div class="category-item item">
                    <img src="{{ asset('uploads/home_services/' . $service->img) }}" alt="{{ $service->service_name }}">
                    <p>{{ \Illuminate\Support\Str::limit($service->service_name, 11, '...') }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>


{{-- Built Section --}}
@if(!empty($home->built_title) || !empty($home->built_description) || !empty($home->built_stats))
<div data-aos="fade-up">
    <section class="built py-5">
        <div class="container">
            <div class="row align-items-center">

                <!-- Left Content -->
                <div class="col-lg-7 mb-4">
                    <h2 class="main-title">{{ $home->built_title ?? 'Built for quality, Built to last' }}</h2>
                    <p class="main-para mt-3">
                        <!-- {{ $home->built_description ?? 'Meking Steel is the trusted partner for businesses and industries seeking reliable pre-engineered and structural steel solutions. With over 100+ projects delivered and 1.8+ million sq. meters built, we combine precision, speed, and safety to deliver unmatched quality backed by a customer-first approach.' }} -->
                    {!! preg_replace(
                        '/^<p[^>]*>|<\/p>$/',
                        '',
                        $home->built_description 
                            ?? 'Meking Steel is the trusted partner for businesses and industries seeking reliable pre-engineered and structural steel solutions. With over 100+ projects delivered and 1.8+ million sq. meters built, we combine precision, speed, and safety to deliver unmatched quality backed by a customer-first approach.'
                    ) !!}
                    </p>

                    @if(!empty($home->built_button_link) && !empty($home->built_button_text))
                    <a href="{{ $home->built_button_link }}">
                        <button class="main-butn">{{ $home->built_button_text }}</button>
                    </a>
                    @else
                    <a href="{{ route('built.info', $home->id) }}"> <button class="main-butn">Know More</button></a>
                    @endif
                </div>

                <!-- Right Stats -->
                <div class="col-lg-5">
                    @php
                    $builtStats = is_string($home->built_stats)
                    ? json_decode($home->built_stats, true)
                    : $home->built_stats;
                    @endphp

                    @if(!empty($builtStats) && is_array($builtStats))
                    <div class="row g-4">
                        @foreach($builtStats as $index => $stat)
                        <div class="col-6">
                            <div class="stat-card text-center">
                                <div class="stat-icon">
                                    <img src="{{ asset('uploads/page_home/' . ($stat['icon'] ?? 'b'.($index+1).'.svg')) }}" alt="icon">
                                </div>
                                <h3>{{ $stat['title'] ?? 'N/A' }}</h3>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>

        </div>
    </section>
</div>
@endif


{{-- CEO Section --}}
<div data-aos="fade-up">
    <section class="ceo py-5">
        <div class="container">
            <div class="row align-items-center">

                {{-- CEO Text Content --}}
                <div class="col-lg-6">
                    <h2 class="main-title mb-4">
                        {{ $home->ceo_title ?? 'From the desk of CEO' }}
                    </h2>

                    <p class="main-para">
                        {{ $home->ceo_message ?? 
                                    "Meking Buildtec India Pvt. Ltd. has developed robust presence in the Indian market within a short time span of its establishment. I dedicate this swift achievement to my entire team that has been behind me throughout and it continues to boost my inspiration. In the past few years, the concept of ‘pre engineered buildings’ has found resonance and we have been in the forefront by offering the custom tailored solutions for the enterprising firms. I do believe that engineering alone cannot be the sole determinant when it comes to structural framing tasks. However, it is the ability to match client’s demands along the dimensions of applicative value, budget, precision and finesse so that a matching fabrication is produced. Timeline is yet another factor that needs to be taken care of! We have performed very fruitfully along all these dimensions so that complete satisfaction is achieved. Meking Buildtec India is growing continuously while riding on its professionalism and tech expertise that is now unmatched. Success of Meking Buildtec India Pvt. Ltd. is attributed to all the HR echelons in the Company and they continue to excel in their endeavors to set new standards and benchmarks. We put great emphasis on ensuring customization for every project. This is attempted through dynamic analyses and consultation with the client. Our engineers and finance teams work cohesively to find out the best and matching fabrication plan. This keeps cost less as wastages are eliminated."
                        }}
                    </p>


                </div>

                {{-- CEO Image --}}
                <div class="col-lg-6 text-lg-end text-center">
                    @if(!empty($home->ceo_image))
                    <img class="w-100 rounded shadow"
                        src="{{ asset('uploads/page_home/' . $home->ceo_image) }}"
                        alt="{{ $home->ceo_name ?? 'CEO Image' }}"
                        style="max-width: 480px; border-radius: 15px;">
                    @else
                    <img class="w-100 rounded shadow"
                        src="{{ asset('images/ceo.svg') }}"
                        alt="Default CEO Image"
                        style="max-width: 480px;">
                    @endif
                    <div class="mr">
                        <h3>{{ $home->ceo_name ?? 'MR. SUJIT PRASAD' }}</h3>
                        <h4>{{ $home->ceo_designation ?? 'CEO & Managing Director' }}</h4>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>



{{-- Our Mission Section --}}
<div data-aos="fade-up">
    <!-- <section class="mission py-5">
        <div class="container">
            <div class="row g-4 align-items-stretch">

                @foreach($mission as $m)
                @php
                // Decode mission_vision_items safely
                $missionItems = $m->mission_vision_items;
                if (is_string($missionItems)) {
                $decoded = json_decode($missionItems, true);
                $missionItems = is_array($decoded) ? $decoded : [];
                }
                @endphp

                @if(!empty($missionItems))
                @foreach($missionItems as $item)
                {{-- Text Card --}}
                <div class="col-lg-4 col-md-6">
                    <div class="info-card ">
                        <h4 class="fw-bold">{{ $item['title'] ?? '' }}</h4>
                        <p class="text-muted">{{ $item['description'] ?? '' }}</p>
                    </div>
                </div>

                {{-- Image Card --}}
                @if(!empty($item['image']))
                <div class="col-lg-4 col-md-6 align-self-center">
                    <div class="info-img text-center">
                        <img src="{{ asset('uploads/page_home/' . $item['image']) }}"
                            alt="{{ $item['title'] ?? 'Mission Image' }}"
                            class="img-fluid rounded">
                    </div>
                </div>
                @endif
                @endforeach
                @endif
                @endforeach

            </div>
        </div>
    </section> -->

    <!-- <section class="process-section" style="background-image: url('{{ asset('uploads/page_home/built-new.png') }}');">
        <div class="container">
            <div class="text-center">
                <h2 class="main-title">Built on Purpose, Powered by Precision</h2>
            </div>


            <div class="row g-4 pt-5">

               
                <div class="col-lg-4 col-md-6">
                    <div class="process-card">
                        <img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952" alt="">
                        <div class="icon-box">
                            <i class="bi bi-leaf-fill"></i>
                        </div>
                        <div class="card-body">
                            <h5>Our Mission</h5>
                            <p>
                                To become the premier, most trusted, and forward-thinking supplier
                                and service provider in the steel construction industry — delivering
                                innovative, high-quality, and cost-effective solutions.
                            </p>
                        </div>
                    </div>
                </div>

                
                <div class="col-lg-4 col-md-6">
                    <div class="process-card">
                        <img src="https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc" alt="">
                        <div class="icon-box">
                            <i class="bi bi-lightbulb-fill"></i>
                        </div>
                        <div class="card-body">
                            <h5>Our Vision</h5>
                            <p>
                                To supply high-quality steel construction products and related
                                services worldwide by utilizing innovative technologies, motivated
                                human resources, ethical practices, and continuous improvement.
                            </p>
                        </div>
                    </div>
                </div>

                
                <div class="col-lg-4 col-md-6">
                    <div class="process-card">
                        <img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952" alt="">
                        <div class="icon-box">
                            <i class="bi bi-file-person-fill"></i>
                        </div>
                        <div class="card-body">
                            <h5>Meking Project Excellence</h5>
                            <p>
                                Our engineering works diligently to provide cost-effective,
                                comprehensive design calculation that can be easily understood
                                and vetted by any third party, ensuring excellence and compliance.
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section> -->

    <section class="process-section" style="background-image: url('{{ asset('uploads/page_home/built-new.png') }}');">
        <div class="container">
            <div class="text-center">
                <h2 class="main-title">Built on Purpose, Powered by Precision</h2>
            </div>

            <div class="owl-carousel owl-theme new pt-5">
                @foreach($mission as $m)
                @php
                $missionItems = $m->mission_vision_items;
                if (is_string($missionItems)) {
                $decoded = json_decode($missionItems, true);
                $missionItems = is_array($decoded) ? $decoded : [];
                }
                @endphp

                @if(!empty($missionItems))
                @foreach($missionItems as $item)
               
                    <div class="item">
                    <div class="process-card">
                        @if(!empty($item['image']))
                        <img src="{{ asset('uploads/page_home/' . $item['image']) }}" alt="{{ $item['title'] ?? 'Mission Image' }}">
                        @endif

                        @if(!empty($item['icon']))
                        <div class="icon-box">
                            <i class="{{ $item['icon'] }}"></i>
                        </div>
                        @endif

                        <div class="card-body">
                            <h3>{{ $item['title'] ?? '' }}</h3>
                            <p>{{ $item['description'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
        
                @endforeach
                @endif
                @endforeach
            </div>
        </div>
    </section>


</div>



<!-- 
<section class="choose-section py-4" style="background: none;">
    <div data-aos="fade-up">
        <div class="container">
           
            <div class="row text-center mb-5">
                <div class="col-lg-12">
                    <h2 class="main-title mb-2">Why Choose Us</h2>
                    <p class="main-para">
                        Delivering reliable, custom-engineered steel buildings with unmatched quality,
                        timely execution, and expert support—every step of the way.
                    </p>
                </div>
            </div>

            <div class="row align-items-center">
             
                <div class="col-lg-6">
                    @if(!empty($chooseItems) && count($chooseItems) > 0)
                    @foreach($chooseItems as $item)
                    <div class="icon-box mb-4 d-flex align-items-start">
                        <div class="icon text-white bg-dark rounded-circle p-3 me-3">
                            <img src="{{ asset('uploads/choose_meking/' . ($item->icon ?? '')) }}" class="wc-icon" alt="">
                        </div>
                        <div>
                            <h5>{{ $item->title ?? '' }}</h5>
                            <p>{{ $item->desc ?? '' }}</p>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <p>No features available at the moment.</p>
                    @endif
                </div>

                <div class="col-lg-6 choose-img text-center">
                    <img src="{{ asset('uploads/choose_meking/' . ($chooseImage->image ?? 'default.png')) }}"
                        alt="Factory Image" class="img-fluid shadow rounded">
                </div>
            </div>
        </div>
    </div>
</section> -->


<section class="why-choose">
    <div class="container">
        <div class="row align-items-center">
            <!-- LEFT CONTENT -->
            <div class="col-lg-6">
                <h2 class="main-title">Why choose us</h2>
                <p class="text-muted mb-4">
                    Delivering reliable, custom-engineered steel buildings with unmatched quality,
                    timely execution, and expert support—every step of the way.
                </p>

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="bi bi-award"></i>
                            </div>
                            <div>
                                <div class="feature-title">Proven Experience</div>

                            </div>
                        </div>
                        <p class="text-muted mb-0">
                            2,100+ projects delivered with consistent quality and performance.
                        </p>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="bi bi-clock-history"></i>
                            </div>
                            <div>
                                <div class="feature-title">Timely Delivery</div>

                            </div>
                        </div>
                        <p class="text-muted mb-0">
                            On-time execution with average completion under 30 days.
                        </p>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="bi bi-gear"></i>
                            </div>
                            <div>
                                <div class="feature-title">Quality Engineering</div>

                            </div>
                        </div>
                        <p class="text-muted mb-0">
                            Durable, precise structures built to meet global standards.
                        </p>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="bi bi-people"></i>
                            </div>
                            <div>
                                <div class="feature-title">Expert Team</div>

                            </div>
                        </div>
                        <p class="text-muted mb-0">
                            Transparent, personalized service from start to finish.
                        </p>
                    </div>

                </div>
            </div>

            <!-- RIGHT IMAGE -->
            <div class="col-lg-6 mt-4 mt-lg-0">
                <div class="choose-img">
                    <img src="https://www.mekingsteel.com/uploads/choose_meking/1766748303_Factory.png" alt="Warehouse">
                </div>
            </div>

        </div>
    </div>
</section>


<div data-aos="fade-up">
    <!-- <section class="projects-section text-center py-5">
        <div class="container">
            <div class="mb-4">
                <h2 class="main-title">Latest Projects</h2>
                <p class="main-para">
                    Meking Steel delivers a landmark dome structure using advanced space frame and sustainable
                    engineering solutions.
                </p>
                <a href="#" class="btn btn-link fw-bold text-dark">
                    View All <i class="bi bi-arrow-right-circle-fill"></i>
                </a>
            </div>

          
            <div class="row g-4">
                @foreach($projects as $proj)
                <div class="col-lg-4 col-md-6">
                    <div class="card shadow-sm position-relative">

                        {{-- Location Badge (optional, if you have a location field) --}}
                        @if(!empty($proj->location))
                        <div class="location-badge">
                            <i class="bi bi-geo-alt-fill"></i> {{ $proj->location }}
                        </div>
                        @endif

                        {{-- Project Image --}}
                        <img src="{{ asset('uploads/projects/featured/'.$proj->featured_img) }}" class="card-img-top" alt="{{ $proj->title }}">

                        {{-- Card Content --}}
                        <div class="card-body text-start">
                            <h5 class="card-title">{{ $proj->title }}</h5>
                            <p class="card-text">{{ $proj->short_description }}</p>
                            <a href="{{ route('p.slug', $proj->id) }}" class="discover-link">
                                <i class="bi bi-arrow-right-circle-fill"></i> DISCOVER MORE
                            </a>
                        </div>  
                    </div>
                </div>
                @endforeach
            </div>

        </div>
    </section> -->

    <!-- <section class="news py-5 px-2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4 mb-lg-0 mb-4">

                    <h2 class="main-title">Latest Projects</h3>

                        <p class="title-p">Stay updated with the latest news, expert tips, and real estate trends from
                            Prajapati Group.</p>
                        <a href="#" class="learn-more">
                            View All <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                </div>
                <div class="col-lg-8">

                    <div class="owl-carousel owl-theme new">

                        <div class="item">
                            <div class="blog-card">
                                <img src="./images/news1.png" alt="Flat Buying">
                                <div class="blog-meta mt-2">
                                    JULY 21, 2023 | Market Trends
                                </div>
                                <div class="blog-title">
                                    Reliance Project
                                </div>
                                <a href="#" class="learn-more">
                                    Discover More <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </div>

                        <div class="item">
                            <div class="blog-card">
                                <img src="./images/news2.png" alt="Navi Mumbai">
                                <div class="blog-meta mt-2">
                                    JULY 21, 2023 | Construction Updates
                                </div>
                                <div class="blog-title">
                                    Reliance Project
                                </div>
                                <a href="#" class="learn-more">
                                    Discover More <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </div>

                        <div class="item">
                            <div class="blog-card">
                                <img src="./images/news3.png" alt="Construction">
                                <div class="blog-meta mt-2">
                                    JULY 21, 2023 | Construction Tips
                                </div>
                                <div class="blog-title">
                                    Reliance Project
                                </div>
                                <a href="#" class="learn-more">
                                    Discover More <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section> -->

    <section class="news py-5 px-2">
        <div class="container">
            <div class="row align-items-center">

                {{-- Left Content --}}
                <div class="col-lg-4 mb-lg-0 mb-4">
                    <h2 class="main-title">Latest Projects</h2>

                    <p class="title-p">
                        Stay updated with the latest projects, engineering excellence, and landmark constructions by Meking Steel.
                    </p>

                    <a href="{{ route('project') }}" class="learn-more">
                        View All <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>

                {{-- Right Carousel --}}
                <div class="col-lg-8">
                    <div class="owl-carousel owl-theme new">

                        @foreach($projects as $proj)
                            <div class="item">
                                <div class="blog-card">

                                    {{-- Project Image --}}
                                    <img 
                                        src="{{ asset('uploads/projects/featured/'.$proj->featured_img) }}" 
                                        alt="{{ $proj->title }}"
                                    >

                                    {{-- Meta (date + category / location) --}}
                                    <div class="blog-meta mt-2">
                                        {{ $proj->created_at->format('F d, Y') }}
                                        @if($proj->location)
                                            | {{ $proj->location }}
                                        @endif
                                    </div>

                                    {{-- Project Title --}}
                                    <div class="blog-title">
                                         {{ \Illuminate\Support\Str::words($proj->title, 2, '...') }}
                                    </div>


                                    {{-- Discover Link --}}
                                    <a href="{{ route('p.slug', $proj->id) }}" class="learn-more">
                                        Discover More <i class="bi bi-arrow-right ms-1"></i>
                                    </a>

                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>

            </div>
        </div>
    </section>

</div>


<div data-aos="fade-up">
    <section class="client text-center py-5">
        <h2 class="main-title">Our Clients</h2>

        <div class="owl-carousel owl-theme our py-5">
            @foreach($clients as $client)
            <div class="item">
                <img src="{{ asset('uploads/clients/' . $client->client_logo) }}" alt="{{ $client->client_name }}" class="img-fluid" style="max-height: 100px; object-fit: contain;">
            </div>
            @endforeach
        </div>

        <div class="meking pt-md-5 pt-0 px-2">
            <h3>MEKING INDIA is ISO 9001 and OHSAS 18001 Certified</h3>
            <p class="main-para pb-3">
                Steel G+3 building for a mall over existing RCC building was challenging.
                Meking India team wears yet another feather on the cap.
                We plan to move vertical and give clients robust and economical solutions.
            </p>
            <a href="{{ asset('uploads/iso_certificate/ISO.pdf') }}"
                class="main-butn"
                download>
                    Download Certificate
                    <i class="bi bi-arrow-right-circle-fill ms-2"></i>
                </a>
        </div>
    </section>
</div>


<div data-aos="fade-up">
    <section class="download py-4 px-3">
        <div class="container">
            <div class="down-inner row align-items-end">
                <div class="col-md-6 p-5 px-md-5 px-4 p-3 pe-md-0">
                    <h4>Download the Meking Buildtec App Today </h4>
                    <p class="main-para pb-4">Track your project, view estimates, and stay connected with our team —
                        all
                        from
                        your phone.</p>
                    <h5>Available now on Android and iOS.</h5>
                    <div class="playstore d-flex gap-2">
                        <a href="#"><img src="{{ asset('assets/img/googleplay.svg') }}" alt="Hand Icon"></a>
                        <a href="#"><img src="{{ asset('assets/img/apple.svg') }}"></a>
                    </div>
                </div>
                <div class="col-md-6 text-md-center text-center">
                    <img src="{{ asset('assets/img/hand.svg') }}">
                </div>
            </div>
        </div>
    </section>
</div>


<div data-aos="fade-up">
    <section class="py-5 blog">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="main-title">Our Latest Blogs</h2>
            </div>
            <div class="row g-4">
                @foreach($blogs as $blog)
                <div class="col-lg-4 col-md-6">
                      <a href="{{ route('blog.slug', $blog->slug) }}" class="blog-card-link text-black">
                    <div class="blog-card h-100">
                        <img src="{{ asset('uploads/blogs/' .$blog->featured_img) }}" class="img-fluid" alt="{{ $blog->title }}">
                        <div class="py-3">
                            <div class="blog-meta">
                                By Admin : {{ $blog->author->name ?? 'Admin' }}
                                &nbsp;&nbsp; | &nbsp;&nbsp;
                                Date : {{ \Carbon\Carbon::parse($blog->published_date)->format('d F, Y') }}
                            </div>
                            <h3>{{ $blog->title }}</h3>
                            <p>{{ Str::limit($blog->short_description, 100) }}</p>
                            <a href="{{ route('blog.slug', $blog->slug) }}" class="read-more">
                                Read More <i class="bi bi-arrow-right-circle"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
</div>




@endsection


<script>
    document.getElementById('add-stat').addEventListener('click', function() {
        const wrapper = document.getElementById('stats-wrapper');
        const div = document.createElement('div');
        div.classList.add('input-group', 'mb-2', 'stat-input');
        div.innerHTML = `
        <input type="text" name="built_stats[]" class="form-control" placeholder="Enter stat">
        <button type="button" class="btn btn-danger remove-stat">X</button>
    `;
        wrapper.appendChild(div);
    });

    // Remove stat
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-stat')) {
            e.target.closest('.stat-input').remove();
        }
    });


    $(document).ready(function() {
        $(".our").owlCarousel({
            loop: true,
            margin: 15,
            nav: false,
            dots: false,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1
                },
                768: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            },
            navText: [
                '<i class="bi bi-chevron-left"></i>',
                '<i class="bi bi-chevron-right"></i>'
            ],
        });
    });
</script>