function Footer({ sansFont, cursiveFont }) {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  return (
    <footer id="contact-us" className="relative bg-black text-white grain" style={{ "--grain-opacity": 0.09 }}>
      {/* Big mark */}
      <div className="relative overflow-hidden border-t border-white/10">
        <div className="px-5 md:px-10 pt-24 md:pt-32 pb-10">
          <div className="flex items-center gap-3 mb-6">
            <span className="w-10 h-px bg-white/40" />
            <span className="uppercase tracking-[0.35em] text-[11px] text-white/50">
              04 — Contact
            </span>
          </div>
          <div
            className="hero-title leading-[0.9]"
            style={{
              fontFamily: sansFont,
              fontSize: "clamp(56px, 10vw, 180px)",
              letterSpacing: "-0.04em"
            }}>
            
            Come{" "}
            <span
              className="inline-block italic"
              style={{
                fontFamily: cursiveFont,
                fontStyle: "normal",
                fontSize: "1.3em",
                transform: "rotate(-3deg)"
              }}>
              
              sit
            </span>{" "}
            with us.
          </div>
        </div>
      </div>

      {/* Meta grid */}
      <div className="px-5 md:px-10 pb-16 md:pb-24">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 border-t border-white/10 pt-14">
          {/* Showrooms */}
          <div className="md:col-span-4">
            <div className="text-[11px] uppercase tracking-[0.35em] text-white/50 mb-5">WORKS</div>
            <div className="space-y-5 text-[14px] leading-relaxed">
              <div>
                <div className="text-white/90">New Delhi</div>
                <div className="text-white/50">A-63, Naraina Industrial Area</div>
                <div className="text-white/50">Phase-1, New Delhi-110028</div>
                <div className="text-white/50">Tue — Sun · 9:00 — 18:00</div>
              </div>
            </div>
          </div>

          {/* Contact */}
          <div className="md:col-span-3">
            <div className="text-[11px] uppercase tracking-[0.35em] text-white/50 mb-5">Direct</div>
            <div className="space-y-3 text-[14px]">
              <a href="mailto:studio@qurcee.com" className="block text-white/90 hover:text-white">qurcee@gmail.com

              </a>
              <div className="text-white/60 pt-2">+91 90034 83493</div>
            </div>
          </div>

          {/* Newsletter */}
          <div className="md:col-span-5">
            <div className="text-[11px] uppercase tracking-[0.35em] text-white/50 mb-5">Letters, twice a year</div>
            <form onSubmit={(e) => {
              e.preventDefault();
              if (email.trim()) setSent(true);
            }}
            className="relative">
              
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="your email"
                className="w-full bg-transparent border-b border-white/20 focus:border-white py-3 pr-28 text-[16px] outline-none placeholder:text-white/30" />
              
              <button
                type="submit"
                className="absolute right-0 top-1/2 -translate-y-1/2 text-[11px] uppercase tracking-[0.28em] text-white/80 hover:text-white transition">
                
                {sent ? "✓ thank you" : "Subscribe →"}
              </button>
            </form>
            <p className="mt-4 text-[12px] text-white/50 leading-relaxed max-w-md">
              A letter in spring, a letter in autumn. New objects, workshop notes,
              and a quiet reading list. No noise.
            </p>

            <div className="mt-10 flex items-center gap-5 text-[11px] uppercase tracking-[0.28em] text-white/60">
              <a href="#" className="hover:text-white">Instagram</a>
              <span className="text-white/20">·</span>
              <a href="#" className="hover:text-white">LINEKEDIN
</a>
              <span className="text-white/20">·</span>
              <a href="#" className="hover:text-white">Pinterest</a>
            </div>
          </div>
        </div>

        {/* Bottom line */}
        <div className="mt-20 md:mt-28 pt-6 border-t border-white/10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 text-[11px] uppercase tracking-[0.28em] text-white/40">
          <div className="flex items-center gap-4">
            <QurceeLogo size={20} />
            <span>© 2026 Qurcee, New Delhi.</span>
          </div>
          <div className="flex items-center gap-5">
            <a href="#" className="hover:text-white/70">Trade program</a>
            <a href="#" className="hover:text-white/70">Care guide</a>
            <a href="#" className="hover:text-white/70">Imprint</a>
            <a href="#" className="hover:text-white/70">Privacy</a>
          </div>
        </div>
      </div>
    </footer>);
}

Object.assign(window, { Footer });