// Nav + Footer

function Nav({ route, setRoute, tweaks }) {
  const items = [
  { id: 'home', label: 'Home' },
  { id: 'products', label: 'Products' },
  { id: 'about', label: 'About' },
  { id: 'contact', label: 'Contact' }];

  const [menuOpen, setMenuOpen] = React.useState(false);
  const go = (id) => {setRoute(id);setMenuOpen(false);};
  // White logo for dark palette mode, blue for light/cream
  const variant = tweaks?.palette === 'midnight' ? 'white' : 'blue';
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo" onClick={(e) => {e.preventDefault();go('home');}} aria-label="Myfab home">
          <Logo height={32} variant={variant} />
        </a>
        <div className="nav-links">
          {items.map((it) =>
          <a
            key={it.id}
            href={`#${it.id}`}
            className={`nav-link ${route === it.id ? 'active' : ''}`}
            onClick={(e) => {e.preventDefault();go(it.id);}}>
            
              {it.label}
            </a>
          )}
        </div>
        <div className="nav-cta">
          <a
            href="#contact"
            className="btn btn-primary nav-quote"
            onClick={(e) => {e.preventDefault();go('contact');}}>
            
            Request a quote
            <span className="btn-arrow">→</span>
          </a>
          <button
            className="nav-burger"
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}>
            
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      {/* Mobile menu drawer */}
      <div className={`nav-mobile-menu ${menuOpen ? 'open' : ''}`}>
        <div className="container" style={{ padding: '24px var(--page-pad) 32px' }}>
          {items.map((it) =>
          <a
            key={it.id}
            href={`#${it.id}`}
            className={`nav-mobile-link ${route === it.id ? 'active' : ''}`}
            onClick={(e) => {e.preventDefault();go(it.id);}}>
            
              {it.label}
              <span style={{ marginLeft: 'auto' }}>→</span>
            </a>
          )}
          <a
            href="#contact"
            className="btn btn-primary"
            style={{ marginTop: 16, width: '100%', justifyContent: 'center' }}
            onClick={(e) => {e.preventDefault();go('contact');}}>
            
            Request a quote <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>
    </nav>);

}

function Footer({ setRoute }) {
  const cc = window.c('contact', {});
  return (
    <footer className="footer">
      <div className="container">
        {/* Big "Built different." line */}
        <div className="footer-top">
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ color: 'rgba(238,234,218,0.6)' }}>Ready to build?</div>
            <h2 style={{ marginTop: 16, color: 'var(--rice)', fontSize: 'clamp(36px, 5.5vw, 96px)' }}>
              Built different.<br />
              <span style={{ color: 'var(--dodger)' }}>Build with myfab.</span>
            </h2>
          </div>
        </div>

        <div className="footer-grid">
          <div>
            <a href="#" className="nav-logo" style={{ color: 'var(--rice)', textDecoration: 'none' }} onClick={(e) => {e.preventDefault();setRoute('home');}} aria-label="Myfab home">
              <Logo height={36} variant="white" />
            </a>
            <p style={{ marginTop: 24, color: 'rgba(238,234,218,0.7)', maxWidth: 320, fontSize: 15 }}>
              Disruptive & sustainable building panel technology.<br />
              100% Karya Anak Bangsa.
            </p>
          </div>

          <div>
            <h4>Products</h4>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('products');}}>Wall panel</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('products');}}>Floor panel</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('products');}}>Panel joint system</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('products');}}>Customization</a>
          </div>

          <div>
            <h4>Company</h4>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('about');}}>About myfab</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('about');}}>Projects</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('about');}}>Sustainability</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('contact');}}>Careers</a>
          </div>

          <div>
            <h4>Contact</h4>
            <a href={`mailto:${cc.email || ''}`}>{cc.email}</a>
            <a href={cc.phone_link || '#'} target="_blank" rel="noopener noreferrer">{cc.phone}</a>
            <a href={cc.whatsapp_link || '#'}>WhatsApp {cc.whatsapp}</a>
            <a href="#" onClick={(e) => {e.preventDefault();setRoute('contact');}}>Contact Us</a>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2025 PT Solusi Multiguna Prima · Built different.</div>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">myfab.id</a>
          </div>
        </div>
      </div>
    </footer>);

}

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