@extends('layouts.app')

@section('title', 'Membership Overview | AICDS')

@section('content')

<x-breadcrumb title="Membership Overview" :breadcrumbs="['Membership' => route('membership.index')]" />

<div class="sp_top_100 sp_bottom_100">
    <div class="container">
        <div class="row text-center mb-5" data-aos="fade-up">
            <div class="col-xl-8 offset-xl-2">
                <div class="default__small__button mb-2">AICDS Membership Roster</div>
                <h2 class="fw-bold">Choose the Membership Designed for Your Career Stage</h2>
                <p class="text-muted">Whether you are an undergraduate exploring AI, a seasoned professor, or an educational institution, AICDS provides accredited certification and institutional prestige.</p>
            </div>
        </div>

        <!-- 4 Core Pillars Overview Cards -->
        <div class="row g-4 mb-5">
            <div class="col-xl-3 col-lg-6 col-md-6" data-aos="fade-up">
                <div class="card p-4 h-100 border rounded-4 shadow-sm text-center">
                    <div class="rounded-circle bg-primary-subtle text-primary p-3 mx-auto mb-3" style="width: 70px; height: 70px;">
                        <i class="icofont-graduate fs-2"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Student Membership</h5>
                    <p class="text-muted small mb-3">Subsidized fee of ₹500 + 18% GST valid through your degree completion.</p>
                    <a href="{{ route('membership.student') }}" class="btn btn-outline-primary btn-sm rounded-pill fw-semibold mt-auto">Explore Student Benefits</a>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-md-6" data-aos="fade-up">
                <div class="card p-4 h-100 border rounded-4 shadow-sm text-center">
                    <div class="rounded-circle bg-success-subtle text-success p-3 mx-auto mb-3" style="width: 70px; height: 70px;">
                        <i class="icofont-business-man fs-2"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Professional</h5>
                    <p class="text-muted small mb-3">1 Year (₹750), 5 Years (₹3,000), or Prestigious Lifetime (₹10,000).</p>
                    <a href="{{ route('membership.professional') }}" class="btn btn-outline-success btn-sm rounded-pill fw-semibold mt-auto">Professional Plans</a>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-md-6" data-aos="fade-up">
                <div class="card p-4 h-100 border rounded-4 shadow-sm text-center">
                    <div class="rounded-circle bg-warning-subtle text-dark p-3 mx-auto mb-3" style="width: 70px; height: 70px;">
                        <i class="icofont-institution fs-2"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Institutional</h5>
                    <p class="text-muted small mb-3">Collegiate affiliation from 1 Year (₹4,000) up to 20 Years (₹75,000).</p>
                    <a href="{{ route('membership.institutional') }}" class="btn btn-outline-warning btn-sm text-dark rounded-pill fw-semibold mt-auto">Institutional Tiers</a>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-md-6" data-aos="fade-up">
                <div class="card p-4 h-100 border rounded-4 shadow-sm text-center">
                    <div class="rounded-circle bg-info-subtle text-info p-3 mx-auto mb-3" style="width: 70px; height: 70px;">
                        <i class="icofont-building fs-2"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Corporate Partner</h5>
                    <p class="text-muted small mb-3">Direct campus hiring pipeline, joint innovation labs, and branding.</p>
                    <a href="{{ route('membership.corporate') }}" class="btn btn-outline-info btn-sm rounded-pill fw-semibold mt-auto">Corporate Inquiries</a>
                </div>
            </div>
        </div>

        <!-- All Plans Grid -->
        <div class="row pt-4 border-top">
            <div class="col-12 mb-4">
                <h3 class="fw-bold text-center">All Available Membership Packages</h3>
            </div>
            @foreach($plans as $plan)
                <x-membership-card :plan="$plan" />
            @endforeach
        </div>

        <!-- Verification Banner -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="p-4 p-md-5 bg-light rounded-4 border text-center">
                    <h4 class="fw-bold mb-2"><i class="icofont-badge text-primary me-2"></i> Need to Verify an Existing Member?</h4>
                    <p class="text-muted mb-4 max-w-600 mx-auto">Verify active status, credentials, and validity of any AICDS Member Number instantly.</p>
                    <a href="{{ route('membership.verify') }}" class="default__button default__button--2">Go to Member Verification Portal</a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection