/* eslint-disable */
// How We Work page, based on screenshots from the current site
// (3-step narrative + 3-phase process), with engagement models +
// principles structure carried over from the redesign brief.

const NARRATIVE_STEPS = [
{ num: "1", title: "We take the time to understand your business." },
{ num: "2", title: "We explore AI possibilities for your goals." },
{ num: "3", title: "We support you with practical solutions for your future." }];


const PHASES = [
{
  num: "01",
  name: "Assess & Identify",
  desc: "We look at how you work, what systems you use, and your future strategy, to identify AI opportunities and design a custom AI Blueprint."
},
{
  num: "02",
  name: "Choose Your AI Options",
  desc: "Select from our flexible AI Foundations and Accelerators to create an AI roadmap that perfectly aligns with your goals."
},
{
  num: "03",
  name: "Experience Targeted Support",
  desc: "Benefit from ongoing optimisation, training, and adaptive strategies as your business grows and evolves with AI."
}];


const ENGAGEMENTS = [
{
  key: "initiatives",
  tone: "strategy",
  tag: "Per project",
  name: "Targeted AI Initiatives",
  desc: "One clearly-defined AI project at a time, with a fixed price agreed up front and a clear finish line. We scope it, build it, hand it over \u2014 then you decide what comes next. Pay as you go, with no commitment beyond the project in front of you.",
  fits: "You want a contained piece of work, and the freedom to decide what's next once you've seen the results.",
  icon: "target"
},
{
  key: "partnership",
  tone: "enable",
  tag: "Ongoing",
  name: "AI Partnership",
  desc: "We become your ongoing AI partner. We work through your Blueprint together, agree what to tackle next, and stay in the room as each piece delivers and new ideas come up. It's built for momentum \u2014 each step builds on the last, and we grow with you. It runs as a simple monthly arrangement.",
  fits: "You want a partner who stays in the room as priorities shift.",
  icon: "handshake"
}];


const PRINCIPLES = [
{ icon: "message-circle", name: "Plain English", desc: "We talk about AI the way you talk about your business. No jargon laundering." },
{ icon: "unplug", name: "Tool-agnostic", desc: "We don't sell software. We pick tools that fit you, and tell you when none does." },
{ icon: "shield-check", name: "Australian privacy", desc: "Compliance with the Privacy Act and the VAISS framework, baked in by default." },
{ icon: "tag", name: "Transparent pricing", desc: "Real numbers, in writing, before work starts. No retainer creep, no surprises." },
{ icon: "user-check", name: "You own the outcome", desc: "Code, prompts, documentation, decisions, all yours. We're a partner, not a hostage." },
{ icon: "life-buoy", name: "Support window included", desc: "Every engagement ships with a follow-up window. We don't disappear at handover." }];


function HowWeWorkScreen({ go, t }) {
  return (
    <div data-screen-label="11 How We Work">
      {/* HERO, "About / Empowering" image + narrative */}
      <section className="section section--ink" style={{ background: "var(--ia-dark-blue)", color: "#fff", paddingTop: 80, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
        {/* Base graphic crops in corners */}
        <div aria-hidden style={{
          position: "absolute", top: -60, left: -60, width: 380, height: 380,
          background: "url(assets/graphics/ia-base-graphic-full.png) center/cover no-repeat",
          opacity: .35,
          maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)"
        }} />
        <div aria-hidden style={{
          position: "absolute", bottom: -80, right: -80, width: 420, height: 420,
          background: "url(assets/graphics/ia-base-graphic-full.png) center/cover no-repeat",
          opacity: .25,
          maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          transform: "rotate(180deg)"
        }} />

        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
            <div style={{
              borderRadius: 18, overflow: "hidden",
              background: "#F2F2EE",
              border: "6px solid #fff"
            }}>
              <image-slot
                id="howwework-team"
                placeholder="Drop a team photo here"
                shape="rect"
                fit="cover"
                style={{ height: 440, width: "100%", display: "block" }} />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Eyebrow>About Intelligence Assist</Eyebrow>
              <h1 className="h-display" style={{ color: "#fff", maxWidth: "14ch" }}>
                Empowering small businesses with <em>AI expertise.</em>
              </h1>
              <p className="lede" style={{ color: "rgba(255,255,255, .78)", marginTop: 6 }}>
                We guide Australian businesses through the evolving AI landscape with clarity
                and confidence, whether you're just starting or already exploring AI.
              </p>
              <ol className="hww-narrative">
                {NARRATIVE_STEPS.map((s) =>
                <li key={s.num}>
                    <span className="hww-narrative-num">{s.num}</span>
                    <span className="hww-narrative-text">{s.title}</span>
                  </li>
                )}
              </ol>
              <div style={{ marginTop: 6, padding: "16px 0", borderTop: "1px solid rgba(255,255,255, .16)" }}>
                <div style={{ fontSize: 16, fontWeight: 500, color: "#fff", letterSpacing: "-0.005em" }}>
                  Your business. Your AI journey. Your choice.
                </div>
              </div>
              <div className="cta-row" style={{ marginTop: 0 }}>
                <Button variant="on-dark-primary" size="lg" onClick={() => go("contact")}>
                  Schedule a call <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
                <Button variant="on-dark-secondary" size="lg" onClick={() => go("blueprint")}>
                  Start with a Blueprint
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MAXIMISING IMPACT, 3-phase process with photo */}
      <section className="section section--white" style={{ paddingTop: 88, paddingBottom: 88 }}>
        <div className="container">
          <div className="section-head section-head--center" style={{ marginBottom: 56 }}>
            <Eyebrow>Maximising impact</Eyebrow>
            <h2 className="h-section" style={{ textAlign: "center", maxWidth: "20ch" }}>
              How AI adoption works with Intelligence Assist.
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 56, alignItems: "center" }}>
            <ol className="phase-list">
              {PHASES.map((p) =>
              <li key={p.num} className="phase-row">
                  <span className="phase-num">{p.num}</span>
                  <div className="phase-body">
                    <h3 className="phase-name">{p.name}</h3>
                    <p className="phase-desc">{p.desc}</p>
                  </div>
                </li>
              )}
            </ol>
            <div style={{
              borderRadius: 18, overflow: "hidden",
              background: "#F2F2EE",
              border: "1px solid var(--hairline)"
            }}>
              <image-slot
                id="howwework-workshop"
                placeholder="Photo of a workshop or strategy session"
                shape="rect"
                fit="cover"
                style={{ height: 380, width: "100%", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* ENGAGEMENT MODELS */}
      <section className="section section--paper" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>Engagement options</Eyebrow>
            <h2 className="h-section">Two ways to work with us.</h2>
            <p className="lede">
              It's less about budget and more about how you like to work. Some teams want
              one clear job with a fixed price, then decide what's next once they've seen
              results. Others want a partner who sticks around as things change. Both are
              valid, and both start in the same place, with a Blueprint.
            </p>
          </div>
          <div className="grid grid--2" style={{ alignItems: "stretch" }}>
            {ENGAGEMENTS.map((e) =>
            <div key={e.key} className="card" style={{ padding: 32, gap: 16 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: `var(--pl-${e.tone}-bg)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name={e.icon} size={20} color={`var(--pl-${e.tone}-fg)`} />
                  </div>
                  <Tag tone={e.tone}>{e.tag}</Tag>
                </div>
                <h3 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: "-0.015em", color: "var(--ink)" }}>
                  {e.name}
                </h3>
                <p style={{ margin: 0, color: "#4A4F60", fontSize: 15, lineHeight: 1.5 }}>{e.desc}</p>

                {e.formats &&
              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 4 }}>
                    {e.formats.map((f) =>
                <div key={f.name} style={{
                  padding: "14px 16px",
                  background: "var(--paper)", border: "1px solid var(--hairline)", borderRadius: 12,
                  display: "flex", flexDirection: "column", gap: 4
                }}>
                        <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.01em" }}>{f.name}</span>
                        <span style={{ fontSize: 13, color: "#4A4F60", lineHeight: 1.5 }}>{f.note}</span>
                      </div>
                )}
                  </div>
              }

                <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--hairline)", display: "flex", flexDirection: "column", gap: 4 }}>
                  <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "#9BA0AE" }}>When it fits</span>
                  <span style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.5 }}>{e.fits}</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section className="section section--white" style={{ paddingTop: 56, paddingBottom: 88 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>Operating principles</Eyebrow>
            <h2 className="h-section">How we work, no matter the shape.</h2>
          </div>
          <div className="principle-grid">
            {PRINCIPLES.map((p, i) =>
            <div key={i} className="principle-card">
                <div className="principle-ic">
                  <Icon name={p.icon} size={18} color="var(--ia-blue)" />
                </div>
                <div className="principle-body">
                  <h3 className="principle-name">{p.name}</h3>
                  <p className="principle-desc">{p.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* TEASER, Toolbox + Resource Hub */}
      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 32 }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <Eyebrow>Explore more</Eyebrow>
            <h2 className="h-section" style={{ fontSize: 32 }}>Two libraries you can browse anytime.</h2>
          </div>
          <div className="grid grid--2" style={{ gap: 16 }}>
            <div className="card card--hoverable" onClick={() => go("toolbox")} style={{ padding: 28 }}>
              <div className="row">
                <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--pl-build-bg)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="wrench" size={20} color="var(--pl-build-fg)" />
                </div>
                <h3 className="h-card">AI Toolbox</h3>
              </div>
              <p style={{ margin: 0, color: "#5C6172", fontSize: 14.5, lineHeight: 1.55 }}>
                Vetted AI tools, tagged by accelerator. Filter to your problem; see which tool fits.
              </p>
              <LinkOut onClick={() => go("toolbox")}>Browse the Toolbox</LinkOut>
            </div>
            <div className="card card--hoverable" onClick={() => go("resources")} style={{ padding: 28 }}>
              <div className="row">
                <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--pl-enable-bg)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="book-open" size={20} color="var(--pl-enable-fg)" />
                </div>
                <h3 className="h-card">Blog</h3>
              </div>
              <p style={{ margin: 0, color: "#5C6172", fontSize: 14.5, lineHeight: 1.55 }}>Articles on AI news, trends, and tool reviews.

              </p>
              <LinkOut onClick={() => go("resources")}>Read the Blog</LinkOut>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container">
          <PageFAQ pageId="how-we-work" go={go} title="FAQ" />
        </div>
      </section>

      {/* BOTTOM CTA */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Ready to start?"
            title={<span>Most clients begin with an <strong>AI Blueprint</strong>, a structured way to figure out what's worth doing first.</span>}
            cta="Book a Blueprint"
            onCta={() => go("blueprint")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

window.HowWeWorkScreen = HowWeWorkScreen;