"use client";

import Link from 'next/link';

export default function Footer() {
    return (
        <footer>
            <div className="footer-top">
                {/* Brand */}
                <div>
                    <div className="footer-logo-wrap">
                        <img 
                            src="/assets/vg-fence.png" 
                            alt="VG Fence Products"
                            style={{ height: '40px', width: 'auto'}}
                        />
                    </div>
                    <div className="footer-tagline">Ontario's B2B fence supply partner — KWC & beyond</div>
                    <div className="footer-territory">
                        <span style={{ fontSize: '14px', filter: 'hue-rotate(320deg)' }}>📍</span> 
                        Serving 250km from Kitchener–Waterloo
                    </div>

                    <div className="footer-contact">
                        <a href="mailto:info@vgfenceproducts.com">info@vgfenceproducts.com</a>
                        <a href="#" target="_blank" rel="noopener noreferrer">vgfence.com</a>
                        <Link href="/contact">Contact us</Link>
                        <p style={{ color: ' #ffffff80', fontSize: '14px' }}>125 Earl Thompson Rd,<br></br>
                         Ayr, ON, Canada,<br></br> N0B 1E0.</p>
                    </div>
                </div>

                {/* Products */}
                <div>
                    <div className="footer-col-title">Products</div>
                    <ul className="footer-links">
                        <li><Link href="#">Aluminum railing</Link></li>
                        <li><Link href="/products/chain-link-fence">Chain link fence</Link></li>
                        <li><Link href="#">Composite fences</Link></li>
                        <li><Link href="#">Expert Stain &amp; Seal</Link></li>
                        <li><Link href="#">Fence armor</Link></li>
                        <li><Link href="/products/glass-railing">Glass railing</Link></li>
                        <li><Link href="/products/ornamental-fence">Ornamental fence</Link></li>
                        <li><Link href="/temporary-fencing">Temp fence rental</Link></li>
                    </ul>
                </div>

                {/* Services + Cities */}
                <div>
                    <div className="footer-col-title">Services</div>
                    <ul className="footer-links">
                        <li><Link href="/2d-fence-drawing-services">2D drawing services</Link></li>
                        <li><Link href="/wood-staining-services">Wood staining</Link></li>
                        <li><Link href="/temporary-fence-rental">Temporary fence rental</Link></li>
                        <li><Link href="/contact">Job site delivery</Link></li>
                        <li><Link href="/login">Contractor accounts</Link></li>
                    </ul>
                    <div className="footer-col-title" style={{ marginTop: '18px' }}>We serve</div>
                    <ul className="footer-links">
                        <li><Link href="#">Kitchener · Waterloo</Link></li>
                        <li><Link href="#">Cambridge · Guelph</Link></li>
                        <li><Link href="#">Hamilton · Brantford</Link></li>
                        <li><Link href="#">London · Toronto</Link></li>
                        <li><Link href="#">Windsor · Niagara</Link></li>
                    </ul>
                </div>

                {/* Legal column */}
                <div>
                    <div className="footer-col-title">Legal &amp; info</div>
                    <ul className="footer-links">
                        <li><Link href="#">Terms &amp; Conditions</Link></li>
                        <li><Link href="#">Privacy Policy</Link></li>
                        <li><Link href="/contact">Contact Us</Link></li>
                        <li><Link href="/login">Contractor Login</Link></li>
                        <li><Link href="/services">All Products &amp; Services</Link></li>
                    </ul>
                    <div className="footer-col-title" style={{ marginTop: '18px' }}>Hours</div>
                    <ul className="footer-links" style={{ gap: '4px' }}>
                        <li style={{ fontSize: '12px', color: 'rgba(255,255,255,.4)' }}>Mon–Fri: 8:00am – 5:00pm</li>
                        <li style={{ fontSize: '12px', color: 'rgba(255,255,255,.4)' }}>Saturday: 9:00am – 2:00pm</li>
                        <li style={{ fontSize: '12px', color: 'rgba(255,255,255,.4)' }}>Sunday &amp; holidays: Closed</li>
                    </ul>
                </div>
            </div>

            <div className="footer-bottom">
                <span>© {new Date().getFullYear()} VG Fence Products. All rights reserved. · Kitchener, Ontario, Canada</span>
                <div className="footer-legal-links">
                    <Link href="#">Terms &amp; Conditions</Link>
                    <Link href="#">Privacy Policy</Link>
                    <span>vgfence.com</span>
                </div>
            </div>
        </footer>
    );
}
