// Footer.jsx — Mustard-canvas version. Handles removed. Contact = IG DM only.
function Footer(){
  const year = new Date().getFullYear();
  return (
    <footer style={{borderTop:'1px solid rgba(0,0,0,.15)',background:'#0D0D0D',color:'#F5E6C4',position:'relative',overflow:'hidden'}}>
      <div aria-hidden style={{position:'absolute',zIndex:0,width:'60vw',height:'30vw',left:'20vw',top:'-20vw',borderRadius:'9999px',background:'radial-gradient(circle, rgba(255,193,7,.18) 0%, transparent 70%)',filter:'blur(40px)'}} />

      <div className="container" style={{position:'relative',zIndex:1,paddingTop:64,paddingBottom:48,display:'flex',flexDirection:'column',gap:40}}>

        <div style={{display:'grid',gridTemplateColumns:'minmax(240px, 1fr) 2fr',gap:40,alignItems:'start'}} className="footer-top">
          <div className="flex items-center gap-4">
            <span style={{display:'grid',placeItems:'center',height:56,width:56,borderRadius:9999,overflow:'hidden',border:'2px solid var(--grub-ketchup)',background:'#1B1B1B'}}>
              <img src="../assets/hot dog jasons grub43753142.jpg" alt="Jason's Grub" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}
                onError={(e)=>{ e.currentTarget.replaceWith(Object.assign(document.createElement('span'),{textContent:'🌭',style:'font-size:32px;line-height:1'})); }}
              />
            </span>
            <div>
              <p className="display" style={{fontSize:'1.5rem',letterSpacing:'.06em',lineHeight:1,color:'#FFC107'}}>Jason's Grub</p>
              <p className="meta" style={{marginTop:6,color:'rgba(245,230,196,.7)'}}>Est. over the coals</p>
            </div>
          </div>

          <ul className="footer-socials">
            <li><a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener" aria-label="Instagram" className="fs-ig">
              <svg viewBox="0 0 24 24" style={{height:32,width:32}}>
                <defs>
                  <radialGradient id="ig-grad" cx="30%" cy="107%" r="150%">
                    <stop offset="0%" stopColor="#FDCB5C"/>
                    <stop offset="25%" stopColor="#F55D3B"/>
                    <stop offset="50%" stopColor="#D92D7A"/>
                    <stop offset="75%" stopColor="#8A3AB9"/>
                    <stop offset="100%" stopColor="#4E5CFF"/>
                  </radialGradient>
                </defs>
                <rect x="2" y="2" width="20" height="20" rx="5.5" fill="url(#ig-grad)"/>
                <rect x="2" y="2" width="20" height="20" rx="5.5" fill="none" stroke="rgba(255,255,255,.2)" strokeWidth=".5"/>
                <circle cx="12" cy="12" r="4.2" fill="none" stroke="#fff" strokeWidth="1.8"/>
                <circle cx="17.3" cy="6.7" r="1.1" fill="#fff"/>
              </svg>
            </a></li>
            <li><a href="https://t.me/jasonsgrub" target="_blank" rel="noopener" aria-label="Telegram" className="fs-tg">
              <svg viewBox="0 0 24 24" style={{height:32,width:32}}>
                <circle cx="12" cy="12" r="11" fill="#229ED9"/>
                <path d="M17.3 7.2 15.4 16.3c-.1.7-.6.9-1.2.5l-3.3-2.4-1.6 1.5c-.2.2-.3.3-.7.3l.3-3.6 6.4-5.8c.3-.2 0-.4-.4-.2l-7.9 4.9-3.4-1c-.7-.2-.7-.7.2-1l13.4-5.2c.6-.2 1.1.1.9.9Z" fill="#fff"/>
              </svg>
            </a></li>
            <li><a href="https://www.facebook.com/jasonsgrub56" target="_blank" rel="noopener" aria-label="Facebook" className="fs-fb">
              <svg viewBox="0 0 24 24" style={{height:32,width:32}}>
                <circle cx="12" cy="12" r="11" fill="#1877F2"/>
                <path d="M14.2 22v-7.8h2.6l.4-3h-3V9.3c0-.9.3-1.5 1.5-1.5h1.6V5a21 21 0 0 0-2.3-.1c-2.3 0-3.9 1.4-3.9 4v2.3H8.5v3h2.6V22h3.1Z" fill="#fff"/>
              </svg>
            </a></li>
            <li><a href="https://x.com/jasonsgrub" target="_blank" rel="noopener" aria-label="X" className="fs-xx">
              <svg viewBox="0 0 24 24" style={{height:32,width:32}}>
                <rect width="24" height="24" rx="5.5" fill="#000"/>
                <path d="M17.5 5.5h2.3L14.9 11l5.8 7.5h-4.6L12.5 14l-4.1 4.5H6l5.4-5.9L6 5.5h4.8l3.3 4.2 3.4-4.2Zm-.8 11.3h1.3L9.4 6.8H8l8.7 10Z" fill="#fff"/>
              </svg>
            </a></li>
            <li><a href="https://www.threads.com/@jasonsgrub" target="_blank" rel="noopener" aria-label="Threads" className="fs-th">
              <svg viewBox="0 0 24 24" style={{height:32,width:32}}>
                <rect width="24" height="24" rx="5.5" fill="#000"/>
                <path d="M16.2 11.6c-.1 0-.2-.1-.3-.1-.2-2.6-1.6-4.1-3.9-4.2-1.4 0-2.6.6-3.3 1.7l1.3.8c.5-.8 1.3-1 2-1 1 0 1.8.3 2.2 1 .3.5.5 1.1.6 1.9-.7-.1-1.4-.1-2 0-1.9.1-3.2 1.2-3.1 2.7 0 .7.4 1.4 1 1.8.7.5 1.6.7 2.6.7 1.3-.1 2.4-.6 3.1-1.5.5-.7.9-1.7 1-2.8.5.3.9.8 1.1 1.3.4.8.4 2.1-.7 3.2-1 1-2.1 1.4-3.8 1.4-1.9 0-3.3-.6-4.3-1.8-.9-1.1-1.3-2.6-1.4-4.6 0-2 .5-3.5 1.4-4.6 1-1.2 2.4-1.8 4.3-1.8 1.9 0 3.4.6 4.3 1.9.5.7.8 1.5 1 2.4l1.5-.4c-.3-1.1-.7-2.1-1.3-3C16.8 4.9 15 4.1 12.7 4c-2.4 0-4.3.8-5.6 2.4C6 8 5.4 9.9 5.4 12.1c0 2.2.6 4.1 1.7 5.7 1.3 1.6 3.2 2.4 5.6 2.4 2.1 0 3.6-.6 4.9-1.8 1.6-1.5 1.5-3.4 1-4.6-.4-.9-1-1.7-2.4-2.2Zm-3.5 3.5c-1.1.1-2.2-.4-2.3-1.4 0-.7.5-1.5 2.2-1.6h.5c.6 0 1.1 0 1.6.1-.2 2-1.3 2.8-2 2.9Z" fill="#fff"/>
              </svg>
            </a></li>
          </ul>
        </div>

        <nav className="footer-nav">
          <div>
            <p className="meta" style={{color:'#FFC107',marginBottom:12}}>The Site</p>
            <ul><li><a href="#hero">Home</a></li><li><a href="#feed">The Feed</a></li><li><a href="#grub">The Grub</a></li><li><a href="/delray/">Delray Field Guide</a></li></ul>
          </div>
          <div>
            <p className="meta" style={{color:'#FFC107',marginBottom:12}}>Index</p>
            <ul><li><a href="/sitemap.xml">XML Sitemap</a></li><li><a href="/robots.txt">robots.txt</a></li><li><a href="/llms.txt">llms.txt</a></li></ul>
          </div>
          <div style={{gridColumn:'span 2'}}>
            <p className="meta" style={{color:'#FFC107',marginBottom:12}}>Contact</p>
            <ul><li><a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener">DM me on Instagram →</a></li></ul>
          </div>
        </nav>

        <div className="footer-bottom">
          <p className="meta" style={{opacity:.85}}>© {year} Jason's Grub. Nobody Was Ever Sad Eating A Glizzy</p>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px){ .footer-top{ grid-template-columns:1fr !important; } }

        .footer-socials{
          list-style:none;padding:0;margin:0;
          display:flex; flex-wrap:wrap; gap:16px;
          align-items:center;
        }
        .footer-socials a{
          display:grid; place-items:center;
          height:56px; width:56px; border-radius:14px;
          background: transparent;
          text-decoration:none;
          transition: transform 200ms var(--ease-grub), filter 200ms var(--ease-grub);
        }
        .footer-socials a:hover{ transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }

        .footer-nav{
          display:grid;grid-template-columns:repeat(4, 1fr);gap:32px;
          padding-top: 32px; border-top:1px solid rgba(255,193,7,.1);
        }
        @media (max-width: 700px){ .footer-nav{ grid-template-columns: repeat(2, 1fr); } }
        .footer-nav ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px }
        .footer-nav a{
          color: rgba(245,230,196,.8); text-decoration:none;
          font-family: var(--font-body); font-size:.95rem;
          transition: color 200ms var(--ease-grub);
        }
        .footer-nav a:hover{ color: #FFC107 }

        .footer-bottom{
          display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
          padding-top:24px;border-top:1px solid rgba(255,193,7,.1);
        }
      `}</style>
    </footer>
  );
}
window.Footer = Footer;