/* ===================================================================
   ROVIA — Footer (route line travels across, terminates at logo)
   =================================================================== */

function Footer() {
  return (
    <footer className="footer" id="contact">
      {/* architectural drafting line spanning the footer, terminating at the logo */}
      <svg className="footer-route" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
        {/* baseline + dimension ticks (drafting style) */}
        <path d="M1440 26 H120" fill="none" stroke="rgba(247,245,241,0.18)" strokeWidth="1.5" />
        <path d="M1440 26 H120" fill="none" stroke="#D99041" strokeWidth="1.5" strokeDasharray="6 10" strokeLinecap="round" style={{ animation: "flow 24s linear infinite" }} opacity="0.85" />
        {/* dimension extension ticks */}
        <path d="M1320 20 v12 M1080 20 v12 M840 20 v12 M600 20 v12 M360 20 v12" stroke="rgba(247,245,241,0.28)" strokeWidth="1" />
        {/* a small course/brick motif riding the line */}
        <rect x="690" y="18" width="60" height="16" fill="none" stroke="rgba(247,245,241,0.3)" strokeWidth="1" />
        <path d="M720 18 v16" stroke="rgba(247,245,241,0.3)" strokeWidth="1" />
      </svg>
      {/* terminus node near the logo — HTML so it stays a perfect circle */}
      <span className="footer-terminus" aria-hidden="true"></span>

      <div className="container footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="logo footer-logo">
              <svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden="true">
                <rect x="5" y="5" width="22" height="22" rx="2" stroke="#F7F5F1" strokeWidth="2" fill="none" />
                <path d="M5 16 H27 M16 5 V27" stroke="#F7F5F1" strokeWidth="1.4" strokeDasharray="1.5 3" />
                <circle cx="16" cy="16" r="2.2" fill="#D99041" />
              </svg>
              <span className="logo-word footer-word">GlobalStaff</span>
            </a>
            <p className="body-sm footer-tag">
              Natural stone installation, facade cladding and architectural stonework across
              Estonia and the Baltics.
            </p>
            <div className="footer-social">
              {["in", "X", "f"].map((s) => (
                <a key={s} href="#" className="footer-soc mono" aria-label={s}>{s}</a>
              ))}
            </div>
          </div>

          <div className="footer-cols">
            <div className="footer-col">
              <span className="footer-col-title mono">Company</span>
              <a href="#about" className="footer-link">About</a>
              <a href="#why" className="footer-link">Why GlobalStaff</a>
              <a href="#process" className="footer-link">How it works</a>
              <a href="#projects" className="footer-link">Projects</a>
            </div>
            <div className="footer-col">
              <span className="footer-col-title mono">Services</span>
              <a href="#services" className="footer-link">Natural Stone</a>
              <a href="#services" className="footer-link">Facade Cladding</a>
              <a href="#services" className="footer-link">Decorative Stonework</a>
              <a href="#solutions" className="footer-link">Stone Solutions</a>
            </div>
            <div className="footer-col">
              <span className="footer-col-title mono">Contact</span>
              <a href="mailto:info@globalstaff.ee" className="footer-link">info@globalstaff.ee</a>
              <a href="tel:+3726000000" className="footer-link">+372 600 0000</a>
              <span className="footer-link muted">Tallinn · Estonia</span>
              <a href="#quote" className="footer-link accent">Request a Quote →</a>
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <span className="caption footer-fine">© 2026 GlobalStaff OÜ. All rights reserved.</span>
          <div className="footer-fine-links">
            <a href="#" className="caption">Privacy</a>
            <a href="#" className="caption">Terms</a>
            <a href="#" className="caption">Imprint</a>
          </div>
          <span className="caption mono footer-coord">TALLINN · EE</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });