import Link from 'next/link';
import styles from './Footer.module.css';

export default function Footer() {
  return (
    <footer className={styles.footer}>
      <div className={styles.container}>
        <div className={styles.grid}>
          {/* Column 1: Brand & Socials */}
          <div className={styles.brand}>
            <Link href="/" className={styles.logo}>
              <span className={styles.logoLeaf}>🌿</span>
              <span className={styles.logoText}>My Dosa Place</span>
            </Link>
            <p className={styles.brandDesc}>
              Bringing the authentic taste of South India to Waterloo since 1980. 
              Every dosa tells a story of tradition and flavor.
            </p>
            <div className={styles.socials}>
              {/* Real icons */}
              <a href="#" className={styles.socialLink} aria-label="Facebook">
                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
              </a>
              <a href="#" className={styles.socialLink} aria-label="Instagram">
                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><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 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm3.98-10.181a1.44 1.44 0 11-2.88 0 1.44 1.44 0 012.88 0z"/></svg>
              </a>
              <a href="#" className={styles.socialLink} aria-label="Twitter">
                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
              </a>
            </div>
          </div>

          {/* Column 2: Quick Links */}
          <div className={styles.column}>
            <h4 className={styles.columnTitle}>Quick Links</h4>
            <ul className={styles.linkList}>
              <li><Link href="/">Home</Link></li>
              <li><Link href="/about">About Us</Link></li>
              <li><Link href="/menu">Our Menu</Link></li>
              <li><Link href="/services">Services</Link></li>
              <li><Link href="/contact">Contact Us</Link></li>
            </ul>
          </div>

          {/* Column 3: Menu Categories */}
          <div className={styles.column}>
            <h4 className={styles.columnTitle}>Our Menu</h4>
            <ul className={styles.linkList}>
              <li><Link href="#menu">Breakfast</Link></li>
              <li><Link href="#menu">Appetizer’s</Link></li>
              <li><Link href="#menu">Breads</Link></li>
              <li><Link href="#menu">Speciality Dosa</Link></li>
              <li><Link href="#menu">Lunch</Link></li>
              <li><Link href="#menu">Utthappam’s</Link></li>
              <li><Link href="#menu">BEVERAGES</Link></li>
              <li><Link href="#menu">Combos</Link></li>
            </ul>
          </div>

          {/* Column 4: Contact */}
          <div className={styles.column}>
            <h4 className={styles.columnTitle}>Contact Info</h4>
            
            <div className={styles.contactItem}>
              <h5 className={styles.contactLabel}>Address</h5>
              <p className={styles.contactText}>
                #922 ERB STREET WEST<br />
                ON N2T OC3<br />
                WATERLOO
              </p>
            </div>
            
            <div className={styles.contactItem}>
              <h5 className={styles.contactLabel}>Reservations</h5>
              <p className={styles.contactText}>
                Phone: +1 (519) 888-7459<br />
                Email: mydosaplacewaterloo@gmail.com
              </p>
            </div>
            
            <div className={styles.contactItem}>
              <h5 className={styles.contactLabel}>Opening hours</h5>
              <p className={styles.contactText}>
                Mon - Thu: 4pm-10pm<br />
                Fri - Sun: 11am-10pm
              </p>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className={styles.bottomBar}>
          <p className={styles.copyright}>
            Copyright 2026 © My Dosa Restruant. Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" className={styles.poweredLink}>MetatronCube</a>. All Right Reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}