"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button } from "../components/ui/button";
export function LicenseActivationForm({ email, onSubmit, onBack, error, }) {
    const [name, setName] = useState("");
    const [companyName, setCompanyName] = useState("");
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [validationError, setValidationError] = useState();
    const handleSubmit = async (e) => {
        e.preventDefault();
        setValidationError(undefined);
        // Basic validation
        if (!name.trim() || !companyName.trim()) {
            setValidationError("All fields are required");
            return;
        }
        setIsSubmitting(true);
        try {
            await onSubmit(email.trim(), name.trim(), companyName.trim());
        }
        finally {
            setIsSubmitting(false);
        }
    };
    return (_jsxs("div", { className: "w-full max-w-md", children: [_jsx("h2", { className: "text-neutral-grey-100 text-center text-3xl font-bold tracking-tight", children: "Start Your Trial" }), _jsx("p", { className: "text-neutral-grey-50 mt-3 text-center leading-relaxed", children: "Enter your details to start a free trial." }), _jsxs("p", { className: "text-neutral-grey-50 mt-1 text-center text-sm", children: ["Email:", " ", _jsx("span", { className: "text-neutral-grey-100 font-medium", children: email })] }), _jsxs("form", { onSubmit: handleSubmit, className: "mt-6 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "name", className: "text-neutral-grey-50 block text-sm font-medium", children: "Your Name" }), _jsx("input", { type: "text", id: "name", value: name, onChange: (e) => setName(e.target.value), className: "border-border-default text-neutral-grey-100 focus:ring-feedback-blue/30 mt-1 block h-11 w-full rounded-xl border bg-white px-4 py-3 placeholder-gray-400 focus:ring-2 focus:outline-none", placeholder: "John Smith", required: true, disabled: isSubmitting, autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "company", className: "text-neutral-grey-50 block text-sm font-medium", children: "Company Name" }), _jsx("input", { type: "text", id: "company", value: companyName, onChange: (e) => setCompanyName(e.target.value), className: "border-border-default text-neutral-grey-100 focus:ring-feedback-blue/30 mt-1 block h-11 w-full rounded-xl border bg-white px-4 py-3 placeholder-gray-400 focus:ring-2 focus:outline-none", placeholder: "Acme Corp", required: true, disabled: isSubmitting })] }), (error || validationError) && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded-xl border p-3 text-sm", children: validationError || error })), _jsxs("div", { className: "flex gap-3", children: [onBack && (_jsx(Button, { type: "button", variant: "outline", size: "lg", onClick: onBack, disabled: isSubmitting, className: "flex-1", children: "Back" })), _jsx(Button, { type: "submit", size: "lg", disabled: isSubmitting, className: onBack ? "flex-1" : "w-full", children: isSubmitting ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsxs("svg", { className: "h-5 w-5 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Processing..."] })) : ("Start Trial") })] })] }), _jsxs("p", { className: "text-neutral-grey-50 mt-6 text-center text-xs", children: ["By continuing, you agree to our", " ", _jsx("a", { href: "#", className: "text-feedback-blue hover:underline", children: "Terms of Service" }), " ", "and", " ", _jsx("a", { href: "#", className: "text-feedback-blue hover:underline", children: "Privacy Policy" })] })] }));
}
//# sourceMappingURL=LicenseActivationForm.js.map