/* CTA + Footer */

/* ----- Tiny inline icons ----- */
function GtArrow({ className = "" }) {
  return (
    <svg width="22" height="10" viewBox="0 0 22 10" fill="none" className={className}>
      <path d="M0 5 H20 M16 1 L20 5 L16 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function GtCalendar({ className = "" }) {
  return (
    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" strokeWidth="1.4" className={className}>
      <rect x="3" y="5" width="20" height="18" rx="1.5" />
      <path d="M3 10 H23 M8 2 V7 M18 2 V7" />
      <rect x="7" y="14" width="3" height="3" fill="currentColor" stroke="none" />
    </svg>
  );
}
function GtPeople({ className = "" }) {
  return (
    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" strokeWidth="1.4" className={className}>
      <circle cx="9" cy="9" r="3.5" />
      <circle cx="18" cy="10" r="2.8" />
      <path d="M2.5 21 C3.5 16.5 7 14.5 9 14.5 S14.5 16.5 15.5 21" />
      <path d="M16 21 C16.5 18 19 16.5 18 16.5 S21.5 17.5 23 21" />
    </svg>
  );
}
function GtShield({ className = "" }) {
  return (
    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" strokeWidth="1.4" className={className}>
      <path d="M13 2 L22 6 V13 C22 18.5 18 22 13 24 C8 22 4 18.5 4 13 V6 Z" />
    </svg>
  );
}
function GtUpload({ className = "" }) {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5" className={className}>
      <path d="M5 18 V21 C5 22 6 23 7 23 H21 C22 23 23 22 23 21 V18" />
      <path d="M14 17 V5 M9 10 L14 5 L19 10" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function GtClose({ className = "" }) {
  return (
    <svg width="20" height="20" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" className={className}>
      <path d="M4 4 L18 18 M18 4 L4 18" strokeLinecap="round" />
    </svg>
  );
}
function GtLock({ className = "" }) {
  return (
    <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" className={className}>
      <rect x="2.5" y="6" width="9" height="6" rx="1" />
      <path d="M4.5 6 V4 C4.5 2.5 5.5 1.5 7 1.5 S9.5 2.5 9.5 4 V6" />
    </svg>
  );
}
function GtBlueprint({ className = "" }) {
  return (
    <svg viewBox="0 0 320 160" className={className} fill="none" stroke="#B27C4D" strokeWidth="0.8" aria-hidden="true">
      <rect x="10" y="20" width="120" height="120" opacity="0.55" />
      <rect x="40" y="50" width="40" height="60" opacity="0.45" />
      <rect x="140" y="40" width="80" height="100" opacity="0.5" />
      <path d="M150 60 H210 M150 80 H210 M150 100 H210" opacity="0.4" />
      <rect x="230" y="60" width="70" height="80" opacity="0.45" />
      <path d="M240 80 H290 M240 100 H290 M240 120 H290" opacity="0.4" />
      <text x="20" y="14" fontSize="6" letterSpacing="2" fill="#B27C4D" stroke="none" opacity="0.7" fontFamily="Montserrat">FLOOR PLAN · LVL 04</text>
      <text x="148" y="34" fontSize="6" letterSpacing="2" fill="#B27C4D" stroke="none" opacity="0.7" fontFamily="Montserrat">FEC STAIR · LOCATED</text>
      <text x="20" y="155" fontSize="6" letterSpacing="2" fill="#B27C4D" stroke="none" opacity="0.55" fontFamily="Montserrat">FIRE RATED MODE</text>
    </svg>
  );
}

function ContactCTA() {
  const [open, setOpen] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [drag, setDrag] = React.useState(false);
  const [files, setFiles] = React.useState([]);
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", message: "", timeframe: "standard" });
  const [origin, setOrigin] = React.useState({ x: "50%", y: "50%" });
  const [sizeWarn, setSizeWarn] = React.useState(false);
  const btnRef = React.useRef(null);
  const firstFieldRef = React.useRef(null);

  const MAX_BYTES = 25 * 1024 * 1024;

  const totalBytes = files.reduce((n, f) => n + f.size, 0);
  const overLimit = totalBytes > MAX_BYTES;

  const setField = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const openCard = () => {
    if (btnRef.current) {
      const r = btnRef.current.getBoundingClientRect();
      const cx = ((r.left + r.width / 2) / window.innerWidth) * 100;
      const cy = ((r.top + r.height / 2) / window.innerHeight) * 100;
      setOrigin({ x: `${cx}%`, y: `${cy}%` });
    }
    setOpen(true);
  };

  const close = () => setOpen(false);

  const onPick = (e) => {
    const picked = Array.from(e.target.files || []);
    setFiles((prev) => [...prev, ...picked]);
    e.target.value = "";
  };

  const onDrop = (e) => {
    e.preventDefault();
    setDrag(false);
    const dropped = Array.from(e.dataTransfer.files || []);
    setFiles((prev) => [...prev, ...dropped]);
  };

  const removeFile = (i) => setFiles((prev) => prev.filter((_, idx) => idx !== i));

  const submit = (e) => {
    e.preventDefault();
    if (overLimit) { setSizeWarn(true); return; }
    // TODO: wire up email delivery to reza.a@beigman.com.au
    // (e.g. POST FormData to https://formsubmit.co/reza.a@beigman.com.au)
    console.log("Contact submit →", { ...form, files });
    setSent(true);
  };

  // Esc to close + focus first field on open
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") close(); };
    window.addEventListener("keydown", onKey);
    setTimeout(() => firstFieldRef.current && firstFieldRef.current.focus(), 350);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  const fmtSize = (b) => b < 1024 * 1024 ? `${(b / 1024).toFixed(0)} KB` : `${(b / 1024 / 1024).toFixed(1)} MB`;

  return (
    <section
      id="contact"
      data-screen-label="06 Contact"
      className="section-fit relative bg-midnight text-off-white py-24 md:py-32 overflow-hidden"
    >
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-copper to-transparent" />
      <div className="absolute inset-0 tech-grid-dark opacity-40 pointer-events-none" />
      <div className="absolute -top-40 -right-40 w-[520px] h-[520px] rounded-full bg-copper/10 blur-3xl pointer-events-none" />

      <div className="relative max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">
        <div className="contact-fit-grid grid lg:grid-cols-12 gap-12 lg:gap-14 items-center">

          {/* LEFT */}
          <div className="lg:col-span-7">
            <div className="zaj-fade-up font-heading text-[11px] tracking-[0.32em] text-copper">
              GET IN TOUCH
            </div>
            <span className="zaj-rule-grow mt-5 mb-7 copper-rule" style={{ animation: 'none' }} />
            <h2 className="section-fit-title zaj-words font-heading font-bold text-4xl md:text-5xl lg:text-[60px] tracking-[-0.015em] leading-[1.05]">
              Let's build certainty<br/>
              into <span className="text-copper">your next project.</span>
            </h2>
            <p className="section-fit-copy zaj-fade-up mt-7 max-w-[480px] text-[15px] leading-[1.7] text-off-white/70">
              Early conversations lead to better outcomes. Reach out and let's
              discuss how we can add value to your project.
            </p>

            {/* Badges — stagger */}
            <div className="section-fit-secondary zaj-stagger mt-10 grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-[520px]">
              <div className="zaj-fade-up flex items-start gap-4 pl-5 border-l border-off-white/15">
                <span className="text-copper shrink-0 zaj-icon-morph"><GtPeople /></span>
                <div>
                  <div className="font-heading text-[14px] text-off-white">Real conversations</div>
                  <div className="mt-1 text-[12.5px] text-off-white/55">with senior engineers</div>
                </div>
              </div>
              <div className="zaj-fade-up flex items-start gap-4 pl-5 border-l border-off-white/15">
                <span className="text-copper shrink-0 zaj-icon-morph"><GtShield /></span>
                <div>
                  <div className="font-heading text-[14px] text-off-white">Solutions focused</div>
                  <div className="mt-1 text-[12.5px] text-off-white/55">on value and outcomes</div>
                </div>
              </div>
            </div>

            {/* Floating reliability card + circular CTA */}
            <div className="section-fit-secondary zaj-fade-up mt-14 flex items-center gap-8 flex-wrap">
              <div className="gt-float-card zaj-lift zaj-float r-lg border border-copper/30 px-6 py-5 max-w-[300px]">
                <span className="text-copper inline-block mb-3"><GtCalendar /></span>
                <div className="font-heading text-[15px] text-off-white">Responsive and reliable</div>
                <div className="mt-1.5 text-[12.5px] text-off-white/65 leading-[1.6]">
                  We respond quickly and keep your project moving.
                </div>
              </div>

              <button
                ref={btnRef}
                onClick={openCard}
                aria-expanded={open}
                aria-controls="gt-contact-card"
                className="gt-circle-btn m3-fill-btn morph-btn zaj-magnetic relative w-[168px] h-[168px] rounded-full bg-copper text-off-white font-heading font-semibold text-[11px] tracking-[0.28em] outline-none focus-visible:ring-2 focus-visible:ring-off-white/40"
                data-magnetic-strength="0.25"
                style={{ '--fill': '#8E5F38' }}
              >
                <span className="absolute top-[34%] left-1/2 -translate-x-1/2 z-10">
                  <GtArrow className="morph-arrow" />
                </span>
                <span className="absolute bottom-[34%] left-0 right-0 text-center z-10">
                  <span className="morph-label inline-block">
                    <span>GET IN TOUCH</span>
                    <span>GET IN TOUCH</span>
                  </span>
                </span>
              </button>
            </div>

            {/* Direct contact line */}
            <div className="section-fit-secondary mt-12 flex flex-wrap gap-x-10 gap-y-3 text-[15px] text-off-white/65">
              <a href="mailto:reza.a@beigman.com.au" className="hover:text-copper transition-colors">
                <span className="font-heading text-[10px] tracking-[0.28em] text-copper mr-2">DIRECT</span>
                reza.a@beigman.com.au
              </a>
              <a href="tel:+61423054048" className="hover:text-copper transition-colors">
                <span className="font-heading text-[10px] tracking-[0.28em] text-copper mr-2">PHONE</span>
                0423 054 048
              </a>
            </div>
            <div className="section-fit-secondary mt-3 text-[15px] text-off-white/65">
              <span className="font-heading text-[10px] tracking-[0.28em] text-copper mr-2">ADDRESS</span>
              Suite 329/98-100 Elizabeth Street Melbourne, VIC, 3000
            </div>
          </div>

          {/* RIGHT — director portrait with mouse-parallax depth */}
          <div className="zaj-fade-scale zaj-mouse-stage lg:col-span-5" data-mouse-strength="0.02">
            <div className="contact-fit-portrait zaj-zoom-wrap relative r-xl overflow-hidden aspect-[5/6] lg:aspect-[4/5] bg-midnight border border-off-white/10 shadow-[0_40px_80px_-30px_rgba(0,0,0,0.7)]">
              <img
                src="assets/contact-portrait.png"
                alt="Reza Abbassi — Director, Beigman Engineering"
                className="absolute inset-0 w-full h-full object-cover zaj-mouse-px"
                data-mouse-depth="1.2"
                loading="lazy"
                decoding="async"
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
              />
              {/* cinematic vignette */}
              <div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-midnight/70 via-midnight/0 to-midnight/30" />
              <div className="absolute inset-0 pointer-events-none bg-gradient-to-l from-midnight/0 via-transparent to-midnight/40" />
              {/* soft warm glow — also parallax for depth */}
              <div className="zaj-mouse-px absolute -top-20 -right-20 w-72 h-72 rounded-full bg-copper/15 blur-3xl pointer-events-none" data-mouse-depth="0.6" />
            </div>
          </div>
        </div>
      </div>

      {/* === Morph-expanded contact card === */}
      <div
        id="gt-contact-card"
        role="dialog"
        aria-modal="true"
        aria-label="Send us a message"
        className={`gt-card-mask fixed inset-0 z-50 grid place-items-center px-4 ${open ? 'gt-card-mask--open' : 'pointer-events-none'}`}
        style={{ '--ox': origin.x, '--oy': origin.y }}
        onClick={(e) => { if (e.target === e.currentTarget) close(); }}
      >
        <div className="gt-card-inner gt-float-card relative w-[min(440px,94vw)] max-h-[92vh] overflow-y-auto bg-midnight border border-copper/40 r-xl p-7 md:p-8">
          <button
            type="button"
            onClick={close}
            aria-label="Close"
            className="absolute top-4 right-4 w-9 h-9 grid place-items-center text-off-white/60 hover:text-copper transition-colors"
          >
            <GtClose />
          </button>

          <div className="font-heading text-copper text-[14px] tracking-[0.22em]">SEND US A MESSAGE</div>
          <div className="copper-rule mt-3 mb-6" />

          <form onSubmit={submit} className="space-y-4" encType="multipart/form-data">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <input
                ref={firstFieldRef}
                type="text" required placeholder="Your name"
                value={form.name} onChange={setField('name')}
                className="bg-[#13243A] border border-off-white/10 focus:border-copper outline-none px-4 py-3 text-[14px] placeholder:text-off-white/30 r-sm transition-colors"
              />
              <input
                type="email" required placeholder="Email address"
                value={form.email} onChange={setField('email')}
                className="bg-[#13243A] border border-off-white/10 focus:border-copper outline-none px-4 py-3 text-[14px] placeholder:text-off-white/30 r-sm transition-colors"
              />
            </div>
            <input
              type="tel" placeholder="Phone"
              value={form.phone} onChange={setField('phone')}
              className="w-full bg-[#13243A] border border-off-white/10 focus:border-copper outline-none px-4 py-3 text-[14px] placeholder:text-off-white/30 r-sm transition-colors"
            />
            <textarea
              rows="4" placeholder="Tell us about your project"
              value={form.message} onChange={setField('message')}
              className="w-full bg-[#13243A] border border-off-white/10 focus:border-copper outline-none px-4 py-3 text-[14px] placeholder:text-off-white/30 r-sm resize-none transition-colors"
            />

            {/* Time-frame toggle */}
            <div role="radiogroup" aria-label="Time-frame">
              <span className="font-heading text-[10px] tracking-[0.28em] text-copper">TIME-FRAME</span>
              <div className="mt-2 grid grid-cols-2 gap-3">
                {[{ id: 'standard', label: 'Standard' }, { id: 'urgent', label: 'Urgent' }].map((opt) => {
                  const isSel = form.timeframe === opt.id;
                  return (
                    <button
                      key={opt.id}
                      type="button"
                      role="radio"
                      aria-checked={isSel}
                      onClick={() => setForm((f) => ({ ...f, timeframe: opt.id }))}
                      className="border px-4 py-3 r-sm font-heading text-[11px] tracking-[0.22em] uppercase outline-none focus-visible:ring-2 focus-visible:ring-copper transition-colors"
                      style={{
                        backgroundColor: '#13243A',
                        borderColor: isSel ? '#B27C4D' : 'rgba(247,247,247,0.10)',
                        color: isSel ? '#B27C4D' : 'rgba(247,247,247,0.55)',
                      }}
                    >
                      {opt.label}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Drag-and-drop zone */}
            <div
              onDragEnter={(e) => { e.preventDefault(); setDrag(true); }}
              onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
              onDragLeave={() => setDrag(false)}
              onDrop={onDrop}
              className={`gt-dropzone r-md text-center py-7 px-5 border border-dashed ${drag ? 'border-copper bg-copper/10' : 'border-off-white/25 bg-[#0c1828]'}`}
            >
              <span className="text-copper inline-block"><GtUpload /></span>
              <div className="mt-2 font-heading text-[13px] text-off-white">Attach documents</div>
              <div className="text-[11.5px] text-off-white/55 mt-1">Drag and drop files here or</div>
              <label className="mt-3 inline-block px-4 py-1.5 text-[10.5px] tracking-[0.22em] text-copper border border-copper/60 cursor-pointer hover:bg-copper hover:text-off-white transition-colors r-sm">
                BROWSE FILES
                <input type="file" multiple hidden onChange={onPick} accept=".pdf,.dwg,.rvt,.ifc,.jpg,.jpeg,.png" />
              </label>
              <div className="mt-3 text-[10px] text-off-white/40 tracking-wide">
                PDF, DWG, RVT, IFC, JPG, PNG &nbsp;|&nbsp; Max 25MB
              </div>

              {files.length > 0 && (
                <ul className="mt-4 space-y-1.5 text-left">
                  {files.map((f, i) => (
                    <li key={i} className="flex items-center justify-between gap-3 text-[12px] bg-[#13243A] border border-off-white/10 px-3 py-2 r-sm">
                      <span className="truncate text-off-white/80">{f.name}</span>
                      <span className="text-off-white/45 tabular-nums shrink-0">{fmtSize(f.size)}</span>
                      <button type="button" onClick={() => removeFile(i)} className="text-off-white/45 hover:text-copper shrink-0" aria-label="Remove file">
                        <GtClose className="w-3 h-3" />
                      </button>
                    </li>
                  ))}
                </ul>
              )}

              {overLimit && (
                <div className="mt-3 text-[11px] text-copper">Total exceeds 25MB. Remove a file to continue.</div>
              )}
            </div>

            <button
              type="submit"
              disabled={sent || overLimit}
              className="morph-btn m3-fill-btn m3-fill-btn--invert w-full inline-flex items-center justify-center gap-3 py-4 bg-copper disabled:opacity-70 disabled:cursor-not-allowed text-off-white font-heading text-[11px] tracking-[0.28em] mt-1"
            >
              <span className="morph-label relative z-10">
                <span>{sent ? "MESSAGE SENT" : "SEND MESSAGE"}</span>
                <span>{sent ? "MESSAGE SENT" : "SEND MESSAGE"}</span>
              </span>
              <GtArrow className="morph-arrow relative z-10" />
            </button>

            <div className="flex items-center gap-2 text-[10.5px] text-off-white/45 pt-1">
              <GtLock /> Your information is secure and confidential.
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function FooterOld() {
  const cols = [
    {
      h: "PRACTICE",
      items: ["Approach", "Services", "Process", "Projects"],
    },
    {
      h: "WHO WE HELP",
      items: ["Architects", "Developers", "Project teams", "Building Surveyors"],
    },
    {
      h: "OFFICES",
      items: ["Melbourne — HQ", "Perth", "Project sites worldwide"],
    },
    {
      h: "CONTACT",
      items: ["reza.a@beigman.com.au", "0423 054 048", "Submit a brief"],
    },
  ];
  return (
    <footer className="bg-midnight text-off-white border-t border-off-white/10">
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16 py-16">
        <div className="zaj-stagger grid md:grid-cols-12 gap-10">
          <div className="zaj-fade-up md:col-span-4">
            <BeigmanLogoLight />
            <p className="mt-6 max-w-[320px] text-[14px] leading-[1.7] text-off-white/55">
              Data driven. Design led. Outcome focused. Performance-based fire & life-safety
              engineering for ambitious developers and architects.
            </p>
            <div className="mt-6 text-[12px] leading-[1.7] text-off-white/55">
              <div className="text-off-white/85">Reza Abbassi</div>
              <div>Director — Chartered Fire Engineer (Engineers Australia)</div>
              <div className="mt-2">PE0015257 (VIC) · PRE0002718 (NSW) · PEU015257 (TAS)</div>
              <div>DFFH Accreditation No. FRM-217</div>
            </div>
            <div className="mt-8 flex items-center gap-3 text-off-white/40 font-heading text-[10px] tracking-[0.28em]">
              <span className="w-6 h-px bg-off-white/30" />
              MELBOURNE · PERTH · BEYOND
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.h} className="zaj-fade-up md:col-span-2">
              <div className="font-heading text-[10px] tracking-[0.28em] text-copper">{c.h}</div>
              <ul className="mt-5 space-y-3">
                {c.items.map((it) => (
                  <li key={it}>
                    <a href="#contact" className="text-[14px] text-off-white/75 hover:text-copper transition-colors">{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-14 pt-6 border-t border-off-white/10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 text-[11px] tracking-[0.18em] text-off-white/40 font-heading">
          <div>© {new Date().getFullYear()} BEIGMAN ENGINEERING PTY LTD &nbsp;·&nbsp; ABN 46 683 614 959</div>
          <div className="flex gap-6">
            <a href="#contact" className="hover:text-off-white transition-colors">CONTACT</a>
            <a href="#services" className="hover:text-off-white transition-colors">SERVICES</a>
            <a href="#projects" className="hover:text-off-white transition-colors">PROJECTS</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterArrow({ className = "" }) {
  return (
    <svg className={className} width="22" height="10" viewBox="0 0 22 10" fill="none" aria-hidden="true">
      <path d="M1 5h19M16 1.5 20 5l-4 3.5" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function FooterContactIcon({ type }) {
  const paths = {
    phone: "M7.2 4.5 9.1 3l2.5 4-1.7 1.4c.8 1.7 2 3 3.7 3.8l1.4-1.7 4 2.5-1.5 1.9c-.7.9-1.9 1.3-3 1-4.6-1.3-8.1-4.8-9.4-9.4-.3-1.1.1-2.3 1-3Z",
    mail: "M4.5 6.5h15v11h-15z M5 7l7 5.5L19 7",
  };
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={paths[type]} />
    </svg>
  );
}

function Footer() {
  const services = [
    "Design Protection",
    "Development Optimisation",
    "Regulatory Navigation",
    "Existing Building Compliance",
    "Computational Engineering",
    "Delivery & Construction Support",
  ];

  const siteLinks = [
    { label: "Holistic Approach", href: "#holistic-approach" },
    { label: "Performance", href: "#performance" },
    { label: "Roadmap", href: "#process" },
    { label: "Projects", href: "#projects" },
    { label: "Contact", href: "#contact" },
  ];

  return (
    <footer className="relative overflow-hidden bg-black text-off-white">
      <style>{`
        .footer-glass-panel {
          background:
            linear-gradient(135deg, rgba(7, 14, 22, 0.78), rgba(10, 16, 24, 0.52)),
            rgba(8, 13, 20, 0.48);
          border: 1px solid rgba(255, 255, 255, 0.24);
          box-shadow:
            0 44px 110px rgba(0, 0, 0, 0.56),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
          backdrop-filter: blur(22px) saturate(1.18);
          -webkit-backdrop-filter: blur(22px) saturate(1.18);
        }
        .footer-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          color: rgba(247, 247, 247, 0.78);
          transition: color 220ms ease, transform 220ms ease;
        }
        .footer-link:hover {
          color: #f5a36d;
          transform: translateX(3px);
        }
        .footer-link svg {
          flex: 0 0 auto;
          color: #d98955;
          opacity: 0.9;
          transition: transform 220ms ease;
        }
        .footer-link:hover svg {
          transform: translateX(4px);
        }
        .footer-cta {
          transition: background 260ms ease, color 260ms ease, border-color 260ms ease, transform 260ms ease;
        }
        .footer-cta:hover {
          background: #d98955;
          border-color: #d98955;
          color: #fff;
          transform: translateY(-2px);
        }
        @media (max-width: 767px) {
          .footer-glass-panel {
            backdrop-filter: blur(16px) saturate(1.1);
            -webkit-backdrop-filter: blur(16px) saturate(1.1);
          }
        }
      `}</style>

      <div className="absolute inset-0">
        <img
          src="assets/footer dark.png"
          alt=""
          className="h-full w-full object-cover"
          aria-hidden="true"
          loading="lazy"
          decoding="async"
        />
        <div className="absolute inset-0 bg-black/42" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(217,137,85,0.14),transparent_28%),linear-gradient(180deg,rgba(0,0,0,0.24),rgba(0,0,0,0.72))]" />
      </div>

      <div className="relative z-10 mx-auto max-w-[1320px] px-5 py-10 md:px-8 lg:px-12 lg:py-12">
        <div className="footer-glass-panel overflow-hidden rounded-[16px]">
          <div className="grid border-b border-white/16 lg:grid-cols-[1.35fr_1fr_1fr_1.1fr]">
            <div className="border-b border-white/12 p-6 md:p-7 lg:border-b-0 lg:border-r lg:border-white/14 lg:p-8">
              <BeigmanLogoLight compact className="origin-left" />
              <p className="mt-6 max-w-[330px] text-[14px] leading-[1.65] text-white/82">
                Performance-based engineering solutions that protect your vision,
                maximise value, and secure approval.
              </p>
              <span className="mt-5 block h-px w-12 bg-copper" />

              <div className="mt-6 space-y-3 text-[13px] leading-[1.45] text-white/68">
                <div>
                  <div className="font-heading text-[10px] font-bold uppercase tracking-[0.16em] text-white/90">
                    Chartered Fire Engineer
                  </div>
                  <div className="mt-0.5 text-white/58">Engineers Australia</div>
                </div>
                <div>
                  <div className="font-heading text-[10px] font-bold uppercase tracking-[0.16em] text-white/90">
                    Fire Safety Engineering
                  </div>
                  <div className="mt-0.5 text-white/58">Performance-led project support</div>
                </div>
              </div>

              <a
                href="#projects"
                className="footer-cta mt-6 inline-flex min-h-[44px] items-center justify-center gap-5 border border-copper/70 px-5 font-heading text-[10px] font-bold uppercase tracking-[0.16em] text-copper"
              >
                View Our Projects
                <FooterArrow />
              </a>
            </div>

            <div className="border-b border-white/12 p-6 md:p-7 lg:border-b-0 lg:border-r lg:border-white/14 lg:p-8">
              <div className="font-heading text-[12px] font-bold uppercase tracking-[0.16em] text-white">
                Services
              </div>
              <ul className="mt-6 space-y-3.5">
                {services.map((item) => (
                  <li key={item}>
                    <a href="#services" className="footer-link text-[14px]">
                      <span>{item}</span>
                      <FooterArrow />
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            <div className="border-b border-white/12 p-6 md:p-7 lg:border-b-0 lg:border-r lg:border-white/14 lg:p-8">
              <div className="font-heading text-[12px] font-bold uppercase tracking-[0.16em] text-white">
                About
              </div>
              <ul className="mt-6 space-y-3.5">
                {siteLinks.map((item) => (
                  <li key={item.href}>
                    <a href={item.href} className="footer-link text-[14px]">
                      <span>{item.label}</span>
                      <FooterArrow />
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            <div className="p-6 md:p-7 lg:p-8">
              <div className="font-heading text-[12px] font-bold uppercase tracking-[0.16em] text-white">
                Contact
              </div>
              <div className="mt-6 space-y-4">
                <a href="tel:+61423054048" className="flex items-center gap-4 text-[15px] text-white/84 transition-colors hover:text-copper">
                  <span className="text-copper"><FooterContactIcon type="phone" /></span>
                  <span>0423 054 048</span>
                </a>
                <a href="mailto:enquiries@beigman.com.au" className="flex items-center gap-4 text-[15px] text-white/84 transition-colors hover:text-copper">
                  <span className="text-copper"><FooterContactIcon type="mail" /></span>
                  <span className="break-all">enquiries@beigman.com.au</span>
                </a>
              </div>

              <div className="mt-12 border-t border-white/16 pt-6">
                <div className="font-heading text-[11px] font-bold uppercase tracking-[0.16em] text-white">
                  Let's build with confidence
                </div>
                <span className="mt-4 block h-px w-12 bg-copper" />
              </div>
            </div>
          </div>

          <div className="grid items-center gap-6 border-b border-white/16 p-6 md:grid-cols-[auto_1fr_auto] md:p-7 lg:p-8">
            <a
              href="#contact"
              aria-label="Get in touch"
              className="grid h-16 w-16 place-items-center rounded-full border border-copper/80 text-copper shadow-[0_0_24px_rgba(217,137,85,0.18)] transition-transform hover:-translate-y-1 hover:bg-copper hover:text-white"
            >
              <svg width="24" height="24" viewBox="0 0 34 34" fill="none" aria-hidden="true">
                <path d="M9 25 25 9M12 9h13v13" stroke="currentColor" strokeWidth="1.45" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            <div>
              <h3 className="font-heading text-[22px] font-semibold text-white md:text-[26px]">
                Have a project in mind?
              </h3>
              <p className="mt-1.5 max-w-[430px] text-[15px] leading-[1.5] text-white/72">
                Let's talk about how we can help you move forward with confidence.
              </p>
            </div>
            <a
              href="#contact"
              className="footer-cta inline-flex min-h-[46px] items-center justify-center gap-6 border border-copper/70 px-6 font-heading text-[10px] font-bold uppercase tracking-[0.16em] text-copper md:min-w-[210px]"
            >
              Get In Touch
              <FooterArrow />
            </a>
          </div>

          <div className="flex flex-col gap-3 px-6 py-5 text-[12px] text-white/64 md:flex-row md:items-center md:justify-between md:px-7 lg:px-8">
            <div>
              &copy; {new Date().getFullYear()} Beigman Engineering Pty. Ltd. All rights reserved.
            </div>
            <div className="flex items-center gap-5">
              <div className="flex items-center gap-3">
                <a
                  href="https://www.linkedin.com/in/rabbassi/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="LinkedIn"
                  className="text-white/56 hover:text-copper transition-colors"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.25 8.25h4.5V23h-4.5V8.25zM8.5 8.25H12.8v2.02h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V23h-4.5v-6.5c0-1.55-.03-3.54-2.16-3.54-2.16 0-2.5 1.69-2.5 3.43V23H8.5V8.25z" />
                  </svg>
                </a>
                <a
                  href="https://www.instagram.com/beigman.engineering/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Instagram"
                  className="text-white/56 hover:text-copper transition-colors"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="5" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
                  </svg>
                </a>
              </div>
              <div className="font-heading text-[10px] uppercase tracking-[0.14em] text-white/56">
                ABN: 46 683 614 959
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ContactCTA, Footer });