// 6-step Trading Revenue OS lifecycle — signature section
const LIFECYCLE = [
  { id: "acquire", label: "Acquire", sub: "Affiliates, media buying, campaigns", color: "#9D80FF",
    metric: "1,240 leads / 24h", detail: ["aff_42 · ES · CPA", "google · brand · MX", "tiktok · creator · BR"] },
  { id: "convert", label: "Convert", sub: "CRM, Ninja, calls, callbacks", color: "#7A52FF",
    metric: "412 calls today", detail: ["Maya R. · 23 calls", "Hiro K. · 17 calls", "Léa B. · 12 calls"] },
  { id: "verify", label: "Verify", sub: "KYC, AML, suitability", color: "#5A2DF4",
    metric: "168 docs reviewed", detail: ["Tier-2 IT · approved", "Tier-1 NG · pending", "Suitability · passed"] },
  { id: "fund", label: "Fund", sub: "Payments, PSPs, crypto, recovery", color: "#F118B2",
    metric: "$248K deposits", detail: ["Cards · 62%", "Crypto · 24%", "APMs · 14%"] },
  { id: "engage", label: "Engage", sub: "Web Trader, Mobile, Client Area", color: "#FF7A45",
    metric: "92 active clients", detail: ["Mobile sessions · 1.2K", "Trade volume · $4.8M", "Client Area DAU · 412"] },
  { id: "optimize", label: "Optimize", sub: "BI, AI, alerts, management view", color: "#FFB000",
    metric: "AI summary · 5m ago", detail: ["Inactive HVC alerts", "Funnel drop diagnostics", "Next-best-action queue"] },
];

function Lifecycle() {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive((a) => (a + 1) % LIFECYCLE.length), 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="lifecycle" className="section-pad lifecycle">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Revenue operating system</span>
          <h2>One lifecycle. <span className="gradient-text">One source of truth.</span></h2>
          <p>From the affiliate click to the funded, retained client — Antelope runs every step on the same connected platform. No exports. No CSV stitching. No "let me check the other tool."</p>
        </div>

        <div className="lc-track">
          {LIFECYCLE.map((s, i) => (
            <button
              key={s.id}
              className={`lc-step ${i === active ? "active" : ""}`}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}
              style={{ "--c": s.color }}
            >
              <div className="lc-step-num mono">0{i + 1}</div>
              <div className="lc-step-label">{s.label}</div>
              <div className="lc-step-sub">{s.sub}</div>
              <div className="lc-step-bar"/>
            </button>
          ))}
        </div>

        <div className="lc-detail card">
          <div className="lc-detail-left">
            <div className="lc-detail-eyebrow" style={{ color: LIFECYCLE[active].color }}>
              <span className="lc-pulse" style={{ background: LIFECYCLE[active].color }}/>
              Stage 0{active + 1} · {LIFECYCLE[active].label}
            </div>
            <h3 className="lc-detail-title">{LIFECYCLE[active].sub}</h3>
            <div className="lc-detail-metric">
              <span className="mono">{LIFECYCLE[active].metric}</span>
            </div>
            <a href="#products" className="btn-link">Explore the apps powering this stage →</a>
          </div>
          <div className="lc-detail-right">
            {LIFECYCLE[active].detail.map((d, i) => (
              <div key={d} className="lc-detail-row" style={{ animationDelay: `${i * 80}ms` }}>
                <span className="lc-detail-dot" style={{ background: LIFECYCLE[active].color }}/>
                <span>{d}</span>
                <span className="mono lc-detail-time">·{(i + 1) * 4}s</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .lc-track {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 10px;
          margin-bottom: 24px;
        }
        .lc-step {
          text-align: left;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 14px;
          padding: 16px 14px 18px;
          color: var(--text-dim);
          transition: all .25s ease;
          position: relative;
          overflow: hidden;
        }
        .lc-step:hover { color: var(--text); border-color: var(--line-2); }
        .lc-step.active {
          background: linear-gradient(180deg, color-mix(in oklab, var(--c) 12%, transparent), rgba(255,255,255,0.02));
          border-color: color-mix(in oklab, var(--c) 40%, transparent);
          color: var(--text);
          box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--c) 50%, transparent);
        }
        .lc-step-num { font-size: 10px; color: var(--text-mute); letter-spacing: 0.1em; }
        .lc-step.active .lc-step-num { color: var(--c); }
        .lc-step-label { font-size: 17px; font-weight: 600; color: var(--text); margin: 8px 0 4px; letter-spacing: -0.01em; }
        .lc-step-sub { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
        .lc-step-bar {
          position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
          background: var(--c);
          transform: scaleX(0); transform-origin: left;
          transition: transform .25s ease;
        }
        .lc-step.active .lc-step-bar { transform: scaleX(1); }

        .lc-detail {
          display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px;
          padding: 32px;
        }
        .lc-detail-eyebrow {
          font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
          display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
        }
        .lc-pulse { width: 6px; height: 6px; border-radius: 999px; box-shadow: 0 0 12px currentColor; }
        .lc-detail-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
        .lc-detail-metric { font-size: 15px; color: var(--text); margin-bottom: 22px; }
        .lc-detail-right { display: flex; flex-direction: column; gap: 10px; align-self: center; }
        .lc-detail-row {
          display: flex; align-items: center; gap: 12px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.025);
          border: 1px solid var(--line);
          border-radius: 10px;
          font-size: 13.5px;
          color: var(--text);
          animation: row-in .4s ease both;
        }
        .lc-detail-dot { width: 7px; height: 7px; border-radius: 999px; }
        .lc-detail-time { color: var(--text-mute); margin-left: auto; font-size: 11px; }
        @keyframes row-in { from { opacity: 0; transform: translateX(-6px);} to { opacity: 1; transform: translateX(0);} }

        @media (max-width: 960px) {
          .lc-track { grid-template-columns: repeat(2, 1fr); }
          .lc-detail { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

window.Lifecycle = Lifecycle;