const { Annotate: A2, Eyebrow: E2, Button: B2, Card: C2, Tag: T2, SectionHeader, CTABand, ChartFrame: CF, VisionFrame, GlobalDelivery } = window.SoftVerxDesignSystem_6fd95b;
const HD = window.SX_DATA;

function HomePartners({ mobile }) {
  return (
    <Section mobile={mobile} bordered={false} style={{ paddingBlock: mobile ? 32 : 40 }}>
      <div style={{ borderTop: "1px solid var(--border-default)", borderBottom: "1px solid var(--border-default)", paddingBlock: mobile ? 18 : 26, display: "grid", gap: mobile ? 16 : 40, gridTemplateColumns: mobile ? "1fr" : "minmax(0,3fr) minmax(0,9fr)", alignItems: mobile ? "start" : "center" }}>
        <h2 className="sx-h2" style={{ color: "var(--text-strong)", margin: 0 }}>Partnerships</h2>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: mobile ? 14 : 40, gridTemplateColumns: mobile ? "repeat(3, minmax(0,1fr))" : "repeat(3, minmax(0,1fr))", alignItems: "start" }}>
          {HD.partners.map((p) => (
            <li key={p.name} style={{ display: "grid", gap: mobile ? 6 : 10, alignContent: "start" }}>
              <div className="sx-partner-tile" style={{ height: mobile ? 76 : 116 }}>
                <img src={p.logo} alt={p.name + " logo"} title={p.name} style={{ height: mobile ? Math.round(p.h * 0.95) : Math.round(p.h * 1.55), width: "auto", maxWidth: "88%", objectFit: "contain", display: "block" }} />
              </div>
              <p className="sx-caption" style={{ color: "var(--text-accent)", textTransform: "none", textWrap: "pretty" }}>{p.note}</p>
            </li>
          ))}
        </ul>
      </div>
    </Section>
  );
}

function HomePractices({ mobile }) {
  return (
    <Section mobile={mobile}>
      <SectionHeader title={`${HD.practices.length} practices, one accountable team`} lead="Architecture, hardware integration, software, deployment and support sit with the same team. No vendor triangle when something breaks at 2am." />
      <div style={{ marginTop: 40, display: "grid", gap: mobile ? 24 : 32, gridTemplateColumns: mobile ? "1fr" : "repeat(3, minmax(0,1fr))" }}>
        {HD.practiceGroups.map((g) => (
          <div key={g.id} style={{ borderTop: "1px solid var(--sx-accent)", paddingTop: 14 }}>
            <p className="sx-small" style={{ color: "var(--text-accent)", fontWeight: 500 }}>{g.label}</p>
            <p className="sx-small" style={{ marginTop: 8, color: "var(--text-quiet)" }}>{g.blurb}</p>
            <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "grid" }}>
              {g.practices.map((p) => (
                <li key={p.slug} style={{ borderTop: "1px solid var(--border-default)" }}>
                  <a href={p.slug === "document-intelligence" ? "/document-intelligence" : "/practices#" + p.slug}
                    style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "11px 0", textDecoration: "none" }}>
                    <span className="sx-small" style={{ color: "var(--text-strong)" }}>{p.title}</span>
                    <span className="sx-caption" style={{ color: "var(--text-quiet)", textTransform: "none", textAlign: "right", maxWidth: "14rem" }}>{p.note}</span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <p className="sx-small" style={{ marginTop: 28 }}><a href="/practices">Every practice, with what it has shipped</a></p>
    </Section>
  );
}

function HomePipeline({ mobile }) {
  return (
    <Section mobile={mobile}>
      <SectionHeader title="We build the whole chain, or the one link you are missing" />
      <div style={{ marginTop: mobile ? 24 : 40 }}>
        <PipelineFigure mobile={mobile} />
      </div>
    </Section>
  );
}

function HomeReach({ mobile }) {
  return (
    <Section mobile={mobile}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
        <SectionHeader title="Every programme we can name, on the map" />
        {!mobile && <B2 as="a" href="/work" variant="secondary">Open the full record</B2>}
      </div>
      <div style={{ marginTop: mobile ? 24 : 36 }}>
        <DeliveryGlobe mobile={mobile} />
        <p className="sx-small" style={{ marginTop: mobile ? 18 : 24 }}><a href="/work">{mobile ? "The full record: spine, map and table" : `The full record: ${HD.projects.length} programmes, with a delivery spine, map and table view`}</a></p>
      </div>
    </Section>
  );
}

function HomeProof({ mobile }) {
  const p = HD.projectsBySlug.lesco;
  return (
    <Section mobile={mobile}>
      <div style={{ display: "grid", gap: mobile ? 22 : 48, gridTemplateColumns: mobile ? "1fr" : "minmax(0,6fr) minmax(0,6fr)", alignItems: "center" }}>
        <A2 label="case:lesco" conf={0.99} style={{ padding: 8 }}>
          <VisionFrame src={p.image} label="sector:utilities" conf={0.98} height={mobile ? 168 : 320} style={{ borderRadius: "var(--r-card)" }} />
        </A2>
        <div>
          <p className="sx-quote" style={{ marginTop: mobile ? 14 : 20, fontSize: mobile ? "1.05rem" : undefined }}>“The platform had to keep 7.5 million consumer records consistent across three IT centres and eight operation circles. That constraint, not the billing logic, is what the system was designed around.”</p>
          <p className="sx-small" style={{ marginTop: mobile ? 12 : 18, color: "var(--text-quiet)" }}>Customer information and billing programme, Lahore Electric Supply Company</p>
          <div style={{ display: "flex", gap: 8, marginTop: mobile ? 16 : 22, flexWrap: "wrap" }}>
            <T2 tone="field">7.5m consumers</T2>
            <T2>8 operation circles</T2>
            <T2>meter-to-cash</T2>
          </div>
          <div style={{ marginTop: mobile ? 18 : 26, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <B2 as="a" href="/lesco" variant="secondary">Read the case study</B2>
            {!mobile && <B2 as="a" href="/work" variant="ghost">More programmes</B2>}
          </div>
        </div>
      </div>
    </Section>
  );
}

/* The nine runs, in the order the run library holds them. Each card opens the
   run itself rather than the catalogue entry — the drawing is the argument. */
const RAIL = [
  { run: "workflow-agents", sol: "workflow-agents", line: "Mailbox, ERP and ticketing wired together by agents that decide and act." },
  { run: "doc-intelligence", sol: "doc-intelligence", line: "Documents become structured records, with the pixels kept beside the number." },
  { run: "mdm", sol: "mdm", line: "Network hierarchy, interval profiles, reconciliation and command in one platform." },
  { run: "billing", sol: "utility-cis", line: "Reads in, bill out, payment reconciled — the full meter-to-cash cycle." },
  { run: "agriculture", sol: "agriculture", line: "Probes, weather and a water balance decide irrigation, then verify it worked." },
  { run: "vision", sol: "visual-inspection", line: "Cameras identify items and find defects on a line, on edge hardware." },
  { run: "enercon", sol: "iot-platforms", line: "Device fleets monitored and controlled, with commands confirmed or reported failed." },
  { run: "complaints", sol: "complaints", line: "Intake through resolution across every role, with returns and escalations drawn." },
  { run: "archivist", sol: "doc-archivist", line: "Ask your own corpus a question and get a cited answer, or a refusal." },
];

function HomeSolutions({ mobile }) {
  const rail = RAIL.map((r) => ({ ...r, s: HD.solutionsById[r.sol] })).filter((r) => r.s);
  const ref = React.useRef(null);
  const nudge = (dir) => ref.current?.scrollBy({ left: dir * 320, behavior: "smooth" });
  /* One card every two seconds, wrapping at the end. Pauses while the pointer is
     on the rail or the visitor is scrolling it themselves. */
  React.useEffect(() => {
    const el = ref.current;
    if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let paused = false;
    const hold = () => { paused = true; };
    const release = () => { paused = false; };
    el.addEventListener("pointerenter", hold);
    el.addEventListener("pointerleave", release);
    el.addEventListener("pointerdown", hold);
    const t = setInterval(() => {
      if (paused) return;
      const card = el.firstElementChild;
      const step = card ? card.getBoundingClientRect().width + 14 : 280;
      const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
      el.scrollTo({ left: atEnd ? 0 : el.scrollLeft + step, behavior: "smooth" });
    }, 2000);
    return () => { clearInterval(t); el.removeEventListener("pointerenter", hold); el.removeEventListener("pointerleave", release); el.removeEventListener("pointerdown", hold); };
  }, []);
  return (
    <Section mobile={mobile} well>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 20, flexWrap: "wrap" }}>
        <SectionHeader title="Systems you order, rather than commission" lead="Each one drawn the way it actually runs. Open any one." />
        {!mobile && (
          <div style={{ display: "flex", gap: 8 }}>
            <button type="button" aria-label="Previous" onClick={() => nudge(-1)} className="sx-micro" style={railBtn}><svg aria-hidden width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5l-5 5 5 5" /></svg></button>
            <button type="button" aria-label="Next" onClick={() => nudge(1)} className="sx-micro" style={railBtn}><svg aria-hidden width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M8 5l5 5-5 5" /></svg></button>
          </div>
        )}
      </div>
      <div className="rail" ref={ref} style={{ marginTop: mobile ? 22 : 32 }}>
        {rail.map(({ run, s, line }) => (
          <C2 key={run} href={"/solutions#run-" + s.id} spotlight padding={mobile ? "16px 18px 14px" : "20px 22px 18px"}
            style={{ width: mobile ? 232 : 268, background: "var(--bg-page)" }}>
            <div style={{ height: mobile ? 30 : 34, display: "flex", alignItems: "center" }}>
              <SolutionGlyph id={s.id} size={mobile ? 44 : 50} />
            </div>
            <p className="sx-h3" style={{ marginTop: mobile ? 12 : 16, fontSize: "var(--t-h3)" }}>{s.name}</p>
            <p className="sx-small" style={{ marginTop: 8, color: "var(--text-body)", flex: 1 }}>{line}</p>
            <span className="sx-open-run" style={{ marginTop: mobile ? 14 : 18 }}>
              <span className="sx-micro">open the run</span>
              <span className="sx-open-run-go" aria-hidden><svg width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10h11M11 6l4 4-4 4" /></svg></span>
            </span>
          </C2>
        ))}
      </div>
      <div style={{ marginTop: mobile ? 22 : 32, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
        <B2 as="a" href="/solutions" variant="secondary">View catalogue</B2>
        <B2 as="a" href="/about#start">Let's begin?</B2>
      </div>
    </Section>
  );
}
const railBtn = { appearance: "none", width: 36, height: 36, borderRadius: "var(--r-control)", border: "1px solid var(--border-strong)", background: "transparent", color: "var(--text-body)", cursor: "pointer" };

function HomeRecord({ mobile }) {
  return (
    <Section mobile={mobile}>
      <SectionHeader title="Twenty-seven years, counted honestly" lead="Both panels are computed from our own project record. Where a figure under-reports, it says so on its face." />
      <div style={{ marginTop: 40, display: "grid", gap: 20 }}>
        <CF title="Sector × capability layer" subtitle="where the work has landed" note="l1 core platforms · l2 data · l3 portals · l4 edge · l5 models · l6 agents. Each programme counted once, against the layer its primary practice sits in.">
          <SectorLayerHeatmap mobile={mobile} />
        </CF>
        <CF title="Solution reuse" subtitle="deployments behind each named solution" note="A filled bar is a live deployment. The full list is on the solutions page.">
          <SolutionReuse mobile={mobile} limit={6} />
        </CF>
      </div>
      <p className="sx-small" style={{ marginTop: 24 }}><a href="/work">The full record: filters, delivery spine and map</a></p>
    </Section>
  );
}

function HomeIndustries({ mobile }) {
  return (
    <Section mobile={mobile} well>
      <SectionHeader title="Six sectors we know from the inside" lead={mobile ? "Domain knowledge shortens discovery. We have shipped into these environments before." : "Domain knowledge shortens discovery. We have shipped into these environments before, so the conversation starts past the basics."} />
      <div className="sx-sectors" style={{ marginTop: mobile ? 22 : 36, gridTemplateColumns: mobile ? "repeat(2, minmax(0,1fr))" : "repeat(3, minmax(0,1fr))" }}>
        {HD.industries.map((ind) => (
          <a key={ind.id} className="sx-sector" href={"/industries#" + ind.id} style={{ height: mobile ? 118 : 196 }}>
            <img src={ind.image} alt="" />
            <span className="sx-sector-scrim" aria-hidden></span>
            <span className="sx-sector-name">{ind.name}</span>
          </a>
        ))}
      </div>
    </Section>
  );
}

function HomeStart({ mobile }) {
  return (
    <Section mobile={mobile} id="start">
      <SectionHeader title="You do not have to sign a programme to find out if we are any good" lead="Three ways in, smallest first. Most international clients start at the top and work down." />
      <ol style={{ listStyle: "none", margin: "36px 0 0", padding: 0, display: "grid", gap: 1, gridTemplateColumns: mobile ? "1fr" : "repeat(3, minmax(0,1fr))", background: "var(--border-default)", border: "1px solid var(--border-default)", borderRadius: "var(--r-card)", overflow: "hidden" }}>
        {HD.engagements.map((e, i) => (
          <li key={e.id} style={{ background: "var(--bg-page)", padding: mobile ? "22px" : "26px 24px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span aria-hidden style={{ display: "flex", gap: 2, alignItems: "flex-end", height: 14 }}>
                {[0, 1, 2].map((k) => <span key={k} style={{ width: 5, height: 4 + k * 5, background: k <= i ? "var(--sx-accent)" : "var(--border-strong)" }} />)}
              </span>
              <span className="sx-micro" style={{ color: "var(--text-quiet)" }}>{e.terms}</span>
            </div>
            <h3 className="sx-h3" style={{ marginTop: 14, fontSize: "var(--t-h3)" }}>{e.name}</h3>
            <p className="sx-small" style={{ marginTop: 10, color: "var(--text-body)" }}>{e.tagline}</p>
            <p className="sx-caption" style={{ marginTop: 14, color: "var(--text-quiet)", textTransform: "none" }}>{e.outcome}</p>
          </li>
        ))}
      </ol>
      <div style={{ marginTop: 26, display: "flex", gap: 12, flexWrap: "wrap" }}>
        <B2 as="a" href="/about#start">Book a call</B2>
        <B2 as="a" href="/faq" variant="ghost">Read the questions buyers ask first</B2>
      </div>
    </Section>
  );
}

Object.assign(window, { HomePartners, HomePractices, HomePipeline, HomeReach, HomeProof, HomeSolutions, HomeRecord, HomeIndustries, HomeStart });