Split with proof

"use client";

import {
  Avatar,
  AvatarFallback,
  Button,
  Checkbox,
  Input,
  Label,
  Rating,
} from "@cronus-ui/ui";
import { signUpEmail } from "../lib/auth-adapter.js";
import { USER } from "../lib/demo-saas.js";
import { type FormEvent, useState } from "react";

const proofBrands = ["Northwind", "Framelane", "Luma Labs", "Postbox"];

interface ProofQuote {
  id: string;
  quote: string;
  author: string;
  initials: string;
}

const proofQuotes: ProofQuote[] = [
  {
    id: "course-creator",
    quote: "Moved my course over on a Sunday. First sale landed before Monday standup.",
    author: "Jules Park · Course creator",
    initials: "JP",
  },
  {
    id: "newsletter-writer",
    quote: "Checkout, upsells, and payouts finally live in one dashboard.",
    author: "Marcus Bell · Newsletter writer",
    initials: "MB",
  },
];

export function SignupSplitProofBlock() {
  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 overflow-hidden rounded-2xl border border-border bg-surface-raised shadow-lg lg:grid-cols-[1.1fr_1fr]">
        {/* Create-account form */}
        <div className="flex flex-col justify-center gap-6 p-8 sm:p-10 lg:order-2">
          <div className="flex flex-col gap-1">
            <h2 className="font-display text-xl font-semibold text-fg">Create your account</h2>
            <p className="text-sm text-fg-secondary">Free for 14 days. No credit card needed.</p>
          </div>

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

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

            <div className="flex flex-col gap-2">
              <Label htmlFor="signup-proof-password">Password</Label>
              <Input
                id="signup-proof-password"
                name="password"
                type="password"
                placeholder="••••••••"
                autoComplete="new-password"
              />
            </div>

            <Label
              htmlFor="signup-proof-terms"
              className="flex items-start gap-2 font-normal text-fg-secondary"
            >
              <Checkbox id="signup-proof-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…" : "Create account"}
            </Button>
          </form>

          <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>
        </div>

        {/* Social proof */}
        <div className="flex flex-col justify-center gap-8 border-t border-border bg-surface-inset p-8 sm:p-10 lg:order-1 lg:border-t-0 lg:border-e">
          <div className="flex flex-col gap-2">
            <h2 className="font-display text-2xl font-semibold text-fg">
              Join 12,000+ creators selling with Cronus
            </h2>
            <p className="text-sm text-fg-secondary">
              Courses, communities, and digital products — one storefront.
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-x-6 gap-y-3">
            {proofBrands.map((brand) => (
              <span
                key={brand}
                className="flex items-center gap-1.5 text-sm font-semibold text-fg-tertiary"
              >
                <span className="size-2 rounded-full bg-primary" aria-hidden="true" />
                {brand}
              </span>
            ))}
          </div>

          <div className="flex items-center gap-2">
            <Rating value={4.9} readOnly size="sm" aria-label="Rated 4.9 out of 5" />
            <span className="text-sm font-medium text-fg">4.9/5</span>
            <span className="text-sm text-fg-tertiary">across 2,300+ reviews</span>
          </div>

          <div className="flex flex-col gap-4">
            {proofQuotes.map((item) => (
              <figure
                key={item.id}
                className="flex flex-col gap-2 rounded-xl border border-border bg-surface-raised p-4 shadow-xs"
              >
                <blockquote className="text-sm text-fg">“{item.quote}”</blockquote>
                <figcaption className="flex items-center gap-2">
                  <Avatar className="size-6">
                    <AvatarFallback className="text-xs">{item.initials}</AvatarFallback>
                  </Avatar>
                  <span className="text-xs text-fg-secondary">{item.author}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}