'use client';

/**
 * Loading state: the UEF mark held still inside a slowly turning halo.
 *
 * The brief for this one was restraint. A chamber of commerce in its forty-
 * seventh year should not greet you with something busy — the earlier version
 * threw magenta rings across most of the screen, which reads as an app splash
 * rather than an institution. This keeps the whole thing inside a small disc:
 * a faint static track, one gradient arc sweeping around it, and the logo
 * unmoving at the centre.
 *
 * The arc is a conic gradient masked to a ring, so it fades from nothing to
 * full magenta around its own sweep, like a comet tail. That reads as motion
 * without anything jumping, and it costs one rotating element.
 */
const LOGO = '/assets/IMG_1765_1782804058788.jpeg';

export function UefLoader({ size = 92 }: { size?: number }) {
  // The halo sits a fixed margin outside the mark, so both scale together.
  const ring = Math.round(size * 1.72);

  return (
    <div className="flex flex-col items-center gap-8" role="status" aria-live="polite">
      <div
        className="relative grid place-items-center"
        style={{ width: ring, height: ring }}
      >
        {/* Static track: without it the sweeping arc looks like it is travelling
            through empty space, and the circle never resolves. */}
        <span
          aria-hidden="true"
          className="absolute inset-0 rounded-full border border-primary/12"
        />

        {/* The sweeping arc. */}
        <span aria-hidden="true" className="uef-halo absolute inset-0 rounded-full" />

        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={LOGO}
          alt=""
          aria-hidden="true"
          className="uef-mark relative select-none"
          style={{ width: size, height: 'auto' }}
        />
      </div>

      <div className="flex flex-col items-center gap-2.5">
        <span className="font-serif text-lg tracking-wide text-foreground/80">
          United Economic Forum
        </span>
        {/* A hairline that fills and empties — a second, quieter read on
            progress for anyone waiting longer than a moment. */}
        <span
          aria-hidden="true"
          className="uef-underline block h-px w-28 origin-left bg-primary/70"
        />
      </div>
    </div>
  );
}