ipv6-sims/app/components/forms/RegistrationForm.tsx

"use client";

import { useMemo, useState } from "react";

type IndustryOption = { value: string; label: string };

export default function RegistrationForm({
  data,
}: {
  data: {
    sections: {
      personal: { title: string; fullName: string; phone: string; email: string };
      professional: { title: string; company: string; jobTitle: string };
      industry: { title: string; label: string; placeholder: string; options: IndustryOption[] };
      additional: { title: string; label: string; placeholder: string };
    };
    submit: { label: string; disclaimer: string };
  };
}) {
  const industries = useMemo(() => data.sections.industry.options, [data.sections.industry.options]);
  const [form, setForm] = useState({
    fullName: "",
    phone: "",
    email: "",
    company: "",
    jobTitle: "",
    industry: "",
    notes: "",
  });

  return (
    <form
      className="space-y-[32px]"
      onSubmit={(e) => {
        e.preventDefault();
        // frontend-only scope
        console.log("[registration]", form);
        alert("Saved locally (frontend-only).");
      }}
    >
      <div className="space-y-[16px]">
        <h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
          {data.sections.personal.title}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
          <div className="space-y-1">
            <label className="text-outline uppercase tracking-wider">{data.sections.personal.fullName}</label>
            <input
              className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
              placeholder="John Doe"
              value={form.fullName}
              onChange={(e) => setForm((s) => ({ ...s, fullName: e.target.value }))}
            />
          </div>
          <div className="space-y-1">
            <label className="text-outline uppercase tracking-wider">{data.sections.personal.phone}</label>
            <input
              className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
              placeholder="+84 ..."
              value={form.phone}
              onChange={(e) => setForm((s) => ({ ...s, phone: e.target.value }))}
            />
          </div>
          <div className="md:col-span-2 space-y-1">
            <label className="text-outline uppercase tracking-wider">{data.sections.personal.email}</label>
            <input
              className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
              placeholder="john.doe@company.com"
              type="email"
              value={form.email}
              onChange={(e) => setForm((s) => ({ ...s, email: e.target.value }))}
            />
          </div>
        </div>
      </div>

      <hr className="border-white/5" />

      <div className="space-y-[16px]">
        <h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
          {data.sections.professional.title}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
          <div className="space-y-1">
            <label className="text-outline uppercase tracking-wider">{data.sections.professional.company}</label>
            <input
              className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
              placeholder="Company"
              value={form.company}
              onChange={(e) => setForm((s) => ({ ...s, company: e.target.value }))}
            />
          </div>
          <div className="space-y-1">
            <label className="text-outline uppercase tracking-wider">{data.sections.professional.jobTitle}</label>
            <input
              className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all"
              placeholder="Network Architect"
              value={form.jobTitle}
              onChange={(e) => setForm((s) => ({ ...s, jobTitle: e.target.value }))}
            />
          </div>
        </div>
      </div>

      <hr className="border-white/5" />

      <div className="space-y-[16px]">
        <h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
          {data.sections.industry.title}
        </h2>
        <div className="space-y-1">
          <label className="text-outline uppercase tracking-wider">{data.sections.industry.label}</label>
          <div className="relative">
            <select
              className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface appearance-none transition-all"
              value={form.industry}
              onChange={(e) => setForm((s) => ({ ...s, industry: e.target.value }))}
            >
              <option value="" disabled>
                {data.sections.industry.placeholder}
              </option>
              {industries.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
            <span className="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-outline pointer-events-none">
              expand_more
            </span>
          </div>
        </div>
      </div>

      <hr className="border-white/5" />

      <div className="space-y-[16px]">
        <h2 className="font-[var(--font-display-lg)] text-[20px] text-primary border-l-2 border-primary pl-3">
          {data.sections.additional.title}
        </h2>
        <div className="space-y-1">
          <label className="text-outline uppercase tracking-wider">{data.sections.additional.label}</label>
          <textarea
            className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all resize-none"
            placeholder={data.sections.additional.placeholder}
            rows={4}
            value={form.notes}
            onChange={(e) => setForm((s) => ({ ...s, notes: e.target.value }))}
          />
        </div>
      </div>

      <div className="pt-[16px]">
        <button
          className="w-full gold-gradient-bg py-5 rounded-lg text-on-primary font-[var(--font-display-lg)] text-[18px] font-bold shadow-[0_10px_30px_rgba(197,160,89,0.15)] hover:shadow-[0_15px_40px_rgba(197,160,89,0.25)] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all"
          type="submit"
        >
          {data.submit.label}
        </button>
        <p className="mt-[16px] text-center text-outline text-[11px] tracking-widest opacity-60 uppercase">
          {data.submit.disclaimer}
        </p>
      </div>
    </form>
  );
}