/* home.jsx — KASAU home one-pager. Exports HomePage to window. */
const { Placeholder: PH, Btn: B, Kicker: K, Reveal: R, Ticker: TK, HudGraphic: HG } = window;

function HeroSplit() {
  return (
    <section className="hero hero-split wrap" data-node="ROOT">
      <div className="hero-copy">
        <K>Senior AI &amp; ML Engineering</K>
        <h1 className="display hero-h1" style={{ viewTransitionName: "hero-title" }}>
          AI&nbsp;SYSTEMS<br/>WITH&nbsp;AN<br/><span className="em">EDGE</span>
        </h1>
        <p className="lead hero-sub" style={{ marginTop: 32 }}>
          KASAU is a senior team of data science, AI &amp; ML
          engineers. We design, build, and operate intelligent systems —
          agentic, predictive, and safe — as embedded staff or end-to-end
          delivery.
        </p>
        <div className="hero-actions">
          <B to="contact" arrow>Start a project</B>
          <B to="services" variant="ghost">See capabilities</B>
        </div>
      </div>
      <div className="hero-art hero-window hero-net-wrap">
        <span className="tick tl"></span><span className="tick tr"></span>
        <span className="tick bl"></span><span className="tick br"></span>
        <span className="hw-id">SYS·01</span>
        <window.HeroNet id="SYS01" />
        <span className="hw-tag">LIVE // KASAU</span>
      </div>
    </section>
  );
}

function HeroCentered() {
  return (
    <section className="hero hero-centered wrap" data-node="ROOT">
      <K center>Senior AI &amp; ML Engineering</K>
      <h1 className="display hero-h1" style={{ viewTransitionName: "hero-title" }}>
        AI SYSTEMS WITH AN <span className="em">EDGE</span>
      </h1>
      <p className="lead hero-sub">
        A senior team of data science, AI &amp; ML engineers. We ship
        intelligent systems — agentic, predictive, and safe — and stay
        accountable for what they do in production, embedded or end-to-end.
      </p>
      <div className="hero-actions">
        <B to="contact" arrow>Start a project</B>
        <B to="services" variant="ghost">Our capabilities</B>
      </div>
      <div className="hero-art hero-window hero-net-wrap" style={{ minHeight: "clamp(300px,40vw,540px)" }}>
        <span className="tick tl"></span><span className="tick tr"></span>
        <span className="tick bl"></span><span className="tick br"></span>
        <span className="hw-id">SYS·02</span>
        <window.HeroNet id="SYS02" />
        <span className="hw-tag">LIVE // KASAU</span>
      </div>
    </section>
  );
}

function HeroEditorial() {
  const caps = [
    ["Agentic systems", "built & operated"],
    ["AI safety", "engineered in, not bolted on"],
    ["Outstaff / Outsource", "the same senior team"],
  ];
  return (
    <section className="hero hero-editorial wrap" data-node="ROOT">
      <K>Senior AI &amp; ML Engineering</K>
      <h1 className="display hero-h1" style={{ viewTransitionName: "hero-title" }}>
        AI SYSTEMS WITH AN <span className="em">EDGE</span>
      </h1>
      <div className="hero-grid">
        <div>
          <p className="lead" style={{ maxWidth: "48ch" }}>
            We embed senior engineers and ML researchers into teams that need
            intelligence to work in the real world — from autonomous agents to
            forecasting to safety-critical models. Or we take the whole problem
            end-to-end.
          </p>
          <div className="hero-actions">
            <B to="contact" arrow>Start a project</B>
            <B to="expertise" variant="ghost">Our expertise</B>
          </div>
        </div>
        <div className="hero-statcol">
          {caps.map(([n, l], i) => (
            <div key={i} className="hero-cap">
              <div className="display hero-cap-t">{n}</div>
              <div className="mono-sm" style={{ color: "var(--ink-3)", marginTop: 8 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "centered") return <HeroCentered />;
  if (variant === "editorial") return <HeroEditorial />;
  return <HeroSplit />;
}

function Statement() {
  return (
    <section className="section wrap" data-node="MANDATE">
      <div className="statement-grid">
        <div className="label-col">
          <span className="mono" style={{ color: "var(--ink-3)" }}>[ 01 ]</span>
          <span className="mono" style={{ color: "var(--ink-3)" }}>Mandate</span>
        </div>
        <R className="statement-body">
          KASAU builds the intelligence layer for teams that need it
          to actually work. From autonomous agents to forecasting to
          safety-critical models, we design, train, and operate systems that
          hold up <span className="em">under real load</span> — with the rigor
          production demands.
        </R>
      </div>
    </section>
  );
}

function ServicesTeaser() {
  return (
    <section className="section light" data-node="CAPABILITIES">
      <div className="wrap">
      <div className="svc-head">
        <div>
          <K>What we do</K>
          <h2 className="display" style={{ fontSize: "clamp(34px,5.5vw,74px)", marginTop: 16, marginBottom: 0 }}>
            Eight practices,<br/>one delivery standard.
          </h2>
        </div>
        <B to="services" variant="ghost">All services</B>
      </div>
      <div className="svc-grid" style={{ marginTop: 28 }}>
        {window.SERVICES.map((s, i) => (
          <R className="svc-cell" key={s.no} delay={(i % 3) * 70}>
            <div className="svc-no">#{s.no}<span className="nm">{s.tag}</span></div>
            <h3>{s.title}</h3>
            <p>{s.blurb}</p>
            <a className="svc-link" href="services" onClick={(e)=>{e.preventDefault();window.__navigate("services");}}>
              Learn more →
            </a>
          </R>
        ))}
      </div>
      </div>
    </section>
  );
}

function EngageTeaser() {
  return (
    <section className="section wrap" data-node="ENGAGEMENT" style={{ paddingTop: 0 }}>
      <div className="svc-head">
        <div>
          <K>How we work</K>
          <h2 className="display" style={{ fontSize: "clamp(34px,5.5vw,74px)", marginTop: 16, marginBottom: 0 }}>
            Embedded, or<br/>end-to-end.
          </h2>
        </div>
        <B to="engagement" variant="ghost">Engagement</B>
      </div>
      <div className="engage-models" style={{ marginTop: 28 }}>
        {window.ENGAGEMENTS.map((e, i) => (
          <R className="engage-card" key={e.k} delay={i * 90}>
            <div className="ec-mode">{e.mode}<span className="k">/ {e.k}</span></div>
            <h3>{e.t}</h3>
            <p>{e.d}</p>
            <div className="ec-tags">
              {e.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
            </div>
          </R>
        ))}
      </div>
      <div className="steps" data-node="PROCESS" style={{ marginTop: 4 }}>
        {window.STEPS.map((s, i) => (
          <R className="step" key={s.n} delay={(i % 4) * 70}>
            <div className="sn">{s.n}</div>
            <h4>{s.t}</h4>
            <p>{s.d}</p>
          </R>
        ))}
      </div>
    </section>
  );
}

function HomeContact() {
  const CForm = window.ContactForm;
  return (
    <section className="section light" id="contact" data-node="CONTACT" style={{ position: "relative" }}>
      <div className="hazard" style={{ position: "absolute", top: 0, left: 0, right: 0 }}></div>
      <div className="wrap">
        <div style={{ marginBottom: "clamp(30px,4vw,52px)" }}>
          <K>Start a conversation</K>
          <h2 className="display" style={{ fontSize: "clamp(34px,5.5vw,80px)", marginTop: 16, marginBottom: 18, lineHeight: 0.98 }}>
            Bring us the system<br/>you can't afford<br/>to get wrong.
          </h2>
          <p className="lead" style={{ maxWidth: "52ch", margin: 0 }}>
            Tell us what you're building and where it hurts. A senior engineer —
            not a salesperson — replies within one business day.
          </p>
        </div>
        {CForm ? <CForm /> : null}
      </div>
    </section>
  );
}

function HomePage({ heroVariant }) {
  return (
    <div className="page">
      <Hero variant={heroVariant} />
      <TK items={["Agentic Systems","AI Safety","Forecasting","Behavioral ML","LLM Integration","Local & Fine-Tuned","Classical ML","Full Platforms"]} />
      <Statement />
      <hr className="rule" />
      <ServicesTeaser />
      <EngageTeaser />
      <HomeContact />
    </div>
  );
}

window.HomePage = HomePage;