"use client"; import { useEffect, useRef, useState } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CalendarClock, CheckCircle2, ShieldCheck, BadgeCheck, Users, ArrowRight, Mail, } from "lucide-react"; import Header from "@/sections/Header"; import { LANDING_INPUT_FOCUS, LANDING_SUBMIT_BTN, } from "@/sections/landing-constants"; gsap.registerPlugin(ScrollTrigger); const HIGHLIGHTS = [ { number: "01", icon: BadgeCheck, title: "Open to DIFC & ADGM Firms", body: "All registered businesses under DIFC, DFSA, and ADGM regulation are eligible to apply.", }, { number: "02", icon: CalendarClock, title: "12 Months, No Charge", body: "Full platform access from day one. No trials, no feature limitations during the programme period.", }, { number: "03", icon: ShieldCheck, title: "Subsidized Continuity", body: "Firms graduating from the programme access preferential pricing to ensure continuity beyond the 12-month window.", }, { number: "04", icon: Users, title: "20 Firms Only", body: "Only 20 eligible firms with fewer than 20 active clients can avail this initiative.", }, ] as const; const CRITERIA = [ { title: "Be a registered business under DIFC, DFSA, or ADGM", body: "Your firm must hold a valid licence or registration with one of the UAE's recognised financial regulators.", }, { title: "Have fewer than 20 active clients", body: "The programme is designed for smaller independent firms. Up to 20 qualifying firms will be accepted.", }, { title: "Be operating in compliance with applicable law and regulation", body: "Your firm must be in good standing and conducting business in accordance with all relevant legal and regulatory requirements.", }, { title: "Be a regulated, client-facing investment or advisory firm", body: "Open exclusively to wealth management, asset management, multi-family office, capital advisory firms, or external asset managers.", }, ] as const; const FIRM_TYPE_OPTIONS = [ "Wealth management firm", "Asset management firm", "Multi-family office", "Capital advisory firm", "External asset manager", ] as const; const SUBMISSION_SUCCESS_DURATION_MS = 5000; export default function SmeInitiativePage() { const heroRef = useRef(null); const aboutRef = useRef(null); const [formData, setFormData] = useState({ firstName: "", lastName: "", jobTitle: "", workEmail: "", firmName: "", firmType: "", regulator: "", activeClients: "", yearsInOperation: "", challenges: "", confirmRegistered: false, agreeContact: false, }); const [isSubmitted, setIsSubmitted] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [submitError, setSubmitError] = useState(null); useEffect(() => { const fromTo = (el: unknown, from: gsap.TweenVars, to: gsap.TweenVars) => el && gsap.fromTo(el, from, to); const ctx = gsap.context(() => { fromTo(heroRef.current, { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7, ease: "power2.out", }); fromTo(aboutRef.current, { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.65, ease: "power2.out", scrollTrigger: { trigger: aboutRef.current, start: "top 85%" }, }); gsap.utils.toArray(".sme-reveal").forEach((el) => { gsap.fromTo(el, { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.55, ease: "power2.out", scrollTrigger: { trigger: el, start: "top 90%" }, }); }); }); return () => ctx.revert(); }, []); const handleChange = ( e: React.ChangeEvent ) => { const { name, value, type } = e.target; if (type === "checkbox") { const { checked } = e.target as HTMLInputElement; setFormData((prev) => ({ ...prev, [name]: checked })); } else { setFormData((prev) => ({ ...prev, [name]: value })); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (isSubmitting) return; setSubmitError(null); setIsSubmitting(true); try { // Same-origin proxy route forwards to the public backend endpoint // (avoids CORS). formData already has the exact field names the API expects. const res = await fetch("/api/sme-initiative/apply", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }); if (res.status === 422) { const data = await res.json().catch(() => null); const firstError = data?.errors && typeof data.errors === "object" ? (Object.values(data.errors).flat()[0] as string | undefined) : undefined; setSubmitError(firstError || "Please check your details and try again."); return; } if (!res.ok) { setSubmitError("Something went wrong. Please try again."); return; } setIsSubmitted(true); setTimeout(() => { setIsSubmitted(false); setFormData({ firstName: "", lastName: "", jobTitle: "", workEmail: "", firmName: "", firmType: "", regulator: "", activeClients: "", yearsInOperation: "", challenges: "", confirmRegistered: false, agreeContact: false, }); }, SUBMISSION_SUCCESS_DURATION_MS); } catch { setSubmitError("Unable to submit right now. Please try again."); } finally { setIsSubmitting(false); } }; return (

SME Initiative 2026