/* eslint-disable react/no-unescaped-entities */
/* ============================================================
   Journey Engine — interactive 10-screen demo
   ============================================================ */

function JourneyEngine() {
  const [step, setStep] = useState(0);
  const screens = window.JE_SCREENS;
  const t = window.JE_TENANT;
  const cur = screens[step];
  const auto = useRef(null);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    auto.current = setTimeout(() => {
      setStep((s) => (s + 1) % screens.length);
    }, 4200);
    return () => clearTimeout(auto.current);
  }, [step, paused, screens.length]);

  return (
    <section className="section" id="journey" style={{ background: "var(--ink)", paddingTop: 0, paddingBottom: "calc(var(--sect-y) + 20px)" }}>
      <style>{`
        .je-wrap { padding-top: var(--sect-y); border-top: 1px solid var(--line); }
        .je-top {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(32px, 6vw, 80px);
          margin-bottom: 56px;
          align-items: end;
        }
        .je-h {
          font-family: var(--f-display);
          font-weight: 700;
          font-size: clamp(38px, 5vw, 72px);
          letter-spacing: -0.028em;
          line-height: 1.0;
          margin: 0;
        }
        .je-h em { font-style: normal; color: var(--t-3); font-weight: 500; }
        .je-sub { color: var(--t-2); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; max-width: 540px; }

        .je-stage {
          display: grid;
          grid-template-columns: 0.95fr 1.05fr;
          gap: clamp(24px, 3vw, 48px);
          align-items: stretch;
        }
        .je-left {
          padding: 36px 32px;
          background: var(--ink-2);
          border: 1px solid var(--line);
          border-radius: 18px;
          display: flex;
          flex-direction: column;
          min-height: 560px;
        }
        .je-step-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--t-4); margin-bottom: 12px; }
        .je-step-when { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--uber-cash-blue); margin-bottom: 18px; }
        .je-step-place {
          font-family: var(--f-display);
          font-weight: 700;
          font-size: clamp(28px, 3vw, 40px);
          letter-spacing: -0.02em;
          line-height: 1.05;
          margin-bottom: 14px;
        }
        .je-step-what {
          color: var(--t-2);
          font-size: 16px;
          line-height: 1.5;
          margin-bottom: 28px;
        }
        .je-scan-callout {
          margin-top: auto;
          padding: 18px 18px 18px 20px;
          border: 1px dashed var(--line-strong);
          border-radius: 12px;
          display: flex;
          align-items: center;
          gap: 14px;
          position: relative;
        }
        .je-scan-callout::after {
          content: "→";
          position: absolute;
          right: -36px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 28px;
          color: var(--t-3);
        }
        .je-scan-callout-k {
          font-family: var(--f-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          color: var(--t-1);
          margin-bottom: 4px;
        }
        .je-scan-callout-body { font-size: 13px; color: var(--t-3); }
        .je-scan-icon {
          width: 40px; height: 40px;
          border-radius: 10px;
          border: 1px solid var(--line-strong);
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          color: var(--t-1);
        }

        .je-right {
          border: 1px solid var(--line);
          border-radius: 18px;
          background: #0a0a0c;
          padding: 28px;
          display: flex;
          flex-direction: column;
          min-height: 560px;
          position: relative;
          overflow: hidden;
        }
        .je-right::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            radial-gradient(ellipse 60% 40% at 80% 10%, rgba(95,179,255,0.06), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%);
          pointer-events: none;
        }
        .je-right > * { position: relative; z-index: 1; }
        .je-right-head {
          display: flex; justify-content: space-between; align-items: center;
          padding-bottom: 18px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 22px;
        }
        .je-right-head-k {
          font-family: var(--f-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          color: var(--t-2);
        }
        .je-right-head-r {
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.12em;
          color: var(--t-4);
        }

        .je-measures { display: grid; gap: 14px; }
        .je-m-row {
          display: grid;
          grid-template-columns: 1fr 1.4fr;
          gap: 16px;
          padding: 12px 0;
          border-bottom: 1px dashed var(--line);
        }
        .je-m-row:last-child { border-bottom: none; }
        .je-m-k {
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.16em;
          color: var(--t-3);
        }
        .je-m-v {
          font-family: var(--f-mono);
          font-size: 13px;
          color: var(--t-1);
          word-break: break-word;
        }

        .je-controls {
          margin-top: 32px;
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 16px;
          align-items: center;
        }
        .je-btn {
          width: 40px; height: 40px;
          border: 1px solid var(--line-strong);
          border-radius: 999px;
          background: transparent;
          color: var(--t-1);
          display: flex; align-items: center; justify-content: center;
          transition: background 160ms ease;
        }
        .je-btn:hover { background: rgba(255,255,255,0.06); }
        .je-progress {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
        }
        .je-dot {
          flex: 1;
          height: 4px;
          min-width: 12px;
          border-radius: 999px;
          background: var(--line);
          cursor: pointer;
          transition: background 160ms ease;
        }
        .je-dot.active { background: var(--t-1); }
        .je-dot.passed { background: var(--t-3); }
        .je-counter {
          font-family: var(--f-mono);
          font-size: 12px;
          color: var(--t-3);
          letter-spacing: 0.06em;
        }

        @media (max-width: 1000px) {
          .je-top { grid-template-columns: 1fr; }
          .je-stage { grid-template-columns: 1fr; }
          .je-left, .je-right { min-height: auto; }
          .je-scan-callout::after { display: none; }
        }
      `}</style>
      <div className="container je-wrap">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 32 }}>{t.hookEyebrow}</div>
        </Reveal>
        <div className="je-top">
          <Reveal>
            <h2 className="je-h">{t.hookHeadline}<br/><em>Tap through one scan.</em></h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="je-sub">{t.hookBody}</p>
          </Reveal>
        </div>
        <div className="je-stage">
          <Reveal>
            <div className="je-left">
              <div className="je-step-k">STEP {String(cur.id).padStart(2,"0")} OF 10</div>
              <div className="je-step-when">{cur.when}</div>
              <div className="je-step-place">{cur.place}</div>
              <div className="je-step-what">{cur.what}</div>
              {cur.id === 3 ? (
                <div className="je-scan-callout">
                  <div className="je-scan-icon"><Icon name="qr" size={22} stroke={1.3}/></div>
                  <div>
                    <div className="je-scan-callout-k">{t.scanCalloutTitle}</div>
                    <div className="je-scan-callout-body">{t.scanCalloutBody}</div>
                  </div>
                </div>
              ) : (
                <div style={{ marginTop: "auto", display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {cur.measures.slice(0, 2).map((m, i) => (
                    <span key={i} style={{
                      fontFamily: "var(--f-mono)",
                      fontSize: 11,
                      color: "var(--t-3)",
                      padding: "5px 12px",
                      background: "rgba(255,255,255,0.04)",
                      border: "1px solid var(--line-soft)",
                      borderRadius: 999,
                    }}>{m[0]}</span>
                  ))}
                </div>
              )}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="je-right">
              <div className="je-right-head">
                <div className="je-right-head-k"><span className="live-dot"/>{t.overlayHeader}</div>
                <div className="je-right-head-r">scan_id 8f4a · venue NCA-AMP-001</div>
              </div>
              <div className="je-measures">
                {cur.measures.map((m, i) => (
                  <div className="je-m-row" key={i}>
                    <div className="je-m-k">{m[0]}</div>
                    <div className="je-m-v">{m[1]}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: "auto", paddingTop: 18, fontSize: 11, fontFamily: "var(--f-mono)", color: "var(--t-4)", letterSpacing: "0.1em" }}>
                FIRST-PARTY · UBER-OWNED · NO MIDDLEWARE
              </div>
            </div>
          </Reveal>
        </div>
        <div className="je-controls">
          <button className="je-btn" aria-label="Previous step"
            onClick={() => { setPaused(true); setStep((s) => (s - 1 + screens.length) % screens.length); }}>
            <Icon name="arrow" size={14}/>
            <span style={{ position: "absolute", clip: "rect(0,0,0,0)" }}>Prev</span>
            <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}/>
          </button>
          <div className="je-progress" role="tablist">
            {screens.map((s, i) => (
              <div
                key={i}
                className={"je-dot " + (i === step ? "active" : i < step ? "passed" : "")}
                onClick={() => { setPaused(true); setStep(i); }}
                role="tab"
                aria-label={"Step " + (i+1)}
              />
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div className="je-counter">{String(step + 1).padStart(2,"0")} / 10</div>
            <button className="je-btn" aria-label="Next step"
              onClick={() => { setPaused(true); setStep((s) => (s + 1) % screens.length); }}>
              <Icon name="arrow" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { JourneyEngine });