@extends('layouts.app')

@section('content')


<!-- HERO -->
<section class="relative min-h-screen flex items-center bg-cover bg-center hero-animate"
    style="background-image:url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1600');">

    <div class="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent"></div>

    <div class="relative max-w-3xl px-6 pt-32 md:pt-0 mx-auto text-center md:text-left stagger">
        <h1 class="text-4xl md:text-6xl font-extrabold leading-tight">
            Unlimited Movies, Series & African Originals
        </h1>

        <p class="mt-6 text-lg text-gray-300">
            Watch Nollywood, Ghanaian hits & global blockbusters.
            Stream anywhere in Ghana — zero stress.
        </p>

        <div class="mt-8 flex flex-col md:flex-row gap-4 justify-center md:justify-start">
            <a href="/register"
               class="bg-primary px-8 py-3 rounded-md font-semibold hover:scale-105 transition glow-btn">
                Get Started
            </a>

            <a href="/pricing"
               class="border px-8 py-3 rounded-md hover:bg-white hover:text-black transition">
                View Plans
            </a>
        </div>

        <p class="mt-6 text-sm text-gray-400">
            🇬🇭 Secure payments via Paystack & Flutterwave
        </p>
    </div>
</section>

<!-- FEATURES -->
<section class="py-20 bg-gray-100 dark:bg-[#1a1a1a]">
    <div class="max-w-7xl mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center">Why PlayMax247</h2>

        <div class="grid md:grid-cols-3 gap-8">
            @foreach([
                ['HD Streaming','Crystal-clear streaming on any device'],
                ['Multi Profiles','Separate profiles for family members'],
                ['Continue Watching','Resume where you left off'],
                ['Secure Payments','Paystack & Flutterwave supported'],
                ['Local + Global','African originals + global hits'],
                ['Any Device','Smart TV, phone, laptop or tablet']
            ] as $feature)
                <div class="bg-white dark:bg-[#222] p-8 rounded-xl shadow-lg hover:-translate-y-2 transition">
                    <h3 class="font-bold text-lg mb-2">{{ $feature[0] }}</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">{{ $feature[1] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- PRICING -->
<section id="pricing" class="py-20 bg-black">
    <div class="max-w-7xl mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold mb-12">Choose Your Plan</h2>

        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-[#1f1f1f] p-8 rounded-xl border border-gray-800 hover:scale-105 transition">
                <h3 class="font-bold text-xl">Basic</h3>
                <div class="text-3xl font-extrabold my-4">GHS 25</div>
                <p class="text-gray-400">1 profile SD streaming</p>
                <a href="/register" class="block mt-6 bg-primary py-3 rounded-md font-semibold">
                    Start
                </a>
            </div>

            <div class="bg-primary p-8 rounded-xl text-white scale-105 shadow-2xl">
                <h3 class="font-bold text-xl">Standard</h3>
                <div class="text-3xl font-extrabold my-4">GHS 45</div>
                <p>3 profiles HD streaming</p>
                <a href="/register" class="block mt-6 bg-white text-black py-3 rounded-md font-semibold">
                    Most Popular
                </a>
            </div>

            <div class="bg-[#1f1f1f] p-8 rounded-xl border border-gray-800 hover:scale-105 transition">
                <h3 class="font-bold text-xl">Premium</h3>
                <div class="text-3xl font-extrabold my-4">GHS 65</div>
                <p class="text-gray-400">5 profiles Full HD</p>
                <a href="/register" class="block mt-6 bg-primary py-3 rounded-md font-semibold">
                    Start
                </a>
            </div>
        </div>
    </div>
</section>

<!-- FOOTER -->
<footer class="py-10 text-center text-gray-500 bg-black border-t border-gray-800">
    © 2026 PlayMax247 • Made for Ghana 🇬🇭
</footer>

@endsection