With plan summary

"use client";

import {
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  Input,
  Label,
  Separator,
} from "@cronus-ui/ui";
import { signUpEmail } from "../lib/auth-adapter.js";
import { USER } from "../lib/demo-saas.js";
import { Check } from "lucide-react";
import { type FormEvent, useState } from "react";

const growthPlanFeatures = [
  "Unlimited products and checkouts",
  "0% platform fee on every sale",
  "Custom domain and branding",
  "Priority support with 4h response",
];

export function SignupWithPlanBlock() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const name = String(form.get("name") ?? "");
    const email = String(form.get("email") ?? "");
    const password = String(form.get("password") ?? "");
    setError(null);
    setPending(true);
    try {
      await signUpEmail({ email, password, name });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong.");
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="flex w-full items-center justify-center py-4">
      <div className="grid w-full max-w-4xl gap-6 lg:grid-cols-[1.1fr_1fr]">
        {/* Account form */}
        <Card className="gap-6 shadow-lg">
          <CardHeader>
            <CardTitle className="font-display text-xl">Create your account</CardTitle>
            <CardDescription>You&apos;re one step away from the Growth plan.</CardDescription>
          </CardHeader>

          <CardContent className="flex flex-col gap-4">
            <form onSubmit={onSubmit} className="flex flex-col gap-4" aria-busy={pending}>
              <div className="flex flex-col gap-2">
                <Label htmlFor="signup-plan-name">Full name</Label>
                <Input
                  id="signup-plan-name"
                  name="name"
                  placeholder={USER.name}
                  autoComplete="name"
                />
              </div>

              <div className="flex flex-col gap-2">
                <Label htmlFor="signup-plan-email">Work email</Label>
                <Input
                  id="signup-plan-email"
                  name="email"
                  type="email"
                  placeholder="you@company.com"
                  autoComplete="email"
                />
              </div>

              <div className="flex flex-col gap-2">
                <Label htmlFor="signup-plan-password">Password</Label>
                <Input
                  id="signup-plan-password"
                  name="password"
                  type="password"
                  placeholder="••••••••"
                  autoComplete="new-password"
                />
                <p className="text-xs text-fg-tertiary">Must be at least 8 characters.</p>
              </div>

              <Label
                htmlFor="signup-plan-terms"
                className="flex items-start gap-2 font-normal text-fg-secondary"
              >
                <Checkbox id="signup-plan-terms" defaultChecked />I agree to the Terms of Service.
              </Label>

              {error ? (
                <p role="alert" className="text-sm text-error-strong">
                  {error}
                </p>
              ) : null}

              <Button
                type="submit"
                variant="primary"
                size="lg"
                className="w-full"
                disabled={pending}
                aria-busy={pending}
              >
                {pending ? "Creating account…" : "Start free trial"}
              </Button>
            </form>
          </CardContent>

          <CardFooter className="justify-center">
            <p className="text-sm text-fg-secondary">
              Already have an account?{" "}
              <a
                href="/login"
                className="font-medium text-primary-strong underline-offset-4 hover:underline"
              >
                Sign in
              </a>
            </p>
          </CardFooter>
        </Card>

        {/* Selected plan */}
        <Card className="h-fit gap-0 pb-0 shadow-md">
          <CardHeader>
            <CardTitle className="font-display text-lg">Your plan</CardTitle>
            <CardDescription>Switch or cancel anytime.</CardDescription>
            <CardAction>
              <Badge variant="success">14-day free trial</Badge>
            </CardAction>
          </CardHeader>

          <CardContent className="flex flex-col gap-4 pt-4">
            <div className="flex items-baseline justify-between gap-4">
              <div className="flex flex-col">
                <span className="font-medium text-fg">Growth</span>
                <span className="text-sm text-fg-tertiary">For creators scaling past $10k/mo</span>
              </div>
              <div className="flex items-baseline gap-1">
                <span className="font-display text-3xl font-semibold text-fg">$29</span>
                <span className="text-sm text-fg-tertiary">/mo</span>
              </div>
            </div>

            <ul className="flex flex-col gap-2.5">
              {growthPlanFeatures.map((feature) => (
                <li key={feature} className="flex items-center gap-2 text-sm text-fg-secondary">
                  <Check className="size-4 text-success" aria-hidden="true" />
                  {feature}
                </li>
              ))}
            </ul>
          </CardContent>

          <Separator className="my-4" />

          <CardContent className="flex flex-col gap-2">
            <div className="flex items-center justify-between text-sm text-fg-secondary">
              <span>Due today</span>
              <span className="font-medium text-fg">$0.00</span>
            </div>
            <div className="flex items-center justify-between text-sm text-fg-secondary">
              <span>From Jul 27, 2026</span>
              <span className="text-fg">$29.00 / mo</span>
            </div>
          </CardContent>

          <Separator className="my-4" />

          <CardFooter className="flex-col items-stretch gap-2 pb-6">
            <p className="text-xs text-fg-tertiary">
              Cancel anytime during your trial and you won&apos;t be charged.
            </p>
            <a
              href="#plans"
              className="text-sm font-medium text-primary-strong underline-offset-4 hover:underline"
            >
              Change plan
            </a>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}