@extends('website.main')
@section('main-content')
    @include('website.partials.heroslider')
    <section class="ftco-section ftco-counter bg-darken section-counter">
        <div class="container-xl">
            <div class="row g-2">
                <div class="col-md-6 col-lg-3">
                    <div class="counter-wrap d-flex justify-content-between align-items-center" data-aos="fade-up"
                        data-aos-duration="1000">

                        <div class="icon d-flex align-items-center justify-content-center">
                            <span class="flaticon-lawyer"></span>
                        </div>

                        <div class="text">
                            <span class="d-block number">
                                <span id="count1" class="counter" data-count="10">0</span>
                            </span>
                            <p>Years of Experience</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="counter-wrap d-flex justify-content-between align-items-center" data-aos="fade-up"
                        data-aos-delay="100" data-aos-duration="1000">
                        <div class="icon d-flex align-items-center justify-content-center"><span
                                class="flaticon-law-1"></span></div>
                        <div class="text">
                            <span class="d-block number gradient-text"><span id="count2" class="counter"
                                    data-count="50">0</span></span>
                            <p>Specialized Lawyers</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="counter-wrap d-flex justify-content-between align-items-center" data-aos="fade-up"
                        data-aos-delay="200" data-aos-duration="1000">
                        <div class="icon d-flex align-items-center justify-content-center"><span
                                class="flaticon-happy"></span></div>
                        <div class="text">
                            <span class="d-block number gradient-text"><span id="count2" class="counter"
                                    data-count="496">0</span></span>
                            <p>Cases Handled</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="counter-wrap d-flex justify-content-between align-items-center" data-aos="fade-up"
                        data-aos-delay="300" data-aos-duration="1000">
                        <div class="icon d-flex align-items-center justify-content-center"><span
                                class="flaticon-success"></span></div>
                        <div class="text">
                            <span class="d-block number gradient-text"><span id="count2" class="counter"
                                    data-count="390">0</span></span>
                            <p>Total Cases Won</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="ftco-section ftco-no-pt ftco-no-pb ftco-about bg-light">
        <div class="overlay"></div>
        <div class="container-xl">
            <div class="row justify-content-center">
                <div class="col-md-5 heading-section heading-section-white text-center mb-4" data-aos="fade-up"
                    data-aos-duration="1000">
                    <span class="subheading">About Us</span>
                    <h2 class="mb-4">Client-Focused Law Firm Since 2018</h2>
                </div>
                <div class="col-md-8 text-center mb-5" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                    <p>We are a legal firm that adheres to the principle of quality and has been working to offer
                        legal services to establishments and individuals since 2018. We provide a comprehensive and
                        integrated set of specialized and reliable legal services and consultations according to
                        high-quality standards, with insight into the evolving needs of all sectors and fields. By
                        understanding the fine details of our valued clients' cases, we design personalized services
                        that achieve their goals efficiently and effectively.
                    </p>
                </div>
                <div class="col-md-10">
                    <div class="video-image img d-flex align-items-center justify-content-center rounded"
                        style="background-image: url('{{ asset('assets/images/about.jpeg') }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">

                        <a href="#" class="icon d-flex align-items-center justify-content-center">
                            <span class="fa fa-play"></span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('website.partials.practiceareas')

    <style>
        /* Contact Section Colors */

        .services .icon span {
            color: #1F3044 !important;
        }


        .contact-title,
        .appointment-head {
            color: #1F3044 !important;
        }


        .contact-btn {
            background: #1F3044;
            border-color: #1F3044;
            color: #fff;
        }


        .contact-btn:hover {
            background: #152231;
            border-color: #152231;
            color: #fff;
        }


        .text-danger {
            color: #dc3545 !important;
            font-size: 13px;
        }
    </style>
    <section class="ftco-appointment ftco-section img"
        style="background-image: url('{{ asset('assets/images/bg_4.jpg') }}');">

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

        <div class="container-xl">
            <div class="row">


                <div class="col-md-6 d-flex align-items-center order-lg-last pl-lg-5">

                    <div class="heading-section heading-section-white" data-aos="fade-up">

                        <span class="subheading">Our Performance</span>

                        <h2 class="mb-3">
                            Proven Results in Complex Legal Matters
                        </h2>


                        <div class="row mt-md-5">


                            <div class="col-lg-12 mb-4">
                                <div class="services d-flex w-100">

                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="fa-solid fa-scale-balanced"></span>
                                    </div>

                                    <div class="text pl-3">
                                        <h2>Strategic Legal Counsel</h2>
                                        <p>
                                            Tailored legal advice designed to mitigate risk and ensure compliance.
                                        </p>
                                    </div>

                                </div>
                            </div>



                            <div class="col-lg-12 mb-4">
                                <div class="services d-flex w-100">

                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="fa-solid fa-shield-halved"></span>
                                    </div>

                                    <div class="text pl-3">
                                        <h2>Relentless Rights Protection</h2>
                                        <p>
                                            Strong representation in commercial litigation and disputes.
                                        </p>
                                    </div>

                                </div>
                            </div>



                            <div class="col-lg-12">

                                <div class="services d-flex w-100">

                                    <div class="icon icon-2 d-flex align-items-center justify-content-center">
                                        <span class="fa-solid fa-user-tie"></span>
                                    </div>


                                    <div class="text pl-3">
                                        <h2>Elite Legal Team</h2>

                                        <p>
                                            Experienced attorneys with deep knowledge of Saudi laws.
                                        </p>

                                    </div>

                                </div>

                            </div>


                        </div>

                    </div>

                </div>



                <!-- Contact Form -->

                <div class="col-md-6 d-flex align-items-center">


                    <form action="{{ route('contact.store') }}" method="POST" class="appointment" data-aos="fade-up">

                        @csrf


                        <span class="subheading contact-title">
                            Drop A Message
                        </span>


                        <h2 class="mb-4 appointment-head">
                            Free Case Evaluation
                        </h2>



                        <div class="row">


                            <div class="col-md-12 col-lg-6">

                                <div class="form-group">

                                    <label>
                                        Your Full Name
                                    </label>


                                    <input type="text" name="name" class="form-control"
                                        value="{{ old('name') }}" placeholder="Your Full Name">


                                    @error('name')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>

                            </div>



                            <div class="col-md-12 col-lg-6">

                                <div class="form-group">

                                    <label>
                                        Email Address
                                    </label>


                                    <input type="email" name="email" class="form-control"
                                        value="{{ old('email') }}" placeholder="Email">


                                    @error('email')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>

                            </div>



                            <div class="col-md-12">


                                <div class="form-group">

                                    <label>
                                        Phone Number
                                    </label>


                                    <input type="text" name="phone" class="form-control"
                                        value="{{ old('phone') }}" placeholder="Phone Number">


                                    @error('phone')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>


                            </div>




                            <div class="col-md-12">


                                <div class="form-group">

                                    <label>
                                        Subject
                                    </label>


                                    <input type="text" name="subject" class="form-control"
                                        value="{{ old('subject') }}" placeholder="Subject">


                                    @error('subject')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>


                            </div>



                            <div class="col-md-12">

                                <div class="form-group">


                                    <label>
                                        Message
                                    </label>


                                    <textarea name="message" rows="5" class="form-control" placeholder="Message">{{ old('message') }}</textarea>



                                    @error('message')
                                        <small class="text-danger">
                                            {{ $message }}
                                        </small>
                                    @enderror


                                </div>


                            </div>



                            <div class="col-md-12">

                                <button type="submit" class="btn contact-btn py-3 px-4 rounded">

                                    Send Message

                                </button>

                            </div>


                        </div>


                    </form>


                </div>


            </div>

        </div>


    </section>

    <section class="ftco-section ftco-no-pb" style="background-color: #F5F7FA;">
        <div class="container-fluid px-md-4">
            <div class="row justify-content-center pb-5">
                <div class="col-md-8 text-center heading-section" data-aos="fade-up" data-aos-duration="1000">
                    <span class="subheading">Cases</span>
                    <h2 class="mb-3">Our Legal Services</h2>
                </div>
            </div>

            <div class="row">

                <!-- Real Estate Law -->
                <div class="col-md-3 d-flex align-items-stretch">
                    <div class="case-wrap d-flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
                        <div class="img"
                            style="background-image: url('{{ asset('assets/images/Real Estate Law.jpg') }}');">

                            <div class="text">
                                <h2>Real Estate Law</h2>
                                <p>2,430 cases solved</p>
                            </div>

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

                <!-- Compensation -->
                <div class="col-md-3 d-flex align-items-stretch">
                    <div class="case-wrap d-flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">
                        <div class="img" style="background-image: url('{{ asset('assets/images/case-5.webp') }}');">

                            <div class="text">
                                <h2>Compensation</h2>
                                <p>1,460 cases solved</p>
                            </div>

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

                <!-- Cases Successions -->
                <div class="col-md-3 d-flex align-items-stretch">
                    <div class="case-wrap d-flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
                        <div class="img" style="background-image: url('{{ asset('assets/images/case-6.webp') }}');">

                            <div class="text">
                                <h2>Cases Successions</h2>
                                <p>6,488 cases solved</p>
                            </div>

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

                <!-- Bank Law -->
                <div class="col-md-3 d-flex align-items-stretch">
                    <div class="case-wrap d-flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="700">
                        <div class="img" style="background-image: url('{{ asset('assets/images/banking.jpg') }}');">

                            <div class="text">
                                <h2>Bank Law</h2>
                                <p>1,843 cases solved</p>
                            </div>

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

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

    <section class="ftco-section testimony-section bg-light">
        <div class="container-xl">
            <div class="row justify-content-center pb-4">
                <div class="col-md-7 text-center heading-section" data-aos="fade-up" data-aos-duration="1000">
                    <span class="subheading">Testimonial</span>
                    <h2 class="mb-3">Customer Reviews</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                    <div class="carousel-testimony">
                        <!-- Item 1 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Exceptional and highly professional legal service. Our
                                        commercial dispute was handled with great speed, precision, and deep knowledge
                                        of Saudi regulations. Highly recommended!</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img"
                                            style="background-image: url({{ asset('assets/images/review1.jfif') }}">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Sheikh Abdulrahman Al-Sudairi</p>
                                            <span class="position">Board Chairman — Riyadh</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 2 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">An outstanding experience with the legal team. Clear,
                                        transparent guidance throughout our corporate litigation, ensuring our company's
                                        assets and rights were fully protected.</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img"
                                            style="background-image: url({{ asset('assets/images/person_2.jpg') }}">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Eng. Khalid Al-Ghamdi</p>
                                            <span class="position">CEO — Jeddah</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 3 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Without a doubt, the best law firm I have worked with in the
                                        Kingdom. Prompt responses and dedicated handling of complex family succession
                                        and estate matters.</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img"
                                            style="background-image: url({{ asset('assets/images/review3.jfif') }}">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Dr. Fahad Al-Otaibi</p>
                                            <span class="position">Business Consultant — Dammam</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 4 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Extensive expertise in KSA judicial systems and commercial laws.
                                        They helped us finalize complex cross-border contracts and resolve financial
                                        liabilities smoothly.</p>
                                    <div class="d-flex align-items-center">
                                        <div class="user-img"
                                            style="background-image: url({{ asset('assets/images/review2.jfif') }}">
                                        </div>
                                        <div class="pl-3 tx">
                                            <p class="name">Saud Al-Shehri</p>
                                            <span class="position">Entrepreneur — Khobar</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Item 5 -->
                        <div class="item">
                            <div class="testimony-wrap">
                                <div class="icon d-flex align-items-center justify-content-center">
                                    <span class="fa fa-quote-left"></span>
                                </div>
                                <div class="text">
                                    <p class="mb-4 msg">Punctual, discreet, and highly competent. Partnering with them
                                        gives you full peace of mind regarding the progress and outcome of your legal
                                        proceedings.</p>
                                    <div class="d-flex align-items-center">

                                        <div class="pl-3 tx">
                                            <p class="name">Ahmed Al Qahtani</p>
                                            <span class="position">Business Development Director — Makkah</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .blog-entry {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            transition: .3s;
            height: 100%;
            border: 1px solid #eee;
        }

        .blog-entry:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
        }

        .blog-entry .img {
            height: 260px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        /* Date Circle */
        .blog-entry .meta {
            position: absolute;
            left: 20px;
            bottom: 20px;
        }

        .blog-entry .meta div {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #1F3044;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 20px rgba(31, 48, 68, .35);
        }

        .blog-entry .day {
            font-size: 26px;
            font-weight: 700;
            line-height: 1;
        }

        .blog-entry .mos {
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 600;
        }

        .blog-entry .yr {
            font-size: 11px;
        }

        /* Content */
        .blog-entry .text {
            display: flex;
            flex-direction: column;
            padding: 25px;
            height: 250px;
        }

        .blog-entry h3 {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.5;
            min-height: 80px;
        }

        .blog-entry h3 a {
            color: #1F3044;
            text-decoration: none;
        }

        .blog-entry h3 a:hover {
            color: #1F3044;
        }

        .blog-desc {
            flex: 1;
            color: #666;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .read-btn {
            background: #1F3044;
            color: #fff;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            display: inline-block;
            font-weight: 600;
            transition: .3s;
            align-self: flex-start;
        }

        .read-btn:hover {
            background: #152536;
            color: #fff;
        }
    </style>


    <section class="ftco-section" style="background:#F5F7FA;">

        <div class="container-xl">

            <div class="row justify-content-center mb-5">

                <div class="col-md-7 heading-section text-center" data-aos="fade-up">

                    <span class="subheading">
                        Legal Insights & Blog
                    </span>

                    <h2>
                        Latest Legal Articles
                    </h2>

                </div>

            </div>

            <div class="row">

                @forelse($blogs as $blog)
                    <div class="col-lg-4 col-md-6 mb-4">

                        <div class="blog-entry" data-aos="fade-up">

                            <a href="{{ route('blog.details', $blog->slug) }}" class="img d-block"
                                style="background-image:url('{{ asset('uploads/blogs/' . $blog->image) }}');">

                                <div class="meta">

                                    <div>

                                        <span class="day">
                                            {{ $blog->created_at->format('d') }}
                                        </span>

                                        <span class="mos">
                                            {{ strtoupper($blog->created_at->format('M')) }}
                                        </span>

                                        <span class="yr">
                                            {{ $blog->created_at->format('Y') }}
                                        </span>

                                    </div>

                                </div>

                            </a>

                            <div class="text">

                                <h3>

                                    <a href="{{ route('blog.details', $blog->slug) }}">

                                        {{ $blog->title }}

                                    </a>

                                </h3>

                                <p class="blog-desc">

                                    {{ \Illuminate\Support\Str::limit($blog->short_description, 120) }}

                                </p>

                                <a href="{{ route('blog.details', $blog->slug) }}" class="read-btn">

                                    Read More

                                    <i class="fa fa-arrow-right ms-2"></i>

                                </a>

                            </div>

                        </div>

                    </div>

                @empty

                    <div class="col-12">

                        <div class="alert alert-warning text-center">

                            No Blogs Available.

                        </div>

                    </div>
                @endforelse

            </div>

        </div>

    </section>


    @include('website.partials.achievement')
@endsection