Post a new ad

setForm({...form,title:e.target.value})} className="w-full rounded-xl border px-3 py-2" placeholder="e.g., iPhone 13 Pro Max 256GB"/>

setForm({...form,price:e.target.value})} className="w-full rounded-xl border px-3 py-2" placeholder="$..."/>

setForm({...form,description:e.target.value})} className="w-full rounded-2xl border px-3 py-2" placeholder="Condition, warranty, delivery, contact..."/></Field>
        <div className="pt-2 flex items-center gap-3">
          <button className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold">Publish</button>
          <button onClick={onBack} className="px-5 py-2.5 rounded-xl border">Cancel</button>
        </div>
      </div>
    </main>
  );
}

function Profile(){
  const [tab,setTab] = React.useState("overview");
  return (
    <main className="max-w-5xl mx-auto px-4 py-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-extrabold">Your Profile</h1>
        <div className="flex gap-2">
          <button onClick={()=>setTab('overview')} className={tabBtn(tab==='overview')}>Overview</button>
          <button onClick={()=>setTab('listings')} className={tabBtn(tab==='listings')}>My Listings</button>
          <button onClick={()=>setTab('settings')} className={tabBtn(tab==='settings')}>Settings</button>
        </div>
      </div>
      {tab==='overview' && (
        <section className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-2xl border p-6">
            <div className="h-20 w-20 rounded-2xl bg-gradient-to-tr from-purple-600 via-pink-500 to-yellow-400" />
            <div className="mt-3 font-bold text-lg">GanDi User</div>
            <div className="text-sm text-gray-500">Member since 2025</div>
            <div className="mt-4 text-sm text-gray-600">Location: Phnom Penh</div>
            <div className="mt-2 text-sm text-gray-600">Phone: +855 78 000 000</div>
          </div>
          <div className="bg-white rounded-2xl border p-6 md:col-span-2">
            <div className="font-bold">About</div>
            <p className="text-gray-600 mt-2">Welcome to GanDi Auditor marketplace. Update your information in Settings, and start posting your ads to reach buyers across Cambodia.</p>
          </div>
        </section>
      )}
      {tab==='listings' && (
        <section className="mt-6 bg-white rounded-2xl border p-6">
          <div className="font-bold mb-4">Your recent listings</div>
          <div className="text-gray-500">No listings yet. Click “Post Ad” to create your first listing.</div>
        </section>
      )}
      {tab==='settings' && (
        <section className="mt-6 bg-white rounded-2xl border p-6 space-y-4">
          <Field label="Display name"><input className="w-full rounded-xl border px-3 py-2" defaultValue="GanDi User"/></Field>
          <Field label="Phone number"><input className="w-full rounded-xl border px-3 py-2" placeholder="+855..."/></Field>
          <Field label="Email"><input type="email" className="w-full rounded-xl border px-3 py-2" placeholder="you@example.com"/></Field>
          <Field label="Bio"><textarea rows="4" className="w-full rounded-2xl border px-3 py-2" placeholder="Tell buyers about yourself"/></Field>
          <div className="pt-2"><button className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold">Save changes</button></div>
        </section>
      )}
    </main>
  );
}

function Field({label,children}){ return (<label className="block"><div className="text-xs font-medium text-gray-600">{label}</div><div className="mt-1">{children}</div></label>); }
function tabBtn(active){ return "px-3 py-1.5 rounded-xl border text-sm " + (active ? "bg-purple-50 border-purple-500 text-purple-700" : "hover:border-purple-400"); }

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);/* App.jsx (same UI as before, SPA) */
const { useMemo, useState } = React;

function App() {
  const [route, setRoute] = useState("home");
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("All Categories");
  const [location, setLocation] = useState("All Cambodia");
  const [showLogin, setShowLogin] = useState(false);

const categories = [
    "All Categories","Phones & Tablets","Vehicles","Real Estate","Electronics","Jobs","Services","Fashion","Home & Living","Pets"
  ];
  const locations = ["All Cambodia","Phnom Penh","Siem Reap","Battambang","Sihanoukville","Kampot","Bavet"];

const listings = useMemo(() => [
    { id:1,title:"Samsung Galaxy S24 Ultra 256GB",price:"$1,099",img:"https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?q=80&w=1200&auto=format&fit=crop",location:"Phnom Penh",time:"Today",category:"Phones & Tablets" },
    { id:2,title:"Honda Dream 2019 — Good condition",price:"$1,150",img:"https://images.unsplash.com/photo-1519638831568-d9897f54ed0d?q=80&w=1200&auto=format&fit=crop",location:"Siem Reap",time:"1h ago",category:"Vehicles" },
    { id:3,title:"Apartment for rent • BKK1 • 2BR",price:"$650/mo",img:"https://images.unsplash.com/photo-1501183638710-841dd1904471?q=80&w=1200&auto=format&fit=crop",location:"Phnom Penh",time:"Today",category:"Real Estate" },
    { id:4,title:"PlayStation 5 + 2 controllers",price:"$450",img:"https://images.unsplash.com/photo-1585079542156-2755d9c8affd?q=80&w=1200&auto=format&fit=crop",location:"Battambang",time:"Yesterday",category:"Electronics" },
    { id:5,title:"Accounting services (Monthly) — SME",price:"Contact",img:"https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=1200&auto=format&fit=crop",location:"Phnom Penh",time:"2d ago",category:"Services" },
    { id:6,title:"iPad Pro 11” (M2) + Pencil",price:"$850",img:"https://images.unsplash.com/photo-1557821552-17105176677c?q=80&w=1200&auto=format&fit=crop",location:"Kampot",time:"Today",category:"Phones & Tablets" },
    { id:7,title:"Kawasaki H2 — 2018 • Original",price:"$17,500",img:"https://images.unsplash.com/photo-1519682577862-22b62b24e493?q=80&w=1200&auto=format&fit=crop",location:"Phnom Penh",time:"3h ago",category:"Vehicles" },
    { id:8,title:"MacBook Pro 14” M3 • 1TB",price:"$1,899",img:"https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=1200&auto=format&fit=crop",location:"Bavet",time:"Today",category:"Electronics" },
  ], []);

const filtered = useMemo(() => listings.filter(x => {
    const q = query.trim().toLowerCase();
    const matchesQuery = !q || x.title.toLowerCase().includes(q);
    const matchesCategory = category === "All Categories" || x.category === category;
    const matchesLocation = location === "All Cambodia" || x.location === location;
    return matchesQuery && matchesCategory && matchesLocation;
  }), [query, category, location, listings]);

return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      <div className="w-full bg-gradient-to-r from-indigo-600 via-pink-600 to-yellow-500 text-white text-center text-sm py-2">
        <span className="font-semibold">GanDi Auditor</span> — Cambodia's marketplace template
      </div>

<header className="sticky top-0 z-40 bg-white/90 backdrop-blur border-b">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3">
          <a href="https://gandiauditor.com" className="flex items-center gap-2" aria-label="GanDi Auditor homepage">
            <div className="h-9 w-9 rounded-xl bg-gradient-to-tr from-purple-600 via-red-500 to-yellow-400 shadow" />
            <div className="font-black text-xl tracking-tight">GanDi <span className="text-purple-600">Auditor</span></div>
          </a>
          <nav className="ml-auto hidden md:flex items-center gap-6 text-sm">
            <button onClick={() => setRoute('home')} className={navCls(route==='home')}>Home</button>
            <button onClick={() => setRoute('post')} className={navCls(route==='post')}>Post Ad</button>
            <button onClick={() => setRoute('profile')} className={navCls(route==='profile')}>Profile</button>
            <a href="#help" className="hover:text-purple-600">Help</a>
          </nav>
          <div className="md:ml-4 ml-auto flex items-center gap-2">
            <button onClick={() => setShowLogin(true)} className="px-3 py-1.5 rounded-xl border hover:bg-gray-50 text-sm">Log in</button>
            <button onClick={() => setRoute('post')} className="px-3 py-1.5 rounded-xl text-sm text-white bg-gradient-to-r from-purple-600 to-pink-500 shadow">+ Post Ad</button>
          </div>
        </div>
      </header>

{route === 'home' && (
        <main className="max-w-7xl mx-auto px-4 py-6">
          <section className="bg-white rounded-2xl shadow-sm border p-4 md:p-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
              <div className="md:col-span-2">
                <label className="text-xs font-medium text-gray-500">Search</label>
                <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search listings..." className="w-full mt-1 rounded-xl border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"/>
              </div>
              <div>
                <label className="text-xs font-medium text-gray-500">Category</label>
                <select value={category} onChange={e=>setCategory(e.target.value)} className="w-full mt-1 rounded-xl border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                  {categories.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
              <div>
                <label className="text-xs font-medium text-gray-500">Location</label>
                <select value={location} onChange={e=>setLocation(e.target.value)} className="w-full mt-1 rounded-xl border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                  {locations.map(l => <option key={l} value={l}>{l}</option>)}
                </select>
              </div>
            </div>
            <div className="mt-4 flex flex-wrap gap-2">
              {categories.slice(1,8).map(c => (
                <button key={c} onClick={()=>setCategory(c)} className={"px-3 py-1.5 rounded-xl border text-sm hover:border-purple-400 " + (category===c ? "bg-purple-50 border-purple-500 text-purple-700": "")}>{c}</button>
              ))}
            </div>
          </section>

<section className="mt-6">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-bold">Latest listings</h2>
              <a href="#" className="text-sm text-purple-600">See all</a>
            </div>
            <div className="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {filtered.map(item => <Card key={item.id} item={item}/>)}
              {filtered.length===0 && <div className="col-span-full text-center text-gray-500 py-12">No results. Try a different search.</div>}
            </div>
          </section>

<section className="mt-10">
            <div className="bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 text-white rounded-2xl p-6 md:p-10 shadow">
              <h3 className="text-2xl md:text-3xl font-extrabold">Sell faster on GanDi Auditor</h3>
              <p className="mt-2 text-white/90 max-w-2xl">Post your items in minutes. Reach thousands of buyers across Cambodia.</p>
              <div className="mt-4">
                <button onClick={()=>setRoute('post')} className="px-5 py-2.5 rounded-xl bg-white text-gray-900 font-semibold shadow">Post your ad</button>
              </div>
            </div>
          </section>
        </main>
      )}

{route === 'post' && <PostAd onBack={()=>setRoute('home')}/>}
      {route === 'profile' && <Profile />}

<footer className="border-t mt-10">
        <div className="max-w-7xl mx-auto px-4 py-8 grid grid-cols-2 md:grid-cols-4 gap-6 text-sm">
          <div>
            <div className="font-bold mb-2">GanDi Auditor</div>
            <ul className="space-y-1 text-gray-600">
              <li><a href="https://gandiauditor.com" className="hover:text-purple-600">Home</a></li>
              <li><a href="#about" className="hover:text-purple-600">About</a></li>
              <li><a href="#contact" className="hover:text-purple-600">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="font-bold mb-2">Categories</div>
            <ul className="space-y-1 text-gray-600">
              {categories.slice(1,7).map(c => <li key={c}><a href="#" className="hover:text-purple-600">{c}</a></li>)}
            </ul>
          </div>
          <div>
            <div className="font-bold mb-2">Help</div>
            <ul className="space-y-1 text-gray-600">
              <li><a href="#help" className="hover:text-purple-600">How to post</a></li>
              <li><a href="#safety" className="hover:text-purple-600">Safety tips</a></li>
              <li><a href="#policy" className="hover:text-purple-600">Policy</a></li>
            </ul>
          </div>
          <div>
            <div className="font-bold mb-2">Follow</div>
            <div className="flex items-center gap-3 text-gray-600">
              <a aria-label="Facebook" href="https://facebook.com" className="hover:text-purple-600">Facebook</a>
              <a aria-label="Telegram" href="https://t.me" className="hover:text-purple-600">Telegram</a>
              <a aria-label="YouTube" href="https://youtube.com" className="hover:text-purple-600">YouTube</a>
            </div>
          </div>
        </div>
        <div className="text-center text-xs text-gray-500 pb-8">© {new Date().getFullYear()} GanDi Auditor — All rights reserved.</div>
      </footer>

{showLogin && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl p-6 w-full max-w-md shadow-xl">
            <div className="text-lg font-bold">Log in</div>
            <p className="text-sm text-gray-600 mt-1">Use phone number or email</p>
            <div className="mt-4 space-y-3">
              <input placeholder="Phone or email" className="w-full rounded-xl border px-3 py-2" />
              <input placeholder="Password" type="password" className="w-full rounded-xl border px-3 py-2" />
              <button className="w-full rounded-xl bg-gradient-to-r from-purple-600 to-pink-500 text-white py-2 font-semibold">Continue</button>
              <button onClick={()=>setShowLogin(false)} className="w-full rounded-xl border py-2">Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function navCls(active){ return "px-2 py-1 rounded-lg " + (active ? "text-purple-600 font-semibold" : "hover:text-purple-600"); }

function Card({item}){
  return (
    <a href={`#/listing/${item.id}`} className="group block bg-white rounded-2xl overflow-hidden border hover:shadow-sm transition">
      <div className="aspect-[4/3] overflow-hidden bg-gray-100">
        <img src={item.img} alt={item.title} className="w-full h-full object-cover group-hover:scale-105 transition"/>
      </div>
      <div className="p-3">
        <div className="text-sm text-gray-500">{item.location} • {item.time}</div>
        <div className="mt-1 font-semibold line-clamp-2 leading-snug">{item.title}</div>
        <div className="mt-1 text-purple-600 font-bold">{item.price}</div>
      </div>
    </a>
  );
}

function PostAd({onBack}){
  const [form,setForm] = React.useState({title:"",price:"",category:"Phones & Tablets",location:"Phnom Penh",description:""});
  return (
    <main className="max-w-3xl mx-auto px-4 py-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-extrabold">Post a new ad</h1>
        <button onClick={onBack} className="text-sm text-purple-600">← Back to home</button>
      </div>
      <div className="mt-6 bg-white rounded-2xl border p-6 space-y-4">
        <Field label="Title"><input value={form.title} onChange={e=>setForm({...form,title:e.target.value})} className="w-full rounded-xl border px-3 py-2" placeholder="e.g., iPhone 13 Pro Max 256GB"/></Field>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Field label="Price"><input value={form.price} onChange={e=>setForm({...form,price:e.target.value})} className="w-full rounded-xl border px-3 py-2" placeholder="$..."/></Field>
          <Field label="Category">
            <select value={form.category} onChange={e=>setForm({...form,category:e.target.value})} className="w-full rounded-xl border px-3 py-2">
              {["Phones & Tablets","Vehicles","Real Estate","Electronics","Jobs","Services","Fashion","Home & Living","Pets"].map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </Field>
        </div>
        <Field label="Location">
          <select value={form.location} onChange={e=>setForm({...form,location:e.target.value})} className="w-full rounded-xl border px-3 py-2">
            {["Phnom Penh","Siem Reap","Battambang","Sihanoukville","Kampot","Bavet"].map(l => <option key={l} value={l}>{l}</option>)}
          </select>
        </Field>
        <Field label="Description"><textarea rows="5" value={form.description} onChange={e=>setForm({...form,description:e.target.value})} className="w-full rounded-2xl border px-3 py-2" placeholder="Condition, warranty, delivery, contact..."/></Field>
        <div className="pt-2 flex items-center gap-3">
          <button className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold">Publish</button>
          <button onClick={onBack} className="px-5 py-2.5 rounded-xl border">Cancel</button>
        </div>
      </div>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);</body>
</html>