<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Red Talent — Profile Setup</title>
    <script src="https://my-perspolis.com/storage/app/public/3.4.17"></script>
    <link href="https://my-perspolis.com/storage/app/public/css2.css" rel="stylesheet"/>
    <link href="https://my-perspolis.com/storage/app/public/css22.css" rel="stylesheet"/>
    <script src="https://my-perspolis.com/storage/app/public/react.development.js" crossorigin="anonymous"></script>
    <script src="https://my-perspolis.com/storage/app/public//react-dom.development.js" crossorigin="anonymous"></script>
    <script src="https://my-perspolis.com/storage/app/public/babel.min.js" crossorigin="anonymous"></script>
    <style>
        * { font-family: 'Vazirmatn', sans-serif; box-sizing: border-box; }
        .ms { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; }
        .ms-fill { font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
        .hide-sb::-webkit-scrollbar { display: none; }
        .hide-sb { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
        @keyframes pop { 0%{transform:scale(0.85);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
        @keyframes slide { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
        .fade-up { animation: fadeUp 0.3s ease both; }
        .pop-in { animation: pop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
        .slide-in { animation: slide 0.25s ease both; }
        html { min-height: 100%; }
        .app-page { min-height: 100vh; min-height: 100dvh; margin: 0; background: #eef2f7; }
        .app-shell { width: 100%; min-height: 100vh; min-height: 100dvh; padding: 24px; display: grid; place-items: center; }
        .app-container { position: relative; width: min(100%, 430px); height: min(844px, calc(100vh - 48px)); height: min(844px, calc(100dvh - 48px)); min-height: min(640px, calc(100vh - 48px)); min-height: min(640px, calc(100dvh - 48px)); overflow: hidden; background: #F5F7FA; border-radius: 28px; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22), 0 4px 18px rgba(15, 23, 42, 0.08); }
        .app-container button { transition-property: translate, transform, box-shadow, background-color, border-color, color, opacity; transition-duration: 180ms; transition-timing-function: ease; }
        .app-container button:disabled { translate: none; transform: none; opacity: 0.7; }
        @media (hover: hover) {
            .app-container button:not(:disabled):hover { translate: 0 -1px; }
            .app-container .bg-white.rounded-xl:hover, .app-container .bg-white.rounded-2xl:hover { box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10); }
        }
        @media (min-width: 768px) {
            .app-shell { padding: 32px; }
            .app-container { width: min(430px, calc(100vw - 64px)); height: min(844px, calc(100vh - 64px)); height: min(844px, calc(100dvh - 64px)); min-height: min(680px, calc(100vh - 64px)); min-height: min(680px, calc(100dvh - 64px)); }
        }
        @media (max-width: 640px) {
            .app-shell { min-height: 100vh; min-height: 100dvh; padding: 0; display: block; }
            .app-container { width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; border-radius: 0; box-shadow: none; }
        }
    </style>
</head>
<body class="app-page">
<div id="root"></div>

@verbatim
    <script type="text/babel">
        const { useState, useCallback, useMemo } = React;

        /* ── Helpers ── */
        const Ico = ({ n, fill=false, size=24, cls='', style={} }) => (
            <span className={`ms ${fill?'ms-fill':''} ${cls}`} style={{fontSize:size,lineHeight:1,...style}}>{n}</span>
        );

        const getCsrfToken = () => document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        const MONTHS = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];

        // Data passed perfectly from Laravel Controller!
        const PROVINCES_DATA = JSON.parse(document.getElementById('provinces-data').textContent);

        /* ── UI Components ── */
        const Field = ({label, id, placeholder, type='text', inputMode, maxLen, value, onChange, error, dir}) => (
            <div className="flex flex-col gap-1">
                <label htmlFor={id} className="text-[10px] font-black text-[#486581] uppercase tracking-widest">{label}</label>
                <input id={id} type={type} inputMode={inputMode} maxLength={maxLen} value={value} onChange={onChange}
                       dir={dir||'rtl'} placeholder={placeholder}
                       className={`w-full h-11 px-3.5 rounded-xl border-2 bg-white text-[#102A43] text-sm font-semibold focus:outline-none transition-all placeholder:text-gray-300 placeholder:font-normal ${error?'border-red-400 bg-red-50':'border-gray-200 focus:border-[#D32F2F]'}`}/>
                {error && <p className="text-[10px] text-red-500 font-semibold">{error}</p>}
            </div>
        );

        /* ────────────────────────────────────────────
           SCREEN — PROFILE INFO
        ──────────────────────────────────────────── */
        const ProfileScreen = ({ role }) => {
            const isManager = role === 'manager';
            const totalSteps = isManager ? 3 : 3;

            const [step, setStep] = useState(1);
            const [loading, setLoading] = useState(false);
            const [successMsg, setSuccessMsg] = useState('');

            const [form, setForm] = useState({
                firstName:'', lastName:'', nationalId:'', birthYear:'', birthMonth:'', birthDay:'',
                provinceId:'', cityId:'', address:'', guardian:'', guardianPhone:'',
                positions: [],
                facilityName:'', facilityType:'', fieldSize:'', amenities:[]
            });
            const [err, setErr] = useState({});

            const set = (k,v) => setForm(p=>({...p,[k]:v}));

            // Dynamic calculation to only show cities of the selected province
            const availableCities = useMemo(() => {
                const prov = PROVINCES_DATA.find(p => p.id == form.provinceId);
                return prov ? prov.cities : [];
            }, [form.provinceId]);

            const validateStep1 = () => {
                const e={};
                if(!form.firstName.trim()) e.firstName='نام الزامی است';
                if(!form.lastName.trim()) e.lastName='نام خانوادگی الزامی است';
                if(form.nationalId.length!==10) e.nationalId='کدملی باید ۱۰ رقم باشد';
                if(!form.birthYear||form.birthYear.length<4) e.birthYear='سال تولد معتبر نیست';
                setErr(e); return Object.keys(e).length===0;
            };

            const validateStep2 = () => true;

            const validateStep3 = () => {
                const e={};
                if(!form.provinceId) e.provinceId='انتخاب استان الزامی است';
                if(!form.cityId) e.cityId='انتخاب شهر الزامی است';
                if(!isManager && !form.guardian.trim()) e.guardian='نام سرپرست الزامی است';
                setErr(e); return Object.keys(e).length===0;
            };

            const submitProfileToServer = async () => {
                setLoading(true); setErr({});

                try {
                    const res = await fetch('/user/save-profile', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': getCsrfToken(),
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(form)
                    });

                    const data = await res.json();

                    if (res.ok && data.success) {
                        setSuccessMsg('اطلاعات با موفقیت ذخیره شد!');
                        setTimeout(() => window.location.href = '/dashboard', 1000);
                    } else {
                        alert(data.message || 'خطا در ثبت اطلاعات. لطفاً دوباره تلاش کنید.');
                        setLoading(false);
                    }
                } catch (e) {
                    alert('خطا در ارتباط با سرور.');
                    setLoading(false);
                }
            };

            const handleNext = () => {
                if(step===1 && !validateStep1()) return;
                if(step===2 && !validateStep2()) return;
                if(step===3 && !validateStep3()) return;

                if(step < totalSteps) {
                    setStep(s=>s+1);
                } else {
                    submitProfileToServer();
                }
            };

            if (successMsg) {
                return (
                    <div className="absolute inset-0 bg-[#F5F7FA] flex flex-col items-center justify-center p-6 text-center slide-in">
                        <div className="w-24 h-24 rounded-full bg-green-100 flex items-center justify-center mb-6 pop-in">
                            <Ico n="check_circle" fill size={48} style={{color:'#2E7D32'}}/>
                        </div>
                        <h2 className="text-2xl font-black text-[#102A43] mb-2">{successMsg}</h2>
                        <p className="text-[#486581] text-sm">در حال انتقال به داشبورد...</p>
                    </div>
                );
            }

            return (
                <div className="absolute inset-0 bg-[#F5F7FA] flex flex-col slide-in">
                    {/* Header */}
                    <header className="h-14 bg-white border-b border-gray-100 shadow-sm flex items-center justify-between px-4 shrink-0 z-10">
                        <button onClick={()=>step > 1 && setStep(s=>s-1)} className={`w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-50 transition-transform ${step===1 ? 'opacity-0 pointer-events-none' : ''}`}>
                            <Ico n="arrow_forward" style={{color:'#D32F2F'}}/>
                        </button>
                        <div className="flex flex-col items-center">
                            <h1 className="font-bold text-sm text-[#102A43]">تکمیل اطلاعات</h1>
                            <p className="text-[10px] text-[#486581]">مرحله {step} از {totalSteps}</p>
                        </div>
                        <div className="w-10"/>
                    </header>

                    {/* Progress */}
                    <div className="h-1 bg-gray-100 shrink-0">
                        <div className="h-full bg-[#D32F2F] transition-all duration-500 rounded-full" style={{width:`${(step/totalSteps)*100}%`}}/>
                    </div>

                    <div className="flex-1 overflow-y-auto px-4 py-5 flex flex-col gap-4 pb-28 hide-sb">

                        {/* STEP 1 — اطلاعات فردی */}
                        {step===1 && (
                            <div className="flex flex-col gap-4 fade-up">
                                <div className="bg-[#fff0ef] rounded-2xl p-3.5 flex items-center gap-3 border border-[#e4beba]">
                                    <div className="w-10 h-10 rounded-full bg-[#D32F2F]/15 flex items-center justify-center shrink-0">
                                        <Ico n="badge" fill size={22} style={{color:'#D32F2F'}}/>
                                    </div>
                                    <div>
                                        <p className="font-black text-sm text-[#102A43]">اطلاعات هویتی</p>
                                        <p className="text-[11px] text-[#486581] mt-0.5">لطفاً اطلاعات را دقیق وارد کنید</p>
                                    </div>
                                </div>

                                <div className="grid grid-cols-2 gap-3">
                                    <Field label="نام" id="fn" placeholder="علی" value={form.firstName} onChange={e=>set('firstName',e.target.value)} error={err.firstName}/>
                                    <Field label="نام خانوادگی" id="ln" placeholder="محمدی" value={form.lastName} onChange={e=>set('lastName',e.target.value)} error={err.lastName}/>
                                </div>

                                <Field label="کد ملی" id="nid" placeholder="۰۰۱۲۳۴۵۶۷۸" inputMode="numeric" maxLen={10} dir="ltr"
                                       value={form.nationalId} onChange={e=>set('nationalId',e.target.value.replace(/\D/g,'').slice(0,10))} error={err.nationalId}/>

                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] font-black text-[#486581] uppercase tracking-widest">تاریخ تولد</label>
                                    <div className="grid grid-cols-3 gap-2">
                                        {[
                                            {ph:'روز', k:'birthDay', max:2, vals:Array.from({length:31},(_,i)=>String(i+1))},
                                            {ph:'ماه', k:'birthMonth', select:true, vals:MONTHS},
                                            {ph:'سال', k:'birthYear', max:4, vals:null}
                                        ].map(({ph,k,max,select,vals})=>
                                            select ? (
                                                <select key={k} value={form[k]} onChange={e=>set(k,e.target.value)}
                                                        className={`h-11 px-2 rounded-xl border-2 bg-white text-[#102A43] text-xs font-semibold focus:outline-none transition-all ${err.birthMonth?'border-red-400':'border-gray-200 focus:border-[#D32F2F]'}`}>
                                                    <option value="">ماه</option>
                                                    {vals.map((v,i)=><option key={i} value={String(i+1)}>{v}</option>)}
                                                </select>
                                            ) : (
                                                <input key={k} type="text" inputMode="numeric" maxLength={max} value={form[k]} placeholder={ph}
                                                       onChange={e=>set(k,e.target.value.replace(/\D/g,'').slice(0,max))} dir="ltr"
                                                       className={`h-11 px-3 rounded-xl border-2 bg-white text-[#102A43] text-sm font-semibold text-center focus:outline-none transition-all placeholder:text-gray-300 ${err.birthYear&&k==='birthYear'?'border-red-400 bg-red-50':'border-gray-200 focus:border-[#D32F2F]'}`}/>
                                            )
                                        )}
                                    </div>
                                    {err.birthYear && <p className="text-[10px] text-red-500 font-semibold">{err.birthYear}</p>}
                                </div>
                            </div>
                        )}

                        {/* STEP 2 — پست مورد علاقه */}
                        {step===2 && !isManager && (
                            <div className="flex flex-col gap-4 fade-up">
                                <div className="bg-[#fff0ef] rounded-2xl p-3.5 flex items-center gap-3 border border-[#e4beba]">
                                    <div className="w-10 h-10 rounded-full bg-[#D32F2F]/15 flex items-center justify-center shrink-0">
                                        <Ico n="sports_soccer" fill size={22} style={{color:'#D32F2F'}}/>
                                    </div>
                                    <div>
                                        <p className="font-black text-sm text-[#102A43]">پست مورد علاقه</p>
                                        <p className="text-[11px] text-[#486581] mt-0.5">می‌توانید چند پست انتخاب کنید</p>
                                    </div>
                                </div>

                                <div className="grid grid-cols-2 gap-3">
                                    {[
                                        { id:'gk',    label:'دروازه‌بان',  icon:'sports_handball', desc:'حفاظت از دروازه' },
                                        { id:'def',   label:'مدافع',       icon:'shield',          desc:'خط دفاعی' },
                                        { id:'mid',   label:'هافبک',        icon:'swap_horiz',      desc:'کنترل بازی' },
                                        { id:'fwd',   label:'مهاجم',       icon:'rocket_launch',   desc:'خط حمله' },
                                        { id:'wing',  label:'بازیکن بال',  icon:'air',             desc:'کناره‌های زمین' },
                                        { id:'any',   label:'هر پستی',     icon:'all_inclusive',   desc:'انعطاف‌پذیر' },
                                    ].map(pos => {
                                        const on = (form.positions||[]).includes(pos.id);
                                        return (
                                            <button key={pos.id}
                                                    onClick={()=>{
                                                        const cur = form.positions||[];
                                                        set('positions', on ? cur.filter(x=>x!==pos.id) : [...cur,pos.id]);
                                                    }}
                                                    className={`flex flex-col items-center gap-2 p-4 rounded-2xl border-2 transition-all active:scale-[0.96] ${on?'border-[#D32F2F] bg-[#fff0ef]':'border-gray-100 bg-white'}`}>
                                                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${on?'bg-[#D32F2F]':'bg-gray-100'}`}>
                                                    <Ico n={pos.icon} fill size={24} style={{color: on?'#fff':'#486581'}}/>
                                                </div>
                                                <div className="text-center">
                                                    <p className={`text-xs font-black ${on?'text-[#D32F2F]':'text-[#102A43]'}`}>{pos.label}</p>
                                                    <p className="text-[10px] text-[#486581] mt-0.5">{pos.desc}</p>
                                                </div>
                                                {on && <div className="w-5 h-5 rounded-full bg-[#D32F2F] flex items-center justify-center absolute top-2 left-2">
                                                    <Ico n="check" size={12} cls="text-white"/>
                                                </div>}
                                            </button>
                                        );
                                    })}
                                </div>
                            </div>
                        )}

                        {/* STEP 3 — موقعیت مکانی (با دراپ‌داون‌های هوشمند استانی) */}
                        {((step===3 && !isManager)||(step===2 && isManager)) && (
                            <div className="flex flex-col gap-4 fade-up">
                                <div className="bg-[#e8f5e9] rounded-2xl p-3.5 flex items-center gap-3 border border-green-200">
                                    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center shrink-0">
                                        <Ico n="location_on" fill size={22} style={{color:'#2E7D32'}}/>
                                    </div>
                                    <div>
                                        <p className="font-black text-sm text-[#102A43]">موقعیت و اطلاعات تکمیلی</p>
                                        <p className="text-[11px] text-[#486581] mt-0.5">برای یافتن مدارس نزدیک به شما</p>
                                    </div>
                                </div>

                                <div className="grid grid-cols-2 gap-3">
                                    {/* Province Dropdown */}
                                    <div className="flex flex-col gap-1">
                                        <label className="text-[10px] font-black text-[#486581] uppercase tracking-widest">استان</label>
                                        <div className="relative">
                                            <select value={form.provinceId} onChange={e => {set('provinceId', e.target.value); set('cityId', '');}}
                                                    className={`w-full h-11 px-3 rounded-xl border-2 bg-white text-[#102A43] text-xs font-semibold focus:outline-none transition-all appearance-none ${err.provinceId?'border-red-400 bg-red-50':'border-gray-200 focus:border-[#D32F2F]'}`}>
                                                <option value="">استان...</option>
                                                {PROVINCES_DATA.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                                            </select>
                                        </div>
                                        {err.provinceId && <p className="text-[10px] text-red-500 font-semibold">{err.provinceId}</p>}
                                    </div>

                                    {/* City Dropdown (Dependent) */}
                                    <div className="flex flex-col gap-1">
                                        <label className="text-[10px] font-black text-[#486581] uppercase tracking-widest">شهر</label>
                                        <div className="relative">
                                            <select value={form.cityId} onChange={e=>set('cityId', e.target.value)} disabled={!form.provinceId}
                                                    className={`w-full h-11 px-3 rounded-xl border-2 text-[#102A43] text-xs font-semibold focus:outline-none transition-all appearance-none ${err.cityId?'border-red-400 bg-red-50':!form.provinceId?'bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed':'bg-white border-gray-200 focus:border-[#D32F2F]'}`}>
                                                <option value="">شهر...</option>
                                                {availableCities.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                                            </select>
                                        </div>
                                        {err.cityId && <p className="text-[10px] text-red-500 font-semibold">{err.cityId}</p>}
                                    </div>
                                </div>

                                <Field label="آدرس (اختیاری)" id="addr" placeholder="خیابان، کوچه، پلاک..."
                                       value={form.address} onChange={e=>set('address',e.target.value)}/>

                                {!isManager && (
                                    <>
                                        <Field label="نام سرپرست / والدین" id="grd" placeholder="نام و نام خانوادگی"
                                               value={form.guardian} onChange={e=>set('guardian',e.target.value)} error={err.guardian}/>
                                        <Field label="شماره تماس سرپرست" id="gp" placeholder="09XXXXXXXXX"
                                               inputMode="numeric" maxLen={11} dir="ltr"
                                               value={form.guardianPhone} onChange={e=>set('guardianPhone',e.target.value.replace(/\D/g,'').slice(0,11))}/>
                                    </>
                                )}
                            </div>
                        )}

                        {/* STEP 3 — اطلاعات امکانات (فقط مدیر) */}
                        {step===3 && isManager && (
                            <div className="flex flex-col gap-4 fade-up">
                                <div className="bg-[#e8ecf2] rounded-2xl p-3.5 flex items-center gap-3 border border-[#b0c9e8]">
                                    <div className="w-10 h-10 rounded-full bg-[#102A43]/10 flex items-center justify-center shrink-0">
                                        <Ico n="stadium" fill size={22} style={{color:'#102A43'}}/>
                                    </div>
                                    <div>
                                        <p className="font-black text-sm text-[#102A43]">اطلاعات امکانات ورزشی</p>
                                        <p className="text-[11px] text-[#486581] mt-0.5">مشخصات زمین و مجموعه خود را وارد کنید</p>
                                    </div>
                                </div>

                                <Field label="نام مجموعه ورزشی" id="fn2" placeholder="مثال: مجموعه ورزشی آزادگان"
                                       value={form.facilityName} onChange={e=>set('facilityName',e.target.value)}/>

                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] font-black text-[#486581] uppercase tracking-widest">نوع چمن</label>
                                    <div className="grid grid-cols-2 gap-2">
                                        {['طبیعی','مصنوعی'].map(t=>(
                                            <button key={t} onClick={()=>set('facilityType',t)}
                                                    className={`h-11 rounded-xl border-2 text-sm font-bold transition-all active:scale-[0.97] ${form.facilityType===t?'border-[#D32F2F] bg-[#fff0ef] text-[#D32F2F]':'border-gray-200 bg-white text-[#486581]'}`}>
                                                {t}
                                            </button>
                                        ))}
                                    </div>
                                </div>

                                <Field label="ابعاد زمین (متر)" id="fs" placeholder="مثال: ۱۰۵ × ۶۸"
                                       value={form.fieldSize} onChange={e=>set('fieldSize',e.target.value)}/>

                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] font-black text-[#486581] uppercase tracking-widest">امکانات رفاهی</label>
                                    <div className="grid grid-cols-2 gap-2">
                                        {['رختکن','پارکینگ','کافه‌تریا','روشنایی شبانه'].map(f=>{
                                            const on = form.amenities?.includes(f);
                                            return (
                                                <label key={f} className={`flex items-center gap-2 bg-white rounded-xl border-2 px-3 py-2.5 cursor-pointer transition-all ${on?'border-[#D32F2F] bg-[#fff0ef]':'border-gray-200'}`}>
                                                    <input type="checkbox" className="hidden"
                                                           onChange={(e) => {
                                                               const cur = form.amenities || [];
                                                               set('amenities', e.target.checked ? [...cur, f] : cur.filter(x=>x!==f));
                                                           }}
                                                           checked={on}
                                                    />
                                                    <div className={`w-4 h-4 rounded border flex items-center justify-center ${on?'bg-[#D32F2F] border-[#D32F2F]':'border-gray-300'}`}>
                                                        {on && <Ico n="check" size={12} cls="text-white"/>}
                                                    </div>
                                                    <span className="text-xs font-semibold text-[#102A43]">{f}</span>
                                                </label>
                                            )})}
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>

                    <div className="absolute bottom-0 right-0 w-full px-4 pb-5 pt-3 bg-white border-t border-gray-100 shadow-[0_-8px_24px_rgba(0,0,0,0.06)] z-10">
                        <button disabled={loading}
                                onClick={handleNext}
                                className="w-full h-12 bg-[#D32F2F] text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-red-200 hover:bg-[#b71c1c] active:scale-[0.97] transition-all disabled:opacity-70 disabled:cursor-not-allowed">
                            {loading ? 'در حال ذخیره...' : step < totalSteps ? (
                                <><span>مرحله بعد</span><Ico n="arrow_back" size={18} style={{transform:'scaleX(-1)'}}/></>
                            ) : (
                                <><Ico n="check_circle" fill size={18}/><span>ذخیره و ورود به داشبورد</span></>
                            )}
                        </button>
                    </div>
                </div>
            );
        };

        /* ────────────────────────────────────────────
           APP
        ──────────────────────────────────────────── */
        const App = () => {
            const userRole = '{{ $role ?? "student" }}';
            return (
                <div className="app-shell">
                    <div className="app-container">
                        <div className="absolute inset-0 overflow-hidden">
                            <ProfileScreen role={userRole} />
                        </div>
                    </div>
                </div>
            );
        };

        ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
    </script>
@endverbatim

<!-- This hidden script block safely transfers the PHP database variables to React -->
<script type="application/json" id="provinces-data">
    {!! json_encode($provinces) !!}
</script>
</body>
</html>
