import Image from "next/image";
import contactHeroImage from "../../images/file8.jpg";
import mapImage from "../../images/alpukat.jpg";
import { ContactForm } from "./contact-form";

const contactNavItems = [
  { label: "Home", href: "/" },
  { label: "Tentang", href: "/about" },
  { label: "Layanan", href: "/services" },
  { label: "Kontak", href: "/contact", active: true }
];

const contactDetails = [
  {
    title: "Alamat Kantor",
    value:
      "Jl. Raya Petir Kp. Babakan RT. 001 RW. 001 Babakan Dramaga Kabupaten Bogor Jawa Barat 16680"
  },
  {
    title: "WhatsApp/Telepon",
    value: "+0852-8403-6641"
  },
  {
    title: "Email",
    value: "info@kelolabumi.com"
  },
  {
    title: "Media Sosial",
    value: "@kelolabumiofficial"
  }
];

export default function ContactPage() {
  return (
    <main className="page-shell">
      <header className="topbar">
        <div className="container topbar-inner">
          <a className="brand" href="/" aria-label="Kelola Bumi">
            <Image
              src="/logo_kelolabumi.png"
              alt="Kelola Bumi Logo"
              width={240}
              height={40}
              priority
            />
          </a>

          <nav className="nav desktop-nav" aria-label="Navigasi utama">
            {contactNavItems.map((item) => (
              <a
                key={item.label}
                href={item.href}
                className={item.active ? "nav-active" : undefined}
                aria-current={item.active ? "page" : undefined}
              >
                {item.label}
              </a>
            ))}
          </nav>

          <a className="button button-primary topbar-cta" href="mailto:info@kelolabumi.com">
            Konsultasi Sekarang
          </a>
        </div>
      </header>

      <section className="contact-hero">
        <div className="contact-hero-media" aria-hidden="true">
          <Image
            src={contactHeroImage}
            alt=""
            fill
            priority
            className="contact-hero-image"
            sizes="100vw"
          />
          <div className="contact-hero-overlay" />
        </div>
        <div className="container contact-hero-content">
          <h1>Mari Bertumbuh Bersama PT. Kelola Bumi Nusantara</h1>
          <p>
            Solusi teknologi pertanian presisi untuk masa depan yang lebih hijau
            dan berkelanjutan.
          </p>
        </div>
      </section>

      <section className="section section-light">
        <div className="container contact-grid">
          <div className="contact-sidebar">
            <div className="contact-list">
              {contactDetails.map((item, index) => (
                <article key={item.title} className="contact-item">
                  <div className="contact-icon">{String(index + 1).padStart(2, "0")}</div>
                  <div>
                    <h3>{item.title}</h3>
                    <p>{item.value}</p>
                  </div>
                </article>
              ))}
            </div>

            <div className="contact-map-card">
              <Image
                src={mapImage}
                alt="Lokasi Kelola Bumi di Bogor"
                fill
                className="contact-map-image"
                sizes="(max-width: 1024px) 100vw, 42vw"
              />
              <a
                className="contact-map-badge"
                href="https://www.google.com/maps?q=-6.3580933,106.8108942"
                target="_blank"
                rel="noreferrer"
              >
                Kunjungi Kami di Bogor
              </a>
            </div>
          </div>

          <div className="contact-form-card">
            <h2>Kirim Pesan</h2>
            <ContactForm />
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="container footer-inner">
          <div>
            <div className="footer-brand">Kelola Bumi</div>
            <p>© 2026 PT Kelola Bumi Nusantara. An Agricultural Company.</p>
          </div>
          <div className="footer-links">
            <a href="/">Home</a>
            <a href="/about">Tentang</a>
            <a href="/services">Layanan</a>
            <a href="/contact">Kontak</a>
          </div>
        </div>
      </footer>
    </main>
  );
}