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

@section('content')
    <!-- Hero Section -->
    <section class="relative py-10 lg:py-16 bg-gradient-to-b from-emerald-50/50">
        <div class="container mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="space-y-8">
                    <h1 class="text-5xl font-bold leading-tight">
                        Your Journey to <span class="text-emerald-600">Wellness</span> Starts Here
                    </h1>
                    <p class="text-lg text-gray-600 leading-relaxed">
                        We're dedicated to providing holistic wellness solutions that nurture your mind, body, and spirit.
                        Our experienced team combines ancient wisdom with modern techniques to create personalized healing
                        experiences.
                    </p>
                    <div class="flex gap-4">
                        <a href="/contact"
                            class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white rounded-full hover:bg-emerald-700 transition-colors">
                            Contact Us
                        </a>
                        <a href="/products"
                            class="inline-flex items-center px-6 py-3 border-2 border-emerald-600 text-emerald-600 rounded-full hover:bg-emerald-50 transition-colors">
                            Our Products
                        </a>
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597" alt="Wellness Center"
                        class="rounded-3xl w-full">
                    <div class="absolute -bottom-6 -left-6 bg-white p-6 rounded-2xl">
                        <div class="flex items-center gap-4">
                            <span class="text-4xl font-bold text-emerald-600">10+</span>
                            <p class="text-gray-600">Years of Excellence</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="py-10 lg:py-16">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Our Core Values</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center space-y-4">
                    <div class="w-16 h-16 mx-auto bg-emerald-100 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold">Compassionate Care</h3>
                    <p class="text-gray-600">We treat every client with understanding, respect, and genuine care.</p>
                </div>
                <div class="text-center space-y-4">
                    <div class="w-16 h-16 mx-auto bg-emerald-100 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold">Excellence</h3>
                    <p class="text-gray-600">We maintain the highest standards in all our wellness practices.</p>
                </div>
                <div class="text-center space-y-4">
                    <div class="w-16 h-16 mx-auto bg-emerald-100 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold">Holistic Approach</h3>
                    <p class="text-gray-600">We believe in treating the whole person, not just symptoms.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Quote Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center space-y-8">
                <svg class="w-12 h-12 text-emerald-600 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                </svg>
                <blockquote>
                    <p class="text-3xl font-light italic text-gray-800">
                        "The journey of a thousand miles begins with a single step towards self-discovery. Let your wellness journey start today."
                    </p>
                </blockquote>
                <div class="text-emerald-600 font-semibold">
                    <p>Dr. Sarah Johnson</p>
                    <p class="text-sm text-gray-500">Founder & Wellness Director</p>
                </div>
            </div>
        </div>
    </section>
@endsection