// app.jsx — BuildQ homepage shell + remaining sections + Tweaks wiring.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "midnight",
  "typePairing": "editorial",
  "density": "regular",
  "heroMotion": "subtle",
  "defaultLayer": "01",
  "showGrid": false
} /*EDITMODE-END*/;

const PALETTE_LABELS = {
  midnight: "Midnight + amber",
  slate: "Slate + steel",
  bone: "Bone + rust",
  forest: "Forest + copper"
};
const TYPE_LABELS = {
  editorial: "Editorial serif",
  modern: "Modern serif",
  grotesque: "All grotesque"
};

/* ────────────────────────── NAV ────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        padding: scrolled ? "14px 0" : "22px 0",
        background: scrolled ? "rgba(10, 14, 24, 0.7)" : "transparent",
        backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
        transition: "all .35s ease"
      }}>
      
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <a href="#top" style={{ display: "inline-flex", alignItems: "center", height: 36 }}>
          <img
            src={window.__resources && window.__resources.logoWhite || "assets/buildq-logo-white.png"}
            alt="BuildQ"
            style={{ height: 36, width: "auto", display: "block" }} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 32, fontSize: 14, whiteSpace: "nowrap" }}>
          <IndustriesMenu prefix="industries/" />
<a href="company" className="muted">Company</a>
          <a href="security" className="muted">Security</a>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <a href="https://app.buildq.ai/login" className="btn btn-ghost" style={{ padding: "10px 18px", fontSize: 13 }}>
              Log in
            </a>
            <a href="contact" className="btn btn-accent" style={{ padding: "10px 18px", fontSize: 13 }}>
              Get Started
              <span className="arrow" aria-hidden>→</span>
            </a>
          </div>
        </div>
      </div>
    </nav>);

}

/* Solutions hover-dropdown menu — used in nav across all pages.
   `prefix` is the relative path to the solutions/ folder from the page using it. */
function SolutionsMenu({ prefix = "solutions/", active = false }) {
  const [open, setOpen] = React.useState(false);
  const closeTimer = React.useRef(null);

  const onEnter = () => {
    clearTimeout(closeTimer.current);
    setOpen(true);
  };
  const onLeave = () => {
    closeTimer.current = setTimeout(() => setOpen(false), 120);
  };

  const STAGES = [
  { n: "01", name: "Origination", desc: "Find the deals and sites worth pursuing.", href: `${prefix}origination` },
  { n: "02", name: "Diligence", desc: "Get to a decision faster.", href: `${prefix}diligence` },
  { n: "03", name: "Development", desc: "Stay ahead of every milestone.", href: `${prefix}development` },
  { n: "04", name: "Financing", desc: "Make the project financeable.", href: `${prefix}financing` },
  { n: "05", name: "Delivery", desc: "Get it built. Get it operating.", href: `${prefix}delivery` }];


  return (
    <div
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
      <a
        href={`/`}
        className="muted"
        style={{
          color: active ? "var(--fg)" : undefined,
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
          transition: "color .2s"
        }}>
        Solutions
        <svg width="9" height="9" viewBox="0 0 10 10" fill="none"
        style={{
          transform: open ? "rotate(180deg)" : "rotate(0deg)",
          transition: "transform .25s ease"
        }}>
          <path d="M2 4 L5 7 L8 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </a>
      {/* Hover bridge to keep dropdown alive while traversing the gap */}
      <div
        aria-hidden
        style={{
          position: "absolute",
          top: "100%",
          left: -20, right: -20,
          height: 16,
          pointerEvents: open ? "auto" : "none"
        }} />
      <div
        role="menu"
        style={{
          position: "absolute",
          top: "calc(100% + 14px)",
          left: -24,
          minWidth: 380,
          padding: 8,
          background: "rgba(15, 20, 33, 0.92)",
          backdropFilter: "blur(16px) saturate(160%)",
          WebkitBackdropFilter: "blur(16px) saturate(160%)",
          border: "1px solid var(--border-2)",
          borderRadius: 8,
          boxShadow: "0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset",
          opacity: open ? 1 : 0,
          transform: open ? "translateY(0)" : "translateY(-6px)",
          pointerEvents: open ? "auto" : "none",
          transition: "opacity .25s ease, transform .25s ease",
          zIndex: 60
        }}>
        {STAGES.map((s) =>
        <a
          key={s.n}
          href={s.href}
          style={{
            display: "grid",
            gridTemplateColumns: "32px 1fr",
            gap: 14,
            padding: "12px 14px",
            borderRadius: 6,
            alignItems: "baseline",
            color: "var(--fg)",
            transition: "background .2s ease"
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = "rgba(229,162,105,0.08)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
          
            <span className="num-serif" style={{ fontSize: 18, color: "var(--accent)", lineHeight: 1 }}>
              {s.n}
            </span>
            <span style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
              <span style={{ fontSize: 14, color: "var(--fg)", letterSpacing: "-0.005em" }}>{s.name}</span>
              <span style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.4 }}>{s.desc}</span>
            </span>
          </a>
        )}
        <div style={{
          marginTop: 4,
          paddingTop: 10,
          paddingBottom: 6,
          paddingLeft: 14, paddingRight: 14,
          borderTop: "1px solid var(--border)",
          display: "flex", justifyContent: "space-between", alignItems: "center"
        }}>
          <a href={`/`} className="mono cap" style={{ color: "var(--fg-2)", fontSize: 10.5, letterSpacing: "0.12em" }}>
            All solutions
          </a>
          <span aria-hidden style={{ color: "var(--accent)", fontSize: 12 }}>→</span>
        </div>
      </div>
    </div>);

}

function Logo() {
  return (
    <img
      src={window.__resources && window.__resources.logomark || "assets/buildq-logomark-white.png"}
      alt="BuildQ"
      style={{ height: 22, width: 22, display: "block", objectFit: "contain" }} />);

}


/* Industries hover-dropdown menu */
function IndustriesMenu({ prefix = "industries/", active = false }) {
  const [open, setOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const onEnter = () => {clearTimeout(closeTimer.current);setOpen(true);};
  const onLeave = () => {closeTimer.current = setTimeout(() => setOpen(false), 120);};
  const INDS = [
  { name: "Energy", desc: "Solar, wind, storage, geothermal.", href: `${prefix}energy`, soon: false },
  { name: "Data centers", desc: "Speed-to-power for AI infrastructure.", href: `${prefix}data-centers`, soon: false },
  { name: "Commercial real estate", desc: "Project services for owners and investors.", href: `${prefix}real-estate`, soon: false }];

  return (
    <div onMouseEnter={onEnter} onMouseLeave={onLeave}
    style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
      <a href={`${prefix}data-centers`} className="muted"
      style={{ color: active ? "var(--fg)" : undefined, display: "inline-flex", alignItems: "center", gap: 6, transition: "color .2s" }}>
        Industries
        <svg width="9" height="9" viewBox="0 0 10 10" fill="none"
        style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .25s ease" }}>
          <path d="M2 4 L5 7 L8 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </a>
      <div aria-hidden style={{ position: "absolute", top: "100%", left: -20, right: -20, height: 16, pointerEvents: open ? "auto" : "none" }} />
      <div role="menu" style={{
        position: "absolute", top: "calc(100% + 14px)", left: -24, minWidth: 380, padding: 8,
        background: "rgba(15, 20, 33, 0.92)",
        backdropFilter: "blur(16px) saturate(160%)", WebkitBackdropFilter: "blur(16px) saturate(160%)",
        border: "1px solid var(--border-2)", borderRadius: 8,
        boxShadow: "0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset",
        opacity: open ? 1 : 0, transform: open ? "translateY(0)" : "translateY(-6px)",
        pointerEvents: open ? "auto" : "none", transition: "opacity .25s ease, transform .25s ease", zIndex: 60
      }}>
        {INDS.map((s) =>
        <a key={s.name} href={s.href}
        style={{ display: "flex", flexDirection: "column", gap: 4, padding: "12px 14px", borderRadius: 6, color: "var(--fg)", transition: "background .2s ease" }}
        onMouseEnter={(e) => e.currentTarget.style.background = "rgba(229,162,105,0.08)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontSize: 14, color: "var(--fg)", letterSpacing: "-0.005em" }}>{s.name}</span>
              {s.soon && <span className="mono cap" style={{ fontSize: 9, color: "var(--fg-3)", letterSpacing: "0.12em", padding: "2px 6px", border: "1px solid var(--border-2)", borderRadius: 3 }}>Coming soon</span>}
            </span>
            <span style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.4 }}>{s.desc}</span>
          </a>
        )}
      </div>
    </div>);

}

/* ────────────────────────── HERO ────────────────────────── */
function Hero({ motion }) {
  // motion: 'still' | 'subtle' | 'active'
  const motionDur = { still: 0, subtle: 26, active: 14 }[motion] || 26;
  return (
    <section
      id="top"
      className="hero"
      data-screen-label="01 Hero"
      style={{
        position: "relative",
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end",
        paddingBottom: "11vh",
        overflow: "hidden",
        background: "var(--bg)"
      }}>
      
      {/* Background image slot + cinematic overlay */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }} className="cinematic">
        <video
          ref={(el) => {if (el) {el.muted = true;el.volume = 0;el.defaultMuted = true;}}}
          src={window.__resources && window.__resources.heroVideo || "hero.mp4"}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          disableRemotePlayback
          onCanPlay={(e) => {e.currentTarget.muted = true;e.currentTarget.volume = 0;}}
          onPlay={(e) => {e.currentTarget.muted = true;e.currentTarget.volume = 0;}}
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover",
            opacity: 0.9
          }}>
        </video>
        {/* Subtle parallax/scan effect when no image */}
        {motion !== "still" &&
        <div
          aria-hidden
          style={{
            position: "absolute", inset: "-10% -10%",
            background: "radial-gradient(50% 30% at 70% 30%, rgba(229,162,105,0.18), transparent 60%)",
            animation: `heroDrift ${motionDur}s ease-in-out infinite alternate`,
            pointerEvents: "none"
          }} />

        }
        {/* Dark scrim for legibility */}
        <div
          aria-hidden
          style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(10,14,24,0.45) 0%, rgba(10,14,24,0.15) 40%, rgba(10,14,24,0.85) 100%)"
          }} />
        
      </div>

      {/* Content */}
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ maxWidth: 980 }}>
          <h1 className="display display-1" style={{ marginBottom: 32 }}>
            Build faster.
          </h1>
          <p className="lede" style={{ fontSize: "clamp(18px, 1.5vw, 22px)", maxWidth: 640, color: "rgba(237,231,218,0.86)" }}>AI-native software and services for capital-intensive projects.

          </p>
          <div style={{ marginTop: 40 }}>
            <a href="contact" className="btn">
              Get Started
              <span className="arrow" aria-hidden>→</span>
            </a>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <div
        style={{
          position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)",
          zIndex: 2, color: "rgba(237,231,218,0.6)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 12
        }}>
        
        <span className="mono cap" style={{ fontSize: 10 }}>Scroll</span>
        <span aria-hidden style={{
          width: 1, height: 28, background: "currentColor",
          opacity: motion === "still" ? 0.6 : 1,
          animation: motion === "still" ? "none" : "scrollCue 2.4s ease-in-out infinite",
          transformOrigin: "top"
        }} />
      </div>
    </section>);

}

/* ────────────────────────── PROOF STRIP ────────────────────────── */
function useCountUp(target, opts = {}) {
  const { duration = 1400, delay = 0 } = opts;
  const [value, setValue] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const startT = performance.now() + delay;
          const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
          const tick = (now) => {
            if (now < startT) {requestAnimationFrame(tick);return;}
            const elapsed = now - startT;
            const p = Math.min(1, elapsed / duration);
            setValue(target * easeOutCubic(p));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration, delay]);

  return [ref, value];
}

function ProofStatCard({ target, format, suffix, label, delay }) {
  const [ref, v] = useCountUp(target, { duration: 1600, delay });
  return (
    <div ref={ref} style={{
      flex: "1 1 0",
      minWidth: 220,
      padding: "40px 36px 36px",
      border: "1px solid var(--border-2)",
      borderRadius: 6,
      background: "linear-gradient(180deg, rgba(229,162,105,0.04) 0%, rgba(229,162,105,0) 100%)",
      display: "flex", flexDirection: "column", gap: 16,
      position: "relative",
      overflow: "hidden"
    }}>
      <div
        aria-hidden
        style={{
          position: "absolute", top: 0, left: 0, right: 0,
          height: 2,
          background: "linear-gradient(90deg, rgba(229,162,105,0.8) 0%, rgba(229,162,105,0) 100%)",
          transformOrigin: "left",
          transform: `scaleX(${Math.min(1, v / target)})`,
          transition: "transform .1s linear"
        }} />
      <div className="num-serif" style={{
        fontSize: "clamp(56px, 6.4vw, 96px)",
        lineHeight: 1.0,
        letterSpacing: "-0.025em",
        color: "var(--fg)",
        fontVariantNumeric: "tabular-nums",
        whiteSpace: "nowrap"
      }}>
        {format(v)}{suffix && <span style={{ color: "var(--fg-3)" }}>{suffix}</span>}
      </div>
      <div className="mono cap" style={{
        fontSize: 12,
        color: "var(--fg-2)",
        letterSpacing: "0.12em",
        lineHeight: 1.5
      }}>
        {label}
      </div>
    </div>);

}

function ProofStrip() {
  return (
    <section className="tight" data-screen-label="02 Proof"
    style={{ borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="wrap">
        <div style={{ display: "flex", flexWrap: "wrap", gap: 20 }}>
          <ProofStatCard
            target={600}
            format={(v) => Math.round(v).toLocaleString()}
            suffix="+"
            label="Projects supported"
            delay={0} />
          
          <ProofStatCard
            target={20}
            format={(v) => Math.round(v).toLocaleString()}
            suffix="+ GW"
            label="Capacity managed"
            delay={350} />
          
          <ProofStatCard
            target={2}
            format={(v) => '$' + v.toFixed(1).replace(/\.0$/, '')}
            suffix="B+"
            label="GAV supported"
            delay={700} />
          
        </div>
      </div>
    </section>);

}

/* ────────────────────────── PROBLEM ────────────────────────── */
function Problem() {
  return (
    <section data-screen-label="03 Problem" style={{ paddingTop: "16vh", paddingBottom: "12vh" }}>
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "minmax(180px, 1fr) minmax(0, 2fr)",
        gap: 96,
        alignItems: "start"
      }}>
        <aside style={{ position: "sticky", top: 96 }}>
          <div style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "var(--fg-3)",
            display: "inline-flex",
            alignItems: "center",
            gap: 14,
            marginBottom: 24
          }}>
            <span style={{ width: 32, height: 1, background: "var(--accent)", display: "inline-block" }} />
            The thesis
          </div>
          <div className="mono" style={{
            fontSize: 11,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--fg-3)",
            lineHeight: 2
          }}>

          </div>
        </aside>

        <div style={{ maxWidth: 680 }}>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "clamp(40px, 4.8vw, 68px)",
            lineHeight: 1.02,
            letterSpacing: "-0.02em",
            margin: "0 0 48px",
            color: "var(--fg)",
            textWrap: "balance"
          }}>
            The modern economy is being rebuilt.
          </h2>

          <div style={{
            fontFamily: "var(--font-body)",
            fontSize: 19,
            lineHeight: 1.62,
            letterSpacing: "-0.005em",
            color: "var(--fg)"
          }}>
            <p style={{ margin: "0 0 22px" }}>
              The world needs more power, more housing, more data centers, and more resilient infrastructure. But the projects that deliver them are still run through PDFs, spreadsheets, inboxes, and disconnected software tools.
            </p>

            <p style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontSize: 24,
              lineHeight: 1.4,
              color: "var(--accent)",
              margin: "48px 0 0",
              paddingTop: 32,
              borderTop: "1px solid var(--border-2)"
            }}>
              Software alone won&rsquo;t solve this. BuildQ pairs AI-native software, services, and intelligence with the experts who actually move projects forward.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────────────────────── WHAT WE DO ────────────────────────── */
function WhatWeDo() {
  const items = [
  {
    n: "01",
    verb: "Assemble the project record.",
    body: [
    "We leverage our AI-native operating system to collect and review the documents, schedules, permits, contracts, models, leases, title materials, correspondence, and open questions that are behind the project.",
    "Then we turn that information into a clear view of what matters: what is complete, what is missing, what changed, what is risky, and what could delay the project."]

  },
  {
    n: "02",
    verb: "Find the issues.",
    body: [
    "Our team reviews the project record and identifies the problems that need attention: missing documents, conflicting information, upcoming deadlines, financing gaps, permitting risks, equipment delays, title issues, interconnection problems, and construction risks."]

  },
  {
    n: "03",
    verb: "Move the work forward.",
    body: [
    "BuildQ activates the people needed to move the project forward: our team, your team, existing advisors, vendors, lenders, equipment suppliers, capital partners, and specialists from our network. Everyone works from the same context, with clear next steps and ownership."]

  }];

  return (
    <section data-screen-label="03b What we do">
      <div className="wrap">
        <div style={{ marginBottom: 64, maxWidth: 820 }}>
          <span className="eyebrow">What we do</span>
          <h2 className="display display-2" style={{ marginTop: 18, marginBottom: 28 }}>
            Faster project execution.
          </h2>
          <p className="lede" style={{ maxWidth: 760, marginBottom: 18 }}>
            BuildQ helps energy, real estate, and data center companies get the work done faster: diligence, project tracking, financing support, site review, document review, and blocker resolution.
          </p>
          <p className="lede" style={{ maxWidth: 760, color: "var(--fg-2)" }}>Instead of hiring multiple advisors, waiting weeks for separate reports, and stitching everything together yourself, BuildQ gives you one team working from one single source of truth, accountable for getting your projects completed.

          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, borderTop: "1px solid var(--border-2)" }}>
          {items.map((it, idx) =>
          <div key={it.n} style={{
            paddingTop: 36,
            borderRight: idx < items.length - 1 ? "1px solid var(--border)" : "none",
            paddingRight: 32,
            display: "flex", flexDirection: "column", gap: 16
          }}>
              <div className="num-serif" style={{ fontSize: 32, color: "var(--accent)", lineHeight: 1 }}>{it.n}</div>
              <div className="display" style={{ fontSize: 26, letterSpacing: "-0.01em", lineHeight: 1.2 }}>{it.verb}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 4 }}>
                {it.body.map((para, i) =>
              <p key={i} style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-2)", margin: 0 }}>{para}</p>
              )}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── WHO WE WORK WITH ────────────────────────── */
function WhoWeWorkWith() {
  const rows = [
  {
    label: "Developers and operators",
    body: "Run projects from diligence through delivery \u2014 organizing data, tracking blockers, coordinating workstreams, and keeping execution moving.",
    icon:
    // Crane / construction
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 21h18" />
          <path d="M5 21V9l14 6" />
          <path d="M5 9l6-6" />
          <path d="M9 21v-6h6v6" />
        </svg>

  },
  {
    label: "Owners and asset managers",
    body: "Manage portfolios with one view of risk, readiness, delivery confidence, and insight into where intervention is needed.",
    icon:
    // Key
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="8" cy="14" r="4" />
          <path d="M11 12l9-9" />
          <path d="M16 7l3 3" />
          <path d="M18 5l2 2" />
        </svg>

  },
  {
    label: "Investors and lenders",
    body: "Know which projects are real, which pipelines are credible, and where to deploy capital.",
    icon:
    // Bank / columns
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 10l9-6 9 6" />
          <path d="M4 10h16" />
          <path d="M6 10v9" />
          <path d="M18 10v9" />
          <path d="M10 10v9" />
          <path d="M14 10v9" />
          <path d="M3 21h18" />
        </svg>

  },
  {
    label: "Tenants and offtakers",
    body: "Validate the projects you\u2019re counting on \u2014 for power, for space, for delivery.",
    icon:
    // Handshake / receiving (two arrows meeting)
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 12h6l2-2 2 2 4 4 4-4-6-6-2 2-2-2-4 4" />
          <path d="M9 18l3-3 3 3" />
        </svg>

  },
  {
    label: "Legal counsel",
    body: "Move diligence faster across CRE, M&A, project finance, and regulatory work.",
    icon:
    // Scales / balance
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 3v18" />
          <path d="M5 21h14" />
          <path d="M6 8h12" />
          <path d="M6 8l-3 6a3 3 0 0 0 6 0z" />
          <path d="M18 8l-3 6a3 3 0 0 0 6 0z" />
        </svg>

  }];


  return (
    <section data-screen-label="05b Who we work with" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <span className="eyebrow">Who we work with</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>The teams behind every project.

          </h2>
        </div>
        <div style={{ borderTop: "1px solid var(--border-2)" }}>
          {rows.map((r, i) =>
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "48px minmax(220px, 320px) 1fr", gap: 32,
            padding: "28px 0", borderBottom: "1px solid var(--border)", alignItems: "center"
          }}>
              <span style={{
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              width: 44, height: 44, borderRadius: 6,
              border: "1px solid rgba(229,162,105,0.4)",
              background: "rgba(229,162,105,0.06)",
              color: "var(--accent)",
              flexShrink: 0
            }}>
                {r.icon}
              </span>
              <div className="display" style={{ fontSize: 22, letterSpacing: "-0.01em" }}>{r.label}</div>
              <div style={{ fontSize: 16, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 640 }}>{r.body}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── HOW WE ENGAGE ────────────────────────── */
function HowWeEngage() {
  const cards = [
  {
    n: "01",
    name: "Project diagnostic",
    meta: "Three weeks · single project",
    body: "A focused assessment of one project, site, or transaction. Decision-ready output: readiness, risk register, critical path, partner recommendations."
  },
  {
    n: "02",
    name: "Portfolio review",
    meta: "Multi-project · developers, investors, lenders",
    body: "Risk-adjusted view of capacity, capital, and delivery across complex pipelines for owners managing many assets at once."
  },
  {
    n: "03",
    name: "Control tower",
    meta: "Ongoing · through COD or close",
    body: "Continuous project intelligence, risk tracking, expert validation, partner coordination, and executive reporting until the project is delivered."
  },
  {
    n: "04",
    name: "Partner activation",
    meta: "Targeted · when a project hits a blocker",
    body: "Permitting, interconnection, equipment, legal, financing, or operations \u2014 the right specialist mobilized to unblock the critical path."
  }];

  return (
    <section data-screen-label="06b How we engage">
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <span className="eyebrow">How we engage</span>
          <h2 className="display display-2" style={{ marginTop: 18, marginBottom: 22 }}>
            From diagnostic to delivery.
          </h2>
          <p className="lede" style={{ maxWidth: 600 }}>
            Most engagements start with a focused diagnostic and scale into ongoing intelligence.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--border-2)", borderLeft: "1px solid var(--border-2)" }}>
          {cards.map((c) =>
          <div key={c.n} style={{
            padding: "40px 36px",
            borderRight: "1px solid var(--border-2)",
            borderBottom: "1px solid var(--border-2)"
          }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
                <span className="num-serif" style={{ fontSize: 26, color: "var(--accent)" }}>{c.n}</span>
                <span className="mono cap" style={{ color: "var(--fg-3)" }}>{c.meta}</span>
              </div>
              <div className="display" style={{ fontSize: 26, marginBottom: 14, letterSpacing: "-0.01em" }}>{c.name}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--fg-2)", margin: 0, maxWidth: 480 }}>{c.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── TESTIMONIALS ────────────────────────── */
const SECTOR_META = {
  legal: { label: "Legal", icon: "legal" },
  cre: { label: "CRE", icon: "cre" },
  capital: { label: "Capital", icon: "capital" },
  energy: { label: "Energy", icon: "energy" },
  ai: { label: "AI", icon: "ai" }
};

function SectorIcon({ kind, size = 14, color }) {
  const c = color || "currentColor";
  const common = { width: size, height: size, viewBox: "0 0 16 16", fill: "none", style: { display: "block" } };
  if (kind === "legal") {
    // Balance/scales
    return (
      <svg {...common}>
        <line x1="8" y1="2" x2="8" y2="14" stroke={c} strokeWidth="1.1" strokeLinecap="round" />
        <line x1="3" y1="4" x2="13" y2="4" stroke={c} strokeWidth="1.1" strokeLinecap="round" />
        <path d="M 3 4 L 1.5 8.5 A 2 2 0 0 0 4.5 8.5 L 3 4 Z" stroke={c} strokeWidth="1" />
        <path d="M 13 4 L 11.5 8.5 A 2 2 0 0 0 14.5 8.5 L 13 4 Z" stroke={c} strokeWidth="1" />
        <line x1="5" y1="14" x2="11" y2="14" stroke={c} strokeWidth="1.1" strokeLinecap="round" />
      </svg>);

  }
  if (kind === "cre") {
    // Building
    return (
      <svg {...common}>
        <rect x="2.5" y="3" width="11" height="11" stroke={c} strokeWidth="1" />
        <line x1="2.5" y1="14" x2="13.5" y2="14" stroke={c} strokeWidth="1.2" />
        {[5.5, 8, 10.5].map((x, i) =>
        <g key={i}>
            <rect x={x - 0.6} y="5" width="1.2" height="1.6" fill={c} />
            <rect x={x - 0.6} y="8" width="1.2" height="1.6" fill={c} />
            <rect x={x - 0.6} y="11" width="1.2" height="1.6" fill={c} />
          </g>
        )}
      </svg>);

  }
  if (kind === "capital") {
    // Trending candlesticks
    return (
      <svg {...common}>
        <line x1="1.5" y1="14" x2="14.5" y2="14" stroke={c} strokeWidth="1" />
        <line x1="3" y1="10" x2="3" y2="13" stroke={c} strokeWidth="1.3" strokeLinecap="round" />
        <line x1="6" y1="7" x2="6" y2="13" stroke={c} strokeWidth="1.3" strokeLinecap="round" />
        <line x1="9" y1="9" x2="9" y2="13" stroke={c} strokeWidth="1.3" strokeLinecap="round" />
        <line x1="12" y1="4" x2="12" y2="13" stroke={c} strokeWidth="1.3" strokeLinecap="round" />
        <circle cx="12" cy="3.5" r="1" fill={c} />
      </svg>);

  }
  if (kind === "energy") {
    // Lightning bolt
    return (
      <svg {...common}>
        <path d="M 9 1.5 L 3 9 L 7 9 L 6 14.5 L 12.5 7 L 8.5 7 L 9 1.5 Z" stroke={c} strokeWidth="1" strokeLinejoin="round" />
      </svg>);

  }
  if (kind === "ai") {
    // Chip
    return (
      <svg {...common}>
        <rect x="4" y="4" width="8" height="8" stroke={c} strokeWidth="1.1" />
        <rect x="6" y="6" width="4" height="4" stroke={c} strokeWidth="0.8" />
        {[0, 1, 2].map((i) =>
        <g key={i} stroke={c} strokeWidth="0.9" strokeLinecap="round">
            <line x1={5.5 + i * 2.5} y1="4" x2={5.5 + i * 2.5} y2="2" />
            <line x1={5.5 + i * 2.5} y1="12" x2={5.5 + i * 2.5} y2="14" />
            <line x1="4" y1={5.5 + i * 2.5} x2="2" y2={5.5 + i * 2.5} />
            <line x1="12" y1={5.5 + i * 2.5} x2="14" y2={5.5 + i * 2.5} />
          </g>
        )}
      </svg>);

  }
  return null;
}

function SectorBadge({ sector, accent }) {
  const meta = SECTOR_META[sector];
  if (!meta) return null;
  return (
    <div style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 8,
      padding: "6px 10px 6px 8px",
      border: `1px solid ${accent ? "rgba(229,162,105,0.45)" : "var(--border-2)"}`,
      borderRadius: 999,
      color: accent ? "var(--accent)" : "var(--fg-3)",
      background: accent ? "rgba(229,162,105,0.06)" : "transparent",
      fontFamily: "var(--font-mono)",
      fontSize: 10.5,
      letterSpacing: "0.08em",
      textTransform: "uppercase",
      lineHeight: 1,
      whiteSpace: "nowrap"
    }}>
      <SectorIcon kind={meta.icon} size={13} />
      <span>{meta.label}</span>
    </div>);

}

function Testimonials() {
  const quotes = [
  {
    id: "tomasik",
    sector: "ai",
    span: 2,
    featured: true,
    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"
  },
  {
    id: "rockers",
    sector: "capital",
    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"
  },
  {
    id: "brooks",
    sector: "cre",
    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"
  },
  {
    id: "saga",
    sector: "energy",
    quote: "BuildQ is the reason our portfolio met its capital owners. Their ability to connect us with multiple qualified buyers was the difference maker between developments on a spreadsheet and making projects shovel-ready.",
    name: "Marcus Lively",
    role: "",
    org: "General Partner · Saga Energy"
  },
  {
    id: "crane",
    sector: "energy",
    quote: "BuildQ has cut our contract review time by nearly 30%, giving our team back hours each week and allowing us to move with greater speed and confidence. That efficiency translates directly into deal efficiency \u2014 we organize diligence and submit bids earlier, a competitive advantage that\u2019s been invaluable.",
    name: "Will Crane",
    role: "Head of Development",
    org: "Bluestem Energy Solutions"
  },
  {
    id: "goldberg",
    sector: "legal",
    span: 2,
    featured: true,
    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: "Assistant Secretary of the Treasury for Tax Policy"
  },
  {
    id: "pluspower",
    sector: "energy",
    accent: true,
    hidden: true,
    quote: "We submitted 3 LOIs in 3 weeks across our acquisition pipeline using BuildQ \u2014 work that historically would have taken a quarter. Our deal team and counsel worked from the same source-linked record, which compressed review time without sacrificing rigor.",
    name: "Marcus Weathersby",
    role: "Manager, Origination",
    org: "Plus Power"
  }];


  return (
    <section data-screen-label="06 Voices">
      <div className="wrap">
        <div style={{ marginBottom: 64, maxWidth: 760 }}>
          <span className="eyebrow">Voices</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>From the experts themselves.

          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--border-2)",
          borderLeft: "1px solid var(--border-2)"
        }}>
          {quotes.filter((q) => !q.hidden).map((q) =>
          <div
            key={q.id}
            style={{
              gridColumn: q.span === 2 ? "span 2" : "span 1",
              padding: q.featured ? "44px 40px 36px" : "36px 32px 32px",
              borderRight: "1px solid var(--border-2)",
              borderBottom: "1px solid var(--border-2)",
              background: q.featured ?
              "linear-gradient(180deg, rgba(229,162,105,0.06) 0%, rgba(229,162,105,0) 100%)" :
              q.accent ?
              "var(--bg-2)" :
              "transparent",
              display: "flex",
              flexDirection: "column",
              gap: 20,
              minHeight: q.featured ? 360 : 280,
              position: "relative"
            }}>
            
              {/* Top row: open quote glyph + sector badge */}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
                <div
                aria-hidden
                className="num-serif"
                style={{
                  fontSize: q.featured ? 88 : 56,
                  lineHeight: 0.55,
                  color: q.featured ? "var(--accent)" : "var(--fg-3)",
                  opacity: q.featured ? 0.95 : 0.45,
                  letterSpacing: "-0.04em",
                  height: q.featured ? 44 : 28
                }}>
                
                  {"\u201C"}
                </div>
                {q.sector && <SectorBadge sector={q.sector} accent={q.featured} />}
              </div>
              <blockquote style={{
              margin: 0,
              fontFamily: "var(--font-display)",
              fontSize: q.featured ?
              "clamp(22px, 1.85vw, 28px)" :
              "clamp(15.5px, 1.15vw, 18px)",
              lineHeight: 1.42,
              letterSpacing: "-0.005em",
              color: q.featured ? "var(--fg)" : "var(--fg-2)",
              flex: 1
            }}>
                {q.quote}
              </blockquote>
              <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              paddingTop: 18,
              borderTop: "1px solid var(--border)"
            }}>
                <div className="display" style={{
                fontSize: 15,
                letterSpacing: "-0.005em",
                color: "var(--fg)",
                lineHeight: 1.2
              }}>
                  {q.name}
                </div>
                <div className="mono cap" style={{ fontSize: 10.5, color: "var(--fg-3)", letterSpacing: "0.08em" }}>
                  {[q.role, q.org].filter(Boolean).join(" \u00b7 ")}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── FOUNDER ────────────────────────── */
function Founder() {
  return (
    <section data-screen-label="07 Founder" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
          <div>
            <image-slot
              id="founder-photo"
              src="assets/headshots/maryssa.jpg"
              shape="rect"
              fit="cover"
              position="50% 25%"
              placeholder="Founder portrait — black & white preferred, three-quarter crop"
              style={{ display: "block", width: "100%", maxWidth: 200, height: "auto", aspectRatio: "1/1", border: "1px solid var(--border-2)" }}>
            </image-slot>
            <div style={{ marginTop: 18 }}>
              <div className="display" style={{ fontSize: 22 }}>Maryssa Barron</div>
              <div className="muted mono cap" style={{ marginTop: 6 }}>Founder &amp; CEO</div>
            </div>
          </div>
          <div>
            <span className="eyebrow">Founder vision</span>
            <div style={{
              marginTop: 22,
              fontFamily: "var(--font-display)",
              fontSize: "clamp(22px, 2.4vw, 32px)",
              lineHeight: 1.32,
              letterSpacing: "-0.01em",
              color: "var(--fg)",
              maxWidth: 720
            }}>
              <p style={{ margin: "0 0 26px" }}>Most infrastructure delays are not technical surprises. They’re information failures — the right person didn’t see the right document at the right time. The energy transition, the AI revolution, and affordable housing cannot run on PDFs, spreadsheets, and scattered consultants any longer.

              </p>
              <p style={{ margin: 0, color: "var(--fg-2)" }}>BuildQ is building the execution layer for the most capital-intensive buildout of the next decade. Software that thinks about projects the way the best developers, investors, and operators do — and a network of people who can actually move them forward. That’s what AI-native means at BuildQ. It’s not AI that replaces experts. It’s AI that gives experts the leverage to handle ten times the work, with better judgment than software alone can provide.

              </p>
            </div>
            <div className="mono cap" style={{ marginTop: 36, color: "var(--fg-3)" }}>
              — Maryssa Barron, Founder &amp; CEO
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────────────────────── COMPLIANCE STRIP ────────────────────────── */
function Compliance() {
  return (
    <section className="tight" data-screen-label="08 Compliance">
      <div className="wrap" style={{ textAlign: "center" }}>
        <p className="display" style={{ fontSize: "clamp(20px, 2vw, 26px)", lineHeight: 1.3, letterSpacing: "-0.01em", marginBottom: 40, maxWidth: 760, marginInline: "auto", color: "var(--fg)" }}>
          Built for the confidentiality demands of capital-intensive infrastructure.
        </p>
        <div style={{
          display: "flex", flexWrap: "wrap", justifyContent: "center",
          gap: 48, alignItems: "center"
        }}>
          {[
          ["SOC 2", ""],
          ["No training on customer data", ""]].
          map(([k, sub], i) =>
          <a key={i} href="security" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "16px 30px",
            border: "1px solid var(--border-2)",
            borderRadius: 999,
            transition: "border-color .2s",
            whiteSpace: "nowrap",
            flexShrink: 0
          }}>
              <div className="display" style={{ fontSize: 18, letterSpacing: 0 }}>{k}</div>
              {sub && <div className="mono" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: 0.5 }}>· {sub}</div>}
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── CLOSING CTA ────────────────────────── */
function Closing() {
  return (
    <section data-screen-label="09 Closing" style={{ padding: 0 }}>
      <div style={{
        position: "relative",
        minHeight: "92vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        overflow: "hidden"
      }} className="cinematic">
        <image-slot
          id="closing-bg"
          shape="rect"
          placeholder="Closing image — wide static of server hall, turbine field, or substation at night"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.7 }}>
        </image-slot>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(10,14,24,0.55) 0%, rgba(10,14,24,0.5) 60%, rgba(10,14,24,0.92) 100%)"
        }} />
        <div className="wrap" style={{ position: "relative", zIndex: 2, textAlign: "left" }}>
          <h2 className="display display-1" style={{ marginBottom: 48, maxWidth: 1100 }}>The future depends on
what gets built next.
          </h2>
          <a href="contact" className="btn">
            Get Started
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>);

}

/* ────────────────────────── FOOTER ────────────────────────── */
function Footer() {
  return <buildq-footer></buildq-footer>;
}

/* ────────────────────────── APP ────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Sync HTML attributes so CSS picks up palette/type/density/grid changes
  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette);
    document.documentElement.setAttribute("data-type", t.typePairing);
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.setAttribute("data-grid", t.showGrid ? "on" : "off");
  }, [t.palette, t.typePairing, t.density, t.showGrid]);

  return (
    <>
      <Nav />
      <main>
        <Hero motion={t.heroMotion} />
        <ProofStrip />
        <Problem />
        <WhatWeDo />
        <div id="os"><window.OSSection defaultLayer={t.defaultLayer} motion={700} /></div>
        <window.AssetClassesSection />
        <WhoWeWorkWith />
        <Testimonials />
        <Founder />
        <Compliance />
        <Closing />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor
          label="Palette"
          value={
          t.palette === "midnight" ? ["#0A0E18", "#E5A269", "#EDE7DA"] :
          t.palette === "slate" ? ["#0E1116", "#7FB3D5", "#E7ECF3"] :
          t.palette === "bone" ? ["#F5F1E8", "#B45B1F", "#1B1810"] :
          ["#0C1612", "#D4923F", "#E8F0EA"]
          }
          options={[
          ["#0A0E18", "#E5A269", "#EDE7DA"],
          ["#0E1116", "#7FB3D5", "#E7ECF3"],
          ["#F5F1E8", "#B45B1F", "#1B1810"],
          ["#0C1612", "#D4923F", "#E8F0EA"]]
          }
          onChange={(v) => {
            const map = {
              "#0A0E18": "midnight",
              "#0E1116": "slate",
              "#F5F1E8": "bone",
              "#0C1612": "forest"
            };
            setTweak("palette", map[v[0]] || "midnight");
          }} />
        
        <TweakSelect
          label="Typography"
          value={t.typePairing}
          options={[
          { value: "editorial", label: "Editorial serif (Instrument + Geist)" },
          { value: "modern", label: "Modern serif (Newsreader + Manrope)" },
          { value: "grotesque", label: "All grotesque (no serif)" }]
          }
          onChange={(v) => setTweak("typePairing", v)} />
        
        <TweakRadio
          label="Density"
          value={t.density}
          options={["tight", "regular", "airy"]}
          onChange={(v) => setTweak("density", v)} />
        

        <TweakSection label="Hero" />
        <TweakRadio
          label="Motion"
          value={t.heroMotion}
          options={["still", "subtle", "active"]}
          onChange={(v) => setTweak("heroMotion", v)} />
        

        <TweakSection label="Project OS" />
        <TweakSelect
          label="Default layer"
          value={t.defaultLayer}
          options={[
          { value: "01", label: "01 — Large Language Models" },
          { value: "02", label: "02 — Agentic Harness" },
          { value: "03", label: "03 — Data & Integrations" },
          { value: "04", label: "04 — Context & Knowledge" },
          { value: "05", label: "05 — Expert Network" },
          { value: "06", label: "06 — Products & Interfaces" },
          { value: "07", label: "07 — Security & Governance" }]
          }
          onChange={(v) => setTweak("defaultLayer", v)} />
        

        <TweakSection label="Debug" />
        <TweakToggle
          label="12-col grid overlay"
          value={t.showGrid}
          onChange={(v) => setTweak("showGrid", v)} />
        
      </TweaksPanel>
    </>);

}

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