/* GTA-style diagonal banner + rank-badge cards
   Style reference: 02-group-stage-turf-war.png, 04-pumpfun-getaway.png
   - Big chunky Pricedown title with thick stroke
   - Yellow/cyan tagline pill
   - Bottom-left stacked badge pills
   - Top-right 5-star rating
   - Bottom-right $GCA lockup with palm-trophy emblem
   - Diagonal accent-color stripe across the image
*/

const { useState: useS_b, useMemo: useM_b } = React;

/* ============================================================
   GTA-emblem — the palm-trophy ringed token used in banners
   ============================================================ */
function GcaEmblem({ size = 60 }) {
  return (
    <svg viewBox="-60 -60 120 120" width={size} height={size}>
      <defs>
        <radialGradient id={`em-bg-${size}`}>
          <stop offset="0%" stopColor="#46e5e5" />
          <stop offset="50%" stopColor="#a02bff" />
          <stop offset="100%" stopColor="#ff3aa3" />
        </radialGradient>
        <linearGradient id={`em-gold-${size}`} x1="0" y1="-1" x2="0" y2="1">
          <stop offset="0%" stopColor="#fff5c8" />
          <stop offset="35%" stopColor="#ffd23a" />
          <stop offset="65%" stopColor="#a86a14" />
          <stop offset="100%" stopColor="#ffd23a" />
        </linearGradient>
      </defs>
      {/* Outer ring */}
      <circle r="56" fill="#0a0014" stroke={`url(#em-gold-${size})`} strokeWidth="3" />
      {/* Inner neon disc */}
      <circle r="48" fill={`url(#em-bg-${size})`} />
      {/* Halftone */}
      <circle r="48" fill="rgba(0,0,0,0.25)" />
      {/* Trophy base */}
      <rect x="-22" y="32" width="44" height="6" fill={`url(#em-gold-${size})`} stroke="#0a0014" strokeWidth="1.5"/>
      {/* Trophy cup */}
      <path d="M -16 -10 L 16 -10 L 14 28 L -14 28 Z" fill={`url(#em-gold-${size})`} stroke="#0a0014" strokeWidth="1.5"/>
      {/* Handles */}
      <path d="M -16 -8 Q -28 -8 -28 8 Q -28 18 -20 18" fill="none" stroke={`url(#em-gold-${size})`} strokeWidth="3"/>
      <path d="M 16 -8 Q 28 -8 28 8 Q 28 18 20 18" fill="none" stroke={`url(#em-gold-${size})`} strokeWidth="3"/>
      {/* Soccer ball inside */}
      <circle cx="0" cy="8" r="9" fill="#fff" stroke="#0a0014" strokeWidth="1"/>
      <path d="M 0 0 L 4 4 L 0 8 L -4 4 Z" fill="#0a0014"/>
      <path d="M -7 6 L -5 11 M 7 6 L 5 11 M 0 15 L 0 17" stroke="#0a0014" strokeWidth="0.8" fill="none"/>
      {/* Palm fronds atop trophy */}
      <g stroke="#0a0014" strokeWidth="1" fill={`url(#em-gold-${size})`}>
        <path d="M 0 -12 Q -4 -22 -12 -28 Q -8 -22 -2 -14 Z" />
        <path d="M 0 -12 Q 4 -22 12 -28 Q 8 -22 2 -14 Z" />
        <path d="M 0 -14 Q 0 -28 0 -34 L 2 -14 Z" />
      </g>
      {/* Star atop */}
      <path d="M 0 -38 L 2 -32 L 8 -32 L 3 -28 L 5 -22 L 0 -26 L -5 -22 L -3 -28 L -8 -32 L -2 -32 Z"
            fill={`url(#em-gold-${size})`} stroke="#0a0014" strokeWidth="1"/>
    </svg>
  );
}

/* ============================================================
   BadgePill — replicates the slanted pill shape from the
   reference badges (turf-record, active-mission, etc).
   ============================================================ */
function BadgePill({ tone = "cyan", stars = 0, label, sub }) {
  /* tone → outline color + accent slash color */
  const TONES = {
    cyan:   { outline: "#46e5e5", slash: "#7fa9ff", sub: "#46e5e5" },
    green:  { outline: "#5be684", slash: "#5be684", sub: "#5be684" },
    pink:   { outline: "#ff3aa3", slash: "#ff8ad0", sub: "#ff3aa3" },
    coral:  { outline: "#ffae6a", slash: "#ffae6a", sub: "#ffd23a" },
    purple: { outline: "#a02bff", slash: "#c97aff", sub: "#a02bff" },
    red:    { outline: "#ff5570", slash: "#ff8a9c", sub: "#ff5570" },
  };
  const t = TONES[tone] || TONES.cyan;

  return (
    <div className="gta-pill" style={{ "--outline": t.outline, "--slash": t.slash, "--sub-col": t.sub }}>
      <div className="gta-pill-frame">
        <div className="gta-pill-slash" />
        {stars > 0 && (
          <div className="gta-pill-stars">
            {Array.from({length: 5}, (_, i) => (
              <span key={i} className={i < stars ? "on" : "off"}>★</span>
            ))}
          </div>
        )}
        <div className="gta-pill-label">{label}</div>
        {sub && <div className="gta-pill-sub">{sub}</div>}
        <div className="gta-pill-emblem"><GcaEmblem size={42} /></div>
      </div>
    </div>
  );
}

/* ============================================================
   GtaBanner — full diagonal-stripe section header banner
   accent: "cyan" | "pink" | "coral" | "green" — the diagonal stripe color
   ============================================================ */
function GtaBanner({
  accent = "cyan",
  title,
  titleAccent = "pink",  // for title shadow tint
  tagline,
  taglineTone = "yellow", // yellow|cyan|green pill
  stars = 5,
  image,                  // bg image URL
  imageAlt = "",
  badges = [],            // [{tone,stars,label,sub}]
  character,              // optional character cutout URL
  characterSide = "right",
  emblem = true,
  chip,                   // optional small label chip like "MISSION DAY"
  height = 360,
}) {
  const accentMap = {
    cyan:   "#46e5e5",
    pink:   "#ff3aa3",
    coral:  "#ffae6a",
    green:  "#5be684",
    yellow: "#ffd23a",
    purple: "#a02bff",
  };
  const accentCol = accentMap[accent] || accentMap.cyan;
  const titleShadowCol = accentMap[titleAccent] || accentMap.pink;
  const pillCol = accentMap[taglineTone] || accentMap.yellow;

  return (
    <div
      className="gta-banner"
      data-reveal
      style={{
        "--accent": accentCol,
        "--title-shadow": titleShadowCol,
        "--pill-col": pillCol,
        height,
      }}
    >
      {/* Background image */}
      {image && <div className="gb-image" style={{backgroundImage: `url(${image})`}} />}
      {/* Diagonal colored stripe overlay */}
      <div className="gb-stripe" />
      {/* Vignette */}
      <div className="gb-vignette" />
      {/* Scanline */}
      <div className="gb-scan" />
      {/* Edge sweep */}
      <div className="gb-sweep" />

      {/* Character cutout */}
      {character && (
        <img
          className={`gb-character ${characterSide}`}
          src={character}
          alt={imageAlt}
          loading="lazy"
        />
      )}

      {/* Stars top-right */}
      <div className="gb-stars">
        {Array.from({length: 5}, (_, i) => (
          <span key={i} className={`gb-star ${i < stars ? "on" : "off"}`} style={{"--i": i}}>★</span>
        ))}
      </div>

      {/* Title block */}
      <div className="gb-title-block">
        <h2 className="gb-title">{title}</h2>
        {tagline && (
          <div className="gb-tagline">
            <div className="gb-tagline-frame">
              <span>{tagline}</span>
            </div>
          </div>
        )}
      </div>

      {/* Bottom-left badge stack */}
      {badges.length > 0 && (
        <div className="gb-badges">
          {badges.map((b, i) => (
            <div key={i} className="gb-badge-row" style={{"--i": i}}>
              <BadgePill {...b} />
            </div>
          ))}
        </div>
      )}

      {/* Bottom-right $GCA logo lockup */}
      {emblem && (
        <div className="gb-lockup">
          <GcaEmblem size={56} />
          <div className="gb-lockup-text">
            <div className="t">$GCA</div>
            <div className="s">GRAND CUP AUTO</div>
          </div>
        </div>
      )}

      {chip && <div className="gb-chip">{chip}</div>}
    </div>
  );
}

/* ============================================================
   RankCard — uses the rank PNG badges as the visual centerpiece
   and stacks with a character cutout. Used in the "tiers" section.
   ============================================================ */
function RankCard({ rank, idx = 0 }) {
  return (
    <div className={`rank-card tier-${rank.tier}`} data-reveal style={{"--i": idx}}>
      <div className="rc-char">
        <img src={rank.character} alt={rank.name} loading="lazy" />
      </div>
      <div className="rc-glow" />
      <div className="rc-badge">
        <img src={rank.badge} alt={rank.name} />
      </div>
      <div className="rc-meta">
        <div className="rc-tier">tier {rank.idx}</div>
        <div className="rc-name">{rank.name}</div>
        <div className="rc-bag">{rank.bag}</div>
        <ul className="rc-perks">
          {rank.perks.map((p, i) => <li key={i}>▸ {p}</li>)}
        </ul>
      </div>
      <div className="rc-corner" />
    </div>
  );
}

/* ============================================================
   RankLadder — the full rank section
   ============================================================ */
const RANKS = [
  {
    idx: "01", tier: "thug", name: "Street Thug", bag: "1M+ BAG",
    badge: "assets/rank-street-thug.png",
    character: "assets/char-striker.png",
    perks: [
      "Telegram entry pass",
      "Mission log read-only",
      "Group stage poster pack",
    ],
  },
  {
    idx: "02", tier: "associate", name: "Associate", bag: "5M+ BAG",
    badge: "assets/rank-associate.png",
    character: "assets/char-fan.png",
    perks: [
      "Crew vote on weekly missions",
      "Wanted poster premium border",
      "Hard Rock VIP raffle",
    ],
  },
  {
    idx: "03", tier: "cartel", name: "Cartel Member", bag: "10M+ BAG",
    badge: "assets/rank-cartel-member.png",
    character: "assets/char-bookie.png",
    perks: [
      "Private alpha telegram",
      "Heat-meter overlay on stream",
      "Match-mission early picks",
    ],
  },
  {
    idx: "04", tier: "boss", name: "Crime Boss", bag: "50M+ BAG",
    badge: "assets/rank-crime-boss.png",
    character: "assets/char-boss.png",
    perks: [
      "1-of-1 holographic rank NFT",
      "Final-heist trophy ticket",
      "Custom alias on leaderboard",
    ],
  },
  {
    idx: "05", tier: "untouchable", name: "Untouchable", bag: "100M+ BAG",
    badge: "assets/rank-untouchable.png",
    character: "assets/char-keeper.png",
    perks: [
      "Cartel command override",
      "Grand Cup Auto rooftop courtside",
      "Lifetime $GCA immunity",
    ],
  },
];

function RankLadder() {
  return (
    <section className="section ranks-section" data-screen-label="07 Crew Ranks">
      <window.SectionStage
        variant="duo"
        shape="wedge"
        accent="gold"
        num="07"
        eyebrow="graduation · cartel ladder"
        title={<>rank <span className="ac-gold">up.</span></>}
        sub="bag up. graduate. or get left in the alley."
        bg="assets/banner-pumpfun-getaway.png"
        charLeft="assets/char-striker.png"
        charRight="assets/char-keeper.png"
        charPop={20}
        height={500}
      />

      <div className="ranks-grid">
        {RANKS.map((r, i) => <RankCard key={i} rank={r} idx={i} />)}
      </div>
    </section>
  );
}

window.GtaBanner = GtaBanner;
window.BadgePill = BadgePill;
window.GcaEmblem = GcaEmblem;
window.RankLadder = RankLadder;
window.RANKS = RANKS;