import Link from "next/link";
import { CATEGORIES, slugifyCategory } from "./categories";

export default function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src="/icons/logo.png" alt="Shifted Offroad" style={{height:54, width:"auto", display:"block", marginBottom:10}} decoding="async" loading="lazy" />
          <div style={{opacity:0.9, fontSize:13, lineHeight:1.65}}>
            Shifted Offroad (Kelowna, BC) is an offroad parts and accessories
            company built around real fitment, honest advice, and clean installs.
            We focus on parts that work as advertised, pair well with common
            builds, and hold up to the conditions that actually get trucks and
            SUVs used the way they should be.
          </div>
          <div style={{opacity:0.9, fontSize:13, lineHeight:1.65, marginTop:10}}>
            Our catalog blends trail-ready essentials with smart upgrades that
            improve capability without compromising daily drivability. Whether
            you are dialing in stance, lighting, recovery, or cargo utility, we
            help you choose components that fit your vehicle and your goals.
          </div>
          <div style={{opacity:0.9, fontSize:13, lineHeight:1.65, marginTop:10}}>
            We are easy to reach, fast to respond, and focused on getting it
            right the first time. The goal is a simple, confident purchase and a
            setup you are proud to run.
          </div>
        </div>

        <div className="footer__col footer__col--categories">
          <h4>Categories</h4>
          {CATEGORIES.map((c) => (
            <Link key={c} href={`/category/${slugifyCategory(c)}`}>{c}</Link>
          ))}
        </div>

        <div className="footer__col footer__col--support">
          <h4>Support</h4>
          <Link href="/contact">Contact</Link>
          <Link href="/legal/faq">FAQ</Link>
          <Link href="/legal/warranty">Warranty</Link>
        </div>

        <div className="footer__col footer__col--legal">
          <h4>Legal</h4>
          <Link href="/legal/privacy-policy">Privacy Policy</Link>
          <Link href="/legal/terms-of-service">Terms of Service</Link>
          <Link href="/legal/refund-policy">Refund Policy</Link>
          <Link href="/legal/cookies">Cookies</Link>
        </div>
      </div>

      <div className="footer__payments">
        <div className="container footer__payments-inner">
          <div>Secure checkout powered by trusted processors.</div>
          <div className="footer__payment-logos">
            <img src="/assets/payments/visa.svg" alt="Visa" loading="lazy" decoding="async" />
            <img src="/assets/payments/visa-alt.svg" alt="Visa" loading="lazy" decoding="async" />
            <img src="/assets/payments/stripe.svg" alt="Stripe" loading="lazy" decoding="async" />
            <img src="/assets/payments/paypal.svg" alt="PayPal" loading="lazy" decoding="async" />
          </div>
        </div>
      </div>
    </footer>
  );
}