/* ============================================================
   Top sections: Nav, Hero, live order-intake console mock.
   Composes DS components: Logo, Button, Badge, Avatar.
   ============================================================ */
const DS = window.AlfiaDesignSystem_8207ac;
const CAL = "https://calendly.com/amit-alfia/intro";

function Nav() {
  const { Logo, Button } = DS;
  return (
    <header className="nav" id="nav">
      <div className="nav-inner">
        <a className="brand" href="#top" aria-label="Alfia home">
          <Logo src="assets/alfia-lockup.png" height={30} />
        </a>
        <nav className="nav-links">
          <a href="#platform">Platform</a>
          <a href="#customers">Customers</a>
        </nav>
        <div className="nav-cta">
          {/* Sign in — hidden for now; restore the line below to bring it back.
          <a href="#" className="signin">Sign in</a> */}
          <Button as="a" href={CAL} target="_blank" rel="noopener" variant="primary" size="md" className="nav-demo-btn">
            Request demo
          </Button>
        </div>
      </div>
    </header>);

}

const PIPELINE = ["Contracts", "Order intake", "Receiving", "Fulfillment", "Invoicing"];

/* Agent fleet shown orbiting the hub + driving the live feed */
const FLEET = [
{ code: "RC", name: "Receiving", color: "#1A53A0", pos: { left: "4%", top: "14%" } },
{ code: "IV", name: "Invoicing", color: "#3C78EF", pos: { right: "4%", top: "8%" } },
{ code: "PW", name: "Putaway", color: "#3273C8", pos: { right: "0", top: "46%" } },
{ code: "SH", name: "Shipping", color: "#1E8A5B", pos: { right: "10%", bottom: "14%" } },
{ code: "PK", name: "Picking", color: "#C77A12", pos: { left: "30%", bottom: "2%" } },
{ code: "AU", name: "Audit", color: "#C73E3E", pos: { left: "0", bottom: "34%" } },
{ code: "DK", name: "Dock", color: "#0E8C9B", pos: { left: "6%", top: "44%" } },
{ code: "CC", name: "Cycle Ct", color: "#133A6E", pos: { left: "38%", top: "0" } }];


function Hero() {
  const { Button } = DS;
  return (
    <section className="hero">
      <div className="wrap hero-inner">
        <div className="hero-copy reveal">
          <h1>Run your 3PL with AI agents.</h1>
          <p className="hero-sub">
            From contract to invoice, without the manual work. Alfia handles intake, orders, and billing so your team can focus on the exceptions that matter.
          </p>
          <div className="hero-cta">
            <Button as="a" href={CAL} target="_blank" rel="noopener" variant="primary" size="lg"
            trailingIcon={<Icon name="arrowRight" size={17} />}>
              Request demo
            </Button>
            <Button as="a" href="#platform" variant="secondary" size="lg" className="hero-cta-secondary">See how it works</Button>
          </div>
        </div>

        <div className="stage reveal">
          <div className="stage-head">
            <span className="live">agent fleet · live</span>
          </div>
          <div className="orbit" id="orbit">
            <div className="ring r2" />
            <div className="ring r1" />
            <div className="hub">
              <img src="assets/alfia-icon-clean2.png" alt="" className="hub-mark" />
              <img src="assets/alfia-wordmark-white.png" alt="Alfia" className="hub-word" />
            </div>
            {FLEET.map((a, i) =>
            <div className="agent" data-i={i} key={a.code} style={a.pos}>
                <span className="adot" style={{ background: a.color }}>{a.code}</span>
                <span className="name">{a.name}</span>
              </div>
            )}
          </div>
          <div className="feed" id="feed"></div>
        </div>
      </div>
    </section>);

}

function Pipeline() {
  return (
    <div className="pipeline reveal" aria-label="What Alfia handles, from contract to invoice">
      {PIPELINE.map((stg, i) =>
      <React.Fragment key={stg}>
          {i > 0 && <span className="sep" />}
          <span className={"stg" + (i === 1 ? " on" : "")}>
            <span className="dot" />{stg}
          </span>
        </React.Fragment>
      )}
    </div>);

}

function FlowNote({ icon, children }) {
  return (
    <div className="flow-note">
      <Icon name={icon} size={14} />
      <span>{children}</span>
    </div>);

}

function Console() {
  const { Badge, Avatar } = DS;
  return (
    <div className="console reveal" id="console">
      <div className="console-bar">
        <span className="dots"><i /><i /><i /></span>
        <span className="addr"><Icon name="lock" size={12} /> app.alfia.ai/orders</span>
        <span className="live">Live</span>
      </div>
      <div className="console-grid">

        {/* Inbox */}
        <div className="pane">
          <div className="pane-head">
            <span className="pane-ico"><Icon name="inbox" size={15} /></span>
            <h4>Order inbox</h4>
            <Badge tone="info">3 new</Badge>
          </div>

          <div className="mail sel">
            <div className="mail-top">
              <Avatar name="Northway Apparel" size="sm" style={{ background: "var(--brand-deep)" }} />
              <span className="from">Northway Apparel</span>
              <span className="time mono">9:41</span>
            </div>
            <div className="subj">PO <b className="mono">#48213</b> · replenishment, 12 SKUs</div>
            <span className="attach"><Icon name="paperclip" size={11} /> <span className="mono">PO_48213.pdf</span></span>
          </div>

          <div className="mail">
            <div className="mail-top">
              <Avatar name="Coastal Kitchenware" size="sm" style={{ background: "var(--teal-500)" }} />
              <span className="from">Coastal Kitchenware</span>
              <span className="time mono">9:38</span>
            </div>
            <div className="subj">Re: weekly order, see attached sheet</div>
            <span className="attach"><Icon name="paperclip" size={11} /> <span className="mono">orders_wk23.xlsx</span></span>
          </div>

          <div className="mail">
            <div className="mail-top">
              <Avatar name="Vela Supply" size="sm" style={{ background: "var(--amber-500)" }} />
              <span className="from">Vela Supply Co.</span>
              <span className="time mono">9:31</span>
            </div>
            <div className="subj">Rush ship-out request, 4 pallets</div>
          </div>

          <FlowNote icon="arrowRight">Alfia picks up every channel: email, EDI &amp; portals</FlowNote>
        </div>

        {/* Extraction */}
        <div className="pane">
          <div className="pane-head">
            <span className="pane-ico"><Icon name="scan" size={15} /></span>
            <h4>Alfia is extracting</h4>
            <Badge tone="neutral"><span className="mono">PO #48213</span></Badge>
          </div>

          <div className="extract">
            <div className="doc-title">
              <Icon name="fileText" size={14} />
              <span className="mono">PO_48213.pdf</span>
              <Badge tone="success" className="pct"><span className="mono">99.6%</span></Badge>
            </div>
            <div className="field"><span className="k">Customer account</span><span className="v ok">Northway Apparel <Icon name="check" size={13} /></span></div>
            <div className="field"><span className="k">Ship-to</span><span className="v">Reno DC, Dock 4</span></div>
            <div className="field"><span className="k">Carrier / service</span><span className="v">FedEx Ground</span></div>
            <div className="field"><span className="k">Requested ship date</span><span className="v mono">Jun 11, 2026</span></div>
            <div className="field"><span className="k">Line items</span><span className="v ok"><span className="mono">12 SKUs · 480 units</span> <Icon name="check" size={13} /></span></div>
            <div className="lines-tag">
              <span>Mapping SKUs to catalog</span>
              <span className="bar"><i style={{ width: "100%" }} /></span>
              <span className="mono">12/12</span>
            </div>
          </div>

          <FlowNote icon="cpu">Reads PDFs, spreadsheets, scans &amp; email bodies</FlowNote>
        </div>

        {/* WMS */}
        <div className="pane">
          <div className="pane-head">
            <span className="pane-ico"><Icon name="warehouse" size={15} /></span>
            <h4>WMS</h4>
            <Badge tone="success" dot>Synced</Badge>
          </div>

          <div className="wms-card">
            <div className="wms-row1">
              <span className="po mono">SO-48213</span>
              <Badge tone="success" dot>Created</Badge>
            </div>
            <div className="wms-meta">
              <div><div className="lbl">Account</div><div className="val">Northway</div></div>
              <div><div className="lbl">Lines</div><div className="val mono">12</div></div>
              <div><div className="lbl">Units</div><div className="val mono">480</div></div>
              <div><div className="lbl">Wave</div><div className="val">Ready to pick</div></div>
            </div>
            <div className="wms-steps">
              <div className="wstep"><span className="tick"><Icon name="check" size={11} /></span> Validated against <b>inventory</b></div>
              <div className="wstep"><span className="tick"><Icon name="check" size={11} /></span> Mapped to <b>customer rules</b></div>
              <div className="wstep"><span className="tick"><Icon name="check" size={11} /></span> Order <b>confirmed</b> back to customer</div>
            </div>
          </div>

          <FlowNote icon="zap">Entered in <b className="mono accent">11 seconds</b></FlowNote>
        </div>

      </div>
    </div>);

}

Object.assign(window, { Nav, Hero });