/* global React, Sparkline, useTicker, fmt, usd, Integrations, PricingGrid, Wordmark */

/* HEXA-V — Direction A: BOTTOM (product mock, integrations, pricing, footer) */

const A_ProductMock = () => {
  const skus = [
  { code: "PYRA-019", name: "Vacuum Insulated Tumbler 40oz / Midnight", rev: 18420, units: 612, acos: 8.2, margin: 34.1, trend: "up", spark: [40, 42, 41, 44, 46, 48, 49, 52, 55, 58, 60] },
  { code: "NRD-2204", name: "Hydrocolloid Acne Patch Kit / 72 Count", rev: 12104, units: 944, acos: 14.3, margin: 22.4, trend: "up", spark: [30, 28, 30, 33, 34, 36, 38, 39, 41, 44, 47] },
  { code: "OAK-441", name: "Collapsible Meal Prep Container Set / 10pc", rev: 9821, units: 421, acos: 9.6, margin: 41.0, trend: "flat", spark: [50, 52, 51, 50, 49, 52, 51, 53, 52, 51, 50] },
  { code: "RNN-088", name: "Resistance Band Set / 5 Level / Fabric", rev: 7240, units: 188, acos: 22.1, margin: -2.4, trend: "down", spark: [55, 54, 52, 49, 46, 42, 40, 38, 34, 30, 28] },
  { code: "VEX-002", name: "LED Under-Cabinet Light Strip / Rechargeable", rev: 6650, units: 102, acos: 11.4, margin: 38.8, trend: "up", spark: [22, 24, 26, 27, 29, 30, 32, 33, 36, 38, 41] }];


  const totalRev = useTicker(54235, 0.003, 1200);

  return (
    <div style={{ padding: "80px 32px 120px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", position: "relative", background: "var(--bg)" }}>
      <div className="dotgrid-bg" style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} />

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "400px 1fr", gap: 56, alignItems: "start" }} className="hexa-product-grid">
        <div style={{ position: "sticky", top: 20 }} className="hexa-product-sticky">
          <span className="tag"><span className="dot"></span>LIVE PRODUCT · NOT A SCREENSHOT</span>
          <h2 className="display" style={{ fontSize: 52, lineHeight: 1.0, letterSpacing: "-0.03em", margin: "20px 0 18px", fontWeight: 700 }}>
            Every<br />SKU.<br /><span style={{ color: "#2563eb" }}>Every minute.</span>
          </h2>
          <p style={{ fontSize: 15, color: "var(--fg-1)", lineHeight: 1.55 }}>
            One unified table. Sortable by anything that touches the P&amp;L. Click a row and the entire console rebuilds around that SKU: ads, reviews, supply, returns, hijackers, the lot.
          </p>
          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
            <A_Feature label="REFRESH" value="every 47 seconds" />
            <A_Feature label="SKUS / TENANT" value="up to 240,000" />
            <A_Feature label="WAREHOUSES" value="Fulfilled · 3PL · own DC" />
            <A_Feature label="REGIONS" value="USA · EUROPE · ASIA" />
          </div>
        </div>

        <div className="win" style={{ height: 620, border: "1px solid var(--line-2)" }}>
          {/* window chrome */}
          <div className="win-bar">
            <span className="d"></span><span className="d"></span><span className="d"></span>
            <span style={{ marginLeft: 12, color: "var(--fg-1)" }}>hexa-v.app / portfolio</span>
            <span style={{ marginLeft: "auto", display: "flex", gap: 14 }}>
              <span>⌘K to command</span>
              <span style={{ color: "#2563eb" }}>●&nbsp;&nbsp;synced 0:47s ago</span>
            </span>
          </div>

          {/* body */}
          <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", height: "100%" }}>
            {/* side rail */}
            <div style={{ borderRight: "1px solid var(--line)", padding: "16px 0", display: "flex", flexDirection: "column", gap: 4 }}>
              {[
              { i: "◇", n: "Command", count: null },
              { i: "▤", n: "Portfolio", count: "240k", active: true },
              { i: "◐", n: "PPC Agent", count: "47" },
              { i: "$", n: "Profit OS", count: null },
              { i: "▲", n: "Forecast", count: null },
              { i: "◉", n: "Sales Intel", count: "3" },
              { i: "⌬", n: "Inventory", count: "12" },
              { i: "◎", n: "Reviews", count: null },
              { i: "⋮", n: "Settings", count: null }].
              map((it, i) =>
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 10, padding: "9px 16px",
                fontSize: 13, color: it.active ? "var(--fg)" : "var(--fg-1)",
                background: it.active ? "var(--bg-2)" : "transparent",
                borderLeft: it.active ? "2px solid var(--accent)" : "2px solid transparent"
              }}>
                  <span style={{ ...{ width: 14, color: it.active ? "var(--accent)" : "var(--fg-2)" }, color: "#2563eb" }}>{it.i}</span>
                  <span style={{ flex: 1 }}>{it.n}</span>
                  {it.count && <span className="mono" style={{ fontSize: 10, color: "var(--fg-3)" }}>{it.count}</span>}
                </div>
              )}
              <div className="divider" style={{ margin: "12px 16px" }} />
              <div style={{ padding: "0 16px" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.14em" }}>TENANT</div>
                <div style={{ fontSize: 13, marginTop: 4 }}>Pyra Outdoor Co.</div>
                <div className="mono" style={{ fontSize: 10, color: "var(--fg-2)" }}>21 brands · 4 marketplaces</div>
              </div>
            </div>

            {/* main pane */}
            <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                  <h4 className="display" style={{ fontSize: 22, fontWeight: 600, margin: 0 }}>Portfolio</h4>
                  <span className="mono" style={{ fontSize: 11, color: "var(--fg-2)" }}>// 2,184 SKUs · sorted by margin Δ</span>
                </div>
                <div style={{ display: "flex", gap: 8 }}>
                  <span className="tag">24H</span>
                  <span className="tag" style={{ color: "#2563eb", borderColor: "#2563eb" }}>7D</span>
                  <span className="tag">30D</span>
                  <span className="tag">QTD</span>
                </div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 10 }}>
                <A_MiniTile label="REVENUE / 7D" value={"$" + fmt(Math.round(totalRev * 7.1))} delta="+11.3%" />
                <A_MiniTile label="UNIT MARGIN" value="34.1%" delta="+1.4pp" />
                <A_MiniTile label="AD SPEND" value={usd(8413)} delta="−9.2%" />
                <A_MiniTile label="STOCK COVER" value="38 d" delta="2 SKUs ↓" warn />
              </div>

              {/* table */}
              <div style={{ border: "1px solid var(--line)", overflow: "hidden" }}>
                <div className="mono" style={{
                  display: "grid", gridTemplateColumns: "100px 1.6fr 80px 70px 70px 80px 90px",
                  fontSize: 10, letterSpacing: "0.14em", color: "var(--fg-2)",
                  padding: "10px 14px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)"
                }}>
                  <span>SKU</span><span>NAME</span><span>REV / 7D</span><span>UNITS</span><span>ACoS</span><span>MARGIN</span><span>TREND</span>
                </div>
                {skus.map((s, i) => {
                  const negative = s.margin < 0;
                  const trendColor = s.trend === "up" ? "var(--good)" : s.trend === "down" ? "var(--bad)" : "var(--fg-2)";
                  return (
                    <div key={i} style={{
                      display: "grid", gridTemplateColumns: "100px 1.6fr 80px 70px 70px 80px 90px",
                      alignItems: "center", padding: "12px 14px", fontSize: 12,
                      borderBottom: i < skus.length - 1 ? "1px solid var(--line)" : "none",
                      background: i === 0 ? "rgba(255,69,0,0.05)" : negative ? "rgba(255,90,90,0.06)" : "transparent"
                    }}>
                      <span className="mono" style={{ color: "var(--fg)" }}>{s.code}</span>
                      <span style={{ color: "var(--fg-1)" }}>{s.name}</span>
                      <span className="mono">${fmt(s.rev)}</span>
                      <span className="mono">{fmt(s.units)}</span>
                      <span className="mono" style={{ color: s.acos > 18 ? "var(--bad)" : "var(--fg-1)" }}>{s.acos}%</span>
                      <span className="mono" style={{ color: negative ? "var(--bad)" : "var(--good)" }}>{s.margin > 0 ? "+" : ""}{s.margin}%</span>
                      <span style={{ display: "flex", justifyContent: "flex-end" }}>
                        <Sparkline values={s.spark} w={80} h={20} color={trendColor} />
                      </span>
                    </div>);

                })}
              </div>

              {/* footer command bar */}
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                border: "1px solid var(--line)", padding: "10px 14px", background: "var(--bg-2)"
              }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--fg-2)" }}>
                  <span style={{ color: "#2563eb" }}>▸</span> agent proposes pause on <b style={{ color: "var(--fg)" }}>RNN-088</b> — bleed −$184/wk
                </span>
                <div style={{ display: "flex", gap: 6 }}>
                  <span className="kbd">A</span><span style={{ fontSize: 11, color: "var(--fg-2)" }}>approve</span>
                  <span className="kbd" style={{ marginLeft: 12 }}>D</span><span style={{ fontSize: 11, color: "var(--fg-2)" }}>dismiss</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>);

};

const A_Feature = ({ label, value }) =>
<div style={{ borderBottom: "1px solid var(--line)", paddingBottom: 12 }}>
    <div className="mono" style={{ fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.16em" }}>{label}</div>
    <div style={{ fontSize: 14, color: "var(--fg)", marginTop: 4 }}>{value}</div>
  </div>;


const A_MiniTile = ({ label, value, delta, warn }) =>
<div style={{ border: "1px solid var(--line)", padding: "10px 12px" }}>
    <div className="mono" style={{ fontSize: 9.5, color: "var(--fg-3)", letterSpacing: "0.14em" }}>{label}</div>
    <div className="display" style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }}>{value}</div>
    <div className="mono" style={{ fontSize: 10, color: warn ? "var(--accent)" : "var(--good)", marginTop: 2 }}>{delta}</div>
  </div>;


/* ============================================== */
/* Integrations section */
const A_Integrations = () =>
<div style={{ padding: "120px 32px 96px" }} className="snap-in">
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 56 }} className="sub-two-col">
      <div>
        <span className="tag"><span className="dot" style={{ backgroundColor: "#2563eb", color: "#fff" }}></span>INTEGRATIONS</span>
        <h2 className="display" style={{ fontSize: 56, lineHeight: 1.0, letterSpacing: "-0.03em", margin: "20px 0 0", fontWeight: 700 }}>
          Reads the marketplace.<br />Writes to your stack.
        </h2>
      </div>
      <p style={{ fontSize: 16, color: "var(--fg-1)", lineHeight: 1.6, justifySelf: "end", maxWidth: 460 }}>
        Native to the marketplace — direct connections to Seller Console, Ads, and Vendor data across USA, Asia and Europe. From there, HEXA-V plugs into the ops stack you already run. Sixteen first-party connections, plus outbound webhooks.
      </p>
    </div>
    <Integrations />
  </div>;


/* Pricing */
const A_Pricing = () =>
<div id="pricing" style={{ padding: "96px 32px 120px", borderTop: "1px solid var(--line)", background: "var(--bg)", position: "relative" }} className="snap-in">
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56 }}>
      <div>
        <span className="tag"><span className="dot"></span>PRICING · USD · MO</span>
        <h2 className="display" style={{ fontSize: 56, lineHeight: 1.0, letterSpacing: "-0.03em", margin: "20px 0 0", fontWeight: 700 }}>
          Pick your altitude.<br />From advice to autopilot.
        </h2>
      </div>
      <span className="mono" style={{ fontSize: 12, color: "var(--fg-2)" }}>// SWAP TIERS ANY MONTH · NO LOCK-IN</span>
    </div>
    <PricingGrid />
    <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 36, color: "var(--fg-2)", fontSize: 13 }}>
      <span>▸ Annual billing — 2 months free</span>
      <span>▸ Migration concierge included</span>
      <span>▸ 14-day pilot · no card required</span>
    </div>
  </div>;


/* CTA / Footer */
const A_Footer = () =>
<div>
    {/* CTA */}
    <div style={{ padding: "120px 32px", borderTop: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
      <div className="hexpattern" style={{ position: "absolute", inset: 0, opacity: 0.6 }} />
      <div style={{
      position: "absolute", left: "30%", top: "20%", width: 600, height: 600,
      background: "radial-gradient(circle, var(--accent-glow), transparent 60%)", filter: "blur(60px)"
    }} />
      <MoneyRain count={7} opacity={0.28} />
      <div style={{ position: "relative", textAlign: "center", maxWidth: 980, margin: "0 auto" }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "#2563eb" }}>// READY ROOM</span>
        <h2 className="display hexa-cta-h2 slide-up" style={{ fontSize: 96, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "20px 0 28px", fontWeight: 700 }}>
          Stop running money<br />through a spreadsheet.
        </h2>
        <p style={{ fontSize: 18, color: "var(--fg-1)", maxWidth: 600, margin: "0 auto 40px", lineHeight: 1.55 }}>
          Six minutes to install. Fourteen days to know if it’s working. Most teams kill three SaaS tools the day they sign.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
          <a href={(window.HEXA || {}).SIGNUP_URL || "#"} className="btn btn-primary btn-block" style={{ backgroundColor: "#2563eb", color: "#fff", textDecoration: "none" }}>Start at $19 →</a>
          <a href={(window.HEXA || {}).WATCH_URL || "#watch-demo"} className="btn btn-block" style={{ textDecoration: "none" }}>▶ Watch Demo</a>
        </div>
      </div>
    </div>

    {/* Footer proper */}
    <div style={{ borderTop: "1px solid var(--line)", padding: "56px 32px 32px", background: "var(--bg-1)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 40 }} className="hexa-footer-grid">
        <div>
          <Wordmark size={22} />
          <p style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.55, marginTop: 16, maxWidth: 280 }}>
            The operating system for marketplace brands that have outgrown spreadsheets, agencies and good intentions.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
            <span className="tag">HTTPS · ENCRYPTED</span>
            <span className="tag">GDPR</span>
            <span className="tag">SOC 2 IN PROGRESS</span>
          </div>
        </div>
        <A_FooterCol title="PLATFORM" items={[
      { l: "PPC Agent", h: "ppc-agent.html" },
      { l: "Profit OS", h: "profit-os.html" },
      { l: "Sales Intel", h: "sales-intel.html" },
      { l: "Integrations", h: "integrations.html" },
      { l: "Pricing", h: "#pricing" }]
      } />
        <A_FooterCol title="DEVELOPERS" items={[
      { l: "Docs", h: "docs.html" },
      { l: "Webhooks", h: "docs.html" },
      { l: "Webhooks", h: "docs.html" },
      { l: "Changelog", h: "changelog.html" },
      { l: "Status", h: "#" }]
      } />
        <A_FooterCol title="COMPANY" items={[
      { l: "About", h: "about.html" },
      { l: "Manifesto", h: "about.html" },
      { l: "Security", h: "security.html" },
      { l: "Contact", h: "mailto:" + ((window.HEXA || {}).CONTACT || "hello@hexa-v.io") }]
      } />
        <A_FooterCol title="ACCOUNT" items={[
      { l: "Sign in", h: "signin.html" },
      { l: "Deploy", h: "deploy.html" },
      { l: "Dashboard ↗", h: (window.HEXA || {}).DASHBOARD_URL || "#" }]
      } />
      </div>
      <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", color: "var(--fg-3)", fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.1em" }}>
        <span>© 2020–2026 HEXA-V </span>
        <span>NODES.USA / ASIA / EUROPE — BUILD 4.18.2-c8f1a · 99.997% / 90D</span>
        <span>An independent operating system for marketplace sellers.</span>
      </div>
    </div>
  </div>;


const A_FooterCol = ({ title, items }) =>
<div>
    <div className="mono" style={{ fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.18em", marginBottom: 18 }}>{title}</div>
    <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((it, i) =>
    <li key={i}><a href={it.h} style={{ fontSize: 13, color: "var(--fg-1)", textDecoration: "none" }}>{it.l}</a></li>
    )}
    </ul>
  </div>;


window.A_ProductMock = A_ProductMock;
window.A_Integrations = A_Integrations;
window.A_Pricing = A_Pricing;
window.A_Footer = A_Footer;