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

/* ───────────────────────────── HERO ───────────────────────────── */
function EnHero() {
  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="en-hero-bg"
          src="https://images.unsplash.com/photo-1504063105421-d3ca1d4dedab?fm=jpg&q=80&w=2400&auto=format&fit=crop"
          shape="rect"
          placeholder="Hoover Dam / utility-scale energy infrastructure \u2014 aerial preferred"
          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)" }}>Energy</span>
        </div>
        <h1 className="display display-hero" style={{
          lineHeight: 1.04,
          letterSpacing: "-0.02em",
          margin: 0,
          maxWidth: 1180,
        }}>
          Build faster from pipeline to COD.
        </h1>
        <p className="lede-lg" style={{
          marginTop: 36, maxWidth: 820,
          color: "rgba(237,231,218,0.86)",
        }}>
          BuildQ gives energy teams one project record, one accountable team, and the right
          specialists to move renewable projects from origination through commercial operation.
        </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 — STAT 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 StatCard({ 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 display-stat-xl" style={{
        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 EnStatStrip() {
  return (
    <section className="tight" data-screen-label="02 Stats"
      style={{ borderBottom: "1px solid var(--border)" }}>
      <div className="wrap">
        <div style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 20,
        }}>
          <StatCard
            target={600}
            format={(v) => Math.round(v).toLocaleString()}
            suffix="+"
            label="Projects supported"
            delay={0}
          />
          <StatCard
            target={20}
            format={(v) => Math.round(v).toLocaleString()}
            suffix="+ GW"
            label="Capacity managed"
            delay={350}
          />
          <StatCard
            target={2}
            format={(v) => '$' + v.toFixed(1).replace(/\.0$/, '')}
            suffix="B+"
            label="GAV supported"
            delay={700}
          />
        </div>
        <p className="body muted" style={{ marginTop: 32, marginBottom: 0, maxWidth: 820 }}>
          Across energy development, diligence, financing, transactions, construction, and portfolio monitoring.
        </p>
      </div>
    </section>
  );
}

/* ───────────────────── 03 — PROBLEM ───────────────────── */
function EnProblem() {
  return (
    <section data-screen-label="03 Problem">
      <div className="wrap">
        <div style={{ maxWidth: 1100 }}>
          <span className="eyebrow">The thesis</span>
          <h2 className="display display-2 h-section" style={{ marginBottom: 36 }}>
            Energy projects are moving faster than the operating model behind them.
          </h2>
          <div style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
            gap: 56,
            paddingTop: 28,
            borderTop: "1px solid var(--border-2)",
          }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(19px, 1.5vw, 22px)", lineHeight: 1.5, color: "var(--fg-2)" }}>
              <p style={{ margin: "0 0 22px" }}>
                Renewable developers are managing more projects, more counterparties, more financing complexity,
                and more execution risk than ever.
              </p>
              <p style={{ margin: 0 }}>
                The work still runs through data rooms, spreadsheets, inboxes, advisor updates, and disconnected systems.
              </p>
            </div>
            <div style={{
              paddingLeft: 28,
              borderLeft: "2px solid var(--accent)",
              fontFamily: "var(--font-display)",
              fontSize: "clamp(19px, 1.55vw, 23px)",
              lineHeight: 1.45,
              color: "var(--fg)",
              letterSpacing: "-0.005em",
              fontStyle: "italic",
              alignSelf: "start",
            }}>
              BuildQ gives teams the execution layer to keep projects moving &mdash; from first screen
              to financing, construction, COD, and operations.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── 04 — OPERATING MODEL ───────────────────── */
function EnOperatingModel() {
  const cols = [
    {
      n: "01", label: "Platform",
      title: "Every project input, analyzed.",
      body: "ProjectOS reviews the documents, schedules, models, contracts, permits, correspondence, and decisions behind the project, then maps the history, risks, and critical path. A single source of truth is established. ",
    },
    {
      n: "02", label: "Experts",
      title: "Senior operators turn analysis into strategy.",
      body: "Our team identifies what needs attention and recommends the best path forward, driven by data and decades of experience.",
    },
    {
      n: "03", label: "Network",
      title: "The right people, moving in sync.",
      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="04 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">
            Platform. Experts. Network.
          </h2>
        </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: 340,
            }}>
              <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, whiteSpace: "pre-line" }}>
                {c.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── 05 — SERVICES ───────────────────── */
const EN_SERVICES = [
  {
    n: "01",
    slotId: "en-svc-origination",
    src: "https://images.unsplash.com/photo-1509391366360-2e959784a276?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Solar field / development land \u2014 aerial preferred",
    headline: "Origination & Pipeline",
    scope: "Find the projects worth pursuing.",
    body: "Site sourcing, land control, interconnection queue strategy, market screening, offtake analysis, opportunity review, and pipeline triage.",
    tags: ["Site sourcing", "Queue strategy", "Market screening", "Pipeline triage"],
  },
  {
    n: "02",
    slotId: "en-svc-development",
    src: "https://images.unsplash.com/photo-1466611653911-95081537e5b7?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Wind turbines / utility-scale renewable build",
    headline: "Development & Permitting",
    scope: "Move projects through the workstreams that determine buildability.",
    body: "Interconnection process management, permitting coordination, environmental and title diligence, EPC readiness, equipment planning, and tax credit qualification.",
    tags: ["Interconnection", "Permitting", "Site control", "EPC readiness", "ITC/PTC qualification"],
  },
  {
    n: "03",
    slotId: "en-svc-transactions",
    src: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Capital markets \u2014 financial district / deal room",
    headline: "Transactions & Capital Markets",
    scope: "Make projects ready for buyers, lenders, and capital partners.",
    body: "Buy-side underwriting, sell-side project and portfolio sales, project finance, tax equity, debt placement, capital structure, refinancing, and lender diligence.",
    tags: ["Buy-side", "Sell-side", "Project finance", "Tax equity", "Debt placement"],
  },
  {
    n: "04",
    slotId: "en-svc-construction",
    src: "https://images.unsplash.com/photo-1693013112835-5f3128bb555f?fm=jpg&q=70&w=1600&auto=format&fit=crop",
    placeholder: "Substation / operating renewable asset / construction site",
    headline: "Construction & Operations",
    scope: "Keep the project record live through COD and beyond.",
    body: "Owner\u2019s representation, project controls, milestone tracking, board and lender reporting, post-COD asset management, portfolio surveillance, and covenant tracking.",
    tags: ["Owner\u2019s rep", "Project controls", "Lender reporting", "Asset management", "Portfolio monitoring"],
  },
];

function EnServiceCard({ s }) {
  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",
      }}>
      <div style={{ position: "relative", borderBottom: "1px solid var(--border-2)" }}>
        <image-slot
          id={s.slotId}
          src={s.src}
          shape="rect"
          placeholder={s.placeholder}
          style={{ display: "block", width: "100%", aspectRatio: "16/10", background: "var(--surface)" }}
        />
      </div>
      <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,
        }}>
          {s.headline}
        </h3>
        <p className="lede" style={{ color: "var(--fg)" }}>
          {s.scope}
        </p>
        <p className="body-sm dim" style={{ margin: 0, lineHeight: 1.55 }}>
          {s.body}
        </p>
        <div style={{ flex: 1 }} />
        <p className="eyebrow" style={{ color: "var(--accent)", margin: 0, paddingTop: 28 }}>
          {s.tags.join(", ")}
        </p>
      </div>
    </article>
  );
}

function EnServices() {
  return (
    <section data-screen-label="05 Services">
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <span className="eyebrow">Services</span>
          <h2 className="display display-2 h-section" style={{ maxWidth: 1100 }}>
            From origination through commercial operation.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 24,
        }}>
          {EN_SERVICES.map((s) => <EnServiceCard key={s.n} s={s} />)}
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── 06 — WHO WE WORK WITH ───────────────────── */
function EnWhoWeWorkWith() {
  const chips = ["Developers", "IPPs", "Asset Managers", "Investors", "Lenders"];
  return (
    <section data-screen-label="06 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 }}>
            Developers. IPPs. Asset Managers. Investors. Lenders.
          </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 teams building, buying, financing, and operating renewable infrastructure.
          Whether you are screening a pipeline, acquiring assets, raising project debt, preparing for tax equity,
          managing construction, or monitoring an operating fleet &mdash; BuildQ gives you one project record
          and one team to move the work forward.
        </p>
        <div style={{ marginTop: 36 }}>
          <a href="../contact" className="btn">
            Talk to the team
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── 07 — CUSTOMER VOICES ───────────────────── */
const EN_VOICES = [
  {
    id: "lively",
    name: "Marcus Lively",
    role: "General Partner",
    org: "Saga Energy",
    photo: "../assets/headshots/lively.png",
    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.",
  },
  {
    id: "weathersby",
    hidden: true,
    name: "Marcus Weathersby",
    role: "Manager, Origination",
    org: "Plus Power",
    photo: "../assets/headshots/weathersby.png",
    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.",
  },
  {
    id: "crane",
    name: "Will Crane",
    role: "President",
    org: "Bluestem Energy Solutions",
    photo: "../assets/headshots/crane.jpg",
    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.",
  },
];

function VoiceCard({ v, featured }) {
  return (
    <figure className={`quote-card${featured ? " is-featured" : ""}`}>
      <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 EnVoices() {
  return (
    <section data-screen-label="07 Voices">
      <div className="wrap">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <span className="eyebrow">Customer voices</span>
          <h2 className="display display-2 h-section">
            From the operators we work with.
          </h2>
        </div>
        <div className="quote-card-grid">
          {EN_VOICES.filter(v => !v.hidden).map(v => <VoiceCard key={v.id} v={v} />)}
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── 08 — CLOSING ───────────────────── */
function EnClosing() {
  return (
    <section data-screen-label="08 Closing"
      style={{
        position: "relative", overflow: "hidden",
        borderTop: "1px solid var(--border)",
      }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
        background:
          "radial-gradient(50% 60% at 80% 100%, rgba(229,162,105,0.16) 0%, transparent 60%)," +
          "radial-gradient(40% 50% at 0% 0%, rgba(40,60,100,0.30) 0%, transparent 55%)",
      }} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <h2 className="display display-2" style={{
          letterSpacing: "-0.02em", lineHeight: 1.04,
          margin: 0, maxWidth: 860,
        }}>
          Start with one project.
        </h2>
        <p className="lede" style={{ maxWidth: 640, marginTop: 24 }}>
          See what BuildQ can surface, structure, and move forward on an active project in your pipeline.
        </p>
        <div style={{ marginTop: 28 }}>
          <a href="../contact" className="btn">
            Talk to the team
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── APP ───────────────────── */
function App() {
  return (
    <>
      <main>
        <EnHero />
        <EnStatStrip />
        <EnOperatingModel />
        <EnServices />
        <EnVoices />
        <EnWhoWeWorkWith />
        {false && <EnClosing />}
      </main>
      <IndFooter />
    </>
  );
}

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