import b2inLogo from "../assets/b2in-logo-negative.svg";

const Footer = () => {
  return (
    <footer className="section-dark section-padding">
      <div className="container-padding">
        {/* Main Content */}
        <div className="text-center spacing-section">
          <div className="spacing-section">
            <div className="flex items-center justify-center">
              <img src={b2inLogo} alt="B2in Logo" className="h-12 w-auto" />
            </div>

            <div className="container-narrow spacing-content">
              <h2 className="text-section-title text-[hsl(var(--dark-text))] leading-tight">
                We're committed to your <span className="text-secondary">comfort</span> and <br />
                <span className="text-secondary">satisfaction</span> for <br />
                unforgettable experiences
              </h2>

              <p className="text-large text-dark-muted leading-relaxed max-w-2xl mx-auto">
                Our dedicated team works around the clock to ensure every aspect of your stay
                exceeds expectations. From booking to checkout, we're here for you.
              </p>
            </div>

            <button className="btn-accent">
              Start Your Journey
            </button>
          </div>

          {/* Links */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-left max-w-4xl mx-auto">
            <div className="spacing-small">
              <h4 className="font-medium text-[hsl(var(--dark-text))]">Company</h4>
              <div className="spacing-small text-dark-muted text-sm">
                <a href="#" className="block hover:text-secondary transition-colors">About Us</a>
                <a href="#" className="block hover:text-secondary transition-colors">Careers</a>
                <a href="#" className="block hover:text-secondary transition-colors">Press</a>
                <a href="#" className="block hover:text-secondary transition-colors">Blog</a>
              </div>
            </div>

            <div className="spacing-small">
              <h4 className="font-medium text-[hsl(var(--dark-text))]">Services</h4>
              <div className="spacing-small text-dark-muted text-sm">
                <a href="#" className="block hover:text-secondary transition-colors">Hotels</a>
                <a href="#" className="block hover:text-secondary transition-colors">Apartments</a>
                <a href="#" className="block hover:text-secondary transition-colors">Resorts</a>
                <a href="#" className="block hover:text-secondary transition-colors">Villas</a>
              </div>
            </div>

            <div className="spacing-small">
              <h4 className="font-medium text-[hsl(var(--dark-text))]">Support</h4>
              <div className="spacing-small text-dark-muted text-sm">
                <a href="#" className="block hover:text-secondary transition-colors">Help Center</a>
                <a href="#" className="block hover:text-secondary transition-colors">Contact Us</a>
                <a href="#" className="block hover:text-secondary transition-colors">Safety</a>
                <a href="#" className="block hover:text-secondary transition-colors">Cancellation</a>
              </div>
            </div>

            <div className="spacing-small">
              <h4 className="font-medium text-[hsl(var(--dark-text))]">Legal</h4>
              <div className="spacing-small text-dark-muted text-sm">
                <a href="#" className="block hover:text-secondary transition-colors">Privacy Policy</a>
                <a href="#" className="block hover:text-secondary transition-colors">Terms of Service</a>
                <a href="#" className="block hover:text-secondary transition-colors">Cookie Policy</a>
                <a href="#" className="block hover:text-secondary transition-colors">Sitemap</a>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-[hsl(var(--dark-muted))]/30 mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center spacing-small md:space-y-0">
            <div className="text-dark-muted text-sm">
              © 2024 B2in. All rights reserved.
            </div>
            <div className="flex items-center space-x-6 text-dark-muted text-sm">
              <a href="#" className="hover:text-secondary transition-colors">English</a>
              <a href="#" className="hover:text-secondary transition-colors">EUR €</a>
              <div className="flex space-x-4">
                <a href="#" className="hover:text-secondary transition-colors">Facebook</a>
                <a href="#" className="hover:text-secondary transition-colors">Instagram</a>
                <a href="#" className="hover:text-secondary transition-colors">Twitter</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
