import { BrandLogo } from '@/components/shared/BrandLogo'
import { BRAND_NAME } from '@/lib/brand'

function SkeletonLine({ className = '' }: { className?: string }) {
  return <div className={`animate-pulse bg-line ${className}`} />
}

export default function Loading() {
  return (
    <section className="min-h-[calc(100vh-70px)] bg-white px-5 py-8 md:px-8 md:py-12">
      <div className="mx-auto w-full max-w-[1120px]">
        <div className="flex items-center justify-between border-b border-line pb-5">
          <div className="flex items-center gap-3">
            <BrandLogo className="h-10 w-10 rounded-full" />
            <div>
              <div className="text-sm font-bold text-ink">{BRAND_NAME}</div>
              <SkeletonLine className="mt-2 h-2.5 w-24" />
            </div>
          </div>
          <div className="hidden items-center gap-2 md:flex">
            <SkeletonLine className="h-8 w-20" />
            <SkeletonLine className="h-8 w-20" />
            <SkeletonLine className="h-8 w-20" />
          </div>
        </div>

        <div className="grid gap-6 py-8 lg:grid-cols-[1.05fr_0.95fr] lg:py-10">
          <div className="space-y-5">
            <SkeletonLine className="h-8 w-3/5 max-w-[360px]" />
            <div className="space-y-3">
              <SkeletonLine className="h-3 w-full max-w-[620px]" />
              <SkeletonLine className="h-3 w-5/6 max-w-[540px]" />
              <SkeletonLine className="h-3 w-2/3 max-w-[430px]" />
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              <SkeletonLine className="h-24 w-full" />
              <SkeletonLine className="h-24 w-full" />
            </div>
          </div>

          <div className="border border-line bg-bg p-4">
            <SkeletonLine className="h-5 w-32" />
            <div className="mt-5 space-y-3">
              <SkeletonLine className="h-12 w-full" />
              <SkeletonLine className="h-12 w-full" />
              <SkeletonLine className="h-12 w-full" />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
