Welcome

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cooud-ui/ui";
import { ArrowRight, Database, FolderPlus, Rocket, Users } from "lucide-react";

export function WelcomeBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-xl gap-6 shadow-lg">
        <CardHeader className="flex flex-col items-center gap-3 text-center">
          <span className="inline-flex size-11 items-center justify-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
            <Rocket className="size-5" aria-hidden="true" />
          </span>
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-2xl">Welcome to Cooud, Mara</CardTitle>
            <p className="text-sm text-fg-secondary">
              Let&apos;s get your workspace ready — here&apos;s where to start.
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-3">
          <a
            href="#create-project"
            className="group flex items-center gap-4 rounded-xl border border-border p-4 transition-colors hover:border-border-strong hover:bg-surface-overlay/40"
          >
            <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
              <FolderPlus className="size-5" aria-hidden="true" />
            </span>
            <div className="flex flex-1 flex-col gap-0.5">
              <p className="text-sm font-medium text-fg">Create your first project</p>
              <p className="text-sm text-fg-secondary">
                Spin up a workspace project to organize your work.
              </p>
            </div>
            <ArrowRight
              className="size-4 shrink-0 text-fg-tertiary transition-transform group-hover:translate-x-0.5"
              aria-hidden="true"
            />
          </a>

          <a
            href="#invite-team"
            className="group flex items-center gap-4 rounded-xl border border-border p-4 transition-colors hover:border-border-strong hover:bg-surface-overlay/40"
          >
            <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
              <Users className="size-5" aria-hidden="true" />
            </span>
            <div className="flex flex-1 flex-col gap-0.5">
              <p className="text-sm font-medium text-fg">Invite your team</p>
              <p className="text-sm text-fg-secondary">
                Bring teammates in to collaborate in real time.
              </p>
            </div>
            <ArrowRight
              className="size-4 shrink-0 text-fg-tertiary transition-transform group-hover:translate-x-0.5"
              aria-hidden="true"
            />
          </a>

          <a
            href="#connect-data"
            className="group flex items-center gap-4 rounded-xl border border-border p-4 transition-colors hover:border-border-strong hover:bg-surface-overlay/40"
          >
            <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
              <Database className="size-5" aria-hidden="true" />
            </span>
            <div className="flex flex-1 flex-col gap-0.5">
              <p className="text-sm font-medium text-fg">Connect your data</p>
              <p className="text-sm text-fg-secondary">
                Sync a source so your dashboards come to life.
              </p>
            </div>
            <ArrowRight
              className="size-4 shrink-0 text-fg-tertiary transition-transform group-hover:translate-x-0.5"
              aria-hidden="true"
            />
          </a>
        </CardContent>

        <CardFooter className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <Button variant="ghost">Skip for now</Button>
          <Button variant="gradient">Go to dashboard</Button>
        </CardFooter>
      </Card>
    </div>
  );
}