@extends('frontend::layouts.master')

@section('content')
    <nav class="py-5">
        <div class="container max-w-5xl mx-auto px-4">
            <ol class="flex items-center space-x-2 text-md text-gray-500">
                <li>
                    <a href="/" class="hover:text-emerald-600">Home</a>
                </li>
                <li>
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </li>
                <li>
                    <a href="/blog" class="hover:text-emerald-600">Blogs</a>
                </li>
                <li>
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </li>
                <li class="text-emerald-600">Essential Oils Bundle</li>
            </ol>
        </div>
    </nav>
    <section class="relative pb-10 lg:pb-16">
        <!-- Decorative Elements -->
        <div class="absolute top-0 right-0 w-1/3 h-96 bg-emerald-50 rounded-bl-full opacity-50"></div>
        <div class="absolute bottom-0 left-0 w-1/4 h-64 bg-emerald-50 rounded-tr-full opacity-50"></div>

        <div class="container mx-auto px-4 relative">
            <!-- Featured Image -->
            <div class="relative max-w-5xl mx-auto mb-10 lg:mb-16 group">
                <div class="aspect-w-16 aspect-h-9 rounded-3xl overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b"
                        class="object-cover w-full h-full transform group-hover:scale-105 transition-transform duration-700"
                        alt="Blog Feature Image">
                </div>
            </div>

            <!-- Blog Header -->
            <div class="max-w-5xl mx-auto mb-6 lg:mb-12">
                <div class="flex items-center gap-4 mb-6">
                    <div class="space-y-1">
                        <h1 class="text-4xl font-bold text-gray-800">The Art of Mindful Living: A Comprehensive Guide</h1>
                        <div class="flex items-center gap-4 text-gray-500">
                            <div class="flex items-center gap-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                                <time datetime="2024-04-15">
                                    Monday, April 15, 2024
                                </time>
                            </div>
                            <div class="flex items-center gap-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <time datetime="14:30">
                                    14:30
                                </time>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Blog Content -->
            <div class="max-w-5xl mx-auto prose lg:prose-xl">
                <p class="text-md lg:text-xl text-gray-600 mb-8 leading-relaxed">
                    In today's fast-paced world, finding moments of peace and mindfulness has become more important than
                    ever. This comprehensive guide explores the fundamental principles and practical techniques of mindful
                    living.
                </p>

                <h2 class="text-3xl font-bold text-gray-800 mt-12 mb-6">Understanding Mindfulness</h2>
                <p class="text-gray-600 leading-relaxed mb-8">
                    Mindfulness is the practice of maintaining a moment-by-moment awareness of our thoughts, feelings,
                    bodily sensations, and surrounding environment. It involves acceptance, meaning that we pay attention to
                    our thoughts and feelings without judging them.
                </p>

                <h3 class="text-2xl font-semibold text-gray-800 mt-10 mb-6">Key Benefits of Mindful Living</h3>
                <ul class="space-y-3 list-disc pl-6 mb-8">
                    <li class="text-gray-600">Reduced stress and anxiety</li>
                    <li class="text-gray-600">Improved focus and concentration</li>
                    <li class="text-gray-600">Better emotional regulation</li>
                    <li class="text-gray-600">Enhanced self-awareness</li>
                    <li class="text-gray-600">Better sleep quality</li>
                </ul>

                <blockquote class="border-l-4 border-emerald-500 pl-6 py-4 my-8 italic text-gray-700 bg-gray-50 rounded">
                    "The present moment is the only time over which we have dominion."
                    <span class="block mt-2 text-sm font-semibold">- Thích Nhất Hạnh</span>
                </blockquote>

                <h2 class="text-3xl font-bold text-gray-800 mt-12 mb-6">Daily Practices for Mindful Living</h2>
                <p class="text-gray-600 leading-relaxed mb-6">
                    Incorporating mindfulness into your daily routine doesn't require hours of meditation. Simple practices
                    like mindful breathing, conscious eating, and regular movement can make a significant difference in your
                    overall well-being.
                </p>

                <p class="text-gray-600 leading-relaxed">
                    Remember, mindful living is not about achieving perfection. It's about being present in each moment and
                    approaching life with curiosity and compassion.
                </p>
            </div>
        </div>
    </section>
@endsection