"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Leaf, Award } from "lucide-react";

export default function ProductsPage() {
  const navItems = [
    { name: "Hizmetler", id: "services" },
    { name: "Araçlarımız", id: "products" },
    { name: "Neden Biz", id: "metrics" },
    { name: "SSS", id: "faq" },
    { name: "İletişim", id: "contact" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Ana Sayfa", href: "/" },
        { label: "Hakkımızda", href: "/hakkimizda" },
        { label: "Hizmetler", href: "/hizmetler" },
        { label: "Ürünler", href: "/urunler" },
      ],
    },
    {
      items: [
        { label: "Kiralama", href: "/hizmetler#kiralama" },
        { label: "Satış", href: "/urunler" },
        { label: "Servis", href: "/hizmetler#servis" },
        { label: "Bakım", href: "/hizmetler#bakim" },
      ],
    },
    {
      items: [
        { label: "Sık Sorulan Sorular", href: "#faq" },
        { label: "İletişim", href: "/iletisim" },
        { label: "Gizlilik Politikası", href: "#" },
        { label: "Kullanım Şartları", href: "#" },
      ],
    },
    {
      items: [
        { label: "Bize Yazın", href: "mailto:info@timforklift.com.tr" },
        { label: "Çağrı Merkezi", href: "tel:+901234567890" },
        { label: "Acil Servis", href: "tel:+901234567890" },
        { label: "Ticaret Mühendisliği", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="medium"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Tim Forklift" navItems={navItems} />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Araçlarımız - Yeni Nesil Forklift Teknolojisi"
          description="Çevre dostu akülü ve lityum teknoloji ile işletmenizin verimliliğini artırın. Düşük işletme maliyeti ve uzun ömür garantisi."
          background={{ variant: "canvas-reveal" }}
          tag="Çevreci Teknoloji"
          tagIcon={Leaf}
          buttons={[
            { text: "Teklif İsteyin", href: "/iletisim" },
            { text: "Daha Fazla Bilgi", href: "/hizmetler" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=7"
          imageAlt="Yeni Nesil Forklift Teknolojisi"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Araçlarımız"
          description="Yeni nesil akülü ve lityum teknoloji ile çevre dostu forklift çözümleri. Kiralama ve satış seçenekleri mevcuttur."
          tag="Çevreci Teknoloji"
          tagIcon={Leaf}
          products={[
            {
              id: "1",              name: "Akülü Forklift 1.5T",              price: "Kiralama: ₺2.500/ay",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=8",              imageAlt: "Akülü Forklift 1.5T"},
            {
              id: "2",              name: "Lityum Forklift 2.0T",              price: "Kiralama: ₺3.200/ay",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=9",              imageAlt: "Lityum Forklift 2.0T"},
            {
              id: "3",              name: "Akülü Forklift 2.5T",              price: "Kiralama: ₺3.800/ay",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=10",              imageAlt: "Akülü Forklift 2.5T"},
            {
              id: "4",              name: "Lityum Forklift 3.0T",              price: "Kiralama: ₺4.200/ay",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=11",              imageAlt: "Lityum Forklift 3.0T"},
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="product-specs" data-section="product-specs">
        <MetricCardSeven
          title="Teknik Özellikler"
          description="Tim Forklift araçları, ISO standartları ve Türkiye çevre yasaları uyumlu olarak tasarlanmış ve bakımı yapılmaktadır."
          tag="Teknik Standartlar"
          tagIcon={Award}
          metrics={[
            {
              id: "1",              value: "%65",              title: "Akülü ve Lityum Teknoloji",              items: [
                "Çevre dostu çözümler",                "Düşük işletme maliyeti",                "Sessiz çalışma"],
            },
            {
              id: "2",              value: "Tüm Kapasiteler",              title: "1.5T - 3.5T",              items: [
                "Esnek kiralama seçenekleri",                "Hızlı teslimat",                "Profesyonel kurulum"],
            },
            {
              id: "3",              value: "24/7",              title: "Teknik Destek",              items: [
                "Acil müdahale garantisi",                "Yedek parça stoku",                "Uzman teknisyenler"],
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis logoText="Tim Forklift A.Ş." columns={footerColumns} />
      </div>
    </ThemeProvider>
  );
}