.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-093b08f:#0A0A0A;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */import { Link } from "@tanstack/react-router";
import { CrestLogo } from "./CrestLogo";

function ColHeading({ children }: { children: React.ReactNode }) {
  return (
    <div className="mb-4">
      <div className="label-ui text-[9px]" style={{ color: "var(--gold)" }}>{children}</div>
      <div className="mt-2 rule-gold" style={{ width: 24 }} />
    </div>
  );
}

const linkCls = "block label-ui text-[9px] hover:[color:var(--ivory)] transition-colors";

export function Footer() {
  return (
    <footer className="bg-ink" style={{ background: "#080808" }}>
      {/* Newsletter strip */}
      <div className="border-t" style={{ background: "#0D0D0D", borderColor: "var(--gold)" }}>
        <div className="max-w-[1380px] mx-auto px-6 py-12 grid md:grid-cols-2 gap-8 items-center">
          <div>
            <div className="font-display text-[22px]" style={{ color: "var(--white)" }}>
              Sign up to the Elviora Newsletter
            </div>
            <div className="font-serif-ed text-[14px] mt-1" style={{ color: "var(--ash)" }}>
              Receive updates on new collections and the world of Elviora.
            </div>
          </div>
          <form className="flex" onSubmit={(e) => e.preventDefault()}>
            <input
              type="email"
              placeholder="YOUR EMAIL ADDRESS"
              className="flex-1 label-ui text-[10px] px-5 outline-none"
              style={{ height: 52, background: "#111111", border: "1px solid var(--gold)", color: "var(--ivory)" }}
            />
            <button
              className="label-ui text-[11px] px-8"
              style={{ height: 52, background: "var(--gold)", color: "#080808" }}
            >
              SUBSCRIBE
            </button>
          </form>
        </div>
      </div>

      {/* Main body */}
      <div className="border-t" style={{ borderColor: "var(--border)" }}>
        <div className="max-w-[1380px] mx-auto px-6 py-20 grid md:grid-cols-4 gap-12">
          <div>
            <CrestLogo size={80} color="var(--gold)" showWordmark />
            <p className="font-serif-ed italic text-[14px] mt-5" style={{ color: "var(--ash)" }}>
              Genuine exotic leather goods, curated for New Zealand.
            </p>
            <div className="flex gap-4 mt-5" style={{ color: "var(--ash)" }}>
              {["Instagram", "Pinterest", "Facebook"].map((s) => (
                <a key={s} href="#" aria-label={s} className="hover:[color:var(--gold)] transition-colors">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <rect x="3" y="3" width="18" height="18" rx="0" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" />
                  </svg>
                </a>
              ))}
            </div>
          </div>
          <div>
            <ColHeading>Client Services</ColHeading>
            <div className="space-y-2" style={{ color: "var(--ash)", lineHeight: 2.2 }}>
              <Link to="/contact" className={linkCls}>Contact Us</Link>
              <a href="#" className={linkCls}>Book an Appointment</a>
              <a href="#" className={linkCls}>Shipping</a>
              <a href="#" className={linkCls}>Returns & Exchanges</a>
              <a href="#" className={linkCls}>Order Tracking</a>
              <a href="#" className={linkCls}>FAQ</a>
            </div>
          </div>
          <div>
            <ColHeading>The House of Elviora</ColHeading>
            <div className="space-y-2" style={{ color: "var(--ash)", lineHeight: 2.2 }}>
              <Link to="/our-story" className={linkCls}>Our Story</Link>
              <Link to="/craftsmanship" className={linkCls}>Craftsmanship</Link>
              <Link to="/journal" className={linkCls}>Journal</Link>
              <Link to="/reviews" className={linkCls}>Reviews</Link>
              <a href="#" className={linkCls}>Sustainability</a>
              <a href="#" className={linkCls}>Careers</a>
            </div>
          </div>
          <div>
            <ColHeading>Discover</ColHeading>
            <div className="space-y-2" style={{ color: "var(--ash)", lineHeight: 2.2 }}>
              <Link to="/shop" className={linkCls}>New Arrivals</Link>
              <Link to="/shop" className={linkCls}>Women's Bags</Link>
              <Link to="/shop" className={linkCls}>Crocodile Edit</Link>
              <Link to="/shop" className={linkCls}>Python Edit</Link>
              <Link to="/shop" className={linkCls}>Ostrich Edit</Link>
              <a href="#" className={linkCls}>Gift Guide</a>
            </div>
          </div>
        </div>
      </div>

      {/* Info strip */}
      <div className="border-t" style={{ borderColor: "var(--border)" }}>
        <div className="max-w-[1380px] mx-auto px-6 py-5 grid md:grid-cols-3 gap-4 items-center">
          <div className="label-ui text-[9px]" style={{ color: "var(--ash)" }}>🇳🇿 NEW ZEALAND · ENGLISH (NZD $)</div>
          <div className="label-ui text-[9px] text-center" style={{ color: "var(--ash)" }}>CARE@elviorabags.com · MON–SAT 9AM–7PM NZST</div>
          <div className="flex md:justify-end gap-3 label-ui text-[9px]" style={{ color: "var(--ash)" }}>
            <span>VISA</span><span>MC</span><span>AMEX</span><span>PAYPAL</span><span>APPLE PAY</span>
          </div>
        </div>
      </div>

      {/* Legal */}
      <div className="text-center label-ui text-[8px] py-5" style={{ color: "var(--ash)" }}>
        © 2026 ELVIORA BAGS LTD — ALL RIGHTS RESERVED · PRIVACY POLICY · TERMS & CONDITIONS · COOKIE POLICY · CITES CERTIFICATION
      </div>

      {/* Gucci moment */}
      <div className="border-t" style={{ borderColor: "var(--border)" }}>
        <div style={{ paddingTop: 48, paddingBottom: 32 }}>
          <div
            className="font-display text-center select-none"
            style={{
              fontSize: "clamp(96px, 14vw, 200px)",
              color: "#FAFAF8",
              fontWeight: 300,
              letterSpacing: "0.08em",
              lineHeight: 1,
            }}
          >
            ELVIORA
          </div>
        </div>
      </div>
    </footer>
  );
}/* End custom CSS */