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

// ============================================================================
// FEATURED QUEST — The Mines of White Label
// ============================================================================

function FeaturedMines() {
  return (
    <section id="mines" className="stone-bg" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="wrap">
        <Chapter
          tag="★ FEATURED PROJECT I"
          title="THE MINES OF WHITE LABEL"
          sub="A pixel-art Cozy/Management game — currently in development." />
        

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }} className="mines-grid">
          {/* Left: hero image placeholder */}
          <div className="stack">
            <div style={{ position: "relative" }}>
              <img
                src="assets/white-label/main.png"
                alt="The Mines of White Label key art"
                style={{
                  width: "100%",
                  height: 420,
                  objectFit: "cover",
                  border: "4px solid var(--ink)",
                  display: "block",
                }} />              
              <div style={{ position: "absolute", top: 16, left: 16, display: "flex", gap: 8 }}>
                <Badge kind="featured">★ FEATURED</Badge>
                <Badge kind="dev">IN DEVELOPMENT</Badge>
              </div>
            </div>

            {/* Three smaller screenshots */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                <img
                  src="assets/white-label/screenshot 1.png"
                  alt="The Mines of White Label Screenshot 1"
                  style={{
                    width: "100%",
                    height: 120,
                    objectFit: "cover",
                    border: "4px solid var(--ink)",
                    display: "block",
                  }} />
                <img
                  src="assets/white-label/screenshot 2.png"
                  alt="The Mines of White Label Screenshot 2"
                  style={{
                    width: "100%",
                    height: 120,
                    objectFit: "cover",
                    border: "4px solid var(--ink)",
                    display: "block",
                  }} />
                <img
                  src="assets/white-label/screenshot 3.png"
                  alt="The Mines of White Label Screenshot 3"
                  style={{
                    width: "100%",
                    height: 120,
                    objectFit: "cover",
                    border: "4px solid var(--ink)",
                    display: "block",
                  }} />
            </div>
          </div>

          {/* Right: details panel */}
          <div className="stack">
            <Panel>
              <div className="px-sm" style={{ marginBottom: 12 }}>GAME INFO</div>
              <table style={{ width: "100%", fontSize: 22, borderCollapse: "collapse" }}>
                <tbody>
                  <tr style={{ borderBottom: "2px dashed var(--ink-soft)" }}>
                    <td className="px-tiny" style={{ padding: "8px 0", opacity: 0.6, width: "40%" }}>STUDIO</td>
                    <td>[SAMPLE TEXT] Studios ltd</td>
                  </tr>
                  <tr style={{ borderBottom: "2px dashed var(--ink-soft)" }}>
                    <td className="px-tiny" style={{ padding: "8px 0", opacity: 0.6 }}>ROLE</td>
                    <td>Everything</td>
                  </tr>
                  <tr style={{ borderBottom: "2px dashed var(--ink-soft)" }}>
                    <td className="px-tiny" style={{ padding: "8px 0", opacity: 0.6 }}>ENGINE</td>
                    <td>Unity</td>
                  </tr>
                  <tr style={{ borderBottom: "2px dashed var(--ink-soft)" }}>
                    <td className="px-tiny" style={{ padding: "8px 0", opacity: 0.6 }}>GENRE</td>
                    <td>Cozy/Management</td>
                  </tr>
                  <tr>
                    <td className="px-tiny" style={{ padding: "8px 0", opacity: 0.6 }}>STATUS</td>
                    <td>Playtest on Steam</td>
                  </tr>
                </tbody>
              </table>
            </Panel>

            <Panel variant="simple">
              <div className="px-sm" style={{ marginBottom: 10 }}>WHAT I DID</div>
              <QuestLog entries={[
              { done: true, text: "Everything (other than narrative)" },
              { done: true, text: "Simple Quest building system" },
              { done: true, text: "Runtime UI through UI Toolkit" },
              { done: true, text: "Custom save/serialization pipeline" },
              { done: false, text: "Steam launch — coming soon" }]
              } />
            </Panel>

            <PixelBtn
              href="https://store.steampowered.com/app/2792840/The_Mines_of_White_Label/"
              target="_blank"
              kind="primary">
              
              ◢ View on Steam ↗
            </PixelBtn>
          </div>
        </div>

        {/* Lower row: pull-quote / pillars */}
        <div style={{ marginTop: 40 }}>
          <PixelDivider>DESIGN PILLARS</PixelDivider>
          <div className="grid-3" style={{ marginTop: 24 }}>
            <Panel variant="simple" tight>
              <div className="px-xs" style={{ color: "var(--heart)", marginBottom: 6 }}>I.</div>
              <div className="px-sm" style={{ marginBottom: 8 }}>SIMPLE</div>
              <p style={{ fontSize: 20 }}>Every interaction is intuitive and straightforward, never letting the player feel frustrated.</p>
            </Panel>
            <Panel variant="simple" tight>
              <div className="px-xs" style={{ color: "var(--heart)", marginBottom: 6 }}>II.</div>
              <div className="px-sm" style={{ marginBottom: 8 }}>DATA-DRIVEN CONTENT</div>
              <p style={{ fontSize: 20 }}>All items, recipes, NPCs are ScriptableObjects. Designers (myself) can author content without touching code.</p>
            </Panel>
            <Panel variant="simple" tight>
              <div className="px-xs" style={{ color: "var(--heart)", marginBottom: 6 }}>III.</div>
              <div className="px-sm" style={{ marginBottom: 8 }}>JUCY</div>
              <p style={{ fontSize: 20 }}>Each swing of the hammer should feel as fun as possable. Little interactions that make the game feel alive.</p>
            </Panel>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { FeaturedMines });