import React, { useEffect, useMemo, useState } from "react";

// Core palette (locked)

const C_NAVY = "#08172e";

const C_BLUE = "#2f6f91";

const C_TEAL = "#3ea7a0";

// Seamless page gradient (no cuts while scrolling)

const pageGradientStyle: React.CSSProperties = {

background: `linear-gradient(180deg, ${C_NAVY} 0%, ${C_BLUE} 22%, ${C_TEAL} 45%, ${C_BLUE} 70%, ${C_NAVY} 100%)`,

};

// Header/menu gradient (vertical: blue top → teal bottom)

const headerGradientStyle: React.CSSProperties = {

background: `linear-gradient(180deg, ${C_NAVY} 0%, ${C_BLUE} 55%, ${C_TEAL} 100%)`,

};

// Reusable button gradient to match the menu bar

const menuButtonStyle: React.CSSProperties = {

background: `linear-gradient(180deg, ${C_NAVY} 0%, ${C_BLUE} 55%, ${C_TEAL} 100%)`,

};

type WhatsAppCapsuleProps = {

number?: string;

};

const buildWhatsAppUrl = (rawNumber: string) => {

// Accepts formats like: 01-327-249-56, +60132724956, 0132724956

const digits = rawNumber.replace(/[^\d]/g, "");

// If it starts with 0 (Malaysia local), convert to 60 + rest

const normalized = digits.startsWith("0") ? `60${digits.slice(1)}` : digits;

return `https://wa.me/${normalized}?text=Hi%20MFA%2C%20I%27m%20interested`;

};

const GlobalKeyframes = () => (

<style>{`

@keyframes waPulse {

0% { box-shadow: 0 0 0 0 rgba(62,167,160,.55); opacity: .9; }

100% { box-shadow: 0 0 0 18px rgba(62,167,160,0); opacity: .3; }

}

`}</style>

);

const WhatsAppCapsule: React.FC<WhatsAppCapsuleProps> = ({ number = "01-327-249-56" }) => {

const wa = buildWhatsAppUrl(number);

return (

<div

className="absolute inset-0 -m-4 rounded-[2rem]"

style={{ animation: "waPulse 1.8s infinite" }}

aria-hidden="true"

<div

className="relative px-5 h-12 rounded-full shadow-xl flex items-center gap-3 border border-white/15"

style={headerGradientStyle}

<svg

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 24 24"

width="15"

height="15"

fill="none"

stroke="white"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

aria-hidden="true"

</svg>

</div>

</div>

</a>

);

};

type PageKey =

| "home"

| "pt"

| "online"

| "mentorship"

| "group-classes"

| "corporate-wellness"

| "body-assessment"

| "assessment-basic"

| "assessment-complete"

| "membership-free"

| "membership-pro"

| "membership-free-form"

| "membership-pro-form"

| "payment-free"

| "payment-pro";

type Currency = "EUR" | "MYR";

type Cadence = "monthly" | "six" | "twelve";

type PricingMeta = {

label: string;

amountDisplay: string;

};

type PricingTable = Record<Currency, Record<Cadence, PricingMeta>>;

// Professional membership pricing (locked to your numbers)

const PRO_PRICING: PricingTable = {

EUR: {

monthly: { label: "Monthly", amountDisplay: "€6" },

six: { label: "6 months", amountDisplay: "€30" },

twelve: { label: "12 months", amountDisplay: "€60" },

MYR: {

monthly: { label: "Monthly", amountDisplay: "RM29" },

six: { label: "6 months", amountDisplay: "RM144" },

twelve: { label: "12 months", amountDisplay: "RM288" },

};

// Paste your Stripe Payment Links here (external checkout). Leave empty until ready.

// Example format (Stripe payment link): https://buy.stripe.com/xxxxxxxxxxxx

const STRIPE_PAYMENT_LINKS: Record<Currency, Record<Cadence, string>> = {

EUR: {

monthly: "",

six: "",

twelve: "",

MYR: {

monthly: "",

six: "",

twelve: "",

};

const readPageFromHash = (): PageKey => {

const raw = (typeof window !== "undefined" ? window.location.hash : "") || "";

const h = raw.replace("#", "").trim().toLowerCase();

if (h === "pt" || h === "personal-training") return "pt";

if (h === "online") return "online";

if (h === "mentorship") return "mentorship";

if (h === "group-classes" || h === "group" || h === "classes") return "group-classes";

if (h === "corporate-wellness" || h === "corporates" || h === "corporate") return "corporate-wellness";

if (h === "body-assessment" || h === "assessment") return "body-assessment";

if (h === "assessment-basic" || h === "basic-assessment") return "assessment-basic";

if (h === "assessment-complete" || h === "complete-assessment") return "assessment-complete";

if (h === "membership-free") return "membership-free";

if (h === "membership-pro") return "membership-pro";

if (h === "membership-free-form") return "membership-free-form";

if (h === "membership-pro-form") return "membership-pro-form";

if (h === "payment-free") return "payment-free";

if (h === "payment-pro") return "payment-pro";

return "home";

};

type ServiceItem = {

href: string;

labelKey: TKey;

children?: { href: string; labelKey: TKey }[];

};

type MembershipFormState = {

firstName: string;

lastName: string;

email: string;

phone: string;

address: string;

};

const emptyMemberForm = (): MembershipFormState => ({

firstName: "",

lastName: "",

email: "",

phone: "",

address: "",

});

type LanguageKey =

| "en"

| "es"

| "zh-Hant"

| "ms"

| "ta"

| "id"

| "de"

| "fr"

| "pt"

| "ja"

| "th"

| "fil"

| "ko";

type LanguageOption = { key: LanguageKey; name: string; flag: string };

const LANGUAGES: LanguageOption[] = [

{ key: "en", name: "English", flag: "🇬🇧" },

{ key: "es", name: "Spanish", flag: "🇪🇸" },

{ key: "zh-Hant", name: "Chinese (Traditional)", flag: "🇹🇼" },

{ key: "ms", name: "Malay", flag: "🇲🇾" },

{ key: "ta", name: "Tamil", flag: "🇮🇳" },

{ key: "id", name: "Indonesian", flag: "🇮🇩" },

{ key: "de", name: "German", flag: "🇩🇪" },

{ key: "fr", name: "French", flag: "🇫🇷" },

{ key: "pt", name: "Portuguese", flag: "🇵🇹" },

{ key: "ja", name: "Japanese", flag: "🇯🇵" },

{ key: "th", name: "Thai", flag: "🇹🇭" },

{ key: "fil", name: "Philippine", flag: "🇵🇭" },

{ key: "ko", name: "Korean", flag: "🇰🇷" },

];

type TKey =

| "nav.home"

| "nav.purpose"

| "nav.education"

| "nav.services"

| "nav.membership"

| "nav.language"

| "nav.menu"

| "nav.close"

| "services.pt"

| "services.group"

| "services.corporate"

| "services.assessment"

| "services.assessment.basic"

| "services.assessment.complete"

| "services.online"

| "services.mentorship"

| "hero.title"

| "hero.subtitle"

| "hero.signup"

| "purpose.title"

| "purpose.p1"

| "purpose.p2"

| "purpose.educatorsTitle"

| "purpose.educatorsP1"

| "purpose.educatorsP2"

| "purpose.missionTitle"

| "purpose.missionBody"

| "purpose.visionTitle"

| "purpose.visionBody"

| "education.title"

| "contact.title"

| "contact.subtitle"

| "contact.cta"

| "membership.free"

| "membership.pro"

| "membership.register"

| "membership.continue";

const I18N: Record<LanguageKey, Partial<Record<TKey, string>>> = {

en: {

"nav.home": "Home",

"nav.purpose": "Our Purpose",

"nav.education": "Education",

"nav.services": "Services",

"nav.membership": "Membership",

"nav.language": "Language",

"nav.menu": "MENU",

"nav.close": "Close",

"services.pt": "Personal Training",

"services.group": "Group Class Programs",

"services.corporate": "Corporate Wellness Programs",

"services.assessment": "Body Assessment",

"services.assessment.basic": "Basic Assessment",

"services.assessment.complete": "Complete Assessment",

"services.online": "Online",

"services.mentorship": "Mentorship",

"hero.title": "Become your own Masterpiece.",

"hero.subtitle":

"MFA Coaches rise beyond training and provide the education, expertise, and the best experience that supports your lifestyle.",

"hero.signup": "Sign Up",

"purpose.title": "Our Purpose",

"purpose.p1":

"MFA Malaysia Fitness Academy exists to elevate the standard of knowledge, professionalism, and human impact within the global fitness industry. We believe every individual has the potential to become their own masterpiece when guided by education, structure, and purpose-driven movement.",

"purpose.p2":

"Through group classes, personal training, corporate wellness initiatives, and integrated health-related solutions, we support people in building lives that are resilient, strong, and functional across every stage of life. Our work is grounded in science, refined through practice, and expressed through meaningful human connection.",

"purpose.educatorsTitle": "Our Fitness Educators",

"purpose.educatorsP1":

"At the heart of MFA are our Fitness Educators—industry leaders who combine academic rigor with real-world coaching experience. They do not simply teach techniques; they develop thinking professionals. By translating biomechanics, neuroscience, and applied physiology into practical coaching systems, our educators empower fitness professionals to coach with clarity, confidence, and integrity.",

"purpose.educatorsP2":

"Through structured certifications, mentorship, and applied learning environments, MFA supports coaches in refining their craft, strengthening their professional identity, and building sustainable careers. Our graduates are equipped to create transformative experiences for clients, lead with intention, and contribute positively to the long-term evolution of the fitness industry.",

"purpose.missionTitle": "Our Mission",

"purpose.missionBody":

"Our mission is to educate, empower, and elevate fitness professionals and communities through evidence-informed education, high-quality coaching standards, and human-centered training experiences that improve quality of life.",

"purpose.visionTitle": "Our Vision",

"purpose.visionBody":

"We envision a future where fitness professionals are health and life educators, movement specialists, and leaders in health—guiding individuals and communities toward lifelong well-being, resilience, and purposeful living.",

"education.title": "Education",

"contact.title": "Contact",

"contact.subtitle": "Message us on WhatsApp to start.",

"contact.cta": "Chat on WhatsApp",

"membership.free": "Free Membership",

"membership.pro": "Professional Membership",

"membership.register": "Register",

"membership.continue": "Continue to Registration",

// Requested full Purpose-page translations (Spanish, Chinese Traditional, Malay, Indonesian, Tamil)

es: {

"nav.home": "Inicio",

"nav.purpose": "Nuestro Propósito",

"nav.education": "Educación",

"nav.services": "Servicios",

"nav.membership": "Membresía",

"nav.language": "Idioma",

"nav.menu": "MENÚ",

"nav.close": "Cerrar",

"services.pt": "Entrenamiento Personal",

"services.group": "Programas de Clases Grupales",

"services.corporate": "Programas de Bienestar Corporativo",

"services.assessment": "Evaluación Corporal",

"services.assessment.basic": "Evaluación Básica",

"services.assessment.complete": "Evaluación Completa",

"services.online": "Online",

"services.mentorship": "Mentoría",

"hero.title": "Conviértete en tu propia Obra Maestra.",

"hero.subtitle":

"Los Coaches de MFA van más allá del entrenamiento y ofrecen educación, experiencia y la mejor vivencia para apoyar tu estilo de vida.",

"hero.signup": "Inscribirme",

"purpose.title": "Nuestro Propósito",

"purpose.p1":

"MFA Malaysia Fitness Academy existe para elevar el nivel de conocimiento, profesionalismo e impacto humano dentro de la industria global del fitness. Creemos que cada persona tiene el potencial de convertirse en su propia obra maestra cuando es guiada por la educación, la estructura y el movimiento con propósito.",

"purpose.p2":

"A través de clases grupales, entrenamiento personal, programas de bienestar corporativo y soluciones integradas relacionadas con la salud, apoyamos a las personas a construir vidas resilientes, fuertes y funcionales en todas las etapas de la vida. Nuestro trabajo se basa en la ciencia, se perfecciona con la práctica y se expresa a través de conexiones humanas significativas.",

"purpose.educatorsTitle": "Nuestros Educadores Fitness",

"purpose.educatorsP1":

"En el corazón de MFA están nuestros Educadores Fitness, líderes del sector que combinan rigor académico con experiencia real en el entrenamiento. No solo enseñan técnicas; forman profesionales con criterio. Al traducir la biomecánica, la neurociencia y la fisiología aplicada en sistemas prácticos de entrenamiento, nuestros educadores capacitan a los profesionales del fitness para entrenar con claridad, confianza e integridad.",

"purpose.educatorsP2":

"A través de certificaciones estructuradas, mentoría y entornos de aprendizaje aplicados, MFA apoya a los coaches a perfeccionar su oficio, fortalecer su identidad profesional y construir carreras sostenibles. Nuestros graduados están preparados para crear experiencias transformadoras para sus clientes, liderar con intención y contribuir positivamente a la evolución a largo plazo de la industria del fitness.",

"purpose.missionTitle": "Nuestra Misión",

"purpose.missionBody":

"Nuestra misión es educar, empoderar y elevar a los profesionales del fitness y a las comunidades mediante educación basada en evidencia, altos estándares de entrenamiento y experiencias centradas en la persona que mejoran la calidad de vida.",

"purpose.visionTitle": "Nuestra Visión",

"purpose.visionBody":

"Nuestra visión es un futuro donde los profesionales del fitness sean educadores de salud y de vida, especialistas en movimiento y líderes en bienestar, guiando a individuos y comunidades hacia una vida de bienestar duradero, resiliencia y propósito.",

"education.title": "Educación",

"contact.title": "Contacto",

"contact.subtitle": "Escríbenos por WhatsApp para empezar.",

"contact.cta": "Chatear por WhatsApp",

"membership.free": "Membresía Gratuita",

"membership.pro": "Membresía Profesional",

"membership.register": "Registrarme",

"membership.continue": "Continuar al Registro",

"zh-Hant": {

"nav.home": "首頁",

"nav.purpose": "我們的宗旨",

"nav.education": "教育",

"nav.services": "服務",

"nav.membership": "會員",

"nav.language": "語言",

"nav.menu": "選單",

"nav.close": "關閉",

"services.pt": "私人教練",

"services.group": "團體課程",

"services.corporate": "企業健康方案",

"services.assessment": "身體評估",

"services.assessment.basic": "基礎評估",

"services.assessment.complete": "完整評估",

"services.online": "線上",

"services.mentorship": "導師制",

"hero.title": "成為你自己的傑作。",

"hero.subtitle": "MFA 教練不只提供訓練，更提供教育、專業與最好的體驗，支持你的生活方式。",

"hero.signup": "註冊",

"purpose.title": "我們的宗旨",

"purpose.p1":

"MFA 馬來西亞健身學院旨在提升全球健身產業的知識標準、專業素養與人本影響力。我們相信，只要以教育、結構與有目的的動作引導，每個人都能成為自己的傑作。",

"purpose.p2":

"透過團體課程、私人教練、企業健康計畫與整合式健康相關解決方案，我們支持人們在生命各階段建立更有韌性、更強壯且更具功能性的生活。我們的工作以科學為基礎，經由實務精煉，並透過有意義的人際連結呈現。",

"purpose.educatorsTitle": "我們的健身教育者",

"purpose.educatorsP1":

"MFA 的核心是我們的健身教育者——結合學術嚴謹與實務教練經驗的產業領袖。他們不只是教授技巧，更培養具思辨能力的專業人士。透過將生物力學、神經科學與應用生理學轉化為可執行的教練系統，我們的教育者讓健身專業者以清晰、信心與誠信進行教練工作。",

"purpose.educatorsP2":

"透過結構化的認證、導師制與應用型學習環境，MFA 協助教練精進專業、強化職業認同並建立可持續的職涯。我們的畢業生具備創造具轉化力的客戶體驗、以意圖領導並正向推動健身產業長期進化的能力。",

"purpose.missionTitle": "我們的使命",

"purpose.missionBody":

"我們的使命是透過以證據為基礎的教育、高品質教練標準與以人為本的訓練體驗，教育、賦能並提升健身專業者與社群，進而改善生活品質。",

"purpose.visionTitle": "我們的願景",

"purpose.visionBody":

"我們期許未來，健身專業者成為健康與生活教育者、動作專家與健康領導者——引導個人與社群邁向終身健康、韌性與有目的的生活。",

"education.title": "教育",

"contact.title": "聯絡",

"contact.subtitle": "在 WhatsApp 上訊息我們開始。",

"contact.cta": "WhatsApp 聊天",

"membership.free": "免費會員",

"membership.pro": "專業會員",

"membership.register": "註冊",

"membership.continue": "繼續填寫資料",

ms: {

"nav.home": "Laman Utama",

"nav.purpose": "Tujuan Kami",

"nav.education": "Pendidikan",

"nav.services": "Perkhidmatan",

"nav.membership": "Keahlian",

"nav.language": "Bahasa",

"nav.menu": "MENU",

"nav.close": "Tutup",

"services.pt": "Latihan Peribadi",

"services.group": "Program Kelas Berkumpulan",

"services.corporate": "Program Kesejahteraan Korporat",

"services.assessment": "Penilaian Badan",

"services.assessment.basic": "Penilaian Asas",

"services.assessment.complete": "Penilaian Lengkap",

"services.online": "Dalam Talian",

"services.mentorship": "Bimbingan",

"hero.title": "Jadilah Karya Agung Anda.",

"hero.subtitle":

"Jurulatih MFA melangkaui latihan dan menyediakan pendidikan, kepakaran, serta pengalaman terbaik yang menyokong gaya hidup anda.",

"hero.signup": "Daftar",

"purpose.title": "Tujuan Kami",

"purpose.p1":

"MFA Malaysia Fitness Academy ditubuhkan untuk meningkatkan tahap pengetahuan, profesionalisme dan impak kemanusiaan dalam industri kecergasan global. Kami percaya setiap individu mempunyai potensi untuk menjadi karya agung diri mereka sendiri apabila dibimbing melalui pendidikan, struktur dan pergerakan yang berlandaskan tujuan.",

"purpose.p2":

"Melalui kelas berkumpulan, latihan peribadi, inisiatif kesejahteraan korporat serta penyelesaian kesihatan bersepadu, kami menyokong individu dalam membina kehidupan yang berdaya tahan, kuat dan berfungsi di setiap peringkat kehidupan. Kerja kami berasaskan sains, diperhalusi melalui amalan, dan dizahirkan melalui hubungan manusia yang bermakna.",

"purpose.educatorsTitle": "Pendidik Kecergasan Kami",

"purpose.educatorsP1":

"Di teras MFA ialah Pendidik Kecergasan kami—pemimpin industri yang menggabungkan ketelitian akademik dengan pengalaman latihan sebenar. Mereka bukan sekadar mengajar teknik; mereka membentuk profesional yang berfikir. Dengan menterjemahkan biomekanik, neurosains dan fisiologi gunaan ke dalam sistem latihan praktikal, pendidik kami memperkasakan profesional kecergasan untuk melatih dengan kejelasan, keyakinan dan integriti.",

"purpose.educatorsP2":

"Melalui pensijilan berstruktur, bimbingan, dan persekitaran pembelajaran aplikasi, MFA menyokong jurulatih untuk memperhalusi kemahiran mereka, mengukuhkan identiti profesional, dan membina kerjaya yang mampan. Graduan kami bersedia untuk mencipta pengalaman transformasi bagi klien, memimpin dengan niat, dan menyumbang secara positif kepada evolusi jangka panjang industri kecergasan.",

"purpose.missionTitle": "Misi Kami",

"purpose.missionBody":

"Misi kami adalah untuk mendidik, memperkasa dan meningkatkan profesional kecergasan serta komuniti melalui pendidikan berasaskan bukti, piawaian latihan berkualiti tinggi dan pengalaman latihan berfokuskan manusia yang meningkatkan kualiti hidup.",

"purpose.visionTitle": "Visi Kami",

"purpose.visionBody":

"Visi kami adalah masa depan di mana profesional kecergasan menjadi pendidik kesihatan dan kehidupan, pakar pergerakan serta pemimpin kesihatan—membimbing individu dan komuniti ke arah kesejahteraan sepanjang hayat, daya tahan dan kehidupan yang bermakna.",

"education.title": "Pendidikan",

"contact.title": "Hubungi",

"contact.subtitle": "Hantar mesej di WhatsApp untuk bermula.",

"contact.cta": "Chat di WhatsApp",

"membership.free": "Keahlian Percuma",

"membership.pro": "Keahlian Profesional",

"membership.register": "Daftar",

"membership.continue": "Teruskan ke Pendaftaran",

id: {

"nav.home": "Beranda",

"nav.purpose": "Tujuan Kami",

"nav.education": "Edukasi",

"nav.services": "Layanan",

"nav.membership": "Keanggotaan",

"nav.language": "Bahasa",

"nav.menu": "MENU",

"nav.close": "Tutup",

"services.pt": "Personal Training",

"services.group": "Program Kelas Grup",

"services.corporate": "Program Wellness Korporat",

"services.assessment": "Asesmen Tubuh",

"services.assessment.basic": "Asesmen Dasar",

"services.assessment.complete": "Asesmen Lengkap",

"services.online": "Online",

"services.mentorship": "Mentorship",

"hero.title": "Jadilah Masterpiece Versi Anda.",

"hero.subtitle":

"Coach MFA melampaui sekadar latihan dan menghadirkan edukasi, keahlian, serta pengalaman terbaik yang mendukung gaya hidup Anda.",

"hero.signup": "Daftar",

"purpose.title": "Tujuan Kami",

"purpose.p1":

"MFA Malaysia Fitness Academy hadir untuk meningkatkan standar pengetahuan, profesionalisme, dan dampak kemanusiaan dalam industri kebugaran global. Kami percaya setiap individu memiliki potensi untuk menjadi mahakarya dirinya sendiri ketika dibimbing melalui pendidikan, struktur, dan gerakan yang memiliki tujuan.",

"purpose.p2":

"Melalui kelas kelompok, pelatihan personal, program kesejahteraan korporat, serta solusi kesehatan terintegrasi, kami mendukung individu dalam membangun kehidupan yang tangguh, kuat, dan fungsional di setiap tahap kehidupan. Pekerjaan kami berlandaskan sains, disempurnakan melalui praktik, dan diwujudkan melalui hubungan manusia yang bermakna.",

"purpose.educatorsTitle": "Pendidik Kebugaran Kami",

"purpose.educatorsP1":

"Inti dari MFA adalah para Pendidik Kebugaran kami—pemimpin industri yang menggabungkan ketelitian akademis dengan pengalaman pelatihan di dunia nyata. Mereka tidak hanya mengajarkan teknik, tetapi membentuk profesional yang mampu berpikir kritis. Dengan menerjemahkan biomekanika, neurosains, dan fisiologi terapan ke dalam sistem pelatihan praktis, para pendidik kami memberdayakan profesional kebugaran untuk melatih dengan kejelasan, kepercayaan diri, dan integritas.",

"purpose.educatorsP2":

"Melalui sertifikasi terstruktur, mentorship, dan lingkungan pembelajaran terapan, MFA mendukung para coach untuk menyempurnakan keterampilan, memperkuat identitas profesional, dan membangun karier yang berkelanjutan. Lulusan kami dibekali untuk menciptakan pengalaman yang transformatif bagi klien, memimpin dengan niat, dan berkontribusi positif terhadap evolusi jangka panjang industri kebugaran.",

"purpose.missionTitle": "Misi Kami",

"purpose.missionBody":

"Misi kami adalah mendidik, memberdayakan, dan meningkatkan profesional kebugaran serta komunitas melalui pendidikan berbasis bukti, standar pelatihan berkualitas tinggi, dan pengalaman pelatihan yang berpusat pada manusia guna meningkatkan kualitas hidup.",

"purpose.visionTitle": "Visi Kami",

"purpose.visionBody":

"Visi kami adalah masa depan di mana profesional kebugaran berperan sebagai pendidik kesehatan dan kehidupan, spesialis gerakan, serta pemimpin kesehatan—membimbing individu dan komunitas menuju kesejahteraan seumur hidup, ketahanan, dan kehidupan yang bermakna.",

"education.title": "Edukasi",

"contact.title": "Kontak",

"contact.subtitle": "Chat kami di WhatsApp untuk memulai.",

"contact.cta": "Chat di WhatsApp",

"membership.free": "Keanggotaan Gratis",

"membership.pro": "Keanggotaan Profesional",

"membership.register": "Daftar",

"membership.continue": "Lanjut ke Pendaftaran",

ta: {

"nav.home": "முகப்பு",

"nav.purpose": "எங்கள் நோக்கம்",

"nav.education": "கல்வி",

"nav.services": "சேவைகள்",

"nav.membership": "உறுப்பினர்",

"nav.language": "மொழி",

"nav.menu": "மெனு",

"nav.close": "மூடு",

"services.pt": "தனிப்பட்ட பயிற்சி",

"services.group": "குழு வகுப்பு திட்டங்கள்",

"services.corporate": "கார்ப்பரேட் வெல்நஸ் திட்டங்கள்",

"services.assessment": "உடல் மதிப்பீடு",

"services.assessment.basic": "அடிப்படை மதிப்பீடு",

"services.assessment.complete": "முழுமையான மதிப்பீடு",

"services.online": "ஆன்லைன்",

"services.mentorship": "மென்டர்ஷிப்",

"hero.title": "உங்கள் சொந்த மாஸ்டர்பீஸ் ஆகுங்கள்.",

"hero.subtitle":

"MFA பயிற்சியாளர்கள் பயிற்சியைத் தாண்டி கல்வி, நிபுணத்துவம் மற்றும் உங்கள் வாழ்க்கைமுறைக்கு ஆதரவான சிறந்த அனுபவத்தை வழங்குகின்றனர்.",

"hero.signup": "பதிவு",

"purpose.title": "எங்கள் நோக்கம்",

"purpose.p1":

"MFA மலேசியா ஃபிட்னஸ் அகாடமி உலகளாவிய உடற்பயிற்சி துறையில் அறிவின் தரம், தொழில்முறை நெறிமுறை மற்றும் மனித தாக்கத்தை உயர்த்துவதற்காக உருவாக்கப்பட்டுள்ளது. கல்வி, கட்டமைப்பு மற்றும் நோக்கமுள்ள இயக்கம் மூலம் வழிநடத்தப்படும் போது, ஒவ்வொருவரும் தங்களின் சொந்த சிறந்த படைப்பாக மாறும் திறன் கொண்டவர்கள் என்று நாங்கள் நம்புகிறோம்.",

"purpose.p2":

"குழு வகுப்புகள், தனிப்பட்ட பயிற்சி, நிறுவன நலத்திட்டங்கள் மற்றும் ஒருங்கிணைந்த சுகாதார தீர்வுகள் மூலம், வாழ்க்கையின் ஒவ்வொரு கட்டத்திலும் வலிமையான, நிலையான மற்றும் செயல்திறன் கொண்ட வாழ்க்கையை உருவாக்க நாங்கள் மக்களை ஆதரிக்கிறோம். எங்கள் பணிகள் அறிவியல் அடிப்படையில் அமைந்தவை, நடைமுறை அனுபவத்தின் மூலம் மேம்படுத்தப்பட்டவை மற்றும் அர்த்தமுள்ள மனித தொடர்புகளின் மூலம் வெளிப்படுத்தப்படுகின்றன.",

"purpose.educatorsTitle": "எங்கள் ஃபிட்னஸ் கல்வியாளர்கள்",

"purpose.educatorsP1":

"MFA-வின் மையமாக உள்ளவர்கள் எங்கள் ஃபிட்னஸ் கல்வியாளர்கள்—அவர்கள் கல்விசார் துல்லியத்தையும் உண்மையான பயிற்சி அனுபவத்தையும் இணைக்கும் துறைத்தலைவர்கள். அவர்கள் வெறும் நுட்பங்களை கற்பிப்பதில்லை; சிந்திக்கக்கூடிய தொழில்முறை நிபுணர்களை உருவாக்குகிறார்கள். உயிரியல் இயக்கவியல், நரம்பியல் அறிவியல் மற்றும் பயன்பாட்டு உடலியல் ஆகியவற்றை நடைமுறை பயிற்சி அமைப்புகளாக மாற்றுவதன் மூலம், எங்கள் கல்வியாளர்கள் தெளிவு, நம்பிக்கை மற்றும் நேர்மையுடன் பயிற்சி வழங்கும் திறனை உடற்பயிற்சி நிபுணர்களுக்கு வழங்குகின்றனர்.",

"purpose.educatorsP2":

"கட்டமைக்கப்பட்ட சான்றிதழ்கள், மென்டர்ஷிப் மற்றும் பயன்பாட்டு கற்றல் சூழல்கள் மூலம், MFA பயிற்சியாளர்களின் திறன்களை மேலும் செம்மைப்படுத்தவும், தொழில்முறை அடையாளத்தை வலுப்படுத்தவும் மற்றும் நிலைத்த தொழில் பாதைகளை உருவாக்கவும் ஆதரிக்கிறது. எங்கள் பட்டதாரர்கள் வாடிக்கையாளர்களுக்கு மாற்றத்தை ஏற்படுத்தும் அனுபவங்களை உருவாக்க, நோக்கத்துடன் வழிநடத்த, மற்றும் உடற்பயிற்சி துறையின் நீண்டகால வளர்ச்சியில் நேர்மறையாக பங்களிக்க தேவையான திறன்களுடன் தயாராக இருக்கிறார்கள்.",

"purpose.missionTitle": "எங்கள் பணி",

"purpose.missionBody":

"எங்கள் பணி, ஆதாரங்களைக் கொண்ட கல்வி, உயர்தர பயிற்சி தரநிலைகள் மற்றும் மனித மையப்படுத்தப்பட்ட பயிற்சி அனுபவங்கள் மூலம் உடற்பயிற்சி நிபுணர்களையும் சமூகங்களையும் கல்வி வழங்கி, அதிகாரப்படுத்தி, உயர்த்துவதாகும்.",

"purpose.visionTitle": "எங்கள் பார்வை",

"purpose.visionBody":

"எங்கள் பார்வை, உடற்பயிற்சி நிபுணர்கள் சுகாதார மற்றும் வாழ்க்கை கல்வியாளர்களாக, இயக்க நிபுணர்களாக மற்றும் சுகாதாரத் தலைவர்களாக இருந்து, தனிநபர்களையும் சமூகங்களையும் வாழ்நாள் நலன், நிலைத்தன்மை மற்றும் அர்த்தமுள்ள வாழ்க்கைக்குத் திசைநடத்தும் எதிர்காலமாகும்.",

"education.title": "கல்வி",

"contact.title": "தொடர்பு",

"contact.subtitle": "தொடங்க WhatsApp-ல் செய்தி அனுப்புங்கள்.",

"contact.cta": "WhatsApp-ல் அரட்டை",

"membership.free": "இலவச உறுப்பினர்",

"membership.pro": "தொழில்முறை உறுப்பினர்",

"membership.register": "பதிவு",

"membership.continue": "பதிவுக்கு தொடரவும்",

// Other languages: keep UI stable by falling back to English for missing keys

de: {

"nav.home": "Start",

"nav.purpose": "Unser Zweck",

"nav.education": "Ausbildung",

"nav.services": "Leistungen",

"nav.membership": "Mitgliedschaft",

"nav.language": "Sprache",

"nav.menu": "MENÜ",

"nav.close": "Schließen",

fr: {

"nav.home": "Accueil",

"nav.purpose": "Notre Mission",

"nav.education": "Éducation",

"nav.services": "Services",

"nav.membership": "Adhésion",

"nav.language": "Langue",

"nav.menu": "MENU",

"nav.close": "Fermer",

pt: {

"nav.home": "Início",

"nav.purpose": "Nosso Propósito",

"nav.education": "Educação",

"nav.services": "Serviços",

"nav.membership": "Assinatura",

"nav.language": "Idioma",

"nav.menu": "MENU",

"nav.close": "Fechar",

ja: {

"nav.home": "ホーム",

"nav.purpose": "目的",

"nav.education": "教育",

"nav.services": "サービス",

"nav.membership": "メンバーシップ",

"nav.language": "言語",

"nav.menu": "メニュー",

"nav.close": "閉じる",

th: {

"nav.home": "หน้าแรก",

"nav.purpose": "จุดมุ่งหมายของเรา",

"nav.education": "การศึกษา",

"nav.services": "บริการ",

"nav.membership": "สมาชิก",

"nav.language": "ภาษา",

"nav.menu": "เมนู",

"nav.close": "ปิด",

fil: {

"nav.home": "Home",

"nav.purpose": "Layunin Namin",

"nav.education": "Edukasyon",

"nav.services": "Serbisyo",

"nav.membership": "Membership",

"nav.language": "Wika",

"nav.menu": "MENU",

"nav.close": "Isara",

ko: {

"nav.home": "홈",

"nav.purpose": "목표",

"nav.education": "교육",

"nav.services": "서비스",

"nav.membership": "멤버십",

"nav.language": "언어",

"nav.menu": "메뉴",

"nav.close": "닫기",

};

const __DEV__ = true;

if (__DEV__) {

const year = new Date().getFullYear();

console.assert(year >= 2000 && year <= 3000, "currentYear looks out of range");

console.assert(

buildWhatsAppUrl("01-327-249-56").startsWith("https://wa.me/60"),

"WhatsApp URL normalization failed for local 0-leading number"

);

console.assert(buildWhatsAppUrl("+60132724956").includes("wa.me/601"), "WhatsApp URL normalization failed for +60 number");

console.assert(buildWhatsAppUrl("0132724956").includes("wa.me/601"), "WhatsApp URL normalization failed for plain local digits");

console.assert(

buildWhatsAppUrl("01-327-249-56").includes("text=Hi%20MFA%2C%20I%27m%20interested"),

"WhatsApp URL missing text parameter"

);

console.assert(PRO_PRICING.EUR.monthly.amountDisplay === "€6", "EUR monthly pricing mismatch");

console.assert(PRO_PRICING.MYR.six.amountDisplay === "RM144", "MYR 6-month pricing mismatch");

console.assert(PRO_PRICING.MYR.twelve.amountDisplay === "RM288", "MYR 12-month pricing mismatch");

console.assert(PRO_PRICING.EUR.twelve.amountDisplay === "€60", "EUR 12-month pricing mismatch");

// Purpose translations smoke test (English + 5 requested languages)

const PURPOSE_KEYS: TKey[] = [

"purpose.p1",

"purpose.p2",

"purpose.educatorsTitle",

"purpose.educatorsP1",

"purpose.educatorsP2",

"purpose.missionTitle",

"purpose.missionBody",

"purpose.visionTitle",

"purpose.visionBody",

];

(["en", "es", "zh-Hant", "ms", "id", "ta"] as LanguageKey[]).forEach((lang) => {

PURPOSE_KEYS.forEach((k) => {

const v = I18N[lang]?.[k];

console.assert(typeof v === "string" && v.length > 0, `Missing Purpose translation: ${lang} · ${k}`);

});

}

export default function App() {

const [page, setPage] = useState<PageKey>("home");

const [mobileOpen, setMobileOpen] = useState(false);

const [languageOpen, setLanguageOpen] = useState(false);

const [languageMobileOpen, setLanguageMobileOpen] = useState(false);

const [language, setLanguage] = useState<LanguageKey>("en");

const [servicesOpen, setServicesOpen] = useState(false);

const [servicesMobileOpen, setServicesMobileOpen] = useState(false);

const [servicesAssessmentOpen, setServicesAssessmentOpen] = useState(false);

const [membershipOpen, setMembershipOpen] = useState(false);

const [educationOpen, setEducationOpen] = useState(false);

const [ptOpenKey, setPtOpenKey] = useState<string | null>(null);

const [mentorOpenKey, setMentorOpenKey] = useState<string | null>(null);

const [gcCategoryOpenKey, setGcCategoryOpenKey] = useState<string | null>(null);

const [gcItemOpenKey, setGcItemOpenKey] = useState<string | null>(null);

const [proCurrency, setProCurrency] = useState<Currency>("EUR");

const [proCadence, setProCadence] = useState<Cadence>("monthly");

const [freeForm, setFreeForm] = useState<MembershipFormState>(emptyMemberForm());

const [proForm, setProForm] = useState<MembershipFormState>(emptyMemberForm());

const [freeSubmitted, setFreeSubmitted] = useState(false);

const [proSubmitted, setProSubmitted] = useState(false);

useEffect(() => {

const apply = () => setPage(readPageFromHash());

apply();

window.addEventListener("hashchange", apply);

return () => window.removeEventListener("hashchange", apply);

}, []);

const t = (key: TKey) => {

const langPack = I18N[language];

const enPack = I18N.en;

return (langPack && langPack[key]) || enPack[key] || key;

};

const currentLang = useMemo(() => LANGUAGES.find((l) => l.key === language) ?? LANGUAGES[0], [language]);

const servicesItems: ServiceItem[] = useMemo(

() => [

{ href: "#pt", labelKey: "services.pt" },

{ href: "#group-classes", labelKey: "services.group" },

{ href: "#corporate-wellness", labelKey: "services.corporate" },

{

href: "#body-assessment",

labelKey: "services.assessment",

children: [

{ href: "#assessment-basic", labelKey: "services.assessment.basic" },

{ href: "#assessment-complete", labelKey: "services.assessment.complete" },

{ href: "#online", labelKey: "services.online" },

{ href: "#mentorship", labelKey: "services.mentorship" },

[]

);

const closeAllMenus = () => {

setLanguageOpen(false);

setLanguageMobileOpen(false);

setServicesOpen(false);

setServicesMobileOpen(false);

setServicesAssessmentOpen(false);

setMembershipOpen(false);

setEducationOpen(false);

setMobileOpen(false);

};

const TopNav = (

href="#home"

className="flex items-center gap-3 tracking-wide"

aria-label="MFA Malaysia Fitness Academy"

onClick={closeAllMenus}

</span>

<span className="block text-sm font-semibold tracking-[0.18em] text-white">MALAYSIA</span>

<span className="block text-xs text-white/70">Fitness Academy</span>

</span>

</a>

{/* Language (desktop) */}

<button

type="button"

className="hover:opacity-80 inline-flex items-center gap-2"

aria-haspopup="menu"

aria-expanded={languageOpen}

onClick={() => {

setLanguageOpen((v) => !v);

setServicesOpen(false);

setServicesAssessmentOpen(false);

setMembershipOpen(false);

setEducationOpen(false);

}}

<span>{t("nav.language")}</span>

</button>

{languageOpen && (

{LANGUAGES.map((l) => (

<button

key={l.key}

type="button"

className={`w-full text-left px-4 py-3 rounded-xl hover:bg-white/10 ${l.key === language ? "ring-1 ring-white/30" : ""}`}

onClick={() => {

setLanguage(l.key);

setLanguageOpen(false);

}}

</span>

</button>

))}

<button type="button" className="w-full text-left px-4 py-3 rounded-xl hover:bg-white/10 text-white/80" onClick={() => setLanguageOpen(false)}>{t("nav.close")}</button>

</div>

)}

</div>

{/* Our Purpose (desktop) */}

<a href="#about" onClick={closeAllMenus} className="hover:opacity-80">{t("nav.purpose")}</a>

<button

type="button"

className="hover:opacity-80 inline-flex items-center gap-2"

aria-haspopup="menu"

aria-expanded={educationOpen}

onClick={() => {

setEducationOpen((v) => !v);

setServicesOpen(false);

setServicesAssessmentOpen(false);

setMembershipOpen(false);

}}

<span>{t("nav.education")}</span>

</button>

{educationOpen && (

<a href="#education-courses" className="block px-4 py-3 rounded-xl hover:bg-white/10" onClick={closeAllMenus}>Courses</a>

<a href="#education-workshops" className="block px-4 py-3 rounded-xl hover:bg-white/10" onClick={closeAllMenus}>Workshops</a>

<button type="button" className="w-full text-left px-4 py-3 rounded-xl hover:bg-white/10 text-white/80" onClick={() => setEducationOpen(false)}>{t("nav.close")}</button>

</div>

)}

</div>

<button

type="button"

className="hover:opacity-80 inline-flex items-center gap-2"

aria-haspopup="menu"

aria-expanded={servicesOpen}

onClick={() => {

setServicesOpen((v) => !v);

setMembershipOpen(false);

}}

<span>{t("nav.services")}</span>

<svg

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 24 24"

width="14"

height="14"

fill="none"

stroke="white"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

aria-hidden="true"

className={servicesOpen ? "opacity-90" : "opacity-70"}

</svg>

</button>

{servicesOpen && (

<div

role="menu"

className="absolute left-0 mt-3 w-72 rounded-2xl border border-white/15 bg-[#08172e]/85 backdrop-blur p-2 shadow-2xl"

{servicesItems.map((item) => {

const hasChildren = Boolean(item.children && item.children.length);

if (!hasChildren) {

return (

key={item.href}

href={item.href}

role="menuitem"

className="block px-4 py-3 rounded-xl hover:bg-white/10"

onClick={() => {

setServicesOpen(false);

setServicesAssessmentOpen(false);

}}

{t(item.labelKey)}

</a>

);

}

return (

<button

type="button"

className="w-full px-4 py-3 rounded-xl hover:bg-white/10 flex items-center justify-between"

aria-expanded={servicesAssessmentOpen}

onClick={() => setServicesAssessmentOpen((v) => !v)}

<span>{t(item.labelKey)}</span>

<svg

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 24 24"

width="14"

height="14"

fill="none"

stroke="white"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

aria-hidden="true"

className={servicesAssessmentOpen ? "opacity-90" : "opacity-70"}

</svg>

</button>

{servicesAssessmentOpen && (

{item.children!.map((ch) => (

key={ch.href}

href={ch.href}

role="menuitem"

className="block px-4 py-3 rounded-xl hover:bg-white/10"

onClick={() => {

setServicesOpen(false);

setServicesAssessmentOpen(false);

}}

{t(ch.labelKey)}

</a>

))}

</div>

)}

</div>

);

})}

<button

type="button"

className="w-full text-left px-4 py-3 rounded-xl hover:bg-white/10 text-white/80"

onClick={() => {

setServicesOpen(false);

setServicesAssessmentOpen(false);

}}

{t("nav.close")}

</button>

</div>

)}

</div>

<button

type="button"

className="px-3 py-2 rounded-xl bg-white/15 hover:bg-white/25 inline-flex items-center gap-2"

aria-haspopup="menu"

aria-expanded={membershipOpen}

onClick={() => {

setMembershipOpen((v) => !v);

setServicesOpen(false);

setServicesAssessmentOpen(false);

}}

{t("nav.membership")}

<svg

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 24 24"

width="14"

height="14"

fill="none"

stroke="white"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

aria-hidden="true"

</svg>

</button>

{membershipOpen && (

href="#membership-free"

className="block rounded-xl border border-white/10 bg-white/5 p-4 hover:bg-white/10"

onClick={() => setMembershipOpen(false)}

<div className="text-sm font-semibold">{t("membership.free")}</div>

<div className="mt-1 text-xs text-white/80">Register, no payment required</div>

</a>

href="#membership-pro"

className="block rounded-xl border border-white/10 bg-white/5 p-4 hover:bg-white/10"

onClick={() => setMembershipOpen(false)}

<div className="text-sm font-semibold">{t("membership.pro")}</div>

<div className="mt-1 text-xs text-white/80">Choose currency + billing</div>

</a>

</div>

)}

</div>

</nav>

<button

type="button"

className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white/10 border border-white/15 hover:bg-white/15"

aria-label="Open menu"

aria-expanded={mobileOpen}

onClick={() => setMobileOpen(true)}

<svg

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 24 24"

width="18"

height="18"

fill="none"

stroke="white"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

aria-hidden="true"

</svg>

</button>

</div>

{mobileOpen && (

<button type="button" className="absolute inset-0 bg-black/50" aria-label="Close menu" onClick={() => setMobileOpen(false)} />

<div

className="absolute right-0 top-0 h-full w-[88%] max-w-sm border-l border-white/10 p-5"

style={headerGradientStyle}

role="dialog"

aria-modal="true"

<button

type="button"

className="w-10 h-10 rounded-xl bg-white/10 border border-white/15 hover:bg-white/15 inline-flex items-center justify-center"

aria-label="Close menu"

onClick={() => setMobileOpen(false)}

<svg

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 24 24"

width="18"

height="18"

fill="none"

stroke="white"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

aria-hidden="true"

</svg>

</button>

</div>

<button

type="button"

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15 text-left inline-flex items-center justify-between"

aria-expanded={languageMobileOpen}

onClick={() => setLanguageMobileOpen((v) => !v)}

<span aria-hidden="true">{currentLang.flag}</span>

<span>{t("nav.language")}</span>

</span>

{languageMobileOpen ? "–" : "+"}

</span>

</button>

{languageMobileOpen && (

{LANGUAGES.map((l) => (

<button

key={l.key}

type="button"

className={`px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15 text-left ${

l.key === language ? "ring-1 ring-white/30" : ""

}`}

onClick={() => {

setLanguage(l.key);

setLanguageMobileOpen(false);

}}

</span>

</button>

))}

</div>

)}

{t("nav.home")}

</a>

{t("nav.purpose")}

</a>

href="#education"

onClick={closeAllMenus}

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15"

{t("nav.education")}

</a>

<button

type="button"

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15 text-left inline-flex items-center justify-between"

aria-expanded={servicesMobileOpen}

onClick={() => {

setServicesMobileOpen((v) => !v);

setMembershipOpen(false);

}}

<span>{t("nav.services")}</span>

{servicesMobileOpen ? "–" : "+"}

</span>

</button>

{servicesMobileOpen && (

{servicesItems.map((item) => {

const hasChildren = Boolean(item.children && item.children.length);

if (!hasChildren) {

return (

key={item.href}

href={item.href}

onClick={closeAllMenus}

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15"

{t(item.labelKey)}

</a>

);

}

return (

<button

type="button"

className="w-full px-4 py-3 text-left inline-flex items-center justify-between"

aria-expanded={servicesAssessmentOpen}

onClick={() => setServicesAssessmentOpen((v) => !v)}

<span>{t(item.labelKey)}</span>

{servicesAssessmentOpen ? "–" : "+"}

</span>

</button>

{servicesAssessmentOpen && (

{item.children!.map((ch) => (

key={ch.href}

href={ch.href}

onClick={closeAllMenus}

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15"

{t(ch.labelKey)}

</a>

))}

</div>

)}

</div>

);

})}

</div>

)}

<button

type="button"

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15 text-left inline-flex items-center justify-between"

aria-expanded={membershipOpen}

onClick={() => {

setMembershipOpen((v) => !v);

setServicesMobileOpen(false);

setServicesAssessmentOpen(false);

}}

<span>{t("nav.membership")}</span>

{membershipOpen ? "–" : "+"}

</span>

</button>

{membershipOpen && (

href="#membership-free"

onClick={closeAllMenus}

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15"

{t("membership.free")}

</a>

href="#membership-pro"

onClick={closeAllMenus}

className="px-4 py-3 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15"

{t("membership.pro")}

</a>

</div>

)}

</div>

)}

</header>

);

const MainHomePage = (

<h1 className="text-4xl md:text-6xl leading-tight font-semibold">{t("hero.title")}</h1>

<p className="mt-6 text-lg md:text-xl text-white/90 max-w-2xl">{t("hero.subtitle")}</p>

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="px-6 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

{t("hero.signup")}

</a>

</div>

</div>

</section>

<h2 className="text-3xl md:text-4xl font-semibold">{t("purpose.title")}</h2>

<p className="mt-6 text-lg text-white/90 max-w-4xl">{t("purpose.p1")}</p>

<p className="mt-4 text-lg text-white/85 max-w-4xl">{t("purpose.p2")}</p>

<h3 className="mt-10 text-2xl font-semibold">{t("purpose.educatorsTitle")}</h3>

<p className="mt-4 text-lg text-white/80 max-w-4xl">{t("purpose.educatorsP1")}</p>

<p className="mt-4 text-lg text-white/80 max-w-4xl">{t("purpose.educatorsP2")}</p>

<h3 className="mt-10 text-2xl font-semibold">{t("purpose.missionTitle")}</h3>

<p className="mt-4 text-lg text-white/85 max-w-4xl">{t("purpose.missionBody")}</p>

<h3 className="mt-8 text-2xl font-semibold">{t("purpose.visionTitle")}</h3>

<p className="mt-4 text-lg text-white/85 max-w-4xl">{t("purpose.visionBody")}</p>

</div>

</section>

<h2 className="text-3xl md:text-4xl font-semibold">{t("education.title")}</h2>

<h3 className="text-2xl font-semibold">Specialized Personal Trainer Course</h3>

This is a comprehensive, evidence-based education program designed to elevate personal trainers from competent instructors to confident, results-driven professionals. This course integrates assessment, movement correction, program design, coaching psychology, rehabilitation principles, and nutrition, providing a comprehensive, real-world skill set for working with diverse client populations.

</p>

<div className="text-lg font-medium">Course Modules</div>

<li>1. Client Assessment</li>

<li>2. Corrective Exercise</li>

<li>3. Programming for Results</li>

<li>4. Coaching for Results</li>

<li>5. Resistance Training Concepts</li>

<li>6. Functional Training</li>

<li>7. Fitness Rehabilitation</li>

<li>8. Nutrition: You Are What You Eat</li>

</ul>

</div>

<div className="text-lg font-medium">Investment</div>

<div>

<div className="font-medium">5 Participants</div>

<div>• Total Investment: RM 16,000</div>

<div>• RM 250 per module</div>

<div>• RM 2,000 per trainer</div>

</div>

<div>

<div className="font-medium">6 to 9 Participants</div>

<div>• Total Investment: RM 10,800</div>

<div>• RM 1,800 per trainer</div>

</div>

<div>

<div className="font-medium">10 Participants</div>

<div>• Total Investment: RM 15,000</div>

<div>• RM 1,500 per trainer</div>

</div>

<div>

<div className="font-medium">11 Participants and Above</div>

<div>• Total Investment: RM 15,050</div>

<div>• RM 1,369 per trainer</div>

<div>• Add RM 50 per additional trainer</div>

</div>

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="mt-8 inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

</a>

</div>

</section>

<h2 className="text-3xl md:text-4xl font-semibold">{t("contact.title")}</h2>

<p className="mt-4 text-white/85 max-w-3xl">{t("contact.subtitle")}</p>

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="mt-8 inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

{t("contact.cta")}

</a>

</div>

</section>

</>

);

const PersonalTrainingPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.pt")}</h2>

Back

</a>

</div>

Your fitness journey deserves precision, expertise, and care. Each program is designed to match your goals, your pace, and your

lifestyle — combining strategic coaching, effective training, and professional guidance to deliver real, lasting results.

</p>

Whether you’re beginning your transformation or ready to elevate to the next level, every package offers a personalized experience

focused on performance, balance, and visible progress.

</p>

<div className="text-2xl font-semibold">Personal Training Packages</div>

<div className="mt-2 text-white/80">Tap a package to reveal pricing.</div>

{[

{

key: "pt-8",

title: "8 Sessions (1 Month)",

desc:

"A focused introduction to personal training — designed to activate your body, refine your technique, and ignite your transformation journey. Perfect for those ready to invest in themselves and start seeing real progress within weeks.",

priceLines: ["Investment: €306,00", "Per Session: €39,00"],

{

key: "pt-16",

title: "16 Sessions (2 Months)",

desc:

"A structured two-month experience to shape your body and mindset. Consistent, progressive training helps you tone up, improve endurance, and feel stronger with every session. Your lifestyle upgrade begins here.",

priceLines: ["Investment: €586,00", "Per Session: €37,00"],

{

key: "pt-24",

title: "24 Sessions (3 Months)",

desc:

"A complete transformation program that redefines how you move, feel, and perform. Through strategic training and progressive development, you’ll enhance your body composition and build lasting strength and confidence.",

priceLines: ["Investment: €846,00", "Per Session: €36,00"],

{

key: "pt-20-meal",

title: "20 Sessions (1 Month Express + Meal Plan)",

desc:

"You’re ready to achieve your goal — and this program is built to make it happen. This is a serious, no-excuses one-month personal training plan focused on fast, visible results. Guided sessions combined with a meal plan ensure maximum progress in minimal time. Every detail is precise — no guesswork, only results.",

priceLines: ["Investment: €706,00", "Per Session: €36,00", "Meal Plan Included: €23,00"],

{

key: "pt-40-meal",

title: "40 Sessions (2 Months Express + Meal Plan)",

desc:

"Two months of commitment, focus, and progress. This program is for those who want measurable change and to feel stronger, leaner, and more capable. With full coaching support and a meal plan tailored to your needs, you’ll be guided, challenged, and supported every step of the way.",

priceLines: ["Investment: €1.246,00", "Per Session: €32,00", "Meal Plan Included: €20,00 per month"],

{

key: "pt-60-meal",

title: "60 Sessions (3 Months Express + Meal Plan)",

desc:

"Three months. Total transformation. No shortcuts. This program is created for individuals serious about changing their body, habits, and performance. With expert guidance, structured nutrition, and complete accountability, you’ll achieve the strongest, leanest, and most confident version of yourself — for life.",

priceLines: ["Investment: €1.746,00", "Per Session: €30,00", "Meal Plan Included: €18,00 per month"],

].map((p) => {

const open = ptOpenKey === p.key;

return (

<button

type="button"

className="w-full px-5 py-4 flex items-center justify-between text-left"

aria-expanded={open}

onClick={() => setPtOpenKey((k) => (k === p.key ? null : p.key))}

<div>

<div className="text-base md:text-lg font-medium">{p.title}</div>

<div className="mt-1 text-sm text-white/75">Tap to view details & price</div>

</div>

{open ? "–" : "+"}

</span>

</button>

{open && (

<div className="text-sm font-semibold">Pricing</div>

{p.priceLines.map((line) => (

))}

</ul>

</div>

)}

</div>

);

})}

</div>

<div className="text-xl font-medium">Ready to begin?</div>

Book your Free Full Body Assessment today — including posture, body composition, and movement analysis.

</p>

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="mt-5 inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

Book Assessment via WhatsApp

</a>

</div>

</section>

);

const OnlinePage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.online")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 leading-relaxed max-w-5xl">Online coaching and education will be placed here next. (Content unchanged until you provide it.)</p>

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="mt-8 inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

Enquire on WhatsApp

</a>

</div>

</section>

);

const MentorshipPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.mentorship")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 leading-relaxed max-w-5xl">Mentorship content will live on this dedicated page.</p>

<div className="text-2xl font-semibold">Mentorship Programs</div>

<div className="mt-2 text-white/80">Tap a program to reveal pricing.</div>

{[

{

key: "m1",

title: "Mentorship Level 1",

desc:

"A one-month, twenty-hour mentorship program designed to help you take full control of your fitness journey and build a strong foundation toward your goals.",

priceLines: ["Investment: €968,00"],

{

key: "m2",

title: "Mentorship Level 2",

desc: "A one-month, twenty-hour mentorship for those ready to elevate their results and performance.",

priceLines: ["Investment: €822,00"],

{

key: "m3",

title: "Mentorship Level 3",

desc: "A one-month, twenty-hour advanced mentorship designed for individuals ready to master every aspect of their fitness journey.",

priceLines: ["Investment: €681,00"],

{

key: "mall",

title: "Mentorship All at Once",

desc:

"When you sign up for all three mentorship levels together, you’ll receive the full three-month mentorship journey at a reduced rate.",

priceLines: ["Level 1 – €788,00", "Level 2 – €667,00", "Level 3 – €546,00", "Investment: €2.000,00"],

{

key: "m2p",

title: "Two-Person Option",

desc: "Join with a friend, partner, or family member and experience the journey together.",

priceLines: [

"Level 1 – €536,00",

"Level 2 – €453,00",

"Level 3 – €370,00",

"Investment: €2.716,00",

"Per Person: €1.358,00",

].map((p) => {

const open = mentorOpenKey === p.key;

return (

<button

type="button"

className="w-full px-5 py-4 flex items-center justify-between text-left"

aria-expanded={open}

onClick={() => setMentorOpenKey((k) => (k === p.key ? null : p.key))}

<div>

<div className="text-base md:text-lg font-medium">{p.title}</div>

<div className="mt-1 text-sm text-white/75">Tap to view details & price</div>

</div>

{open ? "–" : "+"}

</span>

</button>

{open && (

<div className="text-sm font-semibold">Pricing</div>

{p.priceLines.map((line) => (

))}

</ul>

</div>

)}

</div>

);

})}

</div>

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="mt-10 inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

Enquire on WhatsApp

</a>

</div>

</section>

);

// Group Classes content (kept separate from I18N because it contains arrays)

type GroupClassItem = { key: string; name: string; desc: string };

type GroupClassCategory = { key: string; title: string; items: GroupClassItem[] };

type GroupClassesPack = { helper: string; categories: GroupClassCategory[] };

const GROUP_CLASSES_EN: GroupClassesPack = {

helper: "Tap a category, then tap a class to read the description.",

categories: [

{

key: "sc",

title: "Strength & Conditioning",

items: [

{

key: "functional",

desc: "Builds real-life strength and movement efficiency for daily activities. Improves mobility, stability, and muscle coordination while allowing freedom of movement.",

{

key: "hiit",

desc: "Short, high-intensity intervals designed for fast results. Improves cardiovascular fitness, burns calories, and boosts metabolism in a time-efficient format.",

{

key: "muscle",

desc: "Focuses on building strong, resilient muscles for longevity and daily performance. Supports posture, joint health, and full-day physical capacity.",

{

key: "circuit",

desc: "A full-body workout combining strength, cardio, and mobility. Structured stations keep intensity high while training the entire body efficiently.",

{

key: "fat",

desc: "Designed to maximise calorie expenditure and fat loss. Combines functional movements and cardiovascular work to improve body composition.",

{

key: "mb",

title: "Mind & Body",

items: [

{

key: "mobility",

desc: "Improves joint range of motion and movement quality. Helps reduce stiffness and supports pain-free daily movement.",

{

key: "balance",

desc: "Enhances postural control and joint stability. Ideal for injury prevention and improving movement confidence.",

{

key: "coordination",

desc: "Unilateral and multi-planar movements to improve brain–muscle connection. Enhances control, efficiency, and overall body coordination.",

{

key: "reedu",

desc: "Teaches correct alignment and movement patterns for optimal results. Improves muscle activation in both simple and complex, multi-tasking movements.",

{

key: "core",

desc: "Develops deep core control to connect upper and lower body. Improves posture, stability, and total-body movement efficiency.",

{

key: "stretch",

desc: "Improves flexibility and recovery. Helps reduce muscle tension and supports long-term mobility.",

{

key: "awareness",

desc: "Enhances awareness of body positioning and movement habits. Supports efficient movement and injury prevention.",

{

key: "tension",

desc: "Focused on releasing physical and mental tension. Promotes recovery, relaxation, and nervous system balance.",

{

key: "dance",

title: "Dance",

items: [

{

key: "freedom",

desc: "A fun and dynamic class that Improves coordination, musicality, and cardio fitness in a fun format.. Choose the song that you like from any style and will create a choreography to express and feel freedom through movement. Latin, Hip-Hop, Pop, K-Pop, Sensual or Bollywood.",

{

key: "pre",

desc: "A high-energy calorie burn class using ten different dance styles (k-pop, Latin, Bollywood …) to elevate heart rate and feel like a true dancer.",

};

// For now, all languages show the exact same Group Class text (your English master copy).

const GROUP_CLASSES: Record<LanguageKey, GroupClassesPack> = Object.fromEntries(

LANGUAGES.map((l) => [l.key, GROUP_CLASSES_EN])

) as Record<LanguageKey, GroupClassesPack>;

const getGroupPack = (lang: LanguageKey): GroupClassesPack => GROUP_CLASSES[lang] || GROUP_CLASSES.en;

const GroupClassesPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.group")}</h2>

</div>

<div className="text-2xl font-semibold">{t("services.group")}</div>

<div className="mt-2 text-white/80">{getGroupPack(language).helper}</div>

{getGroupPack(language).categories.map((cat) => {

const catOpen = gcCategoryOpenKey === cat.key;

return (

<button

type="button"

className="w-full px-5 py-4 flex items-center justify-between text-left"

aria-expanded={catOpen}

onClick={() => {

setGcCategoryOpenKey((k) => (k === cat.key ? null : cat.key));

setGcItemOpenKey(null);

}}

<div className="text-base md:text-lg font-medium">{cat.title}</div>

<span className={catOpen ? "opacity-90" : "opacity-70"} aria-hidden="true">{catOpen ? "–" : "+"}</span>

</button>

{catOpen && (

{cat.items.map((it) => {

const open = gcItemOpenKey === it.key;

return (

<button

type="button"

className="w-full px-4 py-3 flex items-center justify-between text-left"

aria-expanded={open}

onClick={() => setGcItemOpenKey((k) => (k === it.key ? null : it.key))}

</button>

{open && (

</div>

)}

</div>

);

})}

</div>

)}

</div>

);

})}

</div>

</section>

);

const CorporateWellnessPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.corporate")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 max-w-5xl leading-relaxed">Content will be placed here next.</p>

</div>

</section>

);

const BodyAssessmentPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.assessment")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 max-w-5xl leading-relaxed">Select Basic or Complete from the Services menu.</p>

</div>

</section>

);

const BasicAssessmentPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.assessment.basic")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 max-w-5xl leading-relaxed">Content will be placed here next.</p>

</div>

</section>

);

const CompleteAssessmentPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("services.assessment.complete")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 max-w-5xl leading-relaxed">Content will be placed here next.</p>

</div>

</section>

);

const MembershipFreePage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("membership.free")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 max-w-5xl leading-relaxed">Register to access basic content and updates.</p>

href="#membership-free-form"

className="mt-8 inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

onClick={closeAllMenus}

{t("membership.register")}

</a>

</div>

</section>

);

const MembershipProPage = (

<h2 className="text-3xl md:text-4xl font-semibold">{t("membership.pro")}</h2>

Back

</a>

</div>

<p className="mt-6 text-white/85 max-w-5xl leading-relaxed">Choose your currency and billing option. Then continue to registration.</p>

<div className="text-lg font-medium">Plan options</div>

<div className="text-sm text-white/80">Currency</div>

{(["EUR", "MYR"] as Currency[]).map((c) => {

const active = proCurrency === c;

return (

<button

key={c}

type="button"

className={`px-4 py-2 rounded-xl border border-white/15 ${active ? "bg-white/15" : "bg-white/5 hover:bg-white/10"}`}

onClick={() => setProCurrency(c)}

{c}

</button>

);

})}

</div>

<div className="text-sm text-white/80">Billing</div>

{(["monthly", "six", "twelve"] as Cadence[]).map((cad) => {

const active = proCadence === cad;

const meta = PRO_PRICING[proCurrency][cad];

return (

<button

key={cad}

type="button"

className={`w-full px-4 py-3 rounded-xl border border-white/15 text-left ${

active ? "bg-white/15" : "bg-white/5 hover:bg-white/10"

}`}

onClick={() => setProCadence(cad)}

<span className="text-sm font-semibold">{meta.label}</span>

<span className="text-sm text-white/85">{meta.amountDisplay}</span>

</div>

</button>

);

})}

</div>

<div className="text-sm text-white/80">Selected</div>

{proCurrency} · {PRO_PRICING[proCurrency][proCadence].label} · {PRO_PRICING[proCurrency][proCadence].amountDisplay}

</div>

href="#membership-pro-form"

className="mt-6 inline-flex w-full justify-center px-4 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

{t("membership.continue")}

</a>

</div>

</section>

);

const MembershipFormPage = (

plan: "free" | "pro",

state: MembershipFormState,

setState: React.Dispatch<React.SetStateAction<MembershipFormState>>,

onSubmit: () => void

) => {

const title = plan === "free" ? t("membership.free") : t("membership.pro");

const nextHash = plan === "free" ? "#payment-free" : "#payment-pro";

const selectedMeta = plan === "pro" ? PRO_PRICING[proCurrency][proCadence] : null;

return (

<h2 className="text-3xl md:text-4xl font-semibold">{title} · Registration</h2>

Back

</a>

</div>

Fill in your details below. After you click Register, you will be taken to the payment page.

</p>

{plan === "pro" && selectedMeta && (

<div className="text-sm text-white/80">Professional Membership selection</div>

{proCurrency} · {selectedMeta.label} · {selectedMeta.amountDisplay}

</div>

)}

<form

className="mt-10 grid md:grid-cols-2 gap-6 max-w-4xl"

onSubmit={(e) => {

e.preventDefault();

onSubmit();

window.location.hash = nextHash;

closeAllMenus();

}}

<div>

<label className="block text-sm text-white/80 mb-2">First Name</label>

<input

required

value={state.firstName}

onChange={(e) => setState((s) => ({ ...s, firstName: e.target.value }))}

placeholder="First name"

className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 outline-none"

autoComplete="given-name"

</div>

<div>

<input

required

value={state.lastName}

onChange={(e) => setState((s) => ({ ...s, lastName: e.target.value }))}

placeholder="Last name"

className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 outline-none"

autoComplete="family-name"

</div>

<div>

<label className="block text-sm text-white/80 mb-2">Email</label>

<input

required

type="email"

value={state.email}

onChange={(e) => setState((s) => ({ ...s, email: e.target.value }))}

placeholder="Email"

className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 outline-none"

autoComplete="email"

</div>

<div>

<label className="block text-sm text-white/80 mb-2">Phone</label>

<input

required

value={state.phone}

onChange={(e) => setState((s) => ({ ...s, phone: e.target.value }))}

placeholder="Phone"

className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 outline-none"

autoComplete="tel"

</div>

<label className="block text-sm text-white/80 mb-2">Address</label>

<textarea

required

value={state.address}

onChange={(e) => setState((s) => ({ ...s, address: e.target.value }))}

placeholder="Full address"

className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 outline-none h-32"

autoComplete="street-address"

</div>

<button

type="submit"

className="md:col-span-2 w-max px-6 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

{t("membership.register")}

</button>

</form>

</div>

</section>

);

};

const PaymentPage = (plan: "free" | "pro") => {

const title = plan === "free" ? t("membership.free") : t("membership.pro");

const isReady = plan === "free" ? freeSubmitted : proSubmitted;

const proSelected = PRO_PRICING[proCurrency][proCadence];

const amount = plan === "free" ? "€0,00" : proSelected.amountDisplay;

const checkoutUrl = plan === "free" ? "" : STRIPE_PAYMENT_LINKS[proCurrency][proCadence];

const checkoutReady = plan === "free" ? true : Boolean(checkoutUrl && checkoutUrl.trim().length > 0);

return (

<h2 className="text-3xl md:text-4xl font-semibold">Payment · {title}</h2>

Back

</a>

</div>

{!isReady ? (

<div className="text-lg font-medium">Registration required</div>

<p className="mt-2 text-white/85">Please complete the registration form first. Then return to this payment page.</p>

href={plan === "free" ? "#membership-free-form" : "#membership-pro-form"}

className="mt-6 inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

Go to Registration

</a>

</div>

) : (

{plan === "pro" && (

<div className="text-sm text-white/80">Selected plan</div>

{proCurrency} · {proSelected.label} · {proSelected.amountDisplay}

</div>

)}

<div className="text-lg font-medium">Amount due: {amount}</div>

{plan === "free"

? "No payment is required. You can finish registration now."

: "Proceed to secure checkout. If checkout is not connected yet, paste your Stripe Payment Link in STRIPE_PAYMENT_LINKS."}

</p>

{plan === "free" ? (

<button

type="button"

className="px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90"

style={menuButtonStyle}

onClick={() => alert("Registration complete. We will connect email confirmations next.")}

Finish Registration

</button>

) : (

href={checkoutReady ? checkoutUrl : undefined}

target={checkoutReady ? "_blank" : undefined}

rel={checkoutReady ? "noreferrer" : undefined}

className={`px-5 py-3 rounded-xl font-semibold text-white shadow-lg text-center ${

checkoutReady ? "hover:opacity-90" : "opacity-60 cursor-not-allowed"

}`}

style={menuButtonStyle}

onClick={(e) => {

if (!checkoutReady) {

e.preventDefault();

alert("Stripe checkout link not connected yet. Paste your Stripe Payment Link into STRIPE_PAYMENT_LINKS.");

}

}}

Proceed to Stripe Checkout

</a>

)}

href={buildWhatsAppUrl("01-327-249-56")}

target="_blank"

rel="noreferrer"

className="px-5 py-3 rounded-xl font-semibold text-white shadow-lg hover:opacity-90 text-center"

style={menuButtonStyle}

Confirm via WhatsApp

</a>

</div>

)}

</div>

</section>

);

};

const PageBody =

page === "pt"

? PersonalTrainingPage

: page === "online"

? OnlinePage

: page === "mentorship"

? MentorshipPage

: page === "group-classes"

? GroupClassesPage

: page === "corporate-wellness"

? CorporateWellnessPage

: page === "body-assessment"

? BodyAssessmentPage

: page === "assessment-basic"

? BasicAssessmentPage

: page === "assessment-complete"

? CompleteAssessmentPage

: page === "membership-free"

? MembershipFreePage

: page === "membership-pro"

? MembershipProPage

: page === "membership-free-form"

? MembershipFormPage("free", freeForm, setFreeForm, () => setFreeSubmitted(true))

: page === "membership-pro-form"

? MembershipFormPage("pro", proForm, setProForm, () => setProSubmitted(true))

: page === "payment-free"

? PaymentPage("free")

: page === "payment-pro"

? PaymentPage("pro")

: MainHomePage;

return (

{TopNav}

{PageBody}

</footer>

</div>

);

}