/* CodingProjects.jsx — software Neel has built and shipped,
   each card linking out to its live domain. Hairline grid, mono tags. */
const { useState: useCodeState } = React;

const CODE_PROJECTS = [
  {
    name: "Xanom",
    url: "https://xanom.ai",
    tag: "macOS · Tauri · Rust",
    blurb: "A macOS desktop app for managing AI coding agents — Claude Code, Codex, Droid, OpenCode, and Grok — across five interaction modes, from PTY terminals to structured agent SDKs.",
  },
  {
    name: "Apexline",
    url: "https://apexline.io",
    tag: "macOS · Swift",
    blurb: "A native macOS companion app for Formula 1, built for fans who want race data close at hand on the desktop.",
  },
  {
    name: "PALY Journalism",
    url: "https://palyjournalism.com",
    tag: "React Native · Expo",
    blurb: "A mobile app unifying Paly's student journalism — Paly Voice, Campanile, and Verde Magazine — into one place to read, save, and discuss articles.",
  },
  {
    name: "Strix Prep",
    url: "https://strixprep.com",
    tag: "Next.js · Electron",
    blurb: "A digital SAT practice platform, on the web and as a desktop app, built to mirror the real testing experience.",
  },
];

function CodingProjects() {
  return (
    <Section id="code" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div style={{ marginBottom: 36 }}>
        <Kicker>[ 02 ] Built &amp; shipped</Kicker>
        <h2 className="h1" style={{ margin: "14px 0 0" }}>Coding Projects</h2>
      </div>
      <div className="code-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)" }}>
        {CODE_PROJECTS.map((p, i) => <CodeCard key={p.name} p={p} index={i} />)}
      </div>
    </Section>
  );
}

function CodeCard({ p, index }) {
  const [h, setH] = useCodeState(false);
  return (
    <a className="code-card" href={p.url} target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "block", padding: "28px 26px", background: h ? "var(--surface-1)" : "var(--bg)", textDecoration: "none", transition: "background var(--dur) var(--ease)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <span className="timecode" style={{ fontSize: 12 }}>{String(index + 1).padStart(2, "0")}</span>
        <Icon name="arrow-up-right" size={16} style={{ color: h ? "var(--fg)" : "var(--fg-4)", transition: "color var(--dur) var(--ease)" }} />
      </div>
      <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 22, color: "var(--fg)", margin: "0 0 10px" }}>{p.name}</h3>
      <p className="body" style={{ fontSize: 14.5, color: "var(--fg-2)", margin: "0 0 16px", maxWidth: 460 }}>{p.blurb}</p>
      <span className="label" style={{ color: "var(--fg-3)" }}>{p.tag}</span>
    </a>
  );
}

Object.assign(window, { CodingProjects, CODE_PROJECTS });