import Image from "next/image";
import aboutHeroImage from "../../images/file8.jpg";
import historyImage from "../../images/kelor.jpg";
import strategyImage from "../../images/alpukat.jpg";

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

const missions = [
  {
    title: "1. Edukasi & Konsultasi",
    description:
      "Memberikan pendampingan teknis, perencanaan kebun, dan transfer pengetahuan yang relevan dengan kondisi lapangan."
  },
  {
    title: "2. Input & Pengembangan",
    description:
      "Mendukung penyediaan bibit, sarana produksi, dan penguatan sistem budidaya yang efektif dan bertanggung jawab."
  },
  {
    title: "3. Rantai Pasok",
    description:
      "Merapikan alur distribusi komoditas agar hasil usaha agraria terserap pasar dengan kualitas dan nilai yang lebih baik."
  }
];

export default function AboutPage() {
  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">
            {aboutNavItems.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="about-hero">
        <div className="about-hero-media" aria-hidden="true">
          <Image
            src={aboutHeroImage}
            alt=""
            fill
            priority
            className="hero-image"
            sizes="100vw"
          />
          <div className="about-hero-overlay" />
        </div>

        <div className="container about-hero-content">
          <span className="section-kicker">Tentang Kami</span>
          <h1>Membangun negeri melalui sektor agraria yang terkelola lebih baik.</h1>
          <p>
            Kelola Bumi berdedikasi memperkuat rantai nilai agribisnis Indonesia
            melalui integrasi disiplin operasional, pendekatan budidaya presisi,
            dan pemahaman lokal yang nyata sejak 2015.
          </p>
        </div>
      </section>

      <section className="section section-light">
        <div className="container about-history-grid">
          <div className="about-copy">
            <p className="section-kicker">Sejarah Perjalanan</p>
            <h2>Berawal dari inisiatif lapangan, tumbuh menjadi mitra agraria.</h2>
            <p>
              Kelola Bumi dibangun dengan fokus pada pengelolaan usaha agraria
              yang lebih terstruktur. Dari pengembangan komoditas hingga dukungan
              distribusi, kami bertumbuh bersama kebutuhan pelaku usaha tani,
              kebun, peternakan, dan perikanan di berbagai wilayah.
            </p>

            <div className="about-stats">
              <div className="about-stat">
                <strong>2015</strong>
                <span>Tahun Berdiri</span>
              </div>
              <div className="about-stat">
                <strong>500+</strong>
                <span>Inisiatif & Proyek</span>
              </div>
            </div>
          </div>

          <div className="about-image-card">
            <Image
              src={historyImage}
              alt="Aktivitas pengembangan komoditas Kelola Bumi"
              fill
              className="media-image"
              sizes="(max-width: 1024px) 100vw, 50vw"
            />
          </div>
        </div>
      </section>

      <section className="section section-soft">
        <div className="container">
          <div className="section-heading section-heading-centered">
            <p className="section-kicker">Visi & Misi</p>
            <h2>Landasan kerja untuk pertumbuhan agribisnis yang sehat.</h2>
          </div>

          <div className="about-bento-grid">
            <article className="about-vision-card">
              <span className="about-mark">Visi</span>
              <h3>
                Menjadi perusahaan agrikultur yang dipercaya untuk menghubungkan
                potensi lahan, komoditas, dan pasar secara berkelanjutan.
              </h3>
              <p>
                Kami ingin menghadirkan sistem kerja agraria yang modern namun
                tetap berpijak pada realitas lapangan dan nilai kemitraan jangka
                panjang.
              </p>
            </article>

            <article className="about-mission-intro">
              <p className="section-kicker section-kicker-inverse">Misi Strategis</p>
              <h3>Langkah nyata untuk sektor agraria yang lebih tangguh.</h3>
              <p>
                Pendekatan kami dirancang agar konsultasi, input, dan distribusi
                berjalan sebagai satu sistem yang saling menguatkan.
              </p>
            </article>

            {missions.map((mission, index) => (
              <article key={mission.title} className="about-mission-card">
                <div className="mini-icon">{String(index + 1).padStart(2, "0")}</div>
                <h4>{mission.title}</h4>
                <p>{mission.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-showcase">
        <div className="container about-purpose-grid">
          <div className="about-copy">
            <p className="section-kicker">Cara Kami Bekerja</p>
            <h2>Strategi yang dekat dengan kebutuhan riil di lapangan.</h2>
            <p>
              Setiap proyek kami awali dengan pemahaman konteks: komoditas,
              kondisi lahan, kesiapan pasokan, dan target pasar. Dari sana,
              solusi dibangun agar lebih presisi dan dapat dijalankan.
            </p>
            <a className="button button-primary" href="/contact">
              Hubungi Kami
            </a>
          </div>

          <div className="about-purpose-card">
            <div className="about-purpose-media">
              <Image
                src={strategyImage}
                alt="Komoditas unggulan Kelola Bumi"
                fill
                className="showcase-image"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
            <div className="about-purpose-body">
              <h3>Kolaborasi, presisi, dan kesinambungan.</h3>
              <p>
                Kami memadukan kualitas input, disiplin pengelolaan, dan
                orientasi pasar agar setiap tahapan usaha agraria bergerak lebih
                efisien dan bernilai.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section">
        <div className="container cta-inner">
          <div>
            <p className="section-kicker cta-kicker">Bertumbuh Bersama</p>
            <h2>Siap mendiskusikan kebutuhan agrikultur Anda?</h2>
            <p>
              Kami siap mendampingi langkah Anda melalui konsultasi, penguatan
              operasional, dan strategi pengembangan komoditas yang lebih terarah.
            </p>
          </div>
          <a className="button button-accent" href="/services">
            Lihat Layanan Kami
          </a>
        </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>
  );
}
