import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { Card, CardContent } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Textarea } from "~/components/ui/textarea";
import {
  Play,
  Download,
  Apple,
  Check,
  ChevronDown,
  Star,
  Users,
  Calendar,
  MapPin,
  Truck,
  BarChart3,
  Recycle,
  ArrowLeft,
  ArrowRight
} from "lucide-react";
import { CardBody, CardContainer, CardItem } from "~/components/ui/3d-card";
import { MacbookScroll } from "~/components/ui/macbook-scroll";

interface Feature {
  icon: React.ReactNode | string;
  title: string;
  description: string;
}

interface StakeholderFeature {
  title: string;
  icon: string;
  features: string[];
}

interface WorkStep {
  icon: React.ReactNode | string;
  title: string;
  description: string;
}

interface Testimonial {
  name: string;
  role: string;
  avatar: string;
  rating: number;
  comment: string;
}

interface Blog {
  title: string;
  excerpt: string;
  author: string;
  date: string;
  image: string;
}

interface FAQ {
  question: string;
  answer: string;
}

// Data constants
const features: Feature[] = [
  {
    icon: <MapPin className="h-8 w-8" />,
    title: "Cari Pengepul Terdekat",
    description:
      "Temukan pengepul sampah terdekat dari lokasi Anda dengan mudah dan cepat menggunakan fitur pencarian berbasis GPS."
  },
  {
    icon: <Truck className="h-8 w-8" />,
    title: "Request Penjemputan",
    description:
      "Minta penjemputan sampah langsung dari rumah Anda dengan sistem booking yang mudah dan terpercaya."
  },
  {
    icon: <BarChart3 className="h-8 w-8" />,
    title: "Tracking Progress",
    description:
      "Pantau status penjemputan sampah Anda secara real-time dari permintaan hingga transaksi selesai."
  },
  {
    icon: "📊",
    title: "Pencatatan Penjualan",
    description:
      "Catat semua transaksi penjualan sampah dan monitor pendapatan yang diperoleh dari aktivitas daur ulang."
  },
  {
    icon: "💰",
    title: "Manajemen Keuangan",
    description:
      "Kelola dan pantau uang yang didapat dari penjualan sampah dengan sistem pencatatan yang rapi dan akurat."
  },
  {
    icon: <Recycle className="h-8 w-8" />,
    title: "Visualisasi Data",
    description:
      "Lihat data penjualan, tren harga, dan dampak lingkungan melalui dashboard yang informatif dan mudah dipahami."
  }
];

const stakeholderFeatures: StakeholderFeature[] = [
  {
    title: "Fitur untuk Masyarakat",
    icon: "🏠",
    features: [
      "Temukan pengepul terdekat dengan GPS",
      "Request penjemputan sampah dari rumah",
      "Tracking real-time status pickup",
      "Pencatatan lengkap penjualan sampah",
      "Monitor pendapatan dari sampah",
      "Visualisasi data dan statistik personal"
    ]
  },
  {
    title: "Fitur untuk Pengepul",
    icon: "🚛",
    features: [
      "Terima dan kelola request pickup",
      "Pencatatan transaksi dengan masyarakat",
      "Manajemen stok sampah yang terkumpul",
      "Dashboard analisis bisnis lengkap",
      "Sistem notifikasi otomatis",
      "Laporan keuangan dan operasional"
    ]
  },
  {
    title: "Fitur untuk Pengelola",
    icon: "🏭",
    features: [
      "Monitor pengepul dan stok tersedia",
      "Identifikasi supplier potensial",
      "Pencatatan supply chain management",
      "Quality control system terintegrasi",
      "Production planning tools",
      "Environmental impact reports"
    ]
  }
];

const workSteps: WorkStep[] = [
  {
    icon: <Download className="h-10 w-10" />,
    title: "Download Aplikasi Rijig",
    description:
      "Unduh aplikasi Rijig dari Play Store atau App Store dan daftar sesuai dengan peran Anda sebagai masyarakat, pengepul, atau pengelola."
  },
  {
    icon: <Users className="h-10 w-10" />,
    title: "Lengkapi Profil Anda",
    description:
      "Isi data diri lengkap dan verifikasi akun untuk keamanan transaksi dan membangun kepercayaan antar pengguna dalam ekosistem."
  },
  {
    icon: "🌱",
    title: "Mulai Kelola Sampah",
    description:
      "Mulai jual sampah, kelola bisnis pengepulan, atau operasikan fasilitas daur ulang dengan sistem yang terintegrasi dan mudah digunakan."
  }
];

const testimonials: Testimonial[] = [
  {
    name: "Budi Santoso",
    role: "Pengepul Sampah - Jakarta Timur",
    avatar: "👨‍💼",
    rating: 5,
    comment:
      "Dengan Rijig, bisnis pengepulan saya jadi lebih terorganisir. Bisa tracking semua transaksi dan jaringan supplier dari masyarakat makin luas. Revenue meningkat 40% sejak pakai aplikasi ini."
  },
  {
    name: "Sari Wijaya",
    role: "Ibu Rumah Tangga - Bekasi",
    avatar: "👩‍🦰",
    rating: 5,
    comment:
      "Sangat memudahkan untuk jual sampah rumah tangga. Harga transparan, pengepul bisa dijemput ke rumah, dan prosesnya cepat. Sekarang sampah rumah tangga bisa jadi tambahan penghasilan yang lumayan!"
  },
  {
    name: "PT. Green Recycle Indonesia",
    role: "Pengelola Fasilitas Daur Ulang",
    avatar: "🏭",
    rating: 5,
    comment:
      "Supply chain management jadi jauh lebih efisien dengan Rijig. Bisa monitor kualitas bahan baku dari berbagai pengepul dan planning produksi berdasarkan data yang akurat dan real-time."
  },
  {
    name: "Ahmad Rahman",
    role: "Ketua RT 05 - Depok",
    avatar: "👨‍🔬",
    rating: 5,
    comment:
      "Lingkungan RT kami jadi lebih bersih sejak menggunakan Rijig. Warga antusias karena sampah bisa jadi uang, dan sistem pickup memudahkan mereka yang sibuk bekerja!"
  }
];

const blogs: Blog[] = [
  {
    title: "5 Jenis Sampah yang Paling Menguntungkan untuk Dijual",
    excerpt:
      "Pelajari jenis-jenis sampah yang memiliki nilai ekonomi tinggi dan cara memilahnya dengan benar untuk mendapatkan harga terbaik dari pengepul.",
    author: "Tim Rijig",
    date: "15 Juni 2025",
    image: "♻️"
  },
  {
    title: "Tips Memulai Bisnis Pengepul Sampah untuk Pemula",
    excerpt:
      "Panduan lengkap untuk memulai bisnis pengepulan sampah, mulai dari modal awal hingga strategi pemasaran yang efektif menggunakan platform digital.",
    author: "Tim Rijig",
    date: "10 Juni 2025",
    image: "💼"
  },
  {
    title: "Dampak Positif Daur Ulang Terhadap Lingkungan Indonesia",
    excerpt:
      "Mengenal lebih dalam bagaimana industri daur ulang berkontribusi dalam mengurangi pencemaran lingkungan dan ekonomi sirkular di Indonesia.",
    author: "Tim Rijig",
    date: "5 Juni 2025",
    image: "🌱"
  }
];

const faqs: FAQ[] = [
  {
    question: "Apakah aplikasi Rijig gratis untuk digunakan?",
    answer:
      "Ya, aplikasi Rijig gratis untuk diunduh dan digunakan oleh masyarakat umum. Untuk pengepul dan pengelola, tersedia fitur premium dengan biaya berlangganan yang terjangkau sesuai kebutuhan bisnis."
  },
  {
    question: "Bagaimana cara kerja sistem penjemputan sampah?",
    answer:
      "Masyarakat dapat membuat request pickup melalui aplikasi, memilih pengepul terdekat, menentukan jadwal penjemputan. Pengepul akan mendapat notifikasi dan dapat menerima atau menolak request berdasarkan kapasitas dan lokasi."
  },
  {
    question: "Bagaimana Rijig memastikan harga sampah yang fair?",
    answer:
      "Kami menggunakan sistem harga transparan berdasarkan harga pasar real-time, jenis dan kualitas sampah, serta volume. Sistem rating dan review membantu menjaga kualitas transaksi untuk semua pihak."
  },
  {
    question: "Apakah data dan transaksi di Rijig aman?",
    answer:
      "Sangat aman. Kami menggunakan enkripsi data tingkat bank, sistem pembayaran terintegrasi yang aman, dan verifikasi identitas pengguna untuk memastikan keamanan dan kepercayaan dalam ekosistem."
  }
];

// Component definitions
const FeatureCard = ({
  feature,
  index
}: {
  feature: Feature;
  index: number;
}) => (
  <div className="text-center group hover:scale-105 transition-transform duration-200">
    <div className="w-20 h-20 mx-auto mb-6 bg-gray-100 dark:bg-gray-800 rounded-3xl flex items-center justify-center text-green-600 group-hover:bg-green-600 group-hover:text-white transition-colors duration-300">
      {typeof feature.icon === "string" ? (
        <span className="text-3xl">{feature.icon}</span>
      ) : (
        feature.icon
      )}
    </div>
    <h3 className="text-xl font-semibold mb-4 text-black dark:text-white">
      {feature.title}
    </h3>
    <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
  </div>
);

const StakeholderCard = ({
  stakeholder,
  index
}: {
  stakeholder: StakeholderFeature;
  index: number;
}) => (
  <CardContainer key={index} className="inter-var">
    <CardBody className="bg-white relative group/card dark:hover:shadow-2xl dark:hover:shadow-green-500/[0.1] dark:bg-gray-800 dark:border-white/[0.2] border-black/[0.1] w-auto h-auto rounded-xl p-6 border shadow-sm">
      <div className="text-center pb-6">
        <CardItem
          translateZ="50"
          className="w-16 h-16 mx-auto mb-4 bg-green-100 dark:bg-green-900 rounded-2xl flex items-center justify-center text-3xl"
        >
          {stakeholder.icon}
        </CardItem>
        <CardItem
          translateZ="60"
          className="text-xl font-bold text-black dark:text-white"
        >
          {stakeholder.title}
        </CardItem>
      </div>

      <CardItem translateZ="80" className="space-y-3">
        {stakeholder.features.map((feature, fIndex) => (
          <div key={fIndex} className="flex items-start space-x-3">
            <Check className="h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
            <span className="text-sm text-gray-600 dark:text-gray-300">
              {feature}
            </span>
          </div>
        ))}
      </CardItem>

      <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
        <CardItem
          translateZ={20}
          as="button"
          className="w-full px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-medium transition-colors duration-200"
        >
          Pelajari Lebih Lanjut
        </CardItem>
      </div>
    </CardBody>
  </CardContainer>
);

const WorkStepCard = ({ step, index }: { step: WorkStep; index: number }) => (
  <div className="text-center group">
    <div className="w-20 h-20 mx-auto mb-6 bg-gray-100 dark:bg-gray-800 rounded-3xl flex items-center justify-center text-green-600 group-hover:bg-green-600 group-hover:text-white transition-colors duration-300">
      {typeof step.icon === "string" ? (
        <span className="text-3xl">{step.icon}</span>
      ) : (
        step.icon
      )}
    </div>
    <h3 className="text-xl font-semibold mb-4 text-black dark:text-white">
      {step.title}
    </h3>
    <p className="text-gray-600 dark:text-gray-300">{step.description}</p>
  </div>
);

const TestimonialCard = ({
  testimonial,
  index
}: {
  testimonial: Testimonial;
  index: number;
}) => (
  <Card className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    <div className="border-b border-gray-200 dark:border-gray-700 pb-6 mb-6">
      <p className="text-gray-600 dark:text-gray-300">
        "{testimonial.comment}"
      </p>
    </div>

    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div className="flex items-center space-x-4">
        <div className="w-14 h-14 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center text-2xl flex-shrink-0">
          {testimonial.avatar}
        </div>
        <div>
          <h5 className="font-medium text-black dark:text-white">
            {testimonial.name}
          </h5>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {testimonial.role}
          </p>
        </div>
      </div>

      <div className="flex items-center space-x-2">
        <span className="font-medium text-gray-900 dark:text-gray-100">
          {testimonial.rating}
        </span>
        <div className="flex space-x-1">
          {[...Array(testimonial.rating)].map((_, i) => (
            <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
          ))}
        </div>
      </div>
    </div>
  </Card>
);

const BlogCard = ({ blog, index }: { blog: Blog; index: number }) => (
  <Card className="overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    <div className="relative">
      <div className="aspect-video bg-gradient-to-br from-green-400 to-blue-600 flex items-center justify-center">
        <span className="text-4xl md:text-6xl text-white">{blog.image}</span>
      </div>
      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end p-4">
        <div className="flex flex-wrap items-center gap-4 text-white text-sm">
          <div className="flex items-center space-x-1">
            <Users className="h-4 w-4" />
            <span>{blog.author}</span>
          </div>
          <div className="flex items-center space-x-1">
            <Calendar className="h-4 w-4" />
            <span>{blog.date}</span>
          </div>
        </div>
      </div>
    </div>

    <CardContent className="p-6">
      <h3 className="text-xl font-semibold mb-3 text-black dark:text-white line-clamp-2">
        {blog.title}
      </h3>
      <p className="text-gray-600 dark:text-gray-300 mb-6 line-clamp-3">
        {blog.excerpt}
      </p>
      <Button className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 rounded-lg">
        Baca Selengkapnya
      </Button>
    </CardContent>
  </Card>
);

const FAQItem = ({ faq, index }: { faq: FAQ; index: number }) => (
  <details className="group">
    <summary className="flex items-center justify-between p-6 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
      <span className="font-medium text-black dark:text-white">
        {faq.question}
      </span>
      <ChevronDown className="h-5 w-5 text-gray-500 dark:text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4" />
    </summary>
    <div className="px-6 pb-6 border-t border-gray-200 dark:border-gray-700">
      <p className="text-gray-600 dark:text-gray-300 pt-4">{faq.answer}</p>
    </div>
  </details>
);

const DashboardFeatureCard = ({
  icon,
  title,
  description,
  features,
  iconBg
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
  features: string[];
  iconBg: string;
}) => (
  <Card className="p-6 border-2 border-gray-200 dark:border-gray-700 hover:border-green-500 dark:hover:border-green-400 transition-colors bg-white dark:bg-gray-800">
    <div
      className={`w-14 h-14 ${iconBg} rounded-2xl flex items-center justify-center mb-4`}
    >
      {icon}
    </div>
    <h3 className="text-xl font-semibold mb-3 text-black dark:text-white">
      {title}
    </h3>
    <p className="text-gray-600 dark:text-gray-300 mb-4">{description}</p>
    <ul className="space-y-2">
      {features.map((feature, index) => (
        <li
          key={index}
          className="flex items-center text-sm text-gray-600 dark:text-gray-300"
        >
          <Check className="h-4 w-4 text-green-500 mr-2" />
          {feature}
        </li>
      ))}
    </ul>
  </Card>
);

export default function LandingIndex() {
  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      <section
        id="home"
        className="min-h-screen flex items-center relative bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 overflow-hidden"
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[length:50px_50px]" />

        <div className="container mx-auto max-w-[1400px] px-4 pt-20 relative z-10">
          <div className="grid lg:grid-cols-12 gap-8 items-center">
            <div className="lg:col-span-7 space-y-6">
              <Badge
                variant="secondary"
                className="text-lg px-4 py-2 bg-white/90 text-green-700"
              >
                Solusi Digital untuk Ekonomi Sirkular
              </Badge>

              <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-white leading-tight drop-shadow-lg">
                Rijig - Platform{" "}
                <span className="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
                  Pengelolaan Sampah
                </span>{" "}
                Terpadu Indonesia
              </h1>

              <p className="text-lg text-white/90 max-w-[475px] drop-shadow-md">
                Menghubungkan masyarakat, pengepul, dan pengelola daur ulang
                dalam satu ekosistem digital yang memudahkan pengelolaan sampah
                dan menciptakan nilai ekonomi berkelanjutan.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <Button
                  size="lg"
                  className="bg-white text-green-600 hover:bg-gray-100 shadow-lg"
                >
                  <span className="mr-4 border-r border-green-300 pr-4">
                    Download Rijig
                  </span>
                  <Apple className="h-5 w-5" />
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  className="group bg-white/10 border-white/30 text-white hover:bg-white/20 backdrop-blur-sm"
                >
                  <div className="mr-3 flex h-12 w-12 items-center justify-center rounded-full border-2 border-current">
                    <Play className="h-4 w-4 fill-current" />
                  </div>
                  <div className="text-left">
                    <div className="text-sm">Lihat Demo</div>
                    <div className="text-xs opacity-70">
                      Cara kerja aplikasi
                    </div>
                  </div>
                </Button>
              </div>
            </div>

            <div className="lg:col-span-5">
              <div className="relative mx-auto max-w-[530px]">
                <div className="relative bg-gradient-to-br from-white/20 to-white/10 backdrop-blur-sm rounded-full aspect-square border border-white/20">
                  <div className="absolute inset-8 bg-white/95 dark:bg-gray-800/95 rounded-3xl shadow-2xl flex items-center justify-center backdrop-blur-sm">
                    <div className="text-center">
                      <div className="text-6xl md:text-8xl mb-4">♻️</div>
                      <h3 className="text-xl font-semibold mb-2 text-green-600">
                        Rijig
                      </h3>
                      <p className="text-gray-600 dark:text-gray-300">
                        Kelola sampah dengan bijak
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute bottom-10 left-0 right-0 z-30 pointer-events-none">
          <div className="flex flex-col items-center text-white animate-bounce">
            <div className="text-sm mb-2 opacity-80 text-center">
              Scroll untuk melihat lebih
            </div>
            <div className="w-6 h-10 border-2 border-white rounded-full relative mx-auto">
              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-3 bg-white rounded-full animate-pulse" />
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto max-w-[1390px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Fitur Lengkap untuk Semua Pengguna
            </h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Rijig menyediakan solusi terintegrasi yang menghubungkan
              masyarakat, pengepul, dan pengelola daur ulang dalam satu platform
              yang mudah digunakan dan efisien.
            </p>
          </div>

          <Card className="p-6 md:p-12 lg:p-16 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {features.map((feature, index) => (
                <FeatureCard key={index} feature={feature} index={index} />
              ))}
            </div>
          </Card>
        </div>
      </section>

      {/* Stakeholder Features Section */}
      <section
        id="stakeholder-features"
        className="py-20 bg-gray-50 dark:bg-gray-900"
      >
        <div className="container mx-auto max-w-[1390px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Fitur Khusus untuk Setiap Stakeholder
            </h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Rijig dirancang khusus untuk memenuhi kebutuhan berbeda dari
              setiap pemangku kepentingan dalam ekosistem pengelolaan sampah.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {stakeholderFeatures.map((stakeholder, index) => (
              <StakeholderCard
                key={index}
                stakeholder={stakeholder}
                index={index}
              />
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto max-w-[1120px] px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
            <div className="relative">
              <div className="relative bg-gradient-to-br from-green-400 to-blue-600 rounded-3xl h-80 md:h-96 flex items-center justify-center">
                <div className="text-white text-6xl md:text-8xl">📊</div>
                <div className="absolute top-5 right-5 text-3xl">📈</div>
                <div className="absolute bottom-10 left-0 text-2xl">♻️</div>
              </div>
            </div>

            <div className="space-y-6">
              <Badge
                variant="outline"
                className="text-green-600 dark:text-green-400 border-green-600 dark:border-green-400"
              >
                Pantau Aktivitas Sampah Real-time
              </Badge>
              <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white">
                Tracking Lengkap dari Pickup hingga Daur Ulang
              </h2>
              <p className="text-gray-600 dark:text-gray-300">
                Monitor seluruh proses pengelolaan sampah mulai dari permintaan
                penjemputan, transaksi, hingga proses daur ulang dengan
                dashboard yang informatif dan update real-time.
              </p>

              <div className="space-y-4">
                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center text-green-600 font-semibold">
                    01
                  </div>
                  <div>
                    <h5 className="font-medium text-black dark:text-white">
                      Status Pickup Real-time
                    </h5>
                    <p className="text-gray-600 dark:text-gray-300 text-sm">
                      Pantau status penjemputan sampah dari request hingga
                      selesai dengan notifikasi langsung.
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center text-green-600 font-semibold">
                    02
                  </div>
                  <div>
                    <h5 className="font-medium text-black dark:text-white">
                      Pencatatan & Analisis Otomatis
                    </h5>
                    <p className="text-gray-600 dark:text-gray-300 text-sm">
                      Sistem pencatatan otomatis dan analisis data untuk
                      membantu optimalisasi pengelolaan sampah.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6 lg:order-2">
              <Badge
                variant="outline"
                className="text-green-600 dark:text-green-400 border-green-600 dark:border-green-400"
              >
                Dampak Lingkungan Terukur
              </Badge>
              <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white">
                Visualisasi Kontribusi Anda untuk Lingkungan
              </h2>
              <p className="text-gray-600 dark:text-gray-300">
                Lihat secara visual dampak positif yang Anda berikan terhadap
                lingkungan melalui aktivitas pengelolaan sampah dan daur ulang
                dalam dashboard yang mudah dipahami.
              </p>
              <Button className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 rounded-lg">
                Pelajari Lebih Lanjut
              </Button>
            </div>

            <div className="relative lg:order-1">
              <div className="relative bg-gradient-to-br from-orange-400 to-green-600 rounded-3xl h-80 md:h-96 flex items-center justify-center">
                <div className="text-white text-6xl md:text-8xl">🌍</div>
                <div className="absolute top-5 right-5 text-3xl">🌱</div>
                <div className="absolute bottom-10 left-0 text-2xl">💚</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Work Process Section */}
      <section id="work-process" className="py-20 bg-gray-50 dark:bg-gray-900">
        <div className="container mx-auto max-w-[1390px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Bagaimana Cara Kerjanya?
            </h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Bergabung dengan ekosistem pengelolaan sampah yang berkelanjutan
              hanya dalam 3 langkah mudah dan mulai berkontribusi untuk
              lingkungan yang lebih bersih.
            </p>
          </div>

          <Card className="p-6 md:p-12 lg:p-16 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
            <div className="grid md:grid-cols-3 gap-8">
              {workSteps.map((step, index) => (
                <WorkStepCard key={index} step={step} index={index} />
              ))}
            </div>
          </Card>
        </div>
      </section>

      {/* Screenshots Section */}
      <section id="screens" className="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto max-w-[1000px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Screenshot Aplikasi
            </h2>
            <p className="text-gray-600 dark:text-gray-300">
              Lihat tampilan antarmuka aplikasi Rijig yang user-friendly dan
              mudah digunakan untuk semua kalangan pengguna.
            </p>
          </div>

          <div className="relative">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                { icon: "🏠", title: "Dashboard Masyarakat" },
                { icon: "📊", title: "Panel Pengepul" },
                { icon: "🏭", title: "Sistem Daur Ulang" }
              ].map((screen, index) => (
                <div key={index} className="mx-auto max-w-[265px]">
                  <div className="relative bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl aspect-[9/19] flex items-center justify-center overflow-hidden">
                    <div className="text-center p-4">
                      <div className="text-4xl md:text-6xl mb-4">
                        {screen.icon}
                      </div>
                      <p className="text-gray-600 dark:text-gray-300 text-sm">
                        {screen.title}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="flex items-center justify-center gap-4 mt-8">
              <Button
                variant="outline"
                size="icon"
                className="border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
              >
                <ArrowLeft className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                className="border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
              >
                <ArrowRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* MacbookScroll Section */}
      <section
        id="app-showcase"
        className="relative bg-white dark:bg-black z-10"
      >
        <MacbookScroll
          src="/assets/dashboard_example.png"
          title={
            <span>
              Aplikasi Rijig dibangun dengan teknologi modern. <br />
              <span className="text-green-600 dark:text-green-400">
                Pengalaman pengguna yang luar biasa.
              </span>
            </span>
          }
          landingTargetId="product-showcase"
          landingOffset={-150}
          showGradient={true}
          badge={
            <div className="bg-blue-500 dark:bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
              Live Demo
            </div>
          }
        />
      </section>

      {/* Product Showcase Section */}
      <section className="relative py-20 bg-gray-50 dark:bg-gray-900 -mt-10 lg:-mt-20 pt-20 lg:pt-40">
        <div className="container mx-auto max-w-[1390px] px-4">
          <div className="text-center mb-16">
            <Badge
              variant="outline"
              className="text-green-600 dark:text-green-400 border-green-600 dark:border-green-400 mb-4"
            >
              Dashboard Analytics
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Dashboard Powerful untuk Monitoring Real-time
            </h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Pantau seluruh aktivitas pengelolaan sampah dengan dashboard yang
              informatif, real-time, dan mudah dipahami untuk semua stakeholder.
            </p>
          </div>

          <div className="mb-16" id="product-showcase">
            <div className="max-w-6xl mx-auto">
              <div className="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 rounded-2xl p-4 md:p-8 shadow-2xl relative">
                <div className="aspect-video rounded-xl bg-white dark:bg-gray-900 border-2 border-dashed border-green-400 flex items-center justify-center relative overflow-hidden">
                  <div className="text-center">
                    <div className="text-6xl mb-4">📊</div>
                    <h3 className="text-xl font-semibold text-gray-600 dark:text-gray-300">
                      Dashboard Preview
                    </h3>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 mb-16">
            <DashboardFeatureCard
              icon={<BarChart3 className="h-7 w-7 text-green-600" />}
              title="Analytics & Insights"
              description="Visualisasi data penjualan, tren harga sampah, dan analisis performa bisnis dalam bentuk grafik yang mudah dipahami."
              features={[
                "Grafik pendapatan harian/bulanan",
                "Analisis jenis sampah terlaris",
                "Perbandingan harga pasar"
              ]}
              iconBg="bg-green-100 dark:bg-green-900"
            />

            <DashboardFeatureCard
              icon={<MapPin className="h-7 w-7 text-blue-600" />}
              title="Live Tracking Map"
              description="Peta interaktif untuk monitoring lokasi pengepul, status pickup, dan optimasi rute penjemputan secara real-time."
              features={[
                "Lokasi pengepul terdekat",
                "Status pickup real-time",
                "Estimasi waktu kedatangan"
              ]}
              iconBg="bg-blue-100 dark:bg-blue-900"
            />

            <DashboardFeatureCard
              icon={<Users className="h-7 w-7 text-purple-600" />}
              title="Network Management"
              description="Kelola jaringan masyarakat, pengepul, dan pengelola dalam satu dashboard terintegrasi dengan fitur komunikasi."
              features={[
                "Database supplier & customer",
                "Rating & review system",
                "In-app messaging"
              ]}
              iconBg="bg-purple-100 dark:bg-purple-900"
            />
          </div>

          <Card className="p-8 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700">
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 text-center">
              <div>
                <div className="text-3xl font-bold text-green-600 mb-1">
                  2.5 Ton
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-300">
                  Sampah Terkumpul Hari Ini
                </div>
              </div>
              <div>
                <div className="text-3xl font-bold text-blue-600 mb-1">
                  Rp 3.2 Juta
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-300">
                  Total Transaksi
                </div>
              </div>
              <div>
                <div className="text-3xl font-bold text-purple-600 mb-1">
                  127
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-300">
                  Pickup Selesai
                </div>
              </div>
              <div>
                <div className="text-3xl font-bold text-orange-600 mb-1">
                  98%
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-300">
                  Kepuasan Pengguna
                </div>
              </div>
            </div>
          </Card>
        </div>
      </section>

      {/* Download CTA Section */}
      <section
        id="download-cta"
        className="py-20 bg-gradient-to-br from-green-500 to-green-700"
      >
        <div className="container mx-auto max-w-[1390px] px-4">
          <div className="text-center space-y-8">
            <div className="space-y-6">
              <h2 className="text-3xl md:text-4xl font-bold text-white">
                Download Rijig Sekarang & Mulai Kelola Sampah dengan Bijak
              </h2>
              <p className="text-white/90 max-w-3xl mx-auto">
                Bergabunglah dengan ekosistem pengelolaan sampah yang
                berkelanjutan. Dapatkan pendapatan dari sampah, kelola bisnis
                pengepulan, atau optimalisasi supply chain fasilitas daur ulang
                Anda.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
                <Button className="bg-black text-white hover:bg-gray-900 text-lg px-8 py-4 shadow-lg rounded-lg">
                  <span className="mr-3 text-2xl">📱</span>
                  <div className="text-left">
                    <div className="text-xs opacity-80">Download di</div>
                    <div className="text-sm font-medium">Google Play</div>
                  </div>
                </Button>
                <Button className="bg-white text-black hover:bg-gray-100 text-lg px-8 py-4 shadow-lg rounded-lg">
                  <Apple className="mr-3 h-6 w-6" />
                  <div className="text-left">
                    <div className="text-xs opacity-80">Download dari</div>
                    <div className="text-sm font-medium">App Store</div>
                  </div>
                </Button>
              </div>

              <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto pt-12">
                <div className="text-center">
                  <div className="text-4xl font-bold text-white mb-2">50K+</div>
                  <div className="text-white/80 text-sm">Pengguna Aktif</div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-white mb-2">
                    1000+
                  </div>
                  <div className="text-white/80 text-sm">
                    Pengepul Terdaftar
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-4xl font-bold text-white mb-2">250+</div>
                  <div className="text-white/80 text-sm">Kota di Indonesia</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-20 bg-gray-50 dark:bg-gray-900">
        <div className="container mx-auto max-w-[1160px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Apa Kata Pengguna Rijig
            </h2>
            <p className="text-gray-600 dark:text-gray-300">
              Testimoni dari berbagai stakeholder yang telah merasakan manfaat
              nyata dari penggunaan platform Rijig dalam pengelolaan sampah
              sehari-hari.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {testimonials.map((testimonial, index) => (
              <TestimonialCard
                key={index}
                testimonial={testimonial}
                index={index}
              />
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section id="faq" className="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto max-w-[785px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Pertanyaan yang Sering Diajukan
            </h2>
            <p className="text-gray-600 dark:text-gray-300">
              Temukan jawaban atas pertanyaan umum tentang Rijig dan cara kerja
              platform pengelolaan sampah terintegrasi kami.
            </p>
          </div>

          <Card className="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
            {faqs.map((faq, index) => (
              <FAQItem key={index} faq={faq} index={index} />
            ))}
          </Card>
        </div>
      </section>

      {/* Blog Section */}
      <section id="blog" className="py-20 bg-gray-50 dark:bg-gray-900">
        <div className="container mx-auto max-w-[1400px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Artikel & Tips Pengelolaan Sampah
            </h2>
            <p className="text-gray-600 dark:text-gray-300">
              Pelajari lebih lanjut tentang pengelolaan sampah, tips bisnis
              pengepulan, dan informasi terkini seputar industri daur ulang di
              Indonesia.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogs.map((blog, index) => (
              <BlogCard key={index} blog={blog} index={index} />
            ))}
          </div>
        </div>
      </section>

      {/* Support Section */}
      <section id="support" className="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto max-w-[925px] px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-4">
              Mari Terhubung dengan Tim Rijig
            </h2>
            <p className="text-gray-600 dark:text-gray-300">
              Punya pertanyaan atau ingin bermitra dengan Rijig? Hubungi tim
              kami dan mari bersama-sama membangun ekosistem pengelolaan sampah
              yang berkelanjutan di Indonesia.
            </p>
          </div>

          <Card className="p-6 md:p-8 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
            <div className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <Input
                  placeholder="Masukkan nama Anda"
                  className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg"
                />
                <Input
                  placeholder="Nama perusahaan/organisasi (opsional)"
                  className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg"
                />
                <Input
                  type="email"
                  placeholder="Masukkan email Anda"
                  className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg"
                />
                <Input
                  placeholder="Nomor telepon"
                  className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg"
                />
              </div>
              <Textarea
                rows={6}
                placeholder="Ceritakan tentang Anda dan bagaimana kami bisa membantu dalam pengelolaan sampah"
                className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg"
              />
              <div className="text-center space-y-4">
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  Dengan mengklik tombol hubungi kami, Anda menyetujui syarat
                  dan ketentuan yang berlaku
                </p>
                <Button
                  size="lg"
                  className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 rounded-lg"
                >
                  Hubungi Tim Rijig
                </Button>
              </div>
            </div>
          </Card>
        </div>
      </section>
    </div>
  );
}