import Link from 'next/link';

export default function Footer() {
  return (
    <footer>
      <div className="footer-top">
        <div>
          <div className="footer-brand-name">
            <img src="/vg-fence.png" alt="VG Fence Products" style={{ height: '32px', width: 'auto', marginLeft: '-15px' }} />
          </div>
          <div className="footer-tagline">Ontario's B2B fence supply partner — KWC & beyond</div>
          <div className="footer-territory">📍 Serving 250km radius from Kitchener-Waterloo</div>
          <div className="footer-contact" style={{ marginTop: '16px' }}>
            <a href="mailto:info@vgfenceproducts.com">info@vgfenceproducts.com</a>
            <a href="https://vgfence.com" target="_blank" rel="noopener noreferrer">vgfence.com</a>
          </div>
        </div>
        <div>
          <div className="footer-col-title">Products</div>
          <ul className="footer-links">
            <li><Link href="/products">Aluminum railing</Link></li>
            <li><Link href="/products">Chain link fence</Link></li>
            <li><Link href="/products">Composite fences</Link></li>
            <li><Link href="/products">Expert Stain & Seal</Link></li>
            <li><Link href="/products">Fence armor</Link></li>
            <li><Link href="/products">Glass railing</Link></li>
            <li><Link href="/products">Ornamental fence</Link></li>
            <li><Link href="/products">Temp fence rental</Link></li>
          </ul>
        </div>
        <div>
          <div className="footer-col-title">Services</div>
          <ul className="footer-links">
            <li><Link href="/#services">2D drawing services</Link></li>
            <li><Link href="/#services">Wood staining</Link></li>
            <li><Link href="/#services">Site services</Link></li>
            <li><Link href="/#services">Job site delivery</Link></li>
            <li><Link href="/#services">Contractor accounts</Link></li>
            <li><Link href="/about">About Us</Link></li>
            <li><Link href="/contact">Contact Us</Link></li>
          </ul>
        </div>
        <div>
          <div className="footer-col-title">We serve</div>
          <ul className="footer-links">
            <li><Link href="/#territory">Kitchener · Waterloo</Link></li>
            <li><Link href="/#territory">Cambridge · Guelph</Link></li>
            <li><Link href="/#territory">Hamilton · Brantford</Link></li>
            <li><Link href="/#territory">London · Toronto</Link></li>
            <li><Link href="/#territory">Barrie · Owen Sound</Link></li>
            <li><Link href="/#territory">Niagara Region</Link></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© Copyright {new Date().getFullYear()} VGFence Products Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--orange)', textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved.</span>
      </div>
    </footer>
  );
}
