import Image from "next/image";
import alpukatImage from "../../images/alpukat.jpg";
import kelorImage from "../../images/kelor.jpg";
import udangImage from "../../images/udang-1.jpg";
import kambingImage from "../../images/kambing-pe.jpg";

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

const serviceHighlights = [
  "Analisis tanah dan lingkungan",
  "Pendampingan pengendalian hama terpadu",
  "Implementasi teknologi smart farming"
];

export default function ServicesPage() {
  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">
            {servicesNavItems.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="/contact">
            Konsultasi Sekarang
          </a>
        </div>
      </header>

      <section className="services-page-shell">
        <div className="container">
          <section className="services-hero">
            <span className="services-kicker">Ekosistem Kami</span>
            <h1>
              Pertanian berkelanjutan, <span>dikelola dengan presisi.</span>
            </h1>
            <p>
              Kelola Bumi mendukung agribisnis Indonesia melalui konsultasi
              modern, sarana produksi unggul, dan integrasi pasar yang rapi.
            </p>
          </section>

          <section className="services-bento-grid">
            <article className="services-feature services-feature-large">
              <div className="services-feature-copy">
                <div className="services-badge-icon">01</div>
                <h3>Jasa Konsultasi Pertanian</h3>
                <p>
                  Pendampingan strategis berbasis data lapangan untuk membantu
                  optimalisasi hasil dan pengelolaan usaha yang lebih terukur.
                </p>
                <ul className="services-checklist">
                  {serviceHighlights.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
                <a className="services-inline-link" href="/contact">
                  Pelajari Lebih Lanjut
                </a>
              </div>
              <div className="services-feature-media">
                <Image
                  src={kelorImage}
                  alt="Konsultasi pertanian"
                  fill
                  className="services-media-image"
                  sizes="(max-width: 1024px) 100vw, 25vw"
                />
              </div>
            </article>

            <article className="services-feature services-feature-card">
              <div className="services-card-image">
                <Image
                  src={alpukatImage}
                  alt="Benih dan bibit unggul"
                  fill
                  className="services-media-image"
                  sizes="(max-width: 1024px) 100vw, 33vw"
                />
                <span className="services-card-tag">Premium Grade</span>
              </div>
              <div className="services-card-body">
                <div className="services-badge-icon services-badge-secondary">02</div>
                <h3>Benih & Bibit Unggul</h3>
                <p>
                  Bibit dan bahan tanam terpilih untuk produktivitas tinggi,
                  adaptif terhadap iklim lokal, dan cocok untuk pengembangan
                  komoditas strategis.
                </p>
                <a className="services-inline-link services-link-secondary" href="/contact">
                  Lihat Katalog
                </a>
              </div>
            </article>

            <article className="services-feature services-feature-card">
              <div className="services-card-image">
                <Image
                  src={kambingImage}
                  alt="Pupuk dan nutrisi tanaman"
                  fill
                  className="services-media-image"
                  sizes="(max-width: 1024px) 100vw, 33vw"
                />
              </div>
              <div className="services-card-body">
                <div className="services-badge-icon services-badge-tertiary">03</div>
                <h3>Pupuk & Nutrisi</h3>
                <p>
                  Distribusi nutrisi organik dan anorganik yang disesuaikan
                  dengan profil lahan, tahap tumbuh, dan target produktivitas.
                </p>
                <a className="services-inline-link services-link-tertiary" href="/contact">
                  Panduan Nutrisi
                </a>
              </div>
            </article>

            <article className="services-feature services-feature-market">
              <div className="services-feature-copy">
                <div className="services-badge-icon services-badge-market">04</div>
                <h3>Penjualan Hasil Pertanian</h3>
                <p>
                  Kami menjembatani produsen dengan pasar yang lebih luas agar
                  penyerapan hasil, harga, dan distribusi berjalan lebih efisien.
                </p>
                <div className="services-stats-grid">
                  <div>
                    <strong>85%</strong>
                    <span>Efisiensi rantai pasok</span>
                  </div>
                  <div>
                    <strong>120+</strong>
                    <span>Mitra pasar</span>
                  </div>
                </div>
                <a className="button button-secondary" href="/contact">
                  Ajukan Kemitraan
                </a>
              </div>
              <div className="services-market-media">
                <Image
                  src={udangImage}
                  alt="Penjualan hasil pertanian"
                  fill
                  className="services-media-image"
                  sizes="(max-width: 1024px) 100vw, 45vw"
                />
              </div>
            </article>
          </section>

          <section className="services-cta">
            <div className="services-cta-content">
              <h2>Siap mengoptimalkan hasil panen Anda?</h2>
              <p>
                Bergabunglah dengan pendekatan pertanian presisi bersama PT.
                Kelola Bumi Nusantara.
              </p>
              <div className="services-cta-actions">
                <a className="button services-cta-primary" href="/contact">
                  Mulai Sekarang
                </a>
                <a className="button services-cta-secondary" href="/contact">
                  Bicara dengan Spesialis
                </a>
              </div>
            </div>
            <div className="services-cta-orb services-cta-orb-green" />
            <div className="services-cta-orb services-cta-orb-orange" />
          </section>
        </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>
  );
}