@extends('layouts.front-layout')
@section('content')
    <style>
        
        .treatment-item {
            display: flex;
        }

        .treatment-card {
            width: 100%;
            transform: none !important;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .treatment-card .card-body {
            text-align: left;
            display: flex;
            flex-direction: column;
        }

        .treatment-card img {
            object-fit: cover;
            height: 170px !important;
        }

        .treatment-card .card-text {
            flex-grow: 1;
        }

        .treatment-card .btn {
            margin-top: auto;
        }

        #treatmentTabs {
            width: fit-content !important;
            border: 1px solid #ccc;
            border-radius: 50px;
            padding: 5px;
        }

        #treatmentTabs .nav-link {
            border: none;
            border-radius: 50px;
            color: #000;
            padding: 8px 20px;
        }


        #treatmentTabs .nav-link.active {
            background-color: #30bfac;
            color: #fff !important;
            border-radius: 50px;
        }

        #treatmentTabs .nav-link:hover {
            color: #28a79c;
        }




        .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);
        }

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

        .team-card .num {
            font-size: 10px;
        }

        .team-card .card-text {
            font-size: 12px;
        }

        .team-card {
            box-shadow: none;
        }

        .team-card img {
            object-fit: contain;
            max-height: 200px;
        }

        .team-card:hover {
            background: linear-gradient(180deg, #30bfac 0%, #000 100%);
        }

        .team-card:hover .card-body {
            background-color: white;
            border-radius: 15px 15px 15px 15px;
        }

        .team-card img {
            background-color: #EFEFEF;
        }

        .team-card:hover img {
            background-color: transparent !important;
        }

        .reviews {
            margin-top: 150px !important;
        }

        .reviews .shadow-large {
            transform: none !important;
            box-shadow: none !important;
        }

        @media (max-width: 768px) {
            #treatmentTabs {
                width: 100% !important;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding: 3px 15px;
                scrollbar-width: thin;
                -webkit-overflow-scrolling: touch;
                -ms-overflow-style: none;
                scroll-behavior: smooth;
                scroll-snap-type: x proximity;
                margin-left: 0;
                box-sizing: border-box;
            }

            #treatmentTabs::-webkit-scrollbar {
                height: 6px;
            }

            #treatmentTabs::-webkit-scrollbar-thumb {
                background-color: #ccc;
                border-radius: 10px;
            }

            #treatmentTabs::-webkit-scrollbar {
                display: none;
            }

            #treatmentTabs .nav-item {
                flex: 0 0 auto;
                scroll-snap-align: start;
            }

            #treatmentTabs .nav-link {
                padding: 6px 15px;
                font-size: 0.9rem;
                margin: 2px 6px;
                display: inline-flex;
                white-space: nowrap;
                min-width: fit-content;
            }

            .treatment-item {
                flex-direction: column;
            }

            .treatment-card {
                margin-bottom: 1rem;
            }
        }


        @media (max-width: 576px) {
            #treatmentTabs {
                width: 100% !important;
                display: flex;
                flex-wrap: wrap;
                overflow-x: auto;
                padding: 2px 12px;
                border-radius: 25px;
                scrollbar-width: thin;/ -webkit-overflow-scrolling: touch;
                -ms-overflow-style: none;
                scroll-behavior: smooth;
                scroll-snap-type: x proximity;/ margin-left: 0;
                box-sizing: border-box;
            }

            #treatmentTabs::-webkit-scrollbar {
                height: 5px;
            }

            #treatmentTabs::-webkit-scrollbar-thumb {
                background-color: #ccc;
                border-radius: 10px;
            }

            #treatmentTabs::-webkit-scrollbar {
                display: none;
            }

            #treatmentTabs .nav-item {
                flex: 0 0 auto;
                scroll-snap-align: start;
            }

            #treatmentTabs .nav-link {
                padding: 5px 12px;
                font-size: 0.85rem;
                margin: 2px 4px;
                border-radius: 25px;
                display: inline-flex;
                white-space: wrap;
                min-width: fit-content;
            }

            .treatment-card .card-body {
                padding: 0.75rem;
            }

            .treatment-card .btn {
                padding: 0.5rem;
                font-size: 0.9rem;
            }

            .team-card {
                max-width: 300px !important;
            }

            .reviews {
                margin-top: 50px !important;
            }
        }
    </style>
    <header class=" p-5 " style="background-image: url('{{asset('assets/Assets/homeBackground.svg')}}');">

        <div class="row align-items-center header-container">
            <!-- Text -->
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h1 class="fw-bold  text-dark">
                    Welcome to Your Trusted UK
                </h1>
                <p class="fs-5  mt-4">
                    Discover why iFeelShy is the go-to choice for seamless and
                    convenient online pharmacy services. Shop with confidence today!
                </p>
                <p class="fs-5 fw-semibold mt-3">
                    The Winner of the Feefo Platinum Trusted Service Award in 2025
                </p>

                <a href="#" class="btn button-blue">About Us</a>
            </div>
            <div class="col-lg-6 header-img text-center">

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



    <section class="py-5 text-center">
        <div class="container">


            <section class="py-3 text-center">
                <div class="container  d-flex flex-column align-items-center">
                    <div class="container d-flex flex-column align-items-center">
                        <h2 class="findTreat my-3 fs-1">Find Your Treatment</h2>
                        <p class="findTreatText">
                            I feel shy provides a broad selection of treatments through our free online prescription
                            service. Safe, discreet, and convenient, all medications are dispensed from our trusted
                            GPhC-registered pharmacy in Central London, with same-day or express delivery available
                            nationwide.

                        </p>
                    </div>



                    <!-- Nav Tabs -->
                    <ul class="nav nav-tabs justify-content-center" id="treatmentTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="all-tab" data-bs-toggle="tab"
                                data-bs-target="#all-treatment" type="button" role="tab">
                                All Treatment
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="popular-tab" data-bs-toggle="tab"
                                data-bs-target="#popular-treatment" type="button" role="tab">
                                Popular
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="men-tab" data-bs-toggle="tab" data-bs-target="#men-treatment"
                                type="button" role="tab">
                                Men's Health
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="women-tab" data-bs-toggle="tab" data-bs-target="#women-treatment"
                                type="button" role="tab">
                                Women's Health
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="respiratory-tab" data-bs-toggle="tab"
                                data-bs-target="#respiratory-treatment" type="button" role="tab">
                                Respiratory
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="sexual-tab" data-bs-toggle="tab" data-bs-target="#sexual-treatment"
                                type="button" role="tab">
                                Sexual Health
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="other-tab" data-bs-toggle="tab" data-bs-target="#other-treatment"
                                type="button" role="tab">
                                Other
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="container tab-content mt-4" id="treatmentTabsContent">

                        <!-- All Treatments -->
                        <div class="tab-pane fade show active" id="all-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_all_treatments as $all_treatment)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $all_treatment->categoryImage('category_image') }}"
                                                class="card-img-top" alt="{{ $all_treatment->category_name ?: '' }}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $all_treatment->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $all_treatment->short_description ?? '' !!}</p>
                                                <a href="{{ route('new.category.detail', ['slug' => $all_treatment->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">All Treatment Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                        <!-- Popular -->
                        <div class="tab-pane fade" id="popular-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_popular as $popular)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $popular->categoryImage('category_image') }}" class="card-img-top"
                                                alt="{{ $popular->category_name }}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $popular->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $popular->short_description ?? '' !!}</p>
                                                <a href="{{ route('new.category.detail', ['slug' => $popular->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Popular Treatment Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                        <!-- Men -->
                        <div class="tab-pane fade" id="men-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_men as $men)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $men->categoryImage('category_image') }}" class="card-img-top"
                                                alt="{{ $men->category_name }}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $men->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $men->short_description ?? '' !!} </p>
                                                <a href="{{ route('new.category.detail', ['slug' => $men->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>

                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Men's Treatment Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                        <!-- Women -->
                        <div class="tab-pane fade" id="women-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_women as $women)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $women->categoryImage('category_image') }}" class="card-img-top"
                                                alt="{{ $women->category_name }}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $women->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $women->short_description ?? '' !!}</p>
                                                <a href="{{ route('new.category.detail', ['slug' => $women->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>

                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Women's Treatment Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                        <!-- Respiratory -->
                        <div class="tab-pane fade" id="respiratory-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_respiratory as $respiratory)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $respiratory->categoryImage('category_image') }}" class="card-img-top"
                                                alt="{{ $respiratory->category_name }}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $respiratory->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $respiratory->short_description ?? '' !!}</p>
                                                <a href="{{ route('new.category.detail', ['slug' => $respiratory->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>

                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Respiratory Treatment Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                        <!-- Sexual Health -->
                        <div class="tab-pane fade" id="sexual-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_sexual_health as $sexual)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $sexual->categoryImage('category_image') }}" class="card-img-top"
                                                alt="{{ $sexual->category_name }}">
                                            <div class="card-body text-start">
                                                <h5 class="card-title">{{ $sexual->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $sexual->short_description ?? '' !!}</p>
                                                <a href="{{ route('new.category.detail', ['slug' => $sexual->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>

                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Sexual Health Treatment Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                        <!-- Other -->
                        <div class="tab-pane fade" id="other-treatment" role="tabpanel">
                            <div class="row g-4">
                                @forelse($get_other as $other)
                                    <div class="col-md-3 col-sm-6">
                                        <div class="card treatment-card">
                                            <img src="{{ $other->categoryImage('category_image') }}" class="card-img-top"
                                                alt="{{ $other->category_name }}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $other->category_name ?: '' }}</h5>
                                                <p class="card-text">{!! $other->short_description ?? '' !!}</p>
                                                <a href="{{ route('new.category.detail', ['slug' => $other->slug ?: '']) }}"
                                                    class="btn btn-consult">Get Consultation</a>

                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Other Treatments Not Available</h3>
                                @endforelse
                            </div>
                        </div>

                    </div>
            </section>


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

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

    @include('front.includes.team')

    <div class="container reviews my-5">
        <div class="container text-center my-5">
            <h5 class="blue">More than 207,891 reviews</h5>
        </div>
        <div class="container">
            <div class="row d-flex justify-content-center gap-4">
                <div
                    class="col-md-3 shadow-large d-flex justify-content-center align-items-center flex-column text-center p-3 rounded">
                    <img style="height: 80px" src="{{ asset('assets/Assets/google.png') }}" alt="" />
                    <p>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                    </p>
                    <p>Rating 4.9/5</p>
                </div>
                <div
                    class="col-md-3 shadow-large d-flex justify-content-center align-items-center flex-column text-center p-3 rounded">
                    <img style="height: 50px" src="{{ asset('assets/Assets/trustpilot.png') }}" alt="" />
                    <p>
                        <i class="fa-solid fa-star" style="color: green;"></i>
                        <i class="fa-solid fa-star" style="color: green;"></i>
                        <i class="fa-solid fa-star" style="color: green;"></i>
                        <i class="fa-solid fa-star" style="color: green;"></i>
                        <i class="fa-solid fa-star" style="color: green;"></i>
                    </p>
                    <p style="color: green">Score 4.9</p>
                </div>
                <div
                    class="col-md-3 shadow-large text-center p-3 rounded d-flex justify-content-center align-items-center flex-column">
                    <img style="height: 20px" src="{{ asset('assets/Assets/feefo.png') }}" alt="" />
                    <p class="my-4">
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                        <i class="fa-solid fa-star" style="color: gold;"></i>
                    </p>
                    <p>Rating 4.9/5</p>
                </div>
            </div>

            <div class="container">
                <div class="row gap-2 justify-content-center">
                    <div class="col-md-3 py-2 d-flex flex-column align-items-center justify-content-center"
                        style="background-color: #EEF2FF;">
                        <div class="stars">
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                        </div>
                        <p class="fw-bold text-center">I spoke to the team via text message who were so helpful.</p>
                        <span class="blue">David Martin</span>
                    </div>
                    <div class="col-md-3 py-2 d-flex flex-column align-items-center justify-content-center"
                        style="background-color: #EEF2FF;">
                        <div class="stars">
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                        </div>
                        <p class="fw-bold text-center">Website was super easy to use and very straight-forward</p>
                        <span class="blue">Doreen Jersey</span>
                    </div>
                    <div class="col-md-3 py-2 d-flex flex-column align-items-center justify-content-center"
                        style="background-color: #EEF2FF;">
                        <div class="stars">
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                            <i class="fa-solid fa-star" style="color: gold;"></i>
                        </div>
                        <p class="fw-bold text-center">I love the reminder email I get to restock when i am running low.</p>
                        <span class="blue">Clair Exter</span>
                    </div>
                </div>
            </div>

            <div class="container shadow-large p-3 my-5 rounded" style="background-color: #f3f4f6">
                <div class="container  text-center my-3">
                    <h1 class="fs-4  blue">In the press</h1>
                </div>
                <p class="text-secondary text-center">Our team of online pharmacy experts and pharmacists regularly provides
                    expert insights on a wide range of medical topics to prominent news and media outlets across the UK.</p>
            </div>


        </div>
    </div>


@endsection