// industries/chrome.jsx — Shared chrome + section primitives for /industries pages. // Exports to window: IndNav, IndFooter, IndHero, StatBand, ServiceGrid, HowWeWork, // FeaturedEngagement, Insights, ClientStories, AdvisorStrip, // ClosingCTA, IndustryPage. const INDUSTRIES = [ { slug: "energy", name: "Energy", desc: "Solar, wind, storage, geothermal.", href: "energy" }, { slug: "data-centers", name: "Data centers", desc: "Speed-to-power for AI infrastructure.", href: "data-centers" }, { slug: "real-estate", name: "Commercial real estate", desc: "Project services for owners and investors.", href: "real-estate" }, ]; /* ────────────────────────── HERO ────────────────────────── */ function IndHero({ eyebrow, title, lede, accent, sister }) { // sister: the two other industries to cross-link return (
Industries / {eyebrow}

{title}

{lede}

{/* Sister-industry pills */} {sister && sister.length > 0 && (
Also in industries {sister.map((s) => ( { e.currentTarget.style.color = "var(--fg)"; e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.background = "rgba(229,162,105,0.05)"; }} onMouseLeave={(e) => { e.currentTarget.style.color = "var(--fg-2)"; e.currentTarget.style.borderColor = "var(--border-2)"; e.currentTarget.style.background = "transparent"; }}> {s.name} → ))}
)}
); } /* ────────────────────────── STAT BAND ────────────────────────── */ function StatBand({ items, footnote }) { return (
{items.map(([n, label], i) => (
{n}
{label}
))}
{footnote && (
{footnote}
)}
); } /* ────────────────────────── SERVICE GRID (no-box) ────────────────────────── */ function ServiceCard({ n, title, body, href }) { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: "40px 36px 36px", borderRight: "1px solid var(--border)", borderBottom: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 18, minHeight: 360, position: "relative", background: hover ? "rgba(229,162,105,0.03)" : "transparent", transition: "background .25s ease", color: "var(--fg)", }}>
{n} ⌁
{title}

{body}

Read more →
); } function ServiceGrid({ headline, intro, cards }) { return (

{headline}

{intro}

{cards.map((c, i) => ( ))}
); } /* ────────────────────────── HOW WE WORK ────────────────────────── */ function HowWeWork({ items }) { return (
How we work

Where AI agents end and human judgment begins.

{items.map((it, i) => (
{String(i + 1).padStart(2, "0")}
{it.title}

{it.body}

))}
); } /* ────────────────────────── FEATURED ENGAGEMENT (optional) ────────────────────────── */ function FeaturedEngagement({ eyebrow, title, body, meta }) { return (
{eyebrow} {meta && meta.length > 0 && (
{meta.map(([k, v], i) => (
{k} {v}
))}
)}

{title}

{body}

); } /* ────────────────────────── INSIGHTS ────────────────────────── */ function Insights({ items }) { return (
Insights

From the people doing the work.

All insights →
{items.map((it, i) => (
{it.kicker || "Briefing"}
{it.title}

{it.body}

Read brief → ))}
); } /* ────────────────────────── CLIENT STORIES ────────────────────────── */ function ClientStories({ items, placeholder }) { if (placeholder) { return (
Client stories

{placeholder.headline || "More stories in flight."}

{placeholder.body || "We publish client stories once they\u2019re cleared for share. Want yours featured?"}

Talk to the team →
); } return (
Client stories

Projects we’ve moved forward.

{items.map((it, i) => (
{it.tag || "Featured"}
{it.client}
{it.quote && (

“{it.quote}”

)} {!it.quote && it.body && (

{it.body}

)}
{it.attribution && (
{it.attribution.name}
{[it.attribution.role, it.attribution.org].filter(Boolean).join(" \u00b7 ")}
)}
))}
); } /* ────────────────────────── ADVISOR STRIP ────────────────────────── */ function AdvisorStrip({ advisors }) { return (
Trusted by

Endorsed by operators who’ve built these projects before.

{advisors.map((a, i) => (
{a.photo ? ( {a.name} ) : (
{a.name.split(" ").map((s) => s[0]).slice(0, 2).join("")}
)}
{a.name}
{a.role} {a.org && ( <>
{a.org} )}
))}
); } /* ────────────────────────── CLOSING CTA ────────────────────────── */ function ClosingCTA({ headline, subhead }) { return (

{headline}

); } /* ────────────────────────── FOOTER ────────────────────────── */ function IndFooter() { return ; } /* ────────────────────────── INDUSTRY PAGE COMPOSER ────────────────────────── */ function IndustryPage(props) { const { slug, eyebrow, title, lede, stats, statsFootnote, servicesHeadline, servicesIntro, services, howWeWork, featured, // optional { eyebrow, title, body, meta } insights, clientStories, // { items: [...] } or { placeholder: {...} } advisors, closingHeadline, closingSubhead, } = props; const sister = INDUSTRIES.filter((i) => i.slug !== slug); return ( <>
{featured && }
); } Object.assign(window, { IndNav, IndFooter, IndHero, StatBand, ServiceGrid, ServiceCard, HowWeWork, FeaturedEngagement, Insights, ClientStories, AdvisorStrip, ClosingCTA, IndustryPage, INDUSTRIES, });