/* eslint-disable */
// How we work, content brief v4 section 5 (Draft throughout).
// The journey, the expanded philosophy, the values, and the two commercial shapes.

const JOURNEY = [
  {
    n: "1", tone: "#001A55", next: "#00655F", name: "The first conversation",
    body: "We start by listening. Where is your organisation up to with AI, what's prompted the interest, and what's worrying you about it? By the end of the first conversation you'll know whether Foundations or an Accelerator is the right fit, and roughly what it would involve. No obligation follows from talking to us.",
  },
  {
    n: "2", tone: "#00655F", next: "#0119B7", name: "Shaping the engagement",
    body: "Together we work out where to start and how deep to go. For Foundations, that means choosing the sequence across value, controls and literacy that suits your organisation, and the depth of each. For an Accelerator, it means properly understanding the process before anything is designed. You'll have a clear scope and a clear price before we begin.",
  },
  {
    n: "3", tone: "#0119B7", next: "#0A6C7D", name: "Delivery",
    body: "We plan, we confirm with you, and then we build or deliver. Nothing goes to your board, your team or your systems without you seeing it first. We work within the platforms you already trust, we use plain language, and we never invent: if we don't know something about your business, we ask.",
  },
  {
    n: "4", tone: "#0A6C7D", name: "Staying with you",
    body: "Every engagement ends with a proper handover, so what we've built or set up keeps working without us. And where you'd rather we stayed close, our AI Partnership keeps us alongside you: supporting your people, managing what's been built, and helping you take the next step when you're ready.",
  },
];

const SHAPES = [
  {
    key: "initiatives", tone: "strategy", tag: "Per project", icon: "target",
    name: "Targeted AI Initiatives",
    desc: "One clearly defined piece of work at a time, with a fixed price agreed up front and a clear finish line. We scope it, deliver it, hand it over, then you decide what comes next.",
    fits: "You want a contained piece of work, and the freedom to decide what's next once you've seen the results.",
  },
  {
    key: "partnership", tone: "enable", tag: "Ongoing", icon: "handshake",
    name: "AI Partnership",
    desc: "We stay alongside you as your ongoing AI partner: supporting your people, managing what's been built, and agreeing what to tackle next as priorities shift. It runs as a simple monthly arrangement.",
    fits: "You want a partner who stays in the room, and momentum that carries between projects.",
  },
];

const VALUES = [
  { name: "You come first", body: "We act in your interests, whichever platform that points to. We don't resell software, and we'll tell you when the answer is to do nothing." },
  { name: "Local loyalty", body: "Australian owned and Australian delivered, working to Australian privacy expectations, with people you can actually get on the phone." },
  { name: "You are family", body: "We stay with the organisations we work with. Handover is a promise, not an exit, and the door stays open after the engagement closes." },
];

/* Journey, option I: the section pins while the four steps cross-fade past a
   ghosted numeral. */
function JourneyPinned() {
  const [i, set] = React.useState(0);
  const w = React.useRef(null);
  const stage = React.useRef(null);
  React.useEffect(() => {
    const on = () => {
      const el = w.current; if (!el) return;
      const r = el.getBoundingClientRect();
      // The pin lasts until the sticky stage reaches the bottom of the wrapper,
      // so the span is the wrapper minus the STAGE, not minus the viewport.
      // Assuming a viewport-tall stage made the four steps finish early and left
      // the reader parked on step four.
      const stageH = stage.current ? stage.current.offsetHeight : window.innerHeight;
      const span = r.height - stageH;
      const p = Math.min(1, Math.max(0, -r.top / Math.max(1, span)));
      set(Math.min(3, Math.floor(p * 4)));
    };
    on();
    window.addEventListener("scroll", on, { passive: true });
    window.addEventListener("resize", on);
    return () => { window.removeEventListener("scroll", on); window.removeEventListener("resize", on); };
  }, []);
  return (
    <div className="pin-wrap" ref={w}>
      <div className="pin-stage" ref={stage}>
        <div className="pin-inner">
        {/* The heading sits inside the pinned stage so it travels with the steps
            as one group. Left outside, a full-height stage opened a ~500px hole
            between the heading and step one. */}
        <div className="section-head pin-head">
          <Eyebrow>The journey</Eyebrow>
          <h2 className="h-section">Four parts, start to handover.</h2>
        </div>
        <div className="pin-body">
          <div className="pin-num">
            {JOURNEY.map((s, k) => (
              <span key={s.n} className={i === k ? "is-on" : ""} style={{ ["--jt"]: s.tone }}>0{s.n}</span>
            ))}
          </div>
          <div className="pin-panels">
            {JOURNEY.map((s, k) => (
              <div key={s.n} className={`pin-p ${i === k ? "is-on" : ""}`}>
                <h3>{s.name}</h3>
                <p>{s.body}</p>
              </div>
            ))}
            <div className="pin-ticks">{JOURNEY.map((s, k) => (<i key={s.n} className={i === k ? "is-on" : ""} />))}</div>
          </div>
        </div>
        </div>
      </div>
    </div>
  );
}

/* Journey on small screens: one part at a time.
   The desktop version is scroll-pinned over 240vh, which on a phone would be a
   long stretch of scroll-jacking, so the same one-panel idea is driven by taps
   and swipes instead. Both this and JourneyPinned render; CSS shows one. */
function JourneySteps() {
  const [i, set] = React.useState(0);
  const track = React.useRef(null);

  // Index from whichever panel sits nearest the scroll origin, so the tab row
  // stays right after a swipe and the maths does not depend on the card gap.
  const sync = () => {
    const el = track.current; if (!el) return;
    let best = 0, bestDist = Infinity;
    Array.prototype.forEach.call(el.children, (c, k) => {
      const d = Math.abs(c.offsetLeft - el.scrollLeft);
      if (d < bestDist) { bestDist = d; best = k; }
    });
    set(best);
  };

  const goTo = (k) => {
    const el = track.current; if (!el) return;
    const c = el.children[k]; if (!c) return;
    el.scrollTo({ left: c.offsetLeft, behavior: "smooth" });
    set(k);
  };

  return (
    <div className="jstep">
      <div className="section-head jstep-head">
        <Eyebrow>The journey</Eyebrow>
        <h2 className="h-section">Four parts, start to handover.</h2>
      </div>

      <div className="jstep-tabs" role="tablist" aria-label="The four parts of the journey">
        {JOURNEY.map((s, k) => (
          <button key={s.n} type="button" role="tab" aria-selected={i === k}
            className={`jstep-tab ${i === k ? "is-on" : ""}`}
            style={{ ["--jt"]: s.tone }} onClick={() => goTo(k)}>
            0{s.n}
          </button>
        ))}
      </div>

      <div className="jstep-track" ref={track} onScroll={sync}>
        {JOURNEY.map((s) => (
          <article className="jstep-p" key={s.n} style={{ ["--jt"]: s.tone }}>
            <h3>{s.name}</h3>
            <p>{s.body}</p>
          </article>
        ))}
      </div>
    </div>
  );
}

/* Journey, option J: one step at a time, set like a magazine page. */
function JourneyEditorial() {
  const [i, set] = React.useState(0);
  React.useEffect(() => {
    const k = (e) => {
      if (e.key === "ArrowRight") set((v) => Math.min(3, v + 1));
      if (e.key === "ArrowLeft") set((v) => Math.max(0, v - 1));
    };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, []);
  return (
    <div className="ed" style={{ ["--jt"]: JOURNEY[i].tone }}>
      <div className="ed-panels">
        {JOURNEY.map((s, k) => (
          <div key={s.n} className={`ed-p ${i === k ? "is-on" : ""}`}>
            <h3>{s.name}</h3>
            <p>{s.body}</p>
          </div>
        ))}
      </div>
      <div className="ed-side">
        <div className="ed-big">0{JOURNEY[i].n}</div>
        <div className="ed-of">of four · arrow keys work</div>
        <div className="ed-arrows">
          <button type="button" onClick={() => set((v) => Math.max(0, v - 1))} disabled={i === 0} aria-label="Previous step">←</button>
          <button type="button" onClick={() => set((v) => Math.min(3, v + 1))} disabled={i === 3} aria-label="Next step">→</button>
        </div>
      </div>
    </div>
  );
}

/* Journey, option A: the horizontal numbered rail. */
function JourneyRail() {
  const [jstep, setJstep] = React.useState(0);
  return (
    <div className="jrny">
      <div className="jrny-rail" role="tablist" aria-label="The journey">
        {JOURNEY.map((s, i) => (
          <button key={s.n} type="button" role="tab" id={`jrny-t${i}`} aria-selected={jstep === i} aria-controls={`jrny-p${i}`} className={`jrny-tab ${jstep === i ? "is-on" : ""}`} style={{ ["--jt"]: s.tone }} onClick={() => setJstep(i)}>
            <span className="jrny-num">{s.n}</span>
            <span className="jrny-nm">{s.name}</span>
          </button>
        ))}
      </div>
      <div className="jrny-panels">
        {JOURNEY.map((s, i) => (
          <div key={s.n} role="tabpanel" id={`jrny-p${i}`} aria-labelledby={`jrny-t${i}`} className={`jrny-p ${jstep === i ? "is-on" : ""}`} style={{ ["--jt"]: s.tone }}>
            <h3 className="jrny-h">{s.name}</h3>
            <p>{s.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function HowWeWorkV2Screen({ go, t }) {
  return (
    <div data-screen-label="04 How we work">
      {/* HERO */}
      <section className="hero dot-grid acc-hero">
        <div className="container">
          <Crumbs items={[{ label: "Home", to: "home" }, "How we work"]} go={go} />
          <h1 className="h-display" style={{ maxWidth: "16ch" }}>How we <em>work</em></h1>
          <p className="lede" style={{ maxWidth: "60ch" }}>
            AI adoption is a journey, and every organisation's looks a little different. But the way we
            walk it with you is consistent, and it's worth knowing what to expect before we start.
          </p>
        </div>
      </section>

      {/* THE JOURNEY */}
      <section className="section section--white">
        <div className="container">
          {/* The pinned style renders its own heading inside the sticky stage. */}
          {t.journeyStyle !== "pinned" && (
            <div className="section-head">
              <Eyebrow>The journey</Eyebrow>
              <h2 className="h-section">Four parts, start to handover.</h2>
            </div>
          )}
          {t.journeyStyle === "pinned"
              ? (<React.Fragment><JourneyPinned /><JourneySteps /></React.Fragment>)
              : t.journeyStyle === "editorial" ? <JourneyEditorial /> : <JourneyRail />}
        </div>
      </section>

      {/* WHAT WE BELIEVE */}
      <section className="section section--white believe-sec">
        <div className="container">
          <div className="section-head">
            <h2 className="h-section">What we believe</h2>
          </div>
          <div className="believe believe--flat" data-reveal>
            <div className="blf" style={{ ["--bl"]: "#001A55" }}>
              <p className="blf-big">We're not a tech consulting company, and that's a <strong>deliberate choice.</strong></p>
              <div className="blf-col">
              <p className="blf-sm">
                Technology is the easy half of AI adoption. The harder half is people: helping a team trust a new way of working, giving
                a board the confidence to say yes, and making sure nobody feels the change is being done to
                them. That's why literacy and controls sit beside value in everything we do, and why we
                spend as much time with your people as with your systems.
              </p>
              </div>
            </div>
            <div className="blf" style={{ ["--bl"]: "#00655F" }}>
              <p className="blf-big">AI should be adopted <strong>safely, or not at all.</strong></p>
              <div className="blf-col">
              <p className="blf-sm">
                The organisations that get lasting value from AI are the ones that put guardrails in early,
                choose their tools deliberately, and bring their people along. Shortcuts on any of those
                catch up with you.
              </p>
              </div>
            </div>
            <div className="blf" style={{ ["--bl"]: "#0119B7" }}>
              <p className="blf-big">We use <strong>what we recommend.</strong></p>
              <div className="blf-col">
              <p className="blf-sm">
                The AI tools we suggest to clients are the ones we work with every day in our own business,
                evaluated and kept honest{IA_MVP() ? "" : " in our AI Toolbox"}. When we say something works, it's because
                we've lived with it.
              </p>
              {!IA_MVP() && <LinkOut onClick={() => go("toolbox")}>See the AI Toolbox</LinkOut>}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES, reference register: light ruled rows on the paper ground */}
      <section className="section section--paper values-sec">
        <div className="container">
          <div className="values-flat">
            <div className="values-flat-head">
              <Eyebrow>Our values</Eyebrow>
              <h2 className="values-band-h">Three things we hold to.</h2>
            </div>
            <div className="values-photo"><SiteImage path="assets/photos/values-team.webp" alt="The Intelligence Assist team around a table" fit="cover" /></div>
            <div className="values-cols3">
              {VALUES.map((v, i) => (
                <div className="values-col3" key={v.name} style={{ ["--vt"]: ["#001A55", "#00655F", "#0119B7"][i] }}>
                  <b>{v.name}</b>
                  <p>{v.body}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="hww-closer">
            <p className="hww-closer-t">
              If that sounds like the way you'd like to work, <em>the first conversation is a good place
              to start.</em>
            </p>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Talk to us <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>

    </div>
  );
}

window.HowWeWorkV2Screen = HowWeWorkV2Screen;