import { Button, Card } from "@cooud-ui/ui";

export function EmailWelcomeBlock() {
  return (
    <div className="flex justify-center bg-surface-inset/40 p-6">
      <Card className="w-full max-w-xl gap-0 overflow-hidden p-0 shadow-lg">
        <div className="flex justify-center border-b border-border/60 px-8 py-6">
          <span className="inline-flex items-center gap-2">
            <span className="inline-flex size-7 items-center justify-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
              <span className="size-3 rounded-sm bg-primary-foreground/90" aria-hidden="true" />
            </span>
            <span className="font-display text-lg font-semibold tracking-tight">Cooud</span>
          </span>
        </div>

        <div className="flex flex-col gap-5 px-8 py-8">
          <h1 className="font-display text-2xl font-semibold tracking-tight">
            Welcome to Cooud 🎉
          </h1>
          <p className="text-sm leading-relaxed text-fg-secondary">
            Hi Mara, we&apos;re thrilled to have you on board. Your workspace is ready and there&apos;s
            nothing left to install — everything runs in the browser.
          </p>
          <p className="text-sm leading-relaxed text-fg-secondary">
            Jump in below to create your first project, invite teammates, and explore the building
            blocks that make shipping fast.
          </p>

          <div>
            <Button variant="gradient" size="lg">
              Get started
            </Button>
          </div>

          <ul className="flex flex-col gap-2 text-sm text-fg-secondary">
            <li>
              <a href="#docs" className="font-medium text-primary underline-offset-4 hover:underline">
                Read the quickstart guide
              </a>
            </li>
            <li>
              <a href="#invite" className="font-medium text-primary underline-offset-4 hover:underline">
                Invite your team
              </a>
            </li>
            <li>
              <a href="#templates" className="font-medium text-primary underline-offset-4 hover:underline">
                Browse starter templates
              </a>
            </li>
          </ul>
        </div>

        <div className="flex flex-col gap-1 border-t border-border/60 px-8 py-6 text-xs text-fg-tertiary">
          <p>
            You&apos;re receiving this because you signed up for Cooud.{" "}
            <a href="#unsubscribe" className="underline underline-offset-4 hover:text-fg-secondary">
              Unsubscribe
            </a>
          </p>
          <p>Cooud, Inc. · 2261 Market St, San Francisco</p>
        </div>
      </Card>
    </div>
  );
}