const { useEffect, useRef, useState } = React;

// ======== HERO ========
function Hero() {
  React.useEffect(() => {
    // Manual fade-in via rAF to avoid iframe CSS-transition pending issues
    requestAnimationFrame(() => {
      document.querySelectorAll(".hero .anim").forEach((el) => {
        const delay = parseInt(el.dataset.d || "0", 10);
        const dur = 900;
        setTimeout(() => {
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            el.style.opacity = String(eased);
            el.style.transform = `translateY(${(1 - eased) * 24}px)`;
            if (p < 1) requestAnimationFrame(tick);
            else {
              el.style.opacity = "";
              el.style.transform = "";
              el.classList.add("go");
            }
          };
          requestAnimationFrame(tick);
        }, delay);
      });

      // Draw bridge cables manually (iframe CSS animations can stall)
      const cables = document.querySelectorAll(".hero-bridge-layer .cable");
      const catenary = document.querySelector(".hero-bridge-layer .catenary");
      const drawEl = (el, len, delay, dur) => {
        setTimeout(() => {
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            el.style.strokeDashoffset = String(len * (1 - eased));
            if (p < 1) requestAnimationFrame(tick);
            else el.style.strokeDashoffset = "0";
          };
          requestAnimationFrame(tick);
        }, delay);
      };
      cables.forEach((c, i) => drawEl(c, 400, 200 + i * 35, 2200));
      if (catenary) drawEl(catenary, 2000, 300, 3200);
    });
    const onScroll = () => {
      const y = window.scrollY;
      const py = Math.min(y * 0.18, 120);
      document.documentElement.style.setProperty("--py", `${py}px`);
      document.documentElement.style.setProperty("--py-slow", `${py * 0.45}px`);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <section className="hero" id="hero">
      {/* Layered depth — farthest to nearest */}
      <div className="hero-grid-bg" />
      <div className="hero-bridge-layer">
        <HeroBridge />
      </div>
      <div className="hero-fade" />

      <div className="container hero-inner">
        <div className="hero-eyebrow anim" data-d="120">
          <span className="he-rule" />
          <span className="he-label">The DeepRock Network</span>
        </div>

        <h1 className="hero-display anim" data-d="280">
          Bridging <em>Opportunity</em>
          <br />
          and Execution.
        </h1>

        <p className="hero-lede anim" data-d="520">
          A private global ecosystem connecting founders, capital and elite
          operators — engineered for long-horizon conviction and discreet,
          decisive execution.
        </p>

        <div className="hero-cta-row anim" data-d="720">
          <a href="#contact" className="btn primary hero-cta">
            Join Elite Network
            <span className="arrow" />
          </a>
          <a href="#pillars" className="hero-secondary">
            <span>Explore the ecosystem</span>
          </a>
        </div>
      </div>

      <div className="hero-scroll">
        <span className="hs-line" />
      </div>
    </section>
  );
}

// ======== HIGHLIGHTS ========
// Compounding orbits — nested arcs resolving to a single bright node
function EcosystemMark() {
  return (
    <svg width="140" height="140" viewBox="0 0 140 140" fill="none">
      <circle
        cx="70"
        cy="70"
        r="62"
        stroke="#C9A961"
        strokeOpacity="0.10"
        strokeDasharray="1 5"
      />
      <circle cx="70" cy="70" r="48" stroke="#C9A961" strokeOpacity="0.22" />
      <path
        d="M70 34 A36 36 0 0 1 106 70"
        stroke="#E5C88F"
        strokeOpacity="0.8"
        strokeWidth="0.8"
        fill="none"
      />
      <circle cx="70" cy="70" r="24" stroke="#C9A961" strokeOpacity="0.35" />
      <path
        d="M70 54 A16 16 0 0 1 86 70"
        stroke="#E5C88F"
        strokeOpacity="0.9"
        strokeWidth="0.8"
        fill="none"
      />
      <circle cx="70" cy="70" r="2.5" fill="#E5C88F" />
      <circle cx="106" cy="70" r="2" fill="#E5C88F" />
      <circle cx="86" cy="70" r="1.5" fill="#E5C88F" />
    </svg>
  );
}
// Meridian globe — parallels, prime meridian, scattered nodes across hemispheres
function GlobalMark() {
  return (
    <svg width="140" height="140" viewBox="0 0 140 140" fill="none">
      <circle cx="70" cy="70" r="56" stroke="#C9A961" strokeOpacity="0.28" />
      <ellipse
        cx="70"
        cy="70"
        rx="56"
        ry="20"
        stroke="#C9A961"
        strokeOpacity="0.15"
      />
      <ellipse
        cx="70"
        cy="70"
        rx="56"
        ry="40"
        stroke="#C9A961"
        strokeOpacity="0.12"
      />
      <ellipse
        cx="70"
        cy="70"
        rx="22"
        ry="56"
        stroke="#C9A961"
        strokeOpacity="0.18"
      />
      <line
        x1="70"
        y1="14"
        x2="70"
        y2="126"
        stroke="#E5C88F"
        strokeOpacity="0.35"
        strokeWidth="0.6"
      />
      {[
        [52, 48],
        [88, 54],
        [42, 78],
        [94, 84],
        [64, 96],
        [78, 34],
      ].map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r="1.8" fill="#E5C88F" />
      ))}
    </svg>
  );
}
// Network lattice — center anchor with radiating proprietary spokes
function NetworkMark() {
  return (
    <svg width="140" height="140" viewBox="0 0 140 140" fill="none">
      <circle
        cx="70"
        cy="70"
        r="56"
        stroke="#C9A961"
        strokeOpacity="0.10"
        strokeDasharray="1 4"
      />
      {[0, 60, 120, 180, 240, 300].map((a) => {
        const r = (a * Math.PI) / 180;
        const x = 70 + Math.cos(r) * 48;
        const y = 70 + Math.sin(r) * 48;
        return (
          <g key={a}>
            <line
              x1="70"
              y1="70"
              x2={x}
              y2={y}
              stroke="#C9A961"
              strokeOpacity="0.25"
              strokeWidth="0.6"
            />
            <circle cx={x} cy={y} r="2" fill="#C9A961" />
          </g>
        );
      })}
      {/* Cross-links forming a closed mesh */}
      {[0, 60, 120, 180, 240, 300].map((a) => {
        const r = (a * Math.PI) / 180;
        const x = 70 + Math.cos(r) * 48;
        const y = 70 + Math.sin(r) * 48;
        const a2 = ((a + 60) * Math.PI) / 180;
        const x2 = 70 + Math.cos(a2) * 48;
        const y2 = 70 + Math.sin(a2) * 48;
        return (
          <line
            key={`e${a}`}
            x1={x}
            y1={y}
            x2={x2}
            y2={y2}
            stroke="#C9A961"
            strokeOpacity="0.14"
            strokeWidth="0.5"
          />
        );
      })}
      <circle
        cx="70"
        cy="70"
        r="4"
        fill="#0A0E1A"
        stroke="#E5C88F"
        strokeWidth="1"
      />
      <circle cx="70" cy="70" r="1.5" fill="#E5C88F" />
    </svg>
  );
}

function Highlights() {
  const railRef = useRef(null);
  // Scroll-driven rotation on each .hl-mark svg — peaks when the item's
  // center is aligned with the viewport center, eases out either side.
  // This replaces hover-only animation with an always-on, touch-friendly
  // progression that still layers additively with hover on desktop.
  useEffect(() => {
    const rail = railRef.current;
    if (!rail) return;
    let ticking = false;
    const update = () => {
      ticking = false;
      const items = rail.querySelectorAll(".hl-item");
      const vh = window.innerHeight || document.documentElement.clientHeight;
      items.forEach((item) => {
        const r = item.getBoundingClientRect();
        const center = (r.top + r.bottom) / 2;
        const dist = Math.abs(center - vh / 2);
        const progress = Math.max(0, 1 - dist / (vh * 0.65));
        const eased = progress * progress * (3 - 2 * progress); // smoothstep
        item.style.setProperty("--rot", `${eased * 18}deg`);
        item.style.setProperty("--glow", String(eased * 0.6));
      });
    };
    const onScroll = () => {
      if (!ticking) {
        requestAnimationFrame(update);
        ticking = true;
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    update();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);
  const items = [
    {
      mark: <EcosystemMark />,
      roman: "I",
      lead: "Future-Proof",
      title: "Ecosystem",
      body: "An integrated platform designed for enduring relevance — compounding value across generations, jurisdictions and market cycles.",
      tag: "Continuity",
    },
    {
      mark: <GlobalMark />,
      roman: "II",
      lead: "Global Multi-Vertical",
      title: "Reach",
      body: "Finance, real estate, education, hospitality, industry — a single ecosystem serving principals end-to-end across eight jurisdictions.",
      tag: "Breadth",
    },
    {
      mark: <NetworkMark />,
      roman: "III",
      lead: "The Private Network",
      title: "Advantage",
      body: "A closed, curated mesh of founders, investors and operators. Proprietary flow, no public auction, discretion by design.",
      tag: "Discretion",
    },
  ];
  return (
    <section id="highlights" className="highlights-sec">
      <div className="container">
        <Reveal className="hl-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              Strategic Highlights
            </div>
            <h2 className="section-title hl-title">
              Three architectural <em>advantages</em>.
            </h2>
          </div>
          <div className="hl-head-right">
            <p className="body">
              The DeepRock thesis rests on three interlocking foundations — each
              reinforcing the others, together constituting a private-market
              advantage that cannot be replicated by scale alone.
            </p>
          </div>
        </Reveal>

        <div className="hl-rail" ref={railRef}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 140} className="hl-col">
              <article className="hl-item">
                <div className="hl-mark">
                  {it.mark}
                  <span className="hl-roman">{it.roman}</span>
                </div>
                <div className="hl-rule" />
                <div className="hl-body">
                  <div className="hl-tag">— {it.tag}</div>
                  <h3 className="hl-heading">
                    <span className="hl-lead">{it.lead}</span>
                    <span className="hl-title-word">{it.title}</span>
                  </h3>
                  <p className="hl-copy">{it.body}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Highlights });