// builds.jsx - "Things I've built" portfolio grid
// Exports window.RecLabBuilds = { Builds }

const FEATURED = [
  { img: "images/build-founding-pack.jpg", cat: "Hiring materials", title: "Automate & improve hiring documentation", desc: "Any documentation off the back of meetings (such as hiring playbooks, job specs/ads, interview guidelines, contracts and more) can be 100% automated, and in many cases improved. Like this interactive candidate pack.", href: "https://founding-engineer-pack-snowy.vercel.app/", ac: "#7c5cff" },
  { img: "images/build-book-jamie.jpg", cat: "Scheduling", title: "Custom scheduling tools", desc: "We build scheduling tools that connect up diaries (hiring managers and recruiters) and calendars to eliminate scheduling pains. Your own fully customisable solution. Here's an example I made to manage my public AI workshops that I've delivered to over 100 recruiters.", href: "https://book-time-with-jamie-five.vercel.app/", ac: "#bf5c3a" },
];
const MORE = [
  { img: "images/build-reclab-os.jpg", cat: "Internal tool", title: "Bye bye spreadsheets.", desc: "Get rid of janky spreadsheets. Build something fully customisable for your use case that actually works, and has a UI that means it doesn't get archived after three months.", href: "https://rec-lab-os.vercel.app/", ac: "#9a472c" },
  { img: "images/build-the-new-cv.jpg", cat: "Interactive CV", title: "The New CV", desc: "An interactive candidate profile that works two ways: agencies send it to clients to present talent, and job seekers use it to stand out, far beyond a static PDF.", href: "https://the-new-cv.vercel.app/", ac: "#bf5c3a" },
  { img: "images/build-cv-invaders.jpg", cat: "Interactive game", title: "CV Invaders", desc: "A playful show of how flexible and creative these tools can get. It also lifts candidate experience and signals social proof: joiners get to use cutting-edge AI, a real incentive.", href: "https://cv-invaders.vercel.app/", ac: "#7c5cff" },
];

// Lighter "also built" items (no screenshot / link yet)
const MORE_EXAMPLES = [
  { title: "Research agents", desc: "Autonomous agents that run either business development or market research, turning hours of manual digging into minutes." },
  { title: "Placement intelligence", desc: "Automatically find your previous placements and where they've landed, what they do now, and whether their department is hiring, turning old placements into warm leads." },
  { title: "Chrome extensions", desc: "Browser tools that automate the steps from LinkedIn to your ATS, and other repetitive workflows." },
  { title: "Whatever you need", desc: "Reports, dashboards, automations, intelligence, or whatever makes sense for your process. Let's talk it through." },
];

function Card({ p, big }) {
  return (
    <a className="build-card" href={p.href} target="_blank" rel="noopener noreferrer" style={{ display: "block", textDecoration: "none", background: "#fff",
      borderRadius: 20, overflow: "hidden", border: "1px solid rgba(28,26,22,0.07)", boxShadow: "0 1px 2px rgba(28,26,22,0.04), 0 14px 32px -22px rgba(28,26,22,0.28)" }}>
      <div style={{ position: "relative", ...(big ? { height: 440 } : { aspectRatio: "16 / 10" }), overflow: "hidden", background: "var(--paper)" }}>
        <img src={p.img} alt={`${p.title} - screenshot`} loading="lazy"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }} />
      </div>
      <div style={{ padding: big ? "26px 30px 30px" : "20px 22px 24px" }}>
        <span style={{ fontFamily: "var(--sans)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: p.ac }}>{p.cat}</span>
        <h3 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: big ? 22 : 18, letterSpacing: "-0.02em", color: "var(--ink)", margin: "10px 0 0" }}>{p.title}</h3>
        <p className="b-desc" style={{ fontFamily: "var(--sans)", fontSize: big ? 15.5 : 14.5, lineHeight: 1.5, color: "var(--ink-soft)", margin: "6px 0 0" }}>{p.desc}</p>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 16, fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 600, color: p.ac }}>View project &rarr;</span>
      </div>
    </a>
  );
}

function Builds() {
  return (
    <section style={{ background: "#ffffff", fontFamily: "var(--sans)", padding: "104px 80px 120px" }}>
      <div style={{ maxWidth: 1360, margin: "0 auto" }}>
        <h2 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 54, lineHeight: 1.04, letterSpacing: "-0.035em", color: "var(--ink)", margin: 0, maxWidth: 820 }}>Check out examples of a few of the AI &amp; automations I've built</h2>
        <div className="b-cards" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24, marginTop: 44 }}>
          {FEATURED.map((p, i) => <div key={`f${i}`} style={{ gridColumn: "span 3" }}><Card p={p} big /></div>)}
          {MORE.map((p, i) => <div key={`m${i}`} style={{ gridColumn: "span 2" }}><Card p={p} /></div>)}
        </div>

        <div style={{ marginTop: 66, paddingTop: 46, borderTop: "1px solid rgba(28,26,22,0.12)" }}>
          <h3 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.025em", color: "var(--ink)", margin: "0 0 30px" }}>Practical things we could build</h3>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 36 }}>
            {MORE_EXAMPLES.map((m, i) => (
              <div key={i} style={{ borderTop: "2px solid var(--terra)", paddingTop: 18 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 9, flexWrap: "wrap" }}>
                  <h4 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 17.5, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0 }}>{m.title}</h4>
                  {m.tag && <span style={{ fontFamily: "var(--sans)", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terra-deep)", background: "rgba(191,92,58,0.1)", padding: "3px 9px", borderRadius: 100 }}>{m.tag}</span>}
                </div>
                <p style={{ fontFamily: "var(--sans)", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)", margin: 0 }}>{m.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.RecLabBuilds = { Builds };