import type { Metadata } from "next";
import Link from "next/link";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import {
  Activity,
  Bell,
  BriefcaseBusiness,
  ChevronDown,
  CircleDollarSign,
  ClipboardList,
  FileText,
  FolderKanban,
  Headphones,
  LayoutDashboard,
  LogOut,
  Menu,
  MessageSquareText,
  ReceiptText,
  Settings,
  ShieldCheck,
  Users,
  UserRound,
  WalletCards,
} from "lucide-react";

import { prisma } from "@/lib/prisma";
import {
  AUTH_COOKIE_NAME,
} from "@/lib/auth/constants";
import {
  hashSessionToken,
  isValidSessionTokenFormat,
} from "@/lib/auth/session-token";
import {
  hasPermission,
  loadAuthorizationForUser,
} from "@/lib/auth/authorization";

import AdminLogoutButton from "./AdminLogoutButton";
import NotificationReadButton from "./NotificationReadButton";

export const metadata: Metadata = {
  title: "Admin Dashboard | Teja Technology",
  robots: {
    index: false,
    follow: false,
  },
};

export const dynamic = "force-dynamic";

type NavItem = {
  label: string;
  href?: string;
  icon: React.ComponentType<{ size?: number; strokeWidth?: number }>;
  permission?: string;
  badge?: string;
};

type NavSection = {
  title: string;
  items: NavItem[];
};

const navigation: NavSection[] = [
  {
    title: "MAIN",
    items: [
      {
        label: "Dashboard",
        href: "/admin",
        icon: LayoutDashboard,
      },
    ],
  },
  {
    title: "BUSINESS",
    items: [
      {
        label: "Leads",
        href: "/admin/leads",
        icon: Users,
        permission: "LEAD_VIEW",
      },
      {
        label: "Customers",
        href: "/admin/customers",
        icon: BriefcaseBusiness,
        permission: "CLIENT_VIEW",
      },
      {
        label: "Projects",
        href: "/admin/projects",
        icon: FolderKanban,
      },
      {
        label: "Requirements",
        href: "/admin/requirements",
        icon: ClipboardList,
      },
    ],
  },
  {
    title: "SALES",
    items: [
      {
        label: "Quotations",
        href: "/admin/quotations",
        icon: FileText,
      },
      {
        label: "Invoices",
        href: "/admin/invoices",
        icon: ReceiptText,
      },
      {
        label: "Payments",
        href: "/admin/payments",
        icon: CircleDollarSign,
      },
    ],
  },
  {
    title: "OPERATIONS",
    items: [
      {
        label: "Tasks",
        href: "/admin/tasks",
        icon: ClipboardList,
      },
      {
        label: "Follow-ups",
        icon: MessageSquareText,
      },
      {
        label: "Support Tickets",
        href: "/admin/support-tickets",
        icon: Headphones,
      },
    ],
  },
  {
    title: "COMMUNICATION",
    items: [
      {
        label: "Notifications",
        icon: Bell,
        href: "/admin#notifications",
      },
      {
        label: "Email Templates",
        icon: FileText,
        badge: "Soon",
      },
    ],
  },
  {
    title: "SYSTEM",
    items: [
      {
        label: "Activity Log",
        href: "/admin/activity-log",
        icon: Activity,
        badge: "Soon",
      },
      {
        label: "Staff & Users",
        href: "/admin/staff",
        icon: Users,
        badge: "Soon",
      },
      {
        label: "Reports",
        href: "/admin/reports",
        icon: WalletCards,
        badge: "Soon",
      },
      {
        label: "Settings",
        icon: Settings,
        badge: "Soon",
      },
    ],
  },
];

function isNavigationVisible(
  item: NavItem,
  permissions: string[],
): boolean {
  if (!item.permission) {
    return true;
  }

  return permissions.includes(item.permission);
}

export default async function AdminDashboardPage() {
  const cookieStore = await cookies();

  const token =
    cookieStore.get(AUTH_COOKIE_NAME)?.value;

  if (
    !token ||
    !isValidSessionTokenFormat(token)
  ) {
    redirect("/admin/login");
  }

  const session = await prisma.authSession.findUnique({
    where: {
      tokenHash: hashSessionToken(token),
    },
    select: {
      userId: true,
      expiresAt: true,
      revokedAt: true,
    },
  });

  if (
    !session ||
    session.revokedAt !== null ||
    session.expiresAt.getTime() <= Date.now()
  ) {
    redirect("/admin/login");
  }

  const authorization =
    await loadAuthorizationForUser(session.userId);

  if (!authorization) {
    redirect("/admin/login");
  }

  const [
    leadCount,
    customerCount,
    projectCount,
    paymentCount,
    recentActivities,
    recentNotifications,
  ] = await Promise.all([
    prisma.lead.count(),
    prisma.client.count(),
    prisma.project.count(),
    prisma.payment.count(),
    prisma.auditLog.findMany({
      orderBy: {
        createdAt: "desc",
      },
      take: 8,
      select: {
        id: true,
        action: true,
        module: true,
        entityType: true,
        entityId: true,
        createdAt: true,
        user: {
          select: {
            name: true,
          },
        },
      },
    }),
    prisma.notification.findMany({
      where: {
        userId: authorization.userId,
      },
      orderBy: {
        createdAt: "desc",
      },
      take: 5,
      select: {
        id: true,
        title: true,
        message: true,
        status: true,
        readAt: true,
        createdAt: true,
      },
    }),
  ]);

  if (
    !authorization ||
    authorization.status !== "ACTIVE" ||
    !authorization.roles.includes("SUPER_ADMIN")
  ) {
    redirect("/admin/login");
  }

  if (authorization.mustChangePassword) {
    redirect("/admin/change-password");
  }

  const visibleNavigation = navigation.map((section) => ({
    ...section,
    items: section.items.filter((item) =>
      isNavigationVisible(
        item,
        authorization.permissions,
      ),
    ),
  }));

  return (
    <main className="min-h-screen bg-[#f5f7fb] text-[var(--navy)]">
      <div className="flex min-h-screen">

        {/* =====================================================
            SIDEBAR
            ===================================================== */}
        <aside className="hidden w-[260px] shrink-0 border-r border-slate-200 bg-white lg:flex lg:flex-col">

          <div className="flex h-[76px] items-center border-b border-slate-200 px-6">
            <div className="flex items-center gap-3">
              <div className="grid h-10 w-10 place-items-center rounded-xl bg-[var(--blue)] text-sm font-black text-white shadow-sm">
                TT
              </div>

              <div>
                <p className="text-sm font-extrabold tracking-tight text-[var(--navy)]">
                  TEJA TECHNOLOGY
                </p>

                <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                  CRM Workspace
                </p>
              </div>
            </div>
          </div>

          <div className="flex-1 overflow-y-auto px-3 py-5">
            {visibleNavigation.map((section) => (
              <div key={section.title} className="mb-6">

                <p className="px-3 pb-2 text-[10px] font-extrabold tracking-[0.16em] text-slate-400">
                  {section.title}
                </p>

                <nav className="space-y-1">
                  {section.items.map((item) => {
                    const Icon = item.icon;
                    const active =
                      item.href === "/admin";

                    if (!item.href) {
                      return (
                        <div
                          key={item.label}
                          className="flex cursor-default items-center justify-between rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-400"
                        >
                          <span className="flex items-center gap-3">
                            <Icon
                              size={18}
                              strokeWidth={1.8}
                            />
                            {item.label}
                          </span>

                          {item.badge && (
                            <span className="rounded-md bg-slate-100 px-1.5 py-0.5 text-[9px] font-bold text-slate-400">
                              {item.badge}
                            </span>
                          )}
                        </div>
                      );
                    }

                    return (
                      <Link
                        key={item.label}
                        href={item.href}
                        className={
                          active
                            ? "flex items-center justify-between rounded-xl bg-blue-50 px-3 py-2.5 text-sm font-bold text-[var(--blue)]"
                            : "flex items-center justify-between rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-[var(--blue)]"
                        }
                      >
                        <span className="flex items-center gap-3">
                          <Icon
                            size={18}
                            strokeWidth={active ? 2.2 : 1.8}
                          />
                          {item.label}
                        </span>

                        {item.badge && (
                          <span className="rounded-md bg-slate-100 px-1.5 py-0.5 text-[9px] font-bold text-slate-400">
                            {item.badge}
                          </span>
                        )}
                      </Link>
                    );
                  })}
                </nav>
              </div>
            ))}
          </div>

          <div className="border-t border-slate-200 p-4">
            <Link
              href="/admin/change-password"
              className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-50"
            >
              <ShieldCheck size={18} />
              Security
            </Link>
          </div>
        </aside>

        {/* =====================================================
            MAIN AREA
            ===================================================== */}
        <div className="flex min-w-0 flex-1 flex-col">

          {/* TOP HEADER */}
          <header className="sticky top-0 z-20 flex h-[76px] items-center justify-between border-b border-slate-200 bg-white/95 px-5 backdrop-blur md:px-8">

            <div className="flex items-center gap-3">
              <details className="relative lg:hidden">
                <summary
                  aria-label="Open navigation"
                  className="grid h-10 w-10 cursor-pointer list-none place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:border-blue-200 hover:text-[var(--blue)]"
                >
                  <Menu size={20} />
                </summary>

                <div className="absolute left-0 top-12 z-50 w-[290px] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_20px_60px_rgba(15,23,42,0.16)]">
                  <div className="border-b border-slate-100 px-5 py-4">
                    <p className="text-xs font-extrabold uppercase tracking-[0.16em] text-[var(--blue)]">
                      Teja Technology
                    </p>
                    <p className="mt-1 text-xs text-slate-400">
                      CRM Workspace
                    </p>
                  </div>

                  <div className="max-h-[70vh] overflow-y-auto p-3">
                    {visibleNavigation.map((section) => (
                      <div key={section.title} className="mb-4 last:mb-0">
                        <p className="px-3 pb-2 text-[10px] font-extrabold uppercase tracking-[0.16em] text-slate-400">
                          {section.title}
                        </p>

                        <nav className="space-y-1">
                          {section.items.map((item) => {
                            const Icon = item.icon;
                            const active = item.href === "/admin";

                            if (!item.href) {
                              return (
                                <div
                                  key={item.label}
                                  className="flex items-center justify-between rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-400"
                                >
                                  <span className="flex items-center gap-3">
                                    <Icon size={18} strokeWidth={1.8} />
                                    {item.label}
                                  </span>

                                  {item.badge && (
                                    <span className="rounded-md bg-slate-100 px-1.5 py-0.5 text-[9px] font-bold text-slate-400">
                                      {item.badge}
                                    </span>
                                  )}
                                </div>
                              );
                            }

                            return (
                              <Link
                                key={item.label}
                                href={item.href}
                                className={
                                  active
                                    ? "flex items-center justify-between rounded-xl bg-blue-50 px-3 py-2.5 text-sm font-bold text-[var(--blue)]"
                                    : "flex items-center justify-between rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-[var(--blue)]"
                                }
                              >
                                <span className="flex items-center gap-3">
                                  <Icon
                                    size={18}
                                    strokeWidth={active ? 2.2 : 1.8}
                                  />
                                  {item.label}
                                </span>
                              </Link>
                            );
                          })}
                        </nav>
                      </div>
                    ))}
                  </div>
                </div>
              </details>

              <div>
                <p className="text-[10px] font-extrabold uppercase tracking-[0.18em] text-[var(--blue)]">
                  TEJA TECHNOLOGY CRM
                </p>

                <h1 className="text-lg font-extrabold tracking-tight text-[var(--navy)]">
                  Admin Dashboard
                </h1>
              </div>

              <div className="hidden xl:flex xl:w-[280px] 2xl:w-[360px]">
                <label className="flex h-10 w-full items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 text-slate-400 focus-within:border-blue-200 focus-within:bg-white">
                  <span className="text-sm">⌕</span>
                  <input
                    type="search"
                    placeholder="Search CRM..."
                    aria-label="Search CRM"
                    className="w-full bg-transparent text-sm text-slate-700 outline-none placeholder:text-slate-400"
                  />
                </label>
              </div>
            </div>

            <div className="flex items-center gap-3">

              <div className="relative hidden sm:block">
                <a
                  href="#notifications"
                  aria-label="Notifications"
                  className="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:border-blue-200 hover:text-[var(--blue)]"
                >
                  <Bell size={18} />
                </a>

                <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
              </div>

              <div className="hidden h-9 w-px bg-slate-200 sm:block" />

              <div className="flex items-center gap-3">
                <div className="hidden text-right sm:block">
                  <p className="text-sm font-bold text-[var(--navy)]">
                    {authorization.name}
                  </p>

                  <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
                    SUPER_ADMIN
                  </p>
                </div>

                <div className="grid h-10 w-10 place-items-center rounded-full bg-blue-50 text-[var(--blue)]">
                  <UserRound size={19} />
                </div>

                <ChevronDown
                  size={16}
                  className="hidden text-slate-400 sm:block"
                />
              </div>
            </div>
          </header>

          {/* CONTENT */}
          <div className="flex-1 px-5 py-7 md:px-8 md:py-9">

            <div className="mx-auto max-w-[1500px]">

              {/* WELCOME */}
              <section className="mb-7">
                <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">

                  <div>
                    <p className="mb-2 text-xs font-bold uppercase tracking-[0.18em] text-[var(--blue)]">
                      Administrator Workspace
                    </p>

                    <h2 className="text-2xl font-extrabold tracking-tight text-[var(--navy)] md:text-3xl">
                      Welcome back, {authorization.name}
                    </h2>

                    <p className="mt-2 text-sm text-slate-500">
                      Manage your CRM operations, leads and business
                      workflow from one secure workspace.
                    </p>
                  </div>

                  <div className="flex items-center gap-2 rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-2.5">
                    <span className="h-2 w-2 rounded-full bg-emerald-500" />
                    <span className="text-xs font-bold text-emerald-700">
                      System Access Active
                    </span>
                  </div>
                </div>
              </section>

              {/* METRICS PLACEHOLDER */}
              <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">

                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
                      Leads
                    </span>

                    <span className="grid h-10 w-10 place-items-center rounded-xl bg-blue-50 text-[var(--blue)]">
                      <Users size={19} />
                    </span>
                  </div>

                  <p className="mt-5 text-3xl font-extrabold text-[var(--navy)]">
                    {leadCount}
                  </p>

                  <p className="mt-1 text-xs text-slate-400">
                    Total leads in CRM
                  </p>
                </div>

                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
                      Customers
                    </span>

                    <span className="grid h-10 w-10 place-items-center rounded-xl bg-indigo-50 text-indigo-600">
                      <BriefcaseBusiness size={19} />
                    </span>
                  </div>

                  <p className="mt-5 text-3xl font-extrabold text-[var(--navy)]">
                    {customerCount}
                  </p>

                  <p className="mt-1 text-xs text-slate-400">
                    Total customers
                  </p>
                </div>

                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
                      Projects
                    </span>

                    <span className="grid h-10 w-10 place-items-center rounded-xl bg-violet-50 text-violet-600">
                      <FolderKanban size={19} />
                    </span>
                  </div>

                  <p className="mt-5 text-3xl font-extrabold text-[var(--navy)]">
                    {projectCount}
                  </p>

                  <p className="mt-1 text-xs text-slate-400">
                    Total projects
                  </p>
                </div>

                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
                      Payments
                    </span>

                    <span className="grid h-10 w-10 place-items-center rounded-xl bg-emerald-50 text-emerald-600">
                      <CircleDollarSign size={19} />
                    </span>
                  </div>

                  <p className="mt-5 text-3xl font-extrabold text-[var(--navy)]">
                    {paymentCount}
                  </p>

                  <p className="mt-1 text-xs text-slate-400">
                    Total payments
                  </p>
                </div>

              </section>

              {/* LOWER DASHBOARD */}
              <section className="mt-6 grid gap-6 xl:grid-cols-[1.5fr_1fr]">

                {/* ACTIVITY */}
                <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">

                  <div className="flex items-center justify-between border-b border-slate-100 px-6 py-5">
                    <div>
                      <h3 className="font-extrabold text-[var(--navy)]">
                        Recent Activity
                      </h3>

                      <p className="mt-1 text-xs text-slate-400">
                        Business activity will appear here.
                      </p>
                    </div>

                    <Activity
                      size={19}
                      className="text-[var(--blue)]"
                    />
                  </div>

                  <div className="divide-y divide-slate-100">
                    {recentActivities.length === 0 ? (
                      <div className="px-6 py-10 text-center">
                        <Activity
                          size={30}
                          className="mx-auto text-slate-300"
                        />
                        <p className="mt-3 text-sm font-bold text-slate-500">
                          No activity yet
                        </p>
                      </div>
                    ) : (
                      recentActivities.map((activity) => (
                        <div
                          key={activity.id}
                          className="flex items-start gap-4 px-6 py-4"
                        >
                          <div className="mt-1 grid h-9 w-9 shrink-0 place-items-center rounded-full bg-blue-50 text-[var(--blue)]">
                            <Activity size={16} />
                          </div>

                          <div className="min-w-0 flex-1">
                            <p className="text-sm font-bold text-[var(--navy)]">
                              {activity.action.replaceAll("_", " ")}
                            </p>

                            <p className="mt-1 text-xs text-slate-500">
                              {activity.module}
                              {activity.entityType
                                ? ` • ${activity.entityType}`
                                : ""}
                              {activity.user?.name
                                ? ` • ${activity.user.name}`
                                : ""}
                            </p>

                            <p className="mt-1 text-[11px] text-slate-400">
                              {activity.createdAt.toLocaleString("en-IN")}
                            </p>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>

                {/* QUICK ACTIONS */}
                <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">

                  <div className="border-b border-slate-100 px-6 py-5">
                    <h3 className="font-extrabold text-[var(--navy)]">
                      Quick Access
                    </h3>

                    <p className="mt-1 text-xs text-slate-400">
                      Frequently used CRM modules.
                    </p>
                  </div>

                  <div className="space-y-2 p-5">

                    {hasPermission(
                      authorization,
                      "LEAD_VIEW",
                    ) && (
                      <Link
                        href="/admin/leads"
                        className="flex items-center justify-between rounded-xl border border-slate-100 px-4 py-3 transition hover:border-blue-100 hover:bg-blue-50"
                      >
                        <span className="flex items-center gap-3">
                          <span className="grid h-9 w-9 place-items-center rounded-lg bg-blue-50 text-[var(--blue)]">
                            <Users size={17} />
                          </span>

                          <span>
                            <span className="block text-sm font-bold text-[var(--navy)]">
                              Lead Management
                            </span>

                            <span className="block text-[11px] text-slate-400">
                              View and manage leads
                            </span>
                          </span>
                        </span>

                        <ChevronDown
                          size={16}
                          className="-rotate-90 text-slate-400"
                        />
                      </Link>
                    )}

                    <Link
                      href="/admin/change-password"
                      className="flex items-center justify-between rounded-xl border border-slate-100 px-4 py-3 transition hover:border-blue-100 hover:bg-blue-50"
                    >
                      <span className="flex items-center gap-3">
                        <span className="grid h-9 w-9 place-items-center rounded-lg bg-slate-50 text-slate-600">
                          <ShieldCheck size={17} />
                        </span>

                        <span>
                          <span className="block text-sm font-bold text-[var(--navy)]">
                            Security
                          </span>

                          <span className="block text-[11px] text-slate-400">
                            Password and account security
                          </span>
                        </span>
                      </span>

                      <ChevronDown
                        size={16}
                        className="-rotate-90 text-slate-400"
                      />
                    </Link>

                  </div>
                </div>
              </section>

              {/* NOTIFICATIONS */}
              <section id="notifications" className="mt-6 scroll-mt-24 rounded-2xl border border-slate-200 bg-white shadow-sm">
                <div className="flex items-center justify-between border-b border-slate-100 px-6 py-5">
                  <div>
                    <h3 className="font-extrabold text-[var(--navy)]">
                      Notifications
                    </h3>
                    <p className="mt-1 text-xs text-slate-400">
                      Latest CRM and system notifications.
                    </p>
                  </div>

                  <Bell
                    size={19}
                    className="text-[var(--blue)]"
                  />
                </div>

                <div className="divide-y divide-slate-100">
                  {recentNotifications.length === 0 ? (
                    <div className="px-6 py-8 text-center text-sm text-slate-400">
                      No notifications yet.
                    </div>
                  ) : (
                    recentNotifications.map((notification) => (
                      <div
                        key={notification.id}
                        className="flex items-start gap-4 px-6 py-4"
                      >
                        <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-slate-50 text-slate-600">
                          <Bell size={16} />
                        </div>

                        <div className="min-w-0 flex-1">
                          <div className="flex flex-wrap items-center gap-2">
                            <p className="text-sm font-bold text-[var(--navy)]">
                              {notification.title}
                            </p>

                            <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase text-slate-500">
                              {notification.status}
                            </span>

                            {!notification.readAt && (
                              <span className="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-bold uppercase text-blue-600">
                                NEW
                              </span>
                            )}
                          </div>

                          <p className="mt-1 text-xs leading-5 text-slate-500">
                            {notification.message}
                          </p>

                          <p className="mt-1 text-[11px] text-slate-400">
                            {notification.createdAt.toLocaleString("en-IN")}
                          </p>

                          {!notification.readAt && (
                            <NotificationReadButton
                              notificationId={notification.id}
                            />
                          )}
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </section>

              {/* SECURITY / ACCOUNT */}
              <section className="mt-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">

                <div className="flex flex-col justify-between gap-5 md:flex-row md:items-center">

                  <div className="flex items-start gap-4">
                    <div className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-50 text-emerald-600">
                      <ShieldCheck size={21} />
                    </div>

                    <div>
                      <h3 className="font-extrabold text-[var(--navy)]">
                        Administrator access verified
                      </h3>

                      <p className="mt-1 text-sm text-slate-500">
                        {authorization.email}
                      </p>

                      <p className="mt-2 text-[10px] font-extrabold uppercase tracking-wider text-emerald-600">
                        ACTIVE · SUPER_ADMIN
                      </p>
                    </div>
                  </div>

                  <div className="shrink-0">
                    <AdminLogoutButton />
                  </div>

                </div>
              </section>

            </div>
          </div>
        </div>
      </div>
    </main>
  );
}