import Skeleton from '../Skeleton'

/** Estado de carga del micrositio: mismos bloques que la página real */
export function EsqueletoDesarrollo() {
  return (
    <div aria-busy="true" aria-live="polite" role="status">
      <span className="sr-only">Cargando información del desarrollo…</span>
      <div className="bg-[#0B1220]">
        <div className="mx-auto flex min-h-[420px] w-full max-w-6xl flex-col justify-end px-4 pb-16 sm:px-6 lg:px-8">
          <Skeleton className="h-6 w-28 bg-white/10" />
          <Skeleton className="mt-6 h-10 w-3/4 max-w-xl bg-white/10" />
          <Skeleton className="mt-4 h-4 w-1/2 max-w-sm bg-white/10" />
          <Skeleton className="mt-8 h-12 w-full max-w-md bg-white/10" />
        </div>
      </div>

      <div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="-mt-10 grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-[#E5E7EB] bg-[#E5E7EB] sm:-mt-12 lg:grid-cols-4 dark:border-[#1E293B] dark:bg-[#1E293B]">
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="bg-white p-5 sm:p-6 dark:bg-[#0F172A]">
              <Skeleton className="h-3 w-24" />
              <Skeleton className="mt-3 h-7 w-16" />
            </div>
          ))}
        </div>

        <div className="grid gap-10 py-16 lg:grid-cols-2">
          <div className="space-y-4">
            <Skeleton className="h-8 w-52" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-11/12" />
            <Skeleton className="h-4 w-4/5" />
          </div>
          <Skeleton className="h-48 w-full rounded-2xl" />
        </div>

        <div className="grid gap-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
          {[0, 1, 2].map((i) => (
            <Skeleton key={i} className="h-56 w-full rounded-2xl" />
          ))}
        </div>
      </div>
    </div>
  )
}