/* global React, ReactDOM, TweaksPanel, TweakSection, TweakColor, TweakToggle, useTweaks, TweakText */

const { useEffect, useState, useRef } = React;

/* ─────────────────────────────────────────────
   SVG marks
   ───────────────────────────────────────────── */

const StorkMark = ({ size = 28 }) =>
<img
  src="assets/storknest-logo.svg"
  alt="StorkNest Games logo"
  width={size}
  height={size}
  style={{ display: 'block', width: size, height: size }} />;



const EyeMinimal = ({ stroke = "currentColor" }) =>
<svg viewBox="0 0 800 320" fill="none" aria-hidden="true">
    <ellipse cx="400" cy="160" rx="360" ry="140" stroke={stroke} strokeWidth="2" />
    <circle cx="400" cy="160" r="78" stroke={stroke} strokeWidth="2" />
    <circle cx="400" cy="160" r="36" fill={stroke} />
  </svg>;


const SteamIcon = () =>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
    <circle cx="15.5" cy="9.5" r="2.4" stroke="currentColor" strokeWidth="1.5" />
    <circle cx="8.5" cy="14.5" r="1.6" stroke="currentColor" strokeWidth="1.5" />
    <line x1="13.2" y1="11.2" x2="9.7" y2="13.6" stroke="currentColor" strokeWidth="1.5" />
  </svg>;


/* simple line drawing of the interrogation room: lamp + table + two chair backs */
const RoomSvg = () =>
<svg viewBox="0 0 400 500" fill="none" aria-hidden="true">
    {/* ceiling */}
    <line x1="40" y1="40" x2="360" y2="40" stroke="#8a857c" strokeWidth="1" />
    {/* lamp cord */}
    <line x1="200" y1="40" x2="200" y2="150" stroke="#8a857c" strokeWidth="1" />
    {/* lamp shade */}
    <path d="M160 150 L240 150 L220 190 L180 190 Z" stroke="#8B0000" strokeWidth="1.5" fill="rgba(139,0,0,.15)" />
    {/* light cone */}
    <path d="M180 190 L120 360 L280 360 L220 190 Z" fill="rgba(235,231,223,.05)" stroke="rgba(235,231,223,.18)" strokeWidth="1" />
    {/* table */}
    <line x1="80" y1="360" x2="320" y2="360" stroke="#ebe7df" strokeWidth="2" />
    <line x1="100" y1="360" x2="100" y2="460" stroke="#8a857c" strokeWidth="1.5" />
    <line x1="300" y1="360" x2="300" y2="460" stroke="#8a857c" strokeWidth="1.5" />
    {/* cards on table */}
    <rect x="160" y="338" width="24" height="34" stroke="#8a857c" strokeWidth="1" fill="#0a0a0a" />
    <rect x="190" y="335" width="24" height="34" stroke="#8a857c" strokeWidth="1" fill="#0a0a0a" transform="rotate(8 202 352)" />
    <rect x="220" y="340" width="24" height="34" stroke="#8B0000" strokeWidth="1.2" fill="rgba(139,0,0,.5)" />
    {/* far chair back */}
    <line x1="180" y1="270" x2="180" y2="320" stroke="#8a857c" strokeWidth="1.5" />
    <line x1="220" y1="270" x2="220" y2="320" stroke="#8a857c" strokeWidth="1.5" />
    <line x1="180" y1="270" x2="220" y2="270" stroke="#8a857c" strokeWidth="1.5" />
    {/* near chair back (silhouette of "you") */}
    <path d="M140 460 L140 420 Q140 405 160 405 L240 405 Q260 405 260 420 L260 460 Z"
  stroke="#ebe7df" strokeWidth="1.5" fill="rgba(10,10,10,.8)" />
  </svg>;


/* ─────────────────────────────────────────────
   TOP BAR
   ───────────────────────────────────────────── */

function TopBar({ wishlistHref, pressKitHref }) {
  return (
    <header className="topbar" role="banner">
      <div className="topbar-inner">
        <a className="brand" href="#top" aria-label="StorkNest Games home" style={{ width: "30.797px" }}>
          <span className="brand-mark"><StorkMark size={32} /></span>
          <span className="brand-text">
            <span className="brand-name">StorkNest Games</span>
            <span className="brand-now"><em>Under the Eye</em></span>
          </span>
        </a>

        <div className="topbar-actions">
          <a className="cta ghost" href={pressKitHref} target="_blank" rel="noopener noreferrer">
            Press Kit
          </a>
          <a className="cta" href={wishlistHref} target="_blank" rel="noopener noreferrer">
            <span className="lbl-full">Wishlist on Steam</span>
            <span className="lbl-short">Wishlist</span>
            <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </header>);

}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */

function Hero({ wishlistHref, showTrailer }) {
  return (
    <section className="hero" id="top">
      <div className="hero-meta">
        <span className="eyebrow">StorkNest Games · Card Game · Coming Soon</span>
      </div>

      <h1 className="hero-title hero-title--logo">
        <img
          className="hero-logo"
          src="assets/under-the-eye-logo.png"
          alt="Under the Eye — gritty 1980s brutalist indie strategy card game logo"
          width="1283"
          height="1500" />
        
        <span className="sr-only">Under the Eye — a gritty 1980s brutalist strategy card game based on Romanian Whist, by StorkNest Games.</span>
      </h1>

      <p className="hero-sub">
        <b>Under the Eye</b> is a <b>gritty 1980s indie card game</b> built on the
        bones of <b>Wizard</b>. The world and regime you once knew is
        crumbling day by day. <b>The Major won&apos;t let you go</b> until you&apos;ve
        beat her at her own twisted card game. Bid, cheat and bend the rules to
        see another day — or die and be forgotten.
      </p>

      <div className="hero-actions">
        <a className="cta big" href={wishlistHref} target="_blank" rel="noopener noreferrer">
          <span>Wishlist on Steam</span>
          <span aria-hidden="true">→</span>
        </a>
        {showTrailer && <a className="cta ghost big" href="#trailer">Watch trailer ↓</a>}
      </div>

      <div className="hero-meta-row" aria-label="At a glance">
        <div className="meta-cell">
          <div className="k" style={{ textAlign: "center" }}>Players</div>
          <div className="v" style={{ textAlign: "center" }}>Single-player</div>
        </div>
        <div className="meta-cell">
          <div className="k" style={{ textAlign: "center" }}>Price</div>
          <div className="v" style={{ textAlign: "center" }}><span className="accent" style={{ textAlign: "center" }}>TBA</span></div>
        </div>
        <div className="meta-cell">
          <div className="k" style={{ textAlign: "center" }}>Platform</div>
          <div className="v" style={{ textAlign: "center" }}>PC · STEAM/ITCH.IO
</div>
        </div>
        <div className="meta-cell">
          <div className="k" style={{ textAlign: "center" }}>Release</div>
          <div className="v" style={{ textAlign: "center" }}><span className="accent" style={{ textAlign: "center" }}>COMING SOON</span></div>
        </div>
      </div>
    </section>);
}

/* ─────────────────────────────────────────────
   TRAILER
   ───────────────────────────────────────────── */

function Trailer({ crt, youTubeId }) {
  const vid = ytId(youTubeId);
  return vid ?
  <TrailerEmbed crt={crt} videoId={vid} /> :
  <TrailerReveal crt={crt} />;
}

/* Real YouTube embed — shown the moment a video ID/URL is provided */
function TrailerEmbed({ crt, videoId }) {
  return (
    <section className="trailer-section" id="trailer">
      <div className="trailer" data-crt={crt ? 'on' : 'off'}>
        <iframe
          className="trailer-embed"
          src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`}
          title="Under the Eye — official trailer"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen></iframe>
      </div>
      <div className="trailer-cap">
        <span><b>Official trailer</b></span>
        <span>▶ YouTube</span>
      </div>
    </section>);

}

/* Placeholder reveal animation — shown when the trailer is enabled but no video added yet */
function TrailerReveal({ crt }) {
  const [playing, setPlaying] = useState(false);
  const [elapsed, setElapsed] = useState(0);
  const tickRef = useRef(null);

  useEffect(() => {
    if (!playing) {setElapsed(0);return;}
    tickRef.current = setInterval(() => setElapsed((e) => (e + 1) % 102), 1000);
    return () => clearInterval(tickRef.current);
  }, [playing]);

  const mmss = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;

  return (
    <section className="trailer-section" id="trailer">
      <div
        className={`trailer ${playing ? 'playing' : ''}`}
        data-crt={crt ? 'on' : 'off'}
        role="button"
        tabIndex={0}
        aria-label={playing ? "Pause trailer" : "Play trailer"}
        onClick={() => setPlaying((p) => !p)}
        onKeyDown={(e) => {if (e.key === ' ' || e.key === 'Enter') {e.preventDefault();setPlaying((p) => !p);}}}>
        
        {!playing &&
        <div className="trailer-poster" aria-hidden="true">
            <div className="eye-bg"><EyeMinimal stroke="var(--red)" /></div>
            <div className="trailer-vignette"></div>
          </div>
        }

        {playing &&
        <div className="trailer-stage" aria-hidden="true">
            <div className="trailer-frame f0">
              <div className="tf-bg black"></div>
              <div className="tf-content">
                <span className="big thin">Sit down<span className="accent">.</span></span>
                <span className="small">The Major is dealing</span>
              </div>
            </div>

            <div className="trailer-frame f1">
              <div className="tf-bg black"></div>
              <div className="tf-content">
                <span className="big">Sixteen cards<span className="accent">.</span></span>
                <span className="small">Four suits · one becomes law</span>
              </div>
            </div>

            <div className="trailer-frame f2">
              <div className="tf-bg red"></div>
              <div className="tf-content on-red">
                <span className="big">Bid. Cheat.<br />Bend.</span>
                <span className="small">Don&apos;t waste your cigarettes</span>
              </div>
            </div>

            <div className="trailer-frame f3">
              <div className="tf-bg black"></div>
              <div className="tf-content">
                <span className="big thin">Riots outside<span className="accent">.</span></span>
                <span className="small">Nowhere is safe anymore</span>
              </div>
            </div>

            <div className="trailer-frame f4">
              <div className="tf-bg black"></div>
              <div className="tf-content">
                <span className="big">Under the <span className="accent">Eye</span></span>
                <span className="small">Wishlist on Steam · 2026</span>
              </div>
            </div>
          </div>
        }

        <button className="play" aria-hidden={playing}>
          <span className="sr-only">Play trailer</span>
        </button>

        <div className="trailer-hud" aria-hidden="true">
          <span className="lbl">CH 04 · M-87</span>
          <span>{mmss(elapsed)} / 01:42</span>
        </div>
      </div>

      <div className="trailer-cap">
        <span><b>Reveal trailer</b> · 01:42</span>
        <span>{playing ? '◼ Tap to pause' : '▶ Tap to play'}</span>
      </div>
    </section>);

}

/* ─────────────────────────────────────────────
   SCREENSHOTS
   ───────────────────────────────────────────── */

/* Drop screenshots in here as the team captures them. Leave src: null for an
   empty placeholder slot. Shape: { src, label, note }. */
const SCREENS = [
{ src: null, label: 'Screenshot 01', note: '' },
{ src: null, label: 'Screenshot 02', note: '' },
{ src: null, label: 'Screenshot 03', note: '' },
{ src: null, label: 'Screenshot 04', note: '' },
{ src: null, label: 'Screenshot 05', note: '' }];


function Screenshots() {
  const shots = SCREENS;
  const n = shots.length;
  const [i, setI] = useState(0);
  const idx = n ? ((i % n) + n) % n : 0;
  const go = (d) => setI((p) => (p + d + n) % n);
  const cur = shots[idx] || {};

  return (
    <section className="sect shots-section" id="screenshots">
      <div className="container">
        <div className="sect-head">
          <span className="num">Screenshots · In-game</span>
          <h2 className="sect-title">From the <span className="accent">table</span></h2>
        </div>

        <div className="shots">
          <div className="shots-viewport">
            <div className="shots-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
              {shots.map((s, k) =>
              <figure className="shot" key={k}>
                  {s.src ?
                <img className="shot-img" src={s.src} alt={s.note || s.label} /> :

                <div className="shot-ph" aria-hidden="true">
                      <span className="shot-ph-lbl">{s.label}</span>
                      <span className="shot-ph-hint">Drop 1920 × 1080 image</span>
                    </div>}
                </figure>
              )}
            </div>
          </div>

          {n > 1 &&
          <>
            <button className="shots-nav prev" onClick={() => go(-1)} aria-label="Previous screenshot">‹</button>
            <button className="shots-nav next" onClick={() => go(1)} aria-label="Next screenshot">›</button>
          </>
          }

          <div className="shots-hud" aria-hidden="true">
            <span className="num">{String(idx + 1).padStart(2, '0')} / {String(n).padStart(2, '0')}</span>
          </div>
        </div>

        <div className="shots-foot">
          <div className="shots-dots" role="tablist" aria-label="Choose screenshot">
            {shots.map((_, k) =>
            <button
              key={k}
              role="tab"
              className={`shots-dot ${k === idx ? 'on' : ''}`}
              aria-selected={k === idx}
              aria-label={`Screenshot ${k + 1}`}
              onClick={() => setI(k)} />
            )}
          </div>
          {cur.note && <span className="shots-cap">{cur.note}</span>}
        </div>
      </div>
    </section>);

}

/* ─────────────────────────────────────────────
   MECHANICS
   ───────────────────────────────────────────── */

const SUITS = [
{ name: 'Tongue', glyph: '◆', law: false },
{ name: 'Crown', glyph: '✦', law: true },
{ name: 'Eye', glyph: '●', law: false },
{ name: 'Knife', glyph: '▲', law: false }];


function DeckRow() {
  return (
    <div className="deck-row" aria-label="Sample cards from the deck">
      {SUITS.map((s, i) =>
      <article key={s.name} className={`pcard ${s.law ? 'law' : ''}`}>
          <div>
            <div className="pcard-rank">J</div>
            <div className="pcard-suit">{s.name}{s.law ? ' · Law' : ''}</div>
          </div>
          <div className="pcard-bot">
            <div className="pcard-rank">J</div>
            <div className="pcard-suit">{s.name}{s.law ? ' · Law' : ''}</div>
          </div>
        </article>
      )}
    </div>);

}

const VEND_ITEMS = [
{ lbl: 'Mirror', price: '4' },
{ lbl: 'False Card', price: '6' },
{ lbl: 'Bribe', price: '3' },
{ lbl: 'Recall', price: '7' },
{ lbl: 'Reshuffle', price: '5' },
{ lbl: 'Witness', price: '9' },
{ lbl: 'Stay', price: '2' },
{ lbl: 'Sold', price: '', empty: true },
{ lbl: 'Mercy', price: '12' }];


function Vending() {
  return (
    <div className="vend" aria-label="The vending machine — nine cards behind dirty glass">
      {VEND_ITEMS.map((v, i) =>
      <div key={i} className={`vend-slot ${v.empty ? 'empty' : ''}`}>
          {v.price && <div className="price">{v.price}</div>}
          <div className="lbl">{v.lbl}</div>
        </div>
      )}
    </div>);

}

function Mechanics() {
  return (
    <section className="sect" id="mechanics">
      <div className="container">
        <div className="sect-head">
          <span className="num">About Under the Eye</span>
          <h2 className="sect-title">Five rules<br />at <span className="accent">her</span> table.</h2>
          <p className="sect-lede">
            A <b>strategic indie card game</b> based on <b>Romanian Whist</b> (Wizard Card Game), rebuilt for
            a brutalist 1980s interrogation room. Custom deck. Custom rules. The Major
            likes watching new players figure it out — and she enjoys watching them lose.
          </p>
        </div>

        <div className="mech-list">
          <article className="mech">
            <div className="ord">01</div>
            <h3>The Deck — 16 face cards, 4 suits</h3>
            <div className="mech-body">
              <p><b>Sixteen face cards. Four different suits.</b> This deck was custom made, so learn it well. The Major likes watching new players figure it out.</p>
            </div>
          </article>

          <article className="mech">
            <div className="ord">02</div>
            <h3>The Law — a rotating trump suit</h3>
            <div className="mech-body">
              <p>Every round, <b>one suit becomes the law.</b> It overrules everything else on the table. Play accordingly if you want to keep your head.</p>
              <p>The law turns each round. The smart player learns when to fold the right cards — and when to claim the wrong one.</p>
            </div>
          </article>

          <article className="mech">
            <div className="ord">03</div>
            <h3>Cigarettes — the only currency</h3>
            <div className="mech-body">
              <p><b>Cigarettes are the only currency in the room.</b> Earn them by winning bids and betting your hand. Use them to buy special cards and twist the game in your favor.</p>
              <p>Don&apos;t waste them on smoking.</p>
            </div>
          </article>

          <article className="mech">
            <div className="ord">04</div>
            <h3>The Machine — nine cards behind dirty glass</h3>
            <div className="mech-body">
              <p><b>Nine cards behind dirty glass.</b> Pay in cigarettes to bend the rules. Some keep you alive another round. Some don&apos;t.</p>
              <p>Choose wrong and you won&apos;t get a second chance. <b>This machine doesn&apos;t return change.</b></p>
            </div>
          </article>

          <article className="mech">
            <div className="ord">05</div>
            <h3>The Room — explore for clues</h3>
            <div className="mech-body">
              <p>The room holds more than you&apos;d believe. <b>Peek around</b> and you might find useful things — or more about the world around you.</p>
              <p>Keep your eyes open. She is.</p>
            </div>
          </article>
        </div>
      </div>
    </section>);

}

/* ─────────────────────────────────────────────
   SPECS + MATURE
   ───────────────────────────────────────────── */

function Specs() {
  const MIN = [
  ['OS', 'Windows 10 64-bit'],
  ['Processor', 'Intel Core i3-2100 / AMD equiv.'],
  ['Memory', '4 GB RAM'],
  ['Graphics', 'Intel HD 4000 / GeForce GT 730'],
  ['DirectX', 'Version 11'],
  ['Storage', '2 GB available']];

  const REC = [
  ['OS', 'Windows 10/11 64-bit'],
  ['Processor', 'Core i5-4460 / Ryzen 3 1200'],
  ['Memory', '8 GB RAM'],
  ['Graphics', 'GTX 750 Ti / Radeon R7 260X'],
  ['DirectX', 'Version 11'],
  ['Storage', '2 GB available']];


  return (
    <section className="sect" id="specs">
      <div className="container">
        <div className="sect-head">
          <span className="num">System requirements</span>
          <h2 className="sect-title">Specs.</h2>
          <p className="sect-lede">
            <b>Under the Eye</b> is a small indie card game designed to run on the
            machine you already have. The room is small.
          </p>
        </div>

        <div className="specs">
          <div className="spec-col">
            <h4>Minimum</h4>
            {MIN.map(([k, v]) =>
            <div className="spec-row" key={k}>
                <div className="k">{k}</div>
                <div className="v">{v}</div>
              </div>
            )}
          </div>
          <div className="spec-col">
            <h4>Recommended <span className="accent">·</span></h4>
            {REC.map(([k, v]) =>
            <div className="spec-row" key={k}>
                <div className="k">{k}</div>
                <div className="v">{v}</div>
              </div>
            )}
          </div>
        </div>

        <div className="mature">
          <div className="badge" aria-hidden="true">17+</div>
          <div>
            <h5>Mature content</h5>
            <p>
              The game depicts themes of <b>violence, death and torture.</b>
              Cigarette use and gambling mechanics are central to gameplay.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ─────────────────────────────────────────────
   FINAL CTA + FOOTER
   ───────────────────────────────────────────── */

function FinalCTA({ wishlistHref }) {
  return (
    <section className="final">
      <h2 className="final-title">
        <img
          className="final-logo"
          src="assets/under-the-eye-logo.png"
          alt="Under the Eye logo — wishlist the 1980s brutalist indie card game on Steam"
          width="1283"
          height="1500" />
        
      </h2>
      <p className="final-sub">
        Add <b>Under the Eye</b> to your Steam wishlist. We&apos;ll send a single message
        when the game is released.
      </p>
      <div className="final-actions">
        <a className="cta big" href={wishlistHref} target="_blank" rel="noopener noreferrer">
          <span>Wishlist on Steam</span>
          <span aria-hidden="true">→</span>
        </a>    
      </div>
    </section>);

}

/* 🟢 UPDATED: Passed pressKitHref into the footer component */
function Footer({ pressKitHref }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <span className="brand-mark" style={{ width: 26, height: 26 }}>
            <StorkMark size={26} />
          </span>
          <div>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 500, fontSize: 13, letterSpacing: '.18em', textTransform: 'uppercase' }}>
              StorkNest Games
            </div>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--paper-dim)', marginTop: 3 }}>
              Independent studio
            </div>
          </div>
        </div>

        <nav className="footer-links" aria-label="Footer">
          {/* 🟢 UPDATED: Now these actually connect! Swap the Discord/Twitter urls with yours */}
          <a href={pressKitHref} target="_blank" rel="noopener noreferrer">Press Kit</a>
          <a href="https://discord.gg/mMjwGJswte" target="_blank" rel="noopener noreferrer">Discord</a>
          <a href="https://x.com/StorkNestGames" target="_blank" rel="noopener noreferrer">Twitter</a>
          <a href="mailto:contact@storknestgames.com">Contact</a>
        </nav>

        <div className="footer-copy">StorkNest Games</div>
      </div>
    </footer>);

}

/* ─────────────────────────────────────────────
   APP + TWEAKS
   ───────────────────────────────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#8B0000",
  "crtTrailer": false,
  "showTrailer": false,
  "trailerYouTubeId": "",
  "showScreens": false,
  "wishlistHref": "https://store.steampowered.com/app/4339260/Under_the_Eye/",
  "pressKitHref": "https://drive.google.com/drive/u/1/folders/1R03W_dRENlxWIp0xthWB_EMwQqJXzO4g"
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--red', t.accent);
    root.style.setProperty('--red-hot', shade(t.accent, 14));
    root.style.setProperty('--red-deep', shade(t.accent, -24));
  }, [t.accent]);

  // Hidden by default. Re-appears automatically once a YouTube video is added,
  // or when the team flips the "Show trailer" toggle on.
  const trailerVisible = t.showTrailer || Boolean(ytId(t.trailerYouTubeId));

  return (
    <>
      <TopBar wishlistHref={t.wishlistHref} pressKitHref={t.pressKitHref} />
      <main>
        <Hero wishlistHref={t.wishlistHref} showTrailer={trailerVisible} />
        {trailerVisible && <Trailer crt={t.crtTrailer} youTubeId={t.trailerYouTubeId} />}
        {t.showScreens && <Screenshots />}
        <Mechanics />
        <Specs />
        <FinalCTA wishlistHref={t.wishlistHref} />
      </main>

      {/* 🟢 UPDATED: Passed pressKitHref into the footer */}
      <Footer pressKitHref={t.pressKitHref} />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor
          label="Brand red"
          value={t.accent}
          options={['#8B0000', '#a01414', '#6a0000', '#b9382a']}
          onChange={(v) => setTweak('accent', v)} />
        

        <TweakSection label="Trailer" />
        <div style={{ padding: '4px 10px 10px', fontSize: 11, color: '#6b655c', lineHeight: 1.4 }}>
          Hidden until a video is added. Paste the YouTube ID or URL below and the trailer appears automatically.
        </div>
        <TweakToggle
          label="Show trailer section"
          value={t.showTrailer}
          onChange={(v) => setTweak('showTrailer', v)} />
        <TweakText
          label="YouTube ID or URL"
          value={t.trailerYouTubeId}
          placeholder="e.g. dQw4w9WgXcQ"
          onChange={(v) => setTweak('trailerYouTubeId', v)} />
        <TweakToggle
          label="CRT scanlines"
          value={t.crtTrailer}
          onChange={(v) => setTweak('crtTrailer', v)} />
        

        <TweakSection label="Screenshots" />
        <div style={{ padding: '4px 10px 10px', fontSize: 11, color: '#6b655c', lineHeight: 1.4 }}>
          Placeholder slots for now. Add the real captures to the <b>SCREENS</b> list in app.jsx, then toggle on.
        </div>
        <TweakToggle
          label="Show screenshots"
          value={t.showScreens}
          onChange={(v) => setTweak('showScreens', v)} />

        <TweakSection label="Links" />
        <div style={{ padding: '4px 10px 12px', fontSize: 11, color: '#6b655c', lineHeight: 1.4 }}>
          Wishlist buttons point to <b>wishlistHref</b>; the top-bar Press Kit button points to <b>pressKitHref</b>. Replace both with the real URLs when live.
        </div>

        {/* 🟢 UPDATED: Added real input fields here so you can change the URLs from the UI panel */}
        <TweakText
          label="Steam Wishlist URL"
          value={t.wishlistHref}
          placeholder="https://store.steampowered.com/..."
          onChange={(v) => setTweak('wishlistHref', v)} />
        <TweakText
          label="Press Kit URL"
          value={t.pressKitHref}
          placeholder="https://drive.google.com/..."
          onChange={(v) => setTweak('pressKitHref', v)} />

      </TweaksPanel>
    </>);

}

/* extract an 11-char YouTube id from a raw id or any common URL form */
function ytId(input) {
  if (!input) return '';
  const s = String(input).trim();
  if (!s) return '';
  if (/^[\w-]{11}$/.test(s)) return s;
  const m = s.match(/(?:youtu\.be\/|[?&]v=|\/embed\/|\/shorts\/)([\w-]{11})/);
  return m ? m[1] : '';
}

/* tiny hex shader */
function shade(hex, pct) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map((c) => c + c).join('') : h, 16);
  let r = n >> 16 & 255,g = n >> 8 & 255,b = n & 255;
  const f = pct / 100;
  r = Math.max(0, Math.min(255, Math.round(r + (f > 0 ? 255 - r : r) * f)));
  g = Math.max(0, Math.min(255, Math.round(g + (f > 0 ? 255 - g : g) * f)));
  b = Math.max(0, Math.min(255, Math.round(b + (f > 0 ? 255 - b : b) * f)));
  return '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);