"use client";

import ContactForm from "./ContactForm";
import { useLang } from "@/context/LanguageContext";
import { t } from "@/lib/translations";

const MAP_SRC =
  "https://maps.google.com/maps?q=-6.35861,106.8111146&z=16&output=embed";

export default function ContactPage() {
  const { lang } = useLang();
  const tr = t[lang].contact;

  const contactInfo = [
    {
      icon: "language",
      title: "Website",
      value: "www.iptek.co",
      href: "https://www.iptek.co",
      sub: null,
    },
    {
      icon: "chat",
      title: "WhatsApp",
      value: "+62 817 221 121",
      href: "https://wa.me/62817221121",
      sub: null,
    },
    {
      icon: "mail",
      title: "Email",
      value: "support@iptek.co",
      href: "mailto:support@iptek.co",
      sub: null,
    },
    {
      icon: "location_on",
      title: lang === "id" ? "Kantor" : "Office",
      value: "Jl. Srengseng Sawah No.51 C",
      href: "https://maps.google.com/?q=-6.35861,106.8111146",
      sub: "Kel. Srengseng Sawah, Jagakarsa\nJakarta Selatan, DKI Jakarta 12640",
    },
  ];

  return (
    <>
      {/* Header */}
      <section className="py-20 bg-surface-container-low text-center">
        <div className="max-w-3xl mx-auto px-6">
          <p className="text-primary font-bold uppercase tracking-widest text-sm mb-4">
            {tr.badge}
          </p>
          <h1 className="font-headline text-5xl font-extrabold text-on-surface mb-6">
            {tr.heroTitle}
          </h1>
          <p className="text-on-surface-variant text-lg leading-relaxed">
            {tr.heroSub}
          </p>
        </div>
      </section>

      <section className="py-24 bg-surface">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* Sidebar */}
          <div className="space-y-8">
            <div>
              <h2 className="font-headline text-2xl font-bold text-on-surface mb-3">
                {tr.infoTitle}
              </h2>
              <p className="text-on-surface-variant leading-relaxed text-sm">
                {tr.infoSub}
              </p>
            </div>

            <div className="space-y-3">
              {contactInfo.map((item) => (
                <a
                  key={item.title}
                  href={item.href}
                  target={item.href.startsWith("http") ? "_blank" : undefined}
                  rel="noopener noreferrer"
                  className="flex items-start gap-4 p-4 bg-surface-container-low rounded-xl hover:bg-surface-container transition-colors group"
                >
                  <div className="w-11 h-11 bg-primary/10 text-primary rounded-lg flex items-center justify-center shrink-0 group-hover:bg-primary group-hover:text-white transition-colors mt-0.5">
                    <span className="material-symbols-outlined text-xl">{item.icon}</span>
                  </div>
                  <div>
                    <p className="text-[11px] font-bold text-on-surface-variant uppercase tracking-widest mb-0.5">
                      {item.title}
                    </p>
                    <p className="font-semibold text-on-surface text-sm leading-snug">
                      {item.value}
                    </p>
                    {item.sub && (
                      <p className="text-on-surface-variant text-xs leading-relaxed mt-0.5 whitespace-pre-line">
                        {item.sub}
                      </p>
                    )}
                  </div>
                </a>
              ))}
            </div>

            {/* Map */}
            <div className="rounded-xl overflow-hidden shadow-md border border-outline-variant">
              <iframe
                src={MAP_SRC}
                width="100%"
                height="220"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title={lang === "id" ? "Lokasi Kantor IPTEK" : "IPTEK Office Location"}
              />
              <a
                href="https://maps.google.com/?q=-6.35861,106.8111146"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center justify-center gap-2 py-3 bg-surface-container-low text-primary text-sm font-semibold hover:bg-surface-container transition-colors"
              >
                <span className="material-symbols-outlined text-base">open_in_new</span>
                {lang === "id" ? "Buka di Google Maps" : "Open in Google Maps"}
              </a>
            </div>
          </div>

          {/* Form */}
          <div className="lg:col-span-2 bg-surface-container-lowest rounded-2xl shadow-sm p-8">
            <ContactForm />
          </div>
        </div>
      </section>
    </>
  );
}