// about.jsx - "Meet the founder" section (dark, echoes the hero)
// Exports window.RecLabAbout = { About }

function About() {
  const soft = "rgba(255,255,255,0.72)";
  const S = ({ children }) => <strong style={{ color: "var(--terra-soft)", fontWeight: 600 }}>{children}</strong>;
  return (
    <section style={{ background: "#161410", fontFamily: "var(--sans)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(820px 420px at 88% 0%, rgba(191,92,58,0.16), transparent 70%)" }} />
      <div style={{ maxWidth: 1360, margin: "0 auto", padding: "110px 80px 116px", position: "relative",
        display: "grid", gridTemplateColumns: "440px 1fr", gap: 80, alignItems: "stretch" }}>

        <div style={{ gridColumn: "1 / -1" }}>
          <h2 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 54, lineHeight: 1.04, letterSpacing: "-0.035em", color: "#fff", margin: "0" }}>For Recruiters, by a recruiter</h2>
        </div>

        {/* portrait - stretches to match the bio column height */}
        <div style={{ position: "relative" }}>
          <div className="founder-frame" style={{ borderRadius: "20px", overflow: "hidden", height: "100%", minHeight: "440px",
            border: "1px solid rgba(255,255,255,0.14)", boxShadow: "0 40px 80px -28px rgba(0,0,0,0.7)" }}>
            <img src="images/founder-jamie.jpg" alt="Jamie, founder of The Rec Lab"
              style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%" }} />
          </div>
          <div style={{ position: "absolute", left: -16, bottom: -20, background: "var(--paper)",
            padding: "13px 22px", borderRadius: 12, boxShadow: "0 18px 36px -14px rgba(0,0,0,0.6)", whiteSpace: "nowrap" }}>
            <div style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em", color: "var(--ink)" }}>Jamie</div>
            <div style={{ fontFamily: "var(--sans)", fontSize: 13, color: "var(--terra-deep)" }}>Founder, The Rec Lab</div>
          </div>
        </div>

        {/* bio */}
        <div>
          <p style={{ fontFamily: "var(--sans)", fontSize: 16.5, lineHeight: 1.65, color: soft, margin: "0", maxWidth: 620 }}>
            I've spent <S>8 years</S> in recruitment, across agency, in-house and in AI rec-tech, making <S>over 300 hires</S> across <S>100+ brands</S> like PlayStation, TikTok, AMEX and more.
          </p>
          <p style={{ fontFamily: "var(--sans)", fontSize: 16.5, lineHeight: 1.65, color: soft, margin: "20px 0 0", maxWidth: 620 }}>
            For whatever reason, in all my roles I've always gravitated towards the ops side of recruitment; process, systems, getting great enjoyment out of making the machine work better. Moving on from spreadsheets, to process optimisation, to SQL & Python, so you can imagine when AI entered the recruitment arena, the pivot was a no-brainer.
          </p>
          <p style={{ fontFamily: "var(--sans)", fontSize: 16.5, lineHeight: 1.65, color: soft, margin: "20px 0 0", maxWidth: 620 }}>
            I now spend my days as a student in the world of recruitment, researching the latest in AI and how it can impact hiring. Turning those learnings into content, upskilling teams, or building systems myself.
          </p>

          <a href="https://www.linkedin.com/in/jamiejaylyons/" target="_blank" rel="noopener noreferrer" onMouseEnter={(e) => { const ic = e.currentTarget.querySelector(".li-ic"); ic.style.color = "var(--terra-soft)"; ic.style.transform = "translate(3px,-3px)"; e.currentTarget.querySelector(".li-hd").style.backgroundSize = "100% 1px"; }}
            onMouseLeave={(e) => { const ic = e.currentTarget.querySelector(".li-ic"); ic.style.color = "var(--terra)"; ic.style.transform = "none"; e.currentTarget.querySelector(".li-hd").style.backgroundSize = "0% 1px"; }}
            style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, textDecoration: "none",
              width: "100%", maxWidth: 620, marginTop: 42, borderTop: "1px solid rgba(255,255,255,0.18)", paddingTop: 26 }}>
            <span style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
              <span className="li-hd" style={{ alignSelf: "flex-start", fontFamily: "var(--sans)", fontSize: 21, fontWeight: 600,
                letterSpacing: "-0.02em", color: "#fff", backgroundImage: "linear-gradient(var(--terra-soft),var(--terra-soft))",
                backgroundRepeat: "no-repeat", backgroundPosition: "0 100%", backgroundSize: "0% 1px", transition: "background-size .35s cubic-bezier(.2,.7,.2,1)" }}>Connect with me on LinkedIn</span>
              <span style={{ fontFamily: "var(--sans)", fontSize: 14.5, lineHeight: 1.4, color: soft }}>Stay up to date on my latest research and learnings</span>
            </span>
            <span className="li-ic" style={{ flex: "none", color: "var(--terra)", display: "inline-flex", transition: "transform .3s cubic-bezier(.2,.7,.2,1), color .3s ease" }}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z" />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.RecLabAbout = { About };