// Hero with animated "Command Center" mosaic
function Hero() {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="tag" style={{ marginBottom: 22 }}>
            <span className="dot"/> Antelope Trading OS · v6
          </div>
          <h1>
            The operating system for <span className="gradient-text">trading companies.</span>
          </h1>
          <p className="hero-sub">
            Acquisition, CRM, KYC, payments, trading access, IBs, affiliates, BI and AI —
            running on one connected command center, not eight glued-together tools.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#contact">Book a demo
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a className="btn btn-ghost" href="#lifecycle">See the revenue flow</a>
          </div>
          <div className="hero-pills">
            <a href="#solutions" className="hero-pill">
              <PillIcon kind="prop"/> Prop Firms
            </a>
            <a href="#solutions" className="hero-pill">
              <PillIcon kind="crypto"/> Crypto
            </a>
            <a href="#solutions" className="hero-pill">
              <PillIcon kind="forex"/> FX / CFD
            </a>
            <a href="#solutions" className="hero-pill">
              <PillIcon kind="stock"/> Stock & Investment
            </a>
          </div>
        </div>

        <CommandCenter />
      </div>

      <style>{`
        .hero {
          position: relative;
          padding: 168px 0 80px;
          overflow: hidden;
        }
        .hero::before {
          content: ""; position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
          background-size: 56px 56px;
          mask: radial-gradient(900px 600px at 60% 30%, #000 30%, transparent 78%);
          -webkit-mask: radial-gradient(900px 600px at 60% 30%, #000 30%, transparent 78%);
          pointer-events: none;
        }
        .hero-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
          gap: 48px;
          align-items: center;
          position: relative;
          z-index: 1;
        }
        .hero-copy h1 { margin-bottom: 22px; }
        .hero-sub { font-size: 19px; max-width: 560px; }
        .hero-cta { display: flex; gap: 12px; margin-top: 30px; }
        .hero-cta .btn-primary { padding: 13px 22px; font-size: 14.5px; }
        .hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
        .hero-pill {
          display: inline-flex; align-items: center; gap: 7px;
          padding: 7px 12px; border-radius: 999px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--line);
          font-size: 13px; color: var(--text-dim); font-weight: 500;
          transition: color .15s ease, border-color .15s ease, background .15s ease;
        }
        .hero-pill:hover { color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,0.06); }
        @media (max-width: 1080px) {
          .hero-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

function PillIcon({ kind }) {
  const map = {
    prop: { c1: "#FFB000", c2: "#FF7A45" },
    crypto: { c1: "#FFB000", c2: "#FF7A45" },
    forex: { c1: "#7A52FF", c2: "#5A2DF4" },
    stock: { c1: "#2BD974", c2: "#24A1DE" },
  };
  const { c1, c2 } = map[kind] || map.forex;
  return (
    <span style={{ width: 14, height: 14, borderRadius: 4, background: `linear-gradient(135deg, ${c1}, ${c2})`, display: "inline-block" }}/>
  );
}

/* ---------- The Command Center ---------- */
function CommandCenter() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1600);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="cc-wrap">
      <div className="cc-frame">
        <div className="cc-chrome">
          <div className="cc-chrome-left">
            <span className="cc-dot" style={{ background: "#FF5F56" }}/>
            <span className="cc-dot" style={{ background: "#FFBD2E" }}/>
            <span className="cc-dot" style={{ background: "#27C93F" }}/>
          </div>
          <div className="cc-title">
            <Logo size={13}/>
            <span className="cc-divider-v"/>
            <span className="cc-breadcrumb">Trading OS · Command Center</span>
          </div>
          <div className="cc-live"><span className="dot"/>LIVE</div>
        </div>

        <div className="cc-body">
          {/* Left col */}
          <div className="cc-col">
            <Panel title="Revenue Flow" subtitle="Last 60 minutes" pinned>
              <RevenueChart tick={tick}/>
            </Panel>
            <Panel title="CRM Desk" subtitle="Live agent activity">
              <AgentList tick={tick}/>
            </Panel>
          </div>

          {/* Center col */}
          <div className="cc-col">
            <Panel title="Lifecycle Pipeline" subtitle="Lead → Funded">
              <LifecyclePipe tick={tick}/>
            </Panel>
            <Panel title="Event Stream" subtitle="Real-time" small>
              <EventStream tick={tick}/>
            </Panel>
          </div>

          {/* Right col */}
          <div className="cc-col">
            <Panel title="Mobile Trader" subtitle="Client view" >
              <MiniMobile tick={tick}/>
            </Panel>
            <Panel title="BI Alerts" subtitle="AI suggestions" accent="pink">
              <AlertList tick={tick}/>
            </Panel>
          </div>
        </div>
      </div>

      <div className="cc-glow" aria-hidden="true"/>

      <style>{`
        .cc-wrap { position: relative; }
        .cc-glow {
          position: absolute; inset: -40px; z-index: 0; pointer-events: none;
          background:
            radial-gradient(360px 280px at 80% 20%, rgba(241,24,178,0.18), transparent 60%),
            radial-gradient(420px 320px at 20% 80%, rgba(90,45,244,0.30), transparent 60%);
          filter: blur(10px);
        }
        .cc-frame {
          position: relative;
          z-index: 1;
          border-radius: 18px;
          background: linear-gradient(180deg, #161630 0%, #0E0E20 100%);
          border: 1px solid var(--line-2);
          box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(122,82,255,0.18) inset;
          overflow: hidden;
        }
        .cc-chrome {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 14px;
          background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
          border-bottom: 1px solid var(--line);
        }
        .cc-chrome-left { display: flex; gap: 7px; }
        .cc-dot { width: 11px; height: 11px; border-radius: 999px; }
        .cc-title { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 12.5px; }
        .cc-divider-v { width: 1px; height: 14px; background: var(--line-2); }
        .cc-breadcrumb { letter-spacing: 0.02em; }
        .cc-live {
          display: inline-flex; align-items: center; gap: 7px;
          color: var(--green); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
        }
        .cc-body {
          display: grid; grid-template-columns: 1.05fr 1fr 1fr;
          gap: 1px; background: var(--line);
        }
        .cc-col { background: var(--ink-2); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
      `}</style>
    </div>
  );
}

function Panel({ title, subtitle, children, accent, small, pinned }) {
  const accentColor = accent === "pink" ? "var(--pink)" : "var(--purple-2)";
  return (
    <div className="cc-panel">
      <div className="cc-panel-head">
        <div>
          <div className="cc-panel-title">{title}</div>
          <div className="cc-panel-sub">{subtitle}</div>
        </div>
        <div className="cc-panel-meta">
          {pinned ? <span className="cc-pin">PINNED</span> : null}
          <span className="cc-panel-accent" style={{ background: accentColor }}/>
        </div>
      </div>
      <div className="cc-panel-body" style={{ minHeight: small ? 0 : 72 }}>{children}</div>
      <style>{`
        .cc-panel {
          background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
          border: 1px solid var(--line);
          border-radius: 12px;
          padding: 12px;
        }
        .cc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .cc-panel-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
        .cc-panel-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
        .cc-panel-meta { display: flex; align-items: center; gap: 8px; }
        .cc-pin { font-size: 9px; letter-spacing: 0.1em; color: var(--text-mute); padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; }
        .cc-panel-accent { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 14px currentColor; }
      `}</style>
    </div>
  );
}

/* sparkline-style stacked area */
function RevenueChart({ tick }) {
  const points = React.useMemo(() => {
    const arr = [];
    for (let i = 0; i < 32; i++) {
      const seed = (i * 13 + tick * 7) % 100;
      arr.push(30 + Math.sin(i * 0.5 + tick * 0.4) * 12 + (seed % 17));
    }
    return arr;
  }, [tick]);
  const w = 280, h = 72, pad = 4;
  const max = Math.max(...points);
  const min = Math.min(...points);
  const norm = points.map((v, i) => [pad + (i / (points.length - 1)) * (w - pad * 2), h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2)]);
  const path = "M" + norm.map((p) => p.join(",")).join(" L");
  const area = `M${norm[0][0]},${h} L` + norm.map((p) => p.join(",")).join(" L") + ` L${norm[norm.length-1][0]},${h} Z`;
  return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
        <span style={{ fontSize: 22, fontWeight: 700, color: "var(--text)", letterSpacing: "-0.02em" }} className="mono">${(2480 + (tick % 9) * 17).toLocaleString()}K</span>
        <span style={{ fontSize: 11.5, color: "var(--green)", fontWeight: 600 }}>+12.4%</span>
        <span style={{ fontSize: 11, color: "var(--text-mute)", marginLeft: "auto" }}>FTD · NDD · Retention</span>
      </div>
      <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: "block" }}>
        <defs>
          <linearGradient id="rev-fill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#7A52FF" stopOpacity="0.5"/>
            <stop offset="1" stopColor="#7A52FF" stopOpacity="0"/>
          </linearGradient>
          <linearGradient id="rev-line" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#7A52FF"/>
            <stop offset="0.6" stopColor="#F118B2"/>
            <stop offset="1" stopColor="#FF7A45"/>
          </linearGradient>
        </defs>
        <path d={area} fill="url(#rev-fill)"/>
        <path d={path} stroke="url(#rev-line)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        {norm.slice(-1).map((p, i) => (
          <circle key={i} cx={p[0]} cy={p[1]} r="3" fill="#fff">
            <animate attributeName="r" values="3;5;3" dur="1.6s" repeatCount="indefinite"/>
          </circle>
        ))}
      </svg>
    </div>
  );
}

function AgentList({ tick }) {
  const agents = [
    { name: "Maya R.", desk: "EN · Conversion", calls: 23, color: "#7A52FF" },
    { name: "Hiro K.", desk: "JP · Retention", calls: 17, color: "#F118B2" },
    { name: "Léa B.", desk: "FR · IB Desk", calls: 12, color: "#FFB000" },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {agents.map((a, i) => (
        <div key={a.name} style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 22, height: 22, borderRadius: 999, background: a.color, display: "grid", placeItems: "center", fontSize: 10, fontWeight: 700, color: "#fff" }}>
            {a.name.charAt(0)}
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, color: "var(--text)", fontWeight: 500 }}>{a.name}</div>
            <div style={{ fontSize: 10.5, color: "var(--text-mute)" }}>{a.desk}</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ fontSize: 11, color: "var(--text-dim)" }} className="mono">{a.calls + (i === (tick % 3) ? 1 : 0)}</span>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--green)", boxShadow: "0 0 6px var(--green)" }}/>
          </div>
        </div>
      ))}
    </div>
  );
}

function LifecyclePipe({ tick }) {
  const stages = [
    { label: "Lead", count: 1240, color: "#9D80FF" },
    { label: "KYC", count: 412, color: "#7A52FF" },
    { label: "FTD", count: 168, color: "#F118B2" },
    { label: "Active", count: 92, color: "#FF7A45" },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {stages.map((s, i) => {
        const pct = 100 - i * 22;
        const active = (tick % stages.length) === i;
        return (
          <div key={s.label}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 3 }}>
              <span style={{ fontSize: 11.5, color: "var(--text-dim)", fontWeight: 500 }}>{s.label}</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--text)", fontWeight: 600 }}>
                {(s.count + (active ? (tick % 5) : 0)).toLocaleString()}
              </span>
            </div>
            <div style={{ height: 6, borderRadius: 999, background: "rgba(255,255,255,0.06)", overflow: "hidden", position: "relative" }}>
              <div style={{ height: "100%", width: `${pct}%`, background: `linear-gradient(90deg, ${s.color}, ${s.color}AA)`, borderRadius: 999, transition: "width .8s ease" }}/>
              {active && <div style={{ position: "absolute", top: 0, left: 0, height: "100%", width: 30, background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)", animation: "sweep 1.4s ease-in-out infinite" }}/>}
            </div>
          </div>
        );
      })}
      <style>{`@keyframes sweep { 0% { transform: translateX(-30px); } 100% { transform: translateX(280px); } }`}</style>
    </div>
  );
}

const EVENT_TEMPLATES = [
  { type: "FTD", text: "$500 deposit · cards · MX", color: "#FFB000" },
  { type: "KYC", text: "Tier-2 approved · IT", color: "#7A52FF" },
  { type: "Lead", text: "Affiliate aff_42 · ES", color: "#9D80FF" },
  { type: "Trade", text: "EURUSD 0.5 lot · long", color: "#2BD974" },
  { type: "IB", text: "Sub-IB enrolled · DE", color: "#F118B2" },
  { type: "Recover", text: "Failed payment retried", color: "#FF7A45" },
];

function EventStream({ tick }) {
  const visible = React.useMemo(() => {
    const out = [];
    for (let i = 0; i < 4; i++) {
      out.push(EVENT_TEMPLATES[(tick + i) % EVENT_TEMPLATES.length]);
    }
    return out;
  }, [tick]);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {visible.map((e, i) => (
        <div key={tick + "-" + i} style={{
          display: "flex", alignItems: "center", gap: 8,
          padding: "5px 8px",
          borderRadius: 8,
          background: i === 0 ? "rgba(122,82,255,0.08)" : "rgba(255,255,255,0.025)",
          border: "1px solid " + (i === 0 ? "rgba(122,82,255,0.2)" : "var(--line)"),
          opacity: 1 - i * 0.18,
          animation: i === 0 ? "drift-up 1.6s ease both" : undefined,
        }}>
          <span style={{ padding: "2px 6px", borderRadius: 4, fontSize: 9, fontWeight: 700, letterSpacing: "0.06em", background: e.color + "22", color: e.color }} className="mono">{e.type}</span>
          <span style={{ fontSize: 11, color: "var(--text-dim)", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{e.text}</span>
          <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>now</span>
        </div>
      ))}
    </div>
  );
}

function MiniMobile({ tick }) {
  return (
    <div style={{ display: "flex", justifyContent: "center", paddingTop: 4 }}>
      <div style={{
        width: 132, height: 168, borderRadius: 16,
        background: "linear-gradient(180deg,#1A1535, #0E0820)",
        border: "1px solid var(--line-2)",
        padding: 10, position: "relative",
        boxShadow: "0 10px 30px -10px rgba(0,0,0,0.5)"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
          <span className="mono" style={{ fontSize: 9, color: "var(--text-mute)" }}>9:41</span>
          <span style={{ width: 16, height: 4, borderRadius: 4, background: "rgba(255,255,255,0.18)" }}/>
        </div>
        <div style={{ fontSize: 9, color: "var(--text-mute)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Equity</div>
        <div style={{ fontSize: 18, fontWeight: 700, color: "var(--text)", letterSpacing: "-0.02em", marginTop: 1 }} className="mono">
          ${(24820 + (tick * 3) % 60).toLocaleString()}
        </div>
        <div style={{ fontSize: 10, color: "var(--green)", fontWeight: 600 }}>+${(120 + tick % 9)}</div>
        <svg width="100%" height="40" viewBox="0 0 110 40" style={{ display: "block", marginTop: 6 }}>
          <defs>
            <linearGradient id="mini-fill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#2BD974" stopOpacity="0.4"/>
              <stop offset="1" stopColor="#2BD974" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0 28 Q 14 18, 28 22 T 56 12 T 84 18 T 110 6 L110 40 L0 40 Z" fill="url(#mini-fill)"/>
          <path d="M0 28 Q 14 18, 28 22 T 56 12 T 84 18 T 110 6" stroke="#2BD974" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
        </svg>
        <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
          <button style={{ flex: 1, padding: "6px 0", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: "linear-gradient(180deg,#7A52FF,#5A2DF4)", border: 0, color: "#fff" }}>Deposit</button>
          <button style={{ flex: 1, padding: "6px 0", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: "rgba(255,255,255,0.06)", border: "1px solid var(--line)", color: "var(--text)" }}>Trade</button>
        </div>
      </div>
    </div>
  );
}

function AlertList({ tick }) {
  const items = [
    { type: "AI", text: "High-value client inactive 7d", action: "Assign retention call", color: "#F118B2" },
    { type: "Risk", text: "Payment failure rate ↑ 4.2%", action: "Review BR cards PSP", color: "#FF7A45" },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((a, i) => (
        <div key={a.text} style={{ display: "flex", gap: 8 }}>
          <span style={{ width: 4, borderRadius: 4, background: a.color, flex: "0 0 4px", boxShadow: `0 0 8px ${a.color}88` }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: "var(--text)", fontWeight: 500 }}>{a.text}</div>
            <div style={{ fontSize: 10.5, color: "var(--text-mute)", marginTop: 2 }}>→ {a.action}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

window.Hero = Hero;