// Hotel Walks — abstract illustrations for the marketing site.
// All Ink + Bone only. Drawn at 200×200 viewBox; pass color for the stroke.

(function() {
  function Frame({ children, size = 180, stroke = "currentColor", style }) {
    return (
      <svg viewBox="0 0 200 200" width={size} height={size} style={style}>
        {children}
      </svg>
    );
  }

  /* ─── Feature 1 · Partner routing ─────────────────────────────
     A central node, four partner nodes around it at different
     distances. Labelled 1–4 to imply ranking.
  ─────────────────────────────────────────────────────────────── */
  function IxRouting({ size = 180, color = "currentColor" }) {
    const c = color;
    const cx = 100, cy = 110;
    const partners = [
      { x: 35,  y: 50,  n: "1" },
      { x: 170, y: 45,  n: "2" },
      { x: 50,  y: 175, n: "3" },
      { x: 175, y: 165, n: "4" },
    ];
    return (
      <Frame size={size}>
        {/* center node */}
        <circle cx={cx} cy={cy} r="20" fill="none" stroke={c} strokeWidth="2" />
        <circle cx={cx} cy={cy} r="4" fill={c} />
        {/* connections */}
        {partners.map((p, i) => (
          <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke={c} strokeWidth="1" strokeDasharray={i === 0 ? "" : "3 3"} />
        ))}
        {/* partner dots */}
        {partners.map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="9" fill="none" stroke={c} strokeWidth="2" />
            <text x={p.x} y={p.y + 4} fontSize="10" fontFamily="JetBrains Mono, monospace" fill={c} textAnchor="middle">{p.n}</text>
          </g>
        ))}
      </Frame>
    );
  }

  /* ─── Feature 2 · Escalation timer ────────────────────────────
     A clock face with a hand mid-rotation, plus a forward arrow
     suggesting "moves to the next one".
  ─────────────────────────────────────────────────────────────── */
  function IxTimer({ size = 180, color = "currentColor" }) {
    const c = color;
    return (
      <Frame size={size}>
        {/* clock face */}
        <circle cx="80" cy="100" r="60" fill="none" stroke={c} strokeWidth="2" />
        {/* tick marks at 12 / 3 / 6 / 9 */}
        {[0,1,2,3].map(i => {
          const a = (i * 90 - 90) * Math.PI / 180;
          const r1 = 54, r2 = 60;
          return <line key={i} x1={80 + Math.cos(a)*r1} y1={100 + Math.sin(a)*r1} x2={80 + Math.cos(a)*r2} y2={100 + Math.sin(a)*r2} stroke={c} strokeWidth="2" />;
        })}
        {/* small ticks */}
        {Array.from({length: 12}).map((_, i) => {
          if (i % 3 === 0) return null;
          const a = (i * 30 - 90) * Math.PI / 180;
          const r1 = 56, r2 = 60;
          return <line key={i} x1={80 + Math.cos(a)*r1} y1={100 + Math.sin(a)*r1} x2={80 + Math.cos(a)*r2} y2={100 + Math.sin(a)*r2} stroke={c} strokeWidth="1" opacity="0.5" />;
        })}
        {/* hands — pointing at ~10 mins past */}
        <line x1="80" y1="100" x2="80" y2="58" stroke={c} strokeWidth="2" />
        <line x1="80" y1="100" x2="112" y2="118" stroke={c} strokeWidth="2" />
        <circle cx="80" cy="100" r="3" fill={c} />
        {/* forward arrow */}
        <line x1="155" y1="100" x2="190" y2="100" stroke={c} strokeWidth="2" />
        <polyline points="180,90 190,100 180,110" fill="none" stroke={c} strokeWidth="2" />
      </Frame>
    );
  }

  /* ─── Feature 3 · Walk letter ─────────────────────────────────
     Three stacked document silhouettes (guest / hotel / emailed).
     A small "key" mark on the top one to evoke a certificate.
  ─────────────────────────────────────────────────────────────── */
  // `bg` is the "paper" colour of the documents — it should match the surrounding card background so
  // the doc rectangles read as outlined paper, and the key-hole and shaft sit cleanly inside them.
  // Passing a CSS variable (e.g. "var(--hw-paper)") lets the icon flip with a parent's hover state.
  function IxLetter({ size = 180, color = "currentColor", bg = "var(--ink)" }) {
    const c = color;
    return (
      <Frame size={size}>
        {/* back doc */}
        <g transform="translate(30 60) rotate(-6 60 70)">
          <rect x="0" y="0" width="120" height="140" fill="none" stroke={c} strokeWidth="2" />
          <line x1="14" y1="22" x2="60" y2="22" stroke={c} strokeWidth="1" />
          {[40,55,70,85,100,115].map(y => (
            <line key={y} x1="14" y1={y} x2="106" y2={y} stroke={c} strokeWidth="1" opacity="0.3" />
          ))}
        </g>
        {/* middle doc */}
        <g transform="translate(50 50) rotate(-1 60 70)">
          <rect x="0" y="0" width="120" height="140" fill={bg} stroke={c} strokeWidth="2" />
          <line x1="14" y1="22" x2="60" y2="22" stroke={c} strokeWidth="1" />
          {[40,55,70,85,100,115].map(y => (
            <line key={y} x1="14" y1={y} x2="106" y2={y} stroke={c} strokeWidth="1" opacity="0.3" />
          ))}
        </g>
        {/* front doc */}
        <g transform="translate(65 40) rotate(5 60 70)">
          <rect x="0" y="0" width="120" height="140" fill={bg} stroke={c} strokeWidth="2" />
          {/* mini key glyph */}
          <circle cx="22" cy="22" r="7" fill={c} />
          <circle cx="22" cy="22" r="2" fill={bg} />
          <rect x="29" y="20" width="20" height="4" fill={c} />
          {/* text lines */}
          <line x1="14" y1="44" x2="100" y2="44" stroke={c} strokeWidth="1" opacity="0.5" />
          <line x1="14" y1="58" x2="80" y2="58" stroke={c} strokeWidth="1" opacity="0.3" />
          <line x1="14" y1="72" x2="100" y2="72" stroke={c} strokeWidth="1" opacity="0.3" />
          <line x1="14" y1="86" x2="60" y2="86" stroke={c} strokeWidth="1" opacity="0.3" />
          {/* serial line */}
          <line x1="14" y1="124" x2="106" y2="124" stroke={c} strokeWidth="1" />
        </g>
      </Frame>
    );
  }

  /* ─── Feature 4 · Invoices & credits ──────────────────────────
     A ledger with rows summing to a total.
  ─────────────────────────────────────────────────────────────── */
  function IxLedger({ size = 180, color = "currentColor" }) {
    const c = color;
    const rows = [
      { y: 45,  w: 110, side: "L" },
      { y: 70,  w: 130, side: "A" },
      { y: 95,  w: 80,  side: "L", strike: true }, // no-show
      { y: 120, w: 120, side: "A" },
    ];
    return (
      <Frame size={size}>
        <rect x="20" y="20" width="160" height="160" fill="none" stroke={c} strokeWidth="2" />
        {/* header */}
        <line x1="20" y1="35" x2="180" y2="35" stroke={c} strokeWidth="1" />
        <text x="30" y="31" fontSize="8" fontFamily="JetBrains Mono, monospace" fill={c} letterSpacing="1">DATE   SIDE     AMOUNT</text>
        {rows.map((r, i) => (
          <g key={i}>
            {/* small date pip */}
            <line x1="30" y1={r.y} x2="42" y2={r.y} stroke={c} strokeWidth="1" />
            {/* side letter */}
            <text x="60" y={r.y + 3} fontSize="9" fontFamily="JetBrains Mono, monospace" fill={c}>{r.side}</text>
            {/* amount bar */}
            <line x1="85" y1={r.y} x2={85 + r.w * 0.5} y2={r.y} stroke={c} strokeWidth="2" />
            {r.strike && <line x1="85" y1={r.y - 2} x2={85 + r.w * 0.5} y2={r.y + 2} stroke={c} strokeWidth="1.5" />}
          </g>
        ))}
        {/* total */}
        <line x1="20" y1="150" x2="180" y2="150" stroke={c} strokeWidth="1" />
        <text x="30" y="170" fontSize="8" fontFamily="JetBrains Mono, monospace" fill={c} letterSpacing="1">TOTAL</text>
        <line x1="100" y1="167" x2="170" y2="167" stroke={c} strokeWidth="3" />
      </Frame>
    );
  }

  /* ─── Small flow icons (32px-ish) ─────────────────────────── */
  function FlowIcon({ kind, size = 36, color = "currentColor" }) {
    const c = color;
    const wrap = (children) => (
      <svg viewBox="0 0 36 36" width={size} height={size} fill="none" stroke={c} strokeWidth="1.5">{children}</svg>
    );
    switch (kind) {
      case "request":
        // square with an arrow exiting
        return wrap(<>
          <rect x="3" y="6" width="20" height="24" />
          <line x1="20" y1="18" x2="34" y2="18" />
          <polyline points="29,13 34,18 29,23" />
        </>);
      case "broadcast":
        // dot with three arcs
        return wrap(<>
          <circle cx="18" cy="18" r="2" fill={c} />
          <path d="M22 14 a6 6 0 0 1 0 8" />
          <path d="M25 11 a10 10 0 0 1 0 14" />
          <path d="M14 14 a6 6 0 0 0 0 8" />
          <path d="M11 11 a10 10 0 0 0 0 14" />
        </>);
      case "accept":
        return wrap(<>
          <circle cx="18" cy="18" r="14" />
          <polyline points="11,18 16,23 25,13" />
        </>);
      case "letter":
        return wrap(<>
          <rect x="5" y="4" width="26" height="28" />
          <line x1="10" y1="11" x2="22" y2="11" />
          <line x1="10" y1="17" x2="26" y2="17" strokeOpacity="0.5" />
          <line x1="10" y1="21" x2="26" y2="21" strokeOpacity="0.5" />
          <line x1="10" y1="25" x2="20" y2="25" strokeOpacity="0.5" />
        </>);
      case "settle":
        return wrap(<>
          <line x1="6" y1="14" x2="30" y2="14" />
          <line x1="6" y1="22" x2="30" y2="22" />
          <circle cx="18" cy="18" r="14" />
        </>);
      default: return null;
    }
  }

  /* ─── Problem section · timeline graphic ──────────────────────
     A timeline labelled 11:00pm → 11:45pm with failed call attempts
     (X marks) and a single accept (•). On bone background, ink lines.
  ─────────────────────────────────────────────────────────────── */
  function IxTimeline({ width = 460, color = "currentColor", fullWidth }) {
    const c = color;
    // 45-minute window from 11:00 PM. Times derived from t (0..1).
    const events = [
      { t: 0.05, kind: "x",  label: "call 1", time: "11:02" },
      { t: 0.20, kind: "x",  label: "call 2", time: "11:09" },
      { t: 0.42, kind: "x",  label: "call 3", time: "11:19" },
      { t: 0.62, kind: "x",  label: "call 4", time: "11:28" },
      { t: 0.92, kind: "ok", label: "accept", time: "11:41" },
    ];
    return (
      <svg viewBox={`0 0 ${width} 120`} width="100%" style={{ maxWidth: fullWidth ? "100%" : width, display: "block" }}>
        {/* timeline */}
        <line x1="20" y1="60" x2={width-20} y2="60" stroke={c} strokeWidth="2" />
        {/* tick at start + end */}
        <line x1="20" y1="50" x2="20" y2="70" stroke={c} strokeWidth="2" />
        <line x1={width-20} y1="50" x2={width-20} y2="70" stroke={c} strokeWidth="2" />
        {/* labels */}
        <text x="20" y="40" fontSize="11" fontFamily="JetBrains Mono, monospace" fill={c} letterSpacing="1.5">11:00 PM</text>
        <text x={width-20} y="40" fontSize="11" fontFamily="JetBrains Mono, monospace" fill={c} letterSpacing="1.5" textAnchor="end">11:45 PM</text>
        {/* events */}
        {events.map((e, i) => {
          const x = 20 + (width - 40) * e.t;
          if (e.kind === "x") return (
            <g key={i}>
              <line x1={x-5} y1={55} x2={x+5} y2={65} stroke={c} strokeWidth="2" />
              <line x1={x-5} y1={65} x2={x+5} y2={55} stroke={c} strokeWidth="2" />
              <text x={x} y={86} fontSize="10" fontFamily="JetBrains Mono, monospace" fill={c} textAnchor="middle" letterSpacing="0.8">{e.time}</text>
              <text x={x} y={102} fontSize="9" fontFamily="JetBrains Mono, monospace" fill={c} opacity="0.55" textAnchor="middle" letterSpacing="1">{e.label}</text>
            </g>
          );
          return (
            <g key={i}>
              <circle cx={x} cy={60} r="7" fill={c} />
              <text x={x} y={86} fontSize="10" fontFamily="JetBrains Mono, monospace" fill={c} textAnchor="middle" letterSpacing="0.8">{e.time}</text>
              <text x={x} y={102} fontSize="9" fontFamily="JetBrains Mono, monospace" fill={c} textAnchor="middle" letterSpacing="1">{e.label.toUpperCase()}</text>
            </g>
          );
        })}
      </svg>
    );
  }

  window.HWIx = { IxRouting, IxTimer, IxLetter, IxLedger, FlowIcon, IxTimeline };
})();
