// Kinetic hero v2: full-viewport density, scattered data cards, integrated stats band
const { useState: useStateK, useEffect: useEffectK, useRef: useRefK } = React;

const KN_TICKER_LABELS = [
  "Alternative Investments",
  "Portfolio Management Services",
  "Mutual Funds",
  "Market Linked Debentures",
  "Structured Products",
  "Exclusive Startups",
  "Global Investments",
];

function HeroKinetic({ onOpenAudit }) {
  const [mounted, setMounted] = useStateK(false);
  const stageRef = useRefK(null);
  const [pointer, setPointer] = useStateK({ x: 0.5, y: 0.5 });

  useEffectK(() => {
    setMounted(true);
  }, []);

  useEffectK(() => {
    const el = stageRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setPointer({
        x: (e.clientX - r.left) / r.width,
        y: (e.clientY - r.top) / r.height,
      });
    };
    el.addEventListener("mousemove", onMove);
    return () => el.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section className={`hero-kn ${mounted ? "lit" : ""}`} ref={stageRef}>
      {/* Background layers */}
      <div className="kn-bg" aria-hidden>
        <div
          className="kn-orb"
          style={{
            left: `${pointer.x * 100}%`,
            top: `${pointer.y * 100}%`,
          }}
        />
        <div className="kn-grid" />
        <svg
          className="kn-bars"
          viewBox="0 0 1200 600"
          preserveAspectRatio="none"
        >
          {Array.from({ length: 32 }).map((_, i) => {
            const h =
              60 + Math.sin(i * 0.7) * 40 + (i / 32) * 280 + (i % 5) * 18;
            return (
              <rect
                key={i}
                x={i * 38 + 8}
                y={600 - h}
                width={2}
                height={h}
                className="kn-bar"
                style={{ animationDelay: `${i * 35}ms` }}
              />
            );
          })}
          <path
            d="M 0 480 Q 200 420 400 360 T 800 220 T 1200 80"
            className="kn-line"
            pathLength="1"
          />
        </svg>
      </div>

      {/* Main stage: headline + scattered cards */}
      <div className="kn-stage-v2">
        <div className="wrap kn-content">
          <h1 className="kn-headline">
            <span className="kn-line-mask">
              <span className="kn-line-text d0">Wealth,</span>
            </span>
            <span className="kn-line-mask">
              <span className="kn-line-text d1">
                <em className="kn-em">Architected.</em>
              </span>
            </span>
            <span className="kn-line-mask">
              <span className="kn-line-text d2 kn-headline-tag">
                Portfolio architecture across public markets, alternatives, and
                structured global access, for investors who've outgrown
                platforms.
              </span>
            </span>
          </h1>

          <div className="kn-cta kn-fade d5 kn-cta-full">
            <button className="btn primary lg kn-btn" onClick={onOpenAudit}>
              <span>Schedule Introductory Call</span>
              <span className="kn-btn-arrow">→</span>
            </button>
            <a href="#approach" className="kn-link">
              <span className="kn-link-num">02</span>
              <span>See how we architect it</span>
              <span className="kn-link-rule" />
            </a>
          </div>
        </div>

        {/* Data cards: scattered across the full viewport */}
        <div className="kn-cards-v2" aria-hidden>
          {/* Card 1: Category-wise AUM growth */}
          <div className="kn-card kn-c1-v2 kn-fade d6">
            <div className="kn-card-title kn-card-title--aum">
              Category-Wise Industry AUM Growth in India (2021-2024)
            </div>
            <div className="kn-alloc">
              <div className="kn-alloc-row">
                <span className="kn-alloc-name">AIF</span>
                <span className="kn-alloc-val">~140%</span>
              </div>
              <div className="kn-alloc-row">
                <span className="kn-alloc-name">PMS</span>
                <span className="kn-alloc-val">~60%</span>
              </div>
              <div className="kn-alloc-row">
                <span className="kn-alloc-name">MF</span>
                <span className="kn-alloc-val">~70%</span>
              </div>
              <div className="kn-alloc-row">
                <span className="kn-alloc-name kn-alloc-name--long">
                  Outbound Investments
                </span>
                <span className="kn-alloc-val">~130%</span>
              </div>
            </div>
          </div>

          {/* Card 2: Live deal */}
          <div className="kn-card kn-c2-v2 kn-fade d7">
            <div className="kn-card-head">
              <div className="kn-card-tag mono">DEAL</div>
              <span className="kn-pill">LIVE</span>
            </div>
            <div className="kn-card-title">Seed</div>
            <div className="kn-stat-grid kn-stat-grid--pair">
              <div>
                <div className="kn-stat-lbl mono">VALUATION</div>
                <div className="kn-stat-val">₹225 Cr</div>
              </div>
              <div>
                <div className="kn-stat-lbl mono">INVESTMENT</div>
                <div className="kn-stat-val">₹8 Cr</div>
              </div>
            </div>
            <div className="kn-deal-sector">
              <div className="kn-stat-lbl mono">SECTOR</div>
              <div className="kn-deal-sector-val">Space Tech</div>
            </div>
          </div>

          {/* Card 3: HNI allocation mix */}
          <div className="kn-card kn-c3-v2 kn-fade d8">
            <div className="kn-card-title kn-card-title--aum">
              HNIs Allocation Growth
            </div>
            <div className="kn-alloc">
              <div className="kn-alloc-row">
                <span className="kn-alloc-name">AIFs</span>
                <span className="kn-alloc-bar">
                  <i style={{ width: "46%" }} />
                </span>
                <span className="kn-alloc-val">46%</span>
              </div>
              <div className="kn-alloc-row">
                <span className="kn-alloc-name">PMS</span>
                <span className="kn-alloc-bar">
                  <i style={{ width: "20%" }} />
                </span>
                <span className="kn-alloc-val">14%</span>
              </div>
              <div className="kn-alloc-row">
                <span className="kn-alloc-name">MFs</span>
                <span className="kn-alloc-bar">
                  <i style={{ width: "30%" }} />
                </span>
                <span className="kn-alloc-val">21%</span>
              </div>
              <div className="kn-alloc-row">
                <span className="kn-alloc-name kn-alloc-name--long">
                  Bank Deposits
                </span>
                <span className="kn-alloc-bar">
                  <i style={{ width: "21.7%" }} />
                </span>
                <span className="kn-alloc-val">10%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Integrated stats band — Deep Naval background */}
      <div className="kn-stats-band">
        <div className="wrap">
          <div className="kn-stats-row kn-fade d8">
            <div className="kn-stat-item">
              <div className="kn-stat-number">
                ₹<KnCounter to={1240} />
                <span className="kn-stat-unit"> Cr</span>
              </div>
              <div className="kn-stat-label mono">Assets Under Management</div>
            </div>
            <div className="kn-stat-item">
              <div className="kn-stat-number">
                <KnCounter to={85} />
                <span className="kn-stat-unit">+</span>
              </div>
              <div className="kn-stat-label mono">Startups funded</div>
            </div>
            <div className="kn-stat-item">
              <div className="kn-stat-number">
                <KnCounter to={1400} />
                <span className="kn-stat-unit">+</span>
              </div>
              <div className="kn-stat-label mono">Network of members</div>
            </div>
            <div className="kn-stat-item">
              <div className="kn-stat-number">
                <KnCounter to={30} />
                <span className="kn-stat-unit">+</span>
              </div>
              <div className="kn-stat-label mono">Cities</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom ticker */}
      <div className="kn-ticker" aria-hidden>
        <div className="kn-ticker-track">
          {Array.from({ length: 2 }).map((_, k) => (
            <div className="kn-ticker-group" key={k}>
              {KN_TICKER_LABELS.map((label, i) => (
                <span key={`${k}-${i}`}>
                  <i>{i % 2 === 0 ? "★" : "·"}</i> {label}
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function KnCounter({ to }) {
  const [n, setN] = useStateK(0);
  useEffectK(() => {
    let raf, start;
    const dur = 1600;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(to * eased));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [to]);
  return <span>{n.toLocaleString("en-IN")}</span>;
}

window.HeroKinetic = HeroKinetic;