// src/features/admin/ui/admin-crm-modals.jsx
//
// CRM modals + the lead-detail panel + the small ActivityTimeline
// component. Extracted from admin-crm.jsx for size.
//
// Public on window: ActivityTimeline, AdminAssignInstructorModal,
// AdminAddToCalendarModal, CRMLeadDetail, CRMAddModal.
//
// Depends on (via window): CRMStatusBadge, AgeBadge (tiny badges
// that stay in admin-crm.jsx).

const { CRMStatusBadge, AgeBadge } = window;

const ActivityTimeline = ({ leadId }) => {
  const logs = (window.ADMIN_DATA.activityLogs || {})[leadId] || [];
  if (!logs.length) return <div style={{ fontSize:12, color:'oklch(65% 0.03 265)', fontStyle:'italic' }}>No activity logged yet.</div>;
  const iconMap = { lead:'🌱', call:'📞', trial:'🎵', enrolled:'✅', note:'📝', email:'✉️', sms:'💬' };
  return (
    <div style={{ display:'flex', flexDirection:'column' }}>
      {logs.map((e,i) => (
        <div key={i} style={{ display:'flex', gap:10, paddingBottom:10, position:'relative' }}>
          {i < logs.length-1 && <div style={{ position:'absolute', left:12, top:26, bottom:0, width:1, background:'oklch(91% 0.01 265)' }} />}
          <div style={{ width:25, height:25, borderRadius:'50%', background:'oklch(96% 0.01 265)', border:'1.5px solid oklch(89% 0.01 265)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, zIndex:1, fontSize:11 }}>{iconMap[e.type]||'•'}</div>
          <div style={{ paddingTop:2 }}>
            <div style={{ fontSize:12, color:'oklch(28% 0.05 265)', lineHeight:1.5 }}>{e.text}</div>
            <div style={{ fontSize:10, color:'oklch(62% 0.03 265)', marginTop:1 }}>{e.date}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

// ── Admin → Assign Instructor to Student ─────────────────────────────────────
const AdminAssignInstructorModal = ({ lead, onClose }) => {
  const data = window.useAdminData();
  const realInstructors = (data.instructors || []).filter(i => !i.isSample);
  const choices = realInstructors.length ? realInstructors : (data.instructors || []);
  const [selInst, setSelInst] = React.useState(choices[0]?.id || '');
  const [done,    setDone]    = React.useState(false);
  const [busy,    setBusy]    = React.useState(false);
  const [error,   setError]   = React.useState('');

  const fld = { width:'100%', padding:'9px 12px', borderRadius:8, border:'1.5px solid oklch(88% 0.015 265)', fontSize:13, fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(22% 0.06 265)', background:'#fff', outline:'none', boxSizing:'border-box' };
  const lbl = { display:'block', fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(52% 0.04 265)', marginBottom:5 };

  const save = async () => {
    setBusy(true); setError('');
    try {
      await data.assignInstructorToLead(lead.id, selInst);
      setDone(true);
    } catch (e) {
      setError(e.message || 'Could not assign.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(10,12,24,0.4)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:9500 }} onClick={onClose}>
      <div style={{ background:'#fff', borderRadius:16, padding:'26px', width:340, boxShadow:'0 20px 60px rgba(0,0,0,0.18)', fontFamily:"'Plus Jakarta Sans', sans-serif" }} onClick={e=>e.stopPropagation()}>
        {done ? (
          <div style={{ textAlign:'center', padding:'16px 0' }}>
            <div style={{ fontSize:34, marginBottom:12 }}>✅</div>
            <div style={{ fontWeight:700, fontSize:15, color:'oklch(18% 0.03 265)', marginBottom:6 }}>Instructor assigned</div>
            <div style={{ fontSize:13, color:'oklch(55% 0.03 265)', marginBottom:20, lineHeight:1.55 }}>
              {lead.name} is linked to {choices.find(i=>i.id===selInst)?.name}.<br />They can log in with <strong>{lead.phone}</strong>.
            </div>
            <button onClick={onClose} style={{ background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:8, padding:'10px 24px', fontWeight:600, fontSize:13, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Done</button>
          </div>
        ) : (
          <>
            <div style={{ fontWeight:700, fontSize:15, color:'oklch(18% 0.03 265)', marginBottom:4 }}>Assign instructor</div>
            <div style={{ fontSize:12, color:'oklch(58% 0.03 265)', marginBottom:18 }}>Student: <strong>{lead.name}</strong> · {lead.subject}</div>
            <div style={{ marginBottom:14 }}>
              <label style={lbl}>Instructor</label>
              <select value={selInst} onChange={e=>setSelInst(e.target.value)} style={fld}>
                {choices.map(i=><option key={i.id} value={i.id}>{i.name} — {i.subject}</option>)}
              </select>
            </div>
            <div style={{ fontSize:12, color:'oklch(44% 0.04 265)', marginBottom:18, background:'oklch(97% 0.006 265)', padding:'10px 13px', borderRadius:8, lineHeight:1.6 }}>
              The student needs an account first — ask them to sign up with <strong>{lead.phone}</strong> at the student portal.
            </div>
            {error && <div style={{ fontSize:12, color:'oklch(40% 0.1 25)', marginBottom:10, background:'oklch(97% 0.06 25)', padding:'9px 12px', borderRadius:7 }}>{error}</div>}
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={save} disabled={busy} style={{ flex:1, background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:8, padding:'11px 0', fontWeight:600, fontSize:13, cursor:busy?'wait':'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", opacity:busy?0.72:1 }}>{busy ? 'Assigning…' : 'Assign'}</button>
              <button onClick={onClose} style={{ padding:'11px 14px', background:'oklch(95% 0.01 265)', border:'none', borderRadius:8, fontSize:13, cursor:'pointer', color:'oklch(46% 0.04 265)', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Cancel</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// ── Admin → Add to Instructor Calendar ───────────────────────────────────────
const AdminAddToCalendarModal = ({ lead, profile, onClose }) => {
  const data = window.useAdminData();
  const realInstructors = (data.instructors || []).filter(i => !i.isSample);
  const choices = realInstructors.length ? realInstructors : (data.instructors || []);
  const [selInst, setSelInst] = React.useState(choices[0]?.id || '');
  const [date,    setDate]    = React.useState(CRM_TODAY);
  const [hour,    setHour]    = React.useState(10);
  const [type,    setType]    = React.useState(lead.status === 'trial_scheduled' || lead.status === 'trial_done' ? 'trial' : 'lesson');
  const [done,    setDone]    = React.useState(false);
  const [busy,    setBusy]    = React.useState(false);
  const [error,   setError]   = React.useState('');

  const instInputS = { width:'100%', padding:'9px 12px', borderRadius:8, border:'1.5px solid oklch(88% 0.015 265)', fontSize:13, fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(22% 0.06 265)', background:'#fff', outline:'none', boxSizing:'border-box' };
  const instLblS   = { display:'block', fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(52% 0.04 265)', marginBottom:5 };
  const hFmt       = h => h === 0 ? '12 AM' : h === 12 ? '12 PM' : h > 12 ? (h-12)+' PM' : h+' AM';
  const hours      = [8,9,10,11,12,13,14,15,16,17,18,19];

  const save = async () => {
    setBusy(true); setError('');
    try {
      const scheduledAt = new Date(`${date}T${String(hour).padStart(2,'0')}:00:00`).toISOString();
      await data.addBookingFromLead(lead.id, {
        instructorId: selInst, scheduledAt,
        durationMinutes: 60, type,
      });
      setDone(true);
    } catch (e) {
      setError(e.message || 'Could not schedule.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(10,12,24,0.4)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:9500 }} onClick={onClose}>
      <div style={{ background:'#fff', borderRadius:16, padding:'26px 26px 22px', width:360, boxShadow:'0 20px 60px rgba(0,0,0,0.18)', fontFamily:"'Plus Jakarta Sans', sans-serif" }} onClick={e => e.stopPropagation()}>
        {done ? (
          <div style={{ textAlign:'center', padding:'20px 0' }}>
            <div style={{ fontSize:36, marginBottom:12 }}>✅</div>
            <div style={{ fontWeight:700, fontSize:15, color:'oklch(18% 0.03 265)', marginBottom:6 }}>Added to schedule</div>
            <div style={{ fontSize:13, color:'oklch(55% 0.03 265)', marginBottom:20, lineHeight:1.5 }}>{lead.name} has been added to {choices.find(i=>i.id===selInst)?.name}'s calendar.</div>
            <button onClick={onClose} style={{ background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:8, padding:'10px 24px', fontWeight:600, fontSize:13, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Done</button>
          </div>
        ) : (
          <>
            <div style={{ fontWeight:700, fontSize:15, color:'oklch(18% 0.03 265)', marginBottom:4 }}>Add to instructor calendar</div>
            <div style={{ fontSize:12, color:'oklch(58% 0.03 265)', marginBottom:20 }}>Student: <strong>{lead.name}</strong> · {lead.subject}</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:16 }}>
              <div style={{ gridColumn:'1/-1' }}>
                <label style={instLblS}>Instructor</label>
                <select value={selInst} onChange={e=>setSelInst(e.target.value)} style={instInputS}>
                  {choices.map(i=><option key={i.id} value={i.id}>{i.name} — {i.subject}</option>)}
                </select>
              </div>
              <div>
                <label style={instLblS}>Date</label>
                <input type="date" value={date} onChange={e=>setDate(e.target.value)} style={instInputS} />
              </div>
              <div>
                <label style={instLblS}>Time</label>
                <select value={hour} onChange={e=>setHour(e.target.value)} style={instInputS}>
                  {hours.map(h=><option key={h} value={h}>{hFmt(h)} {window.adminSchTzAbbrev?.() || ''}</option>)}
                </select>
              </div>
              <div style={{ gridColumn:'1/-1' }}>
                <label style={instLblS}>Type</label>
                <select value={type} onChange={e=>setType(e.target.value)} style={instInputS}>
                  <option value="trial">Trial</option>
                  <option value="lesson">Lesson</option>
                </select>
              </div>
            </div>
            {error && <div style={{ fontSize:12, color:'oklch(40% 0.1 25)', marginBottom:10, background:'oklch(97% 0.06 25)', padding:'9px 12px', borderRadius:7 }}>{error}</div>}
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={save} disabled={busy} style={{ flex:1, background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:8, padding:'11px 0', fontWeight:600, fontSize:13, cursor:busy?'wait':'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", opacity:busy?0.72:1 }}>{busy ? 'Scheduling…' : 'Add to calendar'}</button>
              <button onClick={onClose} style={{ padding:'11px 14px', background:'oklch(95% 0.01 265)', border:'none', borderRadius:8, fontSize:13, cursor:'pointer', color:'oklch(46% 0.04 265)', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Cancel</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// ── Lead Detail (expanded row) ────────────────────────────────────────────────
const CRMLeadDetail = ({ lead, profile, onClose, onUpdate }) => {
  const [status,   setStatus]   = React.useState(lead.status);
  const [notes,    setNotes]    = React.useState(lead.notes);
  const [followUp, setFollowUp] = React.useState((window.ADMIN_DATA.followUpDates||{})[lead.id]||'');
  const [showLog,  setShowLog]  = React.useState(false);
  const [showCal,  setShowCal]  = React.useState(false);
  const [showAssign, setShowAssign] = React.useState(false);

  const stamp    = () => `[${CRM_TODAY}] `;
  const appendNote = txt => setNotes(n => n ? n+'\n'+txt : txt);

  const qBtn = (label, borderColor, action) => (
    <button onClick={action} style={{
      padding:'5px 12px', borderRadius:7, border:`1.5px solid ${borderColor}`,
      background:'transparent', color:borderColor, fontSize:11, fontWeight:600,
      cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", transition:'background 0.12s',
      display:'flex', alignItems:'center', gap:4,
    }}
      onMouseEnter={e=>e.currentTarget.style.background=borderColor+'18'}
      onMouseLeave={e=>e.currentTarget.style.background='transparent'}
    >{label}</button>
  );

  const followUpOverdue = followUp && followUp <= CRM_TODAY;

  return (
    <tr>
      <td colSpan={8} style={{ padding:0, background:'oklch(97.5% 0.007 265)' }}>
        <div style={{ padding:'16px 24px 20px', borderBottom:'2px solid oklch(88% 0.02 265)' }}>

          {/* Quick actions */}
          <div style={{ display:'flex', gap:7, marginBottom:14, paddingBottom:13, borderBottom:'1px solid oklch(91% 0.01 265)', flexWrap:'wrap', alignItems:'center' }}>
            {qBtn('📞 Log call',        'oklch(30% 0.12 150)', () => appendNote(stamp()+'Called — '))}
            {qBtn('✉️ Log email',       'oklch(30% 0.1 265)',  () => appendNote(stamp()+'Emailed — '))}
            {qBtn('💬 Log SMS',         'oklch(30% 0.1 295)',  () => appendNote(stamp()+'SMS sent — '))}
            {qBtn('📅 Schedule trial',  'oklch(28% 0.1 200)',  () => { setStatus('trial_scheduled'); appendNote(stamp()+'Trial scheduled — '); })}
            {qBtn('✅ Enroll',          'oklch(26% 0.13 150)', () => setStatus('enrolled'))}
            {qBtn('📆 Add to calendar', 'oklch(28% 0.08 265)', () => setShowCal(true))}
            {qBtn('👤 Assign instructor', 'oklch(28% 0.09 200)', () => setShowAssign(true))}

            <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:8 }}>
              <span style={{ fontSize:10, fontWeight:700, color:'oklch(52% 0.04 265)', textTransform:'uppercase', letterSpacing:'0.06em' }}>Follow-up</span>
              <input type="date" value={followUp} onChange={e=>setFollowUp(e.target.value)} style={{
                padding:'4px 9px', borderRadius:7, border:`1.5px solid ${followUpOverdue ? 'oklch(60% 0.1 25)' : 'oklch(86% 0.02 265)'}`,
                fontSize:12, fontFamily:"'Plus Jakarta Sans', sans-serif",
                color: followUpOverdue ? 'oklch(36% 0.1 25)' : 'oklch(28% 0.05 265)',
                fontWeight: followUp ? 600 : 400, outline:'none', background: followUpOverdue ? 'oklch(97% 0.06 25)' : '#fff',
              }} />
            </div>
          </div>

          <div style={{ display:'flex', gap:28, alignItems:'flex-start' }}>
            {/* Left */}
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:5 }}>
                <div style={{ fontWeight:700, fontSize:16, color:'oklch(18% 0.03 265)' }}>{lead.name}</div>
                <CRMStatusBadge status={status} />
                <AgeBadge lastUpdated={lead.lastUpdated} status={lead.status} />
              </div>
              <div style={{ display:'flex', gap:20, marginBottom:14, flexWrap:'wrap' }}>
                {[
                  { label:'Phone',   value: lead.phone },
                  lead.email ? { label:'Email', value: lead.email } : null,
                  { label:'Subject', value: lead.subject },
                  { label:'Source',  value: (profile?.platform||'') + ' · ' + (profile?.instructor||'') },
                  { label:'Added',   value: lead.dateAdded },
                ].filter(Boolean).map(f => (
                  <div key={f.label}>
                    <div style={{ fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(55% 0.03 265)', marginBottom:2 }}>{f.label}</div>
                    <div style={{ fontSize:13, fontWeight:600, color:'oklch(28% 0.05 265)' }}>{f.value}</div>
                  </div>
                ))}
              </div>

              <div style={{ marginBottom:10 }}>
                <div style={{ fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(55% 0.03 265)', marginBottom:6 }}>Notes</div>
                <textarea value={notes} onChange={e=>setNotes(e.target.value)} rows={3}
                  style={{ width:'100%', padding:'9px 12px', borderRadius:9, border:'1.5px solid oklch(86% 0.02 265)', fontSize:12, lineHeight:1.65, color:'oklch(26% 0.04 265)', resize:'vertical', background:'#fff', fontFamily:"'Plus Jakarta Sans', sans-serif", boxSizing:'border-box', outline:'none' }}
                />
              </div>

              <button onClick={() => setShowLog(v=>!v)} style={{ background:'none', border:'none', cursor:'pointer', fontSize:12, fontWeight:600, color:'oklch(40% 0.06 265)', fontFamily:"'Plus Jakarta Sans', sans-serif", padding:0, display:'flex', alignItems:'center', gap:5 }}>
                {showLog ? '▾' : '▸'} Activity log
              </button>
              {showLog && (
                <div style={{ marginTop:10, paddingTop:10, borderTop:'1px solid oklch(92% 0.01 265)' }}>
                  <ActivityTimeline leadId={lead.id} />
                </div>
              )}
            </div>

            {/* Right — stage panel */}
            <div style={{ width:188, flexShrink:0 }}>
              <div style={{ fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(55% 0.03 265)', marginBottom:9 }}>Move to stage</div>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                {CRM_STATUS_ORDER.map(s => {
                  const cfg = CRM_STATUS_CONFIG[s];
                  const active = status === s;
                  return (
                    <button key={s} onClick={() => setStatus(s)} style={{
                      display:'flex', alignItems:'center', gap:8, padding:'7px 11px', borderRadius:8,
                      border: active ? `2px solid ${cfg.color}` : '1.5px solid oklch(90% 0.01 265)',
                      background: active ? cfg.bg : '#fff', color: active ? cfg.color : 'oklch(46% 0.04 265)',
                      fontSize:12, fontWeight: active ? 700 : 500, cursor:'pointer', textAlign:'left',
                      fontFamily:"'Plus Jakarta Sans', sans-serif", transition:'all 0.12s',
                    }}>
                      <div style={{ width:6, height:6, borderRadius:'50%', background: active ? cfg.color : 'oklch(80% 0.02 265)', flexShrink:0 }} />
                      {cfg.label}
                    </button>
                  );
                })}
              </div>
              <div style={{ display:'flex', gap:7, marginTop:12 }}>
                <button onClick={() => onUpdate(lead.id, status, notes, followUp)} style={{ flex:1, background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:8, padding:'9px 0', fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Save</button>
                <button onClick={onClose} style={{ background:'oklch(94% 0.01 265)', border:'none', borderRadius:8, padding:'9px 12px', fontSize:12, cursor:'pointer', color:'oklch(45% 0.04 265)', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>✕</button>
              </div>
            </div>
          </div>
        </div>
      </td>
      {showCal    && <AdminAddToCalendarModal lead={lead} profile={profile} onClose={() => setShowCal(false)} />}
      {showAssign && <AdminAssignInstructorModal lead={lead} onClose={() => setShowAssign(false)} />}
    </tr>
  );
};

// ── Add Lead Modal ────────────────────────────────────────────────────────────
const CRMAddModal = ({ profiles, onAdd, onClose }) => {
  const [form, setForm] = React.useState({ name:'', phone:'', email:'', subject:'Piano', profileId:profiles[0]?.id||'', notes:'' });
  const set = (k,v) => setForm(f=>({...f,[k]:v}));
  const fieldStyle = { width:'100%', padding:'10px 13px', borderRadius:9, border:'1.5px solid oklch(86% 0.02 265)', fontSize:13, fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(22% 0.06 265)', outline:'none', boxSizing:'border-box', background:'#fff' };
  const lblStyle   = { display:'block', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'oklch(50% 0.04 265)', marginBottom:6 };

  const submit = e => {
    e.preventDefault();
    onAdd({ ...form, id:'l'+Date.now(), status:'new', dateAdded:CRM_TODAY, lastUpdated:CRM_TODAY });
    onClose();
  };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(10,12,24,0.45)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:9000 }}>
      <div style={{ background:'#fff', borderRadius:18, padding:'34px 34px 30px', width:480, boxShadow:'0 24px 64px oklch(12% 0.06 265 / 0.28)', maxHeight:'90vh', overflowY:'auto' }}>
        <div style={{ fontWeight:700, fontSize:18, color:'oklch(18% 0.03 265)', marginBottom:22 }}>Add new lead</div>
        <form onSubmit={submit}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14 }}>
            {[{label:'Full Name',key:'name',type:'text',ph:'Full name',req:true},{label:'Phone',key:'phone',type:'tel',ph:'(555) 000-0000',req:true},{label:'Email',key:'email',type:'email',ph:'Optional',req:false},{label:'Subject',key:'subject',type:'text',ph:'Piano, Guitar…',req:false}].map(f=>(
              <div key={f.key}>
                <label style={lblStyle}>{f.label}</label>
                <input type={f.type} value={form[f.key]} onChange={e=>set(f.key,e.target.value)} placeholder={f.ph} required={f.req} style={fieldStyle} />
              </div>
            ))}
          </div>
          <div style={{ marginBottom:14 }}>
            <label style={lblStyle}>Source profile</label>
            <select value={form.profileId} onChange={e=>set('profileId',e.target.value)} style={fieldStyle}>
              {profiles.map(p=><option key={p.id} value={p.id}>{p.platform} — {p.instructor} ({p.subject})</option>)}
            </select>
          </div>
          <div style={{ marginBottom:24 }}>
            <label style={lblStyle}>Notes</label>
            <textarea value={form.notes} onChange={e=>set('notes',e.target.value)} rows={3} style={{ ...fieldStyle, resize:'none' }} />
          </div>
          <div style={{ display:'flex', gap:10 }}>
            <button type="submit" style={{ flex:1, background:'oklch(22% 0.06 265)', color:'#fff', border:'none', borderRadius:10, padding:'12px 0', fontWeight:600, fontSize:14, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>Add Lead</button>
            <button type="button" onClick={onClose} style={{ padding:'12px 20px', background:'oklch(95% 0.01 265)', border:'none', borderRadius:10, fontSize:14, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", color:'oklch(45% 0.04 265)' }}>Cancel</button>
          </div>
        </form>
      </div>
    </div>
  );
};

// ── Main CRM ──────────────────────────────────────────────────────────────────


Object.assign(window, {
  ActivityTimeline,
  AdminAssignInstructorModal,
  AdminAddToCalendarModal,
  CRMLeadDetail,
  CRMAddModal,
});