/* global React */
// Shared visual primitives for Scoundrel site
// Load via: <script type="text/babel" src="lib/cards.jsx"></script>

const SUIT = {
  hearts:   { glyph: "♥", color: "red",   role: "potion" },
  diamonds: { glyph: "♦", color: "red",   role: "weapon" },
  clubs:    { glyph: "♣", color: "black", role: "monster" },
  spades:   { glyph: "♠", color: "black", role: "monster" },
};

const RANK_LABEL = {
  1: "A", 11: "J", 12: "Q", 13: "K", 14: "A",
};
function rankLabel(v) { return RANK_LABEL[v] ?? String(v); }

// Painted PNG card art: center illustration of each card.
// Hearts/diamonds: 8 unique pieces, mapped to ranks 2..10 (rank 11+ falls back to default).
// Monsters (clubs/spades): 13 unique pieces, ranks 2..14 (Ace = 14).
const HEART_ART = {
  2: "assets/cards/heart-2.png",
  3: "assets/cards/heart-3.png",
  4: "assets/cards/heart-4.png",
  5: "assets/cards/heart-5.png",
  6: "assets/cards/heart-6.png",
  7: "assets/cards/heart-7.png",
  8: "assets/cards/heart-8.png",
  9: "assets/cards/heart-default.png",
  10: "assets/cards/heart-default.png",
};
const DIAMOND_ART = {
  2: "assets/cards/diamond-1.png",
  3: "assets/cards/diamond-2.png",
  4: "assets/cards/diamond-3.png",
  5: "assets/cards/diamond-4.png",
  6: "assets/cards/diamond-5.png",
  7: "assets/cards/diamond-6.png",
  8: "assets/cards/diamond-7.png",
  9: "assets/cards/diamond-8.png",
  10: "assets/cards/diamond-default.png",
};
function MONSTER_ART(v) {
  const clamped = Math.max(2, Math.min(14, v));
  return `assets/cards/monster-${clamped}.png`;
}

function artUrlFor(suit, value) {
  if (suit === "hearts")   return HEART_ART[value]   || "assets/cards/heart-default.png";
  if (suit === "diamonds") return DIAMOND_ART[value] || "assets/cards/diamond-default.png";
  return MONSTER_ART(value);
}

function CardArt({ suit, value }) {
  return (
    <img
      className="card-art"
      src={artUrlFor(suit, value)}
      alt=""
      aria-hidden="true"
      draggable="false"
      loading="lazy"
    />
  );
}

// Standalone exports for places that want the raw art (animations, hero)
function PotionArt({ size = 96, value = 9 }) {
  return <img src={HEART_ART[value] || "assets/cards/heart-default.png"} alt="" width={size} draggable="false" />;
}
function SwordArt({ size = 96, value = 10 }) {
  return <img src={DIAMOND_ART[value] || "assets/cards/diamond-default.png"} alt="" width={size} draggable="false" />;
}
function MonsterArt({ size = 96, value = 5 }) {
  return <img src={MONSTER_ART(value)} alt="" width={size} draggable="false" />;
}

function PlayingCard({ suit = "spades", value = 5, size = "md", flipped = false, dim = false, style, className = "", children }) {
  const meta = SUIT[suit];
  if (flipped) {
    return <div className={`card back ${size} ${className}`} style={style}>{children}</div>;
  }
  const label = rankLabel(value);
  return (
    <div className={`card ${meta.color} ${size} ${dim ? "dim" : ""} ${className}`} style={style}>
      <div className="corner tl">
        <span>{label}</span>
        <span className="pip">{meta.glyph}</span>
      </div>
      <div className="corner br">
        <span>{label}</span>
        <span className="pip">{meta.glyph}</span>
      </div>
      <div className="body">
        <CardArt suit={suit} value={value} />
      </div>
      {children}
    </div>
  );
}

// Scoundrel logo lockup
function ScoundrelLogo({ size = 1, mono = false, className = "" }) {
  const color = mono ? "currentColor" : undefined;
  return (
    <span className={`title-stack ${className}`} style={{ fontSize: `${size}em`, color }}>
      <span className="gold-title" style={{ fontSize: "1em", lineHeight: 0.9 }}>Scoundrel</span>
      <span className="between">The</span>
      <span className="gold-title" style={{ fontSize: "0.86em", lineHeight: 0.9 }}>Descent</span>
    </span>
  );
}

// Site nav
function SiteNav({ active = "home" }) {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className={`site-nav ${open ? "open" : ""}`} aria-label="Primary">
      <div className="inner">
        <a href="index.html" className="logo" aria-label="Scoundrel home">
          <img src="assets/app-icon.png" alt="" className="logo-icon" width="32" height="32" />
          <span>Scoundrel</span>
        </a>
        <button
          type="button"
          className="nav-toggle"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {open
              ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>
              : <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>
            }
          </svg>
        </button>
        <div className="links" onClick={() => setOpen(false)}>
          <a href="index.html" className={active === "home" ? "active" : ""}>Home</a>
          <a href="how-to-play.html" className={active === "how" ? "active" : ""}>How to Play</a>
          <a href="strategy.html" className={active === "strategy" ? "active" : ""}>Strategy</a>
          <a href="index.html#screenshots">Screenshots</a>
          <a href="index.html#download">Download</a>
        </div>
        <a href="index.html#download" className="nav-cta">Get the Game →</a>
      </div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="grid">
        <div>
          <div className="footer-brand">Scoundrel</div>
          <p className="footer-blurb">
            A digital adaptation of Scoundrel, the 2011 solo card game by Zach Gage and Kurt Bieg. Not affiliated with or endorsed by the original creators. Play with a standard deck, or take the dungeon with you on iOS, Android, Mac, and soon Steam.
          </p>
        </div>
        <div>
          <h4>Play</h4>
          <ul>
            <li><a href="index.html#download">iOS &amp; Mac</a></li>
            <li><a href="index.html#download">Android</a></li>
            <li><a href="index.html#download">Steam (soon)</a></li>
          </ul>
        </div>
        <div>
          <h4>Learn</h4>
          <ul>
            <li><a href="how-to-play.html">How to Play</a></li>
            <li><a href="strategy.html">Strategy</a></li>
            <li><a href="index.html#screenshots">Screenshots</a></li>
          </ul>
        </div>
        <div>
          <h4>Site</h4>
          <ul>
            <li><a href="privacy.html">Privacy</a></li>
            <li><a href="terms.html">Terms</a></li>
            <li><a href="mailto:info@scoundrelcardgame.com">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© {new Date().getFullYear()} Scoundrel: The Descent. Original game © Zach Gage &amp; Kurt Bieg, 2011.</span>
        <span>Made for adventurers.</span>
      </div>
    </footer>
  );
}

// Store badges (simple, compact)
function StoreButton({ store }) {
  if (store === "ios") {
    return (
      <a className="btn-store" href="https://apps.apple.com/us/app/scoundrel-the-descent/id6754042115" target="_blank" rel="noopener">
        <svg width="22" height="26" viewBox="0 0 384 512" fill="currentColor"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
        <span>
          <span className="row1">Download on the</span>
          <span className="row2">App Store</span>
        </span>
      </a>
    );
  }
  if (store === "android") {
    return (
      <a className="btn-store" href="https://play.google.com/store/apps/details?id=com.scoundrelcardgame.app" target="_blank" rel="noopener">
        <svg width="22" height="26" viewBox="0 0 512 512" fill="currentColor"><path d="M325.3 234.3 104.5 13.5l280.4 161.9zM69.1 0c-13 6.8-21.7 19.2-21.7 35.4v441.2c0 16.2 8.7 28.6 21.7 35.4l256.7-256.7zm388.8 235.7L389.4 196 320.8 256l68.6 60 69-39.7c20.8-16.2 20.8-44.4-.5-60.6zM104.5 498.5l280.4-161.9-59.6-59.6z"/></svg>
        <span>
          <span className="row1">Get it on</span>
          <span className="row2">Google Play</span>
        </span>
      </a>
    );
  }
  // Steam coming soon
  return (
    <a className="btn-store" href="#" style={{ opacity: 0.85 }}>
      <svg width="22" height="22" viewBox="0 0 496 512" fill="currentColor"><path d="M496 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5v1.2L176.6 279c-15.5-.9-30.7 3.4-43.5 12.1L0 236.1C10.2 108.4 117.1 8 247.6 8 384.8 8 496 119 496 256zM155.7 384.3l-30.5-12.6a52.79 52.79 0 0 0 27.2 25.8c26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3.1-40.3-5.4-13-15.5-23.2-28.5-28.6-12.9-5.4-26.7-5.2-39 0l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.7 20.4zm173.8-129.9c-34.4 0-62.4-28-62.4-62.3s28-62.3 62.4-62.3 62.4 28 62.4 62.3-27.9 62.3-62.4 62.3zm.1-15.6c25.9 0 46.9-21 46.9-46.8 0-25.9-21-46.8-46.9-46.8s-46.9 21-46.9 46.8c.1 25.8 21.1 46.8 46.9 46.8z"/></svg>
      <span>
        <span className="row1">Coming soon to</span>
        <span className="row2">Steam</span>
      </span>
    </a>
  );
}

Object.assign(window, {
  PlayingCard, ScoundrelLogo, SiteNav, SiteFooter, StoreButton,
  PotionArt, SwordArt, MonsterArt, CardArt,
  rankLabel, SUIT,
});