// nyc-shared.jsx
// Reusable chrome + small components. All exported to window.

const e = React.createElement;

/* =====================================================
   MARQUEE
   ===================================================== */
function Marquee({ items, variant = "kelly" }) {
  const cls = "marquee " + (variant === "sun" ? "sun" : variant === "tomato" ? "tomato" : "");
  const dup = [...items, ...items];
  return (
    <div className={cls}>
      <div className="marquee-track">
        {dup.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

/* =====================================================
   HEADER + DEPOSIT BANNER + FOOTER
   ===================================================== */
function Header({ route, perksCount, onNav, depositTotal }) {
  return (
    <header className="chrome-header">
      <div className="chrome-header-inner">
        <a className="chrome-logo" onClick={() => onNav("welcome")} style={{ cursor: "pointer" }}>
          <span>NYC Perks<sup style={{ fontSize: 11, marginLeft: 2 }}>™</sup></span>
          <small>all-inclusive · est. 1898</small>
        </a>
        <div className="chrome-search">
          <span style={{ fontFamily: "var(--f-display)" }}>🔍</span>
          <input placeholder="Search 219 perks — &quot;ancestry&quot;, &quot;stream&quot;, &quot;wifi&quot;…" />
        </div>
        <nav className="chrome-nav">
          <a onClick={() => onNav("browse")} className={route === "browse" ? "primary" : ""}>Catalog</a>
          <a onClick={() => onNav("perks")} className={route === "perks" ? "primary" : ""}>
            My Perks <span className="count">{perksCount}</span>
          </a>
        </nav>
      </div>
      <div className="deposit-banner">
        <span>✱ YOUR DEPOSIT:</span>
        <span className="deposit-amt">{depositTotal}</span>
        <span className="ink-faint">— what you've put into the kitty this year</span>
        <span style={{ marginLeft: 16 }}>✱ CURRENT BUFFET VALUE:</span>
        <span className="deposit-amt">~$24,800/yr</span>
        <span className="ink-faint">across 219 perks</span>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="chrome-footer">
      <h3>★ THANK YOU FOR CHOOSING NEW YORK CITY ★</h3>
      <p>Pilot release · NYC library systems only (NYPL · BPL · QPL · 219 perks). Data current to April 2026. We grow this list constantly — if something's off, hit the ✋ on any perk page.</p>
    </footer>
  );
}

/* =====================================================
   PHOTO SLOT — vintage postcard treatment
   ===================================================== */
function PhotoSlot({ id, hint, placeholder, style }) {
  // image-slot is a web component; embed it inside a postcard frame
  return (
    <div className="postcard" style={style}>
      <image-slot id={id} placeholder={hint || placeholder || "Photo"} shape="rect" style={{ width: "100%", height: "100%" }} />
    </div>
  );
}

/* =====================================================
   SYSTEM CHIPS  (NYPL / BPL / QPL)
   ===================================================== */
function SystemChips({ systems, small }) {
  const map = { NYPL: "sys-nypl", BPL: "sys-bpl", QPL: "sys-qpl", DOE: "sys-doe", DPR: "sys-dpr", HRA: "sys-hra" };
  return (
    <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
      {systems.map(s => (
        <span key={s} className={`chip on ${map[s]}`} style={small ? { fontSize: 10, padding: "1px 7px 2px" } : null}>
          {s}
        </span>
      ))}
    </div>
  );
}

/* =====================================================
   PERK CARD — the catalog item
   ===================================================== */
function PerkCard({ perk, inPerks, onOpen, onAdd, featured }) {
  const isGateway = perk.value_kind === "gateway";
  const isFree = perk.value_kind === "free";
  const isInLib = (perk.caveats || "").toLowerCase().includes("in-library only");

  let saleLabel = "FREE!";
  if (perk.value_num > 0) saleLabel = "FREE!";
  if (isGateway) saleLabel = "GATEWAY!";

  return (
    <article className={`perk ${featured ? "featured" : ""} ${inPerks ? "in-perks" : ""}`} onClick={() => onOpen(perk)}>
      <div className="perk-hero">
        <image-slot id={`hero-${perk.id}`} placeholder={perk.photo_hint} shape="rect" />
        {isInLib && <span className="stamp turq" style={{ position: "absolute", top: 10, left: 10 }}>in-library only</span>}
        {isGateway && <span className="stamp" style={{ position: "absolute", top: 10, left: 10 }}>gateway</span>}
        <span className={`sale-oval ${isGateway ? "sun" : "rev"}`}>{saleLabel}</span>
      </div>
      <div className="perk-body">
        <div className="perk-cat">{perk.cat}</div>
        <div className="perk-name">{perk.name}</div>
        <div className="perk-blurb">{perk.desc}</div>
        <SystemChips systems={perk.system} small />
        <div className="perk-price">
          {!isGateway && !isFree && (
            <>
              <span className="was">retail {perk.value_label}{perk.cadence?.startsWith('/') ? perk.cadence.split(' ')[0] : ''}</span>
              <span className="now-label">NOW</span>
              <span className="now-amt">$0</span>
            </>
          )}
          {isFree && (
            <>
              <span className="now-label">ALWAYS</span>
              <span className="now-amt">FREE</span>
            </>
          )}
          {isGateway && (
            <>
              <span className="now-label">GET THIS FIRST</span>
              <span className="now-amt" style={{ fontSize: 22 }}>$0</span>
            </>
          )}
        </div>
      </div>
      <div className="perk-cta" onClick={(ev) => { ev.stopPropagation(); onAdd(perk); }}>
        <span>{inPerks ? "✓ ADDED" : "+ ADD TO MY PERKS"}</span>
        <span>{inPerks ? "view ›" : "open ›"}</span>
      </div>
    </article>
  );
}

/* =====================================================
   LITTLE SALE BURST — decorative
   ===================================================== */
function Burst({ children, color = "tomato", size = 90, rotate = -6, style }) {
  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: size, height: size,
        background: `var(--${color})`,
        color: color === "sun" ? "var(--ink)" : "var(--paper)",
        clipPath: "polygon(50% 0%, 60% 10%, 75% 5%, 78% 22%, 95% 22%, 88% 38%, 100% 50%, 88% 62%, 95% 78%, 78% 78%, 75% 95%, 60% 90%, 50% 100%, 40% 90%, 25% 95%, 22% 78%, 5% 78%, 12% 62%, 0% 50%, 12% 38%, 5% 22%, 22% 22%, 25% 5%, 40% 10%)",
        fontFamily: "var(--f-display)",
        fontSize: 14,
        textAlign: "center",
        lineHeight: 1,
        transform: `rotate(${rotate}deg)`,
        padding: 8,
        ...style
      }}
    >
      {children}
    </div>
  );
}

/* =====================================================
   FRIENDLY DEPOSIT FORMAT
   ===================================================== */
function fmtDeposit(bracket) {
  switch (bracket) {
    case "0":     return "$0";
    case "lt500": return "<$500";
    case "500-5k":return "$500–$5k";
    case "5-25k": return "$5k–$25k";
    case "25k+":  return "$25k+";
    default:      return "$—";
  }
}

/* =====================================================
   EXPORT
   ===================================================== */
Object.assign(window, {
  Marquee, Header, Footer, PhotoSlot,
  SystemChips, PerkCard, Burst, fmtDeposit
});