/* ============================================================
   Middle sections: Capabilities, Metrics band, Use cases,
   Human-in-the-loop exceptions. Composes Card, StatTile, Badge.
   ============================================================ */
const DS = window.AlfiaDesignSystem_8207ac;

const CAPS = [
  { n: "01", icon: "fileText", h: "Leads, onboarding, & contracts",
    p: "Alfia ingests new-client agreements, rate cards and SKU catalogs, and turns them into the rules it applies on every order and invoice that follows." },
  { n: "02", icon: "warehouse", h: "Orders & fulfillment",
    p: "POs, ASNs and ship-out requests in any format become validated entries in your WMS, mapped to the right accounts, SKUs and customer rules." },
  { n: "03", icon: "receipt", h: "Billing & invoicing",
    p: "Storage, handling, and accessorial charges are reconciled against each agreement, so invoices go out complete and discrepancies surface before they ship." },
  { n: "04", icon: "shieldCheck", h: "Always in command",
    p: "Every action carries a confidence score and a full audit trail. Anything ambiguous routes to your team for a one-click decision." },
];

function Capabilities() {
  const { Card, Badge } = DS;
  return (
    <section className="section" id="platform">
      <div className="wrap">
        <SectionHead
          eyebrow="The platform"
          title="Your back office on autopilot. Your team stays in command."
          sub="Every action carries a confidence score and a full audit trail — agents clear the routine work, and anything ambiguous routes to your team for a one-click decision."
        />
        <div className="uc-grid reveal">
          {USECASES.map((u) => (
            <Card key={u.h} variant="default" interactive padding="lg" className="uc">
              <span className="uc-ico"><Icon name={u.icon} size={22} /></span>
              <div className="uc-body">
                <h3>{u.h}</h3>
                <p>{u.p}</p>
                <div className="tags">
                  {u.tags.map((t) => <Badge key={t} tone="info">{t}</Badge>)}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function Metrics() {
  const { Card, StatTile } = DS;
  return (
    <section className="band section">
      <div className="wrap">
        <SectionHead
          onDark narrow
          eyebrow="By the numbers"
          title="Built to clear the order backlog before your team sits down."
          sub="Across the 3PLs running Alfia in production today."
        />
        <div className="metric-grid reveal">
          <Card padding="lg"><StatTile label="Avg. order entry time" value="11" unit="s"
            icon={<Icon name="clock" size={15} />} sublabel="Median, live orders" /></Card>
          <Card padding="lg"><StatTile label="Line-item accuracy" value="99.6" unit="%"
            icon={<Icon name="check" size={15} />} delta="1.2%" trend="up" sublabel="Trailing 30 days" /></Card>
          <Card padding="lg"><StatTile label="Coordinator hours saved" value="4,000" unit="+/mo"
            icon={<Icon name="zap" size={15} />} sublabel="Across production 3PLs" /></Card>
        </div>
      </div>
    </section>
  );
}

const USECASES = [
  { icon: "package", h: "Order entry & fulfillment",
    p: "Inbound POs and ship-out requests become validated sales orders in your WMS, wave-ready and confirmed back to the customer.",
    tags: ["Sales orders", "Ship-outs", "Rush requests"] },
  { icon: "scan", h: "Receiving & ASNs",
    p: "Inbound shipment notices and packing lists are parsed and staged as receipts, so the dock knows exactly what's arriving and when.",
    tags: ["ASNs", "Packing lists", "Appointments"] },
  { icon: "warehouse", h: "Inventory & status replies",
    p: "\u201CWhere's my order?\u201D and stock-check emails get answered from live WMS data, drafted, sourced and ready for a coordinator to send.",
    tags: ["WISMO", "Stock checks", "Tracking"] },
  { icon: "receipt", h: "Returns & billing prep",
    p: "RMAs and storage/handling charges are reconciled against agreements, with discrepancies flagged before anything hits an invoice.",
    tags: ["RMAs", "Accessorials", "Invoice prep"] },
];

function UseCases() {
  const { Card, Badge } = DS;
  return (
    <section className="section" id="usecases">
      <div className="wrap">
        <SectionHead
          eyebrow="Where teams use Alfia"
          title="More than order entry. The whole document grind."
          sub="Anywhere a coordinator is re-typing what a customer already sent, an Alfia agent can take the first pass."
        />
        <div className="uc-grid reveal">
          {USECASES.map((u) => (
            <Card key={u.h} variant="default" interactive padding="lg" className="uc">
              <span className="uc-ico"><Icon name={u.icon} size={22} /></span>
              <div className="uc-body">
                <h3>{u.h}</h3>
                <p>{u.p}</p>
                <div className="tags">
                  {u.tags.map((t) => <Badge key={t} tone="info">{t}</Badge>)}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

const FEATS = [
  { h: "Confidence on every field", p: "Set the threshold per customer. Below it, a coordinator confirms in one click." },
  { h: "Learns your corrections", p: "Every fix teaches the agent that customer's quirks: odd SKU codes, abbreviations, formats." },
  { h: "Full audit trail", p: "Trace any WMS order back to the exact line in the original email or PDF." },
];

const QUEUE = [
  { tone: "warning", icon: "alert", l1: "Vela Supply: SKU \u201CBLT-200-XL\u201D not in catalog", l2: "Closest match: BLT-200-XLG · awaiting confirm", conf: "71%" },
  { tone: "warning", icon: "alert", l1: "Coastal Kitchenware: ship date is a holiday", l2: "Requested Jul 4 · suggest next business day", conf: "68%" },
  { tone: "success", icon: "check", l1: "Northway Apparel: PO #48213", l2: "12 SKUs matched · created as SO-48213", conf: "Cleared" },
  { tone: "success", icon: "check", l1: "Harbor Goods: weekly replenishment", l2: "8 SKUs matched · created as SO-48214", conf: "Cleared" },
];

function Exceptions() {
  const { Card, Badge } = DS;
  return (
    <section className="section section--sunken">
      <div className="wrap split">
        <div className="copy reveal">
          <Eyebrow>Human-in-the-loop</Eyebrow>
          <h2>Agents handle the volume. Your team handles the judgment.</h2>
          <p className="lead">
            Alfia never silently guesses. Every order carries a confidence score and a full audit
            trail. Clean orders clear on their own; anything ambiguous lands in one review queue with
            the source document side-by-side.
          </p>
          <div className="feat-list">
            {FEATS.map((f) => (
              <div className="feat" key={f.h}>
                <span className="fi"><Icon name="check" size={15} stroke={2.4} /></span>
                <div><h4>{f.h}</h4><p>{f.p}</p></div>
              </div>
            ))}
          </div>
        </div>

        <Card variant="raised" padding="none" className="panel reveal">
          <div className="panel-top">
            <h4>Review queue</h4>
            <span className="seg"><b className="on">Needs review</b><b>Cleared</b></span>
            <span className="count mono">2 of 47</span>
          </div>
          {QUEUE.map((q, i) => (
            <div className="exc" key={i}>
              <span className={"flag flag--" + q.tone}><Icon name={q.icon} size={17} stroke={q.tone === "success" ? 2.4 : 2} /></span>
              <div className="info">
                <div className="l1">{q.l1}</div>
                <div className="l2">{q.l2}</div>
              </div>
              <Badge tone={q.tone}>{q.conf}</Badge>
            </div>
          ))}
        </Card>
      </div>
    </section>
  );
}

Object.assign(window, { Capabilities, Metrics, UseCases, Exceptions });