import React from 'react';
import './Footer.css';

const Footer = () => {
  return (
    <footer className="footer">
      <div className="footer-container">
        <div className="footer-section">
          <img src="/wraffle_logo.png" alt="Wraffle" className="footer-logo" />
          <p>Made to Fit Your Vibe.</p>
        </div>

        <div className="footer-section">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/shop">Shop</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>

        <div className="footer-section">
          <h3>Customer Service</h3>
          <ul>
            <li><a href="/orders">My Orders</a></li>
            <li><a href="/contact">Support</a></li>
            <li><a href="/contact">FAQ</a></li>
          </ul>
        </div>

        <div className="footer-section">
          <h3>Contact Info</h3>
          <p>Email: info@wraffle.com</p>
          <p>Phone: (555) 123-4567</p>
          <p>Address: 123 Food St, City, State 12345</p>
        </div>
      </div>

      <div className="footer-bottom">
        <p>&copy; 2024 Wraffle. All rights reserved.</p>
      </div>
    </footer>
  );
};

export default Footer;
