import { Link } from "@tanstack/react-router";
import logo from "@/assets/logo-final.png.asset.json";

export function Contact() {
  return (
    <section id="contact" className="relative bg-[color:var(--brand-navy)] text-white py-32 overflow-hidden">
      <div
        className="absolute inset-0 opacity-60"
        style={{
          background:
            "radial-gradient(50% 50% at 80% 20%, color-mix(in oklab, var(--brand-green) 30%, transparent), transparent), radial-gradient(60% 60% at 10% 90%, color-mix(in oklab, var(--brand-blue) 40%, transparent), transparent)",
        }}
      />
      <div className="relative container-x">
        <div className="grid md:grid-cols-12 gap-16">
          <div className="md:col-span-7">
            <p className="eyebrow text-white/60">Get in touch</p>
            <h2 className="font-display mt-5 text-5xl md:text-7xl tracking-tight leading-[0.98] text-balance">
              Tell us about the <em className="italic text-[color:var(--brand-green-soft)]">project</em> you have in mind.
            </h2>
            <p className="mt-8 text-lg text-white/70 max-w-xl leading-relaxed">
              Whether it is a first application or a project already underway, we are happy to
              discuss how we can support. Initial conversations are confidential and obligation-free.
            </p>

            <div className="mt-12 space-y-8">
              <a href="mailto:info@immne.eu" className="block group">
                <div className="text-xs uppercase tracking-[0.18em] text-white/50">Email</div>
                <div className="font-display text-3xl mt-1 group-hover:text-[color:var(--brand-green-soft)] transition-colors">
                  info@immne.eu
                </div>
              </a>
              <div>
                <div className="text-xs uppercase tracking-[0.18em] text-white/50">Office</div>
                <div className="mt-2 text-white/85">
                  <div className="font-display text-2xl">Innovative Management DOO</div>
                  <div className="text-sm text-white/60 mt-2 leading-relaxed">
                    Ul. Radoja Dakića, Lamela 3/9<br />
                    81000 Podgorica, Montenegro
                  </div>
                </div>
              </div>
            </div>
          </div>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              const fd = new FormData(e.currentTarget);
              const name = String(fd.get("name") || "").trim();
              const org = String(fd.get("org") || "").trim();
              const email = String(fd.get("email") || "").trim();
              const message = String(fd.get("message") || "").trim();
              const subject = `Enquiry from ${name || "website visitor"}`;
              const body =
                `Name: ${name}\n` +
                `Organisation: ${org}\n` +
                `Email: ${email}\n\n` +
                `${message}\n`;
              window.location.href = `mailto:info@immne.eu?subject=${encodeURIComponent(
                subject
              )}&body=${encodeURIComponent(body)}`;
            }}
            className="md:col-span-5 rounded-2xl bg-white/[0.04] backdrop-blur-md border border-white/10 p-8 md:p-10"
          >
            <div className="space-y-5">
              <Field label="Name" name="name" />
              <Field label="Organisation" name="org" />
              <Field label="Email" name="email" type="email" />
              <div>
                <label className="block text-xs uppercase tracking-[0.18em] text-white/55 mb-2">
                  How can we help?
                </label>
                <textarea
                  name="message"
                  rows={4}
                  maxLength={2000}
                  className="w-full bg-transparent border-b border-white/20 focus:border-[color:var(--brand-green-soft)] outline-none py-2 text-white placeholder:text-white/30 transition-colors resize-none"
                  placeholder="A short description is enough."
                />
              </div>
              <button
                type="submit"
                className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-full bg-[color:var(--brand-green)] px-6 py-3.5 text-sm font-medium text-[color:var(--brand-navy)] hover:bg-[color:var(--brand-green-soft)] transition-colors"
              >
                Send enquiry
                <span aria-hidden>→</span>
              </button>
            </div>
          </form>

        </div>

        <footer className="mt-32 pt-10 border-t border-white/10 flex flex-wrap items-center justify-between gap-6">
          <div className="flex items-center gap-3">
            <img src={logo.url} alt="" className="h-8 w-auto" />
          </div>
          <div className="flex flex-wrap items-center gap-6">
            <Link to="/privacy" className="text-sm text-white/50 hover:text-white/80 transition-colors">
              Privacy Policy
            </Link>
            <Link to="/terms" className="text-sm text-white/50 hover:text-white/80 transition-colors">
              Terms of Service
            </Link>
            <p className="text-sm text-white/50">
              © {new Date().getFullYear()} Innovative Management DOO Podgorica. All rights reserved.
            </p>
          </div>
        </footer>
      </div>
    </section>
  );
}

function Field({ label, name, type = "text" }: { label: string; name: string; type?: string }) {
  return (
    <div>
      <label htmlFor={name} className="block text-xs uppercase tracking-[0.18em] text-white/55 mb-2">
        {label}
      </label>
      <input
        id={name}
        name={name}
        type={type}
        className="w-full bg-transparent border-b border-white/20 focus:border-[color:var(--brand-green-soft)] outline-none py-2 text-white transition-colors"
      />
    </div>
  );
}