/* ============================================================
   CAPITALIZE HUB — CORE  (ch-core.jsx)
   Shared icons, navbar, footer, helpers
   ============================================================ */

/* ── Icons ────────────────────────────────────────────────── */
const Icons = {
  logo: () => (
    <svg viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="16" width="6" height="12" rx="1.2" fill="#141221" />
      <rect x="9" y="8"  width="6" height="20" rx="1.2" fill="#141221" />
      <rect x="18" y="0" width="6" height="28" rx="1.2" fill="#4d5bf9" />
    </svg>
  ),
  logoLight: () => (
    <svg viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="16" width="6" height="12" rx="1.2" fill="rgba(240,235,225,.5)" />
      <rect x="9" y="8"  width="6" height="20" rx="1.2" fill="rgba(240,235,225,.5)" />
      <rect x="18" y="0" width="6" height="28" rx="1.2" fill="#4d5bf9" />
    </svg>
  ),
  arrowRight: () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  play: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="#141221"><path d="M8 5.14v14.72a1 1 0 001.5.86l11.04-7.36a1 1 0 000-1.72L9.5 4.28a1 1 0 00-1.5.86z"/></svg>
  ),
  menu: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
  ),
  x: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  ),
  building: () => (
    <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="6" y="18" width="8" height="20" rx="1.5" fill="#141221"/>
      <rect x="18" y="10" width="8" height="28" rx="1.5" fill="#141221"/>
      <rect x="30" y="4" width="8" height="34" rx="1.5" fill="#4d5bf9"/>
    </svg>
  ),
  imoveisIcon: () => (
    <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="6" y="18" width="8" height="20" rx="1.5" fill="#8e8c9a"/>
      <rect x="18" y="10" width="8" height="28" rx="1.5" fill="#8e8c9a"/>
      <rect x="30" y="4" width="8" height="34" rx="1.5" fill="#4d5bf9"/>
    </svg>
  ),
  financasIcon: () => (
    <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="6" y="22" width="8" height="16" rx="1.5" fill="#141221"/>
      <rect x="18" y="14" width="8" height="24" rx="1.5" fill="#141221"/>
      <rect x="30" y="6" width="8" height="32" rx="1.5" fill="#141221"/>
    </svg>
  ),
  dashboard: () => <span style={{fontSize:'1rem'}}>📊</span>,
  users: () => <span style={{fontSize:'1rem'}}>👥</span>,
  wallet: () => <span style={{fontSize:'1rem'}}>💰</span>,
  fileText: () => <span style={{fontSize:'1rem'}}>📄</span>,
  videoIcon: () => <span style={{fontSize:'1rem'}}>🎬</span>,
  settings: () => <span style={{fontSize:'1rem'}}>⚙️</span>,
  chart: () => <span style={{fontSize:'1rem'}}>📈</span>,
};

/* ── Scroll reveal ────────────────────────────────────────── */
function useReveal(threshold = 0.15) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVis(true); obs.unobserve(el); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, vis];
}

function Reveal({ children, delay = 0 }) {
  const [ref, vis] = useReveal();
  return (
    <div ref={ref} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? 'none' : 'translateY(24px)',
      transition: `all .65s cubic-bezier(.4,0,.2,1) ${delay}s`,
    }}>
      {children}
    </div>
  );
}

/* ── Navbar ───────────────────────────────────────────────── */
function Navbar({ currentPage, onNavigate }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const handleNav = (page) => { setMenuOpen(false); onNavigate(page); };

  return (
    <nav className="navbar">
      <div className="navbar-left">
        <a className="navbar-logo" onClick={() => handleNav('landing')}>
          <Icons.logo />
          <span>Capitalize <em>Hub</em></span>
        </a>
        <ul className={`nav-links${menuOpen ? ' open' : ''}`}>
          <li><button onClick={() => handleNav('landing')} style={currentPage === 'landing' ? {color:'var(--text)', fontWeight: 600} : {}}>Início</button></li>
          <li><button onClick={() => handleNav('videos')} style={currentPage === 'videos' ? {color:'var(--text)', fontWeight: 600} : {}}>Conteúdo</button></li>
          <li><button onClick={() => { handleNav('landing'); setTimeout(() => document.getElementById('produtos')?.scrollIntoView({behavior:'smooth'}), 100); }}>Produtos</button></li>
        </ul>
      </div>

      <div className="navbar-right">
        <button className="btn btn-outline btn-sm" onClick={() => handleNav('admin')}>Área admin</button>
        <button className="btn btn-primary btn-sm" onClick={() => handleNav('videos')}>Ver vídeos</button>
        <button className="navbar-mobile-toggle" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
          {menuOpen ? <Icons.x /> : <Icons.menu />}
        </button>
      </div>
    </nav>
  );
}

/* ── Footer ───────────────────────────────────────────────── */
function Footer({ onNavigate }) {
  const [products, setProducts] = React.useState([]);

  React.useEffect(() => {
    fetch('/api/products')
      .then(r => r.json())
      .then(data => setProducts(Array.isArray(data) ? data : []))
      .catch(() => {});
  }, []);

  const getLink = (key) => {
    const found = products.find(p => p.key === key);
    let url = found ? (found.redirect_url || '') : '';
    if (url && !url.match(/^https?:\/\//i)) url = 'https://' + url;
    return url;
  };

  const productItems = [
    { key: 'construcao', label: 'Construção & Obras' },
    { key: 'imoveis', label: 'Imóveis · em breve' },
    { key: 'financas', label: 'Finanças · em breve' },
  ];

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">
              <div style={{ width: 24, height: 28 }}><Icons.logoLight /></div>
              <span>Capitalize <em>Hub</em></span>
            </div>
            <p className="footer-desc">
              Soluções digitais prontas para o mercado da construção, imóveis e finanças.
            </p>
          </div>

          <div>
            <div className="footer-col-title">Produtos</div>
            {productItems.map(p => {
              const link = getLink(p.key);
              return link
                ? <a key={p.key} className="footer-link" href={link} target="_blank" rel="noopener noreferrer">{p.label}</a>
                : <a key={p.key} className="footer-link" href="#produtos">{p.label}</a>;
            })}
          </div>

          <div>
            <div className="footer-col-title">Informações</div>
            <a className="footer-link" href="#">capitalizehub.com.br</a>
            <a className="footer-link" href="#">São Paulo · Brasil</a>
            <a className="footer-link" href="#">© 2026</a>
          </div>
        </div>

        <div className="footer-bottom">
          <span>Capitalize Hub · Todos os direitos reservados</span>
          <span>capitalizehub.com.br</span>
        </div>
      </div>
    </footer>
  );
}
