/* global React */
const { useState, useEffect, useRef } = React;

// ---------- Shared icon ----------
const ArrowRight = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
  </svg>;


const PhoneIcon = () =>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
    <path d="M3 4c0-.6.4-1 1-1h2l1 3-1.5 1c.7 1.5 1.8 2.6 3.3 3.3l1-1.5 3 1v2c0 .6-.4 1-1 1A10 10 0 0 1 3 4z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
  </svg>;


const MailIcon = () =>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
    <rect x="2" y="3.5" width="12" height="9" stroke="currentColor" strokeWidth="1.3" />
    <path d="M2.5 4l5.5 4 5.5-4" stroke="currentColor" strokeWidth="1.3" />
  </svg>;


// ---------- Top bar ----------
function TopBar() {
  return null;
}

// ---------- Logo ----------
function Logo({ inFooter = false }) {
  return (
    <a href="#/" className="logo-link" onClick={(e) => {e.preventDefault();window.location.hash = '/';}}>
      <img src="assets/kb-logo.jpeg" alt="KB Funding Group" />
    </a>);

}

// ---------- Header ----------
function Header({ route }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {setOpen(false);}, [route]);

  const links = [
  { href: '#/', label: 'Home', match: '/' },
  { href: '#/about', label: 'About Us', match: '/about' },
  { href: '#/partners', label: 'Partners', match: '/partners' }];


  return (
    <header className="header">
      <div className="container">
        <div className="header-inner">
          <Logo />
          <nav className={`nav ${open ? 'open' : ''}`}>
            {links.map((l) =>
            <a
              key={l.href}
              href={l.href}
              className={route === l.match ? 'active' : ''}
              onClick={() => setOpen(false)}>
              {l.label}</a>
            )}
          </nav>
          <div className="header-cta">
            <a href="tel:13478814260" className="header-phone">
              <PhoneIcon /> <span style={{ fontFamily: "-apple-system, sans-serif" }}>(347) 881-4260</span>
            </a>
            <a href="#/apply" className="btn btn-primary">Apply Now</a>
            <button
              className="mobile-toggle"
              aria-label="Open menu"
              onClick={() => setOpen(!open)}>
              ☰</button>
          </div>
        </div>
      </div>
    </header>);

}

// ---------- Footer ----------
function Footer() {
  const go = (path) => (e) => {e.preventDefault();window.location.hash = path;};
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/kb-logo.jpeg" alt="KB Funding Group" style={{ filter: 'none', height: 64, background: 'white', padding: 8 }} />
            <p className="desc">
              KB Funding Group connects ambitious small and mid-sized businesses with
              the capital they need to grow. Direct decisions, transparent terms,
              and an advisor in your corner from day one.
            </p>
          </div>
          <div className="footer-col">
            <h4>Funding</h4>
            <ul>
              <li><a href="#/solutions" onClick={go('/solutions')}>Working Capital</a></li>
              <li><a href="#/solutions" onClick={go('/solutions')}>Term Loans</a></li>
              <li><a href="#/solutions" onClick={go('/solutions')}>Lines of Credit</a></li>
              <li><a href="#/solutions" onClick={go('/solutions')}>Equipment Financing</a></li>
              <li><a href="#/solutions" onClick={go('/solutions')}>SBA Loans</a></li>
              <li><a href="#/solutions" onClick={go('/solutions')}>Invoice Factoring</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#/about" onClick={go('/about')}>About Us</a></li>
              <li><a href="#/process" onClick={go('/process')}>Our Process</a></li>
              <li><a href="#/industries" onClick={go('/industries')}>Industries</a></li>
              <li><a href="#/partners" onClick={go('/partners')}>Broker Partners</a></li>
              <li><a href="#/faq" onClick={go('/faq')}>FAQ</a></li>
              <li><a href="#/apply" onClick={go('/apply')}>Apply Now</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:13478814260">(347) 881-4260</a></li>
              <li><a href="mailto:Info@kbfundinggroup.com">Info@kbfundinggroup.com</a></li>
              <li>Mon–Fri · 8a–7p ET</li>
              <li style={{ marginTop: 14, color: 'rgba(255,255,255,0.5)', fontSize: 13 }}>
                7901 4th St N, Ste 300<br />St. Petersburg, FL 33702
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 KB Funding Group, LLC. All rights reserved.</div>
          <div>
            <a href="#/">Privacy</a>
            <a href="#/">Terms</a>
            <a href="#/">Disclosures</a>
          </div>
        </div>
      </div>
    </footer>);

}

// ---------- Reveal hook ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

Object.assign(window, { Header, Footer, TopBar, Logo, ArrowRight, useReveal });