/* Shared nav + footer + icons + hooks */
const { useEffect, useRef, useState, useMemo, useCallback } = React;

/* ---------- Icons ---------- */
const Arrow = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M7 17 17 7"/><path d="M7 7h10v10"/></svg>
);
const ChevronDown = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m6 9 6 6 6-6"/></svg>
);
const Search = ({ className = '' }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
);
/* ---------- Hooks ---------- */
function useInView(opts = { threshold: 0.15 }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
}
function useCountUp(target, play = true, duration = 1400) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!play) return;
    let raf = 0;
    const start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, play, duration]);
  return val;
}
/* ---------- Reveal ---------- */
function Reveal({ children, delay = 0, className = '' }) {
  const [ref, seen] = useInView();
  return (
    <div ref={ref} className={`reveal ${seen ? 'in' : ''} ${className}`} style={{ transitionDelay: `${delay}ms` }}>{children}</div>
  );
}

/* ---------- Nav ---------- */
function Nav({ current = '' }) {
  const links = [
    { href: 'index.html',        label: 'Home',        key: 'home' },
    { href: 'dashboard.html',    label: 'Dashboard',   key: 'dashboard' },
    { href: 'blog.html',         label: 'Blog',        key: 'blog' },
    { href: 'disclosures.html',  label: 'Disclosures', key: 'disclosures' },
    { href: 'community.html',    label: 'Community',   key: 'community' },
    { href: 'about.html',        label: 'About',       key: 'about' },
    { href: 'press.html',        label: 'Press',       key: 'press' },
  ];
  return (
    <header className="sticky top-0 z-40 backdrop-blur-xl bg-ink-900/60 border-b border-white/5">
      <div className="max-w-[1700px] mx-auto px-5 lg:px-8 h-14 flex items-center gap-6">
        <a href="index.html" className="flex items-center gap-2.5 shrink-0">
          <span className="h-6 w-6 rounded-full bg-acid/10 border border-acid/40 flex items-center justify-center">
            <span className="h-1.5 w-1.5 rounded-full bg-acid pulse-dot" />
          </span>
          <span className="font-mono text-[13px] tracking-[0.12em]">CRIPPLE<span className="text-acid">.AI</span></span>
        </a>
        <nav className="hidden md:flex items-center gap-5 text-[12px] font-mono text-white/60">
          {links.map(l => (
            <a key={l.key} href={l.href} className={`hover:text-white transition ${current === l.key ? 'text-white' : ''}`}>
              {l.label}
              {current === l.key && <span className="block h-px bg-acid mt-1" />}
            </a>
          ))}
        </nav>
        <div className="flex-1" />
        <a href="community.html" className="hidden sm:inline-flex items-center gap-1.5 bg-acid text-ink-900 rounded-full px-3.5 py-1.5 text-[12px] font-semibold hover:bg-acid/90 transition">
          Apply <Arrow className="h-3 w-3"/>
        </a>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="relative border-t border-white/5 px-6 lg:px-10 py-12 mt-20">
      <div className="max-w-[1700px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
        <div className="flex items-center gap-2.5">
          <span className="h-7 w-7 rounded-full bg-acid/10 border border-acid/40 flex items-center justify-center">
            <span className="h-1.5 w-1.5 rounded-full bg-acid pulse-dot" />
          </span>
          <span className="font-mono text-[13px] tracking-[0.12em]">CRIPPLE<span className="text-acid">.AI</span></span>
        </div>
        <div className="flex flex-wrap gap-6 text-[12px] font-mono text-white/50">
          <a href="blog.html" className="hover:text-white">Blog</a>
          <a href="disclosures.html" className="hover:text-white">Disclosures</a>
          <a href="dashboard.html" className="hover:text-white">Dashboard</a>
          <a href="community.html" className="hover:text-white">Community</a>
          <a href="about.html" className="hover:text-white">About</a>
          <a href="press.html" className="hover:text-white">Press</a>
        </div>
        <div className="flex flex-col md:items-end gap-1 font-mono text-[11px] text-white/40">
          <div>Built by <a href="https://blocknexus.tech" target="_blank" rel="noreferrer" className="text-white/80 hover:text-acid transition underline decoration-white/20 hover:decoration-acid underline-offset-4">Block Nexus Labs</a></div>
          <div className="text-white/30">© 2026 Cripple.AI · Independent</div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Page shell ---------- */
function PageShell({ children, current }) {
  return (
    <div className="min-h-screen flex flex-col">
      <Nav current={current} />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  );
}

/* ---------- Sparkline ---------- */
function Sparkline({ data, color = 'hsl(138 85% 55%)', width = 120, height = 36, fill = true }) {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * width;
    const y = height - ((v - min) / range) * (height - 4) - 2;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });
  const path = `M ${pts.join(' L ')}`;
  const areaPath = `${path} L ${width},${height} L 0,${height} Z`;
  const gid = 'g' + Math.random().toString(36).slice(2, 9);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className="overflow-visible">
      <defs>
        <linearGradient id={gid} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.4"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {fill && <path d={areaPath} fill={`url(#${gid})`}/>}
      <path d={path} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"/>
      <circle cx={width} cy={height - ((data[data.length-1] - min)/range)*(height-4) - 2} r="2.5" fill={color}/>
    </svg>
  );
}

/* Data loader lives in each HTML <head> as a plain inline script so it runs
 * synchronously before any type="text/babel" script (including this one).
 * See the bootstrap in index.html et al. for window.CRIPPLE_READY definition. */

Object.assign(window, { Arrow, ChevronDown, Search, useInView, useCountUp, Reveal, Nav, Footer, PageShell, Sparkline });