@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <section class="py-5 membership-sec">
        <div class="container">

            <div class="row justify-content-center g-4">

                <!-- Monthly Plan -->
                <div class="col-md-5">
                    <div class="card shadow-lg border-0 h-100 hover-shadow transition">
                        <div class="card-header bg-primary text-white text-center">
                            <h4 class="mb-0">Monthly Plan</h4>
                        </div>
                        <div class="card-body text-center">
                            <h2 class="text-primary">₹299 <small>/month</small></h2>
                            <ul class="list-unstyled my-3">
                                <li><i class="bi bi-check-circle text-success me-2"></i>Exclusive Content</li>
                                <li><i class="bi bi-check-circle text-success me-2"></i>Monthly Newsletters</li>
                                <li><i class="bi bi-check-circle text-success me-2"></i>Support Cow Protection</li>
                            </ul>
                            <a href="" class="btn btn-outline-primary w-100 rounded-pill mt-3">Subscribe Now</a>
                        </div>
                    </div>
                </div>

                <!-- Yearly Plan --> 
                <div class="col-md-5">
                    <div class="card shadow-lg border-0 h-100 hover-shadow transition">
                        <div class="card-header bg-success text-white text-center">
                            <h4 class="mb-0">Yearly Plan</h4>
                        </div>
                        <div class="card-body text-center">
                            <h2 class="text-success">₹2999 <small>/year</small></h2>
                            <ul class="list-unstyled my-3">
                                <li><i class="bi bi-check-circle text-success me-2"></i>All Monthly Benefits</li>
                                <li><i class="bi bi-gift text-success me-2"></i>Annual Gift & Recognition</li>
                                <li><i class="bi bi-star text-success me-2"></i>Priority Blessings & Access</li>
                            </ul>
                            <a href="" class="btn btn-outline-success w-100 rounded-pill mt-3">Subscribe Now</a>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Already a member -->
            <div class="text-center mt-5">
                <p class="mb-2 text-muted">Already a member?</p>
                <a href="{{ route('login') }}" class="btn btn-dark rounded-pill px-4"><i class="bi bi-person-circle me-1"></i>Login to Dashboard</a>
            </div>
        </div>
    </section>

@endsection