/* eslint-disable */
// Home, the two-door router (content brief v4, section 2, flagged Final)
// carried on the original design language: dot-grid hero, sticker board,
// logo marquee, case cards, testimonials.

// Hero photography: real sessions, real people. Slots below are drop targets.

function HomeV2Screen({ go, t }) {
  const mvp = document.documentElement.getAttribute("data-mvp") === "on";
  const build = t.homeHero || (document.documentElement.dataset.hero === "photo" ? "photo" : "slab");
  return (
    <div className="home-page" data-screen-label="01 Home">
      {/* HERO — two builds share the slot: the Dark Blue slab (v2) and the
          full-bleed photo field (v3, data-hero="photo" on <html>). */}
      {window.HeroV4 && ["journey", "dark", "light", "warm", "boxed"].indexOf(build) > -1 ? <HeroV4 variant={build} short={t.heroLength !== "full bleed"} go={go} /> : build === "blocks" ? <HeroBlocks go={go} /> : build === "photo" ? (
      <section className="hero hero--photo">
        <div className={`hp-scatter${t.heroScatter === "ghosted" ? " hp-scatter--ghost" : ""}`} aria-hidden="true">
          <span className="sc sc-1"><img src="assets/icons/ia-agentic.png" alt="" /></span>
          <span className="sc sc-2"><img src="assets/icons/ia-task.png" alt="" /></span>
          <span className="sc sc-3"><img src="assets/icons/ia-conversation.png" alt="" /></span>
        </div>
        <div className="hp-body">
          <h1 className="h-display"><span className="ln">Your AI journey,</span><span className="ln"><em className="hand">simplified<svg viewBox="0 0 300 22" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M4 10 C 90 6, 200 13, 296 9 C 230 13, 110 16, 36 15" /></svg></em> and</span><span className="ln">supported.</span></h1>
          <p className="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.</p>
        </div>
        {t.belowHero === "in hero" && (
        <div className="bh-inhero">
          <span className="bh-lbl">Trusted by Australian organisations</span>
          <div className="bh-row bh-row--sm">
            {Array.from({ length: 5 }).map((_, i) => (
              <button key={i} type="button" className="bh-slot" aria-label={`Replace logo ${i + 1}`} onClick={(e) => { const r = e.currentTarget.querySelector("image-slot"); const inp = r && r.shadowRoot && r.shadowRoot.querySelector('input[type="file"]'); if (inp) inp.click(); }}>
                <image-slot id={`client-logo-${i + 1}`} placeholder={`Logo ${i + 1}`} shape="rect" fit="contain" />
              </button>
            ))}
          </div>
        </div>
        )}
      </section>
      ) : (
      <section className="hero hero--slab">
        <div className="container hero-grid">
          <div>
            <h1 className="h-display">
              Your AI journey,<br />
              <em>simplified</em> and supported.
            </h1>
            <p className="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.
            </p>
            <p className="delivered-across">Delivered across <strong>hospitality, allied health, architecture, water, logistics</strong> and <strong>construction</strong>.</p>
          </div>

          <div className="hero-visual">
            <HomeBoard variant={t.heroFigure} />
          </div>
        </div>
        <div className="hero-fade" aria-hidden="true">
          <svg viewBox="0 0 1440 120" preserveAspectRatio="none">
            <path d="M0 120 L0 78 C 240 18, 520 4, 760 30 C 1010 57, 1230 106, 1440 62 L1440 120 Z" fill="#fff" />
          </svg>
        </div>
      </section>
      )}

      {t.belowHero === "quiet row" && (
      <section className="section bh-quiet">
        <span className="bh-lbl">Trusted by Australian organisations</span>
        <div className="bh-row">
          {Array.from({ length: 6 }).map((_, i) => (
            <button key={i} type="button" className="bh-slot" aria-label={`Replace logo ${i + 1}`} onClick={(e) => { const r = e.currentTarget.querySelector("image-slot"); const inp = r && r.shadowRoot && r.shadowRoot.querySelector('input[type="file"]'); if (inp) inp.click(); }}>
              <image-slot id={`client-logo-${i + 1}`} placeholder={`Logo ${i + 1}`} shape="rect" fit="contain" />
            </button>
          ))}
        </div>
      </section>
      )}
      {t.belowHero === "sector line" && (
      <section className="section bh-sectors">
        <span className="bh-lbl">Delivered across</span>
        <div className="bh-sector-row">
          {["Hospitality", "Allied health", "Architecture", "Water", "Logistics", "Construction"].map((s, i) => (
            <span key={s} className="bh-sector">{s}</span>
          ))}
        </div>
      </section>
      )}
      {t.belowHero === "awards" && (
      <section className="section bh-awards">
        <span className="bh-lbl">Recognised</span>
        <div className="bh-awards-row">
          <img src="assets/award-ai-consultant-2024.png" alt="AI Consultant of the Year 2024" />
          <img src="assets/award-ai-female-leader-2024.png" alt="AI Female Leader of the Year 2024" />
        </div>
      </section>
      )}

      {/* THESIS + THE TWO DOORS */}
      <section className="section section--paper" style={{ paddingTop: 56, paddingBottom: 0 }} ref={(el) => { if (el && !el.__thesisIO) { const th = el.querySelector(".thesis-head"); if (!th) return; el.__thesisIO = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) e.target.classList.add("thesis-in"); }), { threshold: 0.55, rootMargin: "0px 0px -10% 0px" }); el.__thesisIO.observe(th); } }}>
        <div className="container">
          <div className={`thesis-head thesis-head--${(t.thesisVoice || "current").replace(" ", "-")}`}>
            {(!t.thesisVoice || t.thesisVoice === "current") && (
            <p className="thesis-statement">
              We've found AI adoption comes down to three things working together: knowing where the
              value is, having the right controls, and helping your people build confidence.
              <em> A little of each goes a long way, at any size.</em>
            </p>
            )}
            {t.thesisVoice === "weighted" && (
            <p className="thesis-statement">
              We've found AI adoption comes down to three things working together: <b>knowing where the
              value is</b>, <b>having the right controls</b>, and <b>helping your people build confidence</b>.
              <em>A little of each goes a long way, at any size.</em>
            </p>
            )}
            {t.thesisVoice === "big claim" && (
            <div>
              <p className="thesis-statement" style={{ maxWidth: "26ch" }}>We've found AI adoption comes down to three things working together.</p>
              <p className="thesis-sub">Knowing where the value is, having the right controls, and helping your people build confidence. A little of each goes a long way, at any size.</p>
            </div>
            )}
            {t.thesisVoice === "marked" && (
            <p className="thesis-statement">
              We've found AI adoption comes down to <span className="hand hand--thesis">three things<svg viewBox="0 0 300 22" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M4 10 C 90 6, 200 13, 296 9 C 230 13, 110 16, 36 15" /></svg></span> working together: knowing where the
              value is, having the right controls, and helping your people build confidence.
              <em> A little of each goes a long way, at any size.</em>
            </p>
            )}
            {t.belowHero === "one band" && (
            <div className="bh-inline-logos">
              <span className="bh-lbl">Trusted by Australian organisations</span>
              <div className="bh-row bh-row--sm">
                {Array.from({ length: 6 }).map((_, i) => (
                  <button key={i} type="button" className="bh-slot" aria-label={`Replace logo ${i + 1}`} onClick={(e) => { const r = e.currentTarget.querySelector("image-slot"); const inp = r && r.shadowRoot && r.shadowRoot.querySelector('input[type="file"]'); if (inp) inp.click(); }}>
                    <image-slot id={`client-logo-${i + 1}`} placeholder={`Logo ${i + 1}`} shape="rect" fit="contain" />
                  </button>
                ))}
              </div>
            </div>
            )}
          </div>
        </div>
        {(() => {
          const dcMap = { "teal + navy": "tealnavy", "blue + navy": "navypair", "teal + blue": "tealblue", "two navies": "onenavy", "pale + navy": "lightdark" };
          const dsMap = { "solid": "bleed", "cards": "cards", "question ruled": "qruled", "question card": "qcard", "question rows": "qrows" };
          const ds = dsMap[t.doorStyle] || "bleed";
          const q = ds === "qruled" || ds === "qcard" || ds === "qrows";
          return (
        <div className={`door-split door-split--${ds}${ds === "bleed" || q ? "" : " door-split--soft"}${q ? " door-split--q" : ""} snap-stop door-split--dc-${dcMap[t.doorColour] || "tealnavy"}`}>
            <button className="door-half door-half--e" onClick={() => go("ai-foundations")}>
              {q && <span className="door-q">“We know AI matters but not where to start.”</span>}
              <span className="door-body">
              <span className="door-num"></span>
              <span className="door-h3">AI Foundations</span>
              <span className="door-p">Work out where AI would actually help your business, put simple rules in place so it's used safely, and give your team the confidence to use it well. You'll finish knowing what's worth doing, what to leave alone, and where to start.</span>
              {!q && <span className="door-route"><em>A good place to start if you're not sure where to begin.</em></span>}
              <span className="door-go">See AI Foundations<Icon name="arrow-right" size={15} className="arrow" /></span>
              </span>
            </button>
            <button className="door-half door-half--b" onClick={() => go("accelerators")}>
              {q && <span className="door-q">“We know exactly what we want built.”</span>}
              <span className="door-body">
              <span className="door-num"></span>
              <span className="door-h3">AI Accelerators</span>
              <span className="door-p">We design and build the AI tools that do a specific job in your business, then look after them once they're running. Built around how your team already works, with the safeguards in place from the start.</span>
              {!q && <span className="door-route"><em>For when you already know what you need built.</em></span>}
              <span className="door-go">See AI Accelerators<Icon name="arrow-right" size={15} className="arrow" /></span>
              </span>
            </button>
        </div>
          );
        })()}
        {/* LOGO STRIP — sits under the two doors */}
      {(!mvp && (t.belowHero === "marquee" || !t.belowHero)) && (
      <section className="section logo-strip-band" style={{ paddingTop: 28, paddingBottom: 32 }}>
        <div className="container">
          <div className="logo-strip-label-row">
            <span className="logo-strip-label"></span>
          </div>
        </div>
        <div className="logo-marquee" aria-label="Client logos">
          <div className="logo-marquee-track">
            {[0, 1].map((copy) =>
              Array.from({ length: 12 }).map((_, i) => {
                const slotId = `client-logo-${i + 1}`;
                const handleClick = (e) => {
                  const root = e.currentTarget.querySelector("image-slot");
                  const input = root && root.shadowRoot && root.shadowRoot.querySelector('input[type="file"]');
                  if (input) input.click();
                };
                return (
                  <button
                    key={`${copy}-${i}`}
                    type="button"
                    className="logo-marquee-item"
                    aria-label={copy === 0 ? `Replace logo ${i + 1}` : undefined}
                    aria-hidden={copy === 1 ? "true" : undefined}
                    tabIndex={copy === 1 ? -1 : 0}
                    onClick={handleClick}>
                    <image-slot id={slotId} placeholder={`Logo ${i + 1}`} shape="rect" fit="contain" />
                  </button>
                );
              })
            )}
          </div>
        </div>
      </section>
      )}
      {/* PHILOSOPHY, treatment set by the "What we are" tweak */}
      <WhatWeAre variant={(t && t.whatWeAre) || "A current"} pairAwards={t.homeEnd === "statement + awards"} />
      </section>

      {/* RECENT WORK — case cards per the brief; the testimonial grid is retired.
          Client quotes surface inside each case detail once signed off. */}
      {!mvp && (
      <section className="section section--paper" style={{ paddingTop: 72, paddingBottom: 56 }}>
        <div className="container">
          <div className="section-head section-head--row" style={{ marginBottom: 32 }}>
            <div className="head-left">
              <Eyebrow>Recent work</Eyebrow>
              <h2 className="h-section">What this looks like in practice.</h2>
            </div>
            <LinkOut onClick={() => go("work")}>See all of our work</LinkOut>
          </div>
          <div className="case-grid">
            {["accounting-firm-foundations", "content-engine-agent", "email-triage-handover"].map((slug) => {
              const e = (window.WORK_ENTRIES || []).find((x) => x.slug === slug);
              return e ? <WorkEntryCard key={slug} entry={e} onOpen={() => go(`work/${slug}`)} /> : null;
            })}
          </div>
        </div>
      </section>
      )}

      {/* RECOGNITION, the same band as About. The awards move up beside the
          statement under option 1; the closer moves into the footer under 2. */}
      {!(t.homeEnd === "statement + awards" && t.homeEnd === "closer in footer") && (
      <section className="section recognition-band recognition-band--light">
        <div className="container">
          {t.homeEnd !== "statement + awards" && (
          <div className="recognition-slim">
            <img src="assets/award-ai-consultant-2024.png" alt="" />
            <img src="assets/award-ai-female-leader-2024.png" alt="" />
            <p>Finalist, <b>AI Consultant of the Year</b> and <b>AI Female Leader of the Year</b> · Australian AI Awards 2024, SME category</p>
          </div>
          )}
          {/* Closer folded into the band, as on How we work: one colour change into the footer. */}
          {t.homeEnd !== "closer in footer" && (
          <div className={"hww-closer hww-closer--dark" + (t.homeEnd === "statement + awards" ? " hww-closer--norule" : "")}>
            <p className="hww-closer-t">
              Not sure where to start? <em>That's a good conversation to have.</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>
      )}
      {t.homeEnd === "closer in footer" && (
      <section className="home-closer-foot">
        <div className="container">
          <div className="hww-closer hww-closer--dark">
            <p className="hww-closer-t">
              Not sure where to start? <em>That's a good conversation to have.</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>
  );
}

// Hero build C: editorial split headline over a skyline of the five accelerator colours.
const HB_COLS = [
  { key: "strategy", label: "Strategy", h: 70, go: "how-we-work" },
  { key: "enable", label: "Foundations", h: 92, go: "ai-foundations" },
  { key: "photo" },
  { key: "build", label: "Build", h: 64, go: "accelerators" },
];
const HB_SECTORS = ["Hospitality", "Allied health", "Architecture", "Water", "Logistics", "Construction"];

function HeroBlocks({ go }) {
  return (
    <section className="hero hero--blocks">
      <div className="container hb-top">
        <h1 className="h-display">
          <span className="ln">Your AI journey,</span>
          <span className="ln"><em>simplified</em> and supported.</span>
        </h1>
        <div className="hb-side">
          <p className="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.</p>
        </div>
      </div>
      <div className="hb-ticker" aria-hidden="true">
        <div className="hb-ticker-track">
          {[0, 1].map((copy) =>
            HB_SECTORS.map((s) => <span key={`${copy}-${s}`} className="hb-tick-item">{s}</span>)
          )}
        </div>
      </div>
      <div className="hb-skyline">
        {HB_COLS.map((c) =>
          c.key === "photo" ? (
            <button
              key="photo"
              type="button"
              className="hb-col hb-col--photo"
              aria-label="Replace hero photo"
              onClick={(e) => { const r = e.currentTarget.querySelector("image-slot"); const inp = r && r.shadowRoot && r.shadowRoot.querySelector('input[type="file"]'); if (inp) inp.click(); }}>
              <image-slot id="hero-blocks-shot" placeholder="Session photo" shape="rect" fit="cover" />
            </button>
          ) : (
            <button
              key={c.key}
              type="button"
              className={`hb-col hb-col--${c.key}`}
              style={{ ["--h"]: `${c.h}%` }}
              onClick={() => go(c.go)}>
              <span className="hb-lab">{c.label}</span>
            </button>
          )
        )}
      </div>
    </section>
  );
}

// Hero visual: a quadrant arc, four waypoints, each ticked out to its label.
function HomeBoard({ variant }) {
  if ((variant || "").indexOf("B5e") === 0) return <HomeBoardDashed />;
  return (
    <div className="hero-journey">
      <svg viewBox="0 0 448 408" fill="none" role="img" aria-label="An arc rising through four stages: Talk, Shape, Deliver, Stay with you">
        <path d="M0 408 A 408 408 0 0 0 408 0" className="hj-path" pathLength="1" stroke="rgba(255,255,255,.2)" strokeWidth="1.4" />
        <g className="hj-ticks" stroke="rgba(255,255,255,.35)" strokeWidth="1.4">
          <path d="M78 407 l0 -26" style={{ animationDelay: ".9s" }} />
          <path d="M198 350 l-13 -22" style={{ animationDelay: "1.4s" }} />
          <path d="M300 260 l-22 -13" style={{ animationDelay: "1.9s" }} />
          <path d="M372 140 l-26 0" style={{ animationDelay: "2.4s" }} />
        </g>
        <g fill="#fff">
          <circle className="hj-dot" style={{ animationDelay: ".8s" }} cx="78" cy="407" r="4" />
          <circle className="hj-dot" style={{ animationDelay: "1.3s" }} cx="198" cy="350" r="4" />
          <circle className="hj-dot" style={{ animationDelay: "1.8s" }} cx="300" cy="260" r="4" />
        </g>
        <circle className="hj-end-pulse" cx="372" cy="140" r="12" fill="none" stroke="var(--ia-light-blue)" strokeWidth="1.5" opacity="0" />
        <circle className="hj-dot" style={{ animationDelay: "2.3s" }} cx="372" cy="140" r="6.5" fill="var(--ia-light-blue)" />
        <g className="hj-svg-labels" fontSize="10.5" fontWeight="600" letterSpacing="1.9" fill="rgba(255,255,255,.55)">
          <text x="78" y="368" textAnchor="middle" style={{ animationDelay: "1.05s" }}>TALK</text>
          <text x="176" y="316" textAnchor="middle" style={{ animationDelay: "1.55s" }}>SHAPE</text>
          <text x="262" y="234" textAnchor="middle" style={{ animationDelay: "2.05s" }}>DELIVER</text>
          <text x="338" y="144" textAnchor="end" fill="var(--ia-light-blue)" style={{ animationDelay: "2.55s" }}>STAY WITH YOU</text>
        </g>
      </svg>
    </div>
  );
}

// B5e: the travelled arc solid, the road ahead dashed.
function HomeBoardDashed() {
  return (
    <div className="hero-journey">
      <svg viewBox="0 0 448 408" fill="none" role="img" aria-label="An arc rising through four stages: Talk, Shape, Deliver, Stay with you">
        <path d="M0 408 A 380 380 0 0 0 286 272" className="hj-path" pathLength="1" stroke="rgba(255,255,255,.42)" strokeWidth="1.8" />
        <path d="M286 272 A 380 380 0 0 0 380 28" className="hj-path-ahead" stroke="rgba(255,255,255,.24)" strokeWidth="1.6" strokeDasharray="5 7" />
        <g className="hj-ticks" stroke="rgba(255,255,255,.3)" strokeWidth="1.2">
          <path d="M74 402 l0 -30" style={{ animationDelay: ".9s" }} />
          <path d="M186 352 l-14 -26" style={{ animationDelay: "1.4s" }} />
          <path d="M286 272 l-24 -18" style={{ animationDelay: "1.9s" }} />
          <path d="M380 28 l-30 6" style={{ animationDelay: "2.4s" }} />
        </g>
        <g fill="#fff">
          <circle className="hj-dot" style={{ animationDelay: ".8s" }} cx="74" cy="402" r="4" />
          <circle className="hj-dot" style={{ animationDelay: "1.3s" }} cx="186" cy="352" r="4" />
          <circle className="hj-dot" style={{ animationDelay: "1.8s" }} cx="286" cy="272" r="4.5" />
        </g>
        <circle className="hj-end-pulse" cx="380" cy="28" r="12" fill="none" stroke="var(--ia-light-blue)" strokeWidth="1.5" opacity="0" />
        <circle className="hj-dot" style={{ animationDelay: "2.3s" }} cx="380" cy="28" r="6.5" fill="var(--ia-light-blue)" />
        <g className="hj-svg-labels" fontSize="10.5" fontWeight="600" letterSpacing="1.9" fill="rgba(255,255,255,.55)">
          <text x="74" y="360" textAnchor="middle" style={{ animationDelay: "1.05s" }}>TALK</text>
          <text x="160" y="316" textAnchor="middle" style={{ animationDelay: "1.55s" }}>SHAPE</text>
          <text x="238" y="244" textAnchor="middle" style={{ animationDelay: "2.05s" }}>DELIVER</text>
          <text x="340" y="38" textAnchor="end" fill="var(--ia-light-blue)" style={{ animationDelay: "2.55s" }}>STAY WITH YOU</text>
        </g>
      </svg>
    </div>
  );
}

window.HomeV2Screen = HomeV2Screen;

// ---------- "What we are", four treatments ----------
function WhatWeAre({ variant, pairAwards }) {
  const v = (variant || "A current")[0];

  if (v === "B") {
    return (
      <section className="wwa-dark dot-grid">
        <div className="container">
          <Eyebrow>What we are</Eyebrow>
          <p className="wwa-dark-q">
            We're not a tech consulting company. We're the partner that brings AI knowledge, process
            thinking and a human touch, <em>because AI adoption is a people change before it's a
            technology one.</em>
          </p>
        </div>
      </section>);
  }

  if (v === "C") {
    return (
      <section className="section section--white" style={{ paddingTop: 96, paddingBottom: 88 }}>
        <div className="container">
          <div className="wwa-cols">
            <div className="wwa-cols-label">What we are</div>
            <p className="wwa-cols-q">
              We're not a tech consulting company. We're the partner that brings AI knowledge, process
              thinking and a human touch, <em>because AI adoption is a people change before it's a
              technology one.</em>
            </p>
          </div>
        </div>
      </section>);
  }

  if (v === "D") {
    return (
      <section className="section section--white" style={{ paddingTop: 104, paddingBottom: 92 }}>
        <div className="container">
          <div className="wwa-flip">
            <div className="wwa-flip-rule" />
            <p className="wwa-flip-neg">We're not a tech consulting company.</p>
            <p className="wwa-flip-pos">
              We're the partner that brings AI knowledge, process thinking and a human touch,
              <em> because AI adoption is a people change before it's a technology one.</em>
            </p>
          </div>
        </div>
      </section>);
  }

  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 24, background: "transparent" }}>
      <div className="container">
        <div className={`home-philosophy home-philosophy--solo${pairAwards ? " home-philosophy--paired" : ""}`}>
          <div>
            <Eyebrow>What we are</Eyebrow>
            <p className="philosophy-quote">
              We're not a tech consulting company. We're the partner that brings AI knowledge, process
              thinking and a human touch, <em>because AI adoption is a people change before it's a
              technology one.</em>
            </p>
          </div>
          {pairAwards && (
          <aside className="phil-awards">
            <div className="phil-awards-imgs">
              <img src="assets/award-ai-consultant-2024.png" alt="" />
              <img src="assets/award-ai-female-leader-2024.png" alt="" />
            </div>
            <p>Finalist, <b>AI Consultant of the Year</b> and <b>AI Female Leader of the Year</b> · Australian AI Awards 2024, SME category</p>
          </aside>
          )}
        </div>
      </div>
    </section>);
}
