/* global React, HeartRow, Panel, Badge, Chapter, StatLine, CounterHUD, PixelBtn, QuestLog, PixelImagePlaceholder, PixelSprite, PixelCharacter, Typewriter, PixelDivider */

// ============================================================================
// SIDE QUESTS — other shipped games
// ============================================================================

const SIDE_QUESTS = [
  {
    id: "frame-of-mind",
    title: "FRAME OF MIND",
    tagline: "A surreal puzzle adventure.",
    role: "Tools / Gameplay",
    status: "shipped",
    color: "dirt",
    bullets: [
      "Over 100k downloads",
      "Mind bending puzzles",
      "Shipped on Steam",
    ],
    image: "assets/other-games/frame-of-mind.png",
    href: "https://store.steampowered.com/app/1485250/Frame_of_Mind/",
  },
  {
    id: "zeitgeist",
    title: "ZEITGEIST",
    tagline: "A time-bending narrative experience.",
    role: "Tools / Gameplay",
    status: "shipped",
    color: "river",
    bullets: [
      "Jump between past & present",
      "Rewind time instead of dying",
      "Shipped on Steam",
    ],
    image: "assets/other-games/zeitgeist.png",
    href: "https://store.steampowered.com/app/1791820/Zeitgeist/",
  },
];

function SideQuests() {
  return (
    <section id="games" className="dirt-bg" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="wrap">
        <Chapter
          tag="◆ CHAPTER 03"
          title="Other Games  "
          sub="Two more Award Winning games shipped."
        />

        <div className="grid-2">
          {SIDE_QUESTS.map(g => (
            <Panel key={g.id}>
              <div style={{
                boxShadow: "inset 0 0 0 4px var(--ink)",
                position: "relative",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                gap: 8,
                color: "var(--parchment)",
                fontFamily: "var(--font-pixel)",
                padding: 4,
              }}>
              
                <img src={g.image} alt={g.title} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }}></img>
              </div>
              <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                <div className="px-sm">{g.title}</div>
                <Badge kind="shipped">SHIPPED</Badge>
              </div>
              <div style={{ fontSize: 21, color: "var(--ink-soft)", marginBottom: 14 }}>{g.tagline}</div>
              <div className="divider--dashed"></div>
              <div style={{ display: "flex", justifyContent: "space-between", margin: "10px 0", fontSize: 20 }}>
                <span className="px-tiny" style={{ opacity: 0.6 }}>ROLE</span>
                <span>{g.role}</span>
              </div>
              <ul style={{ listStyle: "none", marginBottom: 16 }}>
                {g.bullets.map((b, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, fontSize: 19, padding: "3px 0" }}>
                    <span style={{ color: "var(--heart)" }}>◆</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <PixelBtn href={g.href} target="_blank">View on Steam ↗</PixelBtn>
            </Panel>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// EXPERIENCE TIMELINE
// ============================================================================

const TIMELINE = [
  {
    year: "NOW",
    title: "The Mines of White Label",
    role: "Solo dev — Tools & Gameplay",
    note: "In development. A pixel-art Cozy/Management game - currently in development.",
    icon: "pickaxe",
    badge: "dev",
    badgeText: "IN DEV",
  },
  {
    year: "PRESENT",
    title: "Content Creation Toolkit (CCT)",
    role: "Author & maintainer",
    note: "no-code authoring tool so designers can build VR modules in minutes instead of weeks. Used for all current and future projects.",
    icon: "chest",
    badge: "maintained",
    badgeText: "MAINTAINED",
  },
  {
    year: "PRIOR",
    title: "Zeitgeist",
    role: "Tools & gameplay programmer",
    note: "Time-bending narrative game about jumping between the past and present. Shipped on Steam.",
    icon: "gem",
    badge: "shipped",
    badgeText: "SHIPPED",
  },
  {
    year: "PRIOR",
    title: "Frame of Mind",
    role: "Tools & gameplay programmer",
    note: "Surreal puzzle adventure filled with optical illusions. Shipped on Steam.",
    icon: "sword",
    badge: "shipped",
    badgeText: "SHIPPED",
  },
];

function Timeline() {
  return (
    <section id="timeline" className="stone-bg" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="wrap">
        <Chapter
          tag="◆ CHAPTER 04"
          title="EXPERIENCE LOG"
          sub="A short journal of past adventures."
        />

        <div style={{ position: "relative", paddingLeft: 60 }}>
          {/* vertical track */}
          <div style={{
            position: "absolute",
            left: 28, top: 8, bottom: 8,
            width: 6,
            background: "var(--ink)",
            backgroundImage: "repeating-linear-gradient(0deg, var(--gold) 0 6px, var(--ink) 6px 18px)",
          }}></div>

          <div className="stack" style={{ gap: 20 }}>
            {TIMELINE.map((t, i) => (
              <div key={i} style={{ position: "relative" }}>
                {/* node */}
                <div style={{
                  position: "absolute",
                  left: -42, top: 24,
                  width: 28, height: 28,
                  background: "var(--gold)",
                  boxShadow: "0 0 0 4px var(--ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <PixelSprite kind={t.icon} size={20} />
                </div>

                <Panel variant="simple">
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
                    <div style={{ flex: "1 1 320px" }}>
                      <div className="px-tiny" style={{ color: "var(--heart)", marginBottom: 6 }}>{t.year}</div>
                      <div className="px-sm" style={{ marginBottom: 6 }}>{t.title}</div>
                      <div style={{ fontSize: 20, color: "var(--ink-soft)", marginBottom: 8 }}>{t.role}</div>
                      <p style={{ fontSize: 21 }}>{t.note}</p>
                    </div>
                    <Badge kind={t.badge}>{t.badgeText}</Badge>
                  </div>
                </Panel>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SideQuests, Timeline });