import { Skeleton } from '@/components/emcn'

export default function TermsLoading() {
  return (
    <main className='min-h-screen bg-[var(--landing-bg)] text-[var(--landing-text)]'>
      <div className='flex h-[52px] items-center border-[var(--landing-border)] border-b px-6'>
        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
        <div className='ml-auto flex items-center gap-3'>
          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
        </div>
      </div>
      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-20 sm:px-12'>
        <Skeleton className='mx-auto h-[48px] w-[320px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
        <div className='mt-12 space-y-8'>
          <div className='space-y-2.5'>
            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
          </div>
          <div className='mt-12 space-y-2.5'>
            <Skeleton className='h-[28px] w-[140px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
          </div>
          <div className='mt-12 space-y-2.5'>
            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
          </div>
          <div className='mt-12 space-y-2.5'>
            <Skeleton className='h-[28px] w-[380px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
          </div>
          <div className='mt-12 space-y-2.5'>
            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
          </div>
        </div>
      </div>
    </main>
  )
}
