"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import {
  Car, Heart, GitCompare, Clock, Trash2, Star,
  ChevronRight, Eye, RotateCcw, Plus,
  Sparkles, AlertCircle, Check, X as XIcon,
  SlidersHorizontal,
} from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

import { useOwnedCarsStore, type OwnedCarEntry } from "@/store/useOwnedCarsStore";
import { useWishlistStore }         from "@/store/useWishlistStore";
import { useCarStore }              from "@/store/useCarStore";
import { useRecentlyViewedStore }   from "@/store/useRecentlyViewedStore";
import type { Car as CarType }      from "@/lib/types";
import { cn, formatPrice }          from "@/lib/utils";
import { resolveCarHeroImage } from "@/lib/carImage";
import { resolveUploadUrl } from "@/lib/uploadUrl";

// ── helpers ───────────────────────────────────────────────────────────────────

function fmtINR(n?: number | null): string {
  if (n == null || !n) return "—";
  if (n >= 10_000_000) return `₹${(n / 10_000_000).toFixed(1)} Cr`;
  if (n >= 100_000)    return `₹${(n / 100_000).toFixed(1)}L`;
  return `₹${n.toLocaleString("en-IN")}`;
}

function timeAgo(iso: string): string {
  const diff = Date.now() - new Date(iso).getTime();
  const days = Math.floor(diff / 86_400_000);
  if (days === 0)  return "Today";
  if (days === 1)  return "Yesterday";
  if (days < 30)  return `${days}d ago`;
  if (days < 365) return `${Math.floor(days / 30)}mo ago`;
  return `${Math.floor(days / 365)}y ago`;
}

// ── Tab config ────────────────────────────────────────────────────────────────

type TabKey = "owned" | "wishlist" | "compare" | "recent";

interface Tab {
  key:     TabKey;
  label:   string;
  icon:    React.ElementType;
  accent:  string;          // tailwind text-color
  bg:      string;          // active tab bg
  empty:   string;
  emptyAction: { label: string; href: string };
}

const TABS: Tab[] = [
  {
    key:    "owned",
    label:  "My Cars",
    icon:   Car,
    accent: "text-blue-600",
    bg:     "bg-blue-600",
    empty:  "Add cars you own to keep track of them.",
    emptyAction: { label: "Browse cars",  href: "/cars" },
  },
  {
    key:    "wishlist",
    label:  "Wishlist",
    icon:   Heart,
    accent: "text-rose-500",
    bg:     "bg-rose-500",
    empty:  "Save cars you're interested in buying.",
    emptyAction: { label: "Explore cars", href: "/cars" },
  },
  {
    key:    "compare",
    label:  "Compare List",
    icon:   GitCompare,
    accent: "text-violet-600",
    bg:     "bg-violet-600",
    empty:  "Add up to 4 cars to compare side-by-side.",
    emptyAction: { label: "Find cars to compare", href: "/cars" },
  },
  {
    key:    "recent",
    label:  "Recently Viewed",
    icon:   Clock,
    accent: "text-amber-500",
    bg:     "bg-amber-500",
    empty:  "Cars you recently browsed appear here.",
    emptyAction: { label: "Start browsing",  href: "/cars" },
  },
];

// ── Car card ──────────────────────────────────────────────────────────────────

function GarageCard({
  id,
  name,
  brand,
  priceMin,
  priceMax,
  fuelType,
  bodyType,
  rating,
  imageUrl,
  slug,
  year,
  badge,
  meta,
  actions,
}: {
  id:       string;
  name:     string;
  brand:    string;
  priceMin: number;
  priceMax: number;
  fuelType: string;
  bodyType: string;
  rating?:  number;
  imageUrl?:string | null;
  slug?:    string | null;
  year?:    number | null;
  badge?:   React.ReactNode;
  meta?:    React.ReactNode;
  actions:  React.ReactNode;
}) {
  const href = slug ? `/cars/${slug}` : `/cars/${id}`;
  return (
    <motion.div
      layout
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2 }}
      className="min-w-0 rounded-[24px] border border-gray-100 bg-white overflow-hidden hover:border-blue-200 hover:shadow-xl hover:shadow-blue-50 transition-all duration-300 flex flex-col"
    >
      {/* Image */}
      <Link href={href} className="block relative h-40 bg-gradient-to-br from-gray-50 to-blue-50 shrink-0">
        {imageUrl ? (
          <Image
            src={resolveUploadUrl(imageUrl)}
            alt={name}
            fill
            className="object-contain p-3 hover:scale-105 transition-transform duration-300"
            sizes="(max-width: 640px) 50vw, 25vw"
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-5xl font-black text-gray-200 select-none">
            {(brand?.[0] ?? "?").toUpperCase()}
          </div>
        )}
        {badge && <div className="absolute top-2 left-2">{badge}</div>}
      </Link>

      {/* Info */}
      <div className="p-3 sm:p-4 flex flex-col gap-2 flex-1 min-w-0">
        <div className="min-w-0">
          <p className="text-[9px] font-black uppercase tracking-widest text-blue-600 truncate">{brand || "—"}</p>
          <Link href={href}>
            <h3 className="text-sm font-black text-gray-900 hover:text-blue-600 transition-colors leading-tight line-clamp-1">
              {name}
            </h3>
          </Link>
          {year && <p className="text-[10px] text-gray-400">{year} Model</p>}
        </div>

        <div className="min-w-0 space-y-0.5">
          <div className="flex items-baseline gap-1 min-w-0">
            <span className="text-sm font-black text-gray-900 truncate">{fmtINR(priceMin)}</span>
            {priceMax > priceMin && (
              <span className="text-xs text-gray-400 truncate shrink">– {fmtINR(priceMax)}</span>
            )}
          </div>
          {(rating ?? 0) > 0 && (
            <div className="flex items-center gap-1">
              <Star className="w-3 h-3 fill-amber-400 text-amber-400 shrink-0" />
              <span className="text-[11px] font-bold text-gray-600">{rating!.toFixed(1)}</span>
            </div>
          )}
        </div>

        <div className="flex flex-wrap gap-1.5">
          {fuelType && (
            <span className="text-[9px] font-bold px-2 py-0.5 rounded-lg bg-gray-100 text-gray-600">{fuelType}</span>
          )}
          {bodyType && (
            <span className="text-[9px] font-bold px-2 py-0.5 rounded-lg bg-gray-100 text-gray-600">{bodyType}</span>
          )}
        </div>

        {meta && <div className="text-[10px] text-gray-400">{meta}</div>}

        {/* Actions */}
        <div className="mt-auto pt-2 border-t border-gray-50 flex gap-1.5 min-w-0">
          {actions}
        </div>
      </div>
    </motion.div>
  );
}

// ── Empty state ───────────────────────────────────────────────────────────────

function EmptyState({ tab }: { tab: Tab }) {
  const Icon = tab.icon;
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="col-span-full flex flex-col items-center justify-center py-20 text-center"
    >
      <div className={cn("w-16 h-16 rounded-3xl flex items-center justify-center mb-4", `bg-gray-100`)}>
        <Icon className="w-8 h-8 text-gray-300" />
      </div>
      <h3 className="text-lg font-black text-gray-700 mb-1">Nothing here yet</h3>
      <p className="text-sm text-gray-400 max-w-xs mb-6">{tab.empty}</p>
      <Link
        href={tab.emptyAction.href}
        className="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl bg-gray-900 text-white text-sm font-bold hover:bg-gray-700 transition-colors"
      >
        {tab.emptyAction.label}
        <ChevronRight className="w-4 h-4" />
      </Link>
    </motion.div>
  );
}

// ── Action button ─────────────────────────────────────────────────────────────

function ActionBtn({
  onClick,
  variant = "ghost",
  children,
  title,
  compact,
}: {
  onClick: () => void;
  variant?: "ghost" | "danger" | "primary";
  children: React.ReactNode;
  title?: string;
  compact?: boolean;
}) {
  return (
    <button
      onClick={onClick}
      title={title}
      className={cn(
        "flex items-center justify-center gap-1 py-2 rounded-xl text-[10px] font-bold transition-all min-w-0",
        compact ? "shrink-0 px-2.5" : "flex-1",
        variant === "primary" && "bg-blue-600 text-white hover:bg-blue-700",
        variant === "ghost"   && "border border-gray-200 text-gray-600 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50",
        variant === "danger"  && "border border-gray-200 text-gray-400 hover:border-red-200 hover:text-red-500 hover:bg-red-50",
      )}
    >
      {children}
    </button>
  );
}

// ── Section header ────────────────────────────────────────────────────────────

function SectionHeader({
  tab,
  count,
  onClear,
}: {
  tab: Tab;
  count: number;
  onClear: () => void;
}) {
  const Icon = tab.icon;
  return (
    <div className="flex flex-wrap items-center justify-between gap-2 mb-5">
      <div className="flex items-center gap-3 min-w-0 flex-1">
        <div className={cn("w-9 h-9 rounded-2xl flex items-center justify-center", tab.bg)}>
          <Icon className="w-4.5 h-4.5 text-white" />
        </div>
        <div className="min-w-0">
          <h2 className="text-base font-black text-gray-900 truncate">{tab.label}</h2>
          <p className="text-[11px] text-gray-400">{count} car{count !== 1 ? "s" : ""}</p>
        </div>
      </div>
      {count > 0 && (
        <button
          onClick={onClear}
          className="flex items-center gap-1 shrink-0 text-[10px] font-bold text-gray-400 hover:text-red-500 transition-colors px-2 py-1 rounded-xl hover:bg-red-50"
        >
          <Trash2 className="w-3 h-3" />
          Clear all
        </button>
      )}
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────

export default function GaragePage() {
  const [activeTab, setActiveTab] = useState<TabKey>("owned");

  const owned    = useOwnedCarsStore();
  const wishlist = useWishlistStore();
  const carStore = useCarStore();
  const recent   = useRecentlyViewedStore();

  const counts: Record<TabKey, number> = {
    owned:    owned.items.length,
    wishlist: wishlist.items.length,
    compare:  carStore.compareList.length,
    recent:   recent.items.length,
  };

  const totalSaved = counts.owned + counts.wishlist;

  // ── owned cars tab ─────────────────────────────────────────────────────────
  function OwnedSection() {
    return (
      <>
        <SectionHeader
          tab={TABS[0]}
          count={counts.owned}
          onClear={owned.clear}
        />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 min-w-0">
          <AnimatePresence>
            {owned.items.length === 0 ? (
              <EmptyState tab={TABS[0]} />
            ) : (
              owned.items.map((car: OwnedCarEntry) => (
                <GarageCard
                  key={car.id}
                  id={car.id}
                  name={car.name ?? "Unknown car"}
                  brand={car.brand ?? "—"}
                  priceMin={car.priceMin ?? 0}
                  priceMax={car.priceMax ?? 0}
                  fuelType={car.fuelType ?? ""}
                  bodyType={car.bodyType ?? ""}
                  rating={car.rating}
                  slug={car.slug}
                  year={car.year}
                  imageUrl={resolveCarHeroImage(car)}
                  badge={
                    <span className="text-[9px] font-black px-2 py-0.5 rounded-lg bg-blue-600 text-white">
                      I Own This
                    </span>
                  }
                  meta={
                    <span className="flex items-center gap-1">
                      <Check className="w-3 h-3 text-blue-500" />
                      Added {timeAgo(car.addedAt)}
                      {car.purchaseYear && ` · Bought ${car.purchaseYear}`}
                    </span>
                  }
                  actions={
                    <>
                      <Link href={car.slug ? `/cars/${car.slug}` : `/cars/${car.id}`} className="flex-1">
                        <ActionBtn onClick={() => {}} variant="ghost">
                          <Eye className="w-3 h-3" /> View
                        </ActionBtn>
                      </Link>
                      <ActionBtn
                        onClick={() => owned.remove(car.id)}
                        variant="danger"
                        title="Remove from garage"
                        compact
                      >
                        <XIcon className="w-3 h-3" />
                      </ActionBtn>
                    </>
                  }
                />
              ))
            )}
          </AnimatePresence>
        </div>
      </>
    );
  }

  // ── wishlist tab ───────────────────────────────────────────────────────────
  function WishlistSection() {
    return (
      <>
        <SectionHeader
          tab={TABS[1]}
          count={counts.wishlist}
          onClear={wishlist.clear}
        />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 min-w-0">
          <AnimatePresence>
            {wishlist.items.length === 0 ? (
              <EmptyState tab={TABS[1]} />
            ) : (
              wishlist.items.map((car: CarType) => {
                const imgUrl = resolveCarHeroImage(car) || null;
                return (
                  <GarageCard
                    key={car.id}
                    id={car.id}
                    name={car.name ?? "Unknown car"}
                    brand={car.brand ?? "—"}
                    priceMin={car.priceMin ?? 0}
                    priceMax={car.priceMax ?? 0}
                    fuelType={car.fuelType ?? ""}
                    bodyType={car.bodyType ?? ""}
                    rating={car.rating}
                    imageUrl={imgUrl}
                    slug={car.slug}
                    year={car.year}
                    badge={
                      <span className="text-[9px] font-black px-2 py-0.5 rounded-lg bg-rose-500 text-white flex items-center gap-1">
                        <Heart className="w-2.5 h-2.5 fill-white" /> Saved
                      </span>
                    }
                    actions={
                      <>
                        <Link href={car.slug ? `/cars/${car.slug}` : `/cars/${car.id}`} className="flex-1">
                          <ActionBtn onClick={() => {}} variant="ghost">
                            <Eye className="w-3 h-3" /> View
                          </ActionBtn>
                        </Link>
                        <ActionBtn
                          onClick={() => {
                            carStore.addToCompare(car);
                          }}
                          variant="ghost"
                          title="Add to compare"
                          compact
                        >
                          <GitCompare className="w-3 h-3" />
                        </ActionBtn>
                        <ActionBtn
                          onClick={() => wishlist.remove(car.id)}
                          variant="danger"
                          title="Remove from wishlist"
                          compact
                        >
                          <XIcon className="w-3 h-3" />
                        </ActionBtn>
                      </>
                    }
                  />
                );
              })
            )}
          </AnimatePresence>
        </div>
      </>
    );
  }

  // ── compare list tab ───────────────────────────────────────────────────────
  function CompareSection() {
    return (
      <>
        <SectionHeader
          tab={TABS[2]}
          count={counts.compare}
          onClear={carStore.clearCompare}
        />
        {/* Compare CTA */}
        {carStore.compareList.length >= 2 && (
          <Link
            href={`/compare?cars=${carStore.compareList.map((c) => c.id).join(",")}`}
            className="flex items-center justify-center gap-2 w-full mb-5 py-3 px-4 rounded-2xl bg-gradient-to-r from-violet-600 to-purple-600 text-white text-sm sm:text-base font-black shadow-lg shadow-violet-100 hover:shadow-xl transition-all text-center"
          >
            <GitCompare className="w-5 h-5 shrink-0" />
            <span className="min-w-0">Compare {carStore.compareList.length} Cars Now</span>
            <ChevronRight className="w-4 h-4 shrink-0" />
          </Link>
        )}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4 min-w-0">
          <AnimatePresence>
            {carStore.compareList.length === 0 ? (
              <EmptyState tab={TABS[2]} />
            ) : (
              carStore.compareList.map((car: CarType) => {
                const imgUrl = resolveCarHeroImage(car) || null;
                return (
                  <GarageCard
                    key={car.id}
                    id={car.id}
                    name={car.name ?? "Unknown car"}
                    brand={car.brand ?? "—"}
                    priceMin={car.priceMin ?? 0}
                    priceMax={car.priceMax ?? 0}
                    fuelType={car.fuelType ?? ""}
                    bodyType={car.bodyType ?? ""}
                    rating={car.rating}
                    imageUrl={imgUrl}
                    slug={car.slug}
                    year={car.year}
                    badge={
                      <span className="text-[9px] font-black px-2 py-0.5 rounded-lg bg-violet-600 text-white">
                        In Compare
                      </span>
                    }
                    actions={
                      <>
                        <Link href={car.slug ? `/cars/${car.slug}` : `/cars/${car.id}`} className="flex-1">
                          <ActionBtn onClick={() => {}} variant="ghost">
                            <Eye className="w-3 h-3" /> View
                          </ActionBtn>
                        </Link>
                        <ActionBtn
                          onClick={() => carStore.removeFromCompare(car.id)}
                          variant="danger"
                          title="Remove from compare"
                          compact
                        >
                          <XIcon className="w-3 h-3" />
                        </ActionBtn>
                      </>
                    }
                  />
                );
              })
            )}
          </AnimatePresence>
        </div>
        {carStore.compareList.length > 0 && carStore.compareList.length < 2 && (
          <p className="text-center text-xs text-gray-400 mt-4 flex items-center justify-center gap-1">
            <AlertCircle className="w-3.5 h-3.5" />
            Add {2 - carStore.compareList.length} more car{2 - carStore.compareList.length > 1 ? "s" : ""} to start comparing
          </p>
        )}
      </>
    );
  }

  // ── recently viewed tab ────────────────────────────────────────────────────
  function RecentSection() {
    return (
      <>
        <SectionHeader
          tab={TABS[3]}
          count={counts.recent}
          onClear={recent.clear}
        />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 min-w-0">
          <AnimatePresence>
            {recent.items.length === 0 ? (
              <EmptyState tab={TABS[3]} />
            ) : (
              recent.items.map((car: CarType) => {
                const imgUrl = resolveCarHeroImage(car) || null;
                return (
                  <GarageCard
                    key={car.id}
                    id={car.id}
                    name={car.name ?? "Unknown car"}
                    brand={car.brand ?? "—"}
                    priceMin={car.priceMin ?? 0}
                    priceMax={car.priceMax ?? 0}
                    fuelType={car.fuelType ?? ""}
                    bodyType={car.bodyType ?? ""}
                    rating={car.rating}
                    imageUrl={imgUrl}
                    slug={car.slug}
                    year={car.year}
                    actions={
                      <>
                        <Link href={car.slug ? `/cars/${car.slug}` : `/cars/${car.id}`} className="flex-1">
                          <ActionBtn onClick={() => {}} variant="primary">
                            <Eye className="w-3 h-3" /> View
                          </ActionBtn>
                        </Link>
                        <ActionBtn
                          onClick={() => wishlist.toggle(car)}
                          variant="ghost"
                          title={wishlist.has(car.id) ? "Remove from wishlist" : "Add to wishlist"}
                          compact
                        >
                          <Heart className={cn("w-3 h-3", wishlist.has(car.id) && "fill-rose-500 text-rose-500")} />
                        </ActionBtn>
                      </>
                    }
                  />
                );
              })
            )}
          </AnimatePresence>
        </div>
      </>
    );
  }

  // ── render ─────────────────────────────────────────────────────────────────
  return (
    <div className="min-h-screen bg-[#f5f7fb] pb-20">

      {/* ── Hero ── */}
      <div className="bg-gradient-to-br from-gray-900 via-gray-800 to-blue-900 text-white">
        <div className="max-w-[1280px] mx-auto px-4 py-8 sm:py-12">
          <p className="text-[10px] uppercase tracking-[0.3em] text-blue-300 font-black mb-2">
            Your Collection
          </p>
          <h1 className="text-2xl sm:text-4xl font-black mb-2">My Garage</h1>
          <p className="text-gray-300 text-sm mb-6 sm:mb-8 min-w-0">
            {totalSaved > 0
              ? `${totalSaved} car${totalSaved > 1 ? "s" : ""} saved · ${counts.recent} recently viewed`
              : "All your cars in one place"}
          </p>

          {/* Summary tiles */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 min-w-0">
            {TABS.map((tab) => {
              const Icon = tab.icon;
              const n    = counts[tab.key];
              return (
                <button
                  key={tab.key}
                  onClick={() => setActiveTab(tab.key)}
                  className={cn(
                    "rounded-2xl p-3 sm:p-4 text-left transition-all border min-w-0",
                    activeTab === tab.key
                      ? "bg-white/15 border-white/30"
                      : "bg-white/5 border-white/10 hover:bg-white/10"
                  )}
                >
                  <div className="flex items-center justify-between mb-2">
                    <Icon className={cn("w-4.5 h-4.5", tab.accent.replace("text-", "text-"))} />
                    {activeTab === tab.key && (
                      <div className="w-1.5 h-1.5 rounded-full bg-blue-400" />
                    )}
                  </div>
                  <p className="text-xl sm:text-2xl font-black">{n}</p>
                  <p className="text-[10px] sm:text-xs text-gray-300 mt-0.5 truncate">{tab.label}</p>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <div className="max-w-[1280px] mx-auto px-4 pt-6">

        {/* ── Tab bar ── */}
        <div className="flex gap-2 mb-8 overflow-x-auto pb-1 scrollbar-hide">
          {TABS.map((tab) => {
            const Icon  = tab.icon;
            const n     = counts[tab.key];
            const isAct = activeTab === tab.key;
            return (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={cn(
                  "flex items-center gap-2 px-4 py-2.5 rounded-2xl text-sm font-bold whitespace-nowrap transition-all shrink-0",
                  isAct
                    ? `${tab.bg} text-white shadow-lg`
                    : "bg-white border border-gray-100 text-gray-600 hover:border-gray-300"
                )}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
                <span className={cn(
                  "text-[10px] font-black px-1.5 py-0.5 rounded-full",
                  isAct ? "bg-white/20 text-white" : "bg-gray-100 text-gray-500"
                )}>
                  {n}
                </span>
              </button>
            );
          })}
        </div>

        {/* ── Content ── */}
        <div className="rounded-[32px] bg-white border border-gray-200/60 p-4 sm:p-6 md:p-8 shadow-[0_10px_40px_rgba(0,0,0,0.04)] min-w-0">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={{ duration: 0.18 }}
            >
              {activeTab === "owned"    && <OwnedSection />}
              {activeTab === "wishlist" && <WishlistSection />}
              {activeTab === "compare"  && <CompareSection />}
              {activeTab === "recent"   && <RecentSection />}
            </motion.div>
          </AnimatePresence>
        </div>

        {/* ── Quick links ── */}
        <div className="mt-6 grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 gap-3 min-w-0">
          {[
            { label: "Find your next car",  href: "/wizard",   icon: Sparkles,        bg: "from-blue-600 to-indigo-600" },
            { label: "Compare cars",         href: "/compare",  icon: SlidersHorizontal, bg: "from-violet-600 to-purple-600" },
            { label: "Browse all cars",      href: "/cars",     icon: Car,             bg: "from-gray-700 to-gray-900" },
          ].map(({ label, href, icon: Icon, bg }) => (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-3 px-4 sm:px-5 py-4 rounded-2xl bg-gradient-to-r text-white font-bold text-sm hover:scale-[1.02] hover:shadow-lg transition-all min-w-0",
                bg
              )}
            >
              <Icon className="w-5 h-5 shrink-0" />
              <span className="truncate min-w-0 flex-1">{label}</span>
              <ChevronRight className="w-4 h-4 shrink-0" />
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}