/* App controller — state machine, family seed data, responsive layout. */

const { useState, useEffect, useMemo, useCallback } = React;

// notificationStatus per Invites Never Notify rule:
//   'known-aware'  = they already know about the death (Inner Circle entries default to this)
//   'notified'     = a person told them via call/message after MissBetty existed
//   'unknown'      = we don't yet know if they've been told. INVITE-BLOCKED.
// Workspace starts with just the coordinator. Family roster grows from the Inner Circle
// list-builder at the end of intake, then again as collaborators join.
const FAMILY_SEED = [
{ id: 'sarah', firstName: 'Sarah', relation: 'daughter / coordinator', color: '#B8A4C9', invited: true, joined: true, notificationStatus: 'known-aware', fromContactId: null }];


const INITIAL_TASKS = TASK_LIBRARY.map((t) => ({
  ...t,
  done: false,
  // v1 spec: tasks default UNASSIGNED. Coordinator is tracker, not assigner.
  assigneeId: null
}));

/* ---------- responsive today layout ---------- */

function SidebarContent({ tasks, family, route, onInvite, onClose }) {
  const acceptedFamily = family.filter((f) => f.joined);
  return (
    <>
      <div className="px-5 pt-5 pb-4 flex items-center gap-2">
        <MascotGlyph size={28} />
        <span className="ff-serif text-[#3D2B3C]" style={{ fontSize: 16, fontWeight: 500 }}>
          <span style={{ fontStyle: 'italic', fontWeight: 350 }}>Miss</span>Betty
        </span>
        {onClose && (
          <button
            onClick={onClose}
            className="ml-auto -mr-2 w-9 h-9 flex items-center justify-center rounded-full text-[#5A4459] hover:text-[#3D2B3C] hover:bg-[#3D2B3C]/8"
            aria-label="Close menu"
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              <path d="M2 2 L 12 12 M12 2 L 2 12" />
            </svg>
          </button>
        )}
      </div>
      <div className="px-5">
        <div className="text-[10px] uppercase tracking-[.18em] text-[#5A4459] mb-2">Workspace</div>
        <div
          className="rounded-2xl border border-[#3D2B3C]/8 px-3 py-2.5 flex items-center gap-2.5 relative overflow-hidden"
          style={{
            backgroundImage: [
              'radial-gradient(80% 120% at 0% 0%, rgba(244,168,142,0.22) 0%, rgba(244,168,142,0) 70%)',
              'radial-gradient(80% 120% at 100% 100%, rgba(184,164,201,0.22) 0%, rgba(184,164,201,0) 70%)',
              'linear-gradient(135deg, #FBF4E8 0%, #F6EDDE 100%)',
            ].join(', '),
          }}
        >
          <span
            className="w-7 h-7 rounded-full flex items-center justify-center text-[11px] flex-shrink-0"
            style={{ background: 'rgba(244,168,142,0.35)', color: '#3D2B3C', fontWeight: 500 }}
          >
            H
          </span>
          <div className="min-w-0">
            <div className="text-[13px] text-[#3D2B3C] truncate" style={{ fontWeight: 500 }}>Henry's people</div>
            <div className="text-[11px] text-[#5A4459] ff-serif" style={{ fontStyle: 'italic' }}>together since May</div>
          </div>
        </div>
      </div>
      <nav className="px-5 mt-5">
        <NavItem icon="•" label="Today" active={route === 'today' || route === 'task'} />
        <NavItem icon="○" label="Documents" />
        <NavItem icon="○" label="Activity" />
        <NavItem icon="○" label="Help & boundaries" />
      </nav>
      <div className="px-5 mt-6">
        <div className="text-[10px] uppercase tracking-[.18em] text-[#5A4459] mb-2 flex items-center justify-between">
          <span>Family</span>
          <button onClick={onInvite} className="text-[#5A4459] hover:text-[#3D2B3C] normal-case tracking-normal text-[11px]">+ invite</button>
        </div>
        <ul className="space-y-1.5">
          {family.map((f) =>
          <li key={f.id} className="flex items-center gap-2 text-[13px] text-[#3D2B3C]">
              <span className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] text-[#3D2B3C]" style={{ background: f.color, opacity: f.joined ? 1 : 0.35 }}>
                {f.firstName[0]}
              </span>
              <span className={f.joined ? '' : 'text-[#5A4459]'}>{f.firstName}</span>
              <span className="text-[10px] text-[#5A4459]/70 ml-auto">
                {f.joined ? f.relation.split(' /')[0] : f.invited ? 'pending' : ''}
              </span>
            </li>
          )}
        </ul>

        {/* INVITE NUDGE — coordinator is a tracker; family claims tasks. */}
        {acceptedFamily.length < family.length &&
        <div className="mt-4 rounded-xl bg-white border border-[#3D2B3C]/12 p-3">
            <div className="text-[#3D2B3C] text-[12px] leading-snug" style={{ fontWeight: 500 }}>
              You don't have to assign anything.
            </div>
            <div className="text-[#5A4459] text-[11px] leading-relaxed mt-1">
              When the family joins, they'll see the same list and claim what they can do.
            </div>
            <button
            onClick={onInvite}
            className="mt-2.5 w-full text-[11px] rounded-lg bg-[#E89B7E] hover:bg-[#E08A6B] text-[#3D2B3C] py-1.5 px-3 transition"
            style={{ fontWeight: 500 }}>
              Invite the family
            </button>
          </div>
        }
      </div>
      <div className="mt-auto p-5 border-t border-[#3D2B3C]/10">
        <div className="text-[10px] uppercase tracking-[.18em] text-[#5A4459] mb-1">Progress</div>
        <div className="text-[13px] text-[#3D2B3C]">{tasks.filter((t) => t.done).length} of {tasks.length} done</div>
        <div className="h-1 mt-2 rounded-full bg-[#3D2B3C]/10 overflow-hidden">
          <div className="h-full bg-[#3D2B3C]" style={{ width: `${tasks.filter((t) => t.done).length / tasks.length * 100}%` }} />
        </div>
      </div>
    </>
  );
}

function ResponsiveTodayShell({ tasks, family, onInvite, children, route, drawerOpen, setDrawerOpen }) {
  return (
    <div className="h-full flex flex-col lg:flex-row">
      {/* DESKTOP sidebar — visible at lg+ */}
      <aside className="hidden lg:flex w-[240px] flex-shrink-0 bg-[#F2EADB] border-r border-[#3D2B3C]/10 flex-col">
        <SidebarContent tasks={tasks} family={family} route={route} onInvite={onInvite} />
      </aside>

      {/* MOBILE drawer — slides in from the left */}
      <div className={`lg:hidden fixed inset-0 z-40 ${drawerOpen ? '' : 'pointer-events-none'}`}>
        <div
          onClick={() => setDrawerOpen(false)}
          className={`absolute inset-0 bg-[#1a1416]/45 backdrop-blur-[2px] transition-opacity duration-300 ${drawerOpen ? 'opacity-100' : 'opacity-0'}`}
        />
        <aside
          className={`absolute left-0 top-0 bottom-0 w-[280px] max-w-[85vw] bg-[#F2EADB] shadow-[6px_0_30px_-12px_rgba(61,43,60,0.45)] flex flex-col overflow-y-auto transform transition-transform duration-300 ${drawerOpen ? 'translate-x-0' : '-translate-x-full'}`}
        >
          <SidebarContent
            tasks={tasks}
            family={family}
            route={route}
            onInvite={() => { setDrawerOpen(false); onInvite(); }}
            onClose={() => setDrawerOpen(false)}
          />
        </aside>
      </div>

      {/* main */}
      <main className="flex-1 min-w-0">{children}</main>
    </div>);

}

function NavItem({ icon, label, active }) {
  return (
    <div className={`flex items-center gap-2.5 py-2 px-2 rounded-lg text-[13px] mb-0.5 ${active ? 'bg-[#3D2B3C] text-[#F8F2E7]' : 'text-[#3D2B3C] hover:bg-[#3D2B3C]/8'}`}>
      <span className="text-[10px] opacity-70">{icon}</span>
      <span>{label}</span>
    </div>);

}

/* ---------- the prototype itself ---------- */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mascot_presence": "contextual",
  "skip_intake": false,
  "single_day_rule": true,
  "show_seed_data": true
} /*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // state machine: welcome → intake (idx) → generating → breath → today → task
  const [route, setRoute] = useState('welcome');
  const [intakeIdx, setIntakeIdx] = useState(0);
  const [answers, setAnswers] = useState({});
  const [tasks, setTasks] = useState(INITIAL_TASKS);
  const [family, setFamily] = useState(FAMILY_SEED);
  const [openTaskId, setOpenTaskId] = useState(null);
  const [showInvite, setShowInvite] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);

  // Notify Family workflow state — lifted so desktop + mobile frames stay in sync
  const [nfState, setNfState] = useState(() => ({
    step: 'intro',
    contacts: SEED_CONTACTS.map((c) => ({ ...c, tier: null, status: 'pending', notifiedBy: null, inviteStatus: 'not_invited' })),
    revealed: 3,
    activeId: null,
    scriptKey: 'default',
    draft: TIER3_DRAFT_DEFAULT,
    sent: false
  }));
  const updateNf = (patch) => setNfState((s) => ({ ...s, ...(typeof patch === 'function' ? patch(s) : patch) }));

  // Tweak: skip intake
  useEffect(() => {
    if (tweaks.skip_intake && (route === 'welcome' || route === 'intake' || route === 'generating')) {
      setRoute('today');
    }
  }, [tweaks.skip_intake]);

  // Close mobile drawer when route changes
  useEffect(() => { setDrawerOpen(false); }, [route, openTaskId]);

  const setAnswer = (id, v) => setAnswers((a) => ({ ...a, [id]: v }));
  const toggleTaskDone = (taskId) => setTasks((ts) => ts.map((t) => t.id === taskId ? { ...t, done: !t.done } : t));
  const assignTask = (taskId, who) => setTasks((ts) => ts.map((t) => t.id === taskId ? { ...t, assigneeId: who } : t));

  const handleOpenTask = (id) => {
    setOpenTaskId(id);
    setRoute('task');
  };

  const handleBackToToday = () => {
    setRoute('today');
    setOpenTaskId(null);
  };

  const handleStart = () => {
    setRoute('intake');
    setIntakeIdx(0);
  };

  const handleIntakeComplete = () => {
    // Question (i) — derive tradition_time_sensitive flag for downstream checklist logic.
    // Time-sensitive traditions (jewish/islamic/hindu/sikh) elevate funeral-home + travel
    // tasks to Right Now. Non-time-sensitive picks add tagged tasks without compressing.
    // The full tradition answer also rides on `answers.tradition` for finer-grained handling.
    const TIME_SENSITIVE_TRADITIONS = new Set(['jewish', 'islamic', 'hindu', 'sikh']);
    const trad = answers.tradition;
    const traditionTimeSensitive =
      trad?.share === 'yes' && trad?.traditionId
        ? TIME_SENSITIVE_TRADITIONS.has(trad.traditionId)
        : false;
    // Stamp the derived flag back onto answers so any downstream consumer can read it
    // without re-implementing the lookup.
    setAnswer('tradition_time_sensitive', traditionTimeSensitive);

    // Inner Circle list-builder seeds the workspace with Contact entries that already
    // satisfy the Invites Never Notify gate (notificationStatus = 'known-aware').
    // No contact info is captured at intake — phone/email come later, just-in-time,
    // when the coordinator actually moves to invite them.
    const innerCircle = Array.isArray(answers.inner_circle) ? answers.inner_circle : [];
    if (innerCircle.length > 0) {
      const palette = ['#D4C2CC', '#A893C2', '#F4A88E', '#B8A4C9', '#9B8AAE', '#E8B89E'];
      setFamily((fs) => {
        const seedIds = new Set(fs.map((f) => f.id));
        const additions = innerCircle.map((entry, i) => {
          let id = entry.name.toLowerCase().replace(/[^a-z0-9]/g, '').slice(0, 12) || `member${i}`;
          let unique = id, n = 1;
          while (seedIds.has(unique)) { unique = `${id}${++n}`; }
          seedIds.add(unique);
          return {
            id: unique,
            firstName: entry.name.split(' ')[0],
            relation: entry.relation.toLowerCase().replace(/^their /, ''),
            color: palette[i % palette.length],
            invited: false,
            joined: false,
            notificationStatus: 'known-aware', // Inner Circle by definition
            fromContactId: unique,
            inviteStatus: 'not_invited',
          };
        });
        return [...fs, ...additions];
      });
    }
    setRoute('generating');
  };
  const handleGenDone = () => setRoute('breath');
  const handleBreathDone = () => setRoute('today');

  // shared screen content (pure)
  const renderScreen = () => {
    if (route === 'welcome') {
      return <WelcomeScreen onBegin={handleStart} />;
    }
    if (route === 'intake') {
      return (
        <IntakeScreen
          index={intakeIdx}
          answers={answers}
          setAnswer={setAnswer}
          onNext={() => setIntakeIdx((i) => Math.min(i + 1, visibleQuestions(answers).length - 1))}
          onBack={() => setIntakeIdx((i) => Math.max(i - 1, 0))}
          onComplete={handleIntakeComplete} />);
    }
    if (route === 'generating') {
      return <GeneratingScreen onDone={handleGenDone} />;
    }

    const inner = route === 'task' ?
    openTaskId === 'family' ?
    <NotifyFamilyWorkflow
      task={tasks.find((t) => t.id === openTaskId)}
      family={family}
      onBack={handleBackToToday}
      onMarkDone={() => toggleTaskDone(openTaskId)}
      nf={nfState}
      updateNf={updateNf} /> :

    <TaskDetailScreen
      taskId={openTaskId}
      task={tasks.find((t) => t.id === openTaskId)}
      family={family}
      onBack={handleBackToToday}
      onMarkDone={() => toggleTaskDone(openTaskId)}
      onAssign={assignTask} /> :

    <TodayScreen tasks={tasks} family={family} onOpenTask={handleOpenTask} onInvite={() => setShowInvite(true)} singleDay={tweaks.single_day_rule} introBreath={route === 'breath'} onIntroDone={handleBreathDone} />;

    // Wrap in responsive shell for Today/Task routes
    return (
      <ResponsiveTodayShell
        tasks={tasks}
        family={family}
        route={route}
        onInvite={() => setShowInvite(true)}
        drawerOpen={drawerOpen}
        setDrawerOpen={setDrawerOpen}
      >
        {inner}
      </ResponsiveTodayShell>
    );
  };

  const shellRoute = route === 'today' || route === 'task';

  return (
    <div className="min-h-screen flex flex-col items-stretch bg-[#F8F2E7]">
      {/* header */}
      <header className="bg-white border-b border-[#3D2B3C]/10">
        <div className="max-w-full mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            {shellRoute && (
              <button
                onClick={() => setDrawerOpen(true)}
                className="lg:hidden -ml-1 w-9 h-9 flex items-center justify-center rounded-full text-[#3D2B3C] hover:bg-[#3D2B3C]/8"
                aria-label="Open menu"
              >
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                  <path d="M1 1 H 17 M1 7 H 17 M1 13 H 17" />
                </svg>
              </button>
            )}
            <MascotGlyph size={24} />
            <div className="text-[#3D2B3C]">
              <div className="ff-serif text-[14px] sm:text-[15px] tracking-tight"><span style={{ fontStyle: 'italic', fontWeight: 350 }}>Miss</span>Betty</div>
              <div className="text-[9px] sm:text-[10px] text-[#5A4459]">v1 · the Chen family</div>
            </div>
          </div>
          <RouteCrumbs route={route} intakeIdx={intakeIdx} taskId={openTaskId} setRoute={setRoute} setIntakeIdx={setIntakeIdx} />
        </div>
      </header>

      {/* content */}
      <div className="flex-1 overflow-auto bg-[#F8F2E7]">
        {renderScreen()}
      </div>

      {/* INVITE MODAL */}
      {showInvite &&
      <InviteModal
        onClose={() => setShowInvite(false)}
        family={family}
        setFamily={setFamily}
        onOpenNotify={(contactId) => {
          // Invites Never Notify: route into Notify Family flow scoped to this contact
          setNfState((s) => ({ ...s, step: 'tiers', activeId: contactId }));
          setOpenTaskId('family');
          setRoute('task');
        }} />
      }

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Flow">
          <TweakToggle label="Single-day rule (one thing today)" value={tweaks.single_day_rule} onChange={(v) => setTweak('single_day_rule', v)} />
          <TweakToggle label="Skip intake → Today" value={tweaks.skip_intake} onChange={(v) => setTweak('skip_intake', v)} />
          <TweakButton onClick={() => {setRoute('welcome');setIntakeIdx(0);setAnswers({});}}>Reset to welcome</TweakButton>
        </TweakSection>
        <TweakSection label="Mascot">
          <TweakRadio
            value={tweaks.mascot_presence}
            onChange={(v) => setTweak('mascot_presence', v)}
            options={[
            { value: 'hidden', label: 'Hidden' },
            { value: 'contextual', label: 'Contextual' },
            { value: 'persistent', label: 'Persistent' }]
            } />
        </TweakSection>
      </TweaksPanel>
    </div>);

}

function RouteCrumbs({ route, intakeIdx, taskId, setRoute, setIntakeIdx }) {
  const crumbs = [
  { id: 'welcome', label: 'Welcome' },
  { id: 'intake', label: `Intake · ${intakeIdx + 1}` },
  { id: 'generating', label: 'Reading' },
  { id: 'today', label: 'Today' }];

  if (route === 'task') crumbs.push({ id: 'task', label: 'Task detail' });
  return (
    <div className="hidden sm:flex items-center gap-1.5 text-[10px] ff-mono">
      {crumbs.map((c, i) =>
      <button
        key={c.id}
        onClick={() => {
          if (c.id === 'intake') {setRoute('intake');setIntakeIdx(0);return;}
          setRoute(c.id);
        }}
        className={`px-2 py-1 rounded-full transition ${route === c.id ? 'bg-[#3D2B3C]/10 text-[#3D2B3C]' : 'text-[#5A4459] hover:text-[#3D2B3C]'}`}>
        {String(i + 1).padStart(2, '0')} · {c.label}
        </button>
      )}
    </div>);

}

/* InviteModal — Invites Never Notify gate enforced here.
   For each candidate: if notificationStatus !== 'known-aware', invite is HARD-BLOCKED
   until the coordinator confirms they've been told (or routes to Notify Family). */
function InviteModal({ onClose, family, setFamily, onOpenNotify }) {
  const candidates = family.filter((f) => !f.joined);
  const [selectedIds, setSelectedIds] = useState(() => candidates.filter((c) => c.notificationStatus === 'known-aware').map((c) => c.id));
  const [gating, setGating] = useState(null); // contact id currently being asked the gate question
  const [sent, setSent] = useState(false);

  const toggleSel = (id) => {
    const f = family.find((x) => x.id === id);
    if (!f) return;
    if (f.notificationStatus !== 'known-aware') {
      // gate the toggle: don't add to selection until coordinator confirms aware
      setGating(id);
      return;
    }
    setSelectedIds((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]);
  };

  const confirmAware = (id) => {
    setFamily((fs) => fs.map((f) => f.id === id ? { ...f, notificationStatus: 'known-aware' } : f));
    setSelectedIds((s) => s.includes(id) ? s : [...s, id]);
    setGating(null);
  };

  const routeToNotify = (id) => {
    setGating(null);
    onClose();
    onOpenNotify && onOpenNotify(id);
  };

  const handleSend = () => {
    setFamily((fs) => fs.map((f) => selectedIds.includes(f.id) ? { ...f, invited: true } : f));
    setSent(true);
    setTimeout(onClose, 1400);
  };

  const gatingContact = gating ? family.find((f) => f.id === gating) : null;
  const deceasedName = 'Henry'; // workspace deceased

  return (
    <div className="fixed inset-0 z-40 bg-black/55 backdrop-blur-sm flex items-center justify-center p-6" onClick={onClose}>
      <div className="bg-[#F8F2E7] rounded-[22px] max-w-[460px] w-full p-7 relative" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} className="absolute top-3 right-4 text-[#5A4459] text-xl">×</button>

        {gatingContact ? (
          // GATE: Invites Never Notify
          <div>
            <MascotCard size={48} />
            <h3 className="ff-serif text-[#3D2B3C] mt-3" style={{ fontSize: 22, fontWeight: 400 }}>
              Has {gatingContact.firstName} been told that {deceasedName} died?
            </h3>
            <p className="text-[#5A4459] text-[13px] mt-2 leading-relaxed">
              Invitations should never be the way someone learns of a death. Let's make sure they've heard it from a person first.
            </p>
            <div className="mt-5 flex flex-col gap-2">
              <Btn onClick={() => confirmAware(gatingContact.id)} variant="primary" size="md" className="w-full">
                Yes, they know
              </Btn>
              <Btn onClick={() => routeToNotify(gatingContact.id)} variant="secondary" size="md" className="w-full">
                Not yet — show me how to tell them first
              </Btn>
              <Btn onClick={() => setGating(null)} variant="ghost" size="sm" className="w-full mt-1">
                Back
              </Btn>
            </div>
          </div>
        ) : !sent ? (
          <>
            <MascotCard size={48} />
            <h3 className="ff-serif text-[#3D2B3C] mt-3" style={{ fontSize: 24, fontWeight: 400 }}>
              Bring in the rest of the family.
            </h3>
            <p className="text-[#5A4459] text-[14px] mt-2 leading-relaxed">
              Pick who to invite. They'll get an email with a link and can claim tasks. Only people who already know about {deceasedName} can be invited.
            </p>

            <div className="mt-4 space-y-1.5 max-h-[280px] overflow-y-auto">
              {candidates.map((c) => {
                const aware = c.notificationStatus === 'known-aware';
                const sel = selectedIds.includes(c.id);
                return (
                  <button
                    key={c.id}
                    onClick={() => toggleSel(c.id)}
                    className={`w-full text-left rounded-2xl border px-3 py-2.5 flex items-center gap-3 transition ${
                      sel ? 'border-[#3D2B3C] bg-[#3D2B3C]/[.05]' : 'border-[#3D2B3C]/15 bg-white hover:border-[#3D2B3C]/35'
                    }`}
                  >
                    <span
                      className={`w-4 h-4 rounded border-2 flex items-center justify-center flex-shrink-0 ${
                        sel ? 'border-[#3D2B3C] bg-[#3D2B3C]' : 'border-[#3D2B3C]/30'
                      }`}
                    >
                      {sel && (
                        <svg viewBox="0 0 12 12" width="10" height="10">
                          <path d="M2 6 L 5 9 L 10 3" stroke="#F8F2E7" strokeWidth="2" fill="none" strokeLinecap="round" />
                        </svg>
                      )}
                    </span>
                    <span className="w-7 h-7 rounded-full flex items-center justify-center text-[11px] text-[#3D2B3C]" style={{ background: c.color, fontWeight: 500 }}>
                      {c.firstName[0]}
                    </span>
                    <div className="flex-1 min-w-0">
                      <div className="text-[13px] text-[#3D2B3C]" style={{ fontWeight: 500 }}>{c.firstName}</div>
                      <div className="text-[11px] text-[#5A4459]">{c.relation}</div>
                    </div>
                    {!aware && (
                      <span className="text-[10px] uppercase tracking-[.14em] text-[#B5694C] bg-[#F4A88E]/25 rounded-full px-2 py-0.5 flex-shrink-0">
                        confirm first
                      </span>
                    )}
                  </button>
                );
              })}
            </div>

            <div className="mt-3 text-[11px] text-[#5A4459]/85 leading-relaxed rounded-xl bg-[#3D2B3C]/[.04] border border-[#3D2B3C]/10 px-3 py-2.5">
              <span className="ff-serif italic text-[#3D2B3C]">A small rule of mine:</span> invitations never carry the news. If anyone on this list hasn't been told yet, I'll walk you through telling them first.
            </div>

            <div className="mt-5 flex justify-end gap-2">
              <Btn variant="ghost" onClick={onClose}>Not yet</Btn>
              <Btn onClick={handleSend} variant="coral" disabled={selectedIds.length === 0}>
                Send {selectedIds.length || ''} {selectedIds.length === 1 ? 'invite' : 'invites'}
              </Btn>
            </div>
          </>
        ) : (
          <div className="text-center py-6">
            <MascotCard size={56} />
            <div className="ff-serif text-[#3D2B3C] mt-3" style={{ fontSize: 22, fontWeight: 400 }}>
              Invites sent.
            </div>
            <div className="text-[#5A4459] text-[13px] mt-2">
              When they sign in, they'll show up in your sidebar.
            </div>
          </div>
        )}
      </div>
    </div>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);