"use client";

import Image from "next/image";
import Link from "next/link";
import { TEXT } from "@/branding";
import { IMAGES } from "@/branding/images";
import { SignupForm } from "./SignupForm";
import { AuthTabs } from "./LoginPage";

export function SignupPage() {
  return (
    <div
      className="rounded-2xl p-8"
      style={{
        background: "var(--auth-card-bg)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        border: "1px solid var(--border)",
        boxShadow: "var(--auth-card-shadow)",
      }}
    >
      {/* Logo — mobile only */}
      <div className="flex items-center gap-2.5 mb-6 lg:hidden">
        <Image
          src={IMAGES.appIcon}
          alt={TEXT.app.name}
          width={36}
          height={36}
          className="rounded-xl shrink-0"
          priority
        />
        <span className="font-bold text-lg" style={{ color: "var(--text-primary)" }}>{TEXT.app.name}</span>
      </div>

      <h1 className="text-2xl font-black tracking-tight mb-1" style={{ color: "var(--text-primary)" }}>
        {TEXT.auth.createAccount}
      </h1>
      <p className="text-sm mb-7" style={{ color: "var(--text-muted)" }}>
        {TEXT.auth.signupSubtext}
      </p>

      <AuthTabs active="signup" />

      <SignupForm />

      <p className="text-xs text-center mt-6" style={{ color: "var(--text-muted)" }}>
        {TEXT.auth.hasAccount}{" "}
        <Link
          href="/auth/login"
          className="font-semibold transition-opacity hover:opacity-80"
          style={{ color: "var(--accent)" }}
        >
          {TEXT.auth.loginLink}
        </Link>
      </p>
    </div>
  );
}