/* Leaderboard, Mission Log, Operation Dossier, Footer */

const { useState: useState_s, useMemo: useMemo_s } = React;

/* --- Most Wanted Leaderboard ---
   Replaced by the new BountyBoard component (bountyboard.jsx).
   This wrapper just delegates so app.jsx can keep using <MostWanted/>. */
function MostWanted({ rows }) {
  if (typeof window.BountyBoard === "function") {
    return <window.BountyBoard rows={rows} />;
  }
  // Fallback: legacy table render if bountyboard didn't load
  return (
    <div className="leader">
      <div className="leader-row head">
        <div>#</div><div>HEAT</div><div>ALIAS</div><div>HOLDINGS</div>
        <div className="hide-mob">BOUNTY (SOL)</div>
        <div className="hide-mob">LAST SEEN</div>
        <div className="hide-mob">FILE</div>
      </div>
      {rows.map((r, idx) => (
        <div key={r.rank} className={`leader-row ${r.rank === 1 ? "first" : ""}`} data-reveal style={{"--i": idx}}>
          <div className={`leader-rank ${r.rank === 1 ? "gold" : ""}`}>#{r.rank.toString().padStart(2, "0")}</div>
          <div className="leader-stars">
            {Array.from({ length: 5 }, (_, i) => (
              <StarIcon key={i} className={i < r.stars ? "" : "off"} />
            ))}
          </div>
          <div>
            <div className="leader-alias">{r.crew} {r.alias}</div>
            <div className="leader-aka">{r.aka}</div>
          </div>
          <div className="leader-num">{r.holdings}</div>
          <div className="leader-num hide-mob">◎ {r.bounty}</div>
          <div className="leader-num hide-mob">{r.last}</div>
          <div className="hide-mob"></div>
        </div>
      ))}
    </div>
  );
}

function MiniPoster({ rank, alias, stars }) {
  return (
    <div className="leader-thumb">
      <div className="lt-wanted">★ WANTED ★</div>
      <div className="lt-pix">
        <PixelAvatar seed={"rank-" + rank + "-" + alias} />
      </div>
      <div className="lt-name">{alias.split("_")[0]}</div>
    </div>
  );
}

/* --- Mission Log: interactive pending contract cards --- */
function MissionLog({ missions }) {
  const [openContract, setOpenContract] = useState_s(2);
  const contractCopy = {
    soon: { badge: "coming soon", status: "coming soon", objective: "brief locked until the cartel gives the word", tone: "next", action: "locked" },
    pending: { badge: "pending", status: "pending", objective: "objective under review by the family", tone: "up", action: "stand by" },
  };
  const objectiveDeck = [
    {
      job: "Timeline hit job",
      brief: "Drop a savage 7 second cartel edit that makes the timeline stop scrolling. Clean, loud, screenshot-ready.",
      proof: "clip link + wallet",
      check: ["cartel name visible", "$GCA or cartel tag", "posted public"],
    },
    {
      job: "Ref got bought",
      brief: "Turn a bad call into a cartel accusation meme. Make it look like evidence from a crooked Miami backroom.",
      proof: "image post link",
      check: ["match moment referenced", "cartel badge included", "public post"],
    },
    {
      job: "Goal scream evidence",
      brief: "Catch a goal reaction and cut it like leaked footage from the boss table. Fast hook, dirty caption, no filler.",
      proof: "reaction clip",
      check: ["real reaction", "team/cartel callout", "under 20 seconds"],
    },
    {
      job: "Quote-post getaway",
      brief: "Hit three match posts with one nasty cartel reply meme and vanish. No walls of text, just clean damage.",
      proof: "3 post links",
      check: ["three replies", "one cartel theme", "no spam walls"],
    },
    {
      job: "Boss room sighting",
      brief: "Put a cartel card or $GCA visual on a real screen at a watch party, bar, or crew setup and post the proof.",
      proof: "photo link",
      check: ["screen visible", "cartel logo visible", "match context visible"],
    },
    {
      job: "Commentary wiretap",
      brief: "Flip a commentator line into a $GCA bounty edit, chant, or captioned clip that sounds like cartel propaganda.",
      proof: "audio or video link",
      check: ["match audio idea", "$GCA mention", "easy to share"],
    },
    {
      job: "VAR crime board",
      brief: "Make a fake investigation board for the most suspicious match moment. Red string energy, Miami heat, cartel stamp.",
      proof: "art post link",
      check: ["live event reference", "cartel stamp", "posted same day"],
    },
    {
      job: "Final whistle mugshot",
      brief: "When the match ends, turn the loser, ref, or panic seller into a mugshot meme with a brutal one-line verdict.",
      proof: "post link",
      check: ["final score context", "cartel or $GCA tag", "screenshot-ready"],
    },
  ];

  return (
    <div className="mlog-wrap">
      <div className="mlog-map">
        <div className="title">▸ heist contract board</div>
        <div className="heist-map-copy">
          <b>Heist Contracts</b>
          <span>Cartel holder objectives. A bounty pays out when the community hits the target inside the countdown.</span>
        </div>

        {/* Active-match pulsing pin over Hard Rock Stadium area */}
        <div className="map-pin live" style={{ left: "34%", top: "46%" }}>
          <div className="ring" />
          <div className="dot" />
          <div className="lbl">live heist</div>
        </div>
        <div className="map-pin next" style={{ left: "19%", top: "34%" }}>
          <div className="dot" />
          <div className="lbl">arming soon</div>
        </div>
        <div className="map-pin up" style={{ left: "62%", top: "46%" }}>
          <div className="dot" />
          <div className="lbl">upcoming</div>
        </div>
        <div className="map-pin up" style={{ left: "44%", top: "70%" }}>
          <div className="dot" />
          <div className="lbl">queued</div>
        </div>

        <div className="legend">
          <span className="pip"><span className="dot live"/> LIVE</span>
          <span className="pip"><span className="dot up"/> UPCOMING</span>
          <span className="pip"><span className="dot done"/> SETTLED</span>
        </div>
      </div>

      <div className="mlog-list">
        {missions.map((m, i) => {
          const contract = contractCopy[m.status] || contractCopy.up;
          const cardCls = contract.tone;
          return (
            <div key={i} className={`mlog-card ${cardCls}`} data-reveal style={{"--i": i}}>
              <div className="mlog-when">
                <div className="date">{m.date}</div>
                <div>{m.time}</div>
                <div className="contract-id">HC-{String(i + 1).padStart(2, "0")}</div>
              </div>
              <div className="mlog-mid">
                <div className="pair">{m.home} <span style={{color:"var(--ink-3)", fontSize:13}}>vs</span> {m.away}</div>
                <div className="mname">▸ {m.mission}</div>
                <div className="contract-objective">{contract.objective}</div>
                <div className="heist-meta">
                  <span>payout: - - -</span>
                  <span>countdown: {contract.countdown}</span>
                </div>
              </div>
              <div className={`mlog-badge ${contract.tone}`}>{contract.badge}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* --- Operation Dossier (token info) --- */
function OperationDossier({ token, price }) {
  const [copied, setCopied] = useState_s(false);
  const copyCA = () => {
    navigator.clipboard?.writeText(token.ca);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  return (
    <div className="dossier-wrap">
      <div className="dossier-stats">
        <div className="dossier-stat"><div className="k">Ticker</div><div className="v">{token.ticker}</div></div>
        <div className="dossier-stat"><div className="k">Chain</div><div className="v">{token.chain}</div></div>
        <div className="dossier-stat"><div className="k">Supply</div><div className="v mono">{token.supply}</div></div>
        <div className="dossier-stat"><div className="k">Launched</div><div className="v mono">{token.launched}</div></div>
        <div className="dossier-stat"><div className="k">Platform</div><div className="v">{token.platform}</div></div>
        <div className="dossier-stat live"><div className="k">Status</div><div className="v gold">{token.status}</div></div>
        <div className="dossier-stat"><div className="k">Market Cap</div><div className="v mono">$<NumberTicker value={price.marketCap} /></div></div>
        <div className="dossier-stat"><div className="k">24H Volume</div><div className="v mono">$<NumberTicker value={price.volume24h} /></div></div>
      </div>

      <div className="dossier-side">
        <div style={{fontFamily: "Bebas Neue", fontSize: 24, letterSpacing: "0.1em", color: "var(--gold)"}}>
          ▸ INTEL FILE · 045
        </div>
        <p style={{color: "var(--ink-1)", fontSize: 14, lineHeight: 1.55}}>
          underground currency of Grand Cup Auto.
          buy on pump.fun. hold through the group stage. or get wasted.
        </p>

        <div className="ca-row">
          <span className="lbl">CA</span>
          <span className="val">{token.ca}</span>
          <button className="copy-btn" onClick={copyCA}>{copied ? "✓ COPIED" : "COPY"}</button>
        </div>

        <div className="social-row">
          <a href="https://x.com/grandcupauto" target="_blank" rel="noopener noreferrer">𝕏 TWITTER</a>
          <a>✆ TELEGRAM</a>
          <a>▣ PUMP.FUN</a>
        </div>

        <a className="btn-sunset buy-cta lg" style={{textAlign: "center"}}>
          Buy $GCA
        </a>
      </div>
    </div>
  );
}

/* --- Footer --- */
const FOOTER_FAQ = [
  {
    q: "What are the 5 Cartel tokens?",
    a: "Five sister tokens to $GCA, the families of the Mundial. Each one feeds the $GCA economy.",
  },
  {
    q: "Where do the fees go?",
    a: "Each Cartel's creator fees split 50/50: half buys back and burns $GCA, half goes into that Cartel's bounty pot.",
  },
  {
    q: "What's the bounty pot for?",
    a: "Funding Pump Fun GO bounties for that Cartel: clips, content, stunts, art, whatever moves the needle. You complete the job, you get paid.",
  },
  {
    q: "How do I qualify to claim a bounty?",
    a: "Your submitting wallet must hold $GCA or a Cartel token. No holdings, no payout. No bag, no bounty.",
  },
  {
    q: "Why does holding matter?",
    a: "It keeps the rewards inside the family: bounties pay the people actually backing the Mundial, not random outsiders farming for free.",
  },
  {
    q: "How does this help $GCA?",
    a: "Every Cartel, every trade, every day means constant buyback and burn pressure on $GCA, plus a bounty engine pumping reach and new holders. Five revenue streams, one Boss.",
  },
];

function Footer() {
  return (
    <div className="foot">
      <div className="foot-faq" aria-label="Grand Cup Auto FAQ">
        <div className="foot-faq-head">
          <span className="mono">learn file</span>
          <h3>FAQ</h3>
          <p>Five cartels, one Boss, no free farming.</p>
        </div>
        <div className="foot-faq-list">
          {FOOTER_FAQ.map((item, index) => (
            <details className="foot-faq-item" key={item.q} open={index === 0}>
              <summary>
                <span className="mono">Q{String(index + 1).padStart(2, "0")}</span>
                <strong>{item.q}</strong>
              </summary>
              <p>{item.a}</p>
            </details>
          ))}
        </div>
      </div>
      <div className="foot-inner">
        <div className="foot-left">
          <div className="ttl">grand cup auto 2026</div>
          <div className="disclaimer">
            $GCA - parody memecoin content for entertainment purposes only. Not financial advice.
            No claim of affiliation, partnership, endorsement, sponsorship, or official status with
            Rockstar Games, Take-Two Interactive, FIFA, or any national football association.
            This project does not claim to be "inspired by Rockstar" or connected to any official game,
            tournament, team, league, or rights holder. Trading memecoins carries risk and may result in total loss.
          </div>
        </div>
        <div className="foot-right">
          <a href="https://x.com/grandcupauto" target="_blank" rel="noopener noreferrer">𝕏</a>
          <a>tg</a>
          <a>pump.fun</a>
        </div>
      </div>
    </div>
  );
}

/* --- Final CTA · join the crew --- */
function JoinCrew() {
  return (
    <section className="cta-section" data-screen-label="10 Join the Crew">
      <div className="cta-inner">
        <img className="cta-coin" src="assets/main-logo.png" alt="Grand Cup Auto" />
        <div className="cta-eyebrow"><span className="dot" /> launch window · 5 juni 2026 · 12:00 utc</div>
        <h2 className="cta-title">join <span className="accent">the crew</span></h2>
        <div className="cta-tag cta-tag-current">GRAND CUP AUTO / 5 CARTELS / $GCA</div>
        <div className="cta-tag">CARTEL TOKENS · BOUNTY POTS · NO BAG, NO BOUNTY</div>

        <div className="cta-cta-row">
          <a className="btn-sunset lg">Buy $GCA</a>
          <a className="btn-social x" href="https://x.com/grandcupauto" target="_blank" rel="noopener noreferrer">follow on x</a>
          <a className="btn-social tg">tg telegram</a>
        </div>

      </div>
    </section>
  );
}

MissionLog = function MissionLog({ missions }) {
  const [openContract, setOpenContract] = useState_s(2);
  const contractCopy = {
    soon: { badge: "coming soon", status: "coming soon", objective: "brief locked until the cartel gives the word", tone: "next", action: "locked" },
    pending: { badge: "pending", status: "pending", objective: "objective under review by the family", tone: "up", action: "stand by" },
  };
  const objectiveDeck = [
    {
      job: "Timeline hit job",
      brief: "Drop a savage 7 second cartel edit that makes the timeline stop scrolling. Clean, loud, screenshot-ready.",
      proof: "clip link + wallet",
      check: ["cartel name visible", "$GCA or cartel tag", "posted public"],
    },
    {
      job: "Ref got bought",
      brief: "Turn a bad call into a cartel accusation meme. Make it look like evidence from a crooked Miami backroom.",
      proof: "image post link",
      check: ["match moment referenced", "cartel badge included", "public post"],
    },
    {
      job: "Goal scream evidence",
      brief: "Catch a goal reaction and cut it like leaked footage from the boss table. Fast hook, dirty caption, no filler.",
      proof: "reaction clip",
      check: ["real reaction", "team/cartel callout", "under 20 seconds"],
    },
    {
      job: "Quote-post getaway",
      brief: "Hit three match posts with one nasty cartel reply meme and vanish. No walls of text, just clean damage.",
      proof: "3 post links",
      check: ["three replies", "one cartel theme", "no spam walls"],
    },
    {
      job: "Boss room sighting",
      brief: "Put a cartel card or $GCA visual on a real screen at a watch party, bar, or crew setup and post the proof.",
      proof: "photo link",
      check: ["screen visible", "cartel logo visible", "match context visible"],
    },
    {
      job: "Commentary wiretap",
      brief: "Flip a commentator line into a $GCA bounty edit, chant, or captioned clip that sounds like cartel propaganda.",
      proof: "audio or video link",
      check: ["match audio idea", "$GCA mention", "easy to share"],
    },
    {
      job: "VAR crime board",
      brief: "Make a fake investigation board for the most suspicious match moment. Red string energy, Miami heat, cartel stamp.",
      proof: "art post link",
      check: ["live event reference", "cartel stamp", "posted same day"],
    },
    {
      job: "Final whistle mugshot",
      brief: "When the match ends, turn the loser, ref, or panic seller into a mugshot meme with a brutal one-line verdict.",
      proof: "post link",
      check: ["final score context", "cartel or $GCA tag", "screenshot-ready"],
    },
  ];

  return (
    <div className="mlog-wrap mlog-contracts">
      <div className="mlog-map">
        <div className="title">contract dispatch</div>
        <div className="heist-map-copy">
          <b>Heist Contracts</b>
          <span>Coming soon contracts for cartel holders. Meme jobs, proof drops, and bounty pots load when the boss opens the board.</span>
        </div>

        <div className="map-pin next" style={{ left: "34%", top: "46%" }}>
          <div className="ring" />
          <div className="dot" />
          <div className="lbl">coming soon</div>
        </div>
        <div className="map-pin next" style={{ left: "19%", top: "34%" }}>
          <div className="dot" />
          <div className="lbl">locked</div>
        </div>
        <div className="map-pin up" style={{ left: "62%", top: "46%" }}>
          <div className="dot" />
          <div className="lbl">pending</div>
        </div>
        <div className="map-pin up" style={{ left: "44%", top: "70%" }}>
          <div className="dot" />
          <div className="lbl">queued</div>
        </div>

        <div className="legend">
          <span className="pip"><span className="dot live"/> COMING SOON</span>
          <span className="pip"><span className="dot up"/> PENDING</span>
          <span className="pip"><span className="dot done"/> LOCKED</span>
        </div>
      </div>

      <div className="mlog-list">
        {missions.map((m, i) => {
          const contract = contractCopy[[1, 4, 6].includes(i) ? "pending" : "soon"];
          const objective = objectiveDeck[i % objectiveDeck.length];
          const isOpen = openContract === i;
          return (
            <button
              key={i}
              className={`mlog-card ${contract.tone} ${isOpen ? "open" : ""}`}
              data-reveal
              style={{"--i": i}}
              type="button"
              aria-expanded={isOpen}
              onClick={() => setOpenContract(isOpen ? null : i)}
            >
              <div className="mlog-when">
                <div className="date">HEIST</div>
                <div>CONTRACT</div>
                <div className="contract-id">HC-{String(i + 1).padStart(2, "0")}</div>
              </div>
              <div className="mlog-mid">
                <div className="pair">{m.home} <span className="versus">vs</span> {m.away}</div>
                <div className="mname">{m.mission}</div>
                <div className="contract-job">{objective.job}</div>
                <div className="contract-objective">{contract.objective}</div>
                <div className="heist-meta">
                  <span>payout: - - -</span>
                  <span>status: {contract.status}</span>
                  <span>proof: {objective.proof}</span>
                </div>
              </div>
              <div className="mlog-side">
                <div className={`mlog-badge ${contract.tone}`}>{contract.badge}</div>
                <div className="contract-action">{contract.action}</div>
              </div>
              {isOpen && (
                <div className="contract-details">
                  <div>
                    <div className="contract-label">objective brief</div>
                    <p>{objective.brief}</p>
                  </div>
                  <div className="contract-checklist">
                    {objective.check.map((item) => <span key={item}>{item}</span>)}
                  </div>
                  <div className="contract-proof">
                    <b>claim gate</b>
                    <span>wallet must hold $GCA or one cartel token</span>
                  </div>
                </div>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
};

window.MostWanted = MostWanted;
window.MissionLog = MissionLog;
window.OperationDossier = OperationDossier;
window.Footer = Footer;
window.JoinCrew = JoinCrew;