/* misc routes — marketing-adjacent + fallback */
const Support = () => (
  <div className="page page-mount">
    <div className="page-header">
      <div><h1 className="page-title">Help & support</h1><p className="page-sub">Docs, a support line, and Mikaka's own receptionist if you just want to talk.</p></div>
    </div>
    <div className="grid grid-3 stagger">
      {[
        { i: "book", t: "Documentation", d: "Guides, API reference, sample playbooks.", cta: "Open docs" },
        { i: "phone", t: "Call support", d: "Mon–Fri · 8am–8pm EAT · English & Swahili.", cta: "+254 20 765 4000" },
        { i: "mail", t: "Email us", d: "We reply within 2 business hours.", cta: "help@mikaka.io" },
      ].map((c,i) => (
        <div key={i} className="card card-pad">
          <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--accent-soft)", color: "var(--mk-orange-600)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}><Icon name={c.i}/></div>
          <div style={{ fontWeight: 500, marginBottom: 4 }}>{c.t}</div>
          <div style={{ fontSize: 13, color: "var(--fg-muted)", marginBottom: 14 }}>{c.d}</div>
          <a className="dot-link" style={{ fontSize: 13 }}>{c.cta} →</a>
        </div>
      ))}
    </div>
  </div>
);

const CallsGlobal = () => (
  <div className="page page-mount">
    <div className="page-header">
      <div><h1 className="page-title">All calls</h1><p className="page-sub">Every call across every tenant — live.</p></div>
      <button className="btn btn-outline"><Icon name="download"/> Export</button>
    </div>
    <div className="card">
      <table className="tbl">
        <thead><tr><th>Tenant</th><th>Caller</th><th>Intent</th><th>Outcome</th><th>Duration</th><th>Time</th></tr></thead>
        <tbody>
          {[
            ["Acme Dentistry","+254 722 ••• 341","Book appointment","booked","2:14","12s",true],
            ["Twiga Foods","+254 701 ••• 882","Order status","handled","1:08","48s"],
            ["Chipper Cash","+234 803 ••• 119","Balance check","handled","0:52","1m"],
            ["Kopo Kopo","+254 711 ••• 404","Activation","escalated","3:02","4m"],
            ["Sendy","+254 720 ••• 551","Pickup schedule","booked","1:44","6m"],
          ].map((r,i) => (
            <tr key={i}>
              <td className="cell-strong">{r[0]}</td>
              <td><div className="row gap-2">{r[6] && <span className="live-dot"/>}<span className="mono">{r[1]}</span></div></td>
              <td>{r[2]}</td>
              <td><Chip kind={r[3]==="booked"?"live":r[3]==="escalated"?"warn":"accent"} dot>{r[3]}</Chip></td>
              <td className="mono">{r[4]}</td>
              <td style={{ color: "var(--fg-muted)" }}>{r[5]} ago</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

window.Support = Support;
window.CallsGlobal = CallsGlobal;