/* ============================================================
   Lectual — Founder app shell, router, tweaks, mount
   ============================================================ */
const FTWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "entry": "lectual",
  "dark": false,
  "tone": "plain"
}/*EDITMODE-END*/;

const FNAV = [
  { id: 'dashboard', label: 'Dashboard', icon: FI.home },
  { id: 'portfolio', label: 'IP Portfolio', icon: FI.folder, ct: String(window.FOUNDER_PORTFOLIO.length) },
  { id: 'vault', label: 'The Vault', icon: FI.vault, ct: String(window.FOUNDER_VAULT.length) },
  { id: 'coach', label: 'My Coach', icon: FI.chat },
];
const FNAV_MORE = [
  { id: 'results', label: 'Assessment results', icon: FI.results },
  { id: 'estimator', label: 'Value estimator', icon: FI.est },
  { id: 'matching', label: 'Attorney matching', icon: FI.match },
  { id: 'learning', label: 'Learning center', icon: FI.learn },
  { id: 'settings', label: 'Settings', icon: FI.gear },
];
const FTITLES = {
  dashboard: { eyebrow: 'Overview', title: 'Your IP, at a glance' },
  portfolio: { eyebrow: 'Portfolio', title: 'IP Portfolio' },
  vault: { eyebrow: 'Secure storage', title: 'The Vault' },
  coach: { eyebrow: 'Educational', title: 'My Coach' },
};

function FNav({ view, go, entry, pushToast }) {
  return (
    <div className="fnav">
      <div className="fbrand"><Echo size={21} /></div>
      <div className="ngroup">
        {FNAV.map((n) => (
          <a key={n.id} className={view === n.id ? 'on' : ''} onClick={() => go(n.id)}>{n.icon}{n.label}{n.ct && <span className="ct">{n.ct}</span>}</a>
        ))}
      </div>
      <div className="seg">More</div>
      <div className="ngroup">
        {FNAV_MORE.map((n) => (
          <a key={n.id} onClick={() => pushToast(n.label + ' arrives in the next pass')} style={{ opacity: .6 }}>{n.icon}{n.label}<span className="soon">SOON</span></a>
        ))}
      </div>
      <div className="ftrust">
        <div className="tr">{FI.lock}Bank-level encryption</div>
        <div className="tr">{FI.no}We never train on your ideas</div>
        <div className="faccount" onClick={() => pushToast('Account…')}>
          <span className="av" style={{ background: F.color }}>{F.initials}</span>
          <div><div className="nm">{F.name}</div><div className="em">{F.company}</div></div>
        </div>
      </div>
    </div>
  );
}

function FTop({ view, entry, pushToast }) {
  const t = FTITLES[view] || FTITLES.dashboard;
  const th = THEMES[entry];
  const themed = entry !== 'lectual';
  return (
    <div className="ftop">
      <div><div className="eyebrow">{t.eyebrow}</div><h1>{t.title}</h1></div>
      <div className="sp" />
      {themed && <span className="fpill" title="You entered through your firm — this experience is themed in their brand">via {th.name.split(' · ')[0]}</span>}
      <span className="fpill">{FI.lock}Encrypted</span>
    </div>
  );
}

function FApp() {
  const [t, setTweak] = useTweaks(FTWEAK_DEFAULTS);
  const [view, setView] = useState('dashboard');
  const [toasts, pushToast] = useToasts();
  useEffect(() => { applyTheme(t.entry, t.dark); }, [t.entry, t.dark]);
  const go = useCallback((v) => { setView(v); const el = document.querySelector('.fscroll, .thread'); if (el) el.scrollTop = 0; }, []);

  return (
    <div className="fapp">
      <FNav view={view} go={go} entry={t.entry} pushToast={pushToast} />
      <div className="fmain">
        <FTop view={view} entry={t.entry} pushToast={pushToast} />
        {view === 'dashboard' && <Dashboard go={go} pushToast={pushToast} tone={t.tone} />}
        {view === 'portfolio' && <Portfolio go={go} pushToast={pushToast} />}
        {view === 'vault' && <Vault pushToast={pushToast} />}
        {view === 'coach' && <Coach go={go} />}
      </div>

      <Toaster toasts={toasts} />

      <TweaksPanel>
        <TweakSection label="Entry brand" />
        <TweakSelect label="Entered via" value={t.entry}
          options={[
            { value: 'lectual', label: 'Lectual (direct)' },
            { value: 'rpb', label: 'Rivera Park (firm link)' },
            { value: 'meridian', label: 'Meridian (firm link)' },
          ]}
          onChange={(v) => setTweak('entry', v)} />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakSection label="Voice" />
        <TweakRadio label="Tone" value={t.tone} options={['plain', 'warm', 'bold']} onChange={(v) => setTweak('tone', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<FApp />);