/* ============================================================
   O2 — Public Audit · app shell (connect → scan → report)
   ============================================================ */
const AUD_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "warm",
  "start": "connect",
  "firm": "Rivera Park IP"
}/*EDITMODE-END*/;

function Connect({ firm, onRun }) {
  const [sel, setSel] = useState('lawmatics');
  return (
    <div className="connect">
      <div className="ghost-mark" aria-hidden="true">%</div>
      <div className="connect-eye kicker">Free · no signup · stores nothing</div>
      <h1>Audit your firm’s intake in 60 seconds.</h1>
      <p className="lead">Connect your CRM read-only and we’ll show you exactly where leads leak, where your tags broke, and the operating system we’d build to fix it.</p>

      <div className="connect-grid">
        {A.connectors.map((c) => (
          <button key={c.id} className={'cxn' + (sel === c.id ? ' sel' : '')} onClick={() => setSel(c.id)}>
            <span className="pick">{Ico.check}</span>
            <span className="glyph" style={{ background: c.tint }}>{c.glyph}</span>
            <span className="cn">{c.name}</span>
            <span className={'cs' + (c.status === 'beta' ? ' beta' : '')}>{c.status === 'live' ? 'Connected' : 'Beta'}</span>
          </button>
        ))}
      </div>

      <div className="connect-go">
        <span className="connect-readonly">{Ico.lock} Read-only access · we can’t change a thing</span>
        <button className="btn btn-primary btn-lg" onClick={() => onRun(sel)}>Run my free audit <span className="ar">→</span></button>
      </div>

      <div className="connect-foot">
        <span className="trustline">{Ico.shield} Not a law firm</span>
        <span className="trustline">{Ico.lock} We store nothing</span>
        <span className="trustline">{Ico.check} SOC 2 Type II</span>
      </div>
    </div>
  );
}

function Scanning({ onDone }) {
  const steps = A.scan;
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (idx >= steps.length) { const t = setTimeout(onDone, 520); return () => clearTimeout(t); }
    const t = setTimeout(() => setIdx((n) => n + 1), idx === 0 ? 480 : 420);
    return () => clearTimeout(t);
  }, [idx]);
  const pct = Math.min(100, Math.round((idx / steps.length) * 100));
  return (
    <div className="scan">
      <div className="scan-orb">
        <div className="ring"></div><div className="ring r2"></div>
        <div className="pct">{pct}%</div>
      </div>
      <h2>Reading {A.firm.name}’s CRM…</h2>
      <div className="sub mono">READ-ONLY · NOTHING IS STORED</div>
      <div className="scan-list">
        {steps.map((s, i) => {
          const state = i < idx ? 'done' : i === idx ? 'active' : '';
          return (
            <div className={'scan-row ' + state} key={i}>
              <span className="scan-ic">{i < idx ? Ico.check : null}</span>
              {s}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere" />
      <TweakRadio label="Mood" value={t.mood} options={[{ value: 'warm', label: 'Warm' }, { value: 'cool', label: 'Cool' }, { value: 'dark', label: 'Dark' }]} onChange={(v) => setTweak('mood', v)} />
      <TweakSection label="Demo" />
      <TweakRadio label="Open on" value={t.start} options={[{ value: 'connect', label: 'Connect flow' }, { value: 'report', label: 'The report' }]} onChange={(v) => setTweak('start', v)} />
      <TweakText label="Firm name" value={t.firm} onChange={(v) => setTweak('firm', v)} />
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(AUD_DEFAULTS);
  const [phase, setPhase] = useState(t.start === 'report' ? 'report' : 'connect');
  useEffect(() => { applyMood(t.mood); }, [t.mood]);
  useEffect(() => { setPhase(t.start === 'report' ? 'report' : 'connect'); }, [t.start]);
  const firm = t.firm || A.firm.name;

  return (
    <React.Fragment>
      <Nav active="For firms" links={[{ t: 'Platform', href: 'Lectual Marketing Home.html#platform' }, { t: 'For founders', href: 'Lectual Marketing Home.html#founders' }, { t: 'For firms', href: 'Lectual Marketing Home.html#firms' }, { t: 'Pricing', href: 'Lectual Marketing Home.html#pricing' }]} />
      <div className="audit-main">
        {phase === 'connect' && <Connect firm={firm} onRun={() => setPhase('scan')} />}
        {phase === 'scan' && <Scanning onDone={() => setPhase('report')} />}
        {phase === 'report' && <Report key={firm} firm={firm} onRestart={() => setPhase('connect')} />}
      </div>
      {phase !== 'scan' && <Footer />}
      <Tweaks t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);