@section('page-title', $details->title)
@section('page-description', $details->srtsmry)
@section('page-image', asset($details->image ?? $details->image))

@extends('site.master')
@section('main-content')


    <div class="position-relative overflow-hidden d-flex align-items-center bg-custom-blue-dark py-5">

        <div class="container position-relative" style="z-index: 9; height: 350px;">
            <div class="row">
                <div class="col-lg-5 text-white d-flex flex-column align-items-start justify-content-center gap-4" style="height: 350px;">
                    <i class="{{ $details->icon }} fs-2 me-3"></i>
                    <h2 class="{{ app()->getLocale() == 'np' ? 'fs-2' : 'fs-1' }} fwc-800">
                        {{ $details->title }}
                    </h2>
                    <p class="w-75">
                        {{ $details->shrtsummary }}
                    </p>



                </div>
                <div class="col-lg-6 offset-lg-1 mt-5 mt-lg-0">
                    <div class="video-overplay w-100 position-relative">
                        @if ($details->media)
                            <video muted autoplay class="w-100">
                                <source src="{{ asset('site/videos/videoplayback.mp4') }}" type="video/mp4">
                            </video>
                        @else
                            <img src="{{ asset($details->image) }}" alt="">
                        @endif

                    </div>
                </div>

            </div>
        </div>
        <div class="bg-angled position-absolute rotate-12 h-75v" style="margin-bottom: -1px">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                <path class="elementor-shape-fill" d="M0,6V0h1000v100L0,6z"></path>
            </svg>
        </div>

    </div>
    <section class="bg-white py-5">
        <div class="container" style="min-height: 200px;">
            <div class="row">


                <div class="col-lg-6 ">
                    <div class="details">
                        <div class="mb-5">
                            {{ $details->shrtsummary }}
                        </div>
                        {!! $details->description !!}
                    </div>



                </div>
                <div class="col-lg-4 offset-lg-2 d-flex justify-content-center">
                    <img src="{{ asset('site/img/titlepic-1-1.png') }}" alt="benifits"
                        style="height: 671px !important;object-fit: contain;margin-top: -343px;" data-aos="fade-left" data-aos-delay="100">
                </div>
            </div>
        </div>
    </section>
    <div class="container py-3">
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-8 border-top border-light border-bottom border-light">
                <div class="d-flex flex-column flex-lg-row gap-3 align-items-center">
                    <span>Share</span>
                    <div class="d-flex flex-wrap gap-3">
                        <a target="_blank"
                            href="https://twitter.com/intent/tweet?original_referer={{ URL::current() }}&url={{ URL::current() }}&text={{ $details->title }}"
                            class="text-decoration-none text-dark fs-5 text-hover-danger d-flex align-items-center gap-1">
                            <i class="bi bi-twitter"></i> <span class="fs-6">Twitter</span>
                        </a>

                        <a target="_blank" href="https://www.facebook.com/sharer.php?u={{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-primary d-flex align-items-center gap-1">
                            <i class="bi bi-facebook" aria-hidden="true"></i> <span class="fs-6">Facebook</span>
                        </a>

                        <a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url={{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-info d-flex align-items-center gap-1">
                            <i class="bi bi-linkedin" aria-hidden="true"></i> <span class="fs-6">LinkedIn</span>
                        </a>

                        <a target="_blank"
                            href="mailto:?subject={{ urlencode($details->title) }}&body={{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                            <i class="bi bi-envelope" aria-hidden="true"></i> <span class="fs-6">Email</span>
                        </a>

                        <a target="_blank"
                            href="https://api.whatsapp.com/send?text={{ urlencode($details->title) }}%20{{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                            <i class="bi bi-whatsapp" aria-hidden="true"></i> <span class="fs-6">WhatsApp</span>
                        </a>

                        <a target="_blank" href="sms:?body={{ urlencode($details->title) }}%20{{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-secondary d-flex align-items-center gap-1">
                            <i class="bi bi-chat-left-text-fill" aria-hidden="true"></i> <span class="fs-6">SMS</span>
                        </a>


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

    @if ($details->showwhy == 1)
        @include('site.partials.whyuswithstats')
    @endif
    @if ($details->process == 1)
        @include('site.partials.makeaappointment')
    @endif

    @if ($details->benifits)
        <section class="bg-white py-5">
            <article>


                <div class="container py-5 pb-0" style="min-height: 200px;">
                    <div class="row" data-aos="fade-up" data-aos-delay="400">
                        <div class="col d-flex">
                            <h3 class="col-lg-6 col-9 fwc-600 fs-3">
                                Secure Your Future <span class="d-block text-danger"> The Must-Know Benefits of
                                    Insurance</span>
                            </h3>

                        </div>
                    </div>
                    <div class="row py-5">
                        <div class="col-lg-6  details " data-aos="fade-up" data-aos-delay="450">

                            {!! $details->benifits !!}
                        </div>
                        <div class="col-lg-4 offset-lg-2" data-aos="fade-up" data-aos-delay="500">
                            <figure>
                                <img src="{{ asset($details->benifits_image) }}" alt="">
                            </figure>

                        </div>

                    </div>
                </div>
            </article>
        </section>
    @endif
    @if ($details->are_satisfied == 1)
    <section class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-4">
                    @include('site.sidebar.are_satisfied')
                </div>
            </div>
        </div>
    </section>
    @endif



    <section class="bg-custom-blue-dark bg-opacity-100 pb-5 pb-lg-0 d-none">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 order-lg-1 order-2">
                    <div class="d-flex align-items-start  justify-content-center flex-column h-100 gap-3 text-white"
                        style="height: 450px;">
                        <div class="title">
                            <small class="text-uppercase text-danger fw-bold fs-7">Connect with Us</small>
                            <h3 class="text-uppercase fs-4 fwc-600 w-60 mt-3">Contact Us Today To Schedule A Consultation
                            </h3>
                        </div>



                        <p class="col-lg-6">
                            Choose Nepal Micro Insurance for personalised coverage, transparent policies, and exceptional
                            service. Our experienced team is dedicated to providing you with reliable and affordable
                            insurance that meets your needs....
                        </p>
                        <div class="d-flex gap-0 position-relative col-lg-9 s-w-100">
                            <a href="#"
                                class="bg-danger text-white rounded-start px-3 py-3 fs-6 fw-bold text-uppercase w-50 text-center"><i
                                    class="bi-telephone fs-6 me-3"></i> Call Us</a>
                            <span
                                class="bg-custom-blue-dark2 bg-opacity-100 text-white rounded-circle d-flex align-items-center justify-content-center position-absolute "
                                style="
    left: 0;
    right: 0;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    top: 8px;
">or</span>
                            <a href="mailto:info@nepalmicro.com"
                                class="bg-white text-custom-blue-dark2 rounded-end px-3 py-3 fs-6 fw-bold text-uppercase w-50 text-center"><i
                                    class="bi-envelope fs-6 me-3"></i> Emails Us</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 order-lg-2 order-1">
                    <img src="{{ asset('site/img/EXPERTIES.png') }}" alt="" class="rounded-4 img-pulled-top">
                </div>
            </div>
        </div>
    </section>
@endsection


@push('scripts')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Products",
      "headline": "{{ $details->title }}",
      "datePublished": "{{ $details->published_date }}",
      "dateModified": "{{ now()->toDateString() }}",
      "author": {
        "@type": "Organization",
        "name": "Nepal Micro Insurance Company Limited"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Nepal Micro Insurance Company Limited",
        "logo": {
          "@type": "ImageObject",
          "url": "{{ asset($details->image) }}"
        }
      },
      "image": "{{ asset($details->image) }}",
      "description": "{{ $details->description }}"
    }
    </script>
@endpush