// site-dutyofcare-demo.jsx — Featured R24 PULSE Duty-of-Care travel risk + reporting console.
// Recreated from the Enterprise Travel Management reference. Single console frame
// (navy sidebar + topbar) cycling three views:
//   1 Travel Journeys  — exec KPI strip + journeys table (risk / check-in / approval)
//   2 Risk Analytics   — KPI strip + risk donut + top destinations + crisis strip
//   3 Risk & Compliance Report — generated report: stats, risk bars, compliance, geo exposure

const { useState: useDocState, useEffect: useDocEffect } = React;

const DIcon = ({ d, s = 18, sw = 2, fill = "none" }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={fill} stroke={fill === "none" ? "currentColor" : "none"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p}/>) : <path d={d}/>}
  </svg>
);
const DI = {
  report: ["M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z", "M13 2v7h7"],
  broadcast: ["M12 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z", "M16.24 7.76a6 6 0 0 1 0 8.49M7.76 16.24a6 6 0 0 1 0-8.49M19.07 4.93a10 10 0 0 1 0 14.14M4.93 19.07a10 10 0 0 1 0-14.14"],
  brain: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-5 0 3 3 0 0 1-.4-5.6A2.5 2.5 0 0 1 8 4.8 2.5 2.5 0 0 1 9.5 2z",
  siren: ["M8 17v-5a4 4 0 0 1 8 0v5", "M5 17h14v4H5zM12 5V3"],
  plane: "M17.8 19.2 16 11l3.5-3.5C21 6 21 4 19 4c-2 0-3 1-3 1l-5 1.5L4 4 2 6l7 4-1 3-4-1-1 2 4 2 2 4 2-1-1-4 3-1z",
  car: ["M5 17H3a2 2 0 0 1-2-2v-1l2.4-6A2 2 0 0 1 5.2 7h13.6a2 2 0 0 1 1.86 1l2.34 6v1a2 2 0 0 1-2 2h-2", "M8.5 17a2.5 2.5 0 1 0 0 .01M15.5 17a2.5 2.5 0 1 0 0 .01M1 14h22"],
  msg: ["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", "M8 9h8M8 13h5"],
  gear: ["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H1a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V1a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H23a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"],
  search: ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "M21 21l-4.3-4.3"],
  download: ["M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", "M7 10l5 5 5-5M12 15V3"],
  chart: "M22 12h-4l-3 9L9 3l-3 9H2",
  pinG: ["M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z", "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
  bell: ["M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9", "M13.7 21a2 2 0 0 1-3.4 0"],
  alert: ["M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z", "M12 9v4M12 17h.01"],
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  check: "M20 6 9 17l-5-5",
};

const DOC_NAV = [
  { id: "reports",  label: "Reports",        icon: DI.report },
  { id: "broadcast",label: "Broadcast",      icon: DI.broadcast },
  { id: "risk",     label: "Risk Intel",     icon: DI.brain },
  { id: "alerts",   label: "Alerts",         icon: DI.siren },
  { id: "travel",   label: "Travel",         icon: DI.plane },
  { id: "transport",label: "Transport",      icon: DI.car },
  { id: "comms",    label: "Communication",  icon: DI.msg },
];

const AV_COLORS = ["#1B4F8A", "#0F766E", "#7C3AED", "#B45309", "#9D174D", "#15803D", "#4338CA", "#A16207"];
const avColor = (name) => AV_COLORS[(name.charCodeAt(0) + name.length) % AV_COLORS.length];
const initials = (name) => name.split(" ").map(w => w[0]).slice(0, 2).join("");

// ---- journeys data ----
const DOC_JOURNEYS = [
  { name: "Dohan Smit", dept: "Engineering", fromC: "JNB", fromN: "Johannesburg", toC: "LOS", toN: "Lagos", dates: "28 May – 02 Jun", dur: "5 days", status: ["In Transit", "blue"], checkin: ["Overdue", "red"], risk: ["High", "red"], approval: ["Approved", "green"], alert: true },
  { name: "Aisha Mokoena", dept: "Field Ops", fromC: "CPT", fromN: "Cape Town", toC: "NBO", toN: "Nairobi", dates: "28 May – 31 May", dur: "3 days", status: ["In Transit", "blue"], checkin: ["On Time", "green"], risk: ["Medium", "amber"], approval: ["Approved", "green"], alert: false },
  { name: "James Okoro", dept: "Sales", fromC: "LHR", fromN: "London", toC: "DXB", toN: "Dubai", dates: "29 May – 04 Jun", dur: "6 days", status: ["Scheduled", "grey"], checkin: ["Pending", "grey"], risk: ["Low", "green"], approval: ["Auto", "blue"], alert: false },
  { name: "Lerato Dlamini", dept: "Executive", fromC: "JNB", fromN: "Johannesburg", toC: "CAI", toN: "Cairo", dates: "27 May – 30 May", dur: "3 days", status: ["In Transit", "blue"], checkin: ["Overdue", "red"], risk: ["High", "red"], approval: ["Approved", "green"], alert: true },
  { name: "Marcus Chen", dept: "Procurement", fromC: "SIN", fromN: "Singapore", toC: "JKT", toN: "Jakarta", dates: "28 May – 01 Jun", dur: "4 days", status: ["In Transit", "blue"], checkin: ["On Time", "green"], risk: ["Medium", "amber"], approval: ["Approved", "green"], alert: false },
  { name: "Sara Bennani", dept: "Legal", fromC: "CMN", fromN: "Casablanca", toC: "PAR", toN: "Paris", dates: "30 May – 03 Jun", dur: "4 days", status: ["Scheduled", "grey"], checkin: ["Pending", "grey"], risk: ["Low", "green"], approval: ["Pending", "amber"], alert: false },
  { name: "Thabo Ndlovu", dept: "Mining Ops", fromC: "JNB", fromN: "Johannesburg", toC: "FIH", toN: "Kinshasa", dates: "26 May – 29 May", dur: "3 days", status: ["In Transit", "blue"], checkin: ["On Time", "green"], risk: ["High", "red"], approval: ["Approved", "green"], alert: true },
  { name: "Emma Wallace", dept: "Finance", fromC: "JFK", fromN: "New York", toC: "MEX", toN: "Mexico City", dates: "25 May – 28 May", dur: "3 days", status: ["Completed", "green"], checkin: ["N/A", "grey"], risk: ["Medium", "amber"], approval: ["Approved", "green"], alert: false },
  { name: "Raj Patel", dept: "Engineering", fromC: "BOM", fromN: "Mumbai", toC: "LHR", toN: "London", dates: "29 May – 05 Jun", dur: "7 days", status: ["Scheduled", "grey"], checkin: ["Pending", "grey"], risk: ["Low", "green"], approval: ["Auto", "blue"], alert: false },
];

const DBadge = ({ v }) => <span className={`doc-badge doc-b-${v[1]}`}>{v[0]}</span>;

// =============================================================
// Shared chrome
// =============================================================
function DocSidebar({ activeNav }) {
  return (
    <aside className="doc-sidebar">
      <div className="doc-sidebar__logo"><img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt="R24"/></div>
      <nav className="doc-sidebar__nav">
        {DOC_NAV.map(n => (
          <div key={n.id} className={`doc-navi ${activeNav === n.id ? "doc-navi--active" : ""}`} title={n.label}>
            <DIcon d={n.icon} s={17} sw={1.8}/>
          </div>
        ))}
      </nav>
      <div className="doc-sidebar__spacer"/>
      <div className="doc-navi" title="Settings"><DIcon d={DI.gear} s={17} sw={1.8}/></div>
      <div className="doc-sidebar__foot">Powered<br/>by R24</div>
    </aside>
  );
}

function DocTopbar() {
  return (
    <div className="doc-topbar">
      <div className="doc-topbar__brand">
        <div className="doc-topbar__mark"><img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt=""/></div>
        <div className="doc-topbar__names">
          <span className="doc-topbar__name">R24 PULSE</span>
          <span className="doc-topbar__sub">Duty of Care Platform</span>
        </div>
        <span className="doc-topbar__chip">Travel Risk Management</span>
      </div>
      <div className="doc-topbar__right">
        <div className="doc-userpill">
          <div className="doc-userpill__av">MH</div>
          <div className="doc-userpill__div"/>
          <div>
            <div className="doc-userpill__name">Marlize Holtzhausen</div>
            <div className="doc-userpill__role">Group CEO · R24 International</div>
          </div>
        </div>
        <div className="doc-bell"><DIcon d={DI.bell} s={15} sw={2}/></div>
      </div>
    </div>
  );
}

// =============================================================
// View 1 — Travel Journeys
// =============================================================
const DOC_EXEC = [
  { v: "50,000", l: "Total Travellers", t: "" },
  { v: "1,248",  l: "Active Journeys",  t: "blue" },
  { v: "312",    l: "Pending Journeys", t: "amber" },
  { v: "42",     l: "High-Risk Travellers", t: "red" },
  { v: "18",     l: "Overdue Check-Ins", t: "red" },
];

function DocJourneys() {
  return (
    <div className="doc-view">
      <div className="doc-exec">
        {DOC_EXEC.map((s, i) => (
          <div key={i} className={`doc-exec__stat ${s.t ? `doc-s-${s.t}` : ""}`}>
            <div className="doc-exec__val">{s.v}</div>
            <div className="doc-exec__lbl">{s.l}</div>
          </div>
        ))}
      </div>

      <div className="doc-search">
        <DIcon d={DI.search} s={14} sw={2.2}/>
        <span>Search traveller, route, city or journey reference</span>
      </div>

      <div className="doc-tabs">
        <span className="doc-tab doc-tab--active">All Journeys <i className="doc-tabn">20</i></span>
        <span className="doc-tab">Active <i className="doc-tabn">9</i></span>
        <span className="doc-tab">Pending <i className="doc-tabn">3</i></span>
        <span className="doc-tab">Past <i className="doc-tabn">8</i></span>
        <span className="doc-tab"><DIcon d={DI.chart} s={11} sw={2.2}/> Risk Analytics</span>
      </div>

      <div className="doc-table-card">
        <div className="doc-trow doc-thead">
          <span>Traveller</span><span>Route</span><span>Dates</span><span>Status</span><span>Check-In</span><span>Risk</span><span>Approval</span>
        </div>
        <div className="doc-tbody">
          {DOC_JOURNEYS.map((j, i) => (
            <div key={i} className={`doc-trow doc-tbodyrow ${j.alert ? "doc-trow--alert" : ""}`}>
              <span className="doc-trav">
                <span className="doc-av" style={{ background: avColor(j.name) }}>{initials(j.name)}</span>
                <span className="doc-trav__meta"><b>{j.name}</b><i>{j.dept}</i></span>
              </span>
              <span className="doc-route">
                <span className="doc-route__top"><i className="doc-pin doc-pin--g">●</i><b>{j.fromC}</b><span className="doc-route__dash"/><i className="doc-pin doc-pin--r">●</i><b>{j.toC}</b></span>
                <span className="doc-route__sub">{j.fromN} → {j.toN}</span>
              </span>
              <span className="doc-dates"><b>{j.dates}</b><i>{j.dur}</i></span>
              <span><DBadge v={j.status}/></span>
              <span><DBadge v={j.checkin}/></span>
              <span><DBadge v={j.risk}/></span>
              <span><DBadge v={j.approval}/></span>
            </div>
          ))}
        </div>
        <div className="doc-tfoot">
          <span>Showing 9 of 20 journeys</span>
          <span className="doc-tfoot__note">Demo dataset · global population 50,000 · Powered by R24 International</span>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 2 — Risk Analytics
// =============================================================
function DocAnalytics() {
  const akpi = [
    { v: "50,000", l: "Total Travellers", t: "" },
    { v: "1,248",  l: "Active Journeys",  t: "blue" },
    { v: "42",     l: "High-Risk",        t: "red" },
    { v: "18",     l: "Overdue Check-Ins",t: "amber" },
    { v: "94.2%",  l: "Compliance Rate",  t: "green" },
  ];
  // donut: Low 1063 / Med 143 / High 42 (of 1248 active) — use degrees
  const seg = [{ c: "#16A34A", pct: 82, lab: "Low risk", n: "1,063" }, { c: "#D97706", pct: 12, lab: "Medium risk", n: "143" }, { c: "#DC2626", pct: 6, lab: "High risk", n: "42" }];
  let acc = 0;
  const stops = seg.map(s => { const from = acc; acc += s.pct; return `${s.c} ${from}% ${acc}%`; }).join(", ");
  const dests = [
    { c: "Lagos, Nigeria", n: 14, w: 100, t: "red" },
    { c: "Nairobi, Kenya", n: 11, w: 78, t: "amber" },
    { c: "Cairo, Egypt", n: 9, w: 64, t: "amber" },
    { c: "Kinshasa, DRC", n: 7, w: 50, t: "red" },
    { c: "Dubai, UAE", n: 6, w: 42, t: "green" },
  ];
  return (
    <div className="doc-view doc-view--analytics">
      <div className="doc-exec">
        {akpi.map((s, i) => (
          <div key={i} className={`doc-exec__stat ${s.t ? `doc-s-${s.t}` : ""}`}>
            <div className="doc-exec__val">{s.v}</div>
            <div className="doc-exec__lbl">{s.l}</div>
          </div>
        ))}
      </div>

      <div className="doc-arow">
        <div className="doc-acard doc-acard--donut">
          <div className="doc-acard__title">Active Journeys by Risk</div>
          <div className="doc-donut-wrap">
            <div className="doc-donut" style={{ background: `conic-gradient(${stops})` }}><div className="doc-donut__hole"><b>1,248</b><i>active</i></div></div>
            <div className="doc-legend">
              {seg.map((s, i) => (
                <div key={i} className="doc-leg"><span className="doc-leg__dot" style={{ background: s.c }}/><span className="doc-leg__lbl">{s.lab}</span><span className="doc-leg__n">{s.n}</span></div>
              ))}
            </div>
          </div>
        </div>
        <div className="doc-acard doc-acard--bars">
          <div className="doc-acard__title">Top High-Exposure Destinations</div>
          <div className="doc-bars">
            {dests.map((d, i) => (
              <div key={i} className="doc-bar">
                <span className="doc-bar__lbl">{d.c}</span>
                <span className="doc-bar__track"><i className={`doc-bar__fill doc-fill-${d.t}`} style={{ width: `${d.w}%` }}/></span>
                <span className="doc-bar__n">{d.n}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="doc-crisis">
        <div className="doc-crisis__info">
          <DIcon d={DI.alert} s={18} sw={2}/>
          <div>
            <strong>3 travellers in elevated-risk zones right now</strong>
            <span>Lagos · Cairo · Kinshasa — civil unrest + overdue check-ins detected</span>
          </div>
        </div>
        <button className="doc-crisis__btn">Activate Crisis Protocol</button>
      </div>
    </div>
  );
}

// =============================================================
// View 3 — Risk & Compliance Report
// =============================================================
function DocReport() {
  const stats = [
    { v: "1,248", l: "Journeys in Scope", t: "" },
    { v: "42", l: "High-Risk", t: "red" },
    { v: "18", l: "Overdue Check-Ins", t: "amber" },
    { v: "94.2%", l: "Compliance", t: "green" },
  ];
  const risk = [{ l: "Low", w: 82, n: "1,063", c: "low" }, { l: "Medium", w: 30, n: "143", c: "med" }, { l: "High", w: 14, n: "42", c: "high" }];
  const comp = [
    { l: "Pre-Travel Approval", v: "98%", t: "green" },
    { l: "Risk Acknowledgement", v: "91%", t: "amber" },
    { l: "Check-In Adherence", v: "94%", t: "green" },
    { l: "Insurance Coverage", v: "100%", t: "green" },
  ];
  const geo = [
    { c: "Nigeria", n: 14 }, { c: "Kenya", n: 11 }, { c: "Egypt", n: 9 }, { c: "DRC", n: 7 },
  ];
  return (
    <div className="doc-view doc-view--report">
      <div className="doc-rpt-meta">
        <span><b>Report:</b> Risk &amp; Compliance Overview</span>
        <span><b>Period:</b> May 2026 (MTD)</span>
        <span><b>Generated:</b> 28 May 2026 · 14:22 UTC</span>
        <span><b>Owner:</b> M. Holtzhausen</span>
      </div>

      <div className="doc-rpt-sec">
        <div className="doc-rpt-title"><i className="doc-rpt-no">01</i> Executive Summary</div>
        <div className="doc-statcards">
          {stats.map((s, i) => (
            <div key={i} className={`doc-statcard ${s.t ? `doc-sc-${s.t}` : ""}`}>
              <div className="doc-statcard__v">{s.v}</div>
              <div className="doc-statcard__l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="doc-rpt-2col">
        <div className="doc-rpt-sec">
          <div className="doc-rpt-title"><i className="doc-rpt-no">02</i> Risk Distribution</div>
          <div className="doc-riskbars">
            {risk.map((r, i) => (
              <div key={i} className="doc-riskbar">
                <span className="doc-riskbar__lbl">{r.l}</span>
                <span className="doc-riskbar__track"><i className={`doc-riskbar__fill doc-rb-${r.c}`} style={{ width: `${r.w}%` }}>{r.n}</i></span>
              </div>
            ))}
          </div>
        </div>
        <div className="doc-rpt-sec">
          <div className="doc-rpt-title"><i className="doc-rpt-no">03</i> Compliance</div>
          <div className="doc-compgrid">
            {comp.map((c, i) => (
              <div key={i} className="doc-comprow">
                <span className="doc-comprow__l">{c.l}</span>
                <span className={`doc-comprow__v doc-cv-${c.t}`}>{c.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="doc-rpt-sec">
        <div className="doc-rpt-title"><i className="doc-rpt-no">04</i> Geographic Exposure · High-Risk Countries</div>
        <div className="doc-geogrid">
          {geo.map((g, i) => (
            <div key={i} className="doc-georow">
              <span className="doc-georow__c"><DIcon d={DI.pinG} s={13} sw={2}/> {g.c}</span>
              <span className="doc-georow__n">{g.n} <i>travellers</i></span>
            </div>
          ))}
        </div>
      </div>

      <div className="doc-rpt-foot">
        <span className="doc-rpt-seal"><DIcon d={DI.shield} s={13} fill="currentColor"/> Audit-sealed · hash 0x9c1f…42a8</span>
        <span className="doc-rpt-foot__note">Auto-generated by R24 PULSE · distributable to Board &amp; insurers</span>
      </div>
    </div>
  );
}

// =============================================================
// Featured frame — cycles the three views
// =============================================================
const DOC_VIEWS = [
  { id: "journeys",  nav: "travel",  comp: DocJourneys,  tab: "Travel Journeys" },
  { id: "analytics", nav: "risk",    comp: DocAnalytics, tab: "Risk Analytics" },
  { id: "report",    nav: "reports", comp: DocReport,    tab: "Compliance Report" },
];

function DutyOfCareDemo({ embedded = false }) {
  const [idx, setIdx] = useDocState(0);
  const [paused, setPaused] = useDocState(false);
  useDocEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % DOC_VIEWS.length), 7000);
    return () => clearInterval(t);
  }, [paused]);

  const v = DOC_VIEWS[idx];
  const View = v.comp;

  const console_ = (
    <>
      <div className="doc-switcher" role="tablist">
        {DOC_VIEWS.map((vv, i) => (
          <button key={vv.id} className={`doc-switcher__tab ${i === idx ? "doc-switcher__tab--active" : ""}`} onClick={() => { setIdx(i); setPaused(true); }}>
            <span className="doc-switcher__n">{String(i + 1).padStart(2, "0")}</span>{vv.tab}
          </button>
        ))}
        <button className="doc-switcher__play" onClick={() => setPaused(p => !p)} title={paused ? "Resume autoplay" : "Pause autoplay"}>
          {paused ? "▶ Auto" : "❚❚ Live"}
        </button>
      </div>

      <window.FitScaler designWidth={1200} className="doc-fit">
      <div className="doc-frame">
        <DocSidebar activeNav={v.nav}/>
        <div className="doc-main">
          <DocTopbar/>
          <div className="doc-canvas" key={v.id}><View/></div>
        </div>
      </div>
      </window.FitScaler>

      <p className="doc-progress">
        {DOC_VIEWS.map((vv, i) => <span key={i} className={`doc-progress__seg ${i === idx ? "doc-progress__seg--on" : ""}`}/>)}
      </p>
    </>
  );

  if (embedded) {
    return <div className="doc-embed">{console_}</div>;
  }

  return (
    <section className="doc-section" id="duty-of-care-reporting">
      <div className="container">
        <div className="section-header" style={{ marginTop: 0 }}>
          <p className="eyebrow eyebrow--teal">Duty of care · travel risk &amp; reporting</p>
          <h2 className="section-h2">Know where every traveller is — and prove your duty of care.</h2>
          <p className="section-sub">
            One console to monitor 50,000 travellers, surface high-risk journeys and overdue check-ins in real time, and generate the board- and insurer-ready compliance report on demand.
          </p>
        </div>
        {console_}
      </div>
    </section>
  );
}

window.DutyOfCareDemo = DutyOfCareDemo;