@extends('layouts.app')

@section('content')
    <section class="a4w-section grid items-center gap-10 lg:grid-cols-2">
        <div>
            <span class="a4w-kicker">Digital Healthcare Platform</span>
            <h1 class="mt-5 text-4xl font-bold leading-tight text-slate-900 md:text-5xl">Your Trusted Digital Health Partner</h1>
            <p class="mt-4 max-w-xl text-slate-600">Get fast, compassionate mental and physical healthcare from licensed professionals in a secure digital experience.</p>
            <div class="mt-8 flex flex-wrap gap-3">
                <x-button href="{{ route('register') }}">Start Consultation</x-button>
                <x-button href="{{ route('services') }}" variant="secondary">Talk to a Therapist</x-button>
            </div>
            <div class="mt-8 flex flex-wrap gap-3 text-xs text-slate-500">
                <span class="a4w-badge-blue">HIPAA-friendly workflows</span>
                <span class="a4w-badge-green">Licensed professionals</span>
                <span class="a4w-badge-blue">Secure consultations</span>
            </div>
        </div>
        <x-card class="bg-gradient-to-br from-blue-50 to-emerald-50 p-8 shadow-2xl">
            <div class="grid h-72 place-content-center rounded-2xl border border-dashed border-blue-200 bg-white/70 text-center">
                <p class="text-lg font-semibold text-slate-700">Healthcare Illustration</p>
                <p class="mt-2 text-sm text-slate-500">Replace with branded hero image asset</p>
            </div>
        </x-card>
    </section>

    <section class="a4w-section pt-6">
        <h2 class="a4w-heading">Core Features</h2>
        <div class="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @foreach ([['24/7 Telehealth Access', 'Get consultations anytime from any device.'], ['Secure Health Records', 'End-to-end privacy and encrypted data sharing.'], ['AI Health Assistant', 'Guidance for mental vs physical care pathways.'], ['Appointment Scheduling', 'Book, reschedule, and track appointments quickly.'], ['Specialist Referrals', 'Seamless referrals between telehealth and hospitals.'], ['Integrated Payments', 'M-Pesa, Airtel Money, and Tigo Pesa support.']] as $feature)
                <x-card class="a4w-soft-panel">
                    <div class="a4w-icon-chip bg-blue-100 ring-blue-50"></div>
                    <h3 class="font-semibold text-slate-900">{{ $feature[0] }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ $feature[1] }}</p>
                </x-card>
            @endforeach
        </div>
    </section>

    <section class="a4w-section py-6">
        <div class="grid gap-6 lg:grid-cols-2">
            <x-card class="a4w-soft-panel bg-gradient-to-br from-emerald-50 to-white">
                <h3 class="text-xl font-semibold text-emerald-700">Mental Health 🧠</h3>
                <ul class="mt-4 space-y-2 text-sm text-slate-600">
                    <li>Therapy sessions</li>
                    <li>Mood tracking support</li>
                    <li>Stress and anxiety management plans</li>
                </ul>
            </x-card>
            <x-card class="a4w-soft-panel bg-gradient-to-br from-blue-50 to-white">
                <h3 class="text-xl font-semibold text-blue-700">Physical Health 🩺</h3>
                <ul class="mt-4 space-y-2 text-sm text-slate-600">
                    <li>Doctor consultations</li>
                    <li>Nutrition guidance</li>
                    <li>Follow-up treatment monitoring</li>
                </ul>
            </x-card>
        </div>
    </section>

    <section class="a4w-section">
        <h2 class="a4w-heading">How It Works</h2>
        <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([['Create Account', 'Set up your secure profile.'], ['Choose Service', 'Select mental or physical care.'], ['Consult Doctor', 'Attend your session online.'], ['Track Progress', 'Review care and follow-ups.']] as $step)
                <x-card class="a4w-soft-panel p-5">
                    <div class="mb-3 h-9 w-9 rounded-lg bg-emerald-100 ring-4 ring-emerald-50"></div>
                    <h3 class="font-semibold text-slate-900">{{ $step[0] }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ $step[1] }}</p>
                </x-card>
            @endforeach
        </div>
    </section>

    <section class="a4w-section">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="a4w-heading text-2xl md:text-3xl">Doctors Preview</h2>
            <a href="{{ route('doctors') }}" class="text-sm font-semibold text-blue-600 hover:text-blue-700">View All</a>
        </div>
        <div class="grid gap-6 md:grid-cols-3">
            @foreach ([['Dr. Neema James', 'Clinical Psychologist'], ['Dr. Kelvin Mushi', 'General Physician'], ['Dr. Asha Komba', 'Nutrition Specialist']] as $doctor)
                <x-card class="a4w-soft-panel overflow-hidden">
                    <div class="h-32 rounded-xl bg-slate-100"></div>
                    <h3 class="mt-4 font-semibold text-slate-900">{{ $doctor[0] }}</h3>
                    <p class="text-sm text-slate-500">{{ $doctor[1] }}</p>
                    <div class="mt-4">
                        <x-button href="{{ route('register') }}">Book Now</x-button>
                    </div>
                </x-card>
            @endforeach
        </div>
    </section>

    <section class="a4w-section">
        <h2 class="a4w-heading">Testimonials</h2>
        <div class="mt-6 grid gap-6 md:grid-cols-3">
            @foreach (['"The therapy support changed my daily life."', '"Appointment booking is quick and stress-free."', '"I trust the doctors and secure process."' ] as $quote)
                <x-card class="a4w-soft-panel">
                    <p class="text-sm text-slate-600">{{ $quote }}</p>
                    <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-blue-700">Verified Patient</p>
                </x-card>
            @endforeach
        </div>
    </section>

    <section class="a4w-section pb-20 pt-8">
        <div class="rounded-2xl bg-blue-600 p-8 text-center shadow-xl">
            <h2 class="text-2xl font-bold text-white">Ready to start your care journey?</h2>
            <p class="mt-2 text-blue-100">Connect with trusted doctors and therapists today.</p>
            <div class="mt-6">
                <x-button href="{{ route('register') }}" class="bg-white text-blue-700 hover:bg-blue-50">Get Started Now</x-button>
            </div>
        </div>
    </section>
@endsection