// AR Ventures — Careers
// ─────────────────────────────────────────────────────────────────────────────
// A small careers page. Two open roles, written to read like postings from a
// long-tenured private partnership rather than a tech company. No perks list,
// no breathless mission copy.

const { useEffect } = React;

const INITIAL = {
  palette: ["#F7F6F2", "#15171C", "#FCFBF7"],
  accent: "#243A6B",
};

// ── Content ─────────────────────────────────────────────────────────────────

const ROLES = [
  {
    n: "01",
    title: "Acquisitions Associate",
    meta: [
      { k: "Location",    v: "Salt Lake City, UT" },
      { k: "Type",        v: "Full-time" },
      { k: "Team",        v: "Investments" },
      { k: "Reports to",  v: "Director of Acquisitions" },
    ],
    lede: [
      "An Acquisitions Associate works alongside the firm's principals to source, underwrite, and close the distressed and off-market opportunities described in our investment thesis.",
      "The role is hands-on from first screen through closing. You will spend time in spreadsheets, in entitlement hearings, and in markets. We expect a long tenure — three years to learn how we underwrite, and many more to do it well.",
    ],
    will: [
      "Maintain an active pipeline of distressed and off-market opportunities across the firm's seven-state footprint.",
      "Underwrite acquisitions to AR Ventures' standards — basis below replacement, sub-65% occupancy, multi-use suitability.",
      "Coordinate diligence with local operators, counsel, and municipal partners through entitlement.",
      "Present opportunities and recommended structures to the Investment Committee.",
    ],
    look: [
      "Two to four years in real estate investment, investment banking, or principal investing.",
      "Modeled at least ten closed transactions, ideally across more than one product type.",
      "Comfort with entitlement and zoning frameworks — or the appetite to learn them quickly.",
      "Resident in Utah or prepared to relocate. The work is not remote.",
    ],
  },
  {
    n: "02",
    title: "Asset Manager, Western Region",
    meta: [
      { k: "Location",    v: "Salt Lake City, UT" },
      { k: "Type",        v: "Full-time · ~25% travel" },
      { k: "Team",        v: "Portfolio" },
      { k: "Reports to",  v: "Head of Portfolio" },
    ],
    lede: [
      "An Asset Manager oversees post-acquisition value creation across our Western holdings — Utah, California, and Idaho. You partner with local operators to carry stabilization plans and capital projects through to completion.",
      "This is a stewardship role, not a transaction role. The portfolio you manage is one we intend to own for decades; the work is measured in cycles, not quarters.",
    ],
    will: [
      "Manage day-to-day relationships with five to eight local operators across the Western region.",
      "Track stabilization plans against acquisition underwriting; flag variance early.",
      "Lead quarterly capital project reviews and approve discretionary spend.",
      "Report to the Investment Committee on each asset's hold thesis at least twice a year.",
    ],
    look: [
      "Five or more years in asset management, real estate operations, or principal investing.",
      "Direct experience with multifamily, mixed-use, or industrial product — preferably more than one.",
      "Demonstrated patience: a track record of holding plans through soft markets without abandoning them.",
      "Comfort traveling roughly one week a month across the Mountain West and Coast.",
    ],
  },
];

const HIRING_STEPS = [
  { n: "i.",   t: "Introduction",   b: "A short conversation with the hiring partner. Mutual fit, the role, and the firm." },
  { n: "ii.",  t: "Underwriting",   b: "A take-home exercise drawn from a real acquisition or hold plan in our portfolio." },
  { n: "iii.", t: "Committee",      b: "A working session with the Investment Committee. You walk us through your exercise." },
  { n: "iv.",  t: "References",     b: "We speak with three references of your choosing, and offer within the week." },
];

// ── App ─────────────────────────────────────────────────────────────────────

function App() {
  useEffect(() => {
    const root = document.documentElement;
    const [bg, ink, paper] = INITIAL.palette;
    root.style.setProperty("--bg", bg);
    root.style.setProperty("--ink", ink);
    root.style.setProperty("--paper", paper);
    root.style.setProperty("--accent", INITIAL.accent);
  }, []);

  return (
    <>
      <Nav />
      <CareersIntro />
      <OpenRoles />
      <HowWeHire />
      <Footer />
    </>
  );
}

// ── Nav ─────────────────────────────────────────────────────────────────────

function Nav() {
  return (
    <header className="nav">
      <div className="container nav__inner">
        <a className="nav__brand" href="/">
          <span>AR Ventures</span>
          <span className="nav__brand-mark">Est. 1970</span>
        </a>
        <nav className="nav__links" aria-label="Primary">
          <a href="/#approach">Approach</a>
          <a href="/thesis">Thesis</a>
          <a href="/#footprint">Footprint</a>
          <a href="/careers" style={{ color: "var(--ink)" }}>Careers</a>
          <a href="/#inquiry">Inquiries</a>
        </nav>
      </div>
    </header>
  );
}

// ── Intro ───────────────────────────────────────────────────────────────────

function CareersIntro() {
  return (
    <section className="container careers-intro">
      <div className="careers-intro__crumb eyebrow">
        <a href="/">AR Ventures</a>
        <span className="sep">/</span>
        <span>Careers</span>
      </div>

      <h1 className="careers-intro__head">
        Long <em>tenures</em>, by design.
      </h1>

      <div className="careers-intro__grid">
        <span className="careers-intro__eye">On Working Here</span>
        <div className="careers-intro__body">
          <p>
            AR Ventures has grown slowly and deliberately since 1970. Our team
            is small — fewer than thirty professionals across the firm — and
            we hire for tenures measured in decades, not years.
          </p>
          <p>
            The work is patient, transactional only when it has to be, and
            deeply local. We expect rigor, partnership with our operators,
            and the temperament to hold a thesis through a cycle.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Open roles ──────────────────────────────────────────────────────────────

function OpenRoles() {
  return (
    <section className="roles-band" id="roles">
      <div className="container">
        <div className="roles-band__head">
          <span className="eyebrow">— Open Roles</span>
          <span className="roles-band__count">{String(ROLES.length).padStart(2, "0")} positions</span>
        </div>

        {ROLES.map((r) => <Role key={r.n} role={r} />)}
      </div>
    </section>
  );
}

function Role({ role }) {
  return (
    <article className="role" id={`role-${role.n}`}>
      <header className="role__head">
        <span className="role__num">— {role.n}</span>
        <h2 className="role__title">{role.title}</h2>
      </header>

      <div className="role__meta">
        {role.meta.map((m) => (
          <div className="role__meta-item" key={m.k}>
            <span className="role__meta-k">{m.k}</span>
            <span className="role__meta-v">{m.v}</span>
          </div>
        ))}
      </div>

      <div className="role__body">
        <span className="role__body-l">About the Role</span>
        <div>
          {role.lede.map((p, i) => <p className="role__lede" key={i}>{p}</p>)}
        </div>
      </div>

      <div className="role__sub">
        <div>
          <h3>What you'll do</h3>
          <ul className="role__list">
            {role.will.map((x, i) => <li key={i}>{x}</li>)}
          </ul>
        </div>
        <div>
          <h3>What we look for</h3>
          <ul className="role__list">
            {role.look.map((x, i) => <li key={i}>{x}</li>)}
          </ul>
        </div>
      </div>

      <a className="role__apply"
         href={`mailto:careers@arventures.com?subject=${encodeURIComponent(role.title)}`}>
        Apply → careers@arventures.com
      </a>
    </article>
  );
}

// ── How we hire ─────────────────────────────────────────────────────────────

function HowWeHire() {
  return (
    <section className="container how-we-hire" id="how-we-hire">
      <header className="sec-head">
        <div className="sec-head__eyebrow">
          <span className="sec-head__num">— Process</span>
          <span className="eyebrow">How We Hire</span>
        </div>
        <h2 className="how-we-hire__head">
          Four <em>steps</em>. Four weeks, give or take.
        </h2>
      </header>

      <div className="how-we-hire__steps">
        {HIRING_STEPS.map((s) => (
          <article className="hwh-step" key={s.n}>
            <div className="hwh-step__n">{s.n}</div>
            <h3 className="hwh-step__t serif">{s.t}</h3>
            <p className="hwh-step__b">{s.b}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="foot">
      <div className="container foot__inner">
        <span className="foot__brand">AR Ventures · MCMLXX</span>
        <span>Careers · 2026</span>
      </div>
    </footer>
  );
}

// ── Mount ───────────────────────────────────────────────────────────────────

ReactDOM.createRoot(document.getElementById("root")).render(<App />);