/* eslint-disable */
// Purpose, Mission & Values, sub-page off About.
// Built to the About page's visual system: navy hero, alternating paper/white
// sections, lighter cards. Stats carried from the brand's existing PMV page.

const PMV_STATS = [
  { value: "99%", label: "of Australian businesses are small businesses" },
  { value: "4.7M", label: "people they employ across the country" },
  { value: "48%", label: "potential productivity lift from AI, yet to be captured" },
];

const PMV_VALUES = [
  {
    icon: "heart-handshake",
    name: "You Are Family",
    body: "When you work with us you're not a ticket number. We take the time to understand your business, your people and your goals, and we stay close long after the first project ships.",
  },
  {
    icon: "target",
    name: "You Come First",
    body: "Your outcomes lead every recommendation. We're tool-agnostic and straight with you, if something won't move the needle for your business, we'll tell you, even when it's not the easy answer.",
  },
  {
    icon: "map-pin",
    name: "Local Loyalty",
    body: "Australian-built and Australian-owned. We back local businesses with local talent, and we keep your data, your context and your trust close to home.",
  },
];

function PurposeMissionValuesScreen({ go, t }) {
  return (
    <div data-screen-label="About · Purpose, mission & values">
      {/* HERO, navy slab (matches About) */}
      <section className="section section--ink" style={{ background: "var(--ia-dark-blue)", color: "#fff", paddingTop: 96, paddingBottom: 96, position: "relative", overflow: "hidden" }}>
        <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 }}>
          <Crumbs items={[{ label: "Home", to: "home" }, { label: "About", to: "about" }, "Purpose, mission & values"]} go={go} />
          <h1 className="h-display" style={{ marginTop: 22, maxWidth: "20ch" }}>
            Why we do <em>this work.</em>
          </h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: 640 }}>
            The belief that drives Intelligence Assist, the change we're working towards,
            and the values we hold ourselves to along the way.
          </p>
        </div>
      </section>

      {/* PURPOSE */}
      <section className="section section--paper" style={{ paddingTop: 72, paddingBottom: 72 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 64, alignItems: "start" }} className="pmv-split">
            <div>
              <Eyebrow>Our purpose</Eyebrow>
              <h2 className="h-section" style={{ marginTop: 12, fontSize: 38, maxWidth: "16ch" }}>
                Driving success for small business with <em>AI.</em>
              </h2>
            </div>
            <div>
              <p className="lede" style={{ marginTop: 4 }}>
                Small and medium businesses are the backbone of the Australian economy, and the ones with the most to gain from AI, but the least time to work it out
                on their own.
              </p>
              <p style={{ margin: "16px 0 0", fontSize: 16, color: "#4A4F60", lineHeight: 1.65 }}>
                Our purpose is to close that gap: to make capable, responsible AI adoption
                something every small business can actually reach, with a partner who
                speaks plainly, starts from your goals, and stays the course.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* MISSION */}
      <section className="section section--white" style={{ paddingTop: 72, paddingBottom: 72 }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 28 }}>
            <Eyebrow>Our mission</Eyebrow>
            <h2 className="h-section" style={{ maxWidth: "24ch" }}>
              Make sure no small business gets left behind.
            </h2>
          </div>
          <div style={{ maxWidth: 760 }}>
            <p className="lede">
              The productivity gains AI offers are real, but they're concentrating in
              the businesses with the time, budget and in-house expertise to chase them.
            </p>
            <p style={{ margin: "16px 0 0", fontSize: 16, color: "#4A4F60", lineHeight: 1.65 }}>
              Left alone, that creates a widening divide: larger players pulling ahead while
              smaller operators fall behind. Our mission is to put the same capability within
              reach of the businesses that need it most, so the gap closes instead of grows.
            </p>
          </div>

          <div className="pmv-stats">
            {PMV_STATS.map((s, i) => (
              <div key={i} className="pmv-stat">
                <div className="pmv-stat-value">{s.value}</div>
                <div className="pmv-stat-label">{s.label}</div>
              </div>
            ))}
          </div>
          <p style={{ margin: "18px 0 0", fontSize: 13, color: "#9BA0AE" }}>
            Sources: Australian Bureau of Statistics; McKinsey &amp; Company. Figures carried
            from our existing materials, confirm before publishing.
          </p>
        </div>
      </section>

      {/* VALUES */}
      <section className="section section--paper" style={{ paddingTop: 72, paddingBottom: 80 }}>
        <div className="container">
          <div className="section-head section-head--center" style={{ marginBottom: 48 }}>
            <Eyebrow>Our values</Eyebrow>
            <h2 className="h-section" style={{ textAlign: "center", maxWidth: "18ch" }}>
              How we show up, every engagement.
            </h2>
          </div>
          <div className="grid grid--3" style={{ alignItems: "stretch", gap: 20 }}>
            {PMV_VALUES.map((v) => (
              <div key={v.name} className="card" style={{ padding: 32, display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ width: 48, height: 48, borderRadius: 13, background: "var(--ia-blue-50)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={v.icon} size={24} color="var(--ia-blue)" />
                </div>
                <h3 className="h-card" style={{ margin: "4px 0 0", fontSize: 21 }}>{v.name}</h3>
                <p style={{ margin: 0, fontSize: 15, color: "#4A4F60", lineHeight: 1.6 }}>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section--white" style={{ paddingTop: 0, paddingBottom: 72 }}>
        <div className="container">
          <OffRamp
            label="Want to meet the team behind it?"
            title={<span>See who we are and how we work, or start with an <strong>AI Blueprint</strong>.</span>}
            cta="Back to About"
            onCta={() => go("about")}
            variant="primary"
          />
        </div>
      </section>
    </div>
  );
}

window.PurposeMissionValuesScreen = PurposeMissionValuesScreen;