/* ============================================================
   Footer
   ============================================================ */
function footerGo(e, href) {
  // Full-path links (e.g. /samples) navigate normally; only hash links smooth-scroll.
  if (!href.startsWith('#')) return;
  e.preventDefault();
  const el = document.querySelector(href);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
}

function Footer() {
  const links = [
    { label: 'About', href: '#about' },
    { label: 'Services', href: '#services' },
    { label: 'Products', href: '#products' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Samples', href: '/samples' },
    { label: 'Contact', href: '#contact' },
  ];
  return (
    <footer style={{ borderTop: '1px solid rgba(255,255,255,0.08)', padding: '54px 0 40px', position: 'relative' }}>
      <div className="mx-auto px-5 sm:px-8" style={{ maxWidth: '1180px' }}>
        <div className="footer-top" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
          <div style={{ maxWidth: '340px' }}>
            <img src="assets/tayhami-logo-trans.png" alt="Tayhami Labs Private Limited" style={{ height: '52px', width: 'auto', marginBottom: '16px' }} />
            <p style={{ fontSize: '0.94rem', lineHeight: 1.6, color: 'rgba(236,234,242,0.6)', margin: 0 }}>
              Websites, AI bots, WhatsApp automation, CRM workflows and custom digital systems for growing businesses.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 'clamp(40px,8vw,90px)', flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: '0.78rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(236,234,242,0.45)', marginBottom: '16px' }}>Explore</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '11px' }}>
                {links.map((l) => (
                  <a key={l.href} href={l.href} onClick={(e) => footerGo(e, l.href)} className="footer-link" style={{ fontSize: '0.95rem', color: 'rgba(236,234,242,0.72)', textDecoration: 'none' }}>{l.label}</a>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: '0.78rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(236,234,242,0.45)', marginBottom: '16px' }}>Contact</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '11px' }}>
                <a href={`mailto:${CONTACT_EMAIL}`} className="footer-link" style={{ fontSize: '0.95rem', color: 'rgba(236,234,242,0.72)', textDecoration: 'none' }}>{CONTACT_EMAIL}</a>
                <span style={{ fontSize: '0.95rem', color: 'rgba(236,234,242,0.72)' }}>Tayhami Labs Pvt. Ltd.</span>
              </div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: '40px', paddingTop: '24px', borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', gap: '16px', flexWrap: 'wrap' }}>
          <span style={{ fontSize: '0.85rem', color: 'rgba(236,234,242,0.45)' }}>© {new Date().getFullYear()} Tayhami Labs Private Limited. All rights reserved.</span>
          <span style={{ fontSize: '0.85rem', color: 'rgba(236,234,242,0.45)' }}>Building the future of work.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });