// Shared layout: Nav + Footer
function Nav({ active }) {
  const links = [
    { id: 'creators', label: 'For Creators', href: 'creators.html' },
    { id: 'salaried', label: 'For Salaried', href: 'salaried.html' },
    { id: 'business', label: 'For Business', href: 'business.html' },
    { id: 'pricing', label: 'Pricing', href: 'pricing.html' },
    { id: 'about', label: 'About', href: 'about.html' },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="brand" aria-label="FinControllers home">
          <img src="assets/png/logo-wordmark-light-2x.png" alt="FinControllers" height="32" style={{ height: 32, width: 'auto', display: 'block' }} />
        </a>
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.id} href={l.href} className={`nav-link ${active === l.id ? 'active' : ''}`}>
              {l.label}
            </a>
          ))}
        </div>
        <a href="contact.html" className="nav-cta">
          Book a call
          <span style={{ fontSize: 16 }}>→</span>
        </a>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col">
            <a href="creators.html" className="brand" style={{ marginBottom: 16, display: 'inline-block' }} aria-label="FinControllers">
              <img src="assets/png/logo-wordmark-light-2x.png" alt="FinControllers" height="28" style={{ height: 28, width: 'auto', display: 'block' }} />
            </a>
            <p className="muted" style={{ fontSize: 14, marginTop: 12, maxWidth: 320 }}>
              Autonomous tax operators for Indian creators. Recovery, compliance, and strategy in one stack.
            </p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="agents.html">Solutions</a></li>
              <li><a href="calculator.html">Recovery calculator</a></li>
              <li><a href="pricing.html">Pricing</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Resources</h4>
            <ul>
              <li><a href="resources.html">Playbooks</a></li>
              <li><a href="resources.html">Cheatsheets</a></li>
              <li><a href="resources.html">Calculators</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html?audience=creator">Book a call</a></li>
              <li><a href="mailto:fincontrollers@gmail.com">fincontrollers@gmail.com</a></li>
              <li><a href="tel:+918383958755">+91 83839 58755</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-wordmark">FinControllers</div>
        <div className="footer-bottom">
          <span>© 2026 FinControllers Pvt Ltd. Mumbai, India.</span>
          <span>Built for creators who'd rather create.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer });