/* OpSpot — 24h install timeline + receipts, trust & safety. */
const { useState, useEffect } = React;

const TL = [
  { num: '01', when: 'Hour 0', title: 'Audit', body: 'Recon maps your calls, leads, and dropped tasks and finds the money. You leave with a written leak ledger and a net-ROI target.', c: 'var(--recon)' },
  { num: '02', when: 'Hour 0–8', title: 'Build', body: 'We connect your phone, inbox, calendar, and the tools you already run — then write the scripts, approval rules, and Redpen guardrails around how you work.', c: 'var(--orbit)' },
  { num: '03', when: 'Hour 8–18', title: 'Install', body: 'Number ported or forwarded, inbox routed, calendar synced. Quiet hours and sender policy dialed in. Kill switch tested.', c: 'var(--comms)' },
  { num: '04', when: 'Hour 18–24', title: 'Run', body: 'Courier goes live with a human on the bridge. Receipts stream into your Command Center. The ROI ledger starts counting.', c: 'var(--dealdesk)' },
];

const RECEIPTS = [
  { c: 'var(--recon)', h: 'AUDIT.LOG', l1: 'business · Ridge Plumbing', l2: 'leak · $14.8k/mo recoverable', l3: 'target · 5.9× net ROI', sig: 'op-aud-04A1' },
  { c: 'var(--orbit)', h: 'BUILD.LOG', l1: 'crew · Courier, Recon, Comms, Redpen, Marshal', l2: 'tools · Jobber, Stripe, Twilio', l3: 'rules · auto-send ≤ $2,500', sig: 'op-bld-72C3' },
  { c: 'var(--comms)', h: 'INSTALL.LOG', l1: 'port · +1 412-555-0114', l2: 'inbox · service@ridge → routed', l3: 'killswitch · /kill verified', sig: 'op-ins-91F4' },
  { c: 'var(--dealdesk)', h: 'RUN.LOG', l1: 't+0:14 · first call answered', l2: 't+1:02 · first job booked', l3: 't+3:48 · first leak recovered', sig: 'op-run-A8E2' },
];

function Timeline() {
  return (
    <section className="section-pad" id="install" style={{ paddingTop: 110 }}>
      <div className="container">
        <Reveal className="sec-head">
          <span className="kicker">Implementation · from hire to live in a day</span>
          <h2 className="display" style={{ marginTop: 14 }}>From hire to recovering money — in a day.</h2>
          <p>We do the work; you watch it land. Every step writes a receipt, so the install is auditable, not magical — and the ROI ledger starts counting the moment Courier picks up.</p>
        </Reveal>
        <Reveal delay={1} className="timeline-wrap">
          <div className="tl-track">
            <div className="tl-line" />
            <div className="tl-steps">
              {TL.map((s) => (
                <div className="tl-step" key={s.num} style={{ '--c': s.c }}>
                  <div className="num mono">{s.num}</div>
                  <div className="when" style={{ marginTop: 18 }}>{s.when}</div>
                  <h4>{s.title}</h4>
                  <p>{s.body}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="receipts">
            {RECEIPTS.map((r, i) => (
              <div className="receipt" key={i} style={{ '--c': r.c }}>
                <div className="rh"><span>{r.h}</span><span>{r.sig}</span></div>
                <div><span className="k">› </span><b>{r.l1.split(' · ')[0]}</b> · {r.l1.split(' · ')[1]}</div>
                <div><span className="k">› </span><b>{r.l2.split(' · ')[0]}</b> · {r.l2.split(' · ')[1]}</div>
                <div><span className="k">› </span><b>{r.l3.split(' · ')[0]}</b> · {r.l3.split(' · ')[1]}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Trust() {
  const cards = [
    { id: 'redpen', t: 'Redpen clears every send', d: 'Truth, risk, overpromising, privacy, and tone — checked before anything customer-facing leaves the building.',
      ex: (<><span className="key">HOLD › </span><b>$8.4k proposal</b> · price claim needs sign-off</>) },
    { id: 'courier', t: 'Human approval gates', d: 'Set thresholds per job — proposals over $X, refunds, anything off-script. The crew drafts; you approve.',
      ex: (<><span className="key">RULE › </span>auto-send ≤ <b>$2,500</b> · else approve</>) },
    { id: 'marshal', t: 'Quiet hours & sender policy', d: 'Hard windows for SMS, email, and calls. Per-channel daily caps. No 11pm “just checking in.”',
      ex: (<><span className="key">SMS › </span>09:00–19:00 · cap <b>3/contact/wk</b></>) },
    { id: 'comms', t: 'Receipts on everything', d: 'Every call, message, booking, and recovered dollar writes a signed receipt. Searchable, exportable, auditable.',
      ex: (<><span className="key">RCPT › </span>op-run-A8E2 · <b>signed</b> · 23 events</>) },
    { id: 'recon', t: 'Kill switch', d: 'One click pauses the whole crew across every channel. Phones forward to you. Nothing restarts until you say so.',
      ex: (<><span className="key">/kill › </span>crew <b>paused</b> · phones → owner</>) },
    { id: 'orbit', t: 'Your data, your tools', d: 'We connect to what you already run — Jobber, HubSpot, Square, Sheets, your own DB. No lock-in. Export anytime.',
      ex: (<><span className="key">CONN › </span>jobber · stripe · twilio · <b>read-write</b></>) },
  ];
  return (
    <section className="section-pad" id="trust" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal className="sec-head">
          <span className="kicker"><b>07</b> · Trust & receipts</span>
          <h2 className="display" style={{ marginTop: 14 }}>AI that asks before it acts — and proves what it did.</h2>
          <p>Every dollar, every send, every commitment runs through a rule you control and a receipt you can open. The crew works for you, never the other way around.</p>
        </Reveal>
        <div className="trust-grid">
          {cards.map((c, i) => {
            const m = CREW.find(x => x.id === c.id) || CREW[0];
            return (
              <Reveal delay={(i % 3) + 1} className="trust-card" key={c.t} style={{ '--c': m.c }}>
                <div className="ico" style={{ color: m.c, borderColor: 'var(--line-2)' }}><Ico d={crewIcon(c.id)} size={18} /></div>
                <h4>{c.t}</h4>
                <p>{c.d}</p>
                <div className="ex">{c.ex}</div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ImplementationOverlay({ open, onClose }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="pricing-overlay" onClick={(e) => { if (e.target.classList.contains('pricing-overlay')) onClose(); }}>
      <button className="pricing-close" onClick={onClose} aria-label="Close implementation"><Ico d={ICONS.x} size={20} /></button>
      <div className="pricing-sheet">
        <Timeline />
      </div>
    </div>
  );
}

Object.assign(window, { Timeline, Trust, ImplementationOverlay });