// Footer — compact, 3-col + bottom bar, darkest navy.
const Footer = () => {
  const mob = useIsMobile();
  const heading = {
    fontSize: 12, fontWeight: 700, color: '#FFFFFF',
    letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 4,
  };
  const link = {
    fontSize: mob ? 13 : 14, color: '#C4BCB0', fontWeight: 400,
    textDecoration: 'none', transition: 'color 150ms',
    display: 'block',
  };
  const enter = e => e.currentTarget.style.color = '#FFFFFF';
  const leave = e => e.currentTarget.style.color = '#C4BCB0';

  const socials = [
    { label: 'LinkedIn', href: 'https://www.linkedin.com/in/andri-rivera-587102404/',
      icon: <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> },
    { label: 'X', href: 'https://x.com/ar_operations',
      icon: <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> },
    { label: 'Instagram', href: 'https://www.instagram.com/ar_operations/',
      icon: <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg> },
  ];

  return (
    <footer
      data-screen-label="08 Footer"
      style={{
        background: '#151D35', color: '#FFFFFF',
        padding: mob ? '56px 20px 0' : '80px 32px 0',
        borderTop: '1px solid rgba(238,232,223,0.08)',
      }}
    >
      <div className="wrap">
        {/* Top oversized mark */}
        <div style={{ paddingBottom: 56, borderBottom: '1px solid rgba(238,232,223,0.08)' }}>
          <div style={{
            fontFamily: 'Clash Display, General Sans, system-ui',
            fontSize: 'clamp(56px, 10vw, 160px)',
            fontWeight: 700, lineHeight: 0.9,
            letterSpacing: '-0.04em',
            color: '#EEE8DF', opacity: 0.95,
            textTransform: 'uppercase',
          }}>
            Andri Rivera
          </div>
          <div style={{
            marginTop: 20, fontSize: 16, color: 'rgba(255,255,255,0.62)',
            maxWidth: 540, lineHeight: 1.55,
          }}>
            I build the systems. You run the business.
          </div>
        </div>

        {mob ? (
          /* Mobile: logo+contact full-width, then nav in 2 cols */
          <div style={{ padding: '36px 0', display: 'flex', flexDirection: 'column', gap: 32 }}>
            {/* Logo + contact */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <svg width="60" height="26" viewBox="100 285 620 270" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <mask id="arCutoutFooter">
                    <rect width="800" height="800" fill="white"/>
                    <line x1="356" y1="424" x2="576" y2="324" stroke="black" strokeWidth="22" strokeLinecap="round"/>
                    <line x1="356" y1="424" x2="624" y2="512" stroke="black" strokeWidth="22" strokeLinecap="round"/>
                    <circle cx="356" cy="424" r="44" fill="black"/>
                    <circle cx="576" cy="324" r="30" fill="black"/>
                    <circle cx="624" cy="512" r="30" fill="black"/>
                  </mask>
                </defs>
                <g mask="url(#arCutoutFooter)">
                  <g transform="translate(200.19,490) scale(0.26,-0.26)">
                    <path d="M201 0H-10L279 670H548L838 0H622L571 124H253ZM363 387 324 293H502L463 387L419 500H406Z" fill="#edeae2"/>
                  </g>
                  <g transform="translate(415.47,490) scale(0.26,-0.26)">
                    <path d="M218 0H30V670H421Q553 670 622.0 617.0Q691 564 691 465Q691 384 647.5 338.0Q604 292 510 280V270Q558 258 581.5 235.0Q605 212 626 168L709 0H492L412 164Q394 202 371.5 215.0Q349 228 295 228H218ZM218 501V368H419Q462 368 478.0 381.0Q494 394 494 435Q494 474 477.5 487.5Q461 501 419 501Z" fill="#C4BCB0"/>
                  </g>
                </g>
              </svg>
              <a href="mailto:contact@andririvera.com" style={link}
                onMouseEnter={enter} onMouseLeave={leave}>
                contact@andririvera.com
              </a>
              <div style={{ display: 'flex', gap: 14, marginTop: 4 }}>
                {socials.map(s => (
                  <a key={s.label} href={s.href} aria-label={s.label}
                    target="_blank" rel="noopener noreferrer"
                    style={{ color: '#C4BCB0', transition: 'color 150ms' }}
                    onMouseEnter={enter} onMouseLeave={leave}>
                    {s.icon}
                  </a>
                ))}
              </div>
            </div>

            {/* Nav: Services full-width, then Site + Connect side-by-side */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={heading}>Services</div>
                {['Back Office Systems', 'Workflow Automation', 'Systems Integration', 'Operations Strategy'].map(s => (
                  <a key={s} href="#services" style={link} onMouseEnter={enter} onMouseLeave={leave}>{s}</a>
                ))}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 20px' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={heading}>Site</div>
                  {[
                    { label: 'How it works', href: '#how-it-works' },
                    { label: 'The work',     href: '#stats' },
                    { label: 'About',        href: '#about' },
                    { label: 'Book a call',  href: '#final-cta' },
                  ].map(item => (
                    <a key={item.label} href={item.href} style={link} onMouseEnter={enter} onMouseLeave={leave}>
                      {item.label}
                    </a>
                  ))}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={heading}>Connect</div>
                  {socials.map(s => (
                    <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
                      style={link} onMouseEnter={enter} onMouseLeave={leave}>{s.label}</a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ) : (
          /* Desktop: 4-column grid */
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
            gap: 48,
            padding: '56px 0',
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <svg width="60" height="26" viewBox="100 285 620 270" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <mask id="arCutoutFooterDt">
                    <rect width="800" height="800" fill="white"/>
                    <line x1="356" y1="424" x2="576" y2="324" stroke="black" strokeWidth="22" strokeLinecap="round"/>
                    <line x1="356" y1="424" x2="624" y2="512" stroke="black" strokeWidth="22" strokeLinecap="round"/>
                    <circle cx="356" cy="424" r="44" fill="black"/>
                    <circle cx="576" cy="324" r="30" fill="black"/>
                    <circle cx="624" cy="512" r="30" fill="black"/>
                  </mask>
                </defs>
                <g mask="url(#arCutoutFooterDt)">
                  <g transform="translate(200.19,490) scale(0.26,-0.26)">
                    <path d="M201 0H-10L279 670H548L838 0H622L571 124H253ZM363 387 324 293H502L463 387L419 500H406Z" fill="#edeae2"/>
                  </g>
                  <g transform="translate(415.47,490) scale(0.26,-0.26)">
                    <path d="M218 0H30V670H421Q553 670 622.0 617.0Q691 564 691 465Q691 384 647.5 338.0Q604 292 510 280V270Q558 258 581.5 235.0Q605 212 626 168L709 0H492L412 164Q394 202 371.5 215.0Q349 228 295 228H218ZM218 501V368H419Q462 368 478.0 381.0Q494 394 494 435Q494 474 477.5 487.5Q461 501 419 501Z" fill="#C4BCB0"/>
                  </g>
                </g>
              </svg>
              <a href="mailto:contact@andririvera.com" style={{ ...link, marginTop: 12 }}
                onMouseEnter={enter} onMouseLeave={leave}>
                contact@andririvera.com
              </a>
              <div style={{ display: 'flex', gap: 14, marginTop: 12 }}>
                {socials.map(s => (
                  <a key={s.label} href={s.href} aria-label={s.label}
                    target="_blank" rel="noopener noreferrer"
                    style={{ color: '#C4BCB0', transition: 'color 150ms' }}
                    onMouseEnter={enter} onMouseLeave={leave}>
                    {s.icon}
                  </a>
                ))}
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={heading}>Services</div>
              {['Back Office Systems', 'Workflow Automation', 'Systems Integration', 'Operations Strategy'].map(s => (
                <a key={s} href="#services" style={link} onMouseEnter={enter} onMouseLeave={leave}>{s}</a>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={heading}>Site</div>
              {[
                { label: 'How it works', href: '#how-it-works' },
                { label: 'The work',     href: '#stats' },
                { label: 'About',        href: '#about' },
                { label: 'Book a call',  href: '#final-cta' },
              ].map(item => (
                <a key={item.label} href={item.href} style={link} onMouseEnter={enter} onMouseLeave={leave}>
                  {item.label}
                </a>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={heading}>Connect</div>
              {socials.map(s => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
                  style={link} onMouseEnter={enter} onMouseLeave={leave}>{s.label}</a>
              ))}
            </div>
          </div>
        )}

        <div style={{
          borderTop: '1px solid rgba(238,232,223,0.08)',
          padding: '24px 0',
          display: 'flex',
          flexDirection: mob ? 'column' : 'row',
          justifyContent: 'space-between',
          alignItems: mob ? 'flex-start' : 'center',
          gap: mob ? 12 : 0,
          fontSize: 13, color: '#C4BCB0',
        }}>
          <span>© 2026 Andri Rivera. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: '#C4BCB0', textDecoration: 'none', transition: 'color 150ms' }}
              onMouseEnter={enter} onMouseLeave={leave}>Privacy</a>
            <a href="#" style={{ color: '#C4BCB0', textDecoration: 'none', transition: 'color 150ms' }}
              onMouseEnter={enter} onMouseLeave={leave}>Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;