/* global React, CustomerLogos, Sparkline */

/* HEXA-V — Direction A: MID sections (logos + 3 modules + product mock) */

const A_LogoWall = () =>
<div style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "28px 0", overflow: "hidden", position: "relative" }}>
    <div style={{ display: "flex", alignItems: "center", padding: "0 32px", marginBottom: 18 }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--fg-2)" }}>
        // OPERATED BY <span style={{ color: "var(--accent)" }}>1,840+</span> BRANDS · INCLUDING
      </span>
    </div>
    <div style={{ display: "flex", overflow: "hidden", maskImage: "linear-gradient(to right, transparent, black 8%, black 92%, transparent)" }}>
      <div className="marquee-track">
        <CustomerLogos />
        <CustomerLogos />
      </div>
    </div>
  </div>;


const A_Modules = () =>
<div style={{ padding: "120px 32px 96px", position: "relative" }}>
    <div style={{ maxWidth: 720, marginBottom: 64 }}>
      <span className="tag"><span className="dot"></span>03 MODULES · ONE COCKPIT</span>
      <h2 className="display" style={{ fontSize: 64, lineHeight: 1.0, letterSpacing: "-0.03em", margin: "20px 0 18px", fontWeight: 700 }}>
        Three agents.<br />One ruthless<br />P&amp;L.
      </h2>
      <p style={{ fontSize: 17, color: "var(--fg-1)", lineHeight: 1.55, maxWidth: 560 }}>
        Each module ships as an autonomous agent. They share one ledger, one set of guardrails, and one Slack channel — so the bids your PPC agent makes already know the unit margin your Profit agent just recomputed.
      </p>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, border: "1px solid var(--line)" }} className="hexa-modules-grid snap-in">
      <A_Module
      code="01"
      name="PPC AGENT"
      title="Bids by the hour. Not by the quarter."
      copy="Hour-of-day bidding, search-term harvesting, branded-vs-unbranded splits, and dayparting that respects your stock cover. Set a target ACoS and the agent argues with itself until it gets there."
      bullets={["Bid + budget control loop", "Negative keyword harvester", "Branded defense bidding", "Listing-target hijack alerts"]}
      meta="Connects with Marketplace Ads · 2026.04" />
    
      <A_Module
      code="02"
      name="PROFIT OS"
      title="Margin, per SKU, per day, after everything."
      copy="Fees, fulfillment storage, returns, refunds, ad spend, COGS, freight, FX. Profit OS reconciles the 14 places the marketplace hides money and tells you what every unit actually netted."
      bullets={["Landed cost + FX ingestion", "Fulfillment fee diff alerts", "Refund + return reconciliation", "Cohort & LTV by SKU"]}
      meta="Syncs with Seller Console + your QBO/Xero"
      featured />
    
      <A_Module
      code="03"
      name="SALES INTEL"
      title="The Featured Offer you didn’t know you lost."
      copy="Hijackers, Featured Offer drops, suppression flags, A+ degradation, and inventory ‘restricted’ events — caught the minute they happen, with a one-click playbook to fight back."
      bullets={["Offer-loss alerts (<60s)", "Listing suppression watcher", "Competitor price tracker", "Review velocity radar"]}
      meta="Polls 18× / hour · per SKU" />
    
    </div>
  </div>;


const A_Module = ({ code, name, title, copy, bullets, meta, featured }) =>
<div style={{
  padding: "36px 32px 32px",
  borderRight: "1px solid var(--line)",
  background: featured ? "var(--bg-1)" : "transparent",
  position: "relative",
  minHeight: 540
}}>
    {featured && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: "var(--accent)", backgroundColor: "#2563eb" }} />}
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <span className="mono" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.14em" }}>MODULE / {code}</span>
      <span className="mono" style={{ ...{ fontSize: 11, color: featured ? "var(--accent)" : "var(--fg-2)", letterSpacing: "0.18em" }, color: "#2563eb" }}>{name}</span>
    </div>
    <h3 className="display" style={{ fontSize: 30, lineHeight: 1.05, letterSpacing: "-0.02em", marginTop: 28, fontWeight: 600 }}>{title}</h3>
    <p style={{ fontSize: 15, color: "var(--fg-1)", lineHeight: 1.55, marginTop: 18 }}>{copy}</p>
    <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
      {bullets.map((b, i) =>
    <li key={i} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--fg-1)" }}>
          <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)" }}>▸</span>{b}
        </li>
    )}
    </ul>
    <div className="divider" style={{ margin: "28px 0 14px" }} />
    <div className="mono" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.1em" }}>{meta}</div>
  </div>;


window.A_LogoWall = A_LogoWall;
window.A_Modules = A_Modules;