const { Button: AB, Card: AC, Tag: AT, SectionHeader: ASH, ChartFrame: ACF, Accordion: AAcc, Field, Input, Select, CTABand: ACTA, Eyebrow: AE } = window.SoftVerxDesignSystem_6fd95b;
const B = window.SX_DATA;

const PRINCIPLES = [
  { h: "Simple", p: "The fewest moving parts that solve the problem. We would rather add one service to a system that works than rebuild the estate around it." },
  { h: "Practical", p: "It has to run in your operation — on your network, with your data quality and your staff — not in a demo environment we control." },
  { h: "Affordable", p: "Start at pilot scale and pay for the next stage only once the last one paid off. Nothing in the pricing depends on you committing to a programme up front." },
];
const DIFFS = [
  { h: "One accountable partner", p: "Architecture, data, software, deployment and support sit with the same team." },
  { h: "Domain systems, not generic builds", p: "Billing, extraction, MES, agents and data platforms are systems we have shipped repeatedly." },
  { h: "Built to integrate, not replace", p: "We connect to the databases, ERPs and services already in place." },
  { h: "Support past go-live", p: "Training, upgrades and optimisation are part of the engagement, not an upsell." },
];

/* Portrait cell. The <img> removes itself if the file is not there yet, so the
   row degrades to name and role rather than to a broken-image box.

   Both portraits render as supplied: no grade, no desaturation, no correction.
   The container gives them a shared square crop and the same hairline ring the
   rest of the site's surfaces carry, so they sit on the dark page. */
function Portrait({ src, alt, size }) {
  const [ok, setOk] = React.useState(true);
  if (!ok) return null;
  return (
    <div style={{ width: size, height: size, borderRadius: "var(--r-card)", overflow: "hidden", border: "1px solid var(--border-strong)", boxShadow: "inset 0 1px 0 var(--sx-edge-light)", background: "var(--surface-raised)", marginBottom: 18 }}>
      <img src={src} alt={alt} width={size} height={size} loading="lazy" onError={() => setOk(false)}
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  );
}

function AboutPage({ mobile }) {
  return (
    <main>
      <PageHero mobile={mobile} title="Twenty-seven years of shipping systems that had to keep running"
        lead="An engineering firm in Lahore. We started in 1999 building accounting, inventory and production systems for industrial clients, and we build agents, data platforms, applications and vision systems on top of that record."
        actions={<><AB as="a" href="/contact">Book a call</AB><AB as="a" href="/work" variant="secondary">The delivery record</AB></>}
        meta={[{ l: "founded", v: 1999 }, { l: "programmes delivered", v: "250+" }, { l: "products of our own", v: "15+" }, { l: "engineers in-house", v: "25+" }]} />

      <Section mobile={mobile}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <ASH title="Capability accumulated, not announced" lead="Five periods, each one still running. Nothing here was a pivot." />
          <AB as="a" href="/work#spine" variant="secondary">Open the delivery spine</AB>
        </div>
        <div style={{ marginTop: 36, display: "grid", gap: 16, gridTemplateColumns: mobile ? "1fr" : "repeat(5, minmax(0,1fr))" }}>
          {B.eras.map((e) => (
            <div key={e.id} style={{ borderTop: "1px solid var(--border-strong)", paddingTop: 14 }}>
              <p className="sx-micro sx-num" style={{ color: "var(--sx-accent)" }}>{e.label}</p>
              <h3 className="sx-h3" style={{ marginTop: 10, fontSize: "var(--t-h3)" }}>{e.title}</h3>
              <p className="sx-small" style={{ marginTop: 8, color: "var(--text-body)" }}>{e.detail}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section mobile={mobile}>
        <ASH title="The people accountable for the work" lead="The person who scopes your programme is the person who answers for it. These two sign off every engagement." />
        <ul style={{ listStyle: "none", margin: "36px 0 0", padding: 0, display: "grid", gap: 1, gridTemplateColumns: mobile ? "1fr" : `repeat(${B.team.length}, minmax(0,1fr))`, background: "var(--border-default)", border: "1px solid var(--border-default)", borderRadius: "var(--r-card)", overflow: "hidden" }}>
          {B.team.map((m) => (
            <li key={m.name} style={{ background: "var(--bg-page)", padding: mobile ? "20px 18px" : "26px 28px" }}>
              {m.photo && <Portrait src={m.photo} alt={m.name} size={mobile ? 104 : 128} />}
              <p className="sx-h3" style={{ margin: 0 }}>{m.name}</p>
              <p className="sx-small" style={{ marginTop: 8, color: "var(--text-accent)" }}>{m.role}</p>
            </li>
          ))}
        </ul>
      </Section>

      <Section mobile={mobile} well>
        <ASH title="Four reasons, and the two rows where we lose" lead="A global integrator beats us on scale. An in-house team beats us on institutional knowledge. Both are in the table below." />
        <div style={{ marginTop: mobile ? 22 : 36, display: "grid", gap: mobile ? 10 : 16, gridTemplateColumns: mobile ? "1fr" : "repeat(4, minmax(0,1fr))" }}>
          {DIFFS.map((d) => (
            <AC key={d.h} padding={mobile ? "16px 16px" : "var(--sp-6)"}>
              <h3 className="sx-h3" style={{ fontSize: "var(--t-h3)" }}>{d.h}</h3>
              <p className="sx-small" style={{ marginTop: 10, color: "var(--text-body)" }}>{d.p}</p>
            </AC>
          ))}
        </div>
        <div style={{ marginTop: mobile ? 22 : 32 }}><ComparisonMatrix mobile={mobile} /></div>
      </Section>

      <Section mobile={mobile}>
        <ASH title="Simple, practical, affordable" lead="Three words we are held to on every engagement, and what each one means in delivery." />
        <div style={{ marginTop: mobile ? 22 : 36, display: "grid", gap: mobile ? 10 : 16, gridTemplateColumns: mobile ? "1fr" : "repeat(3, minmax(0,1fr))" }}>
          {PRINCIPLES.map((p) => (
            <AC key={p.h} padding={mobile ? "16px 16px" : "var(--sp-6)"}>
              <h3 className="sx-h3" style={{ fontSize: "var(--t-h3)" }}>{p.h}</h3>
              <p className="sx-small" style={{ marginTop: 10, color: "var(--text-body)" }}>{p.p}</p>
            </AC>
          ))}
        </div>
        <div style={{ marginTop: mobile ? 34 : 44 }}>
          <ASH title="Six stages, agreed before we start" lead="You know what happens at each stage, what you get, and what we need from you." />
        </div>
        <div style={{ marginTop: mobile ? 24 : 40 }}><ProcessSteps mobile={mobile} /></div>
      </Section>

      <Section mobile={mobile} well id="start">
        <ASH title="Three ways in, smallest first" lead="Simple, practical, affordable. Priced so you can start small and stop if it is not working. Most international clients start with a discovery sprint and work down. You keep the plan either way." />
        <div style={{ marginTop: mobile ? 24 : 40 }}><EngagementLadder mobile={mobile} /></div>
      </Section>

      <Section mobile={mobile}>
        <ASH title="The three that come up on every first call" lead="Pricing, IP ownership, data residency, handover and why Pakistan are all answered on the FAQ page." />
        <div style={{ marginTop: 40 }}><AAcc items={B.faqs.slice(0, 3)} /></div>
        <p className="sx-small" style={{ marginTop: 24 }}><a href="/faq">All {B.faqs.length} questions buyers ask</a></p>
      </Section>

      <ACTA className="sx-lit-band" mobile={mobile} title="Start with the two-week discovery sprint" lead="It produces the architecture, the phased delivery plan with costs, and the risk register, at a fixed fee. The document is yours whether or not you engage us for the build." />
    </main>
  );
}

Object.assign(window, { AboutPage });