"use client";

import Link from "next/link";
import { useTranslation } from "@/app/hooks/useTranslation";
import RegistrationForm from "@/app/components/forms/RegistrationForm";

export default function RegistrationPageClient() {
  const { registration, lang } = useTranslation();
  const backLabel = lang === "vi" ? "Quay Về Trang Chủ" : "Back to Home";
  const ticket = registration.ticket as {
    label: string;
    price: string;
    currency: string;
    note: string;
    perks: string[];
  };

  return (
    <main className="pt-[120px] pb-[80px] px-[var(--spacing-gutter)] flex justify-center">
      <div className="w-full max-w-[1280px]">
        <div className="max-w-[800px] mx-auto">
          <div className="mb-[32px]">
            <Link
              className="group flex items-center gap-2 text-outline hover:text-primary transition-colors"
              href="/"
            >
              <span className="material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1">
                arrow_back
              </span>
              {backLabel}
            </Link>
          </div>

          <div className="mb-[32px]">
            <h1 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3vw+1rem,3.25rem)] text-on-surface mb-2 leading-[1.1]">
              {registration.title}
            </h1>
            <p className="text-on-surface-variant text-lg">{registration.subtitle}</p>
          </div>

          {/* Pricing Card */}
          <div className="mb-[32px] glass-panel rounded-xl p-6 md:p-8 relative overflow-hidden border border-primary/30">
            <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent" />
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-xl gold-gradient-bg flex items-center justify-center shrink-0">
                  <span className="material-symbols-outlined text-on-primary text-[22px]">confirmation_number</span>
                </div>
                <div>
                  <p className="text-outline text-xs uppercase tracking-widest mb-1">{ticket.label}</p>
                  <div className="flex items-baseline gap-2">
                    <span className="font-[var(--font-display-lg)] text-[2.5rem] leading-none text-primary">
                      {ticket.price}
                    </span>
                    <span className="text-on-surface-variant text-base font-medium">{ticket.currency}</span>
                  </div>
                  <p className="text-outline text-xs mt-1 flex items-center gap-1">
                    <span className="material-symbols-outlined text-[14px]">payments</span>
                    {ticket.note}
                  </p>
                </div>
              </div>
              <ul className="space-y-2 sm:text-right">
                {ticket.perks.map((perk, i) => (
                  <li key={i} className="flex sm:flex-row-reverse items-center gap-2 text-on-surface-variant text-sm">
                    <span className="material-symbols-outlined text-primary text-[16px]">check_circle</span>
                    {perk}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="glass-panel p-[32px] md:p-12 rounded-xl shadow-2xl relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
            <RegistrationForm data={registration} />
          </div>
        </div>
      </div>
    </main>
  );
}