// content-sections.jsx — AppKinds, Integrations, InternalTools, StartCTA, Footer
const { useState: useCS } = React;

function SageLogoIcon({ size = 24 }) {
  const isArticle = typeof window !== "undefined" && window.location.pathname.includes("/articles/");
  const src = isArticle ? "../assets/sageLogopng.png" : "assets/sageLogopng.png";
  return (
    <img src={src} alt="Sage Logo" style={{ height: size, width: "auto", objectFit: "contain" }} />
  );
}

/* ====================================================================
   METRICS SECTION
   ==================================================================== */
function MetricsSection({ sageMode }) {
  const metrics = sageMode ? [
    { value: "100%", label: "SYNC\nACCURACY", color: "#00D639" },
    { value: "0", label: "MANUAL SYNC\nERRORS", color: "#73f090" },
    { value: "Real-time", label: "DATA\nPIPELINES", color: "#00843D" },
    { value: "Custom", label: "SAGE\nPLUGS", color: "var(--accent)" },
  ] : [
    { value: "100%", label: "APP APPROVAL\nRATE", color: "#7c50aa" },
    { value: "6", label: "WEEKS AVG.\nLAUNCH TIME", color: "#93c5fd" },
    { value: "8+", label: "INTEGRATIONS", color: "#c026d3" },
    { value: "∞", label: "IDEAS WE\nCAN BUILD", color: "var(--accent)" },
  ];

  return (
    <section style={{
      borderBottom: "1px solid rgba(255,255,255,0.05)",
      background: sageMode ? "#0b120c" : "linear-gradient(to right, rgba(48, 0, 82, 0.1), rgba(113, 113, 113, 0.1))",
      transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      <div className="wrap" style={{
        display: "flex", flexWrap: "wrap", textAlign: "center"
      }}>
        {metrics.map((m, i) => (
          <div key={i} className={`reveal in d${i}`} style={{
            flex: "1 1 200px",
            padding: "70px 20px",
            borderRight: "1px solid rgba(255,255,255,0.05)",
            borderBottom: "1px solid rgba(255,255,255,0.05)",
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16
          }}>
            <div style={{
              fontSize: "clamp(64px, 6vw, 90px)",
              fontFamily: "var(--font-display)",
              fontWeight: 800,
              color: m.color,
              lineHeight: 1
            }}>
              {m.value}
            </div>
            <div style={{
              fontSize: 10,
              fontFamily: "var(--font-mono)",
              letterSpacing: "0.2em",
              color: "var(--ink-dim)",
              whiteSpace: "pre-wrap",
              textTransform: "uppercase",
              lineHeight: 1.6
            }}>
              {m.label}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function WebGraphic({ sageMode }) {
  return (
    <div className="browser" style={{ height: 160, display: "flex", flexDirection: "column", boxShadow: "0 10px 30px rgba(0,0,0,0.05)" }}>
      <div className="bar" style={{ padding: "6px 12px", minHeight: 24 }}>
        <i style={{ background: "#ef4444" }} /><i style={{ background: "#eab308" }} /><i style={{ background: "#22c55e" }} />
        <div className="url" style={{ height: 16, fontSize: 8 }}>{sageMode ? "sage.yourcompany.co.za" : "app.yourco.co.za"}</div>
      </div>
      <div style={{ flex: 1, display: "flex", background: sageMode ? "#050806" : "#0a0814", padding: "10px 12px", gap: 12 }}>
        {/* Sidebar */}
        <div style={{ width: 22, display: "flex", flexDirection: "column", gap: 8, alignItems: "center", background: "rgba(255,255,255,0.02)", padding: "8px 0", borderRadius: 8 }}>
          <div style={{ width: 12, height: 12, borderRadius: 4, background: sageMode ? "#00D639" : "var(--primary)" }} />
          {[1, 2, 3, 4].map(i => <div key={i} style={{ width: 12, height: 12, borderRadius: 4, background: "rgba(255,255,255,0.06)" }} />)}
        </div>
        {/* Main */}
        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ display: "flex", gap: 8, height: 34 }}>
            {[
              { val: sageMode ? "100%" : "68%", c: sageMode ? "#00D639" : "var(--primary)" },
              { val: sageMode ? "OK" : "42%", c: sageMode ? "#73f090" : "var(--accent)" },
              { val: sageMode ? "Live" : "81%", c: sageMode ? "#00843D" : "#c026d3" }
            ].map((v, i) => (
              <div key={i} style={{ flex: 1, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 700, color: v.c }}>{v.val}</span>
              </div>
            ))}
          </div>
          <div style={{ flex: 1, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 6, padding: "8px 8px 0", display: "flex", alignItems: "flex-end", gap: 4 }}>
            {[30, 50, 40, 70, 90, 60, 80, 55, 75].map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h}%`, background: i % 2 === 0 ? (sageMode ? "#00D639" : "var(--primary)") : (sageMode ? "#73f090" : "var(--accent)"), borderTopLeftRadius: 2, borderTopRightRadius: 2 }} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MobileGraphic({ sageMode }) {
  return (
    <div style={{ height: 160, borderRadius: 16, background: "rgba(0,0,0,0.15)", border: "1px solid rgba(255,255,255,0.04)", display: "grid", placeItems: "center" }}>
      <div style={{ width: 64, height: 130, borderRadius: 16, background: sageMode ? "#050806" : "#0a0814", boxShadow: "0 10px 20px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.1)", position: "relative", padding: "16px 8px 8px", display: "flex", flexDirection: "column", alignItems: "center" }}>
        {/* Notch */}
        <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 24, height: 5, background: sageMode ? "#0b120c" : "#110d19", borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }} />

        <div style={{ fontSize: 8, fontFamily: "var(--font-display)", fontWeight: 700, marginBottom: 10, color: "#fff" }}>{sageMode ? "Sage Sync" : "My App"}</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, width: "100%" }}>
          <div style={{ aspectRatio: "1/1", background: "rgba(255,255,255,0.06)", borderRadius: 6, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4 }}>
            <div style={{ width: 12, height: 12, background: sageMode ? "#00D639" : "#d97757", borderRadius: 3 }} />
            <div style={{ width: 12, height: 3, background: sageMode ? "#73f090" : "var(--primary)", borderRadius: 2 }} />
          </div>
          <div style={{ aspectRatio: "1/1", background: "rgba(255,255,255,0.06)", borderRadius: 6, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4 }}>
            <div style={{ width: 12, height: 12, background: sageMode ? "linear-gradient(135deg, #00D639, #73f090)" : "linear-gradient(135deg, var(--accent), #3b82f6)", borderRadius: 3 }} />
            <div style={{ width: 12, height: 3, background: sageMode ? "#73f090" : "var(--primary)", borderRadius: 2 }} />
          </div>
          <div style={{ aspectRatio: "1/1", background: "rgba(255,255,255,0.06)", borderRadius: 6, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4 }}>
            <div style={{ width: 12, height: 12, background: sageMode ? "#99cfad" : "#eab308", borderRadius: 6 }} />
            <div style={{ width: 12, height: 3, background: sageMode ? "#00D639" : "var(--primary)", borderRadius: 2 }} />
          </div>
          <div style={{ aspectRatio: "1/1", background: "rgba(255,255,255,0.06)", borderRadius: 6, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4 }}>
            <div style={{ width: 12, height: 12, background: "#fff", borderRadius: 3, display: "grid", placeItems: "center" }}>
              <div style={{ width: 4, height: 4, background: "#0a0814", borderRadius: 2 }} />
            </div>
            <div style={{ width: 12, height: 3, background: sageMode ? "#00D639" : "var(--primary)", borderRadius: 2 }} />
          </div>
        </div>
      </div>
    </div>
  );
}

function DesktopGraphic({ sageMode }) {
  return (
    <div className="browser" style={{ height: 160, display: "flex", flexDirection: "column", boxShadow: "0 10px 30px rgba(0,0,0,0.05)" }}>
      <div className="bar" style={{ padding: "6px 12px", minHeight: 24, justifyContent: "flex-start" }}>
        <i style={{ background: "#ef4444" }} /><i style={{ background: "#eab308" }} /><i style={{ background: "#22c55e" }} />
        <div style={{ flex: 1, textAlign: "center", fontSize: 8, fontFamily: "var(--font-mono)", color: "var(--ink-faint)", marginLeft: -30 }}>{sageMode ? "Sage DB Sync Manager" : "Blackstone App - Dashboard"}</div>
      </div>
      <div style={{ flex: 1, display: "flex", background: sageMode ? "#050806" : "#0a0814", padding: "10px 12px", gap: 12 }}>
        {/* Sidebar */}
        <div style={{ width: "45%", display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 8px", background: "rgba(255,255,255,0.05)", borderRadius: 6, border: "1px solid rgba(255,255,255,0.05)" }}>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: sageMode ? "#00D639" : "var(--primary)" }} />
            <div style={{ flex: 1, height: 4, borderRadius: 2, background: "rgba(255,255,255,0.2)" }} />
            <div style={{ width: 16, height: 4, borderRadius: 2, background: sageMode ? "#73f090" : "var(--accent)" }} />
          </div>
          {[1, 2, 3].map(i => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 8px" }}>
              <div style={{ width: 4, height: 4, borderRadius: 2, background: "rgba(255,255,255,0.2)" }} />
              <div style={{ flex: 1, height: 4, borderRadius: 2, background: "rgba(255,255,255,0.1)" }} />
            </div>
          ))}
        </div>
        {/* Main */}
        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ flex: 1, background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.04)", borderRadius: 6, display: "grid", placeItems: "center" }}>
            {/* Donut chart */}
            <div style={{ width: 36, height: 36, borderRadius: "50%", border: `6px solid ${sageMode ? "#00D639" : "var(--primary)"}`, borderTopColor: sageMode ? "#73f090" : "var(--accent)", transform: "rotate(45deg)" }} />
          </div>
          <div style={{ height: 34, display: "flex", alignItems: "flex-end", gap: 4, background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.04)", borderRadius: 6, padding: "6px 6px 0" }}>
            {[30, 50, 45, 75, 40, 65].map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h}%`, background: i % 2 === 0 ? (sageMode ? "#00D639" : "var(--primary)") : (sageMode ? "#73f090" : "var(--accent)"), borderTopLeftRadius: 2, borderTopRightRadius: 2 }} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ====================================================================
   WHAT WE MAKE — every kind of app
   ==================================================================== */
function AppKinds({ sageMode, toggleSageMode }) {
  const cards = sageMode ? [
    {
      graphic: <WebGraphic sageMode={sageMode} />, glyph: "web", tint: "#00D639",
      title: "Sage Web Portals", line: "Custom client portals and dashboards powered by Sage data.",
      chips: ["Customer Portals", "Sales Dashboards", "Live Orders"]
    },
    {
      graphic: <MobileGraphic sageMode={sageMode} />, glyph: "mobile", tint: "#73f090",
      title: "Sage Mobile Apps", line: "Field sales, inventory management, and reports on the go.",
      chips: ["iOS Sync", "Android Offline", "Barcode Scanners"]
    },
    {
      graphic: <DesktopGraphic sageMode={sageMode} />, glyph: "desktop", tint: "var(--accent)",
      title: "Desktop Utilities", line: "High-performance internal software that links directly to Sage.",
      chips: ["Local Sync", "Offline-ready", "Direct DB Plugs"]
    },
  ] : [
    {
      graphic: <WebGraphic sageMode={sageMode} />, glyph: "web", tint: "var(--primary)", title: "Web apps", line: "Runs in any browser, works on every screen",
      chips: ["Dashboards", "Portals", "Tools"]
    },
    {
      graphic: <MobileGraphic sageMode={sageMode} />, glyph: "mobile", tint: "#c026d3", title: "Mobile apps", line: "iPhone and Android apps on your device",
      chips: ["iOS", "Android"]
    },
    {
      graphic: <DesktopGraphic sageMode={sageMode} />, glyph: "desktop", tint: "var(--accent)", title: "Desktop apps", line: "Proper software for your existing setup",
      chips: ["Mac", "Windows", "Offline-ready"]
    },
  ];
  return (
    <section id="make" className="sec-pad" style={{
      background: sageMode ? "#050806" : "transparent",
      transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      <div className="wrap">
        <SecHead
          title={sageMode ? <>Sage integrations <span className="grad-text">for every screen</span></> : <>We build <span className="grad-text">every kind of app</span></>}
        />
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 22, marginTop: 64,
        }}>
          {cards.map((c, i) => (
            <div key={i} className={`glass glow-card reveal d${i + 1}`} onMouseMove={glowMove} style={{ padding: "24px 24px 34px", display: "flex", flexDirection: "column", gap: 24 }}>
              <div style={{ marginBottom: 4 }}>{c.graphic}</div>
              <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <GlassIcon glyph={c.glyph} tint={c.tint} size={56} />
                <div>
                  <h3 style={{ fontSize: 22, marginBottom: 8 }}>{c.title}</h3>
                  <p style={{ color: "var(--ink-dim)", fontSize: 15, lineHeight: 1.4 }}>{c.line}</p>
                </div>
              </div>
              <div className="chips" style={{ marginTop: "auto" }}>
                {c.chips.map((ch, j) => <span key={j} className="chip" style={{ fontSize: 11, padding: "7px 12px" }}>{ch}</span>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }} className="reveal d4">
          <button onClick={toggleSageMode} className="btn btn-sage" style={{ padding: "12px 26px", fontSize: 15, cursor: "pointer", border: "none" }}>
            {sageMode ? "Back to apps" : "Sage integrations"}
          </button>
        </div>
      </div>
    </section>
  );
}

/* ====================================================================
   INTEGRATIONS — apps that plug into your systems
   ==================================================================== */
function Integrations({ sageMode }) {
  const tools = sageMode ? ["Sage 50", "Sage 200", "Sage Pastel", "Sage Evolution", "Sage Intacct", "Custom APIs", "Local DBs", "Excel Sync"] : ["Payments", "WhatsApp", "CRM", "ERP", "Databases", "Email", "Spreadsheets", "APIs"];
  return (
    React.createElement("section", {
      id: "integrate",
      className: "sec-pad",
      style: {
        background: sageMode ? "#0b120c" : "transparent",
        transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
      }
    },
      React.createElement("div", {
        className: "wrap", style: {
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px,6vw,90px)", alignItems: "center",
        }
      },
        // left — copy
        React.createElement("div", null,
          React.createElement(SecHead, {
            align: "left",
            eyebrow: sageMode ? "Custom Integrations" : "Plugs in",
            title: sageMode ?
              React.createElement(React.Fragment, null, "Custom Plugs for ", React.createElement("span", { className: "grad-text" }, "Sage ERP")) :
              React.createElement(React.Fragment, null, "Talks to the stuff you ", React.createElement("span", { className: "grad-text" }, "already use")),
            lead: sageMode ?
              "We write custom API connectors and middleware that link your apps directly to your Sage environment." :
              "We build apps that connect to your existing tools & software, so everything works together",
          }),
          !sageMode && React.createElement("div", { className: "chips reveal d3", style: { marginTop: 34 } },
            tools.map((t, i) => React.createElement("span", { key: i, className: "chip" },
              React.createElement("span", { className: "dot", style: { background: "var(--accent)", boxShadow: "0 0 10px var(--accent)" } }), t))),
        ),
        // right — node diagram or flat graphic
        React.createElement("div", { className: "reveal d2" }, React.createElement(IntegrationDiagram, { sageMode })),
      )
    )
  );
}

function IntegrationDiagram({ sageMode }) {
  if (sageMode) {
    return (
      <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 20,
        padding: "40px 24px",
        maxWidth: 480,
        margin: "0 auto",
        position: "relative"
      }}>
        {/* Blackstone Card */}
        <div className="glass" style={{
          flex: 1,
          padding: 24,
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 12,
          aspectRatio: "1/1",
          background: "#050806",
          border: "1px solid rgba(0, 214, 57, 0.15)",
          borderRadius: 16
        }}>
          <div style={{
            width: 50,
            height: 50,
            borderRadius: 12,
            background: "linear-gradient(135deg, #00D639, #00843D)",
            display: "grid",
            placeItems: "center",
            fontSize: 20,
            fontWeight: 800,
            color: "#fff"
          }}>
            B
          </div>
          <div style={{ fontWeight: 700, fontSize: 14, color: "#fff" }}>Custom App</div>
          <div style={{ fontSize: 11, color: "var(--ink-dim)" }}>Client Portal</div>
        </div>

        {/* Connection Sync arrow */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
          <svg width="40" height="24" viewBox="0 0 40 24" fill="none">
            <path d="M8 7H32M32 7L26 2M32 7L26 12M32 17H8M8 17L14 12M8 17L14 22" stroke="#00D639" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span style={{ fontSize: 9, fontFamily: "var(--font-mono)", color: "#00D639", fontWeight: 700 }}>Direct Sync</span>
        </div>

        {/* Sage ERP Card */}
        <div className="glass" style={{
          flex: 1,
          padding: 24,
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 12,
          aspectRatio: "1/1",
          background: "#0b120c",
          border: "1px solid rgba(0, 214, 57, 0.25)",
          borderRadius: 16
        }}>
          <div style={{
            width: 50,
            height: 50,
            borderRadius: 12,
            background: "#fff",
            display: "grid",
            placeItems: "center"
          }}>
            <img src="assets/sageLogopng.png" alt="Sage Logo" style={{ width: 36, height: "auto", objectFit: "contain" }} />
          </div>
          <div style={{ fontWeight: 700, fontSize: 14, color: "#fff" }}>Sage ERP</div>
          <div style={{ fontSize: 11, color: "var(--ink-dim)" }}>Database</div>
        </div>
      </div>
    );
  }

  // central glass hub with satellites connected by animated lines
  const sats = [
    { glyph: "link", a: -90 }, { glyph: "bars", a: -30 }, { glyph: "spark", a: 30 },
    { glyph: "grid", a: 90 }, { glyph: "bolt", a: 150 }, { glyph: "web", a: 210 },
  ];
  const R = 150;
  return (
    React.createElement("div", {
      className: "glass", style: {
        position: "relative", aspectRatio: "1/1", maxWidth: 480, margin: "0 auto",
        display: "grid", placeItems: "center", padding: 24, overflow: "hidden",
      }
    },
      // connecting lines
      React.createElement("svg", { viewBox: "0 0 400 400", style: { position: "absolute", inset: 0, width: "100%", height: "100%" } },
        sats.map((s, i) => {
          const rad = s.a * Math.PI / 180;
          return React.createElement("line", {
            key: i, x1: 200, y1: 200,
            x2: 200 + Math.cos(rad) * R, y2: 200 + Math.sin(rad) * R,
            stroke: "url(#lg-sage)", strokeWidth: 1.5, strokeDasharray: "4 6",
            className: "int-line", style: { animationDelay: `${i * 0.3}s` },
          });
        }),
        React.createElement("defs", null,
          React.createElement("linearGradient", { id: "lg-sage", x1: "0", y1: "0", x2: "1", y2: "1" },
            React.createElement("stop", { offset: "0", stopColor: "var(--primary-soft)" }),
            React.createElement("stop", { offset: "1", stopColor: "var(--accent)" }))),
      ),
      // central hub
      React.createElement("div", {
        style: {
          width: 96, height: 96, borderRadius: 26, zIndex: 2,
          background: "linear-gradient(150deg, var(--primary), #c026d3)",
          boxShadow: "inset 0 1px 0 rgba(255,255,255,.5), 0 16px 40px color-mix(in oklab,var(--primary) 55%,transparent)",
          display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, color: "#fff",
        }
      }, "B"),
      // satellites
      sats.map((s, i) => {
        const rad = s.a * Math.PI / 180;
        return React.createElement("div", {
          key: i, style: {
            position: "absolute", zIndex: 2,
            left: `calc(50% + ${Math.cos(rad) * R}px)`, top: `calc(50% + ${Math.sin(rad) * R}px)`,
            transform: "translate(-50%,-50%)",
          }
        }, React.createElement(GlassIcon, { glyph: s.glyph, tint: i % 2 ? "var(--accent)" : "var(--primary)", size: 52 }));
      }),
    )
  );
}

/* ====================================================================
   INTERNAL TOOLS — sort out the busywork
   ==================================================================== */
function InternalTools({ sageMode }) {
  const points = sageMode ? [
    { glyph: "bars", t: "Real-Time Invoicing", d: "Push invoice batches straight into Sage Pastel or Evolution." },
    { glyph: "bolt", t: "Inventory Pipeline", d: "Sync stock levels automatically between your e-commerce and Sage." },
    { glyph: "grid", t: "Custom Reporting", d: "Generate customized dashboards that extract data from Sage DBs." },
  ] : [
    { glyph: "bars", t: "See everything", d: "One clean dashboard instead of ten spreadsheets." },
    { glyph: "bolt", t: "Skip the busywork", d: "The repetitive stuff runs itself, quietly." },
    { glyph: "grid", t: "Fewer mistakes", d: "No more copy-paste between systems." },
  ];
  return (
    React.createElement("section", {
      id: "internal",
      className: "sec-pad",
      style: {
        background: sageMode ? "#050806" : "transparent",
        transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
      }
    },
      React.createElement("div", {
        className: "wrap", style: {
          display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(40px,6vw,80px)", alignItems: "center",
        }
      },
        // left — dashboard mockup
        React.createElement("div", { className: "reveal d1" }, React.createElement(DashboardMock, { sageMode })),
        // right — copy
        React.createElement("div", null,
          React.createElement(SecHead, {
            align: "left",
            eyebrow: sageMode ? "Automated Flow" : "Internal tools",
            title: sageMode ?
              React.createElement(React.Fragment, null, "Automate your ", React.createElement("span", { className: "grad-text" }, "Sage accounts")) :
              React.createElement(React.Fragment, null, "The boring busywork? ", React.createElement("span", { className: "grad-text" }, "Sorted")),
            lead: sageMode ?
              "Stop copy-pasting customer details and invoices. We build custom dashboards and automated pipelines that link to Sage." :
              "All that stuff your team does by hand every day — we turn it into a clean, simple tool. Less admin, fewer slip-ups, more time for the real work.",
          }),
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 18, marginTop: 36 } },
            points.map((p, i) =>
              React.createElement("div", { key: i, className: `reveal d${i + 2}`, style: { display: "flex", gap: 18, alignItems: "center" } },
                React.createElement(GlassIcon, { glyph: p.glyph, tint: sageMode ? "#00D639" : (i === 1 ? "var(--accent)" : "var(--primary)"), size: 56 }),
                React.createElement("div", null,
                  React.createElement("div", { style: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20 } }, p.t),
                  React.createElement("div", { style: { color: "var(--ink-dim)", fontSize: 16 } }, p.d),
                ),
              )
            ),
          ),
        ),
      )
    )
  );
}

function SyntheticDashboard({ sageMode }) {
  const stat = sageMode ? [
    ["Sync Rate", "100%", "#00D639"],
    ["Queue Size", "0", "#73f090"],
    ["Errors", "0%", "var(--accent)"]
  ] : [
    ["Active users", "62%", "var(--primary)"],
    ["Tasks done", "84%", "var(--accent)"],
    ["Errors", "12%", "#c026d3"]
  ];
  return (
    React.createElement("div", { style: { width: "100%", height: "100%", display: "grid", gridTemplateColumns: "64px 1fr", background: "linear-gradient(160deg,#120e26,#0a0814)" } },
      // sidebar
      React.createElement("div", { style: { borderRight: "1px solid rgba(255,255,255,.07)", padding: "16px 0", display: "flex", flexDirection: "column", gap: 12, alignItems: "center" } },
        React.createElement("div", { style: { width: 30, height: 30, borderRadius: 9, background: sageMode ? "linear-gradient(150deg,#00D639,#00843D)" : "linear-gradient(150deg,var(--primary),#c026d3)" } }),
        [1, 2, 3, 4].map((i) => React.createElement("div", { key: i, style: { width: 28, height: 28, borderRadius: 8, background: i === 1 ? "rgba(255,255,255,.14)" : "rgba(255,255,255,.05)" } }))),
      // body
      React.createElement("div", { style: { padding: 18, display: "flex", flexDirection: "column", gap: 14, minWidth: 0 } },
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
          React.createElement("div", { style: { width: 110, height: 12, borderRadius: 6, background: "rgba(255,255,255,.16)" } }),
          React.createElement("div", { style: { width: 64, height: 22, borderRadius: 999, background: sageMode ? "#00D639" : "var(--primary)" } })),
        React.createElement("div", { style: { display: "flex", gap: 12 } },
          stat.map(([label, h, c], i) =>
            React.createElement("div", { key: i, style: { flex: 1, minWidth: 0, height: 86, borderRadius: 12, background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.08)", padding: 12, display: "flex", flexDirection: "column", justifyContent: "space-between" } },
              React.createElement("div", { style: { width: "70%", height: 7, borderRadius: 4, background: "rgba(255,255,255,.18)" } }),
              React.createElement("div", { style: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: "#fff" } }, h),
              React.createElement("div", { style: { height: 4, borderRadius: 2, background: c, width: "100%", boxShadow: `0 0 12px ${c}` } })))),
        React.createElement("div", { style: { flex: 1, borderRadius: 12, background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.08)", padding: 16, display: "flex", alignItems: "flex-end", gap: 7, minHeight: 120 } },
          [40, 64, 48, 80, 56, 72, 92, 60, 78, 50, 70].map((h, i) =>
            React.createElement("div", { key: i, style: { flex: 1, height: `${h}%`, borderRadius: 5, background: i % 2 ? (sageMode ? "#73f090" : "var(--accent)") : (sageMode ? "#00D639" : "var(--primary)"), opacity: .7 } }))),
      ),
    )
  );
}

function DashboardMock({ sageMode }) {
  return (
    React.createElement("div", { className: "browser" },
      React.createElement("div", { className: "bar" },
        React.createElement("i", null), React.createElement("i", null), React.createElement("i", null),
        React.createElement("div", { className: "url" }, sageMode ? "sage.yourcompany.co.za" : "app.yourcompany.co.za")),
      React.createElement("div", { style: { position: "relative", height: 340 } },
        React.createElement(SyntheticDashboard, { sageMode }),
        React.createElement("image-slot", {
          id: "dashboard-shot", style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
          shape: "rect", placeholder: "",
        }),
      ),
    )
  );
}

/* ====================================================================
   CONTACT SECTION
   ==================================================================== */
function ContactSection({ sageMode }) {
  return (
    <section id="contact" className="sec-pad" style={{
      borderTop: "1px solid rgba(255,255,255,0.04)",
      background: sageMode ? "#0b120c" : "transparent",
      transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      <div className="wrap">
        <div className="glass glow-card reveal in" onMouseMove={glowMove} style={{
          padding: "clamp(24px, 4vw, 40px)",
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
          gap: "clamp(24px, 4vw, 48px)",
          alignItems: "center"
        }}>

          {/* Contact Details */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <h3 style={{ fontSize: "clamp(28px, 4vw, 36px)", marginBottom: 8 }}>Get in touch</h3>

            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {/* Fayyad */}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                <div style={{ fontSize: 17, fontWeight: 500 }}>+27 71 624 1784 <span style={{ color: "var(--ink-dim)", fontWeight: 400 }}>— Fayyad</span></div>
              </div>

              {/* Suhail */}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                <div style={{ fontSize: 17, fontWeight: 500 }}>+27 76 322 2509 <span style={{ color: "var(--ink-dim)", fontWeight: 400 }}>— Suhail</span></div>
              </div>

              {/* Email */}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                <a href="mailto:info@blackstoneai.co.za" style={{ fontSize: 17, fontWeight: 500, color: "var(--ink)", textDecoration: "none" }}>info@blackstoneai.co.za</a>
              </div>

              {/* Location */}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={sageMode ? "#00D639" : "#c026d3"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                <div style={{ fontSize: 17, fontWeight: 500 }}>Pretoria, South Africa</div>
              </div>
            </div>
          </div>

          {/* Image */}
          <div style={{ borderRadius: 16, overflow: "hidden", position: "relative", minHeight: 280, height: "100%", border: "1px solid rgba(255,255,255,0.08)" }}>
            <img src={sageMode ? "pretoria_day.png" : "pretoria.png"} alt="Pretoria" style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
            <div style={{ position: "absolute", inset: 0, background: sageMode ? "linear-gradient(to top right, rgba(11,18,12,0.3), transparent)" : "linear-gradient(to top right, rgba(10,8,20,0.3), transparent)" }} />
          </div>

        </div>
      </div>
    </section>
  );
}

/* ====================================================================
   START CTA
   ==================================================================== */
function StartCTA({ sageMode }) {
  const originalTypes = ["Mobile app", "Web app", "Desktop app", "Internal tool", "Not sure yet"];
  const sageTypes = ["Sage Pastel Sync", "Sage Evolution API", "Client Portal", "Custom Report Dashboard", "Other ERP Sync"];
  const types = sageMode ? sageTypes : originalTypes;
  const [pick, setPick] = useCS(types[0]);

  // If types changes, reset pick to matching default
  React.useEffect(() => {
    setPick(types[0]);
  }, [sageMode]);

  return (
    <section id="start" className="sec-pad" style={{
      background: sageMode ? "#0b120c" : "transparent",
      transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      <div className="wrap">
        <div className="glass glow-card reveal" onMouseMove={glowMove} style={{
          padding: "clamp(40px, 6vw, 80px)", textAlign: "center", position: "relative", overflow: "hidden",
        }}>
          <div className="eyebrow" style={{ justifyContent: "center", marginBottom: 22 }}>Start a project</div>
          <h2 style={{ fontSize: "clamp(34px,5vw,68px)" }}>
            {sageMode ?
              <>Connect your app to <span className="grad-text">Sage ERP.</span></> :
              <>Tell us what you're <span className="grad-text">trying to build.</span></>
            }
          </h2>
          <p className="lead" style={{ margin: "22px auto 0", textAlign: "center" }}>
            {sageMode ?
              "Tell us which Sage version you run and what processes you want to automate. We'll outline a direct sync solution." :
              "No jargon, no long forms. Tell us the idea — we'll map the quickest way to make it real."
            }
          </p>

          {/* project type chips */}
          <div className="chips" style={{ justifyContent: "center", marginTop: 34 }}>
            {types.map((t, i) => (
              <button key={i} type="button" className="chip" onClick={() => setPick(t)} style={{
                cursor: "pointer", border: pick === t ? "1px solid var(--primary-soft)" : "1px solid var(--glass-brd)",
                color: pick === t ? "#fff" : "var(--ink-dim)",
                background: pick === t ? "color-mix(in oklab,var(--primary) 30%,transparent)" : "var(--glass-bg-2)",
              }}>
                {t}
              </button>
            ))}
          </div>

          {/* formspree form */}
          <form action="https://formspree.io/f/xqeyedqn" method="POST" style={{ display: "flex", gap: 12, maxWidth: 520, margin: "26px auto 0", flexWrap: "wrap", justifyContent: "center" }}>
            <input type="hidden" name="project_type" value={pick} />
            <input name="email" type="email" required placeholder="your@email.com" style={{
              flex: "1 1 240px", minWidth: 0, padding: "15px 20px", borderRadius: 999,
              background: "var(--glass-bg-2)", border: "1px solid var(--glass-brd)", color: "var(--ink)",
              fontFamily: "var(--font-body)", fontSize: 16, outline: "none",
            }} />
            <button type="submit" className="btn btn-primary">Let's talk <span className="arr">→</span></button>
          </form>

          <div className="mono" style={{ marginTop: 18, fontSize: 12.5, color: "var(--ink-faint)" }}>
            or email info@blackstoneai.co.za
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====================================================================
   FOOTER
   ==================================================================== */
function Footer({ sageMode }) {
  return (
    React.createElement("footer", {
      style: {
        padding: "60px 0 50px",
        borderTop: "1px solid rgba(255,255,255,.06)",
        marginTop: 40,
        background: sageMode ? "#050806" : "transparent",
        transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
      }
    },
      React.createElement("div", { className: "wrap", style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" } },
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12 } },
          React.createElement("span", { style: { width: 30, height: 30, borderRadius: 9, background: sageMode ? "linear-gradient(150deg,#00D639,#00843D)" : "linear-gradient(150deg,var(--primary),#c026d3)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 800, color: "#fff", fontSize: 16 } }, "B"),
          React.createElement("div", null,
            React.createElement("div", { style: { fontFamily: "var(--font-display)", fontWeight: 700 } }, "Blackstone Apps"),
            React.createElement("div", { className: "mono", style: { fontSize: 11.5, color: "var(--ink-faint)" } }, "A division of Blackstone AI (PTY) LTD"))),
        React.createElement("div", { className: "mono", style: { fontSize: 13, color: "var(--ink-dim)", display: "flex", gap: 20, flexWrap: "wrap" } },
          React.createElement("span", null, "Johannesburg, South Africa"),
          React.createElement("a", { className: "foot-link", href: "mailto:info@blackstoneai.co.za" }, "info@blackstoneai.co.za")),
      ),
      React.createElement("div", { className: "wrap mono", style: { fontSize: 11.5, color: "var(--ink-faint)", marginTop: 30, opacity: .7 } },
        "© " + new Date().getFullYear() + " Blackstone Apps — Apps for the world, built from Joburg."),
    )
  );
}

/* ====================================================================
   LATEST BLOGS
   ==================================================================== */
function LatestBlogs({ sageMode }) {
  const posts = [
    {
      id: "sa-big-5-construct-expo",
      title: "SA Big 5 Construct Expo Insights",
      date: "11 June 2026",
      image: "https://i.imgur.com/gct50qd.png",
      link: "articles/sa-big-5-construct-expo.html"
    },
    {
      id: "real-business-impact",
      title: "From Custom Software to Real Business Impact 🚀",
      date: "10 June 2026",
      image: "https://i.imgur.com/ujArCI5.jpeg",
      link: "articles/real-business-impact.html"
    },
    {
      id: "mobile-vs-web",
      title: "Mobile App vs Web App — What's Best for You?",
      date: "10 June 2026",
      image: "https://i.imgur.com/89Mdmtp.jpeg",
      link: "articles/mobile-vs-web.html"
    }
  ];

  const getLink = (base) => {
    return sageMode ? `${base}?sage=true` : base;
  };

  return (
    <section className="sec-pad" style={{
      borderTop: "1px solid rgba(255,255,255,0.04)",
      background: sageMode ? "#050806" : "transparent",
      transition: "background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
          <SecHead align="left" eyebrow="Our Blog" title={<>Latest <span className="grad-text">Blogs</span></>} />
          <a href={getLink("blogs.html")} className="btn btn-ghost" style={{ fontSize: 14, padding: "8px 16px", marginBottom: 12 }}>View all <span className="arr">→</span></a>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
          gap: 24
        }}>
          {posts.map((p, i) => (
            <a href={getLink(p.link)} key={i} className={`glass glow-card reveal d${i + 1}`} onMouseMove={glowMove} style={{
              display: "flex", flexDirection: "column", padding: 20, textDecoration: "none", color: "inherit", borderRadius: 20
            }}>
              <div style={{ width: "100%", borderRadius: 12, overflow: "hidden", marginBottom: 20, border: "1px solid rgba(255,255,255,0.08)", background: "rgba(0,0,0,0.15)", display: "flex", justifyContent: "center" }}>
                <img src={p.image} alt={p.title} style={{ width: "100%", height: "auto", display: "block" }} />
              </div>
              <div className="eyebrow" style={{ color: "var(--accent)", fontSize: 12, marginBottom: 8 }}>{p.date}</div>
              <h3 style={{ fontSize: 20, lineHeight: 1.3, marginBottom: 12 }}>{p.title}</h3>
              <div style={{ marginTop: "auto", fontSize: 14, fontWeight: 600, color: "var(--primary-soft)", display: "flex", alignItems: "center", gap: 6 }}>
                Read article <span>→</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AppKinds, Integrations, IntegrationDiagram, InternalTools, DashboardMock, ContactSection, LatestBlogs, StartCTA, Footer });