// industries/data-centers.jsx — /industries/data-centers
// Custom page (does not use IndustryPage composer). Uses IndNav + IndFooter from chrome.jsx.

/* ───────────────────────────── HERO ───────────────────────────── */
function DcHero() {
  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)",
      }}>
      {/* Background image */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <image-slot
          id="dc-hero-bg"
          src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?fm=jpg&q=80&w=2400&auto=format&fit=crop"
          shape="rect"
          placeholder="Data center hall \u2014 server racks / cold-aisle perspective"
          style={{ display: "block", width: "100%", height: "100%" }}
        />
        {/* Cinematic darkening scrim — bottom-heavy for text legibility */}
        <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%)",
          }} />
        {/* Warm accent wash from upper-right */}
        <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>

      {/* Content */}
      <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)" }}>Data centers</span>
        </div>
        <h1 className="display display-hero" style={{
          letterSpacing: "-0.025em",
          margin: 0,
          maxWidth: 1180,
        }}>
          Speed-to-power<br/>for AI infrastructure.
        </h1>
        <p className="lede-lg" style={{
          marginTop: 36, maxWidth: 820,
          color: "rgba(237,231,218,0.86)",
        }}>
          BuildQ replaces the fragmented stack of development managers,
          transaction advisors, and capital markets boutiques with a single integrated engagement,
          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 — DIFFERENTIATION TABLE ──────────────────── */
function Differentiation() {
  const rows = [
    { dim: "Vendors",            trad: "8+ separate firms",                                             bq: "One integrated team" },
    { dim: "Pricing model",      trad: "Deal-by-deal, hourly, success fees",                            bq: "Priced against the services budget" },
    { dim: "Accountability",     trad: "Integration is your problem",                                   bq: "The integrator is the vendor" },
    { dim: "Diligence timeline", trad: "Months",                                                        bq: "Weeks" },
    { dim: "Source of truth",    trad: "Scattered \u2014 PDFs, drives, inboxes, shared trackers",       bq: "The project record" },
    { dim: "Scaling cost",       trad: "Linear with deal count \u2014 more invoices per project",       bq: "Sublinear \u2014 platform amortizes across the pipeline" },
  ];

  return (
    <section data-screen-label="02 Differentiation">
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 820 }}>
          <span className="eyebrow">The model</span>
          <h2 className="display display-2 h-section">
            One engagement. One budget.<br/>One accountable team.
          </h2>
          <p className="body-lg muted" style={{ marginTop: 22, maxWidth: 640 }}>
            How a BuildQ engagement compares to the traditional services stack &mdash;
            row by row, on the dimensions that actually move the project.
          </p>
        </div>

        {/* Comparison header */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(180px, 220px) minmax(0, 1fr) minmax(0, 1fr)",
          borderTop: "1px solid var(--border-strong)",
          borderBottom: "1px solid var(--border)",
          padding: "18px 0",
          alignItems: "baseline",
        }}>
          <span className="eyebrow">Dimension</span>
          <div style={{ paddingLeft: 24 }}>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Traditional stack</div>
            <div className="body-mini muted">Owner&rsquo;s reps · DMs · M&amp;A advisors · capital markets boutiques</div>
          </div>
          <div style={{ paddingLeft: 24 }}>
            <div className="mono cap" style={{ color: "var(--accent)", letterSpacing: "0.14em", fontSize: 11, marginBottom: 4 }}>
              BuildQ
            </div>
            <div style={{ fontSize: 12, color: "var(--fg-2)" }}>One integrated team on Project OS</div>
          </div>
        </div>

        {rows.map((r, i) => (
          <div key={r.dim} style={{
            display: "grid",
            gridTemplateColumns: "minmax(180px, 220px) minmax(0, 1fr) minmax(0, 1fr)",
            borderBottom: "1px solid var(--border)",
            padding: "26px 0",
            alignItems: "start",
          }}>
            <div className="num-serif" style={{
              fontSize: 18, letterSpacing: "-0.005em",
              color: "var(--fg)", paddingRight: 16,
            }}>
              {r.dim}
            </div>
            <div className="body dim" style={{ paddingLeft: 24, paddingRight: 16, lineHeight: 1.55 }}>
              {r.trad}
            </div>
            <div className="body body-strong" style={{
              paddingLeft: 24, paddingRight: 16, lineHeight: 1.55,
              borderLeft: "1px solid var(--border)",
            }}>
              {r.bq}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ──────────────────── 03 — OPERATING MODEL ──────────────────── */
function OperatingModel() {
  const cols = [
    {
      n: "01",
      label: "Data",
      title: "Project status, analyzed.",
      body: "Ingests every document, schedule, contract, and decision; surfaces what's real, what changed, what's missing, and what controls the critical path. Gives the team 10× leverage on every workstream.",
    },
    {
      n: "02",
      label: "Decisions",
      title: "Senior specialists who own every engagement.",
      body: "One team end-to-end \u2014 development, transaction, capital markets, project execution. Not eight invoicing firms with no shared accountability.",
    },
    {
      n: "03",
      label: "Delivery",
      title: "A curated bench, mobilized when needed.",
      body: "Legal, engineering, and capital specialists brought in when a project hits a blocker outside our in-house surface. We coordinate; you get the outcome.",
    },
  ];

  return (
    <section data-screen-label="03 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">
            Data &rarr; Decisions &rarr; Delivery.
          </h2>
          <p className="lede" style={{ marginTop: 26, maxWidth: 720 }}>
            Speed-to-power depends on coordination across land, utility, interconnection, permitting, capital, and construction. BuildQ manages those workstreams through one AI-native services engagement, replacing fragmented handoffs with a live project record and one accountable team.
          </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>
              <p className="body-sm" style={{ margin: 0 }}>
                {c.body}
              </p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

/* ──────────────────── 04 — FOUR AREAS ──────────────────── */
const AREAS = [
  {
    n: "01",
    slotId: "dc-service-land",
    src: "https://images.unsplash.com/photo-1544632256-8276d9aee3ed?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Aerial / landscape \u2014 powered land, large flat site, transmission visible",
    headline: "Land and site readiness.",
    scope: "Powered land sourcing, site acquisition diligence, development documentation, site control verification.",
    body: "We run RFPs across a 300+ project developer network and validate sites against utility, permitting, equipment, and infrastructure constraints.",
    tags: ["300+ developer network", "Site-control verification"],
  },
  {
    n: "02",
    slotId: "dc-service-power",
    src: "https://images.unsplash.com/photo-1693013112835-5f3128bb555f?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Power infrastructure \u2014 substation, transformer yard, or transmission lines",
    headline: "Power and infrastructure development.",
    scope: "Developer coordination, EPC management, interconnection process, utility coordination across ISOs.",
    body: "We carry working relationships with utilities, independent engineers, and permitting specialists across major ISO footprints.",
    tags: ["Multi-ISO relationships", "IE network"],
  },
  {
    n: "03",
    slotId: "dc-service-capital",
    src: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Capital markets \u2014 financial district skyline, deal room, or signed term sheet detail",
    headline: "Project finance and capital markets.",
    scope: "Diligence package preparation, lender process management, debt placement, SPV-level capital structure, refinancing.",
    body: "We build the data room as a byproduct of running the project \u2014 so when capital arrives, the package is ready.",
    tags: ["Lender-ready by default", "SPV-level support"],
  },
  {
    n: "04",
    slotId: "dc-service-execution",
    src: "https://images.unsplash.com/photo-1695668548342-c0c1ad479aee?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Data center cabinet / server hall interior \u2014 cold-aisle perspective preferred",
    headline: "Project execution.",
    scope: "Document intelligence, source-linked records, schedule and risk management, milestone tracking, board and lender reporting.",
    body: "Project OS ingests every document, schedule, contract, and decision and surfaces what's real, what changed, what's missing, and what controls the critical path.",
    tags: ["Project OS", "One source of truth"],
  },
];

function ServiceCard({ area }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "column",
        border: `1px solid ${hover ? "var(--border-strong)" : "var(--border-2)"}`,
        borderRadius: 6,
        overflow: "hidden",
        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",
      }}>
      {/* Image */}
      <div style={{ position: "relative", borderBottom: "1px solid var(--border-2)" }}>
        <image-slot
          id={area.slotId}
          src={area.src}
          shape="rect"
          placeholder={area.placeholder}
          style={{ display: "block", width: "100%", aspectRatio: "16/10", background: "var(--surface)" }}
        />
      </div>

      {/* Content */}
      <div style={{
        padding: "32px 32px 28px",
        display: "flex", flexDirection: "column", gap: 16,
        flex: 1,
      }}>
        <h3 className="display display-4" style={{
          margin: 0,
          letterSpacing: "-0.01em",
          lineHeight: 1.2,
        }}>
          {area.headline}
        </h3>
        <p className="lede" style={{ color: "var(--fg)" }}>
          {area.body}
        </p>
        <p className="body-sm dim" style={{ margin: 0, lineHeight: 1.55 }}>
          {area.scope}
        </p>
        <div style={{ flex: 1 }} />
        <p className="eyebrow" style={{ color: "var(--accent)", margin: 0, paddingTop: 28 }}>
          {area.tags.join(", ")}
        </p>
      </div>
    </article>
  );
}

function FourAreas() {
  return (
    <section data-screen-label="04 Services">
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <span className="eyebrow">Services</span>
          <h2 className="display display-2 h-section" style={{ maxWidth: 920 }}>
            The workstreams behind speed-to-power.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 24,
        }}>
          {AREAS.map((a) => <ServiceCard key={a.n} area={a} />)}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────── 05 — VOICES ──────────────────── */
const DC_VOICES = [
  {
    id: "tomasik",
    quote: "The bottleneck for AI growth isn\u2019t chips or models \u2014 it\u2019s power. And the bottleneck for power is the development and deal-making that has to happen before a single megawatt comes online. BuildQ compresses that timeline in a way nothing else does.",
    name: "Piotr Tomasik",
    role: "Co-Founder & President",
    org: "TensorWave",
    photo: "../assets/headshots/tomasik.jpg",
  },
  {
    id: "goldberg",
    hidden: true,
    quote: "I\u2019ve worked on some of the most complex tax and project financing transactions in the market, and one consistent challenge is the burden created by disconnected information and manual coordination. BuildQ is one of the few software solutions I\u2019ve seen approach this problem with the rigor and credibility it demands.",
    name: "Fred T. Goldberg, Jr.",
    role: "Former IRS Commissioner",
    org: "Of Counsel, Skadden",
    photo: null,
  },
  {
    id: "rockers",
    quote: "In capital markets, the deals that close fastest are the ones where the underlying project data and documentation are clean, complete, and traceable. BuildQ is the first platform I\u2019ve seen that turns that information into a real source of truth for capital providers, counsel, and developers as transactions progress.",
    name: "Chris Rockers",
    role: "Managing Director",
    org: "Height Capital Markets",
    photo: "../assets/headshots/rockers.jpg",
  },
  {
    id: "brooks",
    quote: "Developers and EPCs face the same challenge on nearly every project: keeping teams, documents, and workflows aligned. BuildQ is built for that problem, and it\u2019s exactly the kind of solution this industry needs.",
    name: "Chris Brooks",
    role: "VP Preconstruction",
    org: "PENTA Building Group",
    photo: "../assets/headshots/brooks.jpg",
  },
];

function DcFeaturedVoice({ v }) {
  return (
    <figure className="quote-portrait">
      <div className="quote-portrait__image">
        <img src={v.photo} alt={v.name} />
      </div>
      <div>
        <blockquote className="quote-portrait__body">
          <span className="quote-mark">&ldquo;</span>
          {v.quote}
          <span className="quote-mark">&rdquo;</span>
        </blockquote>
        <figcaption className="quote-portrait__caption">
          <div>
            <div className="quote-portrait__name">{v.name}</div>
            <div className="quote-portrait__role">{v.role} &middot; {v.org}</div>
          </div>
        </figcaption>
      </div>
    </figure>
  );
}

function DcVoiceCard({ v }) {
  return (
    <figure className="quote-card">
      <div className="quote-card__glyph" aria-hidden>{"\u201C"}</div>
      <blockquote className="quote-card__body">{v.quote}</blockquote>
      <figcaption className="quote-card__attribution">
        {v.photo && (
          <div className="quote-card__avatar">
            <img src={v.photo} alt={v.name} />
          </div>
        )}
        <div className="quote-card__meta">
          <div className="quote-card__name">{v.name}</div>
          <div className="quote-card__role">{v.role} &middot; {v.org}</div>
        </div>
      </figcaption>
    </figure>
  );
}

function DcVoices() {
  const featured = DC_VOICES[0];
  const others = DC_VOICES.slice(1).filter(v => !v.hidden);
  return (
    <section data-screen-label="05 Voices">
      <div className="wrap">
        <DcFeaturedVoice v={featured} />
        <div className="quote-card-grid" style={{ marginTop: 80, alignItems: "stretch" }}>
          {others.map(v => (
            <DcVoiceCard key={v.id} v={v} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────── 06 — WHO WE WORK WITH ──────────────────── */
function WhoWeWorkWith() {
  const chips = ["Developers", "Operators", "Owners", "Investors", "Lenders"];
  return (
    <section data-screen-label="05 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 }}>
            Built for the stakeholders behind AI infrastructure.
          </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 }}>
          Whether you&rsquo;re acquiring powered land, raising project debt, executing a build,
          or monitoring a portfolio &mdash; you buy the outcome from one team.
        </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>
        <DcHero />
        <OperatingModel />
        <FourAreas />
        <DcVoices />
        <WhoWeWorkWith />
      </main>
      <IndFooter />
    </>
  );
}

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