// Framed phone widget (iPhone bezel) + Ops Dashboard mock
const { useState: uSf, useEffect: uEf } = React;

// ─── iPhone-framed call screen ───
function PhonePhoneCallScreen({ script = window.HERO_SCRIPT, accent = "#F57A2B" }) {
  const [step, setStep] = uSf(0);
  const [tick, setTick] = uSf(0);
  uEf(() => {
    const cur = script[step];
    const dwell = cur.kind === "ring" ? 1400 : cur.kind === "pick" ? 1100 : cur.kind === "done" ? 2400 : Math.max(1600, (cur.text?.length || 0) * 30 + 600);
    const t = setTimeout(() => {
      setStep((s) => (s + 1) % script.length);
      if (step === script.length - 1) setTick((x) => x + 1);
    }, dwell);
    return () => clearTimeout(t);
  }, [step, script]);

  const visible = script.slice(0, step + 1);
  const last = script[step];
  const now = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });

  return (
    <div className="iphone-frame" key={tick}>
      <div className="iphone-island" />
      <div className="iphone-status">
        <span className="iphone-status-time">{now}</span>
        <span className="iphone-status-r">
          <svg viewBox="0 0 18 12" width="16" height="11" fill="#fff"><rect x="0" y="7" width="3" height="5" rx="0.5"/><rect x="5" y="5" width="3" height="7" rx="0.5"/><rect x="10" y="3" width="3" height="9" rx="0.5"/><rect x="15" y="0" width="3" height="12" rx="0.5"/></svg>
          <svg viewBox="0 0 14 12" width="14" height="11" fill="#fff"><path d="M7 9.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM3.5 6.5a5 5 0 017 0L9 8a3 3 0 00-4 0L3.5 6.5zM0 3a10 10 0 0114 0l-1.5 1.5a8 8 0 00-11 0L0 3z"/></svg>
          <div className="iphone-battery"><div className="iphone-battery-fill" /></div>
        </span>
      </div>
      <div className="iphone-screen">
        <div className="iphone-call-head">
          <div className="iphone-call-meta">
            <div className="iphone-call-label mono">SERVICEAI · LIVE CALL</div>
            <div className="iphone-call-name">+1 (310) 555-0142</div>
            <div className="iphone-call-sub">Incoming · El Segundo, CA</div>
          </div>
          <div className="iphone-call-timer mono">{last.kind === "ring" ? "00:00" : last.kind === "pick" ? "00:02" : last.kind === "done" ? "01:47" : "00:" + String(20 + step * 11).padStart(2,"0")}</div>
        </div>
        <div className="iphone-stream">
          {visible.map((s, i) => <FramedLine key={i} step={s} active={i === step} accent={accent} />)}
        </div>
        <div className="iphone-call-foot">
          <div className="iphone-wave">{Array.from({length:24}).map((_,i)=><span key={i} style={{animationDelay:`${(i*70)%1800}ms`}}/>)}</div>
          <div className="iphone-call-status mono small">{last.kind === "done" ? "Call complete · transcript sent" : last.kind === "ring" ? "Ringing…" : "Connected · AI handling"}</div>
        </div>
      </div>
      <div className="iphone-home" />
    </div>
  );
}

function FramedLine({ step, active, accent }) {
  const text = step.text || "";
  const typed = window.useTypewriter ? window.useTypewriter(text, 22, active) : text;
  if (step.kind === "ring") return <div className="fl fl-sys"><IconRender name="phoneMissed" size={14} /> <span>{step.label}</span></div>;
  if (step.kind === "pick") return <div className="fl fl-sys"><IconRender name="dot" size={12} /> <span>{step.label}</span></div>;
  if (step.kind === "done") return <div className="fl fl-sys done"><IconRender name="check" size={14} /> <span>{step.label}</span></div>;
  const isAi = step.kind === "ai";
  return (
    <div className={"fl " + (isAi ? "fl-ai" : "fl-user")}>
      <div className="fl-who mono">{isAi ? "AI · MARIA" : "CALLER"}</div>
      <div className="fl-bubble">{typed}{active && typed.length < text.length && <span className="caret blink" />}</div>
    </div>
  );
}

// ─── Ops Dashboard ───
function OpsDashboard() {
  const [tab, setTab] = uSf("live");
  return (
    <section className="sec sec-dash">
      <SectionHead num="07" kicker="OPS CONSOLE · OPTIONAL" title={<>The dashboard you don't have to <span className="muted">check.</span></>}
        right={<div className="mono small muted">Most owners check once a week. Built for the times you want to.</div>}/>
      <div className="dash">
        <div className="dash-chrome">
          <div className="dash-chrome-l">
            <span className="dash-dots"><i/><i/><i/></span>
            <span className="dash-url mono"><IconRender name="dot" size={8} /> app.serviceai.hq / mikes-auto</span>
          </div>
          <div className="dash-chrome-r mono small"><span className="dot live"/> ALL SYSTEMS NOMINAL</div>
        </div>
        <div className="dash-body">
          <aside className="dash-side">
            <div className="dash-brand">
              <span className="dash-logo">◇</span>
              <span><strong>Mike's Auto</strong><span className="mono small muted">EL SEGUNDO · CA</span></span>
            </div>
            <nav className="dash-nav">
              {[
                {k:"live", icon:"pulse", label:"Live Ops", badge:"3"},
                {k:"calls", icon:"voice", label:"Calls"},
                {k:"convs", icon:"sms", label:"Conversations"},
                {k:"cal", icon:"calendar", label:"Calendar"},
                {k:"contacts", icon:"workflow", label:"Contacts"},
                {k:"agents", icon:"spark", label:"Agents"},
                {k:"reports", icon:"arrow", label:"Reports"},
              ].map(n => (
                <button key={n.k} className={"dash-nav-i " + (tab===n.k?"on":"")} onClick={()=>setTab(n.k)}>
                  <IconRender name={n.icon} size={14} /> <span>{n.label}</span>
                  {n.badge && <span className="dash-nav-badge">{n.badge}</span>}
                </button>
              ))}
            </nav>
            <div className="dash-side-foot mono small muted">v 4.2.1 · synced 14s ago</div>
          </aside>
          <main className="dash-main">
            <div className="dash-head">
              <div>
                <div className="mono small muted">TUESDAY · OCT 28 · 10:42 AM</div>
                <h3 className="dash-h">Live operations</h3>
              </div>
              <div className="dash-head-r">
                <button className="dash-btn"><IconRender name="arrowDown" size={11}/> Today</button>
                <button className="dash-btn primary"><IconRender name="spark" size={11}/> New workflow</button>
              </div>
            </div>
            <div className="dash-tiles">
              <DashTile label="ACTIVE CALLS" value="3" trend="+2 from yesterday" pulse />
              <DashTile label="BOOKED TODAY" value="14" trend="+5 vs avg" />
              <DashTile label="RECOVERED $" value="$2,840" trend="+$420 vs avg" flame />
              <DashTile label="AVG RESPONSE" value="48s" trend="−12s vs week" green />
            </div>
            <div className="dash-split">
              <div className="dash-panel">
                <div className="dash-panel-h"><span>Active conversations</span><span className="mono small" style={{color:"#4ADE80"}}>● 3 live</span></div>
                <ul className="dash-conv">
                  <DashConv name="+1 (310) 555-0142" channel="voice" status="live" line="Booking oil change Wed 3pm" t="00:42" />
                  <DashConv name="Linda M." channel="sms" status="live" line="What time is my appt tomorrow?" t="just now" />
                  <DashConv name="+1 (424) 555-0188" channel="voice" status="live" line="Asking about tire rotation pricing" t="01:14" />
                  <DashConv name="James K." channel="email" status="queued" line="Following up on quote from Friday" t="2m ago" />
                  <DashConv name="+1 (310) 555-0299" channel="voice" status="done" line="Booked · brake inspection Thu 9am" t="6m ago" />
                </ul>
              </div>
              <div className="dash-panel">
                <div className="dash-panel-h"><span>Today's funnel</span><span className="mono small muted">10:42 AM</span></div>
                <div className="dash-funnel">
                  <FunnelRow label="Inbound contacts" v={62} max={62} />
                  <FunnelRow label="Conversations engaged" v={58} max={62} />
                  <FunnelRow label="Qualified intent" v={31} max={62} />
                  <FunnelRow label="Appts booked" v={14} max={62} flame />
                  <FunnelRow label="Escalated to owner" v={2} max={62} alert />
                </div>
                <div className="dash-funnel-foot mono small">
                  <span>Conversion <strong style={{color:"var(--flame-500)"}}>22.5%</strong></span>
                  <span className="muted">↑ 4.1pp vs last Tuesday</span>
                </div>
              </div>
            </div>
            <div className="dash-panel">
              <div className="dash-panel-h"><span>Agent activity · last 60 minutes</span><button className="dash-link mono small">view all →</button></div>
              <div className="dash-log">
                {[
                  {t:"10:41", a:"Maria·Voice", what:"Booked oil change for J. Reyes — Wed 3:00 PM", out:"+$89"},
                  {t:"10:37", a:"Maria·Voice", what:"Quoted brake inspection · sent SMS follow-up", out:"queued"},
                  {t:"10:33", a:"OpenClaw",   what:"Detected slow Thursday — outreach to 12 dormant", out:"running"},
                  {t:"10:28", a:"Maria·SMS",  what:"Confirmed appt with L. Martinez — Wed 11 AM", out:"+$240"},
                  {t:"10:19", a:"Maria·Voice", what:"Escalated warranty question to owner", out:"alert"},
                  {t:"10:11", a:"Maria·Email", what:"Replied to quote request from K. Tran", out:"queued"},
                ].map((r,i) => (
                  <div className="dash-log-row" key={i}>
                    <span className="mono small">{r.t}</span>
                    <span className="dash-log-a mono small">{r.a}</span>
                    <span className="dash-log-w">{r.what}</span>
                    <span className={"dash-log-o mono small out-" + (r.out.startsWith("+")?"good":r.out==="alert"?"bad":"neutral")}>{r.out}</span>
                  </div>
                ))}
              </div>
            </div>
          </main>
        </div>
      </div>
    </section>
  );
}

function DashTile({ label, value, trend, pulse, flame, green }) {
  return (
    <div className={"dash-tile " + (flame?"flame":green?"green":"")}>
      <div className="dash-tile-l mono small">{label}{pulse && <span className="dot live" style={{marginLeft:8,width:6,height:6}}/>}</div>
      <div className="dash-tile-v">{value}</div>
      <div className="dash-tile-t mono small muted">{trend}</div>
    </div>
  );
}
function DashConv({ name, channel, status, line, t }) {
  const ico = channel === "voice" ? "voice" : channel === "sms" ? "sms" : "email";
  return (
    <li className={"dash-conv-row " + status}>
      <span className="dash-conv-ico"><IconRender name={ico} size={13}/></span>
      <span className="dash-conv-name">{name}</span>
      <span className="dash-conv-line">{line}</span>
      <span className="dash-conv-status mono small">{status === "live" ? <><span className="dot live" style={{width:6,height:6}}/> live</> : status === "queued" ? "queued" : "done"}</span>
      <span className="dash-conv-t mono small muted">{t}</span>
    </li>
  );
}
function FunnelRow({ label, v, max, flame, alert }) {
  return (
    <div className="funnel-row">
      <span className="funnel-l">{label}</span>
      <div className="funnel-bar"><div className={"funnel-fill " + (flame?"flame":alert?"alert":"")} style={{width:(v/max*100)+"%"}}/></div>
      <span className="funnel-v mono">{v}</span>
    </div>
  );
}

window.PhonePhoneCallScreen = PhonePhoneCallScreen;
window.OpsDashboard = OpsDashboard;