const { Annotate, Eyebrow, Button, Card, Tag, Stat, SectionHeader } = window.SoftVerxDesignSystem_6fd95b;
const H = window.SX_DATA;

const TICKER = ["AI agents", "Document intelligence", "Data platforms at scale", "Web & mobile apps", "Cloud & DevOps", "Model training and deployment", "Visual inspection", "Load forecasting", "Meter-to-cash", "Edge software", "Production traceability", "Industrial telemetry", "Smart metering"];

function HomeHero({ mobile }) {
  return (
    <section className="sx-grain" style={{ position: "relative", overflow: "hidden", paddingTop: mobile ? 26 : 88, paddingBottom: mobile ? 30 : 72 }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        {/* Three sources: one drifting centre, two fixed at the corners. The pair
            is what gives the hero its grade — the centre alone reads flat. */}
        <div style={{ position: "absolute", top: "-32%", left: "50%", transform: "translateX(-50%)", width: mobile ? 520 : 780, height: mobile ? 520 : 780, borderRadius: 999, filter: "blur(110px)", opacity: 0.55, background: "radial-gradient(circle, rgba(61,139,242,0.34), transparent 68%)", animation: "sx-drift 22s var(--e-soft) infinite" }} />
        <div style={{ position: "absolute", top: mobile ? -90 : -140, left: mobile ? -140 : -170, width: mobile ? 420 : 620, height: mobile ? 420 : 620, borderRadius: 999, filter: "blur(90px)", opacity: 0.7, background: "radial-gradient(circle, rgba(61,139,242,0.62), transparent 62%)" }} />
        <div style={{ position: "absolute", top: mobile ? -90 : -140, right: mobile ? -140 : -170, width: mobile ? 420 : 620, height: mobile ? 420 : 620, borderRadius: 999, filter: "blur(90px)", opacity: 0.7, background: "radial-gradient(circle, rgba(61,139,242,0.62), transparent 62%)" }} />
      </div>
      <div aria-hidden className="sx-bg-plus" style={{ position: "absolute", inset: 0, opacity: 0.5, maskImage: "radial-gradient(75% 60% at 50% 18%, black, transparent)", WebkitMaskImage: "radial-gradient(75% 60% at 50% 18%, black, transparent)" }} />
      <div className="sx-container" style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <a className="sx-leap" href={"mailto:" + H.company.email + "?subject=LEAP%202026%20meeting"}>
            <span className="sx-leap-mark"><img src="assets/leap-2026.svg" alt="LEAP" /><span className="sx-micro sx-num">2026</span></span>
            <span className="sx-leap-rule" aria-hidden></span>
            <span className="sx-leap-copy">
              <span className="sx-small">Meet us at LEAPxDeepFest, {H.event.city}</span>
              <span className="sx-caption sx-num">{H.event.dates}</span>
            </span>
            <span className="sx-leap-go" aria-hidden><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10h11M11 6l4 4-4 4" /></svg></span>
          </a>
        </div>
        <div style={{ maxWidth: "56rem", margin: mobile ? "26px auto 0" : "40px auto 0", textAlign: "center" }}>
          <h1 className={mobile ? "sx-h1" : "sx-mega"} style={{ marginTop: mobile ? 22 : 34, fontSize: mobile ? "clamp(2rem, 9.4vw, 2.6rem)" : undefined, lineHeight: mobile ? 1.06 : undefined }}>
            Software that{mobile ? <br /> : " "}<span style={{ color: "var(--sx-accent)", whiteSpace: "nowrap" }}>sees, thinks</span> and endures.
          </h1>
          <p className={mobile ? "sx-body" : "sx-lead"} style={{ margin: mobile ? "16px auto 0" : "28px auto 0", maxWidth: "40rem" }}>
            AI agents, document intelligence, computer vision and data systems at national scale. Built end to end, not a slice of it.
          </p>
          <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "center", gap: mobile ? 10 : 12, marginTop: mobile ? 22 : 36 }}>
            <Button size="lg" as="a" href="/about#start">Book a call</Button>
            <Button size="lg" variant="secondary" as="a" href="/work">See what we've shipped</Button>
          </div>
          <p className="sx-small" style={{ marginTop: mobile ? 14 : 20, color: "var(--text-quiet)" }}>
            Or start with a <a href="/about#start" style={{ color: "var(--text-accent)" }}>two-week discovery sprint</a>. You keep the plan either way.
          </p>
        </div>
        {/* Three figures, not five, and one of them moves. A row of simultaneous
            count-ups reads as a widget; a single one reads as a measurement.
            Every value comes from the data file, none is typed here. */}
        <dl style={{ margin: `${mobile ? 28 : 64}px 0 0`, display: "grid", gap: 1, gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", background: "var(--border-default)", border: "1px solid var(--border-default)", borderRadius: "var(--r-card)", overflow: "hidden" }}>
          {[
            { v: H.company.years, s: " yrs", l: "Engineering since 1999", count: true },
            { v: H.company.served, s: "", l: "End customers on platforms we run" },
            { v: H.company.programmes, s: "", l: "Programmes delivered since 1999" },
          ].map((s) => (
            <div key={s.l} style={{ background: "var(--bg-page)", padding: mobile ? "16px 14px" : "26px 24px" }}>
              {s.count
                ? <Stat value={s.v} suffix={s.s} label={s.l} size={mobile ? "h3" : "h1"} />
                : (<>
                    <dd className={`${mobile ? "sx-h3" : "sx-h1"} sx-num`} style={{ margin: 0, color: "var(--text-strong)" }}>{s.v}{s.s}</dd>
                    <dt className="sx-small" style={{ marginTop: 8, color: "var(--text-quiet)" }}>{s.l}</dt>
                  </>)}
            </div>
          ))}
        </dl>
        <div style={{ marginTop: mobile ? 24 : 52, borderBottom: "1px solid var(--border-default)", paddingBottom: mobile ? 14 : 20, borderTop: "1px solid var(--border-default)", paddingTop: mobile ? 14 : 20, overflow: "hidden", maskImage: "linear-gradient(to right, transparent, black 5rem, black calc(100% - 5rem), transparent)", WebkitMaskImage: "linear-gradient(to right, transparent, black 5rem, black calc(100% - 5rem), transparent)" }}>
        <div style={{ display: "flex", width: "max-content", gap: mobile ? 22 : 40, animation: "sx-marquee 42s linear infinite" }}>
          {[...TICKER, ...TICKER].map((t, i) => <span key={i} className="sx-micro" style={{ color: "var(--text-quiet)", whiteSpace: "nowrap" }}>{t}</span>)}
          </div>
      </div>
        <div style={{ marginTop: mobile ? 26 : 72 }}>
          <SectionHeader title="Our end-to-end systems, live"
            lead="What we watch while our systems run: throughput, model decisions, and everything handed to a person." />
          <Annotate conf={0.99} animate style={{ padding: 10, marginTop: mobile ? 18 : 28 }}>
            <OperationsConsole mobile={mobile} />
          </Annotate>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero });