import Image, { type StaticImageData } from "next/image";
import alpukatImage from "../images/alpukat.jpg";
import fileEightImage from "../images/file8.jpg";
import kelorImage from "../images/kelor.jpg";
import kambingImage from "../images/kambing-pe.jpg";
import udangImage from "../images/udang-1.jpg";

type MiniCard = {
  title: string;
  description: string;
  icon: string;
  tone: "primary" | "secondary" | "tertiary";
};

type ServiceCard = {
  title: string;
  description: string;
  image: StaticImageData;
  badgeLeft: string;
  badgeRight: string;
};

const navItems = [
  { label: "Home", href: "#home" },
  { label: "Tentang", href: "/about" },
  { label: "Layanan", href: "/services" },
  { label: "Kontak", href: "/contact" }
];

const miniCards: MiniCard[] = [
  {
    title: "Konsultasi Ahli",
    description:
      "Strategi agronomis berbasis data untuk menaikkan produktivitas lahan dengan pendekatan terukur.",
    icon: "01",
    tone: "primary"
  },
  {
    title: "Sarana Produksi",
    description:
      "Benih, pupuk, bibit, dan dukungan budidaya yang dipilih untuk menjaga kualitas serta efisiensi usaha tani.",
    icon: "02",
    tone: "secondary"
  },
  {
    title: "Distribusi Unggul",
    description:
      "Pengelolaan hasil panen dan komoditas agribisnis agar sampai ke pasar dengan nilai ekonomi terbaik.",
    icon: "03",
    tone: "tertiary"
  }
];

const serviceCards: ServiceCard[] = [
  {
    title: "Agronomy Consulting",
    description:
      "Pemetaan kebutuhan kebun, evaluasi varietas, dan pendampingan tanam sampai panen untuk lahan produktif.",
    image: kelorImage,
    badgeLeft: "Certified Experts",
    badgeRight: "Data Driven"
  },
  {
    title: "Integrated Supply",
    description:
      "Rantai pasok input agribisnis dari pembibitan, penguatan kebun, sampai pengembangan komoditas unggulan.",
    image: alpukatImage,
    badgeLeft: "Premium Input",
    badgeRight: "Reliable Network"
  },
  {
    title: "Market Access",
    description:
      "Konektivitas pasar untuk komoditas hasil kebun, peternakan, dan perikanan melalui jejaring distribusi yang rapi.",
    image: udangImage,
    badgeLeft: "Direct Market",
    badgeRight: "Fair Value"
  }
];

export default function HomePage() {
  return (
    <main className="page-shell" id="home">
      <header className="topbar">
        <div className="container topbar-inner">
          <a className="brand" href="#home" 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">
            {navItems.map((item) => (
              <a key={item.label} href={item.href}>
                {item.label}
              </a>
            ))}
          </nav>

          <a className="button button-primary topbar-cta" href="/contact">
            Konsultasi Sekarang
          </a>
        </div>
      </header>

      <section className="hero">
        <div className="hero-image-wrap" aria-hidden="true">
          <Image
            src={fileEightImage}
            alt=""
            fill
            priority
            className="hero-image"
            sizes="100vw"
          />
          <div className="hero-overlay" />
        </div>

        <div className="container hero-content">
          <div className="hero-copy">
            <span className="eyebrow">SINCE 2015 • PRECISION AGRICULTURE</span>
            <h1>Solusi terintegrasi untuk pertanian berkelanjutan dan inovatif.</h1>
            <p>
              Kelola Bumi membangun ekosistem agribisnis dari hulu ke hilir
              melalui konsultasi ahli, pengadaan sarana produksi, dan distribusi
              komoditas unggulan Indonesia.
            </p>
            <div className="hero-actions">
              <a className="button button-primary" href="#layanan">
                Mulai Transformasi
                <span aria-hidden="true">→</span>
              </a>
              <a className="button button-secondary" href="/about">
                Lihat Profil Perusahaan
              </a>
            </div>
          </div>

          <div className="hero-panel">
            <div className="hero-stat-card">
              <span className="stat-label">Fokus Ekosistem</span>
              <strong>Tanaman, peternakan, dan perikanan</strong>
              <p>
                Portofolio aset lokal diintegrasikan dalam pendekatan budidaya
                yang relevan dengan kondisi lapangan.
              </p>
            </div>

            <div className="hero-highlight-grid">
              <article>
                <span>01</span>
                <h3>Produktivitas</h3>
                <p>Optimasi lahan berbasis kebutuhan spesifik komoditas.</p>
              </article>
              <article>
                <span>02</span>
                <h3>Keberlanjutan</h3>
                <p>Pendekatan budidaya yang menjaga mutu tanah dan hasil.</p>
              </article>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-light" id="tentang">
        <div className="container">
          <div className="section-heading section-heading-centered">
            <p className="section-kicker">Tentang Kami</p>
            <h2>Pionir agribisnis modern yang membumi.</h2>
          </div>

          <div className="bento-grid">
            <article className="bento-identity">
              <div className="media-backdrop">
                <Image
                  src={kelorImage}
                  alt="Komoditas tanaman Kelola Bumi"
                  fill
                  className="media-image"
                  sizes="(max-width: 1024px) 100vw, 66vw"
                />
              </div>
              <div className="identity-copy">
                <p className="section-kicker">Profil Singkat</p>
                <h3>Menjembatani potensi lokal dengan sistem budidaya presisi.</h3>
                <p>
                  Kelola Bumi hadir untuk mempertemukan pengalaman lapangan,
                  jaringan distribusi, dan orientasi kualitas dalam satu rantai
                  nilai agribisnis yang lebih sehat.
                </p>
              </div>
            </article>

            <article className="bento-years">
              <div className="icon-badge">KB</div>
              <div>
                <strong>9+</strong>
                <h3>Tahun Berdedikasi</h3>
                <p>
                  Mengawal pengembangan komoditas dengan disiplin operasional
                  sejak 2015.
                </p>
              </div>
            </article>

            {miniCards.map((card) => (
              <article
                key={card.title}
                className={`mini-card mini-card-${card.tone}`}
                id={card.title === "Distribusi Unggul" ? "keunggulan" : undefined}
              >
                <div className="mini-icon">{card.icon}</div>
                <h4>{card.title}</h4>
                <p>{card.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-soft" id="layanan">
        <div className="container">
          <div className="section-heading section-heading-split">
            <div>
              <p className="section-kicker">Layanan Inti</p>
              <h2>Layanan terintegrasi untuk setiap tahap pengembangan usaha.</h2>
            </div>
            <p className="section-side-note">
              Pendekatan holistik untuk pembibitan, penguatan kebun, pengolahan
              komoditas, dan akses pasar yang lebih stabil.
            </p>
          </div>

          <div className="services-grid">
            {serviceCards.map((card) => (
              <article key={card.title} className="service-card">
                <div className="service-image-wrap">
                  <Image
                    src={card.image}
                    alt={card.title}
                    fill
                    className="service-image"
                    sizes="(max-width: 1024px) 100vw, 33vw"
                  />
                </div>
                <div className="service-body">
                  <h3>{card.title}</h3>
                  <p>{card.description}</p>
                  <div className="service-badges">
                    <span>{card.badgeLeft}</span>
                    <span>{card.badgeRight}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-showcase">
        <div className="container showcase-grid">
          <div className="showcase-copy">
            <p className="section-kicker">Portofolio Komoditas</p>
            <h2>Dukungan visual dan lapangan yang dekat dengan realitas agribisnis.</h2>
            <p>
              Aset lokal dari folder `images` kami gunakan untuk membangun
              identitas visual yang terasa relevan dengan sektor pertanian,
              peternakan, dan perikanan.
            </p>
            <a className="button button-primary" href="/contact">
              Diskusikan Kebutuhan Anda
            </a>
          </div>

          <div className="showcase-stack" aria-label="Galeri komoditas unggulan">
            <figure className="showcase-tall">
              <Image
                src={alpukatImage}
                alt="Komoditas alpukat"
                fill
                className="showcase-image"
                sizes="(max-width: 1024px) 100vw, 30vw"
              />
            </figure>
            <figure className="showcase-small">
              <Image
                src={kambingImage}
                alt="Peternakan kambing"
                fill
                className="showcase-image"
                sizes="(max-width: 1024px) 50vw, 20vw"
              />
            </figure>
            <figure className="showcase-small">
              <Image
                src={udangImage}
                alt="Budidaya udang"
                fill
                className="showcase-image"
                sizes="(max-width: 1024px) 50vw, 20vw"
              />
            </figure>
          </div>
        </div>
      </section>

      <section className="cta-section" id="cta-konsultasi">
        <div className="container cta-inner">
          <div>
            <p className="section-kicker cta-kicker">Mulai Konsultasi</p>
            <h2>Siap memajukan pertanian bersama Kelola Bumi?</h2>
            <p>
              Hubungi tim kami untuk membahas strategi budidaya, kebutuhan
              pasokan, atau pengembangan pasar yang paling sesuai.
            </p>
          </div>
          <a className="button button-accent" href="/contact">
            Jadwalkan Konsultasi Gratis
          </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>
  );
}