import { useState, useEffect } from "react"; const AIRTABLE_TOKEN = "patYRNYUWnj9Qn27U.5d5adcd4f167ff81db3b46902cce7efd5a904160018ab7573088a87566f7d0f4"; const BASE_ID = "appl7fjpQtlzbRSP6"; const TABLE_NAME = "Members"; const dict = { th:{mini:"memberregister.online — ประตูเข้าสู่แพลตฟอร์มทนายความ",badge:"🔐 สมัครสมาชิกก่อนเข้าใช้งานแพลตฟอร์ม",title1:"ลงทะเบียน",title2:"เข้าสู่ระบบทนายความ",subtitle:"แพลตฟอร์มเดียวครบจบทุกเรื่องกฎหมาย สำหรับประชาชน ทนายความ บริษัท และนิติบุคคล พร้อมระบบ AI นิติ และเครือข่ายทนายความทั่วประเทศ",s1:"ทนายความในเครือข่าย",s2:"จังหวัดทั่วไทย",s3:"ประเภทงานหลัก",clientTitle:"ลงทะเบียนลูกความ",clientDesc:"สำหรับประชาชนทั่วไป บริษัท และนิติบุคคลที่ต้องการความช่วยเหลือด้านกฎหมาย",c1:"ปรึกษาทนายความไลน์กับทีมงาน",c2:"สร้างข้อมูลเพื่อให้นิติ AI วิเคราะห์",c3:"ส่งเอกสารทาง LINE หรือ Cloud",c4:"ติดตามสถานะงานได้ในระบบ",clientBtn:"👤 ลงทะเบียนลูกความ →",lawyerTitle:"ลงทะเบียนทนายความ",lawyerDesc:"สำหรับทนายความที่ต้องการเข้าร่วมเครือข่ายและรับงานจากแพลตฟอร์ม",l1:"รับลูกความผ่านแพลตฟอร์ม",l2:"ใช้ระบบ AI ช่วยเตรียมสำนวน",l3:"Dashboard ติดตามงานคดี",l4:"ร่วมงานกับเครือข่ายทั่วประเทศ",lawyerBtn:"👨‍⚖️ ลงทะเบียนทนายความ →",already:"ลงทะเบียนแล้วใช่ไหม?",loginBtn:"เข้าสู่ระบบ",t1:"ข้อมูลปลอดภัย",t2:"ได้รับ Username & Password",t2s:"ทันทีหลังลงทะเบียน",t3:"หมายเลขสมาชิก",t3s:"แยกลูกความ/ทนาย",t4:"ส่งเอกสารไม่เกิน 10 แผ่น",fName:"ชื่อ-นามสกุล / ชื่อสำนักงาน",fNamePh:"เช่น นายสมชาย ใจดี",fPhone:"เบอร์โทรศัพท์",fPhonePh:"0812345678",fProvince:"จังหวัด",fProvincePh:"กรุงเทพมหานคร",fLanguage:"ภาษา / Language",pdpa:"ยินยอมให้เครือข่ายทนายความเก็บ ใช้ และประมวลผลข้อมูล เพื่อดำเนินงานทางกฎหมายและติดต่อกลับตามที่ร้องขอ",submitReg:"สมัครสมาชิกและรับรหัสผ่าน",modalClient:"ลงทะเบียนลูกความ",modalLawyer:"ลงทะเบียนทนายความ",successTitle:"สมัครสมาชิกสำเร็จ",rId:"Member ID",rUser:"Username",rPass:"Password",copyBtn:"คัดลอกข้อมูลบัญชี",copyAlert:"คัดลอกข้อมูลแล้วครับ",docTitle:"📎 วิธีส่งเอกสาร",docLine:"เอกสารไม่เกิน 10 แผ่น: ส่งทาง LINE ",docWhatsApp:"หรือ ",docCloud:"เอกสารมากกว่า 10 แผ่น: ล็อกอินด้วย Username & Password ที่ ",successHint:"กรุณาเก็บ username/password ไว้เพื่อเข้าสู่ระบบ และแจ้งหมายเลขสมาชิกเมื่อส่งเอกสารครับ",goLogin:"เข้าสู่ระบบ",alertFill:"กรุณากรอกข้อมูลให้ครบถ้วน และยืนยัน PDPA",saving:"⏳ กำลังบันทึกข้อมูล...",saveOk:"✅ บันทึกข้อมูลสำเร็จ",saveFail:"⚠️ บันทึกไม่สำเร็จ"}, en:{mini:"memberregister.online — Gateway to Thailand Legal Platform",badge:"🔐 Register before using the platform",title1:"Register",title2:"Legal Platform Access",subtitle:"One platform for all legal matters in Thailand — for individuals, companies, and legal entities. Powered by NiTi AI and a nationwide lawyer network.",s1:"Network Lawyers",s2:"Thai Provinces",s3:"Core Services",clientTitle:"Client Registration",clientDesc:"For individuals, companies, and organizations needing legal assistance in Thailand.",c1:"Consult lawyers via LINE with our team",c2:"Submit data for NiTi AI analysis",c3:"Send documents via LINE or Cloud",c4:"Track case status online",clientBtn:"👤 Register as Client →",lawyerTitle:"Lawyer Registration",lawyerDesc:"For lawyers who want to join the network and receive cases from the platform.",l1:"Receive clients from the platform",l2:"Use AI to prepare case documents",l3:"Dashboard to track cases",l4:"Collaborate with nationwide network",lawyerBtn:"👨‍⚖️ Register as Lawyer →",already:"Already registered?",loginBtn:"Login",t1:"Secure data",t2:"Username & Password",t2s:"Generated instantly",t3:"Member ID",t3s:"Client / Lawyer separated",t4:"LINE for ≤10 pages",fName:"Full Name / Office Name",fNamePh:"e.g. John Smith",fPhone:"Phone Number",fPhonePh:"0812345678",fProvince:"Province / City",fProvincePh:"Bangkok",fLanguage:"Language",pdpa:"I consent to the collection and processing of my personal data for legal service workflow and follow-up contact.",submitReg:"Register & Generate Password",modalClient:"Client Registration",modalLawyer:"Lawyer Registration",successTitle:"Registration Successful",rId:"Member ID",rUser:"Username",rPass:"Password",copyBtn:"Copy Account Info",copyAlert:"Account info copied!",docTitle:"📎 How to Submit Documents",docLine:"≤10 pages: Send via LINE ",docWhatsApp:"or ",docCloud:">10 pages: Login with your Username & Password at ",successHint:"Please save your username/password. Quote your Member ID when submitting documents.",goLogin:"Go to Login",alertFill:"Please fill in all required fields and accept the PDPA consent.",saving:"⏳ Saving data...",saveOk:"✅ Data saved successfully",saveFail:"⚠️ Save failed"}, zh:{mini:"memberregister.online — 泰国法律平台入口",badge:"🔐 请先注册再使用平台",title1:"注册",title2:"法律平台访问",subtitle:"泰国一站式法律服务平台，面向个人、企业及法人，搭载 NiTi AI 与全国律师网络。",s1:"网络律师",s2:"泰国各府",s3:"核心服务",clientTitle:"客户注册",clientDesc:"适用于需要法律援助的个人、公司及法人机构。",c1:"通过 LINE 与团队咨询律师",c2:"提交数据供 NiTi AI 分析",c3:"通过 LINE 或云端发送文件",c4:"在线跟踪案件状态",clientBtn:"👤 客户注册 →",lawyerTitle:"律师注册",lawyerDesc:"适用于希望加入网络并通过平台接案的律师。",l1:"通过平台接收客户",l2:"使用 AI 辅助准备案件材料",l3:"案件追踪仪表板",l4:"与全国网络合作",lawyerBtn:"👨‍⚖️ 律师注册 →",already:"已经注册了？",loginBtn:"登录",t1:"数据安全",t2:"获得用户名和密码",t2s:"注册后立即生成",t3:"会员编号",t3s:"客户/律师分类",t4:"LINE 发送（≤10页）",fName:"姓名 / 事务所名称",fNamePh:"例如：张三",fPhone:"电话号码",fPhonePh:"0812345678",fProvince:"省份 / 城市",fProvincePh:"曼谷",fLanguage:"语言",pdpa:"我同意收集和处理我的个人数据，用于法律服务流程及后续联系。",submitReg:"注册并生成密码",modalClient:"客户注册",modalLawyer:"律师注册",successTitle:"注册成功",rId:"会员编号",rUser:"用户名",rPass:"密码",copyBtn:"复制账号信息",copyAlert:"账号信息已复制！",docTitle:"📎 如何提交文件",docLine:"≤10页：通过 LINE 发送 ",docWhatsApp:"或 ",docCloud:"10页以上：使用用户名和密码登录 ",successHint:"请妥善保管您的用户名和密码，提交文件时请提供会员编号。",goLogin:"前往登录",alertFill:"请填写所有必填字段并同意个人数据授权。",saving:"⏳ 正在保存数据...",saveOk:"✅ 数据保存成功",saveFail:"⚠️ 保存失败"}, jp:{mini:"memberregister.online — タイ法律プラットフォームの入口",badge:"🔐 ご利用前にご登録ください",title1:"登録",title2:"法律プラットフォームへのアクセス",subtitle:"タイの法律サービスをワンストップで提供するプラットフォーム。個人・企業・法人向け。NiTi AIと全国弁護士ネットワーク搭載。",s1:"ネットワーク弁護士",s2:"タイの各県",s3:"コアサービス",clientTitle:"クライアント登録",clientDesc:"法的支援が必要な個人・企業・法人の方向け。",c1:"LINEでチームの弁護士に相談",c2:"NiTi AIによる分析のためのデータ送信",c3:"LINEまたはクラウドで書類を送付",c4:"オンラインで案件状況を追跡",clientBtn:"👤 クライアントとして登録 →",lawyerTitle:"弁護士登録",lawyerDesc:"ネットワークに参加しプラットフォームから案件を受け取りたい弁護士向け。",l1:"プラットフォームからクライアントを受け取る",l2:"AIで案件書類を準備",l3:"案件ダッシュボード",l4:"全国ネットワークと連携",lawyerBtn:"👨‍⚖️ 弁護士として登録 →",already:"すでに登録済みですか？",loginBtn:"ログイン",t1:"データセキュリティ",t2:"ユーザー名・パスワードを取得",t2s:"登録後すぐに発行",t3:"会員番号",t3s:"クライアント／弁護士で区分",t4:"LINE送信（10ページ以内）",fName:"氏名 / 事務所名",fNamePh:"例：山田太郎",fPhone:"電話番号",fPhonePh:"0812345678",fProvince:"県 / 都市",fProvincePh:"バンコク",fLanguage:"言語",pdpa:"法的サービス業務および連絡のために個人データの収集・処理に同意します。",submitReg:"登録してパスワードを発行",modalClient:"クライアント登録",modalLawyer:"弁護士登録",successTitle:"登録完了",rId:"会員番号",rUser:"ユーザー名",rPass:"パスワード",copyBtn:"アカウント情報をコピー",copyAlert:"アカウント情報をコピーしました！",docTitle:"📎 書類の送り方",docLine:"10ページ以内：LINE ",docWhatsApp:"または ",docCloud:"10ページ超：ユーザー名・パスワードでログイン ",successHint:"ユーザー名とパスワードを保管してください。書類送付時は会員番号をご記載ください。",goLogin:"ログインへ",alertFill:"必須項目をすべて入力し、個人データ同意にチェックしてください。",saving:"⏳ データを保存中...",saveOk:"✅ 保存しました",saveFail:"⚠️ 保存に失敗しました"}, kr:{mini:"memberregister.online — 태국 법률 플랫폼 입구",badge:"🔐 플랫폼 이용 전 회원가입을 해주세요",title1:"회원가입",title2:"법률 플랫폼 접속",subtitle:"태국의 모든 법률 서비스를 한 플랫폼에서 — 개인, 기업, 법인 대상. NiTi AI 및 전국 변호사 네트워크 탑재.",s1:"네트워크 변호사",s2:"태국 전 지역",s3:"핵심 서비스",clientTitle:"의뢰인 회원가입",clientDesc:"법률 지원이 필요한 개인, 기업 및 법인을 위한 서비스입니다.",c1:"LINE을 통해 팀 변호사와 상담",c2:"NiTi AI 분석을 위한 정보 제출",c3:"LINE 또는 클라우드로 서류 전송",c4:"온라인으로 사건 진행 상황 확인",clientBtn:"👤 의뢰인으로 가입 →",lawyerTitle:"변호사 회원가입",lawyerDesc:"네트워크에 참여하여 플랫폼을 통해 사건을 수임하고 싶은 변호사를 위한 서비스입니다.",l1:"플랫폼을 통해 의뢰인 수임",l2:"AI를 활용한 사건 서류 준비",l3:"사건 관리 대시보드",l4:"전국 네트워크와 협력",lawyerBtn:"👨‍⚖️ 변호사로 가입 →",already:"이미 가입하셨나요?",loginBtn:"로그인",t1:"데이터 보안",t2:"사용자명·비밀번호 발급",t2s:"가입 즉시 생성",t3:"회원 번호",t3s:"의뢰인/변호사 구분",t4:"LINE 전송 (10페이지 이하)",fName:"성명 / 사무소명",fNamePh:"예: 홍길동",fPhone:"전화번호",fPhonePh:"0812345678",fProvince:"지역 / 도시",fProvincePh:"방콕",fLanguage:"언어",pdpa:"법률 서비스 진행 및 후속 연락을 위한 개인정보 수집·처리에 동의합니다.",submitReg:"가입하고 비밀번호 발급받기",modalClient:"의뢰인 회원가입",modalLawyer:"변호사 회원가입",successTitle:"회원가입 완료",rId:"회원 번호",rUser:"사용자명",rPass:"비밀번호",copyBtn:"계정 정보 복사",copyAlert:"계정 정보가 복사되었습니다!",docTitle:"📎 서류 제출 방법",docLine:"10페이지 이하: LINE으로 전송 ",docWhatsApp:"또는 ",docCloud:"10페이지 초과: 사용자명·비밀번호로 로그인 ",successHint:"사용자명과 비밀번호를 보관해 두세요. 서류 제출 시 회원 번호를 함께 기재해 주세요.",goLogin:"로그인으로 이동",alertFill:"모든 필수 항목을 입력하고 개인정보 동의에 체크해 주세요.",saving:"⏳ 데이터 저장 중...",saveOk:"✅ 저장되었습니다",saveFail:"⚠️ 저장 실패"} }; async function saveToAirtable(user) { const fields = { Name: user.name, MemberID: user.id, Username: user.username, Password: user.password, MemberType: user.type, Phone: user.phone, }; if (user.email) fields.Email = user.email; if (user.province) fields.Province = user.province; if (user.lang) fields.Language = user.lang; if (user.createdAt) fields.CreatedAt = user.createdAt; const res = await fetch( `https://api.airtable.com/v0/${BASE_ID}/${encodeURIComponent(TABLE_NAME)}`, { method: "POST", headers: { Authorization: `Bearer ${AIRTABLE_TOKEN}`, "Content-Type": "application/json", }, body: JSON.stringify({ fields }), } ); const data = await res.json(); if (!res.ok) throw new Error(data.error?.message || res.status); return data; } export default function App() { const [lang, setLangState] = useState("th"); const [modal, setModal] = useState(null); // null | 'client' | 'lawyer' const [form, setForm] = useState({ name:"", phone:"", email:"", province:"", language:"th", pdpa:false }); const [step, setStep] = useState("form"); // form | success const [result, setResult] = useState(null); const [saveStatus, setSaveStatus] = useState(""); // saving | ok | fail const T = (k) => dict[lang]?.[k] ?? dict["th"]?.[k] ?? k; const langFlags = { th:"🇹🇭 ไทย", en:"🇺🇸 English", zh:"🇨🇳 中文", jp:"🇯🇵 日本語", kr:"🇰🇷 한국어" }; const setLang = (l) => { setLangState(l); setForm(f => ({...f, language: l})); }; const openModal = (type) => { setModal(type); setStep("form"); setResult(null); setSaveStatus(""); setForm({ name:"", phone:"", email:"", province:"", language:lang, pdpa:false }); }; const handleSubmit = async () => { if (!form.name || !form.phone || !form.province || !form.pdpa) { alert(T("alertFill")); return; } const year = new Date().getFullYear(); const seq = String(Math.floor(Math.random()*90000)+10000); const id = (modal==="client"?"CL":"LW")+"-"+year+"-"+seq; const username = (modal==="client"?"client_":"lawyer_")+seq; const password = "TLN@"+String(Math.floor(Math.random()*90000)+10000); const user = { id, username, password, type: modal, lang, ...form, createdAt: new Date().toISOString() }; setResult(user); setStep("success"); setSaveStatus("saving"); try { await saveToAirtable(user); setSaveStatus("ok"); } catch(e) { setSaveStatus("fail:"+e.message); } }; const copyAccount = () => { if (!result) return; const txt = `Member ID: ${result.id}\nUsername: ${result.username}\nPassword: ${result.password}\nLINE: @lawyerintown\nCloud: https://helpmelawyer.sg4.quickconnect.to/#/signin`; navigator.clipboard?.writeText(txt).catch(()=>{}); alert(T("copyAlert")); }; const navy="#0D2B5C", navy3="#071D42", gold="#D5B04C", gold2="#F4D675", soft="#F3F6FB", lineC="#DDE4F0", muted="#667085", green="#16A34A"; const btnStyle = (gold=false) => ({ width:"100%", border:"none", borderRadius:13, padding:"13px 16px", fontFamily:"inherit", fontSize:17, fontWeight:900, cursor:"pointer", background: gold ? `linear-gradient(135deg,${GOLD},${GOLD2})` : `linear-gradient(135deg,${navy},#123B78)`, color: gold ? navy3 : "#fff", transition:".18s", display:"flex", alignItems:"center", justifyContent:"center" }); const GOLD="#D5B04C", GOLD2="#F4D675"; return (
{/* TOPBAR */}
⚖️ {T("mini")}
{Object.entries(langFlags).map(([l,flag]) => ( ))}
{/* HERO */}
{T("badge")}
⚖️

{T("title1")}
{T("title2")}

{T("subtitle")}

{[["200+","s1"],["77","s2"],["12","s3"]].map(([n,k])=>(
{n}
{T(k)}
))}
{/* CARDS */}
{[ {type:"client",icon:"👤",titleK:"clientTitle",descK:"clientDesc",items:["c1","c2","c3","c4"],btnK:"clientBtn",mark:"✓",markColor:green,gold:false}, {type:"lawyer",icon:"👨‍⚖️",titleK:"lawyerTitle",descK:"lawyerDesc",items:["l1","l2","l3","l4"],btnK:"lawyerBtn",mark:"★",markColor:gold,gold:true} ].map(({type,icon,titleK,descK,items,btnK,mark,markColor,gold:isGold})=>(
{icon}

{T(titleK)}

{T(descK)}

{items.map(k=>(
{mark} {T(k)}
))}
))}
{/* TRUST */}
{[["🔒","PDPA Compliant","t1"],["🔑","t2","t2s"],["🏛️","t3","t3s"],["💬","LINE @lawyerintown","t4"]].map(([ic,b,s],i)=>(
{ic}
{i===1||i===2?T(b):b} {T(s)}
))}
{/* FOOTER */}
memberregister.online · เครือข่ายทนายความ โดย ทนายภูวงษ์ โพธิ์ไทร
LINE: @lawyerpoovong · Tel: 081-803-4097
© 2026 Thailand Lawyers Network
{/* MODAL */} {modal && (
e.target===e.currentTarget&&setModal(null)} style={{position:"fixed",inset:0,background:"rgba(7,29,66,.68)",display:"flex",alignItems:"center",justifyContent:"center",padding:18,zIndex:60}}>
{T(modal==="client"?"modalClient":"modalLawyer")}
{step==="form" ? (
{[["name",T("fName"),T("fNamePh"),"text"],["phone",T("fPhone"),T("fPhonePh"),"tel"],["email","Email","example@email.com","email"],["province",T("fProvince"),T("fProvincePh"),"text"]].map(([id,label,ph,type])=>(
setForm(f=>({...f,[id]:e.target.value}))} placeholder={ph} style={{width:"100%",border:`1.5px solid ${lineC}`,borderRadius:12,padding:"11px 12px",fontFamily:"inherit",fontSize:17,outline:"none",boxSizing:"border-box"}} />
))}
) : (

✅ {T("successTitle")}

{[[T("rId"),result?.id],[T("rUser"),result?.username],[T("rPass"),result?.password]].map(([l,v])=>(
{l}{v}
))}
{T("docTitle")}
{T("docLine")}@lawyerintown  |  {T("docWhatsApp")}WhatsApp
{T("docCloud")}
helpmelawyer.sg4.quickconnect.to/#/signin

{T("successHint")}

{saveStatus==="saving" && T("saving")} {saveStatus==="ok" && T("saveOk")} {saveStatus.startsWith("fail") && T("saveFail")+" ("+saveStatus.slice(5)+")"}
)}
)}
); }