/* Sosh Insider — Bali :: Story window + bottom Dock */

/* ---- the manifesto ---- */
function StoryWindow({ geom, onClose, onTitleDown, onFocus, z }) {
  const rules = [
    ["01", "Strangers only.", "Nobody knew anybody at the gate."],
    ["02", "Phones in the box.", "Locked away for the whole trip."],
    ["03", "One camera.", "Passed hand to hand. Whoever held it, saw."],
    ["04", "Nothing gets posted.", "This page is the only place it lives."],
  ];
  return (
    <div onMouseDown={onFocus} style={{ position: "absolute", left: geom.x, top: geom.y, width: geom.w, height: geom.h, zIndex: z }}>
      <MacWindow title="read_me — what is sosh insider?" onClose={onClose} onTitleDown={onTitleDown} zoomable={false} style={{ position: "relative", width: "100%", height: "100%" }}>
        <div className="scroller" style={{ background: "var(--paper)", padding: "20px 22px 24px" }}>
          <div className="pixel" style={{ fontSize: 8.5, letterSpacing: 1, color: "var(--ink-soft)", textTransform: "uppercase" }}>
            Sosh Insider — est. on the way to the airport
          </div>
          <div className="serif" style={{ fontSize: "clamp(30px,4vw,44px)", lineHeight: 0.98, letterSpacing: "-0.01em", marginTop: 8 }}>
            A trip nobody<br />posted.
          </div>

          <div className="serif" style={{ fontSize: 16.5, lineHeight: 1.55, color: "var(--ink-soft)", marginTop: 16, display: "flex", flexDirection: "column", gap: 12, maxWidth: 560 }}>
            <p style={{ margin: 0 }}>
              Sosh Insider isn't an agency or a feed. It started as a dare — a group of
              <em> strangers</em>, one island, and a rule that the trip could not be posted,
              proven, or performed for anyone who wasn't there.
            </p>
            <p style={{ margin: 0 }}>
              We met at the airport. Phones went into a locked box. The only camera allowed
              was a single body, passed hand to hand — whoever was holding it was the one
              who got to see.
            </p>
            <p style={{ margin: 0 }}>
              What you're looking at is everything that came back. No captions written for
              an audience. Just Bali, in the order the light gave it to us.
            </p>
          </div>

          {/* the rules */}
          <div className="pixel" style={{ fontSize: 8.5, letterSpacing: 1, color: "var(--ink-soft)", textTransform: "uppercase", margin: "22px 0 10px" }}>
            ▸ The rules
          </div>
          <div style={{ display: "flex", flexDirection: "column", border: "2px solid var(--line)" }}>
            {rules.map(([n, t, d], i) => (
              <div key={n} style={{ display: "flex", gap: 12, alignItems: "baseline", padding: "10px 12px", background: i % 2 ? "var(--paper2)" : "var(--paper)", borderBottom: i < rules.length - 1 ? "1px solid rgba(43,38,34,0.25)" : "none" }}>
                <span className="mono" style={{ fontSize: 15, color: "var(--terracotta)", flex: "0 0 auto" }}>{n}</span>
                <span className="pixel" style={{ fontSize: 9.5, flex: "0 0 auto", minWidth: 0 }}>{t}</span>
                <span className="serif" style={{ fontSize: 14.5, color: "var(--ink-soft)", marginLeft: "auto", textAlign: "right" }}>{d}</span>
              </div>
            ))}
          </div>

          <div className="serif" style={{ fontSize: 15, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 18 }}>
            Four days. One island. No proof we were there but this.<br />
            — nine strangers, somewhere above Uluwatu
          </div>
        </div>
      </MacWindow>
    </div>
  );
}

/* ---- dock pixel icons ---- */
const DockTV = () => (
  <svg width="30" height="26" viewBox="0 0 30 26" shapeRendering="crispEdges">
    <rect x="2" y="6" width="26" height="18" fill="#5d544c" stroke="#2b2622" strokeWidth="2" />
    <rect x="5" y="9" width="16" height="12" fill="#bfe3e6" stroke="#2b2622" strokeWidth="1.5" />
    <line x1="22" y1="2" x2="18" y2="7" stroke="#2b2622" strokeWidth="2" />
    <line x1="26" y1="2" x2="22" y2="7" stroke="#2b2622" strokeWidth="2" />
    <rect x="23" y="10" width="3" height="3" fill="#c97b5a" />
    <rect x="23" y="16" width="3" height="3" fill="#c9a44c" />
  </svg>
);
const DockFilm = () => (
  <svg width="28" height="26" viewBox="0 0 28 26" shapeRendering="crispEdges">
    <circle cx="14" cy="13" r="11" fill="#3a342e" stroke="#2b2622" strokeWidth="2" />
    <circle cx="14" cy="13" r="3.5" fill="#f4e7d6" stroke="#2b2622" strokeWidth="1.5" />
    {[0, 72, 144, 216, 288].map((a) => {
      const r = (a * Math.PI) / 180;
      return <circle key={a} cx={14 + Math.cos(r) * 7} cy={13 + Math.sin(r) * 7} r="1.6" fill="#f4e7d6" />;
    })}
  </svg>
);
const DockNote = () => (
  <svg width="24" height="26" viewBox="0 0 24 26" shapeRendering="crispEdges">
    <rect x="3" y="2" width="18" height="22" fill="#fbf5ec" stroke="#2b2622" strokeWidth="2" />
    {[8, 12, 16, 20].map((y) => <line key={y} x1="6" y1={y} x2="18" y2={y} stroke="#c97b5a" strokeWidth="1.5" />)}
  </svg>
);
const DockCassette = () => (
  <svg width="30" height="24" viewBox="0 0 30 24" shapeRendering="crispEdges">
    <rect x="2" y="3" width="26" height="18" fill="#2b2622" stroke="#2b2622" strokeWidth="2" />
    <rect x="5" y="6" width="20" height="8" fill="#e9dcc6" stroke="#2b2622" strokeWidth="1.5" />
    <circle cx="11" cy="10" r="2" fill="#2b2622" />
    <circle cx="19" cy="10" r="2" fill="#2b2622" />
    <rect x="9" y="17" width="12" height="3" fill="#c9a44c" />
  </svg>
);
const DockBook = () => (
  <svg width="26" height="26" viewBox="0 0 26 26" shapeRendering="crispEdges">
    <rect x="3" y="3" width="20" height="20" fill="#8a8b5c" stroke="#2b2622" strokeWidth="2" />
    <line x1="13" y1="3" x2="13" y2="23" stroke="#2b2622" strokeWidth="2" />
    <rect x="3" y="3" width="20" height="4" fill="rgba(255,255,255,0.3)" />
  </svg>
);

function Dock({ items }) {
  return (
    <div
      style={{
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        display: "flex",
        justifyContent: "center",
        zIndex: 900,
        pointerEvents: "none",
        padding: "0 8px 10px",
      }}
    >
      <div
        style={{
          display: "flex",
          background: "var(--paper)",
          border: "2px solid var(--line)",
          boxShadow: "3px 3px 0 rgba(43,38,34,0.3)",
          pointerEvents: "auto",
          maxWidth: "100%",
          overflowX: "auto",
        }}
      >
        {items.map((it, i) => (
          <button
            key={it.id}
            data-clickable
            onClick={() => {
              window.SFX && SFX.open();
              it.onClick();
            }}
            title={it.label}
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 5,
              padding: "9px 14px 7px",
              minWidth: 64,
              background: it.active ? "var(--terracotta)" : "var(--paper)",
              border: "none",
              borderLeft: i ? "1px solid rgba(43,38,34,0.25)" : "none",
              color: it.active ? "#fff" : "var(--ink)",
            }}
            onMouseEnter={(e) => { if (!it.active) e.currentTarget.style.background = "var(--paper2)"; }}
            onMouseLeave={(e) => { if (!it.active) e.currentTarget.style.background = "var(--paper)"; }}
          >
            <span style={{ height: 26, display: "flex", alignItems: "center" }}>{it.icon}</span>
            <span className="pixel" style={{ fontSize: 7.5, textTransform: "uppercase", letterSpacing: 0.3, whiteSpace: "nowrap" }}>{it.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { StoryWindow, Dock, DockTV, DockFilm, DockNote, DockCassette, DockBook });