@extends('website::default.layout.master')

@section('title', ($data['values']['doctor_name'] ?? 'Medolia') . ' - Home | Healthcare Services')

@section('content')

    <!-- Hero Header Section -->
    <section class="hero-header">
        <div class="container">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-6">
                    <div class="hero-content">
                        <div class="hero-badge mb-3">
                            <i class="fas fa-heart me-2"></i>
                            Wish Your Happy Life
                        </div>
                        <h1 class="hero-title mb-4">
                            {{ $data['values']['home_title'] != '' ? $data['values']['home_title'] : 'Personalized Care Healthier' }}
                        </h1>
                        <p class="hero-description mb-4">
                            {{ $data['values']['home_slogan'] != '' ? $data['values']['home_slogan'] : 'Experience personalized care tailored to your needs for a healthier, happier life. Expert medical guidance, compassionate support, and seamless' }}

                        </p>
                        <div class="hero-actions d-flex flex-wrap align-items-center gap-3">
                            <button class="btn btn-primary btn-lg discover-btn">
                                Discover More
                            </button>
                            <div class="call-info d-flex align-items-center">
                                <div class="call-avatar me-3">
                                    <img
                                        src="https://html.pixelfit.agency/medolia/assets/images/home-one/testimonial/author-img1.jpg"
                                        alt="Doctor" class="rounded-circle">
                                </div>
                                <div class="call-details">
                                    <div class="call-label">Call Us Anytime</div>
                                    <div class="call-number fw-bold">{{ $data['values']['phone']  }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="hero-image-section position-relative">
                        <!-- Medical Tags -->
                        <div class="medical-tag tag-orthopedics">
                            Orthopedics
                        </div>
                        <div class="medical-tag tag-cardiology">
                            Cardiology
                        </div>

                        <!-- Patient Recovers Card -->
                        <!--                        <div class="patient-card">-->
                        <!--                            <div class="card-title mb-3">Patient Recovers</div>-->
                        <!--                            <div class="patient-avatars d-flex">-->
                        <!--                                <img src="https://via.placeholder.com/40x40/FF6B6B/white?text=👨" alt="Patient 1" class="patient-avatar">-->
                        <!--                                <img src="https://via.placeholder.com/40x40/4ECDC4/white?text=👩" alt="Patient 2" class="patient-avatar">-->
                        <!--                                <img src="https://via.placeholder.com/40x40/45B7D1/white?text=👨" alt="Patient 3" class="patient-avatar">-->
                        <!--                                <img src="https://via.placeholder.com/40x40/96CEB4/white?text=👩" alt="Patient 4" class="patient-avatar">-->
                        <!--                                <div class="patient-count">5k+</div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->

                        <!-- Main Hero Image -->
                        <div class="hero-doctors">
                            <img src="https://html.pixelfit.agency/medolia/assets/images/home-one/hero/hero-img1.png"
                                 alt="Medical Team" class="img-fluid hero-main-image">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Decorative Elements -->
        <div class="hero-decoration decoration-1"></div>
        <div class="hero-decoration decoration-2"></div>
    </section>

    <!-- About Us Section -->
    <section class="about-section py-5" id="about">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5 mb-4 mb-lg-0">
                    <div class="about-image-wrapper position-relative">
                        <!-- Main Image -->
                        <div class="about-main-image">
                            <img src="https://html.pixelfit.agency/medolia/assets/images/home-one/about/about-img1.jpg"
                                 alt="Doctor consulting with patient"
                                 class="img-fluid rounded-4">
                        </div>

                        <!--                        &lt;!&ndash; Happy Patients Card &ndash;&gt;-->
                        <!--                        <div class="happy-patients-card">-->
                        <!--                            <div class="happy-patients-number">12K</div>-->
                        <!--                            <div class="happy-patients-text">Happy our<br>Patients</div>-->
                        <!--                        </div>-->

                        <!-- Schedule Hours Card -->
                        <div class="schedule-card">
                            <div class="schedule-header">
                                <div class="schedule-icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <h4 class="schedule-title">Schedule Hours</h4>
                            </div>
                            <div class="schedule-list">
                                <div class="schedule-item">
                                    <span class="schedule-day">Mon - Thu</span>
                                    <span class="schedule-time">09:00 - 06:00</span>
                                </div>
                                <div class="schedule-item">
                                    <span class="schedule-day">Saturday</span>
                                    <span class="schedule-time">09:00 - 06:00</span>
                                </div>
                                <div class="schedule-item">
                                    <span class="schedule-day">Sunday</span>
                                    <span class="schedule-time">Off Day</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 offset-md-1">
                    <div class="about-content">
                        <div class="section-badge mb-3">
                            <span class="badge-dot"></span>
                            About Us
                        </div>

                        <h2 class="about-title mb-4">
                            {{ $data['values']['about_title']  }}
                        </h2>

                        <p class="about-description mb-4">
                            {{ $data['values']['about_description']  }}
                        </p>

                        <!-- Service Features -->
                        <div class="service-features mb-4">
                            <div class="service-feature mb-3">
                                <div class="service-icon service-icon-purple">
                                    <i class="fas fa-user-md"></i>
                                </div>
                                <div class="service-content">
                                    <h5 class="service-title">Dedicated Healthcare Provider</h5>
                                    <p class="service-description">We provide personalized, cutting-edge medical
                                        care</p>
                                </div>
                            </div>

                            <div class="service-feature mb-3">
                                <div class="service-icon service-icon-pink">
                                    <i class="fas fa-tooth"></i>
                                </div>
                                <div class="service-content">
                                    <h5 class="service-title">Comprehensive Dental Care</h5>
                                    <p class="service-description">We provide personalized, cutting-edge medical
                                        care</p>
                                </div>
                            </div>
                        </div>

                        <!-- About More Button and Doctor Info -->
                        <div class="about-actions d-flex align-items-center gap-4">
                            <a href="{{ url("website/preview/$template->slug/about?token=$token") }}"
                               class="btn btn-primary btn-lg about-more-btn">
                                About more
                            </a>

                            {{--                            <div class="doctor-info d-flex align-items-center">--}}
                            {{--                                <div class="doctor-avatar me-3">--}}
                            {{--                                    <img src="https://html.pixelfit.agency/medolia/assets/images/home-one/testimonial/author-img1.jpg"--}}
                            {{--                                         alt="Dr. Anjelina Watson"--}}
                            {{--                                         class="rounded-circle">--}}
                            {{--                                </div>--}}
                            {{--                                <div class="doctor-details">--}}
                            {{--                                    <div class="doctor-name fw-bold">Anjelina Watson</div>--}}
                            {{--                                    <div class="doctor-position text-muted">Managing Director</div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services-section py-5" id="services">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8">
                    <div class="section-badge mb-3">
                        <span class="badge-dot"></span>
                        Our Services
                    </div>

                    <h2 class="services-title mb-4">
                        Quality Care Across Every<br>
                        Medical Specialty
                    </h2>
                </div>
            </div>

            <div class="row g-4">
                @if(isset($data['internal_collections']['services_collection']) && count($data['internal_collections']['services_collection']) > 0)
                    @foreach($data['internal_collections']['services_collection'] as $service)
                        <div class="col-lg-4 col-md-6">
                            <div class="service-card h-100 shadow-sm border-0" style="transition: all 0.3s ease;">
                                <div class="service-card-header">
                                    <div class="service-card-icon">
                                        <i class="fas fa-stethoscope"></i>
                                    </div>
                                    @if(isset($service['category']))
                                        <div class="service-card-category">{{ $service['category'] }}</div>
                                    @endif
                                </div>

                                <h4 class="service-card-title">
                                    {{ $service['title'] ?? 'Service' }}
                                </h4>

                                @if(isset($service['description']))
                                    <p class="service-card-description">
                                        {{ Str::limit($service['description'], 150) }}
                                    </p>
                                @endif

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="blog-section py-5" id="blog">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8">
                    <div class="section-badge mb-3">
                        <span class="badge-dot"></span>
                        Our Blog
                    </div>

                    <h2 class="blog-title mb-4">
                        Latest Healthcare News<br>
                        and Insights
                    </h2>
                </div>
                <div class="col-lg-4 d-flex align-items-end justify-content-lg-end">
                    <a href="{{ url("website/preview/$template->slug/blog?token=$token") }}"
                       class="btn btn-primary btn-lg view-all-blog-btn">
                        View All Posts
                    </a>
                </div>
            </div>

            <div class="row g-4">
                    @foreach($latestPosts as $post)
                        <div class="col-lg-4 col-md-6">
                            <div class="blog-card h-100">
                                <div class="blog-image">
                                    <img src="{{  asset($post->image) }}"
                                         alt="{{ $post->title ?? 'Blog post' }}"
                                         class="img-fluid">
                                </div>

                                <div class="blog-content">
                                    <div class="blog-categories mb-3">
                                        <span class="blog-category">Medical</span>
                                        <span class="blog-category">Healthcare</span>
                                    </div>

                                    <h4 class="blog-title-card">
                                        {{ $post->title ?? 'Untitled Post' }}
                                    </h4>

                                    @if($post->content)
                                        <p class="blog-excerpt mb-3">
                                            {{ Str::limit($post->content, 100) }}
                                        </p>
                                    @endif

                                    @if($post->author || $post->published_at)
                                        <div class="blog-meta mb-3">
                                            @if($post->author)
                                                <span class="blog-author me-3">
                                                    <i class="fas fa-user me-1"></i> {{ $post->author }}
                                                </span>
                                            @endif
                                            @if($post->published_at)
                                                <span class="blog-date">
                                                    <i class="fas fa-calendar me-1"></i> {{ $post->published_at->format('M d, Y') }}
                                                </span>
                                            @endif
                                        </div>
                                    @endif

                                    <a href="{{ url("website/preview/$template->slug/post/$post->id?token=$token") }}" class="blog-read-more">Read More</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="why-choose-us-section py-5" id="why-choose-us">
        <div class="container">
            <div class="row align-items-center mb-5">
                <div class="col-lg-6">
                    <div class="why-choose-content">
                        <div class="section-badge mb-3">
                            <span class="badge-dot"></span>
                            Why Choose us
                        </div>

                        <h2 class="why-choose-title mb-4">
                            Experience Excellence<br>
                            in Medical Care
                        </h2>

                        <p class="why-choose-description mb-4">
                            Expert Receive top-quality medical care advanced treatment
                            compassionate support & personalized healthcare solutions
                            for your overall well-being and recovery.
                        </p>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="video-section position-relative">
                        <div class="video-thumbnail">
                            <img src="https://images.unsplash.com/photo-1631815589968-fdb09a223b1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                                 alt="Medical team in action"
                                 class="img-fluid rounded-4">
                            <div class="video-overlay">
                                <button class="video-play-btn" data-bs-toggle="modal" data-bs-target="#videoModal">
                                    <i class="fas fa-play"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Feature Cards -->
            <div class="row g-4">
                <!-- Quick Response Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-purple h-100">
                        <div class="feature-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h4 class="feature-title">Quick Response</h4>
                        <p class="feature-description">
                            Receive top-quality medical care advanced treatment
                        </p>
                    </div>
                </div>

                <!-- Customer Focus Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-pink h-100">
                        <div class="feature-icon">
                            <i class="fas fa-bullseye"></i>
                        </div>
                        <h4 class="feature-title">Customer Focus</h4>
                        <p class="feature-description">
                            Patients first personalized and compassionate care
                        </p>
                    </div>
                </div>

                <!-- Expert Doctors Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-yellow h-100">
                        <div class="feature-icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <h4 class="feature-title">50+ Expert Doctors</h4>
                        <p class="feature-description">
                            Experience doctor providing specialized quality
                        </p>
                    </div>
                </div>

                <!-- 24/7 Support Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-green h-100">
                        <div class="feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h4 class="feature-title">24/7 Instant Support</h4>
                        <p class="feature-description">
                            Round-the-clock support for your healthcare
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Video Modal -->
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Medical Care Video" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection