/* iBD Coliseum — Guide: how to take part + the point/tier system, on its own page. */

function GuidePage() {
  const { TIERS, PTS_PER_UPVOTE, PTS_PER_COMMENT, PTS_PER_SUBMISSION } = window.COLISEUM_DATA;

  const pages = [
    {
      icon: "trophy", t: "Season",
      d: "This quarter's live board — share cards, upvote what's useful, and see the season rank. Every card also stays on Gallery.",
      sub: [
        "Each season runs 12 weeks:",
        "Week 1 — TD announces the new season.",
        "Weeks 2–11 — Members can upload skills and vote under the Season page.",
        "Week 12 — Season closes for tallying.",
        "Week 1 of the next season — TD announces the winners and kicks off the new season.",
      ],
    },
    {
      icon: "grid", t: "Gallery",
      d: "Your go-to place to browse every shared card across all seasons. Cards stay on the wall until an executive archives or deletes them.",
    },
    {
      icon: "person", t: "Spigenian Hall of Fame",
      d: "Standout cards get featured here for easy reference.",
    },
  ];

  const voteRules = [
    "Each member gets 3 votes per quarter",
    "You can only cast 1 vote per card; you can't stack votes on the same skill across different months",
    "You cannot vote for your own skill",
    "If a member leaves, their votes still count",
    "Scoring is simple: 1 vote = 1 point, and the highest total wins",
  ];

  const points = [
    { icon: "plus", label: "Share a card", pts: `+${PTS_PER_SUBMISSION}`, note: "Post an AI use case to the gallery." },
    { icon: "up", label: "Give an upvote", pts: `+${PTS_PER_UPVOTE}`, note: "Upvote a peer's card and recognize work that helped you." },
    { icon: "chat", label: "Post a comment", pts: `+${PTS_PER_COMMENT}`, note: "Leave a comment on someone's card or a mission thread." },
    { icon: "trophy", label: "Win season's most votes", pts: "Gift card", note: "Win a gift card at the end of a season!" },
  ];

  return (
    <div className="guide">
      <section className="ghero arena">
        <div className="wrap">
          <div className="eyebrow">iBD Coliseum · How it works</div>
          <h1><em>Guide &amp; Points</em></h1>
          <p className="sub">Hi iBD members, here's everything you need to know about how the competition works. Please use this page as a resource on how to share your work, and exactly how points and ranks add up across the seasons.</p>
        </div>
      </section>

      <section className="gbody">
        <div className="wrap" style={{ display: "block" }}>
          <div className="guide-section">
            <div className="section-head"><h2><Icon name="steps" className="ic" />Getting started</h2></div>
            <p className="muted">Here's a quick look at each page — you can find them in the top navigation bar.</p>
            <ul className="guide-steps">
              {pages.map((s) => (
                <li className="gs-row" key={s.t}>
                  <span className="gs-ic"><Icon name={s.icon} className="ic" /></span>
                  <div className="gs-body">
                    <div className="gs-t">{s.t}</div>
                    <div className="gs-d">{s.d}</div>
                    {s.sub &&
                      <ul className="guide-sublist">
                        {s.sub.map((line) => <li key={line}>{line}</li>)}
                      </ul>}
                  </div>
                </li>
              ))}
            </ul>
          </div>

          <div className="guide-section">
            <div className="section-head"><h2><Icon name="up" className="ic" />Submissions and Votes</h2></div>
            <div className="guide-panel">
              <p className="muted">Any iBD member can submit a skill on any topic, any time during an active season.</p>
              <p className="muted">When it comes to voting, here's what to keep in mind:</p>
              <ul className="guide-list">
                {voteRules.map((rule) => <li key={rule}>{rule}</li>)}
              </ul>
            </div>
          </div>

          <div className="guide-section">
            <div className="section-head"><h2><Icon name="bolt" className="ic" />How points work</h2></div>
            <p className="muted">There are a few ways to earn points:</p>
            <div className="guide-points">
              {points.map((p) => (
                <div className="gp-card" key={p.label}>
                  <span className="gp-ic"><Icon name={p.icon} className="ic" /></span>
                  <div className="gp-body">
                    <div className="gp-label">{p.label}</div>
                    <div className="gp-note">{p.note}</div>
                  </div>
                  <span className="gp-pts">{p.pts}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="guide-section">
            <div className="section-head">
              <h2><Icon name="archive" className="ic" />Archiving cards</h2>
              <span className="muted">Executives</span>
            </div>
            <div className="guide-panel">
              <p className="muted">Executives can archive any card, whether it's in the gallery, a competition, or the Hall of Fame.</p>
              <p className="muted">Archived cards won't appear anywhere on the site, but the person who shared it <strong>keeps all the points</strong> they earned.</p>
              <p className="muted">It is a way to retire anything outdated or duplicated while still giving credit where it's due.</p>
            </div>
          </div>

          <div className="guide-section">
            <div className="section-head">
              <h2><Icon name="gem" className="ic" />Rank tiers</h2>
              <span className="muted">{TIERS.length} tiers</span>
            </div>
            <p className="muted">There are {TIERS.length} tiers iBD members can work their way up!</p>
            <div className="guide-ladder">
              {TIERS.map((tr) => (
                <div className="gl-rung" key={tr.id} style={{ "--tier": tr.color }}>
                  <span className="gl-gem"><TierEmblem tier={tr.id} className="ic" /></span>
                  <span className="gl-name">{tr.name}</span>
                  <span className="gl-min">{tr.min.toLocaleString()}{tr.min === 0 ? " pts" : "+ pts"}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.GuidePage = GuidePage;