// achievements.jsx — "racer's wins" section. Three flagship achievements presented
// as podium cards. Order: Gold (center, taller), then two side wins.

const ACHIEVEMENTS = [
  {
    id: "usaco",
    rank: "1ST",
    medal: "gold",
    title: "USACO Gold Division",
    org: "USA Computing Olympiad",
    blurb:
      "Promoted to the Gold division of USACO — top tier among international high-school programmers. Advanced algorithms, graph theory, dynamic programming.",
    year: "2024",
  },
  {
    id: "perfect",
    rank: "100%",
    medal: "gold",
    title: "Perfect 100% Average",
    org: "St. Francis Xavier Catholic Secondary School",
    blurb:
      "Graduated with a perfect high-school average — featured in local news alongside one other student.",
    year: "2025",
    link: "https://www.insauga.com/at-100-two-students-from-the-same-mississauga-school-have-perfect-grades/",
    linkLabel: "Read article",
  },
  {
    id: "ccc",
    rank: "TOP 10%",
    medal: "gold",
    title: "CCC Senior — Top 10%",
    org: "Canadian Computing Competition",
    blurb:
      "Placed in the top 10% of Senior-division competitors in the University of Waterloo's national programming contest.",
    year: "2024",
  },
];

function Trophy({ tone = "gold" }) {
  // Simple, deliberate trophy SVG so we don't ship raster art for placeholders.
  const fill = tone === "gold" ? "#E5B93C" : "#C9CCD3";
  const stroke = tone === "gold" ? "#9C7A1F" : "#7C828B";
  return (
    <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden="true">
      <defs>
        <linearGradient id={`tr-${tone}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={fill} stopOpacity="1" />
          <stop offset="1" stopColor={fill} stopOpacity="0.65" />
        </linearGradient>
      </defs>
      {/* handles */}
      <path d="M14 14 C 6 14, 6 26, 18 28" fill="none" stroke={stroke} strokeWidth="2.5" />
      <path d="M42 14 C 50 14, 50 26, 38 28" fill="none" stroke={stroke} strokeWidth="2.5" />
      {/* cup */}
      <path
        d="M14 10 L42 10 L41 24 C 41 32, 35 36, 28 36 C 21 36, 15 32, 15 24 Z"
        fill={`url(#tr-${tone})`}
        stroke={stroke}
        strokeWidth="2"
      />
      {/* stem */}
      <rect x="25" y="36" width="6" height="6" fill={stroke} />
      {/* base */}
      <rect x="18" y="42" width="20" height="5" rx="1" fill={fill} stroke={stroke} strokeWidth="1.5" />
      {/* shine */}
      <path d="M19 14 Q 22 22 26 24" stroke="#fff" strokeOpacity="0.55" strokeWidth="2" fill="none" strokeLinecap="round" />
    </svg>
  );
}

function CheckerStrip() {
  // Small 2-row checkered stripe used as a card flourish
  const cells = [];
  for (let r = 0; r < 2; r++) {
    for (let c = 0; c < 14; c++) {
      const dark = (r + c) % 2 === 0;
      cells.push(
        <rect key={`${r}-${c}`} x={c * 10} y={r * 10} width="10" height="10" fill={dark ? "currentColor" : "transparent"} />
      );
    }
  }
  return (
    <svg className="ach-checker" viewBox="0 0 140 20" preserveAspectRatio="none" aria-hidden="true">
      {cells}
    </svg>
  );
}

function AchievementCard({ a, index }) {
  const isFeatured = index === 1; // center podium
  return (
    <article className={`ach-card ${isFeatured ? "featured" : ""}`}>
      <div className="ach-card-top">
        <Trophy tone={a.medal} />
        <div className="ach-rank-tag">{a.rank}</div>
      </div>
      <div className="ach-card-body">
        <h3 className="ach-title">{a.title}</h3>
        <div className="ach-org">{a.org}</div>
        <p className="ach-blurb">{a.blurb}</p>
      </div>
      <div className="ach-card-foot">
        <span className="ach-year">{a.year}</span>
        {a.link && (
          <a
            className="ach-link"
            href={a.link}
            target="_blank"
            rel="noopener noreferrer"
          >
            {a.linkLabel || "Read more"} <span aria-hidden="true">→</span>
          </a>
        )}
      </div>
      <CheckerStrip />
    </article>
  );
}

function AchievementsSection() {
  return (
    <section className="section achievements" id="achievements" data-screen-label="Achievements">
      <div className="section-head">
        <div>
          <div className="section-num">04 / ACHIEVEMENTS</div>
          <h2 className="section-title">Trophy shelf.</h2>
        </div>
        <div className="section-sub">
          Wins worth remembering — competitions, grades, recognition.
        </div>
      </div>

      <div className="ach-grid">
        {ACHIEVEMENTS.map((a, i) => (
          <AchievementCard a={a} index={i} key={a.id} />
        ))}
      </div>
    </section>
  );
}

window.AchievementsSection = AchievementsSection;