import { Button, Input, Reveal } from "@cooud-ui/ui";
import { Clock, Wrench } from "lucide-react";

export function MaintenanceBlock() {
  return (
    <div className="flex min-h-[28rem] flex-col items-center justify-center px-6 py-16 text-center">
      <Reveal className="flex w-full max-w-md flex-col items-center gap-5">
        <span className="inline-flex size-14 items-center justify-center rounded-2xl bg-surface-overlay text-fg-secondary">
          <Wrench className="size-7" aria-hidden="true" />
        </span>
        <div className="flex flex-col gap-2">
          <h1 className="font-display text-2xl font-semibold text-fg">We&apos;ll be right back</h1>
          <p className="text-sm text-fg-secondary">
            We&apos;re performing scheduled maintenance to improve your experience.
          </p>
        </div>
        <span className="inline-flex items-center gap-1.5 text-sm text-fg-tertiary">
          <Clock className="size-4" aria-hidden="true" />
          Estimated downtime: ~30 minutes
        </span>
        <div className="flex w-full max-w-sm flex-wrap items-center justify-center gap-3">
          <Input
            className="min-w-0 flex-1"
            type="email"
            placeholder="you@company.com"
            autoComplete="email"
          />
          <Button variant="gradient">Notify me</Button>
        </div>
      </Reveal>
    </div>
  );
}