@extends('layouts.guest.general')

@section('main_content')
    {{-- NAVIGATION --}}
    <section class="page-title"
        style="background-image: url({{ asset('images/machinery/general/General-Machinery/Header.png') }}" id="about">
        <div class="auto-container">
            <h1 class="d-none">Second Hand Machinery and New Machinery</h1>
            <ul class="bread-crumb clearfix">
                <li><a href="{{ route('home.index') }}">{{ __('messages.home') }} </a></li>
                <li>{{ __('messages.machinery') }} </li>
            </ul>
            <h2>{{ __('messages.machinery') }} </h2>
        </div>
    </section>
    <!-- End Page Title -->





    <section class="process-section" id="history">
        <div class="auto-container rm-auto-container">
            <div class="sec-title alternate text-center mb-5">
                <h2 class="text-capitalize">{{ __('messages.itg-machinery') }} </h2>
            </div>
            <div class="row clearfix">
                <div class="images-column col-lg-6 col-md-6 col-sm-12">
                    <img src="{{ asset('images/machinery/general/General-Machinery/1.png') }}" alt="">
                </div><!-- Content Column -->
                <div class="content-column col-lg-6 col-md-6 col-sm-12">
                    <div class="inner-column">
                        <!-- Sec Title -->
                        <!-- Blocks Outer -->
                        <div class="blocks-outer">
                            <!-- Process Block -->
                            <div class="process-block">
                                <div>
                                    <div class="sec-title alternate text-center">
                                        <h2 class="text-capitalize">{{ __('messages.our-commitment') }} </h2>
                                    </div>
                                    <div class="text-justify px-5">
                                        <p>{{ __('messages.our-commitment-text') }} </p>
                                    </div>
                                </div>
                            </div>
                            <!-- End Blocks Outer -->
                        </div>
                    </div>
                    <!-- Images Column -->
                </div>
            </div>
    </section>

    {{-- New Machinery --}}
    <section class="process-section">
        <div class="auto-container rm-auto-container">
            <div class="sec-title alternate text-center mb-5">
                <h2 class="text-capitalize">{{ __('messages.new-machinery') }} </h2>
                <div class="text-justify mt-3">
                    <p>{{ __('messages.nm-new-machinery-text') }} </p>
                </div>
            </div>

            <div class="row">
                @for ($i = 1; $i < 4; $i++)
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <div class="container d-flex justify-content-center align-items-center">
                            <div class="card machinery-card text-center bg-brown ">
                                <div>
                                    <p class="_h2 number mb-5">0{{ $i }} </p>
                                    <p class="card-title">{{ __('messages.nm-card-title' . $i) }} </p>
                                    <p class="card-text">{{ __('messages.nm-card-descrip' . $i) }} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>

        <div class="mt-3">
            <div class="container d-flex justify-content-center align-items-center min-vh-100">
                <a href="{{ route('machinery.index') }}" class="btn-web-catalog">{{ __('messages.nm-btn-check') }} </a>
            </div>
        </div>
    </section>


    <section class="d-flex">
        <div class="banner">
            <div class="d-flex flex-column text-md-start auto-container">
                <div style="padding-right: 25%">
                    <h2 class="banner-title text-uppercase">{{ __('messages.nm-title-contact') }} </h2>
                </div>
                <div class="container mt-3">
                    <div class="row">
                        <!-- Para dispositivos móviles, cada elemento ocupa 12 columnas, apilándolos uno sobre otro. -->
                        <!-- Para dispositivos medianos y más grandes, cada elemento ocupará 6 columnas, ubicándolos uno al lado del otro. -->
                        <div class="col-12  col-md-4 d-flex mb-3 mb-md-0 text-start">
                            <a href="{{ route('contact.index') }}#contactform"
                                class="btn btn-call">{{ __('messages.nm-btn-get') }}</a>
                        </div>
                        <div class="col-12 col-lg-6 d-flex">
                            <span class="banner-text text-white">{!! __('messages.nm-text-send-email') !!}</span>
                        </div>
                    </div>
                </div>

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

    <section class="process-section">
        <div class="auto-container">
            <div class="sec-title alternate text-center mb-5">
                <h2 class="text-capitalize">{{ __('messages.nm-title-second') }} </h2>
                <div class="text-justify mt-3">
                    <p>{{ __('messages.nm-text-second') }} </p>
                </div>
            </div>

            <div class="row clearfix">

                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="blocks-outer py-5">
                            <!-- Process Block -->
                            <div class="process-block">
                                <div class="inner-box">
                                    <div class="number">01</div>
                                    <p class="font-part-list">{!! __('messages.sc-01') !!} </p>
                                </div>
                            </div>
                            <!-- Process Block -->
                            <div class="process-block">
                                <div class="inner-box">
                                    <div class="number">02</div>
                                    <div class="py-4">
                                        <p class="font-part-list">{{ __('messages.sc-02') }} </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Process Block -->
                            <div class="process-block">
                                <div class="inner-box">
                                    <div class="number">03</div>
                                    <div class="py-3">
                                        <p class="font-part-list">{{ __('messages.sc-03') }} </p>
                                    </div>
                                </div>
                            </div>

                            <div class="upper-column info-box d-inline px-2">
                                <div class="outer-box p-0">
                                    <a class="btn-web-catalog text-capitalize c-main"
                                        href="{{ route('contact.index') }}#contactform">{{ __('messages.contacts-us') }}
                                        </span></a>
                                </div>
                            </div>

                        </div>
                        <!-- End Blocks Outer -->
                    </div>
                </div>

                <!-- Images Column -->
                <div class="images-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="image wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ asset('images/machinery/general/General-Machinery/2.png') }}" alt="" />
                        </div>
                        <div class="image wow fadeInUp p-3" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ asset('images/machinery/general/General-Machinery/3.png') }}" alt="" />
                        </div>
                        <div class="image-two wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ asset('images/machinery/general/General-Machinery/4.png') }}" alt="" />
                        </div>
                    </div>
                </div>

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



    @include('components.testimonials')

@endsection

@push('styles')
    <style>
        .machinery-card {
            background-color: #f2f1ed;
            width: 350px;
            padding: 20px;
            border: none;
            border-radius: 0;
        }

        .number {
            font-size: 3.5rem;
            color: #006400;
            margin-bottom: 20px;
            text-align: end;
        }

        .card-title {
            font-size: 1.5rem;
            color: #4CAF50;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 80px;
        }

        .card-text {
            font-size: 0.875rem;
            color: #333;
        }


        .banner {
            width: 100%;
            margin-bottom: 30px;
            background-color: #1c1c1b;
            padding: 110px;
        }

        .banner-title {
            font-size: 2rem;
            color: #b2c5b5;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .btn-call {
            background-color: var(--color-msb);
            color: #1c1c1b;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;

        }

        .btn-call:hover {
            background-color: #8ea390;
            color: #1c1c1b;
        }

        .banner-text {
            color: #b2c5b5;
            font-size: 1rem;
        }

        .banner-link {
            color: #ffffff;
            font-weight: bold;
            text-decoration: none;
        }

        .banner-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 767px) {
            .banner {
                padding: 50px;
            }
        }
    </style>
@endpush