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

@section('content')
    <!-- Breadcrumb -->
    <div class="pt-24 md:pt-32">
        <div class="container mx-auto px-4">
            <nav class="flex overflow-x-auto" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 whitespace-nowrap">
                    <li class="inline-flex items-center">
                        <a href="/"
                            class="inline-flex items-center text-gray-400 hover:text-teal-400 transition-colors">
                            Home
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-600"></span>
                            <a href="/blog" class="ml-1 text-gray-400 hover:text-teal-400 transition-colors md:ml-2">
                                Blogs
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-600"></span>
                            <span
                                class="ml-1 md:ml-2 truncate max-w-[200px] md:max-w-none bg-gradient-to-r from-teal-400 to-emerald-400 bg-clip-text text-transparent font-medium">
                                Hidden Beaches of Thailand: Your Ultimate Guide to Paradise
                            </span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="relative">
        <div class="container mx-auto px-4 relative z-10 pt-10 pb-20">
            <!-- Article Header -->
            <div class="grid grid-cols-1 md:grid-cols-5 gap-8 max-w-7xl mx-auto mb-16">
                <!-- Title Section -->
                <div class="md:col-span-3 md:col-start-1">
                    <div class="sticky top-8">
                        <div class="flex items-center gap-3 mb-6">
                            <time class="px-4 py-1 rounded-full bg-teal-50 text-teal-600 text-sm font-medium">
                                May 26, 2024
                            </time>
                        </div>
                        <h1
                            class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent leading-tight">
                            Hidden Beaches of Thailand: Your Ultimate Guide to Paradise
                        </h1>
                    </div>
                </div>

                <!-- Featured Image Section -->
                <div class="md:col-span-2 md:col-start-4">
                    <div class="aspect-[1/1] relative rounded-3xl overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1536599018102-9f803c140fc1"
                            class="absolute inset-0 w-full h-full object-cover transition-transform hover:scale-105 duration-700"
                            alt="Hidden Beach">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                    </div>
                </div>
            </div>

            <!-- Article Content -->
            <div class="max-w-4xl mx-auto prose prose-lg">
                <!-- Information Collection Section -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-4">Information We Collect</h2>
                    <p class="mb-4">We collect various types of information to provide and improve our services:</p>
                    <ul class="list-disc pl-5 mb-4">
                        <li>Personal Information</li>
                        <li>Device Information</li>
                        <li>Usage Data</li>
                        <li>Communication Records</li>
                    </ul>
                </div>

                <!-- Data Usage Section -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-4">How We Use Your Information</h2>
                    <ul class="list-disc pl-5">
                        <li>Personalize and enhance your experience with our services</li>
                        <li>Process transactions and manage your account effectively</li>
                        <li>Send important updates and notifications about our services</li>
                        <li>Analyze usage patterns to optimize and improve our offerings</li>
                    </ul>
                </div>

                <!-- Information Collection Section -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-4">Information We Collect</h2>
                    <p class="mb-4">We collect various types of information to provide and improve our services:</p>
                    <ul class="list-disc pl-5 mb-4">
                        <li>Personal Information</li>
                        <li>Device Information</li>
                        <li>Usage Data</li>
                        <li>Communication Records</li>
                    </ul>
                </div>

                <!-- Data Usage Section -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-4">How We Use Your Information</h2>
                    <ul class="list-disc pl-5">
                        <li>Personalize and enhance your experience with our services</li>
                        <li>Process transactions and manage your account effectively</li>
                        <li>Send important updates and notifications about our services</li>
                        <li>Analyze usage patterns to optimize and improve our offerings</li>
                    </ul>
                </div>

                <!-- Information Collection Section -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-4">Information We Collect</h2>
                    <p class="mb-4">We collect various types of information to provide and improve our services:</p>
                    <ul class="list-disc pl-5 mb-4">
                        <li>Personal Information</li>
                        <li>Device Information</li>
                        <li>Usage Data</li>
                        <li>Communication Records</li>
                    </ul>
                </div>

                <!-- Data Usage Section -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-4">How We Use Your Information</h2>
                    <ul class="list-disc pl-5">
                        <li>Personalize and enhance your experience with our services</li>
                        <li>Process transactions and manage your account effectively</li>
                        <li>Send important updates and notifications about our services</li>
                        <li>Analyze usage patterns to optimize and improve our offerings</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection