@extends('layouts.front-layout')
@section('content')
    <style>
        body {
            background-color: white;
            overflow-x: hidden;
        }

        .img1 {
            width: 100%;
            height: 580px;
            border-radius: 10px 100px 10px 10px;
            background-color: black;
            overflow: hidden;
            padding: 0;
        }

        .img1 img {
            width: 100%;
            height: 100%;
            border-radius: 10px 100px 10px 10px;
            object-fit: cover;
            opacity: 0.8;
        }

        .img4 {
            width: 100%;
            height: auto;
            border-radius: 10px;
            object-fit: cover;
            background-color: black;
            padding: 0;
            overflow: hidden;
        }

        .img4 img {
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }

        .img5 {
            background-color: black;
            width: fit-content;
            border-radius: 20px;
        }

        .img5 img {
            height: 70px;
        }

        .img7{
             border-radius: 10px 100px 10px 10px;
            width: 100%;
            height: 700px;
             overflow: hidden;
        }

        .img7 img{
              width: 100%;
            height: 100%;
            border-radius: 10px 100px 10px 10px;
             /* object-position: right; */
            object-fit: cover;

        }


        @media (max-width: 992px) {
            .img1 {
                height: 400px;
            }

            .img1 img {
                border-radius: 10px 60px 10px 10px;
            }
        }

        @media (max-width: 768px) {
            .img1 {
                height: 300px;
                border-radius: 10px;
            }

            .d-flex.justify-content-center {
                flex-direction: column !important;
                align-items: center;
                text-align: center;
            }

            .d-flex.justify-content-center h2 {
                margin-bottom: 10px;
            }

            .d-grid {
                grid-template-columns: 1fr !important;
                gap: 8px;
            }

            .online-pharma {
                flex-direction: column;
                row-gap: 20px;
            }
        }

        @media (max-width: 576px) {
            .img1 {
                height: auto;
            }

            .img1 img {
                height: auto;
                border-radius: 10px;
            }

            h1,
            h2,
            h3 {
                font-size: 1.25rem;
            }

            p {
                font-size: 0.9rem;
            }

            .card img {
                width: 100%;
                height: auto;
            }

            .online-pharma {
                flex-direction: column;
                row-gap: 20px;
            }
        }

        .second-text {
            max-width: 800px;
            line-height: 2;
        }

        .comp-info {
            background-image: url('{{ asset('assets/Assets/reviewBackground.svg') }}');
            background-position: center;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .comp-info-container {
            max-width: 1320px !important;
        }

        .card-consult .card-title {
            font-weight: 600;
        }

        .card-consult {
            border: none;
            box-shadow: none;
            position: relative;
            transition: box-shadow 0.3s ease;
        }

        .card-consult::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            height: 2px;
            width: 0;
            background-color: #30bfac;
            transform: translateX(-50%);
            transition: width 0.3s ease;
        }

        .card-consult:hover::before {
            width: 30%;
        }

        .card-consult:hover {
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
        }

        .tickIcon{
            height: 20px;
            margin-right: 8px;
            background-color: #30bfac;
            border-radius: 50%;
        }
    </style>
    <div class="container">
        <div class="container my-5 d-flex justify-content-center">
            <h1 class="text-center font600 second-text">
                {{ $pageData['Contact']['contact_title'] ?? '' }}
            </h1>
        </div>
    </div>

    <div class="container-fluid comp-info">
        <div class="row comp-info-container my-5">
            <div class="col-md-7">
                <div class="container  my-5">
                    <h2 class="display-4" style="font-weight: 600">
                        {{$pageData['About']['about_company_information_heading'] ?? ''}}
                    </h2>
{{--                    <p>--}}
{{--                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do--}}
{{--                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut--}}
{{--                        enim ad minim veniam, quis nostrud exercitation ullamco laboris--}}
{{--                        nisi ut aliquip ex ea commodo consequat.--}}
{{--                    </p>--}}
{{--                    <p>--}}
{{--                        Pharmica Ltd is registered in England and Wales under company--}}
{{--                        number <span class="blue">9668055</span> <br />--}}
{{--                        DUNS Number: <span class="blue">22-097-8327</span><br />--}}
{{--                        VAT Number: <span class="blue">GB 217 7259 95</span>--}}
{{--                    </p>--}}
                    {!!$pageData['About']['about_first_description'] ?? ''!!}
                </div>
            </div>
            <div class="col-md-5">
                <div class="container img4 my-3">
                    <img src="{{ pagesSingleImage('About', 'about_company_information_first_image') }}" alt="" />
                </div>

                <div class="container online-pharma d-flex align-items-center">
                    <div class="container img5">
                        <img src="{{ pagesSingleImage('About', 'about_company_information_second_image') }}" alt="" />
                    </div>
                    <div class="background-blue container mx-2 p-3 rounded">
                        {!!$pageData['About']['about_second_description'] ?? ''!!}
{{--                        <h5 class="text-white">Registered Office</h5>--}}
{{--                        <p class="text-white">--}}
{{--                            236 Gray's Inn Rd London, WC1X 8HB United Kingdom 020 7112 9014--}}
{{--                            help@ifeelshy.co.uk--}}
{{--                        </p>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>

      @include('front.includes.how-does-it-work')
    @include('front.includes.service')


    <div class="container">
        <div class="row justify-content-center gap-5">
            <div class=" row  justify-content-center  my-5 gap-3">
                <div class="col-md-5">
                    <h2 class="font600 fs-1">{{ $pageData['Contact']['second_contact_section_title'] ?? '' }}</h2>
                </div>
                <div class="col-md-5">
                    <p style="line-height: 2;" class="fs-5">
                        {!!$pageData['Contact']['second_contact_short_description'] ?? ''!!}
                    </p>
                </div>
            </div>
            <div class="col-md-5">
                <div class="container img7">
                    <img src="{{ asset('/assets/Assets/contact.png') }}" alt="" />
                </div>
            </div>
            <div class="col-md-5">
                {!!$pageData['Contact']['second_contact_description'] ?? ''!!}
{{--                <div class="container my-5">--}}
{{--                    <h3 class="fw-semibold my-3">Call NHS 111</h3>--}}
{{--                    <p class="">--}}
{{--                        Call NHS 111 if you urgently need medical help or advice but--}}
{{--                        it's not a life-threatening situation.--}}
{{--                    </p>--}}
{{--                    <div class="container d-grid" style="grid-template-columns: repeat(2, 1fr)">--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="">About NHS 111 </span>--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="">About out-of-hours services</span>--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >Visit NHS 111 BSL interpreter service</span>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="container my-5">--}}
{{--                    <h3 class="fw-semibold my-3">Emergency Services</h3>--}}
{{--                    <p class="">--}}
{{--                        For life-threatening emergencies, call 999 immediately for--}}
{{--                        assistance.--}}
{{--                    </p>--}}
{{--                    <div class="container d-grid" style="grid-template-columns: repeat(2, 1fr)">--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >When to call 999</span>--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >Understanding emergency care</span>--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >Emergency ambulance services</span>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="container my-5">--}}
{{--                    <h3 class="fw-semibold my-3">NHS Online Services</h3>--}}
{{--                    <p class="">--}}
{{--                        Use the NHS website or app for health information and service--}}
{{--                        bookings.--}}
{{--                    </p>--}}
{{--                    <div class="container d-grid" style="grid-template-columns: repeat(2, 1fr)">--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >Find health advice </span>--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >Understanding emergency care</span>--}}
{{--                        <span><img class="tickIcon" src="{{asset('assets/Assets/tickIcon.svg')}}" alt="" >Book appointments online</span>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>



    <div class="container my-5">
        <div class="container my-4">
            <h3 class="text-center font600 fs-1">Our Policies</h3>
            <p class="text-center text-secondary">
                Here you can find the most important information regarding our
                policies and services.
            </p>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="card bg-white h-100 shadow-small p-2">
                    <img src="{{ asset('/assets/Assets/contact2.png') }}" alt="" />
                    <div class="container">
                        <h3 class="font600 my-3">Policy</h3>
                        <p class="">
                            Our policy ensures that all your data is handled securely and
                            in accordance with legal requirements. We aim to provide the
                            best services while safeguarding your privacy.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-white h-100 shadow-small p-2">
                    <img src="{{ asset('/assets/Assets/contact3.png') }}" alt="" />
                    <div class="container">
                        <h3 class="font600 my-3">Privacy Assurance</h3>
                        <p class="">
                            We guarantee that your personal information will be kept safe
                            and used only for the intended purposes. Your privacy is our
                            priority.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-white h-100 shadow-small p-2">
                    <img src="{{ asset('/assets/Assets/contact4.png') }}" alt="" />
                    <div class="container">
                        <h3 class="font600 my-3">Complaints</h3>
                        <p class="">
                            If you have any complaints or concerns, please reach out to
                            us. We are committed to resolving issues in a timely and
                            efficient manner.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection