import React, { useState, useEffect } from 'react';
import { 
  Menu, X, ChevronRight, CheckCircle, 
  BarChart3, Box, CreditCard, Smartphone, 
  Store, Coffee, Scissors, ShoppingBag, Star,
  MonitorSmartphone, Printer, ShieldCheck, Wrench, Sparkles,
  Laptop, Tablet, ArrowRight, Bot, PieChart, TrendingUp, BrainCircuit,
  Package, FileText, ShoppingCart, Warehouse, Users, GitMerge, ArrowLeft,
  Utensils, Zap, Clock, UserCheck, CalendarDays, History
} from 'lucide-react';

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeIndustryTab, setActiveIndustryTab] = useState('fnb');
  const [currentPage, setCurrentPage] = useState('home'); // 'home' or 'industry-detail'

  // Scroll to top when changing page
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [currentPage, activeIndustryTab]);

  const industries = [
    {
      id: 'fnb',
      title: 'Food & Beverages',
      headline: 'Solusi Kasir Terpadu untuk Bisnis Kuliner Modern',
      description: 'Dari coffee shop mandiri hingga jaringan restoran berskala nasional, Kulakpos.id menyediakan fitur manajemen meja, dapur, dan stok bahan baku yang presisi.',
      icon: <Coffee className="w-5 h-5" />,
      image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
      items: ['Quick Services', 'Resto Full Service', 'Fast Casual FnB', 'Coffee Shops', 'Cloud Kitchen', 'Foodcourt', 'Lounge & Bar'],
      features: [
        { icon: <Utensils />, name: "Manajemen Meja", detail: "Atur layout meja secara visual dan pantau status pesanan tiap pelanggan." },
        { icon: <Zap />, name: "Kitchen Display System", desc: "Kirim pesanan kasir langsung ke layar dapur untuk efisiensi maksimal." },
        { icon: <Clock />, name: "Split & Merge Bill", desc: "Fleksibilitas pembayaran untuk pelanggan rombongan atau pisah pesanan." }
      ]
    },
    {
      id: 'retail',
      title: 'Toko Retail',
      headline: 'Kelola Ribuan SKU dengan Inventori Terotomatisasi',
      description: 'Sistem retail kami dirancang untuk menangani pergerakan stok yang cepat, barcode scanning, dan sinkronisasi harga antar cabang secara real-time.',
      icon: <ShoppingBag className="w-5 h-5" />,
      image: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
      items: ['Clothing & Accessories', 'Toko Elektronik', 'Grosir & Minimarket', 'Toko Online', 'Gadget & Accessories', 'Toko Bangunan', 'Furniture', 'Apotek', 'Distributor'],
      features: [
        { icon: <Package />, name: "Multi-UOM & SKU", detail: "Jual dalam satuan pcs, lusin, atau karton dengan satu kode barang yang sama." },
        { icon: <TrendingUp />, name: "Grosir & Tier Pricing", desc: "Atur harga otomatis berdasarkan jumlah pembelian pelanggan." },
        { icon: <GitMerge />, name: "Stock Opname Digital", desc: "Lakukan audit stok tanpa harus menutup toko menggunakan scan smartphone." }
      ]
    },
    {
      id: 'beauty',
      title: 'Beauty',
      headline: 'Tingkatkan Pengalaman Pelanggan Salon & Klinik',
      description: 'Kelola jadwal janji temu (appointment), komisi staf beauty therapist, hingga riwayat perawatan pelanggan dalam satu aplikasi.',
      icon: <Sparkles className="w-5 h-5" />,
      image: 'https://images.unsplash.com/photo-1560750588-73207b1ef5b8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
      items: ['Salon Kecantikan', 'Barbershop', 'Klinik & Kesehatan', 'Day Spa', 'Pet Shops'],
      features: [
        { icon: <CalendarDays />, name: "Booking Online", detail: "Pelanggan bisa pesan jadwal lewat website tanpa perlu telepon manual." },
        { icon: <UserCheck />, name: "Komisi Staf", desc: "Hitung otomatis bagi hasil untuk tiap terapis berdasarkan layanan yang diberikan." },
        { icon: <History />, name: "Customer Records", desc: "Simpan riwayat treatment dan preferensi produk favorit pelanggan." }
      ]
    },
    {
      id: 'jasa',
      title: 'Jasa',
      headline: 'Efisiensi Operasional untuk Bisnis Berbasis Layanan',
      description: 'Lacak status pengerjaan jasa, manajemen antrean, hingga laporan produktivitas karyawan secara mendalam.',
      icon: <Wrench className="w-5 h-5" />,
      image: 'https://images.unsplash.com/photo-1521671757615-16782a1705e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
      items: ['Laundry', 'Car Wash', 'Reparasi', 'Bengkel', 'Jasa Profesional', 'Sport & Fitness', 'Penginapan', 'Parkir', 'Daycare'],
      features: [
        { icon: <Clock />, name: "Tracker Pengerjaan", detail: "Update status layanan dari 'Proses' hingga 'Selesai' dan kirim notifikasi ke pelanggan." },
        { icon: <ShieldCheck />, name: "Manajemen Garansi", desc: "Cetak kartu garansi digital dan lacak klaim perbaikan dengan mudah." },
        { icon: <Smartphone />, name: "Mobile Workforce", desc: "Karyawan lapangan dapat update pekerjaan langsung dari smartphone mereka." }
      ]
    }
  ];

  const activeIndustry = industries.find(i => i.id === activeIndustryTab);

  const renderNavbar = () => (
    <nav className="fixed top-0 w-full bg-white/95 backdrop-blur-md z-50 border-b border-slate-200 transition-all shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          <div className="flex-shrink-0 flex items-center gap-2 cursor-pointer" onClick={() => { setCurrentPage('home'); window.location.href = '/'; }}>
            <img src="/images/logokulakpos.png" alt="Kulakpos" className="h-10 w-auto" />
          </div>

          <div className="hidden md:flex space-x-8 items-center">
            <a href="/#fitur" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('fitur')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Fitur POS</a>
            <a href="/#ai" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('ai')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-teal-600 hover:text-teal-700 font-bold transition-colors text-sm flex items-center gap-1.5 bg-teal-50 px-3 py-1.5 rounded-full border border-teal-100">
              <Bot className="w-4 h-4" /> AI Assistance
            </a>
            <a href="/#perangkat" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('perangkat')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Perangkat</a>
            <a href="/#solusi" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('solusi')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Solusi Industri</a>
            <a href="/#harga" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('harga')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Harga</a>
          </div>

          <div className="hidden md:flex items-center space-x-4">
            <a href="/login" className="text-slate-600 font-semibold hover:text-red-600 transition-colors text-sm">Masuk</a>
            <a href="/plans" className="bg-teal-600 hover:bg-teal-700 text-white px-5 py-2.5 rounded-lg font-semibold transition-all shadow-md text-sm flex items-center gap-2">
              Coba Gratis <ArrowRight className="w-4 h-4" />
            </a>
          </div>

          <div className="md:hidden flex items-center">
            <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-slate-600 hover:text-teal-600 focus:outline-none">
              {isMenuOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
            </button>
          </div>
        </div>
      </div>
    </nav>
  );

  const renderFooter = () => (
    <footer className="bg-white text-slate-600 py-16 border-t border-slate-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-12">
          <div className="lg:col-span-2">
            <div className="flex items-center gap-2 mb-6 cursor-pointer" onClick={() => { setCurrentPage('home'); window.location.href = '/'; }}>
              <img src="/images/logokulakpos.png" alt="Kulakpos" className="h-10 w-auto" />
            </div>
            <p className="text-sm mb-6 max-w-sm leading-relaxed text-slate-500 font-medium">
              Penyedia layanan perangkat lunak kasir (SaaS POS) terkemuka di Indonesia. Misi kami adalah memberdayakan UMKM untuk naik kelas melalui teknologi kasir yang cerdas dan mudah.
            </p>
          </div>
          <div>
            <h4 className="text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest">Produk</h4>
            <ul className="space-y-3 text-sm font-medium">
              <li><a href="#" className="hover:text-teal-600 transition-colors">Aplikasi Kasir POS</a></li>
              <li><a href="#" className="hover:text-teal-600 transition-colors">AI Assistance</a></li>
              <li><a href="#" className="hover:text-teal-600 transition-colors">Manajemen Inventori</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest">Industri</h4>
            <ul className="space-y-3 text-sm font-medium">
              {industries.map(ind => (
                <li key={ind.id}><button onClick={() => { setActiveIndustryTab(ind.id); setCurrentPage('industry-detail'); }} className="hover:text-teal-600 transition-colors text-left">{ind.title}</button></li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest">Bantuan</h4>
            <ul className="space-y-3 text-sm font-medium">
              <li><a href="#" className="hover:text-teal-600 transition-colors">FAQ</a></li>
              <li><a href="#" className="hover:text-teal-600 transition-colors">Kebijakan Privasi</a></li>
              <li><a href="#" className="hover:text-teal-600 transition-colors">Hubungi Kami</a></li>
            </ul>
          </div>
        </div>
        <div className="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-medium text-slate-500">
          <p>© {new Date().getFullYear()} PT Sada Teknologi Indonesia. All rights reserved.</p>
          <div className="flex gap-4">
            <a href="#" className="hover:text-teal-600">Google Play</a>
            <a href="#" className="hover:text-teal-600">App Store</a>
          </div>
        </div>
      </div>
    </footer>
  );

  const renderHomePage = () => (
    <>
      {/* HERO SECTION */}
      <section className="pt-32 pb-20 lg:pt-40 lg:pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative overflow-hidden">
        <div className="absolute top-0 right-0 -translate-y-12 translate-x-1/3 w-96 h-96 bg-teal-50 rounded-full blur-3xl opacity-50 z-0"></div>
        <div className="absolute top-40 left-0 -translate-x-1/2 w-64 h-64 bg-red-50 rounded-full blur-3xl opacity-50 z-0"></div>

        <div className="text-center max-w-4xl mx-auto relative z-10">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-red-50 text-red-600 font-bold text-xs md:text-sm mb-6 border border-red-100 shadow-sm">
            <Sparkles className="w-4 h-4" />
            Mitra Digital #1 untuk UMKM Naik Kelas
          </div>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.15] mb-6 tracking-tight">
            Sistem Kasir Pintar dengan <br className="hidden md:block" />
            Teknologi <span className="text-teal-600">AI Assistance</span>
          </h1>
          <p className="text-lg sm:text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            Tinggalkan cara manual. Kendalikan penjualan, pantau stok bahan baku, hingga analisis laba rugi secara real-time dari satu dashboard profesional Kulakpos.id.
          </p>
          <div className="flex flex-col sm:flex-row items-center gap-4 justify-center">
            <a href="/plans" className="w-full sm:w-auto bg-teal-600 hover:bg-teal-700 text-white px-8 py-4 rounded-lg text-base font-bold transition-all shadow-lg shadow-teal-600/20 flex items-center justify-center gap-2 group decoration-transparent">
              Coba Gratis Sekarang <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </a>
            <a href="/contact-us" className="w-full sm:w-auto bg-white border-2 border-slate-200 hover:border-red-600 hover:text-red-600 text-slate-700 px-8 py-4 rounded-lg text-base font-bold transition-all text-center decoration-transparent">
              Jadwalkan Demo
            </a>
          </div>
        </div>

        <div className="mt-16 relative mx-auto max-w-5xl z-10 px-4 sm:px-0">
          <div className="relative rounded-3xl p-2 md:p-3 bg-white/50 backdrop-blur-md border border-slate-200 shadow-2xl">
            <img 
              src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" 
              alt="" 
              className="rounded-2xl w-full object-cover shadow-sm h-[350px] md:h-[550px]"
            />
            
            {/* AI Insight Badge */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/90 backdrop-blur-md p-6 rounded-2xl shadow-2xl border border-teal-200 flex flex-col gap-4 max-w-xs animate-pulse z-30">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md">
                  <Bot className="text-white w-6 h-6" />
                </div>
                <div><h4 className="font-bold text-slate-900 text-sm">Saran AI Hari Ini</h4></div>
              </div>
              <p className="text-xs text-slate-600 leading-relaxed font-medium italic">"Omset Anda naik 15% dibanding hari Senin lalu. Stok Gula menipis, disarankan restock 20 unit sekarang."</p>
            </div>

            {/* Sales/Omset Floating Badge */}
            <div className="absolute bottom-4 sm:bottom-8 left-2 sm:left-6 bg-white p-3 sm:p-4 rounded-xl shadow-xl border border-slate-100 z-20 flex items-center gap-3 sm:gap-4 animate-bounce" style={{ animationDuration: '3s' }}>
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-teal-100 rounded-full flex items-center justify-center flex-shrink-0">
                <BarChart3 className="w-5 h-5 sm:w-6 sm:h-6 text-teal-600" />
              </div>
              <div>
                <p className="text-[10px] sm:text-xs text-slate-500 font-bold uppercase tracking-wider">Pendapatan Hari Ini</p>
                <p className="text-base sm:text-lg font-black text-slate-900">+ Rp 4.500.000</p>
              </div>
            </div>

            {/* Inventory Floating Badge */}
            <div className="absolute top-8 sm:top-12 right-2 sm:right-6 bg-white p-3 sm:p-4 rounded-xl shadow-xl border border-slate-100 z-20 flex items-center gap-3 sm:gap-4 animate-bounce" style={{ animationDuration: '4s', animationDelay: '1s' }}>
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                <Box className="w-5 h-5 sm:w-6 sm:h-6 text-red-600" />
              </div>
              <div>
                <p className="text-[10px] sm:text-xs text-slate-500 font-bold uppercase tracking-wider">Update Stok Pusat</p>
                <p className="text-sm sm:text-base font-black text-slate-900">Tersinkronisasi</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* AI SPOTLIGHT */}
      <section id="ai" className="py-24 bg-teal-900 relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="text-white">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-400 font-bold text-xs mb-6 border border-red-500/30">
                <BrainCircuit className="w-4 h-4" /> Teknologi AI
              </div>
              <h2 className="text-3xl md:text-5xl font-black mb-8 leading-tight text-teal-400">Asisten Cerdas Business Owner</h2>
              <p className="text-teal-100 text-lg mb-10 leading-relaxed">Lupakan ribetnya membaca tabel laporan manual. AI Kulakpos melakukan analisis mendalam untuk Anda secara otomatis.</p>
              <div className="space-y-6">
                {["Analisis Omset & Revenue", "Laporan Laba Rugi (P&L)", "Prediksi Inventori Otomatis"].map((title, idx) => (
                  <div key={idx} className="flex gap-4"><CheckCircle className="w-6 h-6 text-teal-400" /> <span className="font-bold text-lg">{title}</span></div>
                ))}
              </div>
            </div>
            <div className="bg-white/10 backdrop-blur-xl rounded-3xl p-8 border border-white/20 shadow-2xl text-white">
              <div className="flex justify-between mb-8"><span className="font-bold">AI Dashboard</span><Bot className="w-6 h-6" /></div>
              <div className="p-4 bg-teal-800/40 rounded-xl mb-4 border border-teal-700">
                <span className="text-xs font-bold text-teal-300">ESTIMASI PROFIT</span>
                <div className="text-2xl font-black">Rp 24.500.000</div>
              </div>
              <div className="p-4 bg-white/5 rounded-xl border border-white/10">
                <div className="h-2 bg-white/10 rounded-full flex overflow-hidden">
                  <div className="bg-teal-500 w-[60%]"></div><div className="bg-red-500 w-[25%]"></div>
                </div>
                <div className="flex justify-between mt-3 text-xs font-bold"><span>FnB 60%</span><span>Retail 25%</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FITUR POS SECTION */}
      <section id="fitur" className="py-24 bg-white border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
              <Star className="w-4 h-4" /> Modul Terintegrasi
            </div>
            <h2 className="text-3xl font-extrabold text-slate-900 mb-4 tracking-tight">Ekosistem Fitur Terlengkap</h2>
            <p className="text-slate-600 text-lg">Semua modul operasional yang Anda butuhkan untuk memantau dan mengembangkan bisnis dalam satu aplikasi cerdas.</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { icon: <MonitorSmartphone className="w-6 h-6" />, title: "Sales Management", desc: "Kelola transaksi kasir, pencatatan pesanan, dan riwayat penjualan dengan cepat." },
              { icon: <ShoppingCart className="w-6 h-6" />, title: "Purchase Management", desc: "Pantau PO (Purchase Order) dan pembelian stok barang ke supplier." },
              { icon: <GitMerge className="w-6 h-6" />, title: "3rd Party Management", desc: "Integrasi sistem dengan layanan pihak ketiga, payment gateway, dan kurir." },
              { icon: <TrendingUp className="w-6 h-6" />, title: "Pricing Management", desc: "Atur harga dinamis, harga grosir, diskon, dan tier pricing dengan mudah." },
              { icon: <Package className="w-6 h-6" />, title: "Inventory Management", desc: "Pantau pergerakan barang, stok opname, dan resep bahan baku (BOM)." },
              { icon: <Warehouse className="w-6 h-6" />, title: "Warehouse Management", desc: "Kelola transfer dan ketersediaan stok antar gudang pusat secara real-time." },
              { icon: <Store className="w-6 h-6" />, title: "Multi Branch Management", desc: "Pantau dan sinkronisasi data puluhan cabang dari satu dashboard." },
              { icon: <Bot className="w-6 h-6" />, title: "AI Assistance", desc: "Analisis cerdas untuk performa omset, laba rugi, dan prediksi restock otomatis." }
            ].map((feature, idx) => (
              <div key={idx} className="p-6 border border-slate-200 rounded-2xl hover:shadow-xl hover:border-teal-200 transition-all bg-slate-50 group">
                <div className="w-12 h-12 bg-white text-teal-600 rounded-xl flex items-center justify-center mb-5 shadow-sm group-hover:bg-teal-600 group-hover:text-white transition-colors">
                  {feature.icon}
                </div>
                <h3 className="text-lg font-bold text-slate-900 mb-2">{feature.title}</h3>
                <p className="text-slate-600 text-sm leading-relaxed">{feature.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PERANGKAT SECTION */}
      <section id="perangkat" className="py-24 bg-slate-50 border-y border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
              <MonitorSmartphone className="w-4 h-4" /> Multi Platform
            </div>
            <h2 className="text-3xl font-extrabold text-slate-900 mb-4 tracking-tight">Fleksibel di Semua Perangkat Anda</h2>
            <p className="text-slate-600 text-lg">Tanpa perlu investasi mesin kasir mahal. Gunakan perangkat cerdas yang sudah Anda miliki untuk mulai berjualan.</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Laptop/PC Card */}
            <div className="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-teal-300 transition-all group">
              <div className="h-48 w-full relative">
                <img 
                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="" 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-teal-900/10 group-hover:bg-transparent transition-colors"></div>
                <div className="absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-teal-600">
                  <Laptop className="w-6 h-6" />
                </div>
              </div>
              <div className="p-8 text-center">
                <h3 className="text-xl font-extrabold text-slate-900 mb-3">Laptop & PC</h3>
                <p className="text-slate-600 text-sm leading-relaxed">
                  Akses dashboard backoffice via browser. Sangat ideal untuk pantau analitik mendalam, manajemen stok pusat, dan laporan keuangan komprehensif.
                </p>
              </div>
            </div>

            {/* Tablet Card */}
            <div className="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-red-300 transition-all group">
              <div className="h-48 w-full relative">
                <img 
                  src="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="" 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-red-900/10 group-hover:bg-transparent transition-colors"></div>
                <div className="absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-red-600">
                  <Tablet className="w-6 h-6" />
                </div>
              </div>
              <div className="p-8 text-center">
                <h3 className="text-xl font-extrabold text-slate-900 mb-3">Tablet Android</h3>
                <p className="text-slate-600 text-sm leading-relaxed">
                  Tampilan antarmuka kasir yang lega dan interaktif. Memberikan kesan elegan di meja kasir restoran, butik, atau toko retail modern Anda.
                </p>
              </div>
            </div>

            {/* Smartphone Card */}
            <div className="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-teal-300 transition-all group">
              <div className="h-48 w-full relative">
                <img 
                  src="https://images.unsplash.com/photo-1512428559087-560fa5ceab42?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="" 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-teal-900/10 group-hover:bg-transparent transition-colors"></div>
                <div className="absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-teal-600">
                  <Smartphone className="w-6 h-6" />
                </div>
              </div>
              <div className="p-8 text-center">
                <h3 className="text-xl font-extrabold text-slate-900 mb-3">Smartphone</h3>
                <p className="text-slate-600 text-sm leading-relaxed">
                  Mobilitas maksimal. Gunakan untuk pelayan (waiter) mencatat pesanan dari meja, atau operasional bisnis dinamis seperti food truck.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SOLUTIONS SECTION */}
      <section id="solusi" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row gap-16 items-center">
            <div className="flex-1 w-full">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
                <Store className="w-4 h-4" /> Solusi Spesifik
              </div>
              <h2 className="text-3xl font-extrabold text-slate-900 mb-6 tracking-tight">Satu Platform, Solusi Berbagai Industri</h2>
              <div className="space-y-3">
                {industries.map((industry) => (
                  <div 
                    key={industry.id}
                    onClick={() => setActiveIndustryTab(industry.id)}
                    className={`p-5 rounded-xl border transition-all cursor-pointer relative ${activeIndustryTab === industry.id ? 'bg-slate-50 border-teal-200' : 'bg-white border-slate-100'}`}
                  >
                    <div className="flex items-center gap-4">
                      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${activeIndustryTab === industry.id ? 'bg-teal-600 text-white shadow-md' : 'bg-slate-100 text-slate-500'}`}>
                        {industry.icon}
                      </div>
                      <h4 className="font-bold text-lg">{industry.title}</h4>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="flex-1 w-full">
              <div className="bg-slate-50 p-8 rounded-3xl border border-slate-200 shadow-xl min-h-[420px] flex flex-col justify-between">
                <div>
                  <h3 className="text-2xl font-extrabold text-slate-900 mb-6">{activeIndustry?.title}</h3>
                  <div className="flex flex-wrap gap-2.5">
                    {activeIndustry?.items.map((item, idx) => (
                      <span key={idx} className="inline-flex items-center px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-semibold text-sm shadow-sm"><CheckCircle className="w-4 h-4 mr-2 text-teal-500" />{item}</span>
                    ))}
                  </div>
                </div>
                <button 
                  onClick={() => setCurrentPage('industry-detail')}
                  className="mt-8 bg-teal-600 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 w-max hover:bg-teal-700 transition-colors"
                >
                  Pelajari Solusi {activeIndustry?.title} <ArrowRight className="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING SECTION */}
      <section id="harga" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
              <CreditCard className="w-4 h-4" /> Harga Terbaik
            </div>
            <h2 className="text-3xl font-extrabold text-slate-900 mb-4 tracking-tight">Investasi Transparan UMKM</h2>
            <p className="text-lg text-slate-600">Skema harga yang ramah di kantong tanpa biaya tersembunyi. Skalakan sesuai pertumbuhan bisnis Anda.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Basic */}
            <div className="bg-white rounded-3xl p-8 border border-slate-200 flex flex-col shadow-sm">
              <h3 className="text-xl font-extrabold text-slate-900 mb-2">Basic</h3>
              <div className="text-4xl font-black text-slate-900 mb-6 pb-6 border-b">Rp 50.k <span className="text-sm font-medium">/bln</span></div>
              <ul className="space-y-4 mb-8 flex-1">
                {["POS Full Features", "Inventory Management", "Finance & Accounting", "Purchase Management", "Warehouse Management", "3rd Party Management"].map(f => (
                  <li key={f} className="flex gap-2 text-sm font-medium"><CheckCircle className="w-5 h-5 text-teal-500" />{f}</li>
                ))}
                <li className="flex gap-2 text-sm font-medium italic opacity-50"><X className="w-5 h-5" /> Multi-branch Allowed</li>
              </ul>
              <button className="w-full py-3 rounded-xl border-2 font-bold hover:border-teal-600 transition-colors">Pilih Basic</button>
            </div>
            {/* Pro */}
            <div className="bg-teal-900 rounded-3xl p-8 border border-teal-800 flex flex-col transform md:-translate-y-4 shadow-2xl text-white">
              <div className="bg-red-600 text-white px-4 py-1.5 rounded-full text-[10px] font-black uppercase w-max mb-4">Paling Laris</div>
              <h3 className="text-xl font-extrabold mb-2">Pro Business</h3>
              <div className="text-4xl font-black mb-6 pb-6 border-b text-teal-400">Rp 100.k <span className="text-sm font-medium text-white">/bln</span></div>
              <ul className="space-y-4 mb-8 flex-1">
                <li className="flex gap-2 text-sm font-bold text-teal-300"><Bot className="w-5 h-5" /> Akses AI Assistance</li>
                {["POS Full Features", "Inventory Management", "Finance & Accounting", "Purchase Management", "Warehouse Management", "3rd Party Management", "Multi-branch Allowed"].map(f => (
                  <li key={f} className="flex gap-2 text-sm font-medium"><CheckCircle className="w-5 h-5 text-teal-400" />{f}</li>
                ))}
              </ul>
              <button className="w-full py-3 rounded-xl bg-teal-500 text-teal-950 font-black hover:bg-teal-400 transition-all">Pilih Pro</button>
            </div>
            {/* Enterprise */}
            <div className="bg-white rounded-3xl p-8 border border-slate-200 flex flex-col shadow-sm">
              <h3 className="text-xl font-extrabold text-slate-900 mb-2">Enterprise</h3>
              <div className="text-2xl font-black text-slate-900 mb-6 pb-6 border-b">Hubungi Kami</div>
              <ul className="space-y-4 mb-8 flex-1">
                {["Custom AI Model", "Unlimited Outlets", "SLA Support 24/7", "Dedicated Manager"].map(f => (
                  <li key={f} className="flex gap-2 text-sm font-medium"><CheckCircle className="w-5 h-5 text-teal-500" />{f}</li>
                ))}
              </ul>
              <button className="w-full py-3 rounded-xl border-2 font-bold hover:bg-slate-50 transition-colors">Konsultasi Sales</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );

  const renderIndustryDetail = () => (
    <div className="pt-20">
      {/* Detail Hero */}
      <section className="relative h-[400px] md:h-[500px] overflow-hidden">
        <img src={activeIndustry?.image} alt={activeIndustry?.title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-r from-teal-950 via-teal-900/70 to-transparent"></div>
        <div className="absolute inset-0 max-w-7xl mx-auto px-4 flex flex-col justify-center text-white">
          <button 
            onClick={() => setCurrentPage('home')}
            className="flex items-center gap-2 text-teal-400 font-bold mb-8 hover:text-white transition-colors w-max"
          >
            <ArrowLeft className="w-5 h-5" /> Kembali ke Beranda
          </button>
          
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-300 font-bold text-xs mb-4 border border-red-500/30 w-max">
            <Sparkles className="w-4 h-4" /> Spesialisasi {activeIndustry?.title}
          </div>
          
          <h1 className="text-4xl md:text-6xl font-black mb-6 max-w-3xl leading-tight">
            {activeIndustry?.headline}
          </h1>
          <p className="text-lg md:text-xl text-teal-100 max-w-2xl leading-relaxed">
            {activeIndustry?.description}
          </p>
        </div>
      </section>

      {/* Industry Specific Features */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
              <Star className="w-4 h-4" /> Fitur Spesifik
            </div>
            <h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Modul Khusus {activeIndustry?.title}</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {activeIndustry?.features.map((feat, idx) => (
              <div key={idx} className="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:border-teal-200 transition-all group">
                <div className="w-14 h-14 bg-white rounded-xl flex items-center justify-center shadow-md mb-6 text-teal-600 group-hover:bg-teal-600 group-hover:text-white transition-all">
                  {React.cloneElement(feat.icon, { className: "w-7 h-7" })}
                </div>
                <h3 className="text-xl font-black text-slate-900 mb-4">{feat.name}</h3>
                <p className="text-slate-600 leading-relaxed text-sm">
                  {feat.detail || feat.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* List of Sub-industries */}
      <section className="py-24 bg-slate-50 border-y border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
              <Users className="w-4 h-4" /> Fleksibilitas Skala
            </div>
            <h2 className="text-3xl font-black text-center text-slate-900">Mendukung Berbagai Jenis {activeIndustry?.title}</h2>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {activeIndustry?.items.map((item, idx) => (
              <div key={idx} className="bg-white p-4 rounded-xl border border-slate-200 text-center font-bold text-slate-700 shadow-sm hover:text-teal-600 transition-colors">
                {item}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Specialized CTA */}
      <section className="py-24 bg-teal-600 text-white">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-100 font-bold text-xs mb-6 border border-red-400/30 shadow-sm">
            <Zap className="w-4 h-4" /> Mulai Sekarang
          </div>
          <h2 className="text-3xl md:text-4xl font-black mb-6">Siap Menjalankan Bisnis {activeIndustry?.title} yang Lebih Efisien?</h2>
          <p className="text-xl text-teal-100 mb-10 font-medium">Ribuan pemilik bisnis seperti Anda telah bertransformasi bersama Kulakpos.id.</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/plans" className="bg-white text-teal-600 px-10 py-4 rounded-xl font-black hover:bg-teal-50 transition-colors inline-block decoration-transparent">Mulai Gratis Sekarang</a>
            <button className="bg-teal-700 text-white px-10 py-4 rounded-xl font-black border border-teal-500 hover:bg-teal-800 transition-colors">Tanya Tim Kami</button>
          </div>
        </div>
      </section>
    </div>
  );

  return (
    <div className="min-h-screen font-sans text-slate-800 bg-white">
      {renderNavbar()}
      
      <main>
        {currentPage === 'home' ? renderHomePage() : renderIndustryDetail()}
      </main>

      {renderFooter()}

      {/* WHATSAPP WIDGET */}
      <a 
        href="https://wa.me/6281234567890?text=Halo%20Kulakpos.id,%20saya%20tertarik%20dengan%20solusi%20POS%20dan%20AI%20Assistance%20Anda."
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-6 right-6 z-[60] group flex items-center gap-3"
      >
        <div className="bg-white px-4 py-2 rounded-full shadow-xl border border-slate-100 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0 pointer-events-none hidden md:block">
          <span className="text-sm font-bold text-slate-700">Butuh Konsultasi?</span>
        </div>
        <div className="w-14 h-14 bg-[#25D366] rounded-full shadow-2xl flex items-center justify-center text-white relative hover:scale-110 transition-transform duration-300">
          <div className="absolute inset-0 bg-[#25D366] rounded-full animate-ping opacity-25"></div>
          <svg viewBox="0 0 24 24" className="w-8 h-8 fill-current">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.653a11.888 11.888 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
          </svg>
        </div>
      </a>
    </div>
  );
}