Function VotingLayout

src/components/VotingLayout.tsx:28–189

({
  positions,
  electionName,
  isOnline,
  userEmail,
  isSubmitting,
  onSubmit,
  abstainedPositions,
  onAbstain,
}: VotingLayoutProps)

 * Features ambient background orbs, deep glassmorphism via .glass-panel,
 * and high-fidelity hover states.
 */
export function VotingLayout({
  positions,
  electionName,
  isOnline,
  userEmail,
  isSubmitting,
  onSubmit,
  abstainedPositions,
  onAbstain,
}: VotingLayoutProps) {
  const time = useSystemClock();
  const activeIndex = useBallotStore((s) => s.activePositionIndex);
  const setActiveIndex = useBallotStore((s) => s.setActivePositionIndex);
  const getSelectionCount = useBallotStore((s) => s.getSelectionCount);

  const handlePositionClick = (index: number) => {
    sounds.playClick();
    setActiveIndex(index);
  };

  return (
    <div className="relative flex h-screen w-screen overflow-hidden bg-zinc-50 dark:bg-zinc-950 font-sans selection:bg-maroon-500/30">
      {/* ─── Premium Grid Background ─── */}
      <div className="pointer-events-none absolute inset-0 z-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />

      {/* ─── Ambient Background Orbs ─── */}
      <div className="pointer-events-none absolute -left-[10%] -top-[10%] h-[40vw] w-[40vw] rounded-full bg-maroon-400/10 blur-[120px] dark:bg-maroon-600/20 mix-blend-multiply dark:mix-blend-screen" />
      <div className="pointer-events-none absolute -bottom-[10%] -right-[5%] h-[50vw] w-[50vw] rounded-full bg-gold-400/10 blur-[150px] dark:bg-maroon-900/30 mix-blend-multiply dark:mix-blend-screen" />

      {/* ─── App Container ─── */}
      <div className="z-10 flex h-full w-full flex-col overflow-hidden">
        {/* ─── Native App Title Bar (Glass) ─── */}
        <header className="relative z-30 flex h-12 shrink-0 items-center justify-between glass-panel rounded-none border-t-0 border-x-0 border-b-white/50 px-5 text-sm dark:border-b-white/5 [-webkit-app-region:drag]">
          {/* Left: Branding + Clock */}
          <div className="flex items-center gap-4 [-webkit-app-region:no-drag]">
            <span className="font-extrabold tracking-widest text-zinc-900 dark:text-zinc-50">
              VOTE 2026
            </span>
            <div className="h-4 w-px bg-zinc-300 dark:bg-zinc-700"></div>
            <span className="font-mono tabular-nums text-zinc-500 dark:text-zinc-400 font-medium">
              {time}
            </span>
          </div>

          {/* Center: Election Name */}
          <div className="pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-2.5">
            <div className="h-2 w-2 rounded-full bg-green-500 shadow-[0_0_12px_rgba(34,197,94,0.6)] animate-pulse-dot" />
            <span className="font-semibold tracking-tight text-zinc-800 dark:text-zinc-200">
              {electionName}
            </span>
          </div>

          {/* Right: Controls & macOS Windows */}
          <div className="flex items-center gap-3 [-webkit-app-region:no-drag]">
            {userEmail && (
              <>
                <span className="font-mono text-zinc-500 dark:text-zinc-400 font-medium bg-zinc-100 dark:bg-zinc-800/50 px-2 py-0.5 rounded-md">