/* Genesis DMA — layout chrome */
const { useState: _us, useEffect: _ue, useRef: _ur, useCallback: _uc, memo: _memo } = React;

/* --- Brand bar + scroll progress --- */
function BrandBar() {
  const barRef = _ur(null);
  _ue(() => {
    let raf = 0;
    const update = () => {
      const scrollTop = window.scrollY;
      const height = document.documentElement.scrollHeight - window.innerHeight;
      const p = height > 0 ? scrollTop / height : 0;
      if (barRef.current) barRef.current.style.transform = `scaleX(${p})`;
      raf = 0;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <>
      <div className="brand-bar" aria-hidden="true" />
      <div ref={barRef} className="scroll-progress" aria-hidden="true" style={{ transform: 'scaleX(0)', width: '100%' }} />
    </>
  );
}

/* --- Header --- */
function Header({ path }) {
  const [open, setOpen] = _us(false);
  const [scrolled, setScrolled] = _us(false);
  _ue(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  _ue(() => { setOpen(false); }, [path]);

  const nav = [
    { label: 'Paid media',     path: '/capabilities/paid-media' },
    { label: 'Search & GEO',   path: '/capabilities/search' },
    { label: 'CRM',            path: '/capabilities/crm' },
    { label: 'Automation',     path: '/capabilities/automation' },
    { label: 'Content',        path: '/capabilities/content' },
    { label: 'Analytics',      path: '/capabilities/analytics' },
  ];

  return (
    <header
      className={`fixed top-[7px] left-0 right-0 z-40 transition-colors duration-300 ${scrolled ? 'bg-black/70 backdrop-blur-md hairline-b' : ''}`}
    >
      <div className="container-x flex items-center justify-between py-5">
        <a href="#/" className="flex items-center gap-3 group" aria-label="Genesis DMA home">
          <span aria-hidden="true" className="block w-2 h-2 bg-teal rounded-full group-hover:shadow-[0_0_12px_#2dd4bf] transition-shadow" />
          <span className="text-teal font-semibold uppercase tracking-[0.15em] text-sm">Genesis DMA</span>
        </a>
        <nav aria-label="Main" className="hidden lg:flex items-center gap-8">
          {nav.map(n => (
            <a key={n.path} href={'#' + n.path}
               aria-current={path === n.path ? 'page' : undefined}
               className={`text-sm link-underline ${path === n.path ? 'text-teal' : 'text-sub hover:text-white'}`}>{n.label}</a>
          ))}
        </nav>
        <div className="hidden lg:flex items-center gap-4">
          <a href="#/about" className={`text-sm link-underline ${path === '/about' ? 'text-teal' : 'text-sub hover:text-white'}`}>About</a>
          <a href="#/contact" className="text-sm font-medium px-4 py-2 border border-line2 hover:border-teal hover:text-teal transition-colors">Contact</a>
        </div>
        <button className="lg:hidden text-white p-2" aria-label="Toggle menu" onClick={() => setOpen(o => !o)}>
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
            {open ? <g><path d="M5 5l14 14"/><path d="M19 5 5 19"/></g> : <g><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></g>}
          </svg>
        </button>
      </div>
      {open && (
        <div className="lg:hidden bg-black hairline-b">
          <nav className="container-x py-6 flex flex-col gap-4" aria-label="Mobile">
            {nav.map(n => <a key={n.path} href={'#' + n.path} className={`text-base ${path === n.path ? 'text-teal' : 'text-sub'}`}>{n.label}</a>)}
            <a href="#/about" className="text-base text-sub">About</a>
            <a href="#/contact" className="text-base text-sub">Contact</a>
          </nav>
        </div>
      )}
    </header>
  );
}

/* --- Footer --- */
function Footer() {
  return (
    <footer className="hairline mt-24">
      <div className="container-x py-16 grid grid-cols-1 md:grid-cols-12 gap-10">
        <div className="md:col-span-5">
          <div className="flex items-center gap-3 mb-5">
            <span aria-hidden="true" className="block w-2 h-2 bg-teal rounded-full" />
            <span className="text-teal font-semibold uppercase tracking-[0.15em] text-sm">Genesis DMA</span>
          </div>
          <p className="text-sub max-w-md">An operator-first growth agency based in Houston, Texas. We build paid media, CRM, automation and content systems for service businesses across the United States.</p>
          <div className="mt-6 text-sm text-muted flex flex-col gap-1">
            <div className="flex items-center gap-2"><Ico.Pin /> Houston, TX · serving the US</div>
            <div className="flex items-center gap-2"><Ico.Mail /> <a href={`mailto:${SITE.email}`} className="link-underline hover:text-white">{SITE.email}</a></div>
          </div>
        </div>
        <div className="md:col-span-3">
          <div className="text-xs uppercase tracking-[0.2em] text-muted mb-4">Capabilities</div>
          <ul className="space-y-2 text-sub">
            {Object.values(SERVICES).map(s => (
              <li key={s.slug}><a href={`#/capabilities/${s.slug}`} className="link-underline hover:text-white">{s.title}</a></li>
            ))}
          </ul>
        </div>
        <div className="md:col-span-2">
          <div className="text-xs uppercase tracking-[0.2em] text-muted mb-4">Company</div>
          <ul className="space-y-2 text-sub">
            <li><a href="#/about" className="link-underline hover:text-white">About</a></li>
            <li><a href="#/contact" className="link-underline hover:text-white">Contact</a></li>
          </ul>
        </div>
        <div className="md:col-span-2">
          <div className="text-xs uppercase tracking-[0.2em] text-muted mb-4">Follow</div>
          <ul className="space-y-2 text-sub">
            <li><a href="https://www.linkedin.com/company/genesisdma" className="link-underline hover:text-white">LinkedIn</a></li>
            <li><a href="https://twitter.com/genesisdma" className="link-underline hover:text-white">Twitter</a></li>
            <li><a href="https://instagram.com/genesisdma" className="link-underline hover:text-white">Instagram</a></li>
          </ul>
        </div>
      </div>
      <div className="hairline">
        <div className="container-x py-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-3 text-xs text-muted">
          <div>© {new Date().getFullYear()} Genesis DMA. Built in Houston.</div>
          <div className="font-mono">v1.0 — last updated {new Date().toISOString().slice(0,10)}</div>
        </div>
      </div>
    </footer>
  );
}

/* --- Custom cursor --- */
function CustomCursor() {
  const dot = _ur(null); const ring = _ur(null);
  const [enabled, setEnabled] = _us(false);
  _ue(() => {
    if (!window.matchMedia('(pointer: fine)').matches) return;
    setEnabled(true);
    document.body.classList.add('cursor-on');
    let x = window.innerWidth/2, y = window.innerHeight/2;
    let rx = x, ry = y;
    let raf = 0;
    const onMove = (e) => { x = e.clientX; y = e.clientY; if (!raf) raf = requestAnimationFrame(tick); };
    const tick = () => {
      rx += (x - rx) * 0.18; ry += (y - ry) * 0.18;
      if (dot.current)  dot.current.style.transform  = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      if (ring.current) ring.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      raf = 0;
      if (Math.abs(x-rx) > 0.3 || Math.abs(y-ry) > 0.3) raf = requestAnimationFrame(tick);
    };
    const onOver = (e) => {
      if (!ring.current) return;
      const t = e.target.closest('a, button, summary, [role="button"], input, textarea, label');
      ring.current.classList.toggle('hover', !!t);
    };
    window.addEventListener('mousemove', onMove, { passive: true });
    window.addEventListener('mouseover', onOver);
    return () => {
      document.body.classList.remove('cursor-on');
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
    };
  }, []);
  if (!enabled) return null;
  return (<>
    <div ref={ring} className="c-ring" aria-hidden="true" />
    <div ref={dot} className="c-dot" aria-hidden="true" />
  </>);
}

/* --- Hero orb (parallax to cursor) --- */
function Orb() {
  const ref = _ur(null);
  _ue(() => {
    const el = ref.current; if (!el) return;
    let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => {
      const { innerWidth: w, innerHeight: h } = window;
      tx = -((e.clientX / w - 0.5) * 25);
      ty = -((e.clientY / h - 0.5) * 25);
      if (!raf) raf = requestAnimationFrame(tick);
    };
    const tick = () => {
      cx += (tx - cx) * 0.08; cy += (ty - cy) * 0.08;
      el.style.setProperty('--px', cx + 'px');
      el.style.setProperty('--py', cy + 'px');
      raf = 0;
      if (Math.abs(tx-cx) > 0.1 || Math.abs(ty-cy) > 0.1) raf = requestAnimationFrame(tick);
    };
    window.addEventListener('mousemove', onMove, { passive: true });
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <div ref={ref} className="absolute inset-0 pointer-events-none" aria-hidden="true" style={{ transform: 'translate(var(--px, 0), var(--py, 0))', transition: 'transform 60ms linear' }}>
      <div className="dot-grid absolute inset-0" />
      <div className="orb orb-a" />
      <div className="orb orb-b" />

      {/* Orbital ring system — planets */}
      <div className="orbital">
        <div className="ring r3">
          <div className="sat s3">
            <div className="rings" aria-hidden="true" />
            <div className="planet" aria-label="Google Ads">
              {/* Google "G" */}
              <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
                <path fill="#4285F4" d="M21.6 12.23c0-.73-.07-1.43-.2-2.1H12v4.1h5.4a4.62 4.62 0 0 1-2 3v2.5h3.24c1.9-1.75 3-4.33 3-7.5z"/>
                <path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.62-2.43l-3.24-2.5c-.9.6-2.04.95-3.38.95-2.6 0-4.8-1.75-5.58-4.1H3.08v2.57A10 10 0 0 0 12 22z"/>
                <path fill="#FBBC05" d="M6.42 13.92A6 6 0 0 1 6.1 12c0-.67.11-1.32.32-1.92V7.5H3.08A10 10 0 0 0 2 12c0 1.62.39 3.15 1.08 4.5l3.34-2.58z"/>
                <path fill="#EA4335" d="M12 6c1.47 0 2.78.5 3.82 1.5l2.87-2.87C16.96 3.05 14.7 2 12 2a10 10 0 0 0-8.92 5.5l3.34 2.58C7.2 7.75 9.4 6 12 6z"/>
              </svg>
            </div>
          </div>
          {/* Second satellite on outer ring — ChatGPT, offset ~135° */}
          <div className="sat-offset off-135">
            <div className="sat s3">
              <div className="planet" aria-label="ChatGPT">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="#10A37F" aria-hidden="true" style={{ transform: 'rotate(-135deg)' }}>
                  <path d="M22.3 9.7a6 6 0 0 0-.5-5A6.1 6.1 0 0 0 15 1.9a6 6 0 0 0-10.2 2.2A6 6 0 0 0 .8 7a6.1 6.1 0 0 0 .7 7.2 6 6 0 0 0 .5 5 6.1 6.1 0 0 0 6.9 2.8 6 6 0 0 0 4.5 2 6.1 6.1 0 0 0 5.8-4.2 6 6 0 0 0 4-2.9 6.1 6.1 0 0 0-.8-7.2zm-9 12.6a4.5 4.5 0 0 1-2.9-1l.1-.1 4.8-2.8a.8.8 0 0 0 .4-.7v-6.8l2 1.2v5.6a4.5 4.5 0 0 1-4.5 4.6zM3.7 18.4a4.5 4.5 0 0 1-.5-3l.1.1 4.8 2.8a.8.8 0 0 0 .8 0l5.9-3.4v2.3L10 20a4.5 4.5 0 0 1-6.2-1.6zM2.4 7.7a4.5 4.5 0 0 1 2.4-2l-.1.2v5.5c0 .3.2.6.4.7l5.9 3.4-2 1.2L4.2 14a4.5 4.5 0 0 1-1.8-6.2zm16.6 3.9L13 8l2-1.2 4.8 2.8a4.5 4.5 0 0 1-.7 8.1V11.9a.8.8 0 0 0-.4-.7zm2-3-.1-.1-4.8-2.8a.8.8 0 0 0-.8 0l-5.9 3.4V7l4.8-2.8a4.5 4.5 0 0 1 6.7 4.6zM10 15.1l-2-1.2V8.7L12.8 6l2 1.2v5.2z"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div className="ring r2">
          <div className="sat s2">
            <div className="planet" aria-label="Meta">
              {/* Meta infinity mark */}
              <svg viewBox="0 0 36 24" width="22" height="18" aria-hidden="true">
                <defs>
                  <linearGradient id="metaG" x1="0" x2="1" y1="0" y2="1">
                    <stop offset="0%" stopColor="#0866FF"/>
                    <stop offset="100%" stopColor="#00C6FF"/>
                  </linearGradient>
                </defs>
                <path fill="none" stroke="url(#metaG)" strokeWidth="3.2" strokeLinecap="round"
                  d="M3 12c0-5 3-8 7-8s6 3 8 7 4 7 8 7 6-3 6-7-3-7-7-7-6 3-8 7-4 7-8 7-6-3-6-6z"/>
              </svg>
            </div>
          </div>
          {/* Automation node planet on middle ring, offset ~200° */}
          <div className="sat-offset off-200">
            <div className="sat s2">
              <div className="planet" aria-label="Automation">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#2dd4bf" strokeWidth="1.6" aria-hidden="true" style={{ transform: 'rotate(-200deg)' }}>
                  <circle cx="5" cy="6" r="2" fill="#2dd4bf"/>
                  <circle cx="19" cy="6" r="2"/>
                  <circle cx="12" cy="18" r="2" fill="#2dd4bf"/>
                  <path d="M7 7l4 10M17 7l-4 10" strokeLinecap="round"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div className="ring r1">
          <div className="sat">
            <div className="rings" aria-hidden="true" />
            <div className="moon" aria-hidden="true" />
            <div className="planet" aria-label="TikTok">
              {/* TikTok note */}
              <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                <path fill="#25F4EE" d="M17 2.5v3.3a5 5 0 0 0 4 4.9v3.2a8.2 8.2 0 0 1-4-1.1V17a6 6 0 1 1-6-6c.3 0 .7 0 1 .1v3.3a2.7 2.7 0 1 0 1.9 2.6V2.5z"/>
                <path fill="#FE2C55" d="M18 3.5v3.3a5 5 0 0 0 4 4.9V15a8.2 8.2 0 0 1-4-1.1V18a6 6 0 1 1-6-6c.3 0 .7 0 1 .1v3.3a2.7 2.7 0 1 0 1.9 2.6V3.5z"/>
                <path fill="#fff" d="M17.5 3v3.3a5 5 0 0 0 4 4.9v3.2a8.2 8.2 0 0 1-4-1.1v4.2a6 6 0 1 1-6-6c.3 0 .7 0 1 .1v3.3a2.7 2.7 0 1 0 1.9 2.6V3z"/>
              </svg>
            </div>
          </div>
        </div>
      </div>

      {/* Reticle */}
      <div className="reticle">
        <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="0.5">
          <circle cx="50" cy="50" r="48" strokeDasharray="2 3" />
          <circle cx="50" cy="50" r="30" />
          <circle cx="50" cy="50" r="2" fill="currentColor" />
          <path d="M50 0v18M50 82v18M0 50h18M82 50h18" strokeWidth="0.8" />
          <path d="M50 35v30M35 50h30" strokeWidth="0.3" />
        </svg>
      </div>

      {/* Crosshair tickmarks */}
      <div className="cross tl">N 29.7490°</div>
      <div className="cross br">W 95.4623°</div>

      {/* Live readout */}
      <div className="readout" style={{ top: '140px', right: '48px' }}>
        <span className="dot-live" />Systems online · Houston · 24/7
      </div>
    </div>
  );
}

Object.assign(window, { BrandBar, Header, Footer, CustomCursor, Orb });