// AR Ventures — Investment Thesis page
// ─────────────────────────────────────────────────────────────────────────────
// Reads as a document, not a brochure. The thesis is straightforward: real
// estate becomes distressed when its purpose expires, and AR Ventures
// acquires on the first and rebuilds for the second.
//
// This page shares styles.css with the main site so the palette/accent stay
// in lockstep. It does NOT include the Tweaks panel — the thesis is a
// fixed presentation; users adjust visuals on the main site.

const { useEffect } = React;

// Initial theme — matches the main site's default. If the user has tweaked
// the homepage in this session, this page won't pick that up (separate
// document, separate state). Keeping defaults wired here so the page is
// self-sufficient on direct visit.
const INITIAL = {
  palette: ["#F7F6F2", "#15171C", "#FCFBF7"],
  accent: "#243A6B",
};

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

const CRITERIA = [
  { n: "01", k: "Basis",         b: "Acquired below 60% of replacement cost, before transformation capex." },
  { n: "02", k: "Occupancy",     b: "Sub-65% physical occupancy — the seller's expectations are already reset." },
  { n: "03", k: "Adjacency",     b: "Within one mile of a corridor showing population or employment growth." },
  { n: "04", k: "Bone",          b: "Floor plates, ceiling heights, and parking ratios that accommodate a residential or retail overlay without demolition." },
  { n: "05", k: "Operator",      b: "A local sponsor with meaningful equity who has lived through a cycle in this market." },
];

const FRAMEWORK = [
  {
    n: "i.",
    t: "Underwrite the bone.",
    b: "We separate the building's permanent attributes — location, structure, entitlement runway — from its current use. The permanent attributes are the basis of our underwriting. The current use is incidental.",
  },
  {
    n: "ii.",
    t: "Re-entitle for multi-use.",
    b: "Most of our acquisitions require a municipal partnership to permit residential, retail, and workspace on a parcel that was zoned for a single purpose. We spend the first twelve to eighteen months in entitlement, not construction.",
  },
  {
    n: "iii.",
    t: "Stabilize income first.",
    b: "Before discretionary capital is committed, we stabilize whatever cash flow the asset has. Stabilized income shifts the risk profile, lowers our cost of capital, and gives us optionality on construction timing.",
  },
  {
    n: "iv.",
    t: "Hold.",
    b: "Mixed-use, fully stabilized assets are not the inventory we sell. They are the inventory we keep. Generational ownership is the point — not a step toward an exit.",
  },
];

// ── 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 />
      <ThesisHero />
      <Opportunity />
      <Criteria />
      <Framework />
      <PullQuote />
      <WhyMultiUse />
      <Outcome />
      <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" style={{ color: "var(--ink)" }}>Thesis</a>
          <a href="/#footprint">Footprint</a>
          <a href="/careers">Careers</a>
          <a href="/#inquiry">Inquiries</a>
        </nav>
      </div>
    </header>
  );
}

// ── Page hero ───────────────────────────────────────────────────────────────

function ThesisHero() {
  return (
    <section className="container thesis-hero">
      <div className="thesis-hero__crumb eyebrow">
        <a href="/">AR Ventures</a>
        <span className="sep">/</span>
        <span>Investment Thesis</span>
      </div>

      <h1 className="thesis-hero__head">
        Distressed in.<br/><em>Durable</em> out.
      </h1>

      <div className="thesis-hero__lead-grid">
        <span className="thesis-hero__lead-eye">The Thesis</span>
        <p className="thesis-hero__lead-body">
          Real estate becomes distressed when its <em>purpose</em> expires —
          not when its location, its structure, or its community does. AR
          Ventures acquires on the first, and rebuilds for the second.
        </p>
      </div>
    </section>
  );
}

// ── Section 01 — The opportunity ────────────────────────────────────────────

function Opportunity() {
  return (
    <section className="container t-sec">
      <header className="t-sec__crown">
        <div className="t-sec__eye">
          <span className="t-sec__num">— 01</span>
          <span className="eyebrow">The Opportunity</span>
        </div>
        <h2 className="t-sec__title">
          Most distress is a problem of <em>purpose</em>, not of brick.
        </h2>
      </header>

      <div className="t-sec__body">
        <span className="t-sec__body-l">Premise</span>
        <div className="t-sec__body-r">
          <p>
            For more than fifty years, capital cycles have produced the same
            pattern. A building type is overbuilt for a single use. Demand
            softens. Once-cash-flowing assets trade below their replacement
            cost — sometimes well below.
          </p>
          <p>
            The basis becomes attractive long before the asset is. Our work
            begins where most investors stop: at the question of what the
            building should become.
          </p>
          <p>
            We do not consider this a contrarian view. We consider it the only
            view that respects what a property actually is — a permanent
            position in a place, separable from whatever it happens to be
            doing at the moment of acquisition.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Section 02 — Criteria ───────────────────────────────────────────────────

function Criteria() {
  return (
    <section className="container t-sec">
      <header className="t-sec__crown">
        <div className="t-sec__eye">
          <span className="t-sec__num">— 02</span>
          <span className="eyebrow">What We Acquire</span>
        </div>
        <h2 className="t-sec__title">
          Five criteria. We pass on anything that fails one.
        </h2>
      </header>

      <div className="criteria">
        {CRITERIA.map((c) => (
          <article className="crit" key={c.n}>
            <div className="crit__n">{c.n}</div>
            <div className="crit__k">{c.k}</div>
            <p className="crit__b">{c.b}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Section 03 — Framework ──────────────────────────────────────────────────

function Framework() {
  return (
    <section className="container t-sec">
      <header className="t-sec__crown">
        <div className="t-sec__eye">
          <span className="t-sec__num">— 03</span>
          <span className="eyebrow">The Framework</span>
        </div>
        <h2 className="t-sec__title">
          From single-use to multi-use, in <em>four</em> moves.
        </h2>
      </header>

      <div className="frame">
        {FRAMEWORK.map((f) => (
          <div className="frame__row" key={f.n}>
            <div className="frame__rn serif">{f.n}</div>
            <h3 className="frame__rt">{f.t}</h3>
            <p className="frame__rb">{f.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Pull quote ──────────────────────────────────────────────────────────────

function PullQuote() {
  return (
    <section className="pull">
      <div className="container pull__inner">
        <span className="pull__mark">“</span>
        <div>
          <p className="pull__q">
            A mixed-use asset is a <em>portfolio</em> in miniature. The
            strongest hedges are the ones inside the property line.
          </p>
          <div className="pull__attr">AR Ventures · Investment Committee</div>
        </div>
        <span />
      </div>
    </section>
  );
}

// ── Section 04 — Why multi-use ──────────────────────────────────────────────

function WhyMultiUse() {
  return (
    <section className="container t-sec">
      <header className="t-sec__crown">
        <div className="t-sec__eye">
          <span className="t-sec__num">— 04</span>
          <span className="eyebrow">Why Multi-Use</span>
        </div>
        <h2 className="t-sec__title">
          Diversification, built into the floor plan.
        </h2>
      </header>

      <div className="t-sec__body">
        <span className="t-sec__body-l">Rationale</span>
        <div className="t-sec__body-r">
          <p>
            A single-use property exposes its owner to a single demand curve.
            When that curve bends — as it has for suburban office, for
            big-box retail, for half-built condominium projects — the entire
            asset bends with it.
          </p>
          <p>
            A mixed-use property does not. Residential income smooths retail
            vacancy. Ground-floor commercial subsidizes residential capex.
            Workspace floors can trade between tenant classes as the market
            for each shifts. The hedges aren't financial — they're physical,
            and they are present on day one of ownership.
          </p>
          <p>
            Multi-use is also the configuration that municipalities now
            reward. Density, walkability, and ground-level activation are
            entitlement-positive in nearly every market we operate in. The
            cycle has bent toward us.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Outcome ─────────────────────────────────────────────────────────────────

function Outcome() {
  return (
    <section className="container outcome">
      <span className="eyebrow" style={{ display: "block", marginBottom: 24 }}>— 05 · Outcome</span>
      <h2 className="outcome__head serif">
        We leave each market with <em>more</em> than we found.
      </h2>
      <p className="outcome__body">
        A property that produces income for a generation. A neighborhood
        denser, more walkable, and more economically resilient than the one
        we acquired into. Capital that compounds in place rather than
        churning through it. The arithmetic of patient ownership is not
        complicated — but it requires discipline at the moment of acquisition
        and conviction at every step that follows.
      </p>
      <a className="outcome__cta" href="/#inquiry">
        Inquiries → investors@arventures.com
      </a>
    </section>
  );
}

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

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

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

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