// company.jsx — BuildQ Company page.
// Reuses tokens + classes from styles.css and the visual system from app.jsx.

/* Solutions hover-dropdown menu */
function SolutionsMenu({ 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: "solutions/origination" },
    { n: "02", name: "Diligence",   desc: "Get to a decision faster.",                  href: "solutions/diligence"  },
    { n: "03", name: "Development", desc: "Stay ahead of every milestone.",                  href: "solutions/development"},
    { n: "04", name: "Financing",   desc: "Make the project financeable.",              href: "solutions/financing"  },
    { n: "05", name: "Delivery",    desc: "Get it built. Get it operating.",            href: "solutions/delivery"   },
  ];
  return (
    <div onMouseEnter={onEnter} onMouseLeave={onLeave}
      style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
      <a href="solutions/" 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>
      <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="solutions/" 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>
  );
}


/* 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>
  );
}

/* ────────────────────────── 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)" : "rgba(10,14,24,0.4)",
        backdropFilter: "blur(14px) saturate(140%)",
        WebkitBackdropFilter: "blur(14px) saturate(140%)",
        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="/" style={{ display: "inline-flex", alignItems: "center", height: 36 }}>
          <img src="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 />
          <a href="company" className="muted" style={{ color: "var(--fg)" }}>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>);

}

/* ────────────────────────── HERO ────────────────────────── */
function Hero() {
  return (
    <section
      data-screen-label="01 Company hero"
      style={{
        position: "relative",
        paddingTop: "32vh",
        paddingBottom: "10vh",
        overflow: "hidden",
        minHeight: "92vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end"
      }}>
      {/* Earth backdrop */}
      <img
        src="assets/earth.jpg"
        alt=""
        aria-hidden
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          objectPosition: "center 30%",
          zIndex: 0,
          opacity: 0.95,
          animation: "earthDrift 60s ease-in-out infinite alternate"
        }} />
      {/* Soft gradient lift over the image for legibility */}
      <div
        aria-hidden
        style={{
          position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
          background:
            "linear-gradient(180deg, rgba(10,14,24,0.55) 0%, rgba(10,14,24,0.15) 40%, rgba(10,14,24,0.85) 100%)"
        }} />
      {/* Quiet accent glow from the upper-right */}
      <div
        aria-hidden
        style={{
          position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
          background:
            "radial-gradient(60% 50% at 85% 5%, rgba(229,162,105,0.20) 0%, transparent 55%)"
        }} />
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow">Our team</span>
        <h1 className="display display-1" style={{ marginTop: 22, maxWidth: 1100 }}>
          Building the operating layer for critical infrastructure.
        </h1>
      </div>
      <style>{`
        @keyframes earthDrift {
          0%   { transform: scale(1.06) translate3d(0, 0, 0); }
          100% { transform: scale(1.12) translate3d(-2%, 1%, 0); }
        }
      `}</style>
    </section>);

}

/* ────────────────────────── MISSION ────────────────────────── */
function useReveal() {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) setSeen(true); },
      { threshold: 0.18, rootMargin: "0px 0px -60px 0px" }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [seen]);
  return [ref, seen];
}

function Mission() {
  const [ref, seen] = useReveal();
  const paras = [
    { tone: "muted", text: "The world needs more clean power, more housing, more data centers, and more resilient infrastructure. But the projects that deliver them are still too hard to build." },
    { tone: "muted", text: "BuildQ was created by people who have worked inside that complexity \u2014 across energy development, project finance, law, AI, software, and government. We understand how infrastructure projects actually move: through messy data rooms, high-stakes diligence, financing constraints, permitting risk, commercial pressure, and multi-stakeholder coordination." },
    { tone: "pullquote", text: "Our job is to make that work easier." },
    { tone: "muted", text: "BuildQ combines AI-native software with deep infrastructure expertise to help teams organize project information, surface risk earlier, secure financing, coordinate specialists, and keep critical projects moving." },
    { tone: "emph", text: "We are building for the people responsible for making complex projects real." }
  ];
  return (
    <section data-screen-label="02 Mission" ref={ref}>
      <div className="wrap-narrow">
        <div style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 820 }}>
          {paras.map((p, i) => {
            const delay = `${i * 90}ms`;
            const baseStyle = {
              margin: 0,
              fontFamily: "var(--font-display)",
              fontSize: "clamp(22px, 2vw, 28px)",
              lineHeight: 1.4,
              letterSpacing: "-0.005em",
              opacity: seen ? 1 : 0,
              transform: seen ? "none" : "translateY(14px)",
              transition: `opacity 700ms cubic-bezier(0.22,1,0.36,1) ${delay}, transform 700ms cubic-bezier(0.22,1,0.36,1) ${delay}`
            };
            if (p.tone === "pullquote") {
              return (
                <div key={i} style={{
                  position: "relative",
                  padding: "10px 0 10px 32px",
                  margin: "10px 0",
                  borderLeft: "2px solid var(--accent)",
                  ...baseStyle
                }}>
                  <span style={{
                    fontSize: "clamp(28px, 2.6vw, 38px)",
                    fontStyle: "italic",
                    color: "var(--fg)",
                    letterSpacing: "-0.01em",
                    lineHeight: 1.25
                  }}>{p.text}</span>
                </div>
              );
            }
            const color = p.tone === "emph" ? "var(--fg)" : "var(--fg-2)";
            return (
              <p key={i} style={{ ...baseStyle, color }}>{p.text}</p>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────── LOGO MARQUEE ────────────────────────── */
const LOGOS = [
  { src: "assets/logos/skadden.png",    name: "Skadden",          h: 22 },
  { src: "assets/logos/harvard.svg",    name: "Harvard",          h: 30 },
  { src: "assets/logos/sls.png",        name: "Stanford Law",     h: 36 },
  { src: "assets/logos/microsoft.svg",  name: "Microsoft",        h: 22 },
  { src: "assets/logos/oracle.svg",     name: "Oracle",           h: 18 },
  { src: "assets/logos/ibm.png",        name: "IBM",              h: 26 },
  { src: "assets/logos/kpmg.png",       name: "KPMG",             h: 22 },
  { src: "assets/logos/carta.png",      name: "Carta",            h: 28 },
  { src: "assets/logos/icr.jpg",        name: "ICR",              h: 28 },
  { src: "assets/logos/height.jpg",     name: "Height Capital",   h: 32 },
  { src: "assets/logos/tensorwave.png", name: "TensorWave",       h: 20 },
  { src: "assets/logos/unionbank.png",  name: "Union Bank",       h: 26 },
  { src: "assets/logos/sunedison.png",  name: "SunEdison",        h: 22 },
  { src: "assets/logos/sbs.png",        name: "Strange Brew Strategies", h: 30 },
  { src: "assets/logos/tgl.png",        name: "The Greater Light", h: 38 },
];

function LogoMarquee() {
  return (
    <section
      className="tight"
      data-screen-label="02b Logo wall"
      style={{
        background: "#FFFFFF",
        color: "#1B1810",
        borderTop: "1px solid rgba(40,36,28,0.10)",
        borderBottom: "1px solid rgba(40,36,28,0.10)",
        padding: "60px 0",
      }}>
      <div className="wrap" style={{ marginBottom: 36 }}>
        <span
          className="mono cap"
          style={{
            color: "rgba(40,36,28,0.55)",
            letterSpacing: "0.14em",
            fontSize: 11,
          }}>
          The team comes from
        </span>
      </div>
      <div
        style={{
          position: "relative",
          overflow: "hidden",
          maskImage: "linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)",
          WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)",
        }}>
        <div
          className="logo-marquee-track"
          style={{
            display: "flex",
            width: "max-content",
            alignItems: "center",
            gap: 56,
            animation: "logoMarqueeScroll 60s linear infinite",
          }}>
          {[0, 1].map((dupe) => (
            <React.Fragment key={dupe}>
              {LOGOS.map((l, i) => (
                <img
                  key={`${dupe}-${i}`}
                  src={l.src}
                  alt={l.name}
                  draggable="false"
                  className="no-filter"
                  style={{
                    height: l.h * 1.5,
                    width: "auto",
                    objectFit: "contain",
                    display: "block",
                    opacity: 0.85,
                    transition: "opacity .25s ease",
                    flexShrink: 0,
                    userSelect: "none",
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.opacity = "1"}
                  onMouseLeave={(e) => e.currentTarget.style.opacity = "0.85"}
                />
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes logoMarqueeScroll {
          0%   { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }
        .logo-marquee-track:hover {
          animation-play-state: paused;
        }
      `}</style>
    </section>
  );
}

/* ────────────────────────── VALUES ────────────────────────── */
function ValueIcon({ kind }) {
  const c = "var(--accent)";
  const dim = "var(--fg-3)";
  const common = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none", style: { display: "block" } };
  if (kind === "excellence") {
    // Concentric precision target
    return (
      <svg {...common}>
        <circle cx="18" cy="18" r="14" stroke={dim} strokeWidth="1" />
        <circle cx="18" cy="18" r="9" stroke={dim} strokeWidth="1" />
        <circle cx="18" cy="18" r="4" stroke={c} strokeWidth="1.25" />
        <circle cx="18" cy="18" r="1.25" fill={c} />
        <line x1="18" y1="2" x2="18" y2="6" stroke={dim} strokeWidth="0.8" />
        <line x1="18" y1="30" x2="18" y2="34" stroke={dim} strokeWidth="0.8" />
        <line x1="2" y1="18" x2="6" y2="18" stroke={dim} strokeWidth="0.8" />
        <line x1="30" y1="18" x2="34" y2="18" stroke={dim} strokeWidth="0.8" />
      </svg>);

  }
  if (kind === "accountability") {
    // Linked rings
    return (
      <svg {...common}>
        <circle cx="13" cy="18" r="8" stroke={dim} strokeWidth="1.25" />
        <circle cx="23" cy="18" r="8" stroke={c} strokeWidth="1.25" />
        <path d="M 21 14 A 8 8 0 0 1 21 22" stroke="var(--bg)" strokeWidth="2" fill="none" />
      </svg>);

  }
  if (kind === "sustainability") {
    // Growing seedling / arrow
    return (
      <svg {...common}>
        <line x1="18" y1="32" x2="18" y2="14" stroke={dim} strokeWidth="1.25" strokeLinecap="round" />
        <path d="M 18 16 Q 12 14 10 8 Q 16 8 18 14" stroke={c} strokeWidth="1.25" fill="none" strokeLinejoin="round" />
        <path d="M 18 20 Q 24 18 26 12 Q 20 12 18 18" stroke={c} strokeWidth="1.25" fill="none" strokeLinejoin="round" />
        <line x1="10" y1="32" x2="26" y2="32" stroke={dim} strokeWidth="0.75" />
      </svg>);

  }
  return null;
}

function Values() {
  const values = [
  {
    icon: "excellence",
    name: "Excellence",
    body: "We hold a high bar for the technology we build, the analysis we deliver, and the way we support our customers. Infrastructure work is high-stakes. Our work has to be clear, careful, and useful."
  },
  {
    icon: "accountability",
    name: "Accountability",
    body: "We do what we say we will do. We communicate directly, own outcomes, and work with the trust required for confidential, capital-intensive projects."
  },
  {
    icon: "sustainability",
    name: "Sustainability",
    body: "We are here to help accelerate the infrastructure the world needs: cleaner energy, more resilient systems, and better use of capital. We also believe durable companies are built by teams that can do excellent work sustainably."
  }];

  return (
    <section data-screen-label="03 Values" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">Our values</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>
            How we work.
          </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)"
        }}>
          {values.map((v) =>
          <div key={v.name} style={{
            padding: "40px 36px 44px",
            borderRight: "1px solid var(--border-2)",
            borderBottom: "1px solid var(--border-2)",
            display: "flex",
            flexDirection: "column",
            gap: 22,
            minHeight: 320
          }}>
              <ValueIcon kind={v.icon} />
              <div className="display" style={{
              fontSize: 30, letterSpacing: "-0.01em", lineHeight: 1.1
            }}>
                {v.name}
              </div>
              <p style={{
              margin: 0, fontSize: 15, lineHeight: 1.6, color: "var(--fg-2)"
            }}>
                {v.body}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────── LEADERSHIP ────────────────────────── */
function Leadership() {
  const people = [
    {
      id: "maryssa",
      name: "Maryssa Barron, Esq.",
      role: "Founder & CEO",
      chips: ["Stanford Law", "Harvard", "D.C. Bar", "Edison Energy", "LevelTen"],
      bio: [
        "Maryssa founded BuildQ to bring modern software, AI, and project expertise to the execution challenges slowing down critical infrastructure. She has worked across the renewable energy project lifecycle, from development and diligence to financing and operations, and brings deep experience in project finance, law, and creative contracting.",
        "Before BuildQ, Maryssa held renewable energy advisory roles at Edison Energy and LevelTen Energy and served as Chief Operating Officer of a global independent power producer. She holds a bachelor\u2019s degree from Harvard University and a J.D. from Stanford Law School, and is a licensed attorney in Washington, D.C."
      ]
    },
    {
      id: "harshan",
      name: "Harshan Jeyakumar, CFA",
      role: "Head of Capital Markets",
      chips: ["CFA", "20+ yrs", "Project finance", "Clean energy"],
      bio: [
        "Harshan brings more than 20 years of project finance experience to BuildQ. He has advised developers and investors on transaction structuring, capital allocation, financial modeling, policy frameworks, and risk management across complex clean energy projects.",
        "At BuildQ, Harshan helps ensure the platform reflects how capital actually evaluates, finances, and moves infrastructure projects."
      ]
    },
    {
      id: "michael",
      name: "Michael Maddox",
      role: "Head of Engineering",
      chips: ["20+ yrs", "$1B startup scale", "Cloud infra", "NLP", "AI"],
      bio: [
        "Michael leads BuildQ\u2019s engineering team, bringing more than 20 years of experience building and scaling software systems. He has architected cloud-based platforms, led technical teams, and helped scale a startup to a $1B valuation.",
        "His background spans data processing, search, cloud infrastructure, NLP, and AI \u2014 the technical foundation behind BuildQ\u2019s infrastructure intelligence platform."
      ]
    },
    {
      id: "kate",
      name: "Kate D\u2019Orazio",
      role: "Head of Product",
      chips: ["Oracle", "Microsoft", "LLMs", "Computer vision", "Healthcare AI"],
      bio: [
        "Kate leads product at BuildQ, bringing nearly a decade of experience building and scaling AI products at Oracle and Microsoft.",
        "She has shipped computer vision, document understanding, and large language model products generating millions of monthly API calls, and has built AI-powered features for regulated healthcare platforms. At BuildQ, Kate focuses on turning advanced AI into practical tools for infrastructure teams working in complex, high-stakes environments."
      ]
    }
  ];

  const [expandedId, setExpandedId] = React.useState("maryssa");

  return (
    <section data-screen-label="04 Leadership">
      <div className="wrap">
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <span className="eyebrow">Leadership</span>
          <h2 className="display display-2" style={{ marginTop: 18 }}>
            The team.
          </h2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--border-2)",
          borderLeft: "1px solid var(--border-2)"
        }}>
          {people.map((p) => {
            const open = expandedId === p.id;
            return (
              <div key={p.id}
                data-comment-anchor={`leader-${p.id}`}
                style={{
                  borderRight: "1px solid var(--border-2)",
                  borderBottom: "1px solid var(--border-2)",
                  display: "flex",
                  flexDirection: "column",
                  background: open
                    ? "linear-gradient(180deg, rgba(229,162,105,0.04) 0%, transparent 100%)"
                    : "transparent",
                  transition: "background .3s ease"
                }}>
                <div style={{
                  display: "grid",
                  gridTemplateColumns: "minmax(160px, 200px) 1fr",
                  gap: 28,
                  padding: "32px 32px 24px",
                  alignItems: "start"
                }}>
                  {/* Portrait */}
                  <div
                    style={{
                      position: "relative",
                      overflow: "hidden",
                      border: "1px solid var(--border-2)",
                      aspectRatio: "4/5",
                      background: "var(--surface)"
                    }}>
                    <img
                      src={`assets/headshots/${p.id}.jpg`}
                      alt={p.name}
                      className="no-filter"
                      style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                        objectPosition: "center top",
                        display: "block"
                      }} />
                  </div>

                  {/* Name / role / chips */}
                  <div style={{ display: "flex", flexDirection: "column", gap: 14, minWidth: 0 }}>
                    <div>
                      <div className="display" style={{ fontSize: 24, letterSpacing: "-0.01em", lineHeight: 1.1 }}>
                        {p.name}
                      </div>
                      <div className="mono cap" style={{ marginTop: 6, color: "var(--fg-3)" }}>{p.role}</div>
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                      {p.chips.map((chip) => (
                        <span key={chip} style={{
                          padding: "4px 10px",
                          fontFamily: "var(--font-mono)",
                          fontSize: 10.5,
                          letterSpacing: "0.04em",
                          color: "var(--fg-2)",
                          border: "1px solid var(--border-2)",
                          borderRadius: 999,
                          whiteSpace: "nowrap"
                        }}>{chip}</span>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Expand toggle */}
                <button
                  type="button"
                  onClick={() => setExpandedId(open ? null : p.id)}
                  style={{
                    margin: "0 32px 0",
                    padding: "14px 0",
                    borderTop: "1px solid var(--border)",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    color: open ? "var(--accent)" : "var(--fg-2)",
                    cursor: "pointer",
                    transition: "color .2s ease"
                  }}>
                  <span className="mono cap" style={{ fontSize: 11, letterSpacing: "0.12em" }}>
                    {open ? "Hide bio" : "Read bio"}
                  </span>
                  <span
                    aria-hidden
                    style={{
                      width: 20, height: 20,
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      transition: "transform .3s ease",
                      transform: open ? "rotate(45deg)" : "rotate(0deg)"
                    }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                      <path d="M5 1 V9 M1 5 H9" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>

                {/* Bio */}
                <div style={{
                  maxHeight: open ? 800 : 0,
                  overflow: "hidden",
                  transition: "max-height .55s cubic-bezier(0.22,1,0.36,1)"
                }}>
                  <div style={{ padding: "18px 32px 32px" }}>
                    {p.bio.map((para, j) => (
                      <p key={j} style={{
                        margin: j === 0 ? "0 0 14px" : "0",
                        fontSize: 14.5,
                        lineHeight: 1.6,
                        color: j === 0 ? "var(--fg)" : "var(--fg-2)"
                      }}>{para}</p>
                    ))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────── JOIN US ────────────────────────── */
function JoinUs() {
  return (
    <section data-screen-label="05 Join us" style={{ background: "var(--bg-2)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <span className="eyebrow">BUILD WITH US</span>
          <h2 className="display display-2" style={{ marginTop: 18, marginBottom: 22 }}>
            We&rsquo;re hiring.
          </h2>
          <p className="lede" style={{ maxWidth: 480 }}>
            BuildQ is a small team building software for one of the most important problems of the decade. If you&rsquo;ve worked inside infrastructure, capital markets, law, or AI — and want to build the tools you wish you had — we&rsquo;d like to talk.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <a href="mailto:hello@buildq.ai" className="btn" style={{ alignSelf: "flex-start" }}>
            hello@buildq.ai
            <span className="arrow" aria-hidden>→</span>
          </a>
          <a href="contact" className="btn btn-ghost" style={{ alignSelf: "flex-start" }}>
            Get Started
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>);

}

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

/* ────────────────────────── APP ────────────────────────── */
function App() {
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Mission />
        <LogoMarquee />
        <Values />
        <Leadership />
        <JoinUs />
      </main>
      <Footer />
    </>);

}

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