/* eslint-disable */
// Corporate Home — DAE (daeit.com.sg) revamp
// One long landing page rendered inside a fixed-width design-canvas artboard.

const { useState: useStateCH } = React;

// ============================== NAV =====================================
function CHNav({ active = "Home" }) {
  const links = [
  { l: "Platform", href: "/platform" },
  { l: "Solutions", href: "/solutions" },
  { l: "Fleet Intelligence", href: "/fleet" },
  { l: "Industries", href: "/industries" },
  { l: "About", href: "/about" }];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 5,
      background: "rgba(255,255,255,0.92)", backdropFilter: "saturate(180%) blur(12px)",
      borderBottom: "1px solid var(--color-hairline)"
    }}>
      <div className="dae-wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
        <a href="/" style={{textDecoration:"none"}}><DaeWordmark tag="Digital Assistant for Energy" /></a>
        <nav style={{ display: "flex", gap: 32 }}>
          {links.map((it) =>
          <a key={it.l} href={it.href} style={{
            font: "500 14px/1 var(--font-body)",
            color: active === it.l ? "var(--color-ink)" : "var(--color-body)",
            textDecoration: "none",
            position: "relative",
            paddingBottom: 4,
            borderBottom: active === it.l ? "2px solid var(--dae-blue)" : "2px solid transparent"
          }}>{it.l}</a>
          )}
        </nav>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <a href="/#consultation" className="dae-btn dae-btn-primary dae-btn-sm">{"Talk to sales"}</a>
        </div>
      </div>
    </header>);

}

// ============================== HERO ====================================
function CHHero() {
  const points = [22, 18, 24, 16, 20, 12, 18, 8, 14, 6, 12, 4, 10, 3];
  return (
    <section style={{ padding: "88px 0 80px", borderBottom: "1px solid var(--color-hairline)" }}>
      <div className="dae-wrap" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "6px 12px",
            background: "var(--dae-blue-100)", color: "var(--dae-blue-700)",
            borderRadius: 999, font: "500 12px/1 var(--font-mono)", letterSpacing: "0.04em", marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--dae-blue)" }} />
            {"Founded 2015 · Singapore · APAC engineering team"}
          </div>
          <h1 className="dae-h1" style={{ marginBottom: 20 }}>
            {"Software for the operators who keep "}
            <span style={{ color: "var(--dae-blue)" }}>{"energy moving."}</span>
          </h1>
          <p className="dae-lede" style={{ maxWidth: "52ch", marginBottom: 32 }}>
            {"DAE builds the digital backbone for downstream fuel, EV-charging, and commercial-fleet operators across Southeast Asia. From the pump nozzle to the regional roll-up — and now, with our new Fleet Intelligence portal, every vehicle in between."}
          </p>
          <div style={{ display: "flex", gap: 12, marginBottom: 40 }}>
            <a href="/#consultation" className="dae-btn dae-btn-primary dae-btn-lg">{"Talk to sales"}</a>
            <a href="/fleet" className="dae-btn dae-btn-secondary dae-btn-lg">{"Explore Fleet Intelligence"} {Icon.arrow}</a>
          </div>
          <div style={{ display: "flex", gap: 40, paddingTop: 28, borderTop: "1px solid var(--color-hairline)" }}>
            {[
            { v: "APAC", l: "Energy retail · multi-market" },
            { v: "11 yrs", l: "Energy retail focus" },
            { v: "24/7", l: "Operations & SOC" }].
            map((s) =>
            <div key={s.l}>
                <div style={{ font: "600 28px/1 var(--font-display)", letterSpacing: "-0.025em", color: "var(--color-ink)", marginBottom: 4 }}>{s.v}</div>
                <div className="dae-mono" style={{ color: "var(--color-muted)" }}>{s.l}</div>
              </div>
            )}
          </div>
        </div>

        {/* Engineered visual — Fleet Intelligence preview card */}
        <CHHeroVisual points={points} />
      </div>
    </section>);

}

function CHHeroVisual({ points }) {
  return (
    <div style={{
      position: "relative", borderRadius: 16, padding: 24,
      background: "linear-gradient(160deg, var(--color-surface-soft), var(--color-canvas) 60%)",
      border: "1px solid var(--color-hairline)", boxShadow: "var(--shadow-lg)",
      minHeight: 520
    }}>
      {/* Header band */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, font: "500 11px/1 var(--font-mono)", color: "var(--color-muted)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
          <span className="dae-dot" /> {"fleet.daeit.com.sg · Live"}
        </div>
        <div className="dae-mono" style={{ color: "var(--color-muted)" }}>{"REGION · SG"}</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
        <div className="dae-card-flat" style={{ padding: 16 }}>
          <div className="dae-mono" style={{ color: "var(--color-muted)", marginBottom: 10 }}>{"Active vehicles"}</div>
          <div style={{ font: "600 32px/1 var(--font-display)", letterSpacing: "-0.02em", color: "var(--color-ink)" }}>
            {"Live"}
          </div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 10, font: "500 12px/1 var(--font-body)", color: "#047857" }}>
            <span className="dae-dot" />{"All depots healthy"}
          </div>
        </div>
        <div className="dae-card-flat" style={{ padding: 16 }}>
          <div className="dae-mono" style={{ color: "var(--color-muted)", marginBottom: 10 }}>{"Fuel · last 24h"}</div>
          <div style={{ font: "600 32px/1 var(--font-display)", letterSpacing: "-0.02em", color: "var(--color-ink)" }}>
            {"Reconciled"}
          </div>
          <div style={{ font: "400 12px/1 var(--font-body)", color: "#047857", marginTop: 10 }}>{"Variance ≤ target"}</div>
        </div>
      </div>

      {/* Anomaly chart */}
      <div className="dae-card-flat" style={{ padding: 16, marginBottom: 12 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
          <div className="dae-mono" style={{ color: "var(--color-muted)" }}>{"Anomaly detection · 7d"}</div>
          <div className="dae-chip dae-chip-warn" style={{ height: 22, fontSize: 11 }}>{"3 events"}</div>
        </div>
        <Sparkline points={points} color="var(--dae-blue)" fill={true} height={56} />
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, font: "400 11px/1 var(--font-mono)", color: "var(--color-muted-soft)", letterSpacing: "0.04em" }}>
          <span>{"MON"}</span><span>{"TUE"}</span><span>{"WED"}</span><span>{"THU"}</span><span>{"FRI"}</span><span>{"SAT"}</span><span>{"SUN"}</span>
        </div>
      </div>

      <div className="dae-card-flat" style={{ padding: 16 }}>
        <div className="dae-mono" style={{ color: "var(--color-muted)", marginBottom: 10 }}>{"Operational depots"}</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[
          ["Depot · SG",    "Active"],
          ["Depot · MY",    "Active"],
          ["Depot · KH",    "Active"]].
          map((r) =>
          <div key={r[0]} style={{ display: "flex", justifyContent: "space-between", font: "500 12px/1 var(--font-mono)", color: "var(--color-body)" }}>
              <span>{r[0]}</span><span style={{ color: "#047857", fontWeight: 500 }}>{r[1]}</span>
            </div>
          )}
        </div>
      </div>

      {/* Floating live-preview tag */}
      <div style={{
        position: "absolute", top: -14, right: 20,
        display: "inline-flex", alignItems: "center", gap: 8,
        background: "var(--color-surface-dark)", color: "#fff",
        padding: "8px 14px", borderRadius: 999,
        font: "500 11px/1 var(--font-mono)", letterSpacing: "0.06em", textTransform: "uppercase",
        boxShadow: "var(--shadow-md)"
      }}>
        <span className="dae-dot" />{"Live preview"}
      </div>
    </div>);

}

// ============================== LOGOS ===================================
function CHLogos() {
  return (
    <section style={{ padding: "56px 0", background: "var(--color-surface-soft)", borderBottom: "1px solid var(--color-hairline)" }}>
      <div className="dae-wrap">
        <div className="dae-mono" style={{ textAlign: "center", color: "var(--color-muted)", marginBottom: 24, letterSpacing: "0.08em" }}>
          {"Trusted across Southeast Asia's energy retail and commercial-fleet operators"}
        </div>
        <TrustStrip items={["Downstream retail", "Commercial fleets", "Terminal & depot", "Loyalty & c-store", "Compliance & audit"]} />
      </div>
    </section>);

}

// ===================== PATTERN-BREAKING MODULE GRID =====================
// Asymmetric grid: FCC (forecourt) big, POS + CMS stacked. Shows hardware
// + software duality with subtle hardware glyphs.
function CHModules() {
  return (
    <section style={{ padding: "112px 0" }}>
      <div className="dae-wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end", marginBottom: 48 }}>
          <div>
            <span className="dae-eyebrow">{"PLATFORM · CORE MODULES"}</span>
            <h2 className="dae-h2" style={{ marginTop: 16 }}>{"Hardware meets software at every node of the network."}</h2>
          </div>
          <p className="dae-lede" style={{ maxWidth: "50ch" }}>
            {"DAE owns the full stack from the EDC at the pump to the regional reporting layer. Three core modules — forecourt control, point-of-sale, and content management — talk over one event bus."}
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
          <ModuleCardLarge />
          <ModuleCard
            tag="POS"
            title="Point-of-Sale Terminal"
            body="EDC-grade hardware paired with DAE's POS app — barcode, fuel, c-store, loyalty, and mobile payment on one screen."
            kpis={[["98.7%", "Pump-auth uptime"], ["<400ms", "Card-to-receipt"]]}
            icon={Icon.card} />
          
          <ModuleCard
            tag="CMS"
            title="Content Management System"
            body="One console for pump-board pricing, in-store promo assets, and customer-app campaigns — scheduled regionally, audited end-to-end."
            kpis={[["Multi-site", "Atomic pricing"], ["Full audit", "Every change"]]}
            icon={Icon.layers} />
          
        </div>
      </div>
    </section>);

}

function ModuleCardLarge() {
  return (
    <div style={{
      gridRow: "span 2",
      background: "var(--color-surface-dark)", color: "#fff",
      borderRadius: 16, padding: 36,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      position: "relative", overflow: "hidden", minHeight: 480
    }}>
      {/* hardware glyph backdrop */}
      <svg width="320" height="320" viewBox="0 0 320 320"
      style={{ position: "absolute", right: -60, bottom: -40, opacity: 0.06 }}>
        <g fill="none" stroke="#fff" strokeWidth="1.4">
          <rect x="80" y="40" width="160" height="220" rx="6" />
          <rect x="110" y="70" width="100" height="60" rx="3" />
          <rect x="110" y="150" width="100" height="20" rx="2" />
          <rect x="110" y="180" width="100" height="20" rx="2" />
          <circle cx="160" cy="240" r="8" />
          <path d="M40 280 L280 280" />
          <path d="M240 100 L290 100 L290 200 L260 200 L260 240" />
          <circle cx="260" cy="245" r="4" fill="#fff" />
        </g>
      </svg>

      <div style={{ position: "relative" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 12px", borderRadius: 999,
          background: "rgba(163,206,241,0.14)", color: "var(--dae-blue-300)",
          font: "500 11px/1 var(--font-mono)", letterSpacing: "0.08em",
          textTransform: "uppercase", marginBottom: 24 }}>
          {"Forecourt integration"}
        </div>
        <h3 className="dae-h3" style={{ color: "#fff", maxWidth: "16ch", marginBottom: 16 }}>
          {"Hooks into the forecourt stack you already run."}
        </h3>
        <p style={{ font: "400 16px/1.6 var(--font-body)", color: "var(--color-on-dark-soft)", maxWidth: "44ch", marginBottom: 24 }}>
          {"DAE plugs into the major forecourt controllers operators already trust — DFS Fusion, GVR DOM, TechnoTrade PTS2 — and the dispenser brands they already drive. No rip-and-replace, no proprietary hardware lock-in."}
        </p>
        <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
          {["DFS Fusion", "GVR DOM", "TechnoTrade PTS2", "Wayne · Gilbarco · Tatsuno"].map((t) =>
          <span key={t} className="dae-mono" style={{ color: "var(--dae-blue-300)" }}>{"✓ " + t}</span>
          )}
        </div>
      </div>

      <div style={{ position: "relative", display: "flex", gap: 36, paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.10)" }}>
        <div>
          <div style={{ font: "600 36px/1 var(--font-display)", letterSpacing: "-0.025em", color: "#fff", marginBottom: 6 }}>{"3+"}</div>
          <div className="dae-mono" style={{ color: "var(--color-on-dark-soft)" }}>{"Major FCC partners"}</div>
        </div>
        <div>
          <div style={{ font: "600 36px/1 var(--font-display)", letterSpacing: "-0.025em", color: "#fff", marginBottom: 6 }}>{"OPOS"}</div>
          <div className="dae-mono" style={{ color: "var(--color-on-dark-soft)" }}>{"Dispenser compliant"}</div>
        </div>
        <div style={{ marginLeft: "auto", alignSelf: "end" }}>
          <a href="#" className="dae-btn dae-btn-on-dark dae-btn-sm">{"Read the brief"} {Icon.arrow}</a>
        </div>
      </div>
    </div>);

}

function ModuleCard({ tag, title, body, kpis, icon }) {
  return (
    <div className="dae-card" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
          <div className="dae-chip">{tag}</div>
          <div style={{ width: 44, height: 44, borderRadius: 8, background: "var(--dae-blue-050)", color: "var(--dae-blue-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            {icon}
          </div>
        </div>
        <h3 className="dae-h4" style={{ marginBottom: 8 }}>{title}</h3>
        <p style={{ font: "400 14px/1.55 var(--font-body)", color: "var(--color-body)", marginBottom: 20 }}>{body}</p>
      </div>
      <div style={{ display: "flex", gap: 24, paddingTop: 20, borderTop: "1px solid var(--color-hairline-soft)" }}>
        {kpis.map((k) =>
        <div key={k[1]}>
            <div style={{ font: "600 22px/1 var(--font-display)", letterSpacing: "-0.02em", color: "var(--color-ink)", marginBottom: 4 }}>{k[0]}</div>
            <div className="dae-mono" style={{ color: "var(--color-muted)", fontSize: 10 }}>{k[1]}</div>
          </div>
        )}
      </div>
    </div>);

}

// =================== FLEET INTELLIGENCE — BRIDGE CARD ===================
// Bridges daeit.com.sg ↔ fleet.daeit.com.sg.
function CHFleetBridge() {
  return (
    <section style={{ padding: "112px 0", background: "var(--color-surface-soft)" }}>
      <div className="dae-wrap">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span className="dae-eyebrow">{"NEW · Fleet Intelligence"}</span>
            <h2 className="dae-h2" style={{ margin: "16px 0 20px" }}>{"The Transport Management System, redesigned for energy operators."}</h2>
            <p className="dae-lede" style={{ maxWidth: "50ch", marginBottom: 24 }}>
              {"fleet.daeit.com.sg is the new operator portal — purpose-built for the depot manager who already knows where every litre lands but never had software to back it up."}
            </p>
            <ul style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 32 }}>
              {[
              ["Real-time fleet health", "GPS + odometer + fuel sensor on every vehicle"],
              ["KPDN subsidy tracking", "Live reconciliation against Malaysia's commercial-diesel subsidy programme"],
              ["Anomaly detection on fuel events", "Flag draining, ghost fills, and policy violations within minutes"]].
              map(([t, s]) =>
              <li key={t} style={{ display: "flex", gap: 12 }}>
                  <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--dae-blue-100)", color: "var(--dae-blue-700)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 2 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4 10-10" /></svg>
                  </div>
                  <div>
                    <div style={{ font: "500 15px/1.3 var(--font-display)", color: "var(--color-ink)" }}>{t}</div>
                    <div style={{ font: "400 14px/1.5 var(--font-body)", color: "var(--color-body)", marginTop: 2 }}>{s}</div>
                  </div>
                </li>
              )}
            </ul>
            <a href="/fleet" className="dae-btn dae-btn-primary dae-btn-lg">{"Open Fleet Intelligence"} {Icon.arrow}</a>
          </div>

          {/* Mini browser preview of the dashboard */}
          <FleetPreviewCard />
        </div>
      </div>
    </section>);

}

function FleetPreviewCard() {
  return (
    <div style={{
      background: "#fff", borderRadius: 14, border: "1px solid var(--color-hairline)",
      boxShadow: "var(--shadow-lg)", overflow: "hidden"
    }}>
      {/* browser chrome */}
      <div style={{ height: 36, background: "var(--color-surface-soft)", borderBottom: "1px solid var(--color-hairline)",
        display: "flex", alignItems: "center", padding: "0 14px", gap: 8 }}>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#e5e7eb" }} />
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#e5e7eb" }} />
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#e5e7eb" }} />
        <div style={{ marginLeft: 16, height: 20, background: "#fff", border: "1px solid var(--color-hairline)", borderRadius: 4,
          padding: "0 10px", display: "inline-flex", alignItems: "center", gap: 6, font: "500 11px/1 var(--font-mono)", color: "var(--color-muted)" }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 11V8a5 5 0 0 1 10 0v3" /><rect x="5" y="11" width="14" height="10" rx="2" /></svg>
          {"fleet.daeit.com.sg/overview"}
        </div>
      </div>

      {/* preview body — abstracted dashboard */}
      <div style={{ padding: 20, background: "linear-gradient(180deg,#fafbfc,#fff)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
          <div>
            <div className="dae-mono" style={{ color: "var(--color-muted)", marginBottom: 4 }}>{"FLEET OVERVIEW · SAMPLE TENANT"}</div>
            <div style={{ font: "600 18px/1 var(--font-display)", color: "var(--color-ink)" }}>{"Tuesday morning"}</div>
          </div>
          <div className="dae-chip dae-chip-success" style={{ height: 22, fontSize: 11 }}>{"All green"}</div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, marginBottom: 12 }}>
          {[
          { l: "Active",     v: "—",  sub: "of fleet" },
          { l: "Idle now",   v: "—",  sub: "min" },
          { l: "Fuel · 24h", v: "—",  sub: "L" }].
          map((c) =>
          <div key={c.l} style={{ padding: 12, background: "#fff", border: "1px solid var(--color-hairline)", borderRadius: 8 }}>
              <div className="dae-mono" style={{ color: "var(--color-muted)", fontSize: 10, marginBottom: 6 }}>{c.l}</div>
              <div style={{ font: "600 22px/1 var(--font-display)", letterSpacing: "-0.02em", color: "var(--color-ink)" }}>
                {c.v}<small style={{ font: "500 11px/1 var(--font-mono)", color: "var(--color-muted-soft)", marginLeft: 3 }}>{c.sub}</small>
              </div>
            </div>
          )}
        </div>

        {/* fuel discrepancy mini chart */}
        <div style={{ padding: 14, background: "#fff", border: "1px solid var(--color-hairline)", borderRadius: 8, marginBottom: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <div className="dae-mono" style={{ color: "var(--color-muted)", fontSize: 10 }}>{"FUEL VARIANCE · ILLUSTRATIVE"}</div>
            <span className="dae-mono" style={{ color: "var(--dae-blue)" }}>{"0.08% target"}</span>
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 40 }}>
            {[12, 18, 14, 22, 28, 16, 12, 18, 24, 30, 16, 14].map((h, i) =>
            <div key={i} style={{
              flex: 1, height: h * 1.2, background: h > 26 ? "var(--dae-amber)" : "var(--dae-blue)",
              opacity: h > 26 ? 1 : 0.7, borderRadius: 2
            }} />
            )}
          </div>
        </div>

        <div style={{ padding: 14, background: "#fff", border: "1px solid var(--color-hairline)", borderRadius: 8 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
            <div className="dae-mono" style={{ color: "var(--color-muted)", fontSize: 10 }}>{"KPDN SUBSIDY · LIVE"}</div>
            <span className="dae-mono" style={{ color: "#047857" }}>{"Reclaim tracking"}</span>
          </div>
          <div style={{ height: 6, background: "var(--color-surface-soft)", borderRadius: 999, overflow: "hidden", marginBottom: 8 }}>
            <div style={{ width: "72%", height: "100%", background: "linear-gradient(90deg, var(--dae-blue), var(--dae-blue-500))" }} />
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", font: "500 11px/1 var(--font-mono)", color: "var(--color-muted)" }}>
            <span>{"Reclaim · monthly quota"}</span>
            <span>{"Cap tracked"}</span>
          </div>
        </div>
      </div>
    </div>);

}

// =================== NUMBERS BAND =======================================
function CHNumbers() {
  return (
    <section style={{ padding: "80px 0", background: "var(--color-surface-dark)", color: "#fff" }}>
      <div className="dae-wrap" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 32 }}>
        {[
        { v: "APAC",  u: "",          l: "Live across Southeast Asia's energy retail and commercial-fleet operators." },
        { v: "2015",  u: "",          l: "Founded in Singapore. APAC engineering team." },
        { v: "7",     u: " products", l: "POS · BOS · CMS · Loyalty · C-Store · Fleet · BI/AI." },
        { v: "Industry", u: " alumni", l: "Engineers from Shell, Total, Wincor-Nixdorf, and regional energy retailers." }].
        map((n, i) =>
        <div key={i}>
            <div style={{
            font: `600 ${n.v.length > 6 ? "32px" : "56px"}/1 var(--font-display)`,
            letterSpacing: "-0.035em", color: "#fff", marginBottom: 8
          }}>
              {n.v}{n.u && <span style={{ font: "500 16px/1 var(--font-mono)", color: "var(--dae-blue-100)", marginLeft: 6, letterSpacing: 0 }}>{n.u}</span>}
            </div>
            <div style={{ font: "400 14px/1.5 var(--font-body)", color: "var(--color-on-dark-soft)" }}>{n.l}</div>
          </div>
        )}
      </div>
    </section>);

}

// =================== TECHNICAL CONSULTATION SECTION =====================
function CHConsultation() {
  const [region, setRegion] = useStateCH("SG");
  return (
    <section id="consultation" style={{ padding: "120px 0" }}>
      <div className="dae-wrap" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 64 }}>
        <div>
          <span className="dae-eyebrow">{"TECHNICAL CONSULTATION"}</span>
          <h2 className="dae-h2" style={{ margin: "16px 0 20px", maxWidth: "12ch" }}>{"Talk to an engineer, not a sales rep."}</h2>
          <p className="dae-lede" style={{ maxWidth: "42ch", marginBottom: 28 }}>
            {"Every consult is run by a DAE engineer with deployment scars. Bring one site's data export, leave with a deployment shape and a credible timeline."}
          </p>
          <ul style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 24, borderTop: "1px solid var(--color-hairline)" }}>
            {[
            ["30 minutes", "Working session — not a pitch"],
            ["Singapore HQ", "All consultations run from Singapore"],
            ["NDA on request", "We sign yours; you don't have to sign ours"]].
            map(([t, s]) =>
            <li key={t} style={{ display: "flex", gap: 16 }}>
                <div className="dae-mono" style={{ color: "var(--color-muted)", minWidth: 110 }}>{t}</div>
                <div style={{ font: "400 14px/1.5 var(--font-body)", color: "var(--color-body)" }}>{s}</div>
              </li>
            )}
          </ul>
        </div>

        {/* Element Plus-style form */}
        <form className="dae-card" style={{ padding: 36, background: "#fff", boxShadow: "var(--shadow-md)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
            <div style={{ font: "600 20px/1 var(--font-display)", color: "var(--color-ink)" }}>{"Request a consultation"}</div>
            <div className="dae-chip dae-chip-mute" style={{ height: 22, fontSize: 11 }}>{"< 1 business day"}</div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 20 }}>
            <FormField label="Company name" required>
              <input className="ep-input" placeholder="Your company" />
            </FormField>
            <FormField label="Work email" required>
              <input className="ep-input" placeholder="ops@yourcompany.com" />
            </FormField>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 20 }}>
            <FormField label="Fleet size">
              <div className="ep-input" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer" }}>
                <span style={{ color: "var(--color-body)" }}>{"50 – 200 vehicles"}</span>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" style={{ color: "var(--color-muted)" }}><path d="M6 9l6 6 6-6" /></svg>
              </div>
            </FormField>
            <FormField label="Consultation hub">
              <div className="ep-input" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--dae-blue-050)", borderColor: "var(--dae-blue-100)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                  <span className="ep-region-code" style={{ background: "var(--dae-blue)", color: "#fff" }}>{"SG"}</span>
                  <span style={{ font: "500 13px/1 var(--font-body)", color: "var(--color-ink)" }}>{"Singapore"}</span>
                </span>
                <span className="dae-mono" style={{ color: "var(--color-muted)", fontSize: 10 }}>{"HQ"}</span>
              </div>
            </FormField>
          </div>

          <FormField label="What are you trying to solve?">
            <textarea className="ep-input" rows="4" placeholder="e.g. shift-close takes 3 days, fuel variance is climbing, regulator just asked for…" />
          </FormField>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--color-hairline-soft)" }}>
            <label style={{ display: "flex", alignItems: "center", gap: 10, font: "400 13px/1.4 var(--font-body)", color: "var(--color-body)" }}>
              <span style={{
                width: 16, height: 16, borderRadius: 3, border: "1.5px solid var(--dae-blue)", background: "var(--dae-blue)",
                display: "inline-flex", alignItems: "center", justifyContent: "center"
              }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4 10-10" /></svg>
              </span>
              {"I'd like a Fleet Intelligence walk-through too"}
            </label>
            <button type="button" className="dae-btn dae-btn-primary dae-btn-lg">
              {"Request consultation"} {Icon.arrow}
            </button>
          </div>
        </form>
      </div>
    </section>);

}

function FormField({ label, required, children }) {
  return (
    <div>
      <label style={{ display: "block", font: "500 13px/1 var(--font-body)", color: "var(--color-ink)", marginBottom: 8 }}>
        {label}{required ? <span style={{ color: "var(--color-error)", marginLeft: 4 }}>*</span> : null}
      </label>
      {children}
    </div>);

}

// =================== FOOTER =============================================
function CHFooter() {
  return (
    <footer style={{ background: "var(--color-surface-dark-elev)", color: "var(--color-on-dark-soft)", padding: "64px 0 28px" }}>
      <div className="dae-wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4,1fr)", gap: 32, paddingBottom: 40, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
          <div>
            <DaeWordmark tag={null} variant="dark" />
            <p style={{ font: "400 14px/1.6 var(--font-body)", color: "var(--color-on-dark-soft)", maxWidth: "32ch", marginTop: 14 }}>
              {"DAE IT Solutions Pte. Ltd. — Digital Assistant for Energy. Singapore-built software for downstream operators across Southeast Asia."}
            </p>
          </div>
          {[
          { h: "Platform", links: [["Platform overview", "/platform"], ["Solutions", "/solutions"], ["Fleet Intelligence", "/fleet"]] },
          { h: "Industries", links: [["All industries", "/industries"], ["Case studies", "/industries#case-studies"]] },
          { h: "Company", links: [["About", "/about"], ["Contact", "/#consultation"]] },
          { h: "Resources", links: [["Status page", "https://status.daeit.com.sg"], ["Security", "/about#security"]] }].
          map((c) =>
          <div key={c.h}>
              <h6 className="dae-mono" style={{ color: "#fff", marginBottom: 14 }}>{c.h}</h6>
              <ul style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map(([label, href]) => <li key={label}><a href={href} style={{ color: "var(--color-on-dark-soft)", font: "400 14px/1.4 var(--font-body)" }}>{label}</a></li>)}
              </ul>
            </div>
          )}
        </div>
        <div style={{ paddingTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", font: "400 13px/1.4 var(--font-body)", color: "var(--color-muted)" }}>
          <div>{"© 2026 DAE IT Solutions Pte. Ltd. · UEN 201xxxxxxK · Singapore"}</div>
          <div style={{ display: "flex", gap: 24 }}>
            {["Privacy", "Terms", "Cookies", "Security"].map((l) => <a key={l} href="#" style={{ color: "var(--color-muted)" }}>{l}</a>)}
          </div>
        </div>
      </div>
    </footer>);

}

// =================== ENTRY ==============================================
function CorporateHome() {
  return (
    <div className="dae-artboard" style={{ background: "#fff", minHeight: 100 }}>
      <CHNav active="Home" />
      <CHHero />
      <CHLogos />
      <CHModules />
      <CHFleetBridge />
      <CHNumbers />
      <CHConsultation />
      <CHFooter />
    </div>);

}

Object.assign(window, { CorporateHome, CHNav, CHFooter, CHConsultation });