// industries/real-estate.jsx — /industries/real-estate
// Custom page (mirrors data-centers + energy structure). Uses IndNav + IndFooter from chrome.jsx.

/* ───────────────────────────── HERO ───────────────────────────── */
function ReHero() {
  return (
    <section
      data-screen-label="01 Hero"
      style={{
        position: "relative",
        minHeight: "92vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end",
        paddingBottom: "10vh",
        overflow: "hidden",
        borderBottom: "1px solid var(--border)",
      }}>
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <image-slot
          id="re-hero-bg"
          src="../assets/re-hero.jpg"
          shape="rect"
          placeholder="Real estate \u2014 high-rise construction / glass tower at twilight / urban skyline"
          style={{ display: "block", width: "100%", height: "100%" }}
        />
        <div
          aria-hidden
          style={{
            position: "absolute", inset: 0,
            background:
              "linear-gradient(180deg, rgba(10,14,24,0.55) 0%, rgba(10,14,24,0.15) 30%, rgba(10,14,24,0.55) 60%, rgba(10,14,24,0.92) 100%)",
          }} />
        <div
          aria-hidden
          style={{
            position: "absolute", inset: 0,
            background:
              "radial-gradient(58% 50% at 92% 6%, rgba(229,162,105,0.22) 0%, transparent 55%)," +
              "radial-gradient(60% 50% at 0% 18%, rgba(40,60,100,0.22) 0%, transparent 55%)",
            pointerEvents: "none",
          }} />
      </div>

      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 22, flexWrap: "wrap" }}>
          <span className="eyebrow-accent">Industries</span>
          <span className="mono" style={{ color: "var(--fg-3)" }}>/</span>
          <span className="eyebrow" style={{ color: "var(--fg-2)" }}>Real estate</span>
        </div>
        <h1 className="display display-hero" style={{
          letterSpacing: "-0.025em",
          margin: 0,
          maxWidth: 1180,
        }}>
          Integrated project services<br/>for real estate.
        </h1>
        <p className="lede-lg" style={{
          marginTop: 36, maxWidth: 820,
          color: "rgba(237,231,218,0.86)",
        }}>
          BuildQ replaces the fragmented owner-side stack across diligence, development, construction, financing, recapitalization, and exit with one senior team, run on AI-native software.
        </p>
        <div style={{ marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap" }}>
          <a href="../contact" className="btn">
            Talk to the team
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────── 02 — OPERATING MODEL ──────────────────── */
function ReOperatingModel() {
  const cols = [
    {
      n: "01",
      label: "Project record",
      title: "One live source of truth, continuously monitored.",
      body: (
        <>
          <p style={{ margin: 0 }}>
            Project OS ingests and reconciles every document, budget, schedule, contract, draw, and decision. AI agents flag gaps, conflicts, budget movement, schedule risk, and critical-path blockers across diligence, development, construction, financing, and exit.
          </p>
        </>
      ),
    },
    {
      n: "02",
      label: "Senior judgment",
      title: "Experienced specialists turn signals into strategy.",
      body: (
        <>
          <p style={{ margin: 0 }}>
            Each engagement is led by senior specialists across development management, project controls, construction oversight, and capital markets. They review the signals, clarify tradeoffs, and guide strategy tied to investment outcomes&mdash;not a vendor marketplace, not a software layer handed to your team.
          </p>
        </>
      ),
    },
    {
      n: "03",
      label: "Delivery",
      title: "The right specialists and ecosystem, coordinated through one accountable team.",
      body: (
        <>
          <p style={{ margin: 0 }}>
            BuildQ brings in outside expertise&mdash;legal, design, cost, entitlement, environmental&mdash;and taps a vetted network of capital providers, financiers, and independent engineers, coordinating the work end to end. You get specialist depth and network reach without fragmented accountability: one project record, one decision process, one team accountable to the outcome.
          </p>
        </>
      ),
    },
  ];

  return (
    <section data-screen-label="02 Operating model" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <span className="eyebrow">Operating model</span>
          <h2 className="display display-2 h-section">
            Project record &rarr; Senior judgment &rarr; Delivery.
          </h2>
          <p className="lede" style={{ marginTop: 26, maxWidth: 720 }}>
            Real estate projects have hundreds of moving parts. BuildQ organizes them around one live project record, monitored by AI and led by senior specialists, so strategy stays tied to current facts and investment outcomes.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--border-strong)",
          borderLeft: "1px solid var(--border)",
        }}>
          {cols.map((c) => (
            <div key={c.n} style={{
              padding: "40px 36px 44px",
              borderRight: "1px solid var(--border)",
              borderBottom: "1px solid var(--border)",
              display: "flex", flexDirection: "column", gap: 20,
              minHeight: 360,
            }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                <span className="eyebrow" style={{ color: "var(--accent)" }}>{c.n}</span>
                <span className="eyebrow">{c.label}</span>
              </div>
              <div className="display display-5" style={{ letterSpacing: "-0.01em", lineHeight: 1.22 }}>
                {c.title}
              </div>
              <div className="body-sm" style={{ margin: 0 }}>
                {c.body}
              </div>
              {c.callout && (
                <div className="body-sm serif" style={{
                  marginTop: 4, paddingTop: 16,
                  borderTop: "1px solid var(--border)",
                  lineHeight: 1.45,
                  letterSpacing: "-0.005em",
                }}>
                  {c.callout}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────── 03 — SERVICES ──────────────────── */
const RE_SERVICES = [
  {
    n: "01",
    headline: "Site selection and acquisition diligence.",
    body: "Pre-acquisition technical and commercial review of candidate sites and assets, including title, survey, environmental, zoning, entitlement, and infrastructure risk, packaged for IC and lender review.",
  },
  {
    n: "02",
    headline: "Development management.",
    body: "End-to-end execution of the development phase, including entitlements, design management, permitting, pre-construction planning, GMP process management, and groundbreaking readiness.",
  },
  {
    n: "03",
    headline: "Owner’s representation.",
    body: "Owner-side advocacy across architects, engineers, contractors, counsel, lenders, and consultants, keeping the owner’s priorities at the center of project decisions.",
  },
  {
    n: "04",
    headline: "Project controls.",
    body: "Schedule, budget, risk, change management, critical-path tracking, budget forecasting, risk register maintenance, and executive reporting from one live source.",
  },
  {
    n: "05",
    headline: "Construction phase management.",
    body: "EPC and GC contract review, schedule oversight, contractor performance management, change order review, commissioning oversight, and substantial completion coordination.",
  },
  {
    n: "06",
    headline: "Financing readiness.",
    body: "Financial model review, diligence preparation, data room buildout, lender package preparation, and project documentation organized for bankability.",
  },
  {
    n: "07",
    headline: "Investment advisory.",
    body: "Sell-side and buy-side advisory for individual assets and portfolios, including process design, data room management, buyer or target qualification, diligence coordination, and closing support.",
  },
  {
    n: "08",
    headline: "Debt placement and refinancing.",
    body: "Construction, bridge, and term debt placement; recapitalization and refinancing support; capital structure design; lender outreach; and closing coordination.",
  },
];

function ReServiceCard({ s }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "column", gap: 16,
        padding: "28px 28px 26px",
        border: `1px solid ${hover ? "var(--border-strong)" : "var(--border-2)"}`,
        borderRadius: 6,
        background: hover ? "var(--bg-2)" : "transparent",
        transition: "border-color .25s ease, background .25s ease, transform .25s ease, opacity .72s cubic-bezier(0.22, 1, 0.36, 1), filter .72s cubic-bezier(0.22, 1, 0.36, 1)",
        transform: hover ? "translateY(-2px)" : "none",
        minHeight: 280,
      }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
        <span className="stat-num stat-num-md">{s.n}</span>
      </div>
      <h3 className="display display-6" style={{
        margin: 0,
        letterSpacing: "-0.005em", lineHeight: 1.25,
      }}>
        {s.headline}
      </h3>
      <p className="body-xs" style={{ margin: 0 }}>
        {s.body}
      </p>
    </article>
  );
}

function ReServices() {
  return (
    <section data-screen-label="03 Services">
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <span className="eyebrow">Services</span>
          <h2 className="display display-2 h-section" style={{ maxWidth: 920 }}>
            Execution across the full investment lifecycle.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 20,
        }}>
          {RE_SERVICES.map((s) => <ReServiceCard key={s.n} s={s} />)}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────── 04 — WHO WE WORK WITH ──────────────────── */
function ReWhoWeWorkWith() {
  const chips = ["Developers", "Owners", "Operators", "Institutional investors", "Lenders"];
  return (
    <section data-screen-label="04 Who we work with" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 48 }}>
          <span className="eyebrow">Who we work with</span>
          <h2 className="display display-2 h-section" style={{ maxWidth: 1000 }}>
            For projects where execution risk is investment risk.
          </h2>
        </div>
        <div style={{
          display: "flex", flexWrap: "wrap", gap: 12,
        }}>
          {chips.map((c) => (
            <span key={c} style={{
              display: "inline-flex", alignItems: "center",
              padding: "12px 22px",
              border: "1px solid var(--border-strong)",
              borderRadius: 999,
              background: "rgba(229,162,105,0.04)",
            }}>
              <span className="eyebrow" style={{ color: "var(--fg)" }}>{c}</span>
            </span>
          ))}
        </div>
        <p className="lede" style={{ marginTop: 36, maxWidth: 1000 }}>
          BuildQ works with the institutions and operators responsible for capital-intensive real estate and infrastructure.
          Whether you are developing a single asset, recapitalizing a partnership, financing a project, or managing a portfolio in motion,
          BuildQ provides one accountable team from acquisition through exit.
        </p>
        <div style={{ marginTop: 36 }}>
          <a href="../contact" className="btn">
            Talk to the team
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────── APP ──────────────────── */
function App() {
  return (
    <>
      <main>
        <ReHero />
        <ReOperatingModel />
        <ReServices />
        <ReWhoWeWorkWith />
      </main>
      <IndFooter />
    </>
  );
}

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