import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  onSnapshot, 
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  Store, User, MapPin, Plus, Search, CheckCircle, 
  ChevronLeft, Map as MapIcon, Info, Camera,
  Navigation, Loader2, LogIn, Save, Trash2, AlertCircle,
  ExternalLink, ChevronDown
} from 'lucide-react';

// --- VARIABEL GLOBAL & KATEGORI BARU ---
const APP_TITLE = "KATALOG KELAS PEKERJA";
const APP_URL = "katalog.spiritbinokasih.my.id";

const CATEGORY_GROUPS = {
  "Bidang Kuliner": [
    "Katering rumahan atau warmindo",
    "Minuman kekinian (teh unik, healthy drinks)",
    "Camilan dari bahan lokal atau jajanan pasar",
    "Usaha makanan ringan atau berat lainnya"
  ],
  "Bidang Fashion": [
    "Online shop baju (reseller, dropshipper)",
    "Busana etnik atau upcycled fashion",
    "Toko baju bekas (thrift shop)"
  ],
  "Bidang Jasa": [
    "Laundry",
    "Jasa desain grafis",
    "Makeup Artist (MUA) untuk acara",
    "Jasa fotografi dan videografi",
    "Jasa bimbingan belajar (bimbel)",
    "Jasa digitalisasi usaha"
  ],
  "Bidang Kerajinan & Produk Unik": [
    "Kerajinan tangan (souvenir, hiasan makrame)",
    "Lilin aromaterapi",
    "Produk isi ulang (refill) alami",
    "Perabotan dari bahan daur ulang"
  ],
  "Bidang Lainnya": [
    "Toko kelontong atau sembako",
    "Agribisnis (ikan, sayur, kebun)",
    "Pertamini (pom bensin mini)",
    "Usaha otomotif (tambal ban, bengkel)",
    "Jual pulsa dan layanan pembayaran"
  ]
};

// Gabungkan semua sub-kategori untuk filter flat
const ALL_CATEGORIES = Object.values(CATEGORY_GROUPS).flat();

/** * KONFIGURASI FIREBASE (BASE64)
 * Project ID: katalog-264a4
 */
const encodedConfig = "eyJhcGlLZXkiOiJBSXphU3lBNEJHUFkwS1hDXzVNcWtwNm9zLV9oMW0wSlYzSjVzaGMiLCJhdXRoRG9tYWluIjoia2F0YWxvZy0yNjRhNC5maXJlYmFzYXBwLmNvbSIsInByb2plY3RJZCI6ImthdGFsb2ctMjY0YTQiLCJzdG9yYWdlQnVja2V0Ijoia2F0YWxvZy0yNjRhNC5maXJlYmFzdG9yYWdlLmFwcCIsIm1lc3NhZ2luZ1NlbmRlcklkIjoiMjcxNzM3NDA1MDA5IiwiYXBwSWQiOiIxOjE3MTczNzQwNTAwOTp3ZWI6NGU2M2E0MzE5OWYxYmM0YjRmNDI3MCIsIm1lYXN1cmVtZW50SWQiOiJHLTFXUjYwWjhMM0MifQ==";

const getDecodedConfig = () => {
  try {
    return JSON.parse(atob(encodedConfig));
  } catch (e) {
    return null;
  }
};

const firebaseConfig = getDecodedConfig();
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = "katalog-pekerja-pro"; 

const App = () => {
  const [view, setView] = useState('landing'); 
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [authError, setAuthError] = useState(null);
  const [merchants, setMerchants] = useState([]);
  const [userLocation, setUserLocation] = useState(null);
  const [isUpdateMode, setIsUpdateMode] = useState(false);
  const [activeDocId, setActiveDocId] = useState(null);
  
  const [filterCat, setFilterCat] = useState('');
  const [searchQuery, setSearchQuery] = useState('');

  const initialForm = {
    username: '', password: '', ktp: '', slogan: '', photoUrl: '',
    businessItems: [{ id: Date.now(), type: '', category: '', locations: [] }]
  };
  const [ownerForm, setOwnerForm] = useState(initialForm);
  const [loginCreds, setLoginCreds] = useState({ username: '', password: '' });

  useEffect(() => {
    const initAuth = async () => {
      try {
        await signInAnonymously(auth);
      } catch (err) { 
        console.error("Auth error:", err);
        setAuthError(err.code === 'auth/configuration-not-found' ? "Aktifkan Anonymous Auth di Firebase Console." : err.message);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (currUser) => {
      setUser(currUser);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (pos) => setUserLocation({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
        () => console.log("Akses GPS mati")
      );
    }

    const ref = collection(db, 'artifacts', appId, 'public', 'data', 'merchants');
    const unsubscribe = onSnapshot(ref, (snap) => {
      setMerchants(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Database Error:", err));
    return () => unsubscribe();
  }, [user]);

  const captureLocation = (bIdx) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((pos) => {
        const updated = [...ownerForm.businessItems];
        if (updated[bIdx].locations.length < 3) {
          updated[bIdx].locations.push({ lat: pos.coords.latitude, lng: pos.coords.longitude });
          setOwnerForm({ ...ownerForm, businessItems: updated });
        }
      }, () => alert("Gagal mengambil lokasi. Izinkan GPS."));
    }
  };

  const handleSave = async () => {
    if (!user) return;
    
    if (!isUpdateMode) {
      if (merchants.filter(m => m.ktp === ownerForm.ktp).length >= 3) {
        return alert("Satu NIK maksimal 3 profil usaha.");
      }
      if (merchants.some(m => (m.username || "").toLowerCase() === ownerForm.username.toLowerCase())) {
        return alert("Username sudah digunakan.");
      }
    }

    const docId = isUpdateMode ? activeDocId : `m_${Date.now()}`;
    const data = { 
      ...ownerForm, 
      userId: user.uid, 
      updatedAt: new Date().toISOString() 
    };
    if (!isUpdateMode) data.serialNumber = merchants.length + 1;

    try {
      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'merchants', docId), data);
      alert(isUpdateMode ? "Data Diperbarui!" : "Berhasil Terdaftar!");
      setView('landing');
      setOwnerForm(initialForm);
      setIsUpdateMode(false);
    } catch (e) { alert("Gagal Simpan. Cek Rules Firestore."); }
  };

  const filteredMerchants = merchants.filter(m => {
    const items = m.businessItems || [];
    const matchesCat = filterCat === '' || items.some(item => item.category === filterCat);
    const matchesSearch = searchQuery === '' || 
      items.some(item => (item.type || "").toLowerCase().includes(searchQuery.toLowerCase())) ||
      (m.username || "").toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCat && matchesSearch;
  });

  if (authError) return (
    <div className="h-screen flex flex-col items-center justify-center p-8 text-center">
      <AlertCircle size={64} className="text-red-600 mb-4" />
      <h1 className="font-bold mb-2">Konfigurasi Dibutuhkan</h1>
      <p className="text-sm text-slate-500 mb-6">{authError}</p>
      <button onClick={() => window.location.reload()} className="px-6 py-2 bg-red-700 text-white rounded-xl font-bold">Refresh</button>
    </div>
  );

  if (loading) return (
    <div className="h-screen flex items-center justify-center bg-white flex-col gap-3">
      <Loader2 className="animate-spin text-red-700" size={40} />
      <p className="text-[10px] font-black uppercase tracking-widest text-red-700 italic">Membangun Jaringan Pekerja...</p>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 pb-24 font-sans tracking-tight text-left">
      {/* HEADER */}
      <header className="bg-red-700 text-white p-4 shadow-lg sticky top-0 z-50">
        <div className="max-w-md mx-auto flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Store size={22} fill="currentColor"/>
            <h1 className="font-black text-[12px] tracking-widest uppercase">{APP_TITLE}</h1>
          </div>
          <span className="text-[8px] opacity-70 font-mono tracking-tighter">@katalog-264a4</span>
        </div>
      </header>

      <main className="max-w-md mx-auto p-4">
        {/* VIEW: LANDING */}
        {view === 'landing' && (
          <div className="space-y-6 animate-in fade-in duration-500">
            <div className="relative rounded-[2.5rem] overflow-hidden shadow-2xl h-64 bg-red-950">
              <img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=800" className="w-full h-full object-cover opacity-50" alt="Pekerja" />
              <div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-t from-black/90">
                <h2 className="text-white text-2xl font-black uppercase leading-none tracking-tighter italic">Solidaritas Ekonomi<br/>Kelas Pekerja</h2>
                <p className="text-red-400 text-[10px] font-black mt-3 tracking-widest uppercase">#BeliDariTemanSendiri</p>
              </div>
            </div>

            <div className="grid gap-4">
              <button onClick={() => setView('owner-menu')} className="p-6 bg-white border-b-4 border-red-700 rounded-[2rem] flex justify-between items-center shadow-md active:translate-y-1 transition-all group">
                <div className="flex items-center gap-4">
                  <div className="bg-red-700 p-4 rounded-2xl text-white shadow-lg"><Store size={28}/></div>
                  <div>
                    <h3 className="font-black uppercase text-sm">Menu Pengusaha</h3>
                    <p className="text-[10px] text-slate-400 font-bold uppercase tracking-tighter italic">Daftar / Update Jualan</p>
                  </div>
                </div>
                <Plus className="text-red-700" size={20} />
              </button>

              <button onClick={() => setView('buyer-view')} className="p-6 bg-red-700 text-white rounded-[2rem] flex justify-between items-center shadow-xl active:scale-95 transition-all group">
                <div className="flex items-center gap-4">
                  <div className="bg-white/20 p-4 rounded-2xl shadow-inner group-hover:scale-110 transition-transform"><Search size={28}/></div>
                  <div>
                    <h3 className="font-black uppercase text-sm">Cari Jualan</h3>
                    <p className="text-[10px] text-red-200 font-bold uppercase tracking-tighter italic">Belanja di sekitarmu</p>
                  </div>
                </div>
                <Navigation size={20} className="text-white/40" />
              </button>
            </div>
          </div>
        )}

        {/* VIEW: OWNER MENU */}
        {view === 'owner-menu' && (
          <div className="space-y-4 animate-in slide-in-from-bottom duration-300">
            <button onClick={() => setView('landing')} className="flex items-center gap-2 text-red-700 font-black text-[11px] uppercase tracking-widest"><ChevronLeft size={18}/> Kembali</button>
            <div className="bg-white p-7 rounded-[3rem] shadow-xl space-y-7 border border-slate-100 text-left">
               <button onClick={() => { setOwnerForm(initialForm); setIsUpdateMode(false); setView('owner-form'); }} className="w-full p-5 bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 text-left flex items-center gap-4 hover:border-red-700 hover:bg-red-50 transition-all group">
                 <div className="bg-white p-3 rounded-2xl shadow-sm"><Plus size={20} className="text-red-700" /></div>
                 <div>
                   <h4 className="text-sm font-black uppercase tracking-tight">Daftar Member Baru</h4>
                   <p className="text-[9px] text-slate-400 font-bold uppercase tracking-tighter italic">Mulai usaha jualan Anda sekarang</p>
                 </div>
               </button>

               <div className="p-6 bg-red-50 rounded-[2.5rem] space-y-4 border border-red-100 shadow-inner text-left">
                 <p className="text-[10px] font-black text-red-800 uppercase tracking-[0.2em] flex items-center gap-2 mb-2"><LogIn size={16}/> Update Data Anda</p>
                 <div className="space-y-3 text-left">
                   <input type="text" placeholder="USERNAME" className="w-full p-4 rounded-2xl border-none text-xs font-bold uppercase focus:ring-2 focus:ring-red-500 shadow-sm" onChange={e => setLoginCreds({...loginCreds, username: e.target.value})} />
                   <input type="password" placeholder="PASSWORD" className="w-full p-4 rounded-2xl border-none text-xs font-bold focus:ring-2 focus:ring-red-500 shadow-sm" onChange={e => setLoginCreds({...loginCreds, password: e.target.value})} />
                   <button onClick={() => {
                     const m = merchants.find(m => (m.username || "").toLowerCase() === loginCreds.username.toLowerCase() && m.password === loginCreds.password);
                     if(m) { setOwnerForm(m); setActiveDocId(m.id); setIsUpdateMode(true); setView('owner-form'); } else { alert("Data tidak ditemukan."); }
                   }} className="w-full py-4 bg-red-700 text-white rounded-2xl font-black text-[11px] uppercase tracking-widest shadow-lg shadow-red-200 active:scale-95 transition-all">MASUK & EDIT</button>
                 </div>
               </div>
            </div>
          </div>
        )}

        {/* VIEW: OWNER FORM */}
        {view === 'owner-form' && (
          <div className="space-y-4 animate-in slide-in-from-right duration-300 pb-10 text-left">
            <button onClick={() => setView('owner-menu')} className="flex items-center gap-2 text-red-700 font-black text-[11px] uppercase tracking-widest"><ChevronLeft size={18}/> Batal</button>
            <div className="bg-white p-7 rounded-[3rem] shadow-2xl space-y-5 border border-slate-50">
              <h2 className="text-center font-black uppercase text-sm tracking-widest text-slate-800 italic">{isUpdateMode ? 'Update Data' : 'Daftar Anggota'}</h2>
              <div className="grid grid-cols-2 gap-3">
                <input disabled={isUpdateMode} type="text" placeholder="Username" className={`w-full p-4 rounded-2xl border-none text-xs font-bold shadow-inner uppercase ${isUpdateMode ? 'bg-slate-100 text-slate-400' : 'bg-slate-50'}`} value={ownerForm.username} onChange={e => setOwnerForm({...ownerForm, username: e.target.value})} />
                <input type="password" placeholder="Password" className="w-full p-4 rounded-2xl border-none text-xs font-bold shadow-inner bg-slate-50" value={ownerForm.password} onChange={e => setOwnerForm({...ownerForm, password: e.target.value})} />
              </div>
              <input type="number" placeholder="NIK KTP (16 Digit)" className="w-full p-4 rounded-2xl border-none text-xs font-bold shadow-inner bg-slate-50" value={ownerForm.ktp} onChange={e => setOwnerForm({...ownerForm, ktp: e.target.value})} />
              <input type="text" placeholder="Link Foto Jualan" className="w-full p-4 rounded-2xl border-none text-xs font-bold shadow-inner bg-slate-50" value={ownerForm.photoUrl} onChange={e => setOwnerForm({...ownerForm, photoUrl: e.target.value})} />
              
              {ownerForm.businessItems.map((item, bIdx) => (
                <div key={item.id} className="p-5 rounded-[2.5rem] bg-red-50/50 border-2 border-dashed border-red-100 space-y-4">
                  <div className="flex justify-between items-center"><span className="text-[10px] font-black text-red-700 uppercase italic tracking-widest">Jenis Usaha Ke-{bIdx+1}</span></div>
                  
                  <div className="space-y-1">
                    <label className="text-[9px] font-black text-slate-400 uppercase ml-2 tracking-widest">Pilih Kategori</label>
                    <select 
                      className="w-full p-3 rounded-xl border-none text-xs font-bold shadow-sm" 
                      value={item.category} 
                      onChange={e => {
                        const up = [...ownerForm.businessItems]; up[bIdx].category = e.target.value; setOwnerForm({...ownerForm, businessItems: up});
                      }}
                    >
                      <option value="">-- PILIH SPESIALISASI --</option>
                      {Object.entries(CATEGORY_GROUPS).map(([group, subCats]) => (
                        <optgroup key={group} label={group.toUpperCase()}>
                          {subCats.map(c => <option key={c} value={c}>{c}</option>)}
                        </optgroup>
                      ))}
                    </select>
                  </div>

                  <input type="text" placeholder="Nama Jualan (Misal: Pecel Lele Mak Itam)" className="w-full p-3 rounded-xl border-none text-xs font-bold shadow-sm" value={item.type} onChange={e => {
                    const up = [...ownerForm.businessItems]; up[bIdx].type = e.target.value; setOwnerForm({...ownerForm, businessItems: up});
                  }} />

                  <div className="flex flex-wrap gap-2">
                    {(item.locations || []).map((loc, lIdx) => (
                      <div key={lIdx} className="bg-green-600 text-white text-[9px] px-3 py-2 rounded-xl flex items-center gap-1 font-black uppercase tracking-tighter shadow-md animate-in zoom-in">
                        <CheckCircle size={10}/> LOKASI {lIdx+1} OK
                      </div>
                    ))}
                    {(item.locations || []).length < 3 && (
                      <button onClick={() => captureLocation(bIdx)} className="bg-white border-2 border-red-700 text-red-700 text-[10px] px-4 py-2.5 rounded-2xl font-black uppercase shadow-sm tracking-tight">+ Klik Lokasi</button>
                    )}
                  </div>
                  <p className="text-[8px] text-slate-400 font-bold italic text-center uppercase tracking-tighter">*Satu jenis usaha maksimal 3 lokasi.</p>
                </div>
              ))}

              {ownerForm.businessItems.length < 3 && (
                <button onClick={() => {
                  setOwnerForm({
                    ...ownerForm,
                    businessItems: [...ownerForm.businessItems, { id: Date.now(), type: '', category: '', locations: [] }]
                  });
                }} className="w-full py-4 border-2 border-red-700 text-red-700 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-red-50">+ Tambah Jenis Usaha</button>
              )}

              <textarea maxLength={100} placeholder="Slogan usaha (Maks 100 Karakter)..." className="w-full p-5 rounded-[2rem] bg-slate-50 border-none text-xs font-medium h-24 shadow-inner" value={ownerForm.slogan} onChange={e => setOwnerForm({...ownerForm, slogan: e.target.value})} />
              <button onClick={handleSave} className="w-full py-5 bg-green-600 text-white rounded-[2.5rem] font-black uppercase tracking-widest shadow-xl active:scale-95 transition-all">Simpan Data Member</button>
            </div>
          </div>
        )}

        {/* VIEW: BUYER SEARCH */}
        {view === 'buyer-view' && (
          <div className="space-y-4 animate-in slide-in-from-left duration-300 pb-10 text-left">
            <button onClick={() => setView('landing')} className="flex items-center gap-2 text-red-700 font-black text-[11px] uppercase tracking-widest"><ChevronLeft size={18}/> Kembali</button>
            <div className="bg-white p-5 rounded-[2.5rem] shadow-md space-y-4 border border-slate-50">
              <div className="flex items-center gap-3 bg-slate-50 p-3 px-5 rounded-2xl shadow-inner border border-slate-100">
                <Search size={18} className="text-slate-300" />
                <input type="text" placeholder="Lapar? Cari Jajanan Pasar..." className="bg-transparent border-none text-xs font-bold w-full focus:ring-0 uppercase tracking-tight" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
              </div>
              
              <div className="space-y-1">
                <label className="text-[9px] font-black text-slate-400 uppercase ml-2 tracking-widest">Filter Kategori</label>
                <div className="flex gap-2 overflow-x-auto no-scrollbar py-1">
                  <button onClick={() => setFilterCat('')} className={`shrink-0 px-5 py-2.5 rounded-full text-[10px] font-black uppercase transition-all tracking-widest ${filterCat === '' ? 'bg-red-700 text-white shadow-lg shadow-red-100' : 'bg-slate-50 text-slate-400'}`}>Semua</button>
                  {ALL_CATEGORIES.map(c => (
                    <button key={c} onClick={() => setFilterCat(c)} className={`shrink-0 px-5 py-2.5 rounded-full text-[10px] font-black uppercase transition-all tracking-widest ${filterCat === c ? 'bg-red-700 text-white shadow-lg shadow-red-100' : 'bg-slate-50 text-slate-400'}`}>{c}</button>
                  ))}
                </div>
              </div>
            </div>

            <div className="relative h-72 bg-slate-200 rounded-[3rem] border-4 border-white shadow-2xl overflow-hidden">
               <div className="absolute inset-0 opacity-40 bg-[url('https://api.mapbox.com/styles/v1/mapbox/light-v10/static/106.8456,-6.2088,12,0/600x600?access_token=none')] bg-cover"></div>
               {userLocation && <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"><div className="w-5 h-5 bg-blue-500 rounded-full border-4 border-white animate-pulse shadow-xl"></div></div>}
               {filteredMerchants.map((m, idx) => (m.businessItems || []).map((item, iIdx) => (item.locations || []).map((loc, lIdx) => (
                 <div key={`${m.id}-${iIdx}-${lIdx}`} className="absolute text-red-700 animate-bounce" style={{ top: `${30+(Math.sin(idx+lIdx)*25)}%`, left: `${20+(Math.cos(idx+lIdx)*35)}%` }}>
                   <MapPin size={28} fill="currentColor" stroke="white" strokeWidth={1} />
                   <div className="absolute -top-7 left-1/2 -translate-x-1/2 bg-white px-2 py-1 rounded-full shadow-lg text-[8px] font-black whitespace-nowrap uppercase tracking-tighter border border-red-100">{String(item.type || "")}</div>
                 </div>
               ))))}
            </div>

            <div className="space-y-4 pt-2">
              <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em] ml-4 italic text-left">Anggota Terdaftar ({filteredMerchants.length})</h3>
              {filteredMerchants.length === 0 ? <p className="text-center py-20 text-slate-300 font-bold uppercase tracking-widest italic text-sm">Belum Ada Penjual di Kategori Ini...</p> : 
                filteredMerchants.map(m => (
                  <div key={m.id} className="bg-white p-5 rounded-[2.5rem] border border-slate-50 shadow-sm flex gap-4 active:scale-95 transition-all text-left">
                    <div className="w-24 h-24 rounded-3xl bg-slate-100 shrink-0 overflow-hidden shadow-inner border border-slate-50">
                      <img src={m.photoUrl || "https://images.unsplash.com/photo-1543007630-9710e4a00a20?w=300"} className="w-full h-full object-cover" alt="Usaha" onError={e => e.target.src="https://via.placeholder.com/300?text=Kelas+Pekerja"} />
                    </div>
                    <div className="flex-1 space-y-1.5 pt-1 text-left">
                      <div className="flex justify-between items-center"><h4 className="font-black text-[13px] uppercase tracking-tighter text-slate-800 leading-none">{m.username}</h4><span className="text-[8px] font-black bg-slate-50 border border-slate-100 px-2 py-1 rounded-lg text-slate-400 tracking-tighter shadow-sm">ID #{m.serialNumber}</span></div>
                      <div className="flex flex-wrap gap-1">{(m.businessItems || []).map((b, bi) => (
                        <span key={bi} className="text-[8px] font-black text-red-700 bg-red-50 border border-red-100 px-2 py-1 rounded-full uppercase tracking-tighter">{b.type || b.category}</span>
                      ))}</div>
                      <p className="text-[10px] text-slate-400 italic font-medium leading-relaxed">"{m.slogan}"</p>
                      <button className="bg-red-700 text-white text-[9px] font-black px-4 py-2.5 rounded-[1.2rem] flex items-center gap-2 mt-2 uppercase shadow-lg shadow-red-100 tracking-widest"><MapIcon size={14}/> Buka Peta</button>
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
        )}
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-slate-100 p-4 flex justify-around items-center z-50 shadow-[0_-10px_30px_-15px_rgba(0,0,0,0.1)]">
        <button onClick={() => setView('landing')} className={`flex flex-col items-center transition-all ${view === 'landing' ? 'text-red-700 scale-125' : 'text-slate-300'}`}><Store size={22} strokeWidth={view === 'landing' ? 3 : 2}/><span className="text-[8px] font-black uppercase mt-1 tracking-tighter">Beranda</span></button>
        <button onClick={() => setView('buyer-view')} className={`flex flex-col items-center transition-all ${view === 'buyer-view' ? 'text-red-700 scale-125' : 'text-slate-300'}`}><Search size={22} strokeWidth={view === 'buyer-view' ? 3 : 2}/><span className="text-[8px] font-black uppercase mt-1 tracking-tighter">Cari</span></button>
        <button onClick={() => setView('owner-menu')} className={`flex flex-col items-center transition-all ${['owner-menu', 'owner-form'].includes(view) ? 'text-red-700 scale-125' : 'text-slate-300'}`}><User size={22} strokeWidth={['owner-menu', 'owner-form'].includes(view) ? 3 : 2}/><span className="text-[8px] font-black uppercase mt-1 tracking-tighter">Profil</span></button>
      </nav>
    </div>
  );
};

export default App;