/* eslint-disable */
// Fleet Intelligence — marketing landing for fleet.daeit.com.sg
// Public-facing. No real-customer data, no live dashboards exposed.
// Aesthetic: hardware-meets-software, slightly bolder than the corporate home.

// ------------------- HERO --------------------------------------------
function FMHero() {
  return (
    <section style={{
      position: "relative", padding: "112px 0 96px",
      background: "linear-gradient(180deg, var(--color-surface-dark) 0%, #11243e 100%)",
      color: "#fff", overflow: "hidden",
    }}>
      {/* grid backdrop */}
      <svg width="100%" height="100%" viewBox="0 0 1200 720" preserveAspectRatio="xMidYMid slice"
        style={{position:"absolute", inset: 0, opacity: 0.08, pointerEvents:"none"}}>
        <defs>
          <pattern id="fm-grid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M48 0H0V48" fill="none" stroke="#A3CEF1" strokeWidth="0.7"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#fm-grid)"/>
      </svg>
      {/* glow */}
      <div style={{
        position:"absolute", right: -200, top: -100, width: 700, height: 700, borderRadius:"50%",
        background:"radial-gradient(closest-side, rgba(163,206,241,0.18), transparent 70%)", pointerEvents:"none",
      }}/>

      <div className="dae-wrap" style={{position:"relative", display:"grid", gridTemplateColumns:"1.1fr 0.9fr", gap: 64, alignItems:"center"}}>
        <div>
          <div style={{display:"inline-flex", alignItems:"center", gap: 10, padding:"6px 12px",
            background:"rgba(163,206,241,0.14)", color:"var(--dae-blue-300)",
            borderRadius: 999, font:"500 12px/1 var(--font-mono)", letterSpacing:"0.06em", marginBottom: 28}}>
            <span className="dae-dot"/> {"fleet.daeit.com.sg · NOW LIVE"}
          </div>
          <h1 className="dae-h1" style={{color:"#fff", marginBottom: 24, maxWidth: "18ch"}}>
            {"The Transport Management System for "}
            <span style={{color:"var(--dae-blue-300)"}}>{"energy-grade"}</span>{" fleets."}
          </h1>
          <p style={{font:"400 18px/1.65 var(--font-body)", color:"var(--color-on-dark-soft)", maxWidth:"54ch", marginBottom: 32}}>
            {"Fleet Intelligence is DAE's depot-to-driver platform — built on the same forecourt-grade ledger that powers a thousand fuel sites across Asia. GPS, fuel sensors, EDC payments, and government subsidy reclaim, on one stack."}
          </p>
          <div style={{display:"flex", gap: 12, marginBottom: 48}}>
            <a href="#" className="dae-btn dae-btn-on-dark dae-btn-lg">{"Request a walk-through"}</a>
            <a href="#" className="dae-btn dae-btn-on-dark-outline dae-btn-lg">{"Download brief"} {Icon.arrow}</a>
          </div>
          <div style={{display:"flex", gap: 40, paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.10)"}}>
            {[
              {v: "SEA",    l: "Southeast Asia operators"},
              {v: "<5 min", l: "From event to alert"},
              {v: "KPDN",   l: "MY diesel subsidy · ready"},
            ].map(s => (
              <div key={s.l}>
                <div style={{font:"600 26px/1 var(--font-display)", letterSpacing:"-0.025em", color:"#fff", marginBottom: 4}}>{s.v}</div>
                <div className="dae-mono" style={{color:"var(--dae-blue-300)"}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Hero visual — abstracted dispatcher illustration */}
        <FMHeroVisual/>
      </div>
    </section>
  );
}

function FMHeroVisual() {
  return (
    <div style={{position:"relative", height: 520}}>
      {/* central hub */}
      <div style={{
        position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-50%)",
        width: 200, height: 200, borderRadius:"50%",
        background:"linear-gradient(160deg, var(--dae-blue-500), var(--dae-blue))",
        boxShadow:"0 20px 60px rgba(39,76,119,0.55), inset 0 1px 0 rgba(255,255,255,0.18)",
        display:"flex", alignItems:"center", justifyContent:"center", flexDirection:"column",
        border:"1px solid rgba(163,206,241,0.30)",
      }}>
        <div className="dae-mono" style={{color:"var(--dae-blue-300)", marginBottom: 8, letterSpacing:"0.08em"}}>{"DAE FLEET"}</div>
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="7" width="13" height="9" rx="1"/>
          <path d="M15 10h4l3 3v3h-7"/>
          <circle cx="6.5" cy="17.5" r="1.7"/>
          <circle cx="17.5" cy="17.5" r="1.7"/>
        </svg>
        <div style={{font:"500 13px/1 var(--font-body)", color:"#fff", marginTop: 10}}>{"Event bus"}</div>
      </div>

      {/* orbiting capability nodes */}
      {[
        {label: "GPS",          sub: "Position + speed",       x: "5%",  y: "8%"},
        {label: "Fuel sensor",  sub: "Tank-level telemetry",   x: "85%", y: "12%"},
        {label: "Driver app",   sub: "Daily trips + violations", x: "0%", y: "55%"},
        {label: "Fuel card",    sub: "EDC + station network",  x: "82%", y: "62%"},
        {label: "Subsidy ledger", sub: "KPDN · MY",   x: "30%", y: "85%"},
        {label: "Dispatch API", sub: "REST + webhooks",        x: "65%", y: "88%"},
      ].map(n => (
        <div key={n.label} style={{
          position:"absolute", left: n.x, top: n.y,
          background:"rgba(255,255,255,0.06)", border:"1px solid rgba(163,206,241,0.22)",
          backdropFilter:"blur(10px)", padding:"12px 16px", borderRadius: 10,
          minWidth: 150, boxShadow:"0 6px 24px rgba(0,0,0,0.25)",
        }}>
          <div style={{font:"500 13px/1 var(--font-display)", color:"#fff", marginBottom: 6}}>{n.label}</div>
          <div className="dae-mono" style={{color:"var(--dae-blue-300)", fontSize: 10}}>{n.sub}</div>
        </div>
      ))}

      {/* connecting lines */}
      <svg width="100%" height="100%" viewBox="0 0 500 520" preserveAspectRatio="none"
        style={{position:"absolute", inset: 0, pointerEvents:"none"}}>
        <g stroke="rgba(163,206,241,0.30)" strokeWidth="1" strokeDasharray="3 4" fill="none">
          <path d="M 80 60 Q 200 130 250 240"/>
          <path d="M 430 80 Q 350 140 280 240"/>
          <path d="M 50 320 Q 130 290 230 270"/>
          <path d="M 420 340 Q 350 290 280 270"/>
          <path d="M 180 460 Q 220 380 250 290"/>
          <path d="M 360 470 Q 320 380 280 290"/>
        </g>
      </svg>
    </div>
  );
}

// ------------------- WHO IT'S FOR -----------------------------------
function FMWho() {
  const profiles = [
    {
      tag: "DEPOT MANAGER",
      title: "End the shift-close spreadsheet.",
      body: "Reconcile every vehicle's fuel, kilometers, and route in under five minutes. No more 11pm pivot tables.",
      icon: Icon.chart,
    },
    {
      tag: "FINANCE LEAD",
      title: "Reclaim every ringgit of the KPDN scheme.",
      body: "Automatic eligibility checks against Malaysia's KPDN diesel-subsidy programme. Submission-ready packets every month.",
      icon: Icon.card,
    },
    {
      tag: "OPERATIONS DIRECTOR",
      title: "Catch anomalies before the auditor does.",
      body: "Fleet-wide variance band with per-vehicle drill-down. Configurable thresholds; clear escalation paths.",
      icon: Icon.shield,
    },
  ];
  return (
    <section style={{padding: "112px 0", background:"#fff"}}>
      <div className="dae-wrap">
        <div style={{textAlign:"center", marginBottom: 56}}>
          <div className="dae-eyebrow" style={{justifyContent:"center"}}>{"BUILT FOR THREE PEOPLE"}</div>
          <h2 className="dae-h2" style={{marginTop: 16, maxWidth: "20ch", marginLeft:"auto", marginRight:"auto"}}>
            {"Different jobs, same depot. One platform."}
          </h2>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap: 24}}>
          {profiles.map(p => (
            <div key={p.tag} className="dae-card" style={{padding: 32, display:"flex", flexDirection:"column"}}>
              <div style={{width: 48, height: 48, borderRadius: 10, background:"var(--dae-blue-050)", color:"var(--dae-blue-700)",
                display:"inline-flex", alignItems:"center", justifyContent:"center", marginBottom: 24}}>
                {p.icon}
              </div>
              <div className="dae-mono" style={{color:"var(--color-muted)", fontSize: 11, marginBottom: 10}}>{p.tag}</div>
              <h3 className="dae-h4" style={{marginBottom: 12}}>{p.title}</h3>
              <p style={{font:"400 15px/1.6 var(--font-body)", color:"var(--color-body)"}}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------------------- CAPABILITIES (no real data shown) --------------
function FMCapabilities() {
  // Three rows alternating image/copy. Visuals are abstract diagrams, not real dashboards.
  return (
    <section style={{padding: "120px 0", background:"var(--color-surface-soft)"}}>
      <div className="dae-wrap">
        <div style={{maxWidth: 720, marginBottom: 56}}>
          <span className="dae-eyebrow">{"CAPABILITIES"}</span>
          <h2 className="dae-h2" style={{margin:"16px 0 16px"}}>{"The whole depot, instrumented."}</h2>
          <p className="dae-lede" style={{maxWidth:"60ch"}}>
            {"Three capability layers, each with its own console — and all sharing the same event bus, audit trail, and customer-tenant boundary."}
          </p>
        </div>

        <CapabilityRow
          tag="01 · FLEET HEALTH"
          title="Every vehicle, on one map."
          body="Live GPS, ignition state, fuel level, and driver assignment for every asset. Geofences for depots, customer sites, and restricted zones — each with its own dwell-time policy."
          features={["GPS + odometer fusion", "Geofence dwell rules", "Driver-vehicle assignments", "Multi-depot rollup"]}
          accent="blue"
          visual={<CapabilityViz kind="map"/>}
          imageRight={true}
        />
        <CapabilityRow
          tag="02 · ANOMALY DETECTION"
          title="Variance you can act on, not just see."
          body="DAE compares expected fuel consumption against reported fills and flags deviations the same shift — not three days later. Every flag carries a vehicle, a window, and a one-tap path to the underlying transactions."
          features={["Per-vehicle baselines", "Drain-event continuity", "Policy violation rules", "Fleet-median bands"]}
          accent="amber"
          visual={<CapabilityViz kind="anomaly"/>}
          imageRight={false}
        />
        <CapabilityRow
          tag="03 · SUBSIDY · MY"
          title="KPDN diesel subsidy, automated."
          body="Malaysia-market specific. DAE checks every eligible fill against the KPDN diesel-subsidy programme, packages submissions in the format the regulator wants, and reconciles refunds back to your wallet."
          features={["Eligibility per fill", "KPDN-format submissions", "Per-quota dashboards", "Refund reconciliation"]}
          accent="emerald"
          visual={<CapabilityViz kind="subsidy"/>}
          imageRight={true}
        />
      </div>
    </section>
  );
}

function CapabilityRow({tag, title, body, features, visual, imageRight, accent}) {
  return (
    <div style={{display:"grid", gridTemplateColumns: imageRight ? "1fr 1fr" : "1fr 1fr",
      gap: 64, alignItems:"center", marginBottom: 96, direction: imageRight ? "ltr" : "rtl"}}>
      <div style={{direction:"ltr"}}>
        <div className="dae-mono" style={{color:"var(--dae-blue)", marginBottom: 16, letterSpacing:"0.08em"}}>{tag}</div>
        <h3 style={{font:"600 36px/1.15 var(--font-display)", letterSpacing:"-0.025em", color:"var(--color-ink)", marginBottom: 16, maxWidth:"18ch"}}>{title}</h3>
        <p style={{font:"400 16px/1.65 var(--font-body)", color:"var(--color-body)", maxWidth:"50ch", marginBottom: 24}}>{body}</p>
        <ul style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: "12px 24px", marginBottom: 24}}>
          {features.map(f => (
            <li key={f} style={{display:"flex", gap: 10, alignItems:"center", font:"400 14px/1.4 var(--font-body)", color:"var(--color-body)"}}>
              <span style={{width: 6, height: 6, borderRadius: 1, background: accent === "amber" ? "var(--dae-amber)" : accent === "emerald" ? "var(--color-success)" : "var(--dae-blue)"}}/>
              {f}
            </li>
          ))}
        </ul>
        <a href="#" style={{font:"500 14px/1 var(--font-body)", color:"var(--dae-blue)", display:"inline-flex", alignItems:"center", gap: 8}}>{"Read the capability brief"} {Icon.arrow}</a>
      </div>
      <div style={{direction:"ltr"}}>{visual}</div>
    </div>
  );
}

// Abstract capability visuals — no real data shown.
function CapabilityViz({kind}) {
  if (kind === "map") {
    return (
      <div style={{background:"#fff", border:"1px solid var(--color-hairline)", borderRadius: 14,
        padding: 28, boxShadow:"var(--shadow-md)", aspectRatio:"4 / 3", position:"relative", overflow:"hidden"}}>
        <div className="dae-mono" style={{color:"var(--color-muted)", marginBottom: 20, fontSize: 11}}>{"FLEET MAP · SCHEMATIC"}</div>
        <svg viewBox="0 0 400 280" width="100%" height="auto" style={{display:"block"}}>
          {/* simplified roads */}
          <g stroke="var(--color-hairline)" strokeWidth="1.2" fill="none">
            <path d="M 20 120 Q 100 100 180 130 T 380 110"/>
            <path d="M 60 30 Q 90 100 160 180 T 320 260"/>
            <path d="M 240 20 Q 250 100 270 180 T 280 260"/>
          </g>
          {/* depot */}
          <g transform="translate(160 130)">
            <rect x="-22" y="-22" width="44" height="44" rx="6" fill="var(--dae-blue)"/>
            <text x="0" y="5" fontFamily="JetBrains Mono" fontSize="9" fill="#fff" textAnchor="middle" letterSpacing="0.06em">DEPOT</text>
            <circle r="60" fill="none" stroke="var(--dae-blue-300)" strokeWidth="1" strokeDasharray="3 3" opacity="0.6"/>
          </g>
          {/* vehicles */}
          {[
            [90, 60],[300, 80],[60, 200],[330, 200],[200, 240],[280, 150],
          ].map(([cx, cy], i) => (
            <g key={i} transform={`translate(${cx} ${cy})`}>
              <circle r="9" fill="#fff" stroke="var(--dae-blue)" strokeWidth="2"/>
              <circle r="3" fill="var(--dae-blue)"/>
            </g>
          ))}
          {/* geofence */}
          <ellipse cx="300" cy="80" rx="40" ry="28" fill="var(--dae-blue-300)" opacity="0.18" stroke="var(--dae-blue-500)" strokeWidth="1" strokeDasharray="4 3"/>
        </svg>
        <div style={{display:"flex", justifyContent:"space-between", marginTop: 16, gap: 16}}>
          <span className="dae-mono" style={{color:"var(--color-muted)", fontSize: 10}}>{"GEOFENCE · CUSTOMER SITE"}</span>
          <span className="dae-mono" style={{color:"var(--dae-blue)", fontSize: 10}}>{"LIVE"}</span>
        </div>
      </div>
    );
  }
  if (kind === "anomaly") {
    return (
      <div style={{background:"#fff", border:"1px solid var(--color-hairline)", borderRadius: 14,
        padding: 28, boxShadow:"var(--shadow-md)", aspectRatio:"4 / 3"}}>
        <div className="dae-mono" style={{color:"var(--color-muted)", marginBottom: 16, fontSize: 11}}>{"VARIANCE BAND · ILLUSTRATIVE"}</div>
        <svg viewBox="0 0 400 220" width="100%" height="auto" style={{display:"block"}}>
          {/* baseline band */}
          <path d="M 0 110 L 60 100 L 120 105 L 180 95 L 240 100 L 300 105 L 400 100 L 400 140 L 300 145 L 240 140 L 180 145 L 120 145 L 60 140 L 0 150 Z"
            fill="var(--dae-blue-300)" opacity="0.20"/>
          {/* baseline line */}
          <path d="M 0 130 L 60 120 L 120 125 L 180 115 L 240 120 L 300 125 L 400 120"
            fill="none" stroke="var(--dae-blue)" strokeWidth="2"/>
          {/* anomaly spike */}
          <path d="M 240 120 L 270 60" stroke="var(--dae-amber)" strokeWidth="2" strokeDasharray="4 3"/>
          <circle cx="270" cy="60" r="6" fill="var(--dae-amber)" stroke="#fff" strokeWidth="2"/>
          {/* threshold */}
          <line x1="0" y1="80" x2="400" y2="80" stroke="var(--dae-amber)" strokeWidth="1" strokeDasharray="3 3"/>
          <text x="395" y="74" fontFamily="JetBrains Mono" fontSize="9" fill="var(--dae-amber)" textAnchor="end">THRESHOLD</text>
        </svg>
        <div style={{display:"flex", gap: 18, marginTop: 16}}>
          <span style={{display:"flex", alignItems:"center", gap: 6, font:"500 10px/1 var(--font-mono)", color:"var(--color-muted)"}}>
            <span style={{width: 10, height: 10, borderRadius: 2, background:"var(--dae-blue)"}}/>{"FLEET MEDIAN"}
          </span>
          <span style={{display:"flex", alignItems:"center", gap: 6, font:"500 10px/1 var(--font-mono)", color:"var(--color-muted)"}}>
            <span style={{width: 10, height: 10, borderRadius: 2, background:"var(--dae-amber)"}}/>{"FLAGGED EVENT"}
          </span>
        </div>
      </div>
    );
  }
  // subsidy
  return (
    <div style={{background:"#fff", border:"1px solid var(--color-hairline)", borderRadius: 14,
      padding: 28, boxShadow:"var(--shadow-md)", aspectRatio:"4 / 3"}}>
      <div className="dae-mono" style={{color:"var(--color-muted)", marginBottom: 20, fontSize: 11}}>{"SUBSIDY FLOW · CONCEPT"}</div>
      <div style={{display:"flex", flexDirection:"column", gap: 14}}>
        {[
          {l: "Eligible fill detected",  who: "Fleet sensor",        tone: "blue"},
          {l: "RD format packet built",  who: "DAE submission",      tone: "blue"},
          {l: "Verified by KPDN / regulator",      who: "Government endpoint", tone: "muted"},
          {l: "Reclaim posted to wallet",who: "DAE wallet",          tone: "emerald"},
        ].map((s, i) => (
          <div key={s.l} style={{display:"flex", alignItems:"center", gap: 14}}>
            <div style={{
              flexShrink: 0, width: 28, height: 28, borderRadius:"50%",
              background: s.tone === "emerald" ? "#ecfdf5" : s.tone === "muted" ? "var(--color-surface-soft)" : "var(--dae-blue-050)",
              color: s.tone === "emerald" ? "#047857" : s.tone === "muted" ? "var(--color-muted)" : "var(--dae-blue-700)",
              display:"inline-flex", alignItems:"center", justifyContent:"center",
              font:"600 11px/1 var(--font-mono)",
            }}>{i + 1}</div>
            <div style={{flex: 1}}>
              <div style={{font:"500 14px/1.3 var(--font-body)", color:"var(--color-ink)"}}>{s.l}</div>
              <div className="dae-mono" style={{color:"var(--color-muted)", fontSize: 10, marginTop: 2}}>{s.who}</div>
            </div>
            {i < 3 && <div style={{flexShrink: 0, color:"var(--color-muted-soft)"}}>↓</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------- INTEGRATIONS / TECH STRIP -----------------------
function FMIntegrations() {
  const groups = [
    {h: "FORECOURT CONTROLLERS", items: ["DFS Fusion", "GVR DOM", "TechnoTrade PTS2"]},
    {h: "DISPENSERS", items: ["Gilbarco", "Tatsuno", "Wayne", "Tokheim", "Censtar", "Sanki", "BlueSky", "HongYang", "Mepsan"]},
    {h: "PROTOCOLS", items: ["IFSF", "Modbus TCP", "ISO 8583", "MQTT", "REST + Webhooks", "OCPP 1.6 + 2.0.1"]},
  ];
  return (
    <section style={{padding: "96px 0", background:"#fff", borderTop:"1px solid var(--color-hairline)", borderBottom:"1px solid var(--color-hairline)"}}>
      <div className="dae-wrap">
        <div style={{display:"grid", gridTemplateColumns:"0.6fr 1.4fr", gap: 64, alignItems:"start"}}>
          <div>
            <span className="dae-eyebrow">{"INTEGRATIONS"}</span>
            <h2 className="dae-h2" style={{marginTop: 16}}>{"Pre-certified, pre-integrated, pre-deployed."}</h2>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap: 32}}>
            {groups.map(g => (
              <div key={g.h}>
                <div className="dae-mono" style={{color:"var(--color-muted)", marginBottom: 14, fontSize: 11}}>{g.h}</div>
                <ul style={{display:"flex", flexDirection:"column", gap: 8}}>
                  {g.items.map(i => <li key={i} style={{font:"400 14px/1.4 var(--font-body)", color:"var(--color-body)"}}>{i}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------- TESTIMONIAL -------------------------------------
function FMTestimonial() {
  return (
    <section style={{padding: "112px 0", background:"var(--color-surface-soft)"}}>
      <div className="dae-wrap" style={{maxWidth: 980}}>
        <div className="dae-mono" style={{color:"var(--dae-blue)", marginBottom: 24, letterSpacing:"0.08em"}}>{"OPERATOR PERSPECTIVE"}</div>
        <p style={{font:"500 32px/1.35 var(--font-display)", letterSpacing:"-0.015em", color:"var(--color-ink)", marginBottom: 32, maxWidth:"30ch"}}>
          {"\u201CDAE replaced four spreadsheets, two WhatsApp groups, and a brittle subsidy script. Shift close is no longer the longest part of the day.\u201D"}
        </p>
        <div style={{display:"flex", alignItems:"center", gap: 16}}>
          <div style={{width: 48, height: 48, borderRadius:"50%", background:"var(--dae-blue)", color:"#fff",
            display:"inline-flex", alignItems:"center", justifyContent:"center", font:"600 16px/1 var(--font-display)"}}>{"DM"}</div>
          <div>
            <div style={{font:"500 15px/1 var(--font-display)", color:"var(--color-ink)"}}>{"Depot manager (anonymised)"}</div>
            <div className="dae-mono" style={{color:"var(--color-muted)", marginTop: 4}}>{"COMMERCIAL FLEET · SOUTHEAST ASIA"}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------- CTA BAND ----------------------------------------
function FMCta() {
  return (
    <section style={{padding: "120px 0", background:"var(--color-surface-dark)", color:"#fff"}}>
      <div className="dae-wrap" style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap: 32}}>
        <div>
          <h2 style={{font:"600 44px/1.1 var(--font-display)", letterSpacing:"-0.025em", color:"#fff", maxWidth:"22ch"}}>
            {"Bring one week of fleet data. Leave with a deployment shape."}
          </h2>
          <p style={{font:"400 16px/1.6 var(--font-body)", color:"var(--color-on-dark-soft)", marginTop: 16, maxWidth:"50ch"}}>
            {"Working session with a DAE engineer — not a sales pitch. From Singapore HQ; remote or in person."}
          </p>
        </div>
        <div style={{display:"flex", gap: 12, flexShrink: 0}}>
          <a href="#" className="dae-btn dae-btn-on-dark dae-btn-lg">{"Request a walk-through"}</a>
          <a href="#" className="dae-btn dae-btn-on-dark-outline dae-btn-lg">{"Download brief"}</a>
        </div>
      </div>
    </section>
  );
}

// ------------------- ASSEMBLE ----------------------------------------
function FleetMarketing() {
  return (
    <div className="dae-artboard" style={{background:"#fff"}}>
      <CHNav active="Fleet Intelligence"/>
      <FMHero/>
      <FMWho/>
      <FMCapabilities/>
      <FMIntegrations/>
      <FMTestimonial/>
      <FMCta/>
      <CHFooter/>
    </div>
  );
}

Object.assign(window, { FleetMarketing });
