// ZIADFILMING — Footer
const footerStyles = {
  wrap: { background: '#000', borderTop: '1px solid #18181b', padding: '96px 0' },
  inner: { maxWidth: 1440, margin: '0 auto', padding: '0 48px',
           display: 'flex', flexDirection: 'row', justifyContent: 'space-between',
           alignItems: 'flex-start', gap: 48, flexWrap: 'wrap' },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 42,
        textTransform: 'uppercase', letterSpacing: '-0.025em', color: '#fff', margin: '0 0 24px' },
  blurb: { color: '#a1a1aa', maxWidth: 360, marginBottom: 32, fontSize: 15, lineHeight: 1.7 },
  socials: { display: 'flex', gap: 24 },
  ic: { color: '#a1a1aa', cursor: 'pointer', transition: 'color 200ms' },
  right: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 16, maxWidth: '100%' },
  avail: { color: '#71717a', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em' },
  email: { color: '#fff', fontSize: 18, fontWeight: 500, overflowWrap: 'anywhere', maxWidth: '100%', textDecoration: 'none' },
  copy: { color: '#52525b', fontSize: 11, marginTop: 32 },
};

function Footer() {
  return (
    <footer style={footerStyles.wrap} className="zf-footer-wrap">
      <div style={footerStyles.inner} className="zf-footer-inner">
        <div>
          <h2 style={footerStyles.h2} className="zf-footer-h2">{window.SITE.name}</h2>
          <p style={footerStyles.blurb}>Filmmaker based in Doha, Qatar. Commercial films, independent stories, and considered visuals.</p>
          <div style={footerStyles.socials}>
            <a href={window.SITE.instagramUrl} target="_blank" rel="noopener noreferrer" style={footerStyles.ic} aria-label="Instagram">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="18" cy="6" r="1"/></svg>
            </a>
            <a href={window.SITE.whatsappUrl} target="_blank" rel="noopener noreferrer" style={footerStyles.ic} aria-label="WhatsApp">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
            </a>
          </div>
        </div>
        <div style={footerStyles.right} className="zf-footer-right">
          <p style={footerStyles.avail}>Available for projects worldwide</p>
          <a href={'mailto:' + window.SITE.email} style={footerStyles.email}>{window.SITE.email}</a>
          <p style={footerStyles.copy}>© {new Date().getFullYear()} Ziad Haissam. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;