/* Featured — Remember to Die. Larger card with animated stamp + progress bar. */

// RTD launch: 26 September 2026, midnight NZ time. September 26 is still NZST
// (UTC+12); NZDT 2026 begins on the last Sunday, 27 Sept.
const RTD_SHIP_ISO = "2026-09-26T00:00:00+12:00";

function useCountdown(targetIso) {
  const target = React.useMemo(() => new Date(targetIso).getTime(), [targetIso]);
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  return {
    days: Math.floor(diff / 86400000),
    hours: Math.floor((diff % 86400000) / 3600000),
    minutes: Math.floor((diff % 3600000) / 60000),
    seconds: Math.floor((diff % 60000) / 1000),
    done: diff <= 0,
  };
}

function CountdownTile({ value, label }) {
  const padded = String(value).padStart(2, "0");
  return (
    <div style={{
      border: "1.5px solid var(--ss-mulberry)",
      background: "var(--ss-bone-warm)",
      padding: "8px 6px 6px",
      textAlign: "center",
      boxShadow: "2px 2px 0 var(--ss-mulberry)",
      minWidth: 0,
    }}>
      <div style={{
        fontFamily: "Filepile, VT323, monospace",
        fontSize: 36,
        lineHeight: 1,
        color: "var(--ss-mulberry)",
        letterSpacing: 0,
        fontVariantNumeric: "tabular-nums",
      }}>{padded}</div>
      <div className="pixel-text" style={{
        fontFamily: "basis33, monospace",
        fontSize: 11,
        marginTop: 4,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: "var(--ss-mulberry)",
        opacity: 0.75,
      }}>{label}</div>
    </div>
  );
}

function Featured() {
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);
  const { days, hours, minutes, seconds, done } = useCountdown(RTD_SHIP_ISO);

  const shadow = press ? "0 0 0 var(--ss-mulberry)"
                : (hover ? "8px 8px 0 var(--ss-mulberry)" : "4px 4px 0 var(--ss-mulberry)");
  const transform = press ? "translate(1px,1px)"
                   : (hover ? "translate(-3px,-3px)" : "none");

  return (
    <section id="featured" style={{ marginBottom: 56 }}>
      <div className="section-head">
        <span className="num">01</span>
        <span className="label">currently shipping</span>
        <span className="rule" style={{
          height: 0, borderBottom: "1px dashed color-mix(in oklab, var(--ss-mulberry) 35%, transparent)"
        }}/>
        <span className="label" style={{ color: "var(--ss-mulberry)" }}>one game</span>
      </div>

      <a href="https://store.steampowered.com/app/4340400/Remember_to_Die/"
         target="_blank" rel="noopener noreferrer"
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => { setHover(false); setPress(false); }}
         onMouseDown={() => setPress(true)}
         onMouseUp={() => setPress(false)}
         className="feat-grid"
         style={{
           display: "grid",
           gridTemplateColumns: "1.05fr 1fr",
           border: "1.5px solid var(--ss-mulberry)",
           background: "var(--ss-bone)",
           boxShadow: shadow,
           transform,
           transition: "transform 80ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 80ms cubic-bezier(0.2,0.8,0.2,1)",
           textDecoration: "none",
           color: "inherit",
         }}>
        {/* Thumbnail with overlay frame.
            Letterbox on plum (matches brand v2 deep colour) and use objectFit:
            contain so the full RTD capsule reads, not a crop. */}
        <div className="feat-thumb" style={{
          position: "relative",
          minHeight: 320,
          background: "var(--ss-mulberry)",
          borderRight: "1.5px solid var(--ss-mulberry)",
          overflow: "hidden",
        }}>
          <img src="assets/photos/RTD.png" alt="Remember to Die"
               className="pixelated"
               style={{
                 position: "absolute", inset: 0,
                 width: "100%", height: "100%",
                 objectFit: "contain",
                 imageRendering: "pixelated",
                 padding: 18,
                 filter: hover ? "none" : "saturate(0.95)",
                 transition: "filter 220ms ease",
               }}/>
          {/* Corner brackets */}
          <Brackets/>
          {/* Bottom info — single status chip. Fabricated review quote and
              itch link from the design tool removed; not in brief and unverified. */}
          <div style={{
            position: "absolute",
            left: 16, bottom: 16, right: 16,
            display: "flex", justifyContent: "flex-end", alignItems: "flex-end",
            gap: 12,
            fontFamily: "basis33, monospace",
            fontSize: 13,
            color: "var(--ss-bone)",
            letterSpacing: "0.1em",
            textTransform: "uppercase",
          }} className="pixel-text">
            <span style={{ background: "rgba(53,43,66,0.7)", padding: "4px 8px 2px" }}>
              steam ↗
            </span>
          </div>
        </div>

        {/* Right side: text + meta */}
        <div className="feat-right" style={{
          padding: "26px 28px 22px",
          display: "flex", flexDirection: "column", gap: 14,
          minWidth: 0,
        }}>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <span className="stamp stamp-plum pixel-text" style={{
              padding: "5px 10px 3px",
              fontFamily: "basis33, monospace",
              fontSize: 13,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
            }}>now shipping</span>
            <span className="stamp pixel-text" style={{
              padding: "5px 10px 3px",
              fontFamily: "basis33, monospace",
              fontSize: 13,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: "var(--ss-mulberry)",
            }}>sept 2026</span>
            {/* Genre tag pulled from rtd.skipstone.co.nz layout metadata
                ("Tactical Dice Combat Roguelike"). */}
            <span className="stamp stamp-pink pixel-text" style={{
              padding: "5px 10px 3px",
              fontFamily: "basis33, monospace",
              fontSize: 13,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              border: "1.5px solid var(--ss-mulberry)",
            }}>tactical roguelike · dice combat</span>
          </div>

          <div className="display" style={{
            fontSize: "clamp(36px, 8vw, 56px)",
            wordBreak: "break-word",
          }}>Remember to Die</div>

          {/* Synopsis verbatim from rtd.skipstone.co.nz metadata
              ("A gritty tactical dice combat roguelike where every roll dredges
              up fragmented memories."). Lowercased to match brand voice. */}
          <p className="pixel-text" style={{
            fontFamily: "basis33, monospace",
            fontSize: 18,
            lineHeight: 1.5,
            color: "var(--ss-navy)",
            margin: 0,
            maxWidth: "36ch",
          }}>
            a gritty tactical dice combat roguelike where every roll dredges up
            fragmented memories.
          </p>

          {/* Countdown to launch (replaces the previous dev-progress bar). */}
          <div style={{ marginTop: 4 }}>
            <div className="eyebrow pixel-text" style={{ marginBottom: 8, fontSize: 12 }}>
              {done ? "shipped" : "ships in"}
            </div>
            <div className="feat-countdown" style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 6,
            }}>
              <CountdownTile value={days}    label="days"/>
              <CountdownTile value={hours}   label="hrs"/>
              <CountdownTile value={minutes} label="min"/>
              <CountdownTile value={seconds} label="sec"/>
            </div>
            <div className="pixel-text" style={{
              fontFamily: "basis33, monospace",
              fontSize: 12,
              color: "var(--ss-mulberry)",
              letterSpacing: "0.06em",
              marginTop: 8,
            }}>
              26 september 2026 · nz time
            </div>
          </div>

          <div style={{
            display: "flex", gap: 12, alignItems: "center",
            marginTop: "auto", paddingTop: 12, flexWrap: "wrap",
          }}>
            <span className="btn">wishlist on steam&nbsp;↗</span>
          </div>
        </div>
      </a>
    </section>
  );
}

function Brackets() {
  const s = {
    position: "absolute",
    width: 16, height: 16,
    borderColor: "var(--ss-bone)",
    borderStyle: "solid",
    borderWidth: 0,
    zIndex: 2,
  };
  return (
    <>
      <span style={{ ...s, top: 8,  left: 8,  borderTopWidth: 2,    borderLeftWidth: 2 }}/>
      <span style={{ ...s, top: 8,  right: 8, borderTopWidth: 2,    borderRightWidth: 2 }}/>
      <span style={{ ...s, bottom: 8, left: 8, borderBottomWidth: 2, borderLeftWidth: 2 }}/>
      <span style={{ ...s, bottom: 8, right: 8, borderBottomWidth: 2, borderRightWidth: 2 }}/>
    </>
  );
}

window.Featured = Featured;