// Home.jsx — hero + sub-band + capabilities.
const { useEffect: useEffectH } = React;

function HomeHero({ onNavigate }) {
  return (
    <section className="hero">
      <div className="hero-media">
        <VideoBg
          src="media/home-hero.mp4"
          webm="media/home-hero.webm"
          poster="media/home-hero-poster.jpg"
          slotId="home-hero"
          slotPlaceholder="Drop media/home-hero.mp4 to replace this placeholder with a Palantir-style looping hero video."
        />
      </div>

      <div className="corner-ticks"><i></i><i></i></div>

      <div className="wrap hero-content">
        <div className="eyebrow" style={{ marginBottom: 24 }}>
          <span className="dot"></span>
          VETERAN-OPERATED · EST. 2014 · RENO NV
        </div>
        <h1 className="display lg" style={{ fontSize: "clamp(45px, 8vw, 128px)" }}>
          Operational software<br/>for the mission.
        </h1>

        <div className="hero-meta" style={{ marginTop: 60 }}>
          <div className="item"><b>01 /</b> &nbsp; Aviation Status Dashboard — fielded with the U.S. Army</div>
          <div className="item">2026 / Q1 &nbsp; <b>↗</b></div>
        </div>

        <div style={{ display: "flex", gap: 40, alignItems: "flex-end", flexWrap: "wrap" }}>
          <p className="lede" style={{ flex: "1 1 380px" }}>
            Lulius Innovation builds the digital infrastructure that aviation units, defense programs, and government organizations rely on. We don't try to be all things to all customers — we ship software that holds up in the field.
          </p>
          <div style={{ display: "flex", gap: 12, flexShrink: 0 }}>
            <a href="#/platform/aviation" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviation"); }} className="btn">
              See the platform <span className="arrow">→</span>
            </a>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn ghost">
              Engage <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    "U.S. ARMY",
    "U.S. SENATE",
    "National Guard",
    "DELOITTE",
    "Redlake Defense Systems",
    "Intelitext",
    "LOIS FOUNDATION",
    "TRITENSIL",
    "NCET",
  ];
  const doubled = [...items, ...items];
  return (
    <div className="logo-strip" style={{ paddingInline: 0 }}>
      <div className="label eyebrow mute">FIELDED IN OPERATIONAL ENVIRONMENTS</div>
      <div className="logo-strip-track">
        <div className="marquee">
          {doubled.map((t, i) => (
            <span className="item" key={i}>◆ &nbsp; {t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function Capabilities() {
  const caps = [
    {
      n: "01",
      title: "Custom Software",
      body: "Cookie-cutter products don't survive contact with real operational requirements. We build applications that do.",
    },
    {
      n: "02",
      title: "IT Risk Management",
      body: "Leaders deal in risk daily. Most overlook their data infrastructure. We surface the unknowns before they become incidents.",
    },
    {
      n: "03",
      title: "Information Security Auditing",
      body: "Independent review of controls, posture, and protections. The competitive edge starts with knowing where you stand.",
    },
    {
      n: "04",
      title: "IT Design & Strategy",
      body: "Commercial, government, non-profit. We translate technology initiatives into operational outcomes leaders can defend.",
    },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, marginBottom: 72 }} className="cap-head">
          <div className="idx"><span className="num">02 /</span> Capabilities</div>
          <div>
            <h2 className="h1" style={{ marginTop: 0, marginBottom: 24 }}>
              Four practices.<br/>One operating posture.
            </h2>
            <p className="lede mute">
              Our people are some of the industry's most experienced. We pick engagements where our experience compounds — and we say no to the rest.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 0, borderTop: "1px solid var(--line)" }}>
          {caps.map((c, i) => (
            <div key={c.n} className="tile" style={{
              border: "none",
              borderRight: i < caps.length - 1 ? "1px solid var(--line)" : "none",
              borderBottom: "1px solid var(--line)",
              background: "transparent",
              padding: "40px 28px 48px",
              gap: 20,
            }}>
              <div className="num">{c.n} ——</div>
              <h3 className="h3">{c.title}</h3>
              <p className="mute" style={{ marginTop: "auto", fontSize: 14, lineHeight: 1.55 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .cap-head { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

window.HomeHero = HomeHero;
window.TrustStrip = TrustStrip;
window.Capabilities = Capabilities;