// ConceptE_Platform — Beat 3. Denser, more realistic operational software.
//
// Layout (viewBox 1000x1000):
//   outer frame:       60, 130   → 940, 890    (880 x 760)
//   topbar:            60, 130   → 940, 172    (app name + tabs + search + user)
//   sidebar:           60, 172   → 200, 890    (sections + items)
//   KPI strip:         214, 188  → 926, 258    (4 KPI cards across)
//   workflow module:   214, 272  → 926, 560    (FULL-WIDTH — contains the graph)
//   chart module:      214, 574  → 654, 834    (throughput bars, taller)
//   assignments mod:   668, 574  → 1146, 834   (2-col, 8 rows)
//   status bar:        60, 860   → 940, 890    (footer)

function PlatformChrome({ t }) {
  if (t < CE.T23[0]) return null;

  const chromeP  = localE(t, [CE.T23[0], CE.T23[1] + 300], easeOut);
  const topP     = localE(t, [CE.T23[0] + 50,  CE.T23[1] + 400], easeOut);
  const sideP    = localE(t, [CE.T23[0] + 100, CE.T23[1] + 500], easeOut);
  const kpiP     = localE(t, [CE.T23[0] + 200, CE.B3[0] + 600], easeOut);
  const moduleP  = localE(t, [CE.T23[0] + 250, CE.B3[0] + 500], easeOut);
  const rightP   = localE(t, [CE.B3[0] + 200,  CE.B3[0] + 900], easeOut);
  const chartP   = localE(t, [CE.B3[0] + 400,  CE.B3[0] + 1100], easeOut);
  const queueP   = localE(t, [CE.B3[0] + 550,  CE.B3[0] + 1250], easeOut);
  const statusP  = localE(t, [CE.B3[0] + 700,  CE.B3[0] + 1400], easeOut);

  // Live counter tick for the primary KPI
  const counterP = localE(t, [CE.B3[0] + 400, CE.B3[1]], easeInOut);
  const counterVal = 2478 + Math.round(counterP * 5);

  // Animated throughput bars
  const chartBars = Array.from({ length: 18 }, (_, i) => {
    const phase = (t / 700) + i * 0.45;
    return 14 - (Math.sin(phase) * 3.5 + Math.sin(phase * 0.6) * 1.5);
  });

  // Activity feed — rows slide in as time progresses
  const activityRows = [
    { time: "14:02", who: "Extraction Agent", what: "classified 12 claims", color: "#397ae7" },
    { time: "14:01", who: "J. Martinez",      what: "approved CLM-4821",    color: "#6d49e0" },
    { time: "14:00", who: "Review Agent",     what: "flagged 1 anomaly",    color: "#e07a3a" },
    { time: "13:58", who: "Extraction Agent", what: "parsed 8 documents",   color: "#397ae7" },
    { time: "13:55", who: "S. Chen",          what: "reassigned 3 items",   color: "#6d49e0" },
    { time: "13:52", who: "Approval Agent",   what: "issued 6 payments",    color: "#3d7827" },
  ];

  // Queue table rows
  const queueRows = [
    { id: "CLM-4821", owner: "JM", status: "Review",   sev: "med" },
    { id: "CLM-4820", owner: "SC", status: "Intake",   sev: "low" },
    { id: "CLM-4819", owner: "AI", status: "Auto",     sev: "low" },
    { id: "CLM-4818", owner: "AI", status: "Auto",     sev: "low" },
    { id: "CLM-4817", owner: "JM", status: "Approved", sev: "low" },
    { id: "CLM-4816", owner: "AI", status: "Auto",     sev: "low" },
    { id: "CLM-4815", owner: "DR", status: "Review",   sev: "med" },
    { id: "CLM-4814", owner: "AI", status: "Auto",     sev: "low" },
  ];

  return (
    <g style={{ opacity: chromeP }}>
      {/* ====================================================
          OUTER FRAME
         ==================================================== */}
      <rect x="60" y="130" width="1100" height="760" rx="14"
            fill="#fff" stroke="#000" strokeWidth="2"/>

      {/* ====================================================
          TOPBAR — logo + user avatar only (no tabs / search / LIVE).
          Status/nav lives in the sidebar + the workflow header.
         ==================================================== */}
      <g style={{ opacity: topP }}>
        <path d="M 60 144 Q 60 130 74 130 L 1146 130 Q 1160 130 1160 144 L 1160 172 L 60 172 Z"
              fill="#faf7ec" stroke="#000" strokeWidth="2"/>
        <line x1="60" y1="172" x2="1160" y2="172" stroke="#000" strokeWidth="2"/>

        {/* left: logo mark + app name */}
        <g transform="translate(82, 151)">
          <rect x="-4" y="-10" width="20" height="20" rx="4" fill="#000"/>
          <rect x="-1" y="-7"  width="14" height="14" rx="2" fill="#fff"/>
          <rect x="1"  y="-5"  width="10" height="2" fill="#000"/>
          <rect x="1"  y="-1"  width="10" height="2" fill="#000"/>
          <rect x="1"  y="3"   width="6"  height="2" fill="#000"/>
          <text x="26" y="5" fontFamily="Neue Montreal, sans-serif" fontSize="15" fontWeight="500" fill="#000">
            Acme Claims Ops
          </text>
        </g>

        {/* right: user avatar only */}
        <g transform="translate(1135, 151)">
          <circle cx="0" cy="0" r="12" fill="#dfeaff" stroke="#000" strokeWidth="1.5"/>
          <text x="0" y="4" fontFamily="Neue Montreal, sans-serif" fontSize="10" fontWeight="500"
                textAnchor="middle" fill="#397ae7">AR</text>
        </g>
      </g>

      {/* ====================================================
          SIDEBAR — simplified: 2 sections, generous spacing,
          larger text. Reports + Settings/Help removed — they
          added density without telling the story.
         ==================================================== */}
      <g style={{ opacity: sideP }}>
        <rect x="60" y="172" width="140" height="718" fill="#faf7ec" stroke="#000" strokeWidth="2"/>

        {/* Section: Queues */}
        <text x="76" y="212" fontFamily="Neue Montreal, sans-serif" fontSize="10" fontWeight="700"
              letterSpacing="0.8" fill="#4e5769">QUEUES</text>
        {[
          { label: "New intake", count: 47, active: true  },
          { label: "In review",  count: 12, active: false },
          { label: "Needs info", count: 4,  active: false },
        ].map((item, i) => (
          <g key={i} transform={`translate(70, ${230 + i * 36})`}>
            {item.active && <rect x="0" y="0" width="120" height="28" rx="6" fill="#dfeaff" stroke="#000" strokeWidth="1.5"/>}
            <circle cx="12" cy="14" r="3.5" fill={item.active ? "#397ae7" : "#b8b8b8"}/>
            <text x="24" y="19" fontFamily="Neue Montreal, sans-serif" fontSize="13"
                  fontWeight={item.active ? 500 : 400} fill="#000">{item.label}</text>
            <text x="110" y="19" fontFamily="ui-monospace, monospace" fontSize="12"
                  fontWeight="500" textAnchor="end" fill={item.active ? "#397ae7" : "#8f8f91"}>
              {item.count}
            </text>
          </g>
        ))}

        {/* Section: Agents */}
        <text x="76" y="388" fontFamily="Neue Montreal, sans-serif" fontSize="10" fontWeight="700"
              letterSpacing="0.8" fill="#4e5769">AGENTS</text>
        {[
          { label: "Extraction", color: "#397ae7" },
          { label: "Classify",   color: "#397ae7" },
          { label: "Review",     color: "#6d49e0" },
        ].map((item, i) => (
          <g key={i} transform={`translate(70, ${406 + i * 32})`}>
            <circle cx="12" cy="12" r="4.5" fill={item.color}/>
            <text x="24" y="17" fontFamily="Neue Montreal, sans-serif" fontSize="13" fill="#000">{item.label}</text>
            <circle cx="114" cy="12" r="3.5" fill="#3d7827">
              <animate attributeName="opacity" values="1;0.3;1" dur={`${1.5 + i * 0.2}s`} repeatCount="indefinite"/>
            </circle>
          </g>
        ))}
      </g>

      {/* ====================================================
          KPI STRIP — 3 cards (was 4). Larger values, no
          sparklines — the workflow + chart already carry the
          "this is a live system" message.
         ==================================================== */}
      <g style={{ opacity: kpiP, transform: `translate(0, ${(1-kpiP) * 8}px)` }}>
        {[
          { label: "PROCESSED / 24H", value: counterVal.toLocaleString(), trend: "+18%", accent: "#397ae7" },
          { label: "AVG CYCLE TIME",  value: "4.2m",                       trend: "-31%", accent: "#6d49e0" },
          { label: "AUTO-APPROVED",   value: "74%",                        trend: "+6pt", accent: "#3d7827" },
        ].map((k, i) => {
          const x = 214 + i * 312;
          return (
            <g key={i} transform={`translate(${x}, 188)`}>
              <rect x="0" y="0" width="296" height="70" rx="8" fill="#fff" stroke="#000" strokeWidth="2"/>
              <rect x="0" y="0" width="4" height="70" rx="2" fill={k.accent}/>
              <text x="18" y="24" fontFamily="Neue Montreal, sans-serif" fontSize="11" letterSpacing="0.6"
                    fontWeight="500" fill="#8f8f91">{k.label}</text>
              <text x="18" y="56" fontFamily='"Area Inktrap","Neue Montreal",sans-serif' fontSize="30"
                    fontWeight="500" letterSpacing="-0.02em" fill="#000">{k.value}</text>
              <text x="282" y="56" fontFamily="ui-monospace, monospace" fontSize="14" fontWeight="500"
                    textAnchor="end" fill="#3d7827">{k.trend}</text>
            </g>
          );
        })}
      </g>

      {/* ====================================================
          WORKFLOW MODULE — FULL-WIDTH main canvas. The workflow
          graph (nodes + edges, rendered by WorkflowGraph / AgentScene)
          lives inside this panel from x=230 to x=910.
         ==================================================== */}
      <g style={{ opacity: moduleP }}>
        <rect x="214" y="272" width="932" height="288" rx="10" fill="#fff" stroke="#000" strokeWidth="2"/>
        <text x="230" y="300" fontFamily="Neue Montreal, sans-serif" fontSize="15" fontWeight="500" fill="#000">
          Intake workflow
        </text>
        <text x="345" y="300" fontFamily="ui-monospace, monospace" fontSize="11" fill="#8f8f91">
          4 steps · running
        </text>
        <line x1="214" y1="316" x2="1146" y2="316" stroke="#000" strokeWidth="1" opacity=".4"/>
      </g>

      {/* ====================================================
          CHART MODULE — throughput (bottom-left)
         ==================================================== */}
      {/* ====================================================
          CHART MODULE — throughput (bottom-left)
          x: 214 → 522 (width 308)
         ==================================================== */}
      <g style={{ opacity: chartP, transform: `translate(0, ${(1-chartP) * 10}px)` }}>
        <rect x="214" y="574" width="440" height="260" rx="10" fill="#fff" stroke="#000" strokeWidth="2"/>
        <text x="230" y="600" fontFamily="Neue Montreal, sans-serif" fontSize="15" fontWeight="500" fill="#000">
          Throughput / hour
        </text>
        <text x="362" y="600" fontFamily="ui-monospace, monospace" fontSize="11" fill="#8f8f91">last 24h</text>
        <line x1="214" y1="616" x2="654" y2="616" stroke="#000" strokeWidth="1" opacity=".4"/>

        {/* baseline only — gridlines + legend removed for clarity */}
        <line x1="230" y1="818" x2="642" y2="818" stroke="#000" strokeOpacity=".3" strokeWidth="1"/>

        {/* solid bars (12 bars, wider). Last bar = "now" — accented. */}
        {chartBars.slice(0, 12).map((h, i) => {
          const total = h * 8.4;
          const x = 240 + i * 33;
          const isLast = i === 11;
          return (
            <rect key={i} x={x} y={818 - total} width="26" height={total} rx="2"
                  fill={isLast ? "#397ae7" : "#dfeaff"}
                  stroke={isLast ? "#000" : "#397ae7"} strokeWidth="1.5"/>
          );
        })}
      </g>

      {/* ====================================================
          ASSIGNMENTS MODULE — wide bottom-right (2-col, 8 rows)
          x: 668 → 1146 (width 478)
         ==================================================== */}
      <g style={{ opacity: queueP, transform: `translate(0, ${(1-queueP) * 10}px)` }}>
        <rect x="668" y="574" width="478" height="260" rx="10" fill="#fff" stroke="#000" strokeWidth="2"/>
        <text x="682" y="600" fontFamily="Neue Montreal, sans-serif" fontSize="15" fontWeight="500" fill="#000">
          Assignments
        </text>
        <text x="1132" y="600" textAnchor="end" fontFamily="ui-monospace, monospace" fontSize="11" fill="#8f8f91">
          live
        </text>
        <circle cx="1117" cy="595" r="3.5" fill="#3d7827">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.5s" repeatCount="indefinite"/>
        </circle>
        <line x1="668" y1="616" x2="1146" y2="616" stroke="#000" strokeWidth="1" opacity=".4"/>

        {queueRows.slice(0, 8).map((row, i) => {
          const isAI = row.owner === "AI";
          const statusColor = row.status === "Auto" ? "#397ae7"
                            : row.status === "Approved" ? "#3d7827"
                            : row.status === "Review" ? "#e07a3a"
                            : "#6d49e0";
          const statusBg = row.status === "Auto" ? "#dfeaff"
                         : row.status === "Approved" ? "#d9ecce"
                         : row.status === "Review" ? "#ffe5d3"
                         : "#e6dfff";
          const statusW = row.status.length * 6.5 + 18;
          const col = i % 2;
          const rowIdx = Math.floor(i / 2);
          const xBase = 682 + col * 235;
          const yBase = 636 + rowIdx * 48;
          return (
            <g key={i} transform={`translate(${xBase}, ${yBase})`}>
              {/* owner avatar */}
              <circle cx="10" cy="12" r="10" fill={isAI ? "#397ae7" : "#e6dfff"}
                      stroke="#000" strokeWidth="1.5"/>
              <text x="10" y="16" fontFamily="Neue Montreal, sans-serif" fontSize="9.5" fontWeight="500"
                    textAnchor="middle" fill={isAI ? "#fff" : "#6d49e0"}>{row.owner}</text>
              {/* human-in-loop badge for non-AI rows */}
              {!isAI && (
                <g transform="translate(17, 5)">
                  <circle cx="0" cy="0" r="4.5" fill="#6d49e0" stroke="#000" strokeWidth="1"/>
                  <circle cx="0" cy="-1.2" r="1.2" fill="#fff"/>
                  <path d="M -2.3 2.4 Q -2.3 0.4 0 0.4 Q 2.3 0.4 2.3 2.4 Z" fill="#fff"/>
                </g>
              )}
              {/* claim id */}
              <text x="30" y="11" fontFamily="ui-monospace, monospace" fontSize="13" fontWeight="500" fill="#000">
                {row.id}
              </text>
              {/* timestamp-ish subtext */}
              <text x="30" y="24" fontFamily="Neue Montreal, sans-serif" fontSize="10" fill="#8f8f91">
                {isAI ? "auto-processed" : "assigned to " + row.owner}
              </text>
              {/* status pill — right-aligned */}
              <g transform={`translate(${210 - statusW}, 4)`}>
                <rect x="0" y="0" width={statusW} height="18" rx="9"
                      fill={statusBg} stroke={statusColor} strokeWidth="1.5"/>
                <text x={statusW/2} y="12.5"
                      fontFamily="Neue Montreal, sans-serif" fontSize="10" fontWeight="500"
                      textAnchor="middle" fill={statusColor}>{row.status}</text>
              </g>
            </g>
          );
        })}
      </g>
    </g>
  );
}



// EndTags removed per design feedback — the in-visual scope pills at the bottom
// of the frame already carry the labels.
function EndTags() { return null; }

Object.assign(window, { PlatformChrome, EndTags });