/* FOOTER */

function Footer() {
  const isMobile = useWindowWidth() < 768;
  const isSmall = useWindowWidth() < 480;
  const cols = [
    { title: 'Company', links: [
      { label: 'About Us',   href: '/about.html' },
      { label: 'Services',   href: '/services.html' },
      { label: 'Blog',       href: '/blogs.html' },
      { label: 'Contact Us', href: '/contact.html' },
      { label: 'Book a call',href: 'https://calendly.com/ecomlifters/30min' },
    ]},
    { title: 'Services', links: [
      { label: 'Performance Marketing', href: '/services.html#perf' },
      { label: 'Websites & Landing',    href: '/services.html#web' },
      { label: 'CRO & Experimentation', href: '/services.html#cro' },
      { label: 'MVP & Product Design',  href: '/services.html#mvp' },
      { label: 'Pricing',               href: '/services.html#pricing' },
    ]},
    { title: 'Connect', links: [
      { label: 'Email us ↗',    href: 'mailto:ecomlifters@gmail.com' },
      { label: 'WhatsApp ↗',   href: 'https://wa.me/917982069421' },
      { label: 'Book a call ↗', href: 'https://calendly.com/ecomlifters/30min' },
    ]},
  ];

  return (
    <footer data-screen-label="17 Footer" style={{ paddingTop: 56, paddingBottom: 32, borderTop: '1px solid var(--hairline)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1.5fr 1fr 1fr 1.4fr', gap: isMobile ? 24 : 32 }}>
          <div>
            <a href="/" style={{ display: 'inline-block' }}>
              <Wordmark size={22} />
            </a>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)', maxWidth: '30ch', marginTop: 16, lineHeight: 1.55 }}>
              Senior performance marketing squads for DTC brands in India, USA, Canada & UAE.
            </p>

            <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
              <span className="tag" style={{ fontSize: 11 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }}></span>
                <span style={{ fontFamily: 'var(--font-mono)' }}>Now accepting clients</span>
              </span>
              <span className="tag" style={{ fontSize: 11 }}>
                <Icon.Globe size={10} />
                <span style={{ fontFamily: 'var(--font-mono)' }}>14 countries</span>
              </span>
            </div>
          </div>

          {cols.map(c => (
            <div key={c.title}>
              <div className="mono-label" style={{ marginBottom: 14 }}>{c.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {c.links.map(l => (
                  <li key={l.label}><a href={l.href} target={l.href.startsWith('http') ? '_blank' : undefined} rel={l.href.startsWith('http') ? 'noopener noreferrer' : undefined} style={{ fontSize: 14, color: 'var(--ink)' }} className="ulink">{l.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Newsletter row */}
        <div style={{ marginTop: isMobile ? 32 : 56, padding: '20px 24px', background: 'white', border: '1px solid var(--hairline-2)', borderRadius: 14, display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Newsletter</div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 2 }}>Stay ahead with design & marketing tips and strategies that drive results.</div>
          </div>
          <form style={{
            display: 'flex', alignItems: 'center', gap: 6,
            background: 'var(--bg)', borderRadius: 999, border: '1px solid var(--hairline)',
            padding: 4, width: isMobile ? '100%' : 320,
          }} onSubmit={e => {
            e.preventDefault();
            const emailVal = e.currentTarget.querySelector('input').value;
            if (!emailVal) return;
            window.open(`mailto:ecomlifters@gmail.com?subject=${encodeURIComponent('Newsletter: ' + emailVal)}&body=${encodeURIComponent('Please add me to the weekly DTC growth newsletter.\n\nEmail: ' + emailVal)}`, '_blank');
          }}>
            <input
              type="email" placeholder="Enter your email..."
              style={{
                flex: 1, border: 0, outline: 0, background: 'transparent',
                padding: '8px 14px', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--ink)',
              }}
            />
            <button type="submit" style={{
              width: 36, height: 36, borderRadius: '50%',
              background: 'var(--green)', color: 'white',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon.Arrow size={14} />
            </button>
          </form>
        </div>

        {/* Bottom row */}
        <div style={{ marginTop: 32, paddingTop: 18, borderTop: '1px solid var(--hairline)', display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>© 2026 ecomlifters. All rights reserved.</div>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>
            <a href="mailto:ecomlifters@gmail.com" style={{ color: 'var(--muted)' }} className="ulink">ecomlifters@gmail.com</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;