// footer-column.jsx — Enhanced FooterGlow replaces the basic Footer from about-contact.jsx
// Overrides window.Footer so HTML doesn't need changes.

// ─── Inline SVG icons (replaces lucide-react) ────────────────────────────────
const IconMail = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
  </svg>
);
const IconGlobe = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>
  </svg>
);
const IconMapPin = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>
  </svg>
);
const IconArrowRight = () => (
  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
  </svg>
);

// ─── Data ─────────────────────────────────────────────────────────────────────
const FOOTER_COLS = [
  {
    label: 'Systems',
    links: ['Lead capture', 'Client onboarding', 'AI inbox triage', 'Automated reporting', 'CRM pipeline'],
    hrefs: ['#systems', '#systems', '#systems', '#systems', '#systems'],
  },
  {
    label: 'Engagement',
    links: ['Starter automation', 'Business workflow', 'Custom system', 'Free audit →'],
    hrefs: ['#packages', '#packages', '#packages', '#contact'],
  },
  {
    label: 'Process',
    links: ['Audit', 'Map', 'Build', 'Launch', 'Iterate'],
    hrefs: ['#process', '#process', '#process', '#process', '#process'],
  },
];

// ─── FooterGlow component ─────────────────────────────────────────────────────
const FooterGlow = () => (
  <footer style={{
    position: 'relative',
    overflow: 'hidden',
    borderTop: '1px solid color-mix(in oklab, var(--border) 60%, transparent)',
    background: 'linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--accent), transparent 96%) 40%, transparent 100%)',
  }}>
    {/* Glow orb behind */}
    <div style={{
      position: 'absolute',
      top: 0, left: '50%',
      transform: 'translateX(-50%)',
      width: '600px', height: '260px',
      borderRadius: '50%',
      background: 'radial-gradient(ellipse at center, color-mix(in oklab, var(--accent), transparent 82%) 0%, transparent 70%)',
      filter: 'blur(40px)',
      pointerEvents: 'none',
    }} aria-hidden="true" />

    {/* Main grid */}
    <div style={{
      maxWidth: '1200px',
      margin: '0 auto',
      padding: 'var(--space-xl) var(--space-lg)',
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
      gap: 'var(--space-xl)',
      position: 'relative', zIndex: 1,
    }}>

      {/* Brand column */}
      <div style={{ gridColumn: 'span 1' }}>
        <a className="brand-mark" href="#top" style={{ marginBottom: 'var(--space-md)', display: 'inline-flex' }}>
          <span className="brand-glyph">⌬</span>
          <span>Jawwad</span>
        </a>
        <p style={{
          fontSize: '0.8rem',
          color: 'var(--muted)',
          lineHeight: 1.6,
          maxWidth: '200px',
          marginBottom: 'var(--space-md)',
        }}>
          Ready-to-use automation systems. Save hours every week — deployed in 3–7 days.
        </p>
        {/* Contact details */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          {[
            { icon: <IconMail />, text: 'hello@jawwadautomation.org', href: 'mailto:hello@jawwadautomation.org' },
            { icon: <IconGlobe />, text: 'jawwadautomation.org', href: '#top' },
            { icon: <IconMapPin />, text: 'Karachi · GMT+5', href: null },
          ].map(({ icon, text, href }) => (
            <div key={text} style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--muted)', fontSize: '0.78rem' }}>
              <span style={{ flexShrink: 0, opacity: 0.7 }}>{icon}</span>
              {href
                ? <a href={href} style={{ color: 'inherit', textDecoration: 'none', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}
                  >{text}</a>
                : <span>{text}</span>
              }
            </div>
          ))}
        </div>
      </div>

      {/* Link columns */}
      {FOOTER_COLS.map(col => (
        <div key={col.label}>
          <div style={{
            fontSize: '0.72rem',
            fontWeight: 600,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: 'var(--accent)',
            marginBottom: 'var(--space-sm)',
          }}>{col.label}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {col.links.map((link, i) => (
              <a
                key={link}
                href={col.hrefs[i]}
                style={{
                  fontSize: '0.83rem',
                  color: 'var(--muted)',
                  textDecoration: 'none',
                  display: 'flex', alignItems: 'center', gap: '4px',
                  transition: 'color 0.2s, gap 0.2s',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.color = 'var(--text)';
                  e.currentTarget.style.gap = '7px';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.color = 'var(--muted)';
                  e.currentTarget.style.gap = '4px';
                }}
              >
                <span style={{ opacity: 0, fontSize: '0', transition: 'opacity 0.2s, font-size 0.2s' }}
                  ref={el => {
                    if (el) {
                      const parent = el.parentElement;
                      parent.addEventListener('mouseenter', () => { el.style.opacity = '1'; el.style.fontSize = '13px'; });
                      parent.addEventListener('mouseleave', () => { el.style.opacity = '0'; el.style.fontSize = '0'; });
                    }
                  }}
                ><IconArrowRight /></span>
                {link}
              </a>
            ))}
          </div>
        </div>
      ))}
    </div>

    {/* Bottom bar */}
    <div style={{
      borderTop: '1px solid color-mix(in oklab, var(--border) 50%, transparent)',
      maxWidth: '1200px',
      margin: '0 auto',
      padding: 'var(--space-md) var(--space-lg)',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: 'var(--space-sm)',
      position: 'relative', zIndex: 1,
    }}>
      <span style={{ fontSize: '0.78rem', color: 'var(--muted)' }}>
        © 2026 Jawwad Automation · All rights reserved
      </span>
      <span style={{
        fontFamily: 'var(--font-mono, monospace)',
        fontSize: '0.72rem',
        color: 'color-mix(in oklab, var(--accent), var(--muted) 55%)',
        letterSpacing: '0.04em',
      }}>
        Built with the same systems I sell.
      </span>
    </div>
  </footer>
);

// Override the basic Footer from about-contact.jsx
window.Footer = FooterGlow;
window.FooterGlow = FooterGlow;