/* global React */
// Automations — a slow conveyor of task chips that pass through a gold
// "automation beam" and emerge as completed outcomes. Seamless loop.

const TASKS = [
  { in: "New booking",        out: "Calendar synced" },
  { in: "Invoice received",   out: "Logged to ledger" },
  { in: "Photo uploaded",     out: "Posted to wall" },
  { in: "Cleaning scheduled", out: "Crew dispatched" },
  { in: "Lead form filled",   out: "CRM updated" },
  { in: "Menu item edited",   out: "QR live" },
  { in: "Email arrived",      out: "Routed to owner" },
  { in: "Review submitted",   out: "Team notified" },
];

// Duplicate the chip list so the marquee translates -50% for a seamless loop.
const LOOP = [...TASKS, ...TASKS];

function CheckGlyph() {
  return (
    <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true">
      <path d="M2.2 6.2 L5 9 L9.8 3.4"
        stroke="currentColor" strokeWidth="1.6"
        fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ChipTodo({ label }) {
  return (
    <div className="auto-chip auto-chip-todo">
      <span className="auto-chip-dot" />
      <span className="auto-chip-text">{label}</span>
    </div>
  );
}

function ChipDone({ label }) {
  return (
    <div className="auto-chip auto-chip-done">
      <span className="auto-chip-check"><CheckGlyph /></span>
      <span className="auto-chip-text">{label}</span>
    </div>
  );
}

function Stream({ klass }) {
  // Thin horizontal data line with a small dot travelling across it.
  return (
    <div className={"auto-stream " + klass}>
      <div className="auto-stream-line" />
      <div className="auto-stream-dot" />
    </div>
  );
}

function Automations() {
  return (
    <section className="automations" aria-label="Automations in motion">
      <div className="shell">
        <div className="auto-head">
          <div className="auto-kicker">[ AUTOMATIONS · ALWAYS ON ]</div>
          <h2 className="serif">
            Quiet systems, <em>working while you sleep.</em>
          </h2>
          <div className="auto-sub">
            Every event your business produces, processed into an outcome —
            without a human touching it.
          </div>
        </div>
      </div>

      <div className="conveyor" aria-hidden="true">
        {/* Ambient data streams behind the main belt */}
        <div className="auto-streams">
          <Stream klass="s1" />
          <Stream klass="s2" />
          <Stream klass="s3" />
          <Stream klass="s4" />
        </div>

        {/* Two synchronized strips: todo full-width, done clipped to right half */}
        <div className="strip-wrap">
          <div className="strip">
            {LOOP.map((t, i) => <ChipTodo key={"t" + i} label={t.in} />)}
          </div>
        </div>
        <div className="strip-wrap strip-wrap-done">
          <div className="strip">
            {LOOP.map((t, i) => <ChipDone key={"d" + i} label={t.out} />)}
          </div>
        </div>

        {/* Center beam */}
        <div className="auto-beam">
          <div className="auto-beam-glow" />
          <div className="auto-beam-line" />
          <div className="auto-beam-cap auto-beam-cap-top" />
          <div className="auto-beam-cap auto-beam-cap-bottom" />
          <div className="auto-beam-label">
            <span className="dot" />
            AUTOMATE
          </div>
        </div>

        {/* Edge fade so chips dissolve in/out */}
        <div className="conveyor-fade" />
      </div>

      <div className="shell">
        <div className="auto-foot">
          <div className="auto-foot-cell">
            <div className="auto-foot-num">24 / 7</div>
            <div className="auto-foot-label">Always running</div>
          </div>
          <div className="auto-foot-cell">
            <div className="auto-foot-num">&lt; 80<span>ms</span></div>
            <div className="auto-foot-label">Median response</div>
          </div>
          <div className="auto-foot-cell">
            <div className="auto-foot-num">0</div>
            <div className="auto-foot-label">Manual touches</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Automations });