// Shared nav + footer for secondary pages. Matches index homepage.

const { useState, useEffect, useRef } = React;

/* ============ Shared Supabase tool_library fetcher ============
 * Both the homepage and /tools use this so new deployed tools show up
 * on every page automatically. Pass the hardcoded seed as the fallback
 * so the UI never blanks out if Supabase is unreachable.
 */
window.SB_URL = window.SB_URL || 'https://fdnbotpgodpcgqtojnrm.supabase.co';
window.SB_KEY = window.SB_KEY || 'sb_publishable_EXP_ArZJG1-dDSY240-ZdQ_91x4KdbQ';

window.useToolLibrarySupabase = function useToolLibrarySupabase(fallback, mapRow) {
  const [tools, setTools] = useState(fallback || []);
  useEffect(() => {
    let cancelled = false;
    fetch(window.SB_URL + '/rest/v1/tool_library?select=*&visible=eq.true&order=sort_order.asc', {
      headers: { apikey: window.SB_KEY, Authorization: 'Bearer ' + window.SB_KEY },
      cache: 'no-store',
    })
      .then(r => r.ok ? r.json() : null)
      .then(rows => {
        if (cancelled || !Array.isArray(rows) || rows.length === 0) return;
        setTools(rows.map(mapRow));
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);
  return tools;
};

function MobileMenu({ open, onClose, current }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const links = [
    { href: 'index.html', label: 'Home', key: 'home' },
    { href: 'tools.html', label: 'Tools', key: 'tools' },
    { href: 'blog.html', label: 'Blog', key: 'blog' },
    { href: 'affiliates.html', label: 'Affiliates', key: 'affiliates' },
    { href: 'about.html', label: 'About', key: 'about' },
  ];
  return (
    <div className={`mobile-menu ${open ? 'is-open' : ''}`} aria-hidden={!open}>
      <div className="mobile-menu-backdrop" onClick={onClose} />
      <aside className="mobile-menu-panel" role="dialog" aria-label="Menu">
        <div className="mobile-menu-head">
          <div className="nav-logo">
            <span className="nav-logo-dot" />
            <span>Aleko</span>
          </div>
          <button className="mobile-menu-close" aria-label="Close menu" onClick={onClose}>×</button>
        </div>
        <nav className="mobile-menu-links">
          {links.map(l => (
            <a
              key={l.key}
              href={l.href}
              className={current === l.key ? 'active' : ''}
              onClick={onClose}
            >
              {l.label}
            </a>
          ))}
        </nav>
        <a href="community.html#suggest" className="mobile-menu-cta" onClick={onClose}>
          Suggest A Tool →
        </a>
      </aside>
    </div>
  );
}
window.MobileMenu = MobileMenu;

function SharedNav({ current }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 50);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  return (
    <>
      <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
        <div className="container nav-inner">
          <button
            className="nav-burger"
            aria-label="Open menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span /><span /><span />
          </button>
          <a href="index.html" className="nav-logo">
            <span className="nav-logo-dot" />
            <span>Aleko</span>
          </a>
          <div className="nav-links">
            <a href="index.html" className={current === 'home' ? 'active' : ''}>Home</a>
            <a href="tools.html" className={current === 'tools' ? 'active' : ''}>Tools</a>
            <a href="blog.html" className={current === 'blog' ? 'active' : ''}>Blog</a>
            <a href="affiliates.html" className={current === 'affiliates' ? 'active' : ''}>Affiliates</a>
          </div>
          <a href="community.html#suggest" className="nav-cta">Suggest A Tool →</a>
        </div>
      </nav>
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} current={current} />
    </>
  );
}

function SharedFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-col footer-brand-col">
            <div className="footer-brand">
              <span className="nav-logo-dot" />
              <span>Aleko</span>
            </div>
            <p className="footer-tagline">
              Small, sharp AI tools. Shipped solo, from my bedroom.
            </p>
          </div>
          <div className="footer-col">
            <h4>Products</h4>
            <ul>
              <li><a href="tools.html">All Tools</a></li>
              <li><a href="community.html#suggest">Suggest A Tool</a></li>
              <li><a href="index.html#building">In Progress</a></li>
              <li><a href="changelog.html">Changelog</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>More</h4>
            <ul>
              <li><a href="blog.html">Writing</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="community.html">Community</a></li>
              <li><a href="affiliates.html">Affiliates</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="#">Twitter / X</a></li>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Email</a></li>
              <li><a href="#">RSS</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Aleko. Built From My Bedroom.</span>
          <span className="footer-uptime"><span className="pulse-green" /> Uptime: 99.98%</span>
        </div>
      </div>
    </footer>
  );
}

/* Reveal — lightweight copy matching homepage */
function Reveal({ children, delay = 0, className = '', style = {}, as: Tag = 'div' }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    const reveal = () => setTimeout(() => setShown(true), delay);
    if (!el) { reveal(); return; }
    const r = el.getBoundingClientRect();
    // if in or near viewport, reveal immediately
    if (r.top < window.innerHeight + 200) { reveal(); return; }
    // else wait until it scrolls into view
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { reveal(); io.unobserve(el); } });
    }, { threshold: 0.01, rootMargin: '0px 0px 10% 0px' });
    io.observe(el);
    // hard fallback so nothing is ever permanently invisible
    const fb = setTimeout(() => setShown(true), 1200 + delay);
    return () => { io.disconnect(); clearTimeout(fb); };
  }, [delay]);
  return (
    <Tag ref={ref} className={className} style={{
      ...style,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(20px)',
      transition: 'opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)',
    }}>{children}</Tag>
  );
}

/* CardGlow — mouse-following radial glow */
function CardGlow({ children, className, accent, style = {} }) {
  const ref = useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    el.style.setProperty('--my', (e.clientY - r.top) + 'px');
  };
  return (
    <div ref={ref} className={className} onMouseMove={onMove}
      style={{ ...(accent ? { '--accent': accent } : {}), ...style }}>
      {children}
    </div>
  );
}

Object.assign(window, { SharedNav, SharedFooter, Reveal, CardGlow });