/* eslint-disable */
// Hero builds carried over from the options board (V4).
// photo + slab live in HomeV2; this file adds journey, dark, light and boxed.

const V4_HEAD = { line1: "Your AI journey,", em: "simplified", tail: " and supported." };
const V4_LEDE = "AI can help your people with the work they do today, and open up things you couldn't do before. We're Intelligence Assist. We help Australian organisations get both, starting with the foundations.";
const V4_SECTORS = ["Hospitality", "Allied health", "Architecture", "Water", "Logistics", "Construction"];

function V4Ticker() {
  return (
    <div className="v4-ticker v4-ticker--static">
      <div className="v4-ticker-row">
        <span className="v4-tick v4-tick--lead">Delivered across</span>
        {V4_SECTORS.map((s) => <span key={s} className="v4-tick">{s}</span>)}
        <span className="v4-tick v4-tick--more">and many more</span>
      </div>
    </div>
  );
}

function HeroV4({ variant, short, go }) {
  if (variant === "journey") {
    const pts = [
      ["Talk", "pt1"],
      ["Shape", "pt2"],
      ["Deliver", "pt3"],
      ["Stay with you", "pt4"],
    ];
    return (
      <section className="hero hero--v4 hero--journey">
        <div className="hj-art" aria-hidden="true">
          <img src="assets/hero-journey.png" alt="" />
          {pts.map(([label, cls]) => (
            <span key={cls} className={`hj-pt ${cls}`}>{label}</span>
          ))}
        </div>
        <div className="container hj-body">
          <h1 className="h-display">{V4_HEAD.line1}<br /><em>{V4_HEAD.em}</em>{V4_HEAD.tail}</h1>
          <p className="lede">{V4_LEDE}</p>
          <p className="delivered-across">Delivered across <strong>hospitality, allied health, architecture, water, logistics</strong> and <strong>construction</strong>.</p>
        </div>
      </section>
    );
  }

  if (variant === "warm") {
    return (
      <section className="hero hero--v4 hero--warm">
        <img className="wm-ic wm-ic1" src="assets/icons/ia-agentic.png" alt="" />
        <img className="wm-ic wm-ic2" src="assets/icons/ia-knowledge.png" alt="" />
        <img className="wm-ic wm-ic3" src="assets/icons/ia-conversation.png" alt="" />
        <img className="wm-ic wm-ic4" src="assets/icons/ia-task.png" alt="" />
        <div className="st-body">
          <h1 className="h-display">{V4_HEAD.line1} <strong>{V4_HEAD.em}</strong>{V4_HEAD.tail}</h1>
          <p className="lede">{V4_LEDE}</p>
        </div>
        <V4Ticker />
      </section>
    );
  }

  if (variant === "dark" || variant === "light") {
    return (
      <section className={`hero hero--v4 hero--statement${variant === "light" ? " hero--statement-lt" : ""}${short ? " is-short" : ""}`}>
        <div className="st-glow" aria-hidden="true"></div>
        <div className="st-body">
          <h1 className="h-display" style={{ fontSize: "clamp(42px,5.4cqw,78px)" }}>
            {V4_HEAD.line1} <strong>{V4_HEAD.em}</strong>{V4_HEAD.tail}
          </h1>
          <p className="lede">{V4_LEDE}</p>
          <button type="button" className="st-arrow" aria-label="See the two ways to start" onClick={() => { const d = document.querySelector(".door-split"); if (d) window.scrollTo({ top: window.scrollY + d.getBoundingClientRect().top - 28, behavior: "smooth" }); }}>↓</button>
        </div>
        <V4Ticker />
      </section>
    );
  }

  return (
    <section className="hero hero--v4 hero--boxed">
      <img className="bx-sh bx-sh1" src="assets/icons/ia-agentic.png" alt="" />
      <img className="bx-sh bx-sh2" src="assets/icons/ia-knowledge.png" alt="" />
      <img className="bx-sh bx-sh3" src="assets/icons/ia-conversation.png" alt="" />
      <img className="bx-sh bx-sh4" src="assets/icons/ia-task.png" alt="" />
      <img className="bx-sh bx-sh5" src="assets/icons/ia-data.png" alt="" />
      <div className="bx-body">
        <h1 className="h-display"><span>Your AI journey, simplified and supported.</span></h1>
        <p className="lede">{V4_LEDE}</p>
        <p className="bx-arrow" aria-hidden="true">↓</p>
      </div>
    </section>
  );
}

window.HeroV4 = HeroV4;