// Screen 10: AI Requirements Conclusions
function Screen_AIConclusions() {
  const classificationRows = [
    ["Shipment status", 36, "Ongoing shipment updates and milestone movement"],
    ["New shipment", 33, "Emails that should open or enrich shipment work"],
    ["Other / irrelevant", 31, "Noise that should be safely ignored"],
    ["Document issue", 18, "Missing, conflicting, or incomplete document evidence"],
    ["Booking update", 6, "Carrier, booking, vessel, ETD, or ETA changes"],
    ["Shipment query", 2, "Questions that need a controlled answer"]
  ];

  const extractionFields = [
    "Booking number",
    "HBL",
    "PO",
    "Supplier",
    "Consignee / customer",
    "Origin",
    "Destination",
    "ETA",
    "ETD",
    "Incoterms",
    "Vessel"
  ];

  const behaviorRules = [
    {
      title: "Classify before acting",
      body: "Every inbound email must be classified as shipment intake, status update, document issue, booking update, query, or irrelevant before the agent recommends any next step."
    },
    {
      title: "Build a shipment object",
      body: "The agent must extract structured shipment data and references, not only summarize the email body. The operational record should survive noisy threads and repeated replies."
    },
    {
      title: "Conservative default",
      body: "Most stored messages do not require immediate outbound action. If the email is informational and there is no overdue expectation, the agent should monitor only."
    },
    {
      title: "Manage expectations",
      body: "When information is missing, the agent should track who owes the answer, what is missing, the due time, and the escalation point."
    },
    {
      title: "Human approval for risk",
      body: "Vendor first-send, unknown domains, conflicting dates, customer-sensitive content, and external sends should stop for operator confirmation."
    },
    {
      title: "Learn from corrections",
      body: "Operator feedback should become future behavior rules based on sender domain, subject pattern, supplier, customer, and lane."
    }
  ];

  const guardrails = [
    "Approved recipient and known domain",
    "Correct audience: customer, supplier, carrier, or internal",
    "No cross-customer or vendor/customer data leakage",
    "SOP match for customer, lane, document, and timing",
    "Duplicate-send prevention",
    "Professional tone and no invented facts",
    "External-send approval when confidence is low"
  ];

  const operatingModes = [
    ["Observe", "Track and update state only. No outbound message."],
    ["Draft & ask", "Prepare the recommended response and ask the operator to confirm or edit."],
    ["Auto-send", "Send only when the case is low-risk, repetitive, and all guards pass."]
  ];

  return (
    <div className="conclusions-page">
      <div className="conclusion-hero">
        <div>
          <div className="eyebrow">Client conclusions</div>
          <h2>Golda should operate as a shipment control tower, not as a generic email responder.</h2>
          <p>
            The stored email and case sample shows that the core value is controlled operations:
            classify each email, extract shipment facts, detect missing or conflicting information,
            manage follow-ups, and send externally only when the guardrails pass.
          </p>
        </div>
        <div className="conclusion-sample">
          <div className="sample-number">126</div>
          <div className="sample-label">emails reviewed</div>
          <div className="sample-meta">30 cases analyzed · 18 escalated cases found</div>
        </div>
      </div>

      <div className="stat-grid conclusion-stats">
        {classificationRows.slice(0, 4).map(([label, value, meta]) => (
          <div className="stat" key={label}>
            <div className="stat-label">{label}</div>
            <div className="stat-value">{value}</div>
            <div className="stat-trend muted">{meta}</div>
          </div>
        ))}
      </div>

      <div className="split conclusion-split">
        <div>
          <div className="sec-head">
            <h2>Required agent behavior</h2>
            <span className="sec-count">Operational rules</span>
          </div>
          <div className="conclusion-rule-grid">
            {behaviorRules.map((rule) => (
              <div className="card conclusion-rule" key={rule.title}>
                <div className="card-body">
                  <h3>{rule.title}</h3>
                  <p>{rule.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <aside>
          <div className="card conclusion-card">
            <div className="card-header">
              <h3 className="card-title">Classification mix</h3>
              <span className="card-sub">Stored sample</span>
            </div>
            <div className="card-body">
              {classificationRows.map(([label, value, meta]) => (
                <div className="conclusion-row" key={label}>
                  <div>
                    <strong>{label}</strong>
                    <span>{meta}</span>
                  </div>
                  <b>{value}</b>
                </div>
              ))}
            </div>
          </div>

          <div className="card conclusion-card">
            <div className="card-header">
              <h3 className="card-title">Data the agent must extract</h3>
              <span className="card-sub">Shipment object</span>
            </div>
            <div className="card-body">
              <div className="field-chip-grid">
                {extractionFields.map((field) => <span className="tag" key={field}>{field}</span>)}
              </div>
            </div>
          </div>
        </aside>
      </div>

      <div className="split conclusion-split">
        <div className="card conclusion-card">
          <div className="card-header">
            <h3 className="card-title">Operating modes</h3>
            <span className="card-sub">Recommended rollout</span>
          </div>
          <div className="card-body">
            {operatingModes.map(([mode, text]) => (
              <div className="mode-row" key={mode}>
                <span>{mode}</span>
                <p>{text}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="card conclusion-card">
          <div className="card-header">
            <h3 className="card-title">Send guardrails</h3>
            <span className="card-sub">Before any outbound email</span>
          </div>
          <div className="card-body">
            <ul className="guard-list">
              {guardrails.map((item) => <li key={item}>{item}</li>)}
            </ul>
          </div>
        </div>
      </div>

      <div className="card conclusion-card">
        <div className="card-header">
          <h3 className="card-title">Client-ready conclusion</h3>
          <span className="card-sub">Implementation direction</span>
        </div>
        <div className="card-body conclusion-final">
          <p>
            Golda should be implemented as an operational decision layer above the mailbox. It should reduce
            manual work by turning email threads into shipment state, highlighting exceptions, preparing
            controlled responses, and learning from operator corrections. The safe default is monitoring;
            automation should increase only where the pattern is repetitive, low-risk, and proven by feedback.
          </p>
        </div>
      </div>
    </div>
  );
}