import { createFileRoute, Link } from "@tanstack/react-router";
import { Mail, Phone, MapPin, ShieldCheck, MessageSquare, ArrowRight } from "lucide-react";


export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact — Vigor Group of Companies" },
      { name: "description", content: "Get in touch with Vigor Group of Companies. Head office in Zanzibar, Tanzania." },
      { property: "og:title", content: "Contact Vigor Group of Companies" },
      { property: "og:description", content: "Reach the Vigor Group of Companies head office." },
    ],
  }),
  component: Contact,
});

function Contact() {
  return (
    <>
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <p className="eyebrow">Contact</p>
        <h1 className="mt-6 text-5xl md:text-7xl max-w-4xl leading-[1]">
          Let's build the <span className="italic text-primary">future</span> together.
        </h1>
        <p className="mt-8 max-w-xl text-lg text-ink-soft leading-relaxed">
          Whether you're exploring a partnership, media enquiry or a career, our
          head office is ready to hear from you.
        </p>
      </section>

      <section className="container-x py-16 md:py-20 grid lg:grid-cols-2 gap-14">
        <div className="space-y-10">
          <div className="flex gap-5">
            <div className="w-10 h-10 shrink-0 bg-primary text-white flex items-center justify-center"><MapPin size={18} /></div>
            <div>
              <h3 className="text-lg">Headquarters</h3>
              <p className="mt-2 font-sans text-base font-medium tracking-normal text-ink-soft">Zanzibar, Tanzania<br/>Sub-offices in Dar es Salaam and China</p>
            </div>
          </div>
          <div className="flex gap-5">
            <div className="w-10 h-10 shrink-0 bg-primary text-white flex items-center justify-center"><Mail size={18} /></div>
            <div>
              <h3 className="text-lg">Email</h3>
              <a href="mailto:info@turkysgroup.co.tz" className="mt-2 block font-sans text-base font-medium tracking-normal text-ink-soft hover:text-primary">info@turkysgroup.co.tz</a>
            </div>
          </div>
          <div className="flex gap-5">
            <div className="w-10 h-10 shrink-0 bg-primary text-white flex items-center justify-center"><Phone size={18} /></div>
            <div>
              <h3 className="text-lg">Phone</h3>
              <a
                href="tel:+255671700800"
                className="mt-2 block font-sans text-base font-medium tracking-normal text-ink-soft hover:text-primary"
              >
                +255 671 700 800
              </a>
            </div>
          </div>
        </div>

        <form
          className="bg-secondary/50 border border-border p-8 md:p-10 space-y-5"
          onSubmit={(e) => e.preventDefault()}
        >
          <div className="grid sm:grid-cols-2 gap-5">
            <label className="block">
              <span className="text-xs uppercase tracking-[0.18em] font-semibold">Name</span>
              <input required className="mt-2 w-full bg-background border border-border px-4 py-3 focus:outline-none focus:border-primary" />
            </label>
            <label className="block">
              <span className="text-xs uppercase tracking-[0.18em] font-semibold">Email</span>
              <input required type="email" className="mt-2 w-full bg-background border border-border px-4 py-3 focus:outline-none focus:border-primary" />
            </label>
          </div>
          <label className="block">
            <span className="text-xs uppercase tracking-[0.18em] font-semibold">Subject</span>
            <input className="mt-2 w-full bg-background border border-border px-4 py-3 focus:outline-none focus:border-primary" />
          </label>
          <label className="block">
            <span className="text-xs uppercase tracking-[0.18em] font-semibold">Message</span>
            <textarea rows={5} className="mt-2 w-full bg-background border border-border px-4 py-3 focus:outline-none focus:border-primary" />
          </label>
          <button type="submit" className="btn-primary">Send message</button>
        </form>
      </section>

      <section className="container-x pb-20 md:pb-28 grid md:grid-cols-2 gap-6">
        <Link
          to="/whistleblower"
          className="group border border-border p-8 md:p-10 hover:border-primary transition-colors"
        >
          <div className="w-10 h-10 bg-primary text-white flex items-center justify-center">
            <ShieldCheck size={18} />
          </div>
          <h2 className="mt-6 text-2xl">Whistleblower programme</h2>
          <p className="mt-3 text-ink-soft leading-relaxed">
            Report suspected misconduct confidentially — anonymously if you prefer. Protected by our
            zero-retaliation commitment.
          </p>
          <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-primary">
            Make a report <ArrowRight size={15} className="transition-transform group-hover:translate-x-1" />
          </span>
        </Link>

        <Link
          to="/feedback"
          className="group border border-border p-8 md:p-10 hover:border-primary transition-colors"
        >
          <div className="w-10 h-10 bg-primary text-white flex items-center justify-center">
            <MessageSquare size={18} />
          </div>
          <h2 className="mt-6 text-2xl">Share your feedback</h2>
          <p className="mt-3 text-ink-soft leading-relaxed">
            A suggestion, complaint, compliment or general comment — every submission reaches our
            group service team.
          </p>
          <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-primary">
            Give feedback <ArrowRight size={15} className="transition-transform group-hover:translate-x-1" />
          </span>
        </Link>
      </section>
    </>
  );
}
