{/* Hamburger */} {/* Logo + brand */}

MyTown 360

EC · Bangalore ✦

{/* Bell button */} {/* Avatar */}

{/* ── Notification panel (slides down) ── */} {notifOpen&&(

{/* Panel header */}

Notifications {unread>0&&{unread} new}

{unread>0&&( )}

{/* Notification list */}

{notifs.map(n=>(

markRead(n.id)} style={{ display:"flex",gap:11,padding:"11px 16px", background:n.read?"#fff":"linear-gradient(135deg,rgba(92,45,145,0.04),#fff)", borderBottom:`1px solid ${C.border}`, cursor:"pointer", borderLeft:`3px solid ${n.read?"transparent":n.col}`, }}> {/* Icon bubble */}

{n.icon}

{/* Text */}

{n.title} {n.time}

{n.body}

{/* Unread dot */} {!n.read&&

}

))}

{/* Footer */}

)}

); } // ─── Sidebar Drawer ────────────────────────────────────────────────────────── // Sidebar only contains items NOT already in the bottom nav // Bottom nav covers: Feed · Events · Leaders · Messages · Profile const SIDEBAR_ACTIONS=[ { id:"map", icon:"🗺", label:"Neighbours Map", sub:"Interactive map of your area", color:C.purple }, { id:"community_apply",icon:"✍️", label:"Apply for Community Admin", sub:"Stand for election in your area", color:C.mint, highlight:true }, { id:"contact_admin", icon:"📞", label:"Contact Community Admin", sub:"Message your area's current manager", color:C.purple }, ]; const SIDEBAR_QUICK=[ {icon:"🛡️", label:"Safety Alerts", color:"#FF6B7A", id:"feed"}, {icon:"🔧", label:"Service Providers", color:"#5C2D91", id:"feed"}, {icon:"⭐", label:"Recommendations", color:"#00B89F", id:"feed"}, {icon:"🗺️", label:"Area Map", color:"#4F46E5", id:"map"}, {icon:"📞", label:"Helplines", color:"#DC2626", id:"helplines"}, {icon:"📅", label:"Events", color:"#D97706", id:"events"}, ]; function Sidebar({open, onClose, nav, activeTab}){ useEffect(()=>{ document.body.style.overflow = open ? "hidden" : ""; return ()=>{ document.body.style.overflow=""; }; },[open]); useEffect(()=>{ const h=(e)=>{ if(e.key==="Escape") onClose(); }; window.addEventListener("keydown",h); return ()=>window.removeEventListener("keydown",h); },[onClose]); return( <> {/* Backdrop */}

{/* Panel */}

{/* Header — gradient band */}

{/* Decorative orb */}

MyTown 360

EC · Bangalore ✦

{/* User card — glassy */}

Meena T.

✅ Verified Resident

EC P1

{/* ── Actions (unique — not in bottom nav) ── */}

Quick Actions

{SIDEBAR_ACTIONS.map(item=>{ const hl=item.highlight; return( ); })}

{/* Divider */}

{/* ── Quick Access grid ── */}

Quick Access

{SIDEBAR_QUICK.map(item=>( ))}

{/* ── Emergency Helplines strip ── */}

Emergency Numbers

{[{icon:"🚨",name:"Police",phone:"100",color:"#DC2626"}, {icon:"🚑",name:"Ambulance",phone:"108",color:"#059669"}, {icon:"🔥",name:"Fire",phone:"101",color:"#EA580C"}].map(h=>( {h.icon} {h.phone} {h.name} ))}

{/* Admin Panel shortcut — hidden from public, accessed directly via /admin URL */} {/* Footer */}

MyTown 360

v1.0 · EC Bangalore

); } // ─── SCREEN: Login ──────────────────────────────────────────────────────────── function LoginScreen({nav}){ const [mode,setMode]=useState("email"); // "email" | "phone" const [identifier,setIdentifier]=useState(""); // email or phone value const [password,setPassword]=useState(""); const [showPw,setShowPw]=useState(false); const [errs,setErrs]=useState({}); const [submitted,setSubmitted]=useState(false); const setErr=(k,msg)=>setErrs(e=>msg?{...e,[k]:msg}:(({[k]:_,...rest})=>rest)(e)); const idLabel = mode==="email"?"Email Address":"Mobile Number"; const idPlaceholder = mode==="email"?"name@gmail.com":"98450 XXXXX"; const validateId = v => mode==="email" ? vEmail(v) : vPhone(v); const filterInput = v => mode==="email" ? stripEmail(v) : stripPhone(v); const handleIdChange = e => { const v = filterInput(e.target.value); setIdentifier(v); if(errs.identifier) setErr("identifier", validateId(v)); }; const handlePwChange = e => { setPassword(e.target.value); if(errs.password) setErr("password", vPassword(e.target.value)); }; const handleSignIn = () => { const idErr = validateId(identifier); const pwErr = vPassword(password); const newErrs = {}; if(idErr) newErrs.identifier = idErr; if(pwErr) newErrs.password = pwErr; if(Object.keys(newErrs).length){ setErrs(newErrs); return; } setSubmitted(true); // Simulate success — navigate to feed setTimeout(()=>nav("feed"), 900); }; if(submitted) return(

✅

Signing you in…

Welcome back to MyTown 360

); return(

{/* Header */}

mytown360.in ✦

{/* Body — centred, responsive */}

{/* Logo + welcome */}

Welcome Back!

{/* Mode toggle */}

{[["email","📧 Email"],["phone","📱 Phone"]].map(([m,l])=>( ))}

{/* Identifier field */}

{idLabel}

{mode==="email"?"📧":"📱"} setErr("identifier",validateId(identifier))} autoComplete={mode==="email"?"email":"tel"}/>

{errs.identifier&&

⚠ {errs.identifier}

}

{/* Password field */}

Password

🔒 setErr("password",vPassword(password))} autoComplete="current-password"/>

{errs.password&&

⚠ {errs.password}

}

{/* Forgot password */}

{/* Sign in button */} {/* Divider */}

{/* Recovery / create account options */}

); } // ─── SCREEN: Forgot Account Recovery ───────────────────────────────────────── function ForgotScreen({nav}){ const [step,setStep]=useState(0); // 0=choose method, 1=enter details, 2=otp, 3=success const [method,setMethod]=useState(""); // "email" | "phone" const [value,setValue]=useState(""); const [otp,setOtp]=useState(["","","","","",""]); const [recoverType,setRecoverType]=useState("password"); // "password" | "userid" const [errs,setErrs]=useState({}); const setErr=(k,msg)=>setErrs(e=>msg?{...e,[k]:msg}:(({[k]:_,...rest})=>rest)(e)); const validate=()=>{ const err = method==="email"?vEmail(value):vPhone(value); if(err){setErr("value",err);return false;} return true; }; const handleSend=()=>{ if(!method){setErr("method","Please choose a recovery method");return;} if(!validate()) return; setStep(2); }; const handleOtpChange=(i,v)=>{ const d=v.replace(/\D/,"").slice(0,1); const next=[...otp]; next[i]=d; setOtp(next); if(d&&i<5){ const el=document.getElementById(`otp-${i+1}`); if(el) el.focus(); } }; const handleVerify=()=>{ if(otp.join("").length<6){setErr("otp","Enter all 6 digits");return;} setStep(3); }; const Screen0=(

🔐

Recover Your Account

What would you like to recover?

{/* Recover type */}

{[["password","🔑 Password"],["userid","🪪 Email / Phone"]].map(([t,l])=>( ))}

How do you want to receive the OTP?

{[["email","📧","Via Email Address","Enter your registered email"],["phone","📱","Via Mobile Number","Enter your registered phone"]].map(([m,ic,title,sub])=>( ))}

{errs.method&&

⚠ {errs.method}

} {method&&(

{method==="email"?"Your registered email":"Your registered mobile number"}

{method==="email"?"📧":"📱"} { const v=method==="email"?stripEmail(e.target.value):stripPhone(e.target.value); setValue(v); if(errs.value)setErr("value",method==="email"?vEmail(v):vPhone(v)); }} onBlur={()=>validate()}/>

{errs.value&&

⚠ {errs.value}

}

)}

); const Screen2=(

{method==="email"?"📧":"📱"}

Enter Verification Code

We sent a 6-digit OTP to {method==="email"?"your email":"your mobile"}
{value}

{otp.map((digit,i)=>( handleOtpChange(i,e.target.value)} onKeyDown={e=>{if(e.key==="Backspace"&&!digit&&i>0){const el=document.getElementById(`otp-${i-1}`);if(el)el.focus();}}}/> ))}

{errs.otp&&

⚠ {errs.otp}

}

Didn't receive it?

); const Screen3=(

🎉

Verified!

{recoverType==="password"?"You can now set a new password for your account.":"Your registered email / phone has been sent to you."}

{recoverType==="password"&&(

New Password

🔒

)}

); return(

{/* Header */}

Account Recovery

MyTown 360 · mytown360.in

{/* Step dots */}

{[0,2,3].map((s,i)=>(

s?C.mint:step===s?C.purple:C.border}}/> ))}

{step===0&&Screen0} {step===2&&Screen2} {step===3&&Screen3}

); } // ─── SCREEN: Landing ───────────────────────────────────────────────────────── function LandingScreen({nav}){ return(

{/* ── Animated mesh gradient background ── */}

{/* Main gradient layer */}

{/* Orb 1 — purple */}

{/* Orb 2 — mint */}

{/* Orb 3 — coral accent */}

{/* Fine dot grid overlay */}

{/* ── Hero section ── */}

{/* Logo with glow ring */}

{/* Brand name with gradient text */}

MyTown 360

✦ mytown360.in ✦

Your Real Neighbourhood, Online.

Electronic City · Hebbagodi · Bommasandra & beyond

{/* ── Feature cards — glassy 2×2 grid ── */}

{[ {col:"#7B4BB8",ic:"🛡️",t:"ID Verified", s:"Real neighbours only", grad:"linear-gradient(135deg,rgba(92,45,145,0.5),rgba(123,75,184,0.2))"}, {col:"#00B89F",ic:"📍",t:"Hyper-Local", s:"Your exact sub-area", grad:"linear-gradient(135deg,rgba(0,184,159,0.45),rgba(0,150,126,0.2))"}, {col:"#FF6B7A",ic:"🔒",t:"Safe Space", s:"Moderated & trusted", grad:"linear-gradient(135deg,rgba(255,107,122,0.4),rgba(232,55,74,0.15))"}, {col:"#A78BFA",ic:"🗺️",t:"Area Map", s:"EC & surroundings", grad:"linear-gradient(135deg,rgba(167,139,250,0.4),rgba(107,127,240,0.15))"}, ].map(({col,ic,t,s,grad},idx)=>(

{ic}

{t}

{s}

))}

{/* ── Stats bar — glassmorphism card ── */}

{[["2,400+","Verified Residents","#D4BCFF"],["160+","Apartments","#6EE7DF"],["21","Areas Covered","#FBB17B"]].map(([n,l,col])=>(

{n}

{l}

))} {/* Dividers */}

{/* ── Trust chips ── */}

{["🏛️ Govt-verified","📵 Zero spam","🔐 Privacy first","🆓 Always free"].map(chip=>( {chip} ))}

{/* ── CTA buttons ── */}

🔒 Government ID required · Your data stays safe

); } // ─── SCREEN: Signup with SmartInput ───────────────────────────────────────── const STEPS=["About You","Your Home","Identity","Selfie"]; const BIZ_STEPS=["Account Type","Business Info","Documents","Verification"]; const BIZ_TYPES=["Restaurant / Food","Grocery / Supermart","Services / Repairs","Medical / Pharmacy","Education / Coaching","Beauty / Wellness","Retail / Shop","Other"]; const ID_TYPES=["Aadhaar Card","Voter ID","Passport","Driving Licence"]; function SignupScreen({nav}){ const [acctType,setAcctType]=useState(""); // "personal" | "business" const [step,setStep]=useState(0); // 0=choose type; personal:1-4; business:1-4 const [form,setForm]=useState({name:"",email:"",phone:"",area:"",apartment:"",street:"",flat:""}); const [idType,setIdType]=useState("Aadhaar Card"); const [uploaded,setUploaded]=useState({}); const [bizForm,setBizForm]=useState({bizName:"",bizType:"",ownerName:"",phone:"",area:""}); const [hasLicense,setHasLicense]=useState(null); // null | true | false const [errs,setErrs]=useState({}); const set=(k,v)=>setForm(f=>({...f,[k]:v})); const setBiz=(k,v)=>setBizForm(f=>({...f,[k]:v})); const setErr=(k,msg)=>setErrs(e=>msg?{...e,[k]:msg}:(({[k]:_,...rest})=>rest)(e)); const blur=(k,val,fn)=>setErr(k,fn(val)); /* Returns null if step is valid, or an errors object if not */ const validateStep=()=>{ const e={}; if(!isBiz&&step===1){ const n=vName(form.name); if(n) e.name=n; const em=vEmail(form.email); if(em) e.email=em; const p=vPhone(form.phone); if(p) e.phone=p; } if(!isBiz&&step===2){ const a=vArea(form.area); if(a) e.area=a; const ap=vApt(form.apartment); if(ap) e.apartment=ap; const fl=vFlat(form.flat); if(fl) e.flat=fl; } if(!isBiz&&step===3){ if(!uploaded.id) e.id="Government ID is required"; if(!uploaded.address) e.address="Address proof is required"; } if(isBiz&&step===1){ const bn=vBizName(bizForm.bizName); if(bn) e.bizName=bn; const on=vName(bizForm.ownerName); if(on) e.ownerName=on; const bp=vPhone(bizForm.phone); if(bp) e.phone=bp; if(!bizForm.bizType) e.bizType="Please select a business category"; } if(isBiz&&step===2){ const ba=vArea(bizForm.area); if(ba) e.bizArea=ba; if(!uploaded.bizFront) e.bizFront="Live photo of business front is required"; } if(isBiz&&step===3){ if(hasLicense===null) e.hasLicense="Please indicate if you have a license"; else if(hasLicense&&!uploaded.bizLicense) e.bizLicense="Please upload your business license"; else if(!hasLicense&&!uploaded.bizDoc) e.bizDoc="Please upload a business document"; if(!uploaded.ownerId) e.ownerId="Owner ID is required"; } return Object.keys(e).length?e:null; }; const handleContinue=()=>{ const e=validateStep(); if(e){setErrs(prev=>({...prev,...e}));return;} setStep(s=>s+1); }; const selectedArea=form.area.replace(/\s*$PIN:.*$/,"").trim(); const aptOptions=selectedArea&&APT_BY_AREA[selectedArea] ? APT_BY_AREA[selectedArea] : ALL_APTS; const isBiz=acctType==="business"; const steps=isBiz?BIZ_STEPS:STEPS; const maxStep=steps.length; // ── Step 0: Choose account type ── if(step===0) return(

{/* Subtle background orbs */}

🏘️

Join MyTown 360

Choose your account type to get started

{/* Personal */} {/* Business */}

); return(

{/* Header */}

{isBiz?"🏪":"🧑"}

{isBiz?"Business Account":"Personal Account"}

{steps[step-1]}

{/* Step dots */}

{steps.map((_,i)=>(

))}

{/* ══════════════ PERSONAL FLOW ══════════════ */} {!isBiz&&step===1&&(

👋 Fill your details exactly as they appear on your government ID.

{[["Full Name","name","Priya Venkataraman","🪪",vName,stripName],["Email Address","email","name@gmail.com","📧",vEmail,stripEmail],["Mobile Number","phone","98450 XXXXX","📱",vPhone,stripPhone]].map(([l,k,p,ic,vfn,sfn])=>(

{l}

{ic} {const v=sfn(e.target.value);set(k,v);if(errs[k])setErr(k,vfn(v));}} onBlur={()=>blur(k,form[k],vfn)}/>

{errs[k]&&

⚠ {errs[k]}

}

))}

)} {!isBiz&&step===2&&(

📍 Start typing to see suggestions — or enter your own if not listed.

{set("area",v);set("apartment","");fromDropdown?setErr("area",null):setErr("area",vArea(v));}} icon="📍" filterFn={stripAddr} error={errs.area}/> {errs.area&&

⚠ {errs.area}

}

{set("apartment",v);fromDropdown?setErr("apartment",null):setErr("apartment",vApt(v));}} icon="🏢" filterFn={stripAddr} error={errs.apartment}/> {selectedArea&&APT_BY_AREA[selectedArea]&&(

✦ {APT_BY_AREA[selectedArea].length} apartments listed in {selectedArea}

)} {errs.apartment&&

⚠ {errs.apartment}

}

set("street",v)}/>

Flat / Door No.

🚪 {const v=stripAddr(e.target.value);set("flat",v);if(errs.flat)setErr("flat",vFlat(v));}} onBlur={()=>blur("flat",form.flat,vFlat)}/>

{errs.flat&&

⚠ {errs.flat}

}

{form.area&&form.apartment&&(

📋 YOUR ADDRESS SUMMARY

{[form.flat,form.apartment,form.street,form.area].filter(Boolean).join(", ")}

)}

)} {!isBiz&&step===3&&(

🔒 Documents are encrypted end-to-end. Used only to verify residency. Never shared publicly.

Government ID Type

{ID_TYPES.map(t=>( ))}

⚠️ Both documents are mandatory to proceed.

{[["id",`Upload ${idType}`,"📄"],["address","Upload Address Proof","🏠"]].map(([k,l,ic])=>(

{errs[k]&&

⚠ {errs[k]}

}

))}

)} {!isBiz&&step===4&&(

A live selfie matches your face to your ID. Only verified residents join.

{uploaded.selfie&&(

⏳ Under review! SMS confirmation within 24 hours.

)}

)} {/* ══════════════ BUSINESS FLOW ══════════════ */} {isBiz&&step===1&&(

🏪 Set up your business profile. Verified businesses get a badge and can promote posts to local residents.

{[["Business Name","bizName","e.g. CloudKitchen Express","🏪",vBizName,stripAddr],["Owner / Contact Name","ownerName","Your full name","🧑",vName,stripName],["Mobile Number","phone","98450 XXXXX","📱",vPhone,stripPhone]].map(([l,k,p,ic,vfn,sfn])=>(

{l}

{ic} {const v=sfn(e.target.value);setBiz(k,v);if(errs[k])setErr(k,vfn(v));}} onBlur={()=>blur(k,bizForm[k],vfn)}/>

{errs[k]&&

⚠ {errs[k]}

}

))}

Business Category

{BIZ_TYPES.map(t=>( ))}

{errs.bizType&&

⚠ {errs.bizType}

}

)} {isBiz&&step===2&&(

{setBiz("area",v);fromDropdown?setErr("bizArea",null):setErr("bizArea",vArea(v));}} icon="📍" filterFn={stripAddr} error={errs.bizArea}/> {errs.bizArea&&

⚠ {errs.bizArea}

}

Business Address

🏢 setBiz("address",stripAddr(e.target.value))}/>

{/* Live front photo — mandatory */}

📸 Live photo of business front is mandatory

{errs.bizFront&&

⚠ {errs.bizFront}

}

)} {isBiz&&step===3&&(

🔒 All documents are encrypted. Used only for verification — never shown publicly.

⚠️ All documents are mandatory before proceeding.

{/* License or alternative */}

Do you have a Business License?

{[["yes","✅ Yes, I have one"],["no","❌ No license"]].map(([v,l])=>( ))}

{errs.hasLicense&&

⚠ {errs.hasLicense}

}

{hasLicense===true&&(

{errs.bizLicense&&

⚠ {errs.bizLicense}

}

)} {hasLicense===false&&(

No license? Upload any one of these business-related documents to confirm your business:

GST Registration · UDYAM Certificate · Shop & Establishment Registration · Trade License · FSSAI (for food businesses) · Bank account in business name

{errs.bizDoc&&

⚠ {errs.bizDoc}

}

)} {/* Owner ID — mandatory */}

{errs.ownerId&&

⚠ {errs.ownerId}

}

)} {isBiz&&step===4&&(

🤳 A live selfie of the business owner holding their ID confirms identity.

{uploaded.ownerSelfie&&(

🎉 Almost there! Documents submitted for review.

Verification within 24–48 hours. Once approved, you can post and promote.

💡 After verification, you can promote your business posts to all verified residents of EC Phase 2 and nearby areas!

)}

{stepContinue → : }

); } // ─── SCREENS: Feed, Events, Map, Messages, Profile ──────────────────────────── // (Same as v2 – keeping them compact here) const POSTS=[ // ── MISSING PERSON alert (pinned top – highest urgency) ── {id:8,author:"Anand Kumar",apartment:"GM Infinite Smondo",area:"EC Ph 2",av:"AK",avC:"#B91C1C",time:"45m", category:"Missing Person",sharedFrom:null, missingType:"child",missingName:"Aarav Kumar",missingAge:"7 years", missingDesc:"Wearing blue school uniform, white shoes. Last seen near Park Gate C, GM Infinite Smondo.", missingLastSeen:"Today 3:30 PM – Park area, EC Phase 2", missingContact:"Anand Kumar – 98XX-XXXXX", content:"🆘 MISSING CHILD: Aarav Kumar, 7 yrs. Wearing blue school uniform, white shoes. Last seen near Park Gate C, GM Smondo at 3:30 PM today. Please call police 100 or contact Anand Kumar immediately.", likes:0,comments:14}, {id:1,author:"Priya Venkat",apartment:"Prestige Sunrise Park",area:"EC Ph 1",av:"PV",avC:"#7B4BB8",time:"2h",category:"Safety",content:"🛡️ Alert: Suspicious persons near Gate 2 last night ~10 PM. Security notified. Please lock up and call 100 if you see anything unusual.",likes:47,comments:12,sharedFrom:null}, {id:2,author:"Ramesh Babu",apartment:"Shriram Signia",area:"EC Ph 1",av:"RB",avC:"#FFB347",time:"4h",category:"Lost & Found",content:"🐕 Found a golden retriever near Infosys Signal – blue collar, no name tag. DM if yours. Safe with me.",likes:89,comments:31,sharedFrom:null}, {id:3,author:"Deepa Krishnan",apartment:"Mahaveer Ranches",area:"EC Ph 2",av:"DK",avC:"#00B89F",time:"6h",category:"Recommendation",content:"⭐ Sri Lakshmi Vegetables near Hebbagodi bus stop – freshest produce! Ask for Kumar. Open 6 AM–9 PM.",likes:134,comments:44,sharedFrom:null}, // Cross-shared posts from nearby communities (admin can remove these) {id:6,author:"Kavya Sharma",apartment:"Adarsh Welkin Park",area:"Hebbagodi",av:"KS",avC:"#FF6B7A",time:"3h",category:"Safety",content:"🚨 Warning: Chain snatching incident near Hebbagodi bus terminal around 7 PM today. Avoid that stretch after dark. Shared for awareness.",likes:31,comments:8,sharedFrom:"Hebbagodi"}, {id:7,author:"Suresh P.",apartment:"Ozone Urbana",area:"Bommasandra",av:"SP",avC:"#FFB347",time:"5h",category:"Lost & Found",content:"🔍 Lost: Brown leather wallet near Bommasandra industrial area yesterday afternoon. Contains Aadhar & ATM card. Please contact if found – reward.",likes:14,comments:5,sharedFrom:"Bommasandra"}, {id:4,author:"Arjun Nair",apartment:"Godrej E-City",area:"EC Ph 1",av:"AN",avC:"#FF6B7A",time:"8h",category:"Services",content:"🔧 Reliable plumber – Suresh (9845-XXXXX). Fixed pipeline in under 2 hrs for ₹500. Adding to community directory!",likes:62,comments:18,sharedFrom:null}, {id:5,author:"Meena S.",apartment:"Celebrity Paradise",area:"Neeladri Nagar",av:"MS",avC:"#6B7FF0",time:"1d",category:"General",content:"💡 BESCOM power cut tomorrow 9 AM–2 PM across Neeladri Nagar. Charge your devices tonight!",likes:201,comments:67,sharedFrom:null}, ]; // ─── Business & Promotion Data ──────────────────────────────────────────────── const PROMO_TIERS=[ {tier:500,label:"Premium Sidebar",desc:"Featured in sidebar of every feed view. Maximum visibility.",badge:"⭐ FEATURED",color:"#F59E0B",colorL:"#FFFBEB",icon:"🏆",perks:["Sidebar placement","Top of feed","Bold border","All-day display"]}, {tier:250,label:"Priority Feed",desc:"Pinned at the top of the regular feed, above ₹100 promotions.",badge:"🔼 PRIORITY",color:"#8B5CF6",colorL:"#F5F3FF",icon:"🥈",perks:["Top of main feed","Priority over ₹100","Bold highlight","All-day display"]}, {tier:100,label:"Boosted Post",desc:"Boosted above regular posts in the feed. Cost-effective reach.",badge:"📢 BOOSTED",color:C.mint,colorL:C.mintL,icon:"🥉",perks:["Above regular posts","Boosted label","All-day display"]}, ]; const BIZ_POSTS=[ {id:101,bizName:"CloudKitchen Express",bizType:"Restaurant / Food",owner:"Ravi Kumar",av:"CK",avC:"#EF4444",area:"EC Phase 2", content:"🍱 Freshly cooked North & South Indian meals — tiffin subscriptions starting ₹99/day! Free delivery within EC Phase 2. Order by 9 AM for lunch.", promoTier:500,promoTime:1,contact:"Order via WhatsApp: 98XX-XXXXX",verified:true}, {id:102,bizName:"QuickFix Electricals",bizType:"Services / Repairs",owner:"Suresh T.",av:"QF",avC:"#3B82F6",area:"EC Phase 1 & 2", content:"⚡ Licensed electrician — wiring, MCB, inverter installation, fan & AC repairs. Same-day service. All EC areas. 10% off for MyTown360 members!", promoTier:250,promoTime:2,contact:"Call: 97XX-XXXXX",verified:true}, {id:103,bizName:"FreshMart Organics",bizType:"Grocery / Supermart",owner:"Priya S.",av:"FM",avC:"#10B981",area:"Neeladri Nagar", content:"🥦 100% organic vegetables & fruits — sourced directly from farms. Daily delivery 7 AM–9 AM. First order 20% off with code MYTOWN20.", promoTier:100,promoTime:3,contact:"Order: 96XX-XXXXX",verified:true}, {id:104,bizName:"Glow Beauty Studio",bizType:"Beauty / Wellness",owner:"Anita R.",av:"GB",avC:"#EC4899",area:"EC Phase 1", content:"💅 Hair, skin & bridal packages at unbeatable prices. Women's only. Book appointments in advance. Mention MyTown360 for 15% off!", promoTier:100,promoTime:4,contact:"Book: 95XX-XXXXX",verified:true}, ]; const EVENTS=[ {id:1,title:"Community Yoga Camp",date:"Mar 8",time:"6:30 AM",location:"Prestige Sunrise Park Clubhouse",category:"Wellness",attendees:43,icon:"🧘",col:"#00B89F"}, {id:2,title:"Holi Celebrations 2026",date:"Mar 14",time:"10:00 AM",location:"GM Infinite Smondo Park",category:"Festival",attendees:312,icon:"🎨",col:"#FF6B7A"}, {id:3,title:"Women's Safety Drive",date:"Mar 18",time:"5:00 PM",location:"EC Community Hall Ph 1",category:"Safety",attendees:78,icon:"🛡️",col:"#5C2D91"}, {id:4,title:"Kids Coding Workshop",date:"Mar 22",time:"10:00 AM",location:"Kolte Patil iTowers",category:"Education",attendees:25,icon:"💻",col:"#6B7FF0"}, ]; const LISTINGS=[ {id:1,type:"For Sale",title:"Philips Air Fryer 2L",price:"₹2,800",seller:"Kavitha R.",area:"EC Ph 2",icon:"🍳",age:"2h",col:"#FFB347"}, {id:2,type:"Free",title:"Baby clothes 0–6 months",price:"FREE",seller:"Sunitha P.",area:"Hebbagodi",icon:"👶",age:"5h",col:"#00B89F"}, {id:3,type:"For Rent",title:"2BHK Shriram Signia (Furn)",price:"₹28k/mo",seller:"Venkat K.",area:"EC Ph 1",icon:"🏠",age:"1d",col:"#5C2D91"}, {id:4,type:"Service",title:"Home Deep Clean 3BHK",price:"₹1,200",seller:"CleanPro EC",area:"All areas",icon:"🧹",age:"2d",col:"#6B7FF0"}, ]; const MSGS=[ {id:1,name:"Ramesh Babu",av:"RB",avC:"#FFB347",preview:"Is the dog still with you?",time:"10:23 AM",unread:2}, {id:2,name:"MyTown 360 Admin",av:"MT",avC:C.purple,preview:"Your address verification is complete!",time:"9:45 AM",unread:1}, {id:3,name:"Kavitha R.",av:"KR",avC:"#6B7FF0",preview:"Still interested in the Air Fryer?",time:"Yesterday",unread:0}, ]; const AREAS_LIST=[ {name:"Electronic City Phase 1",pin:"560100"},{name:"Electronic City Phase 2",pin:"560100"}, {name:"Neeladri Nagar",pin:"560100"},{name:"Doddathogur",pin:"560100"}, {name:"Hebbagodi",pin:"560099"},{name:"Bommasandra",pin:"560099"}, {name:"Veerasandra",pin:"560100"},{name:"Huskur Road Area",pin:"560100"}, {name:"Chandapura",pin:"562106"},{name:"Kudlu",pin:"560068"}, ]; // ─── Nearby Localities (within ~10 km of EC) ───────────────────────────────────── const NEARBY_LOCALITIES = [ { name:"Begur", dist:"~3 km", dir:"N", note:"Historic fort & lake. Weekend outing spot.", color:"#7C3AED" }, { name:"Haralur", dist:"~4 km", dir:"NE", note:"Popular residential area for EC professionals.", color:"#0891B2" }, { name:"Doddakannelli", dist:"~4 km", dir:"NE", note:"Growing layout near Sarjapura Road.", color:"#059669" }, { name:"Kasavanahalli", dist:"~5 km", dir:"NE", note:"Residential & commercial corridor near ORR.", color:"#D97706" }, { name:"Dommasandra", dist:"~5 km", dir:"E", note:"Adjacent to EC boundary. Village-to-urban layout.",color:"#DC2626" }, { name:"Panathur", dist:"~5 km", dir:"NE", note:"Near ORR–Sarjapura junction. Good connectivity.", color:"#2563EB" }, { name:"Gunjur", dist:"~6 km", dir:"NE", note:"Expanding residential zone on Sarjapura Road.", color:"#059669" }, { name:"Bellandur", dist:"~6 km", dir:"N", note:"Tech corridor on ORR. Many IT offices & malls.", color:"#7C3AED" }, { name:"HSR Layout", dist:"~7 km", dir:"NW", note:"Popular residential hub. Good schools & eateries.",color:"#EA580C" }, { name:"Sarjapura", dist:"~8 km", dir:"E", note:"Major nearby township. Schools, hospitals, malls.",color:"#0891B2" }, { name:"Varthur", dist:"~10 km", dir:"NE", note:"Near Whitefield corridor. Growing residential.", color:"#6B7280" }, { name:"Chandapura", dist:"~5 km", dir:"SE", note:"KSRTC connectivity, Bommasandra adjacent.", color:"#B45309" }, ]; const DIRECTORY=[["🍽️","Restaurants & Cafés","8"],["🛒","Grocery & Supermarkets","10"],["🔧","Service Providers","41"],["🏥","Hospitals & Clinics","7"],["🚌","Transport & Autos","9"],["🏫","Schools & Daycare","13"],["🌳","Parks & Recreation","9"],["⛽","Petrol Pumps","5"],["🏨","Hotels & Stay","5"],["🛕","Temples & Worship","9"],["🎬","Cinemas","3"],["🏧","ATMs","8"]]; // ─── Police Alert Gate (shown before Missing Person form) ──────────────────── function PoliceAlertModal({onOk}){ return(

{/* Red header */}

🚨

MISSING PERSON?

Please contact the police immediately

{/* Emergency numbers */}

{[ {icon:"🚔",label:"Police",num:"100",col:"#1D4ED8",colL:"#EFF6FF"}, {icon:"👶",label:"Childline (Missing Children)",num:"1098",col:"#7C3AED",colL:"#F5F3FF"}, {icon:"🆘",label:"Emergency Services",num:"112",col:C.crimson,colL:C.crimsonL}, ].map(({icon,label,num,col,colL})=>(

{icon}

{label}

{num}

CALL NOW

))}

⚠️ Posting on MyTown 360 does not replace an official police report. Always file a First Information Report (FIR) first.

); } // ─── Image Upload (for posts/listings) ─────────────────────────────────────── function ImageUpload({images, onChange, maxImages=4, label="Add Photos"}){ const handleClick=()=>{ // Simulate selecting up to 2 demo images if(images.lengthonChange(images.filter(x=>x.id!==id)); return(

📷 {label} (up to {maxImages})

{images.map(img=>(

🖼️

))} {images.length 📷 Add )}

{images.length>0&&

{images.length} photo{images.length>1?"s":""} added

}

); } // ─── Dispatch Modal (shown after posting an alert category) ────────────────── function DispatchModal({category, memberCount, onDone}){ const isMissing=category==="Missing Person"; const isLF=category==="Lost & Found"; const col=isMissing?C.crimson:isLF?C.marigold:C.coral; const colL=isMissing?C.crimsonL:isLF?C.marigoldL:C.coralL; const channels=[ {icon:"📱",label:"App Push Notification",detail:`${memberCount} verified members in EC Phase 2`,done:true}, {icon:"📧",label:"Email Alert",detail:`${memberCount} registered email addresses`,done:true}, {icon:"💬",label:"SMS Alert",detail:`${memberCount} registered mobile numbers`,done:true}, ...(isMissing?[{icon:"🔊",label:"Urgent Tone Alert",detail:"Special alarm tone played on all active devices in area",done:true,urgent:true}]:[]), ]; return(

{/* Header */}

{isMissing?"🚨":isLF?"🔍":"🛡️"}

{isMissing?"MISSING PERSON ALERT":"COMMUNITY ALERT"} DISPATCHED

Notification sent to your area

{/* Member count badge */}

👥

{memberCount} Members Notified

Verified residents of EC Phase 2

{/* Channel breakdown */}

{channels.map((ch,i)=>(

{ch.icon}

{ch.label}

{ch.detail}

✓

))}

{/* Special tone note */} {isMissing&&(

ℹ️

Special alert tone is a unique high-priority sound played on all MyTown360 apps even when the phone is on silent, to ensure maximum visibility for missing person cases.

)}

); } // ─── Notification Toast ─────────────────────────────────────────────────────── function NotificationToast({alerts, onDismiss}){ if(!alerts.length) return null; return(

{alerts.map(a=>{ const isMissing=a.cat==="Missing Person"; const isLF=a.cat==="Lost & Found"; const col=isMissing?C.crimson:isLF?C.marigold:C.coral; const colL=isMissing?C.crimsonL:isLF?C.marigoldL:C.coralL; const toastIcon=isMissing?"🚨":isLF?"🔍":"⚠️"; const label=isMissing?"MISSING PERSON ALERT":isLF?"LOST & FOUND":"SAFETY ALERT"; return(

{/* Coloured header */}

{toastIcon} {label} · {a.area} {isMissing&&🔊 URGENT TONE}

{/* Content */}

{isMissing?"👶":isLF?"🐾":"⚠️"}

{a.content}

Posted by {a.author} · Just now

{/* Dispatch channel badges */}

🔔 {a.memberCount} push 📧 email sent 💬 SMS sent {isMissing&&🔊 urgent tone} {a.sharedAreas&&a.sharedAreas.length>0&&( 📡 {a.sharedAreas.length} areas )}

); })}

); } // ─── Cross-Share Modal ──────────────────────────────────────────────────────── function CrossShareModal({category, onShare, onSkip}){ const [sel,setSel]=useState([]); const toggle=(a)=>setSel(s=>s.includes(a)?s.filter(x=>x!==a):[...s,a]); return(

Share with Nearby Communities?

Your {category} post has been sent to your area. Nearby communities may benefit from this information too.

ℹ️ Community admins of selected areas can remove your post if they consider it off-topic or spam.

{NEARBY_AREAS.map(area=>{ const on=sel.includes(area); return( ); })}

); } // ─── Reaction Bar ───────────────────────────────────────────────────────────── function ReactionBar({postId, baseCounts, myReaction, onReact}){ const [open,setOpen]=useState(false); const counts={...baseCounts}; if(myReaction) counts[myReaction]=(counts[myReaction]||0)+1; const top=Object.entries(counts).filter(([,v])=>v>0).sort((a,b)=>b[1]-a[1]).slice(0,3); const total=Object.values(counts).reduce((s,v)=>s+v,0); return(

{/* Reaction summary row */} {total>0&&(

{top.map(([id])=>{const r=REACTIONS.find(x=>x.id===id);return r?{r.emoji}:null;})}

{total} reaction{total!==1?"s":""}

)} {/* Picker popup */} {open&&(

{REACTIONS.map(r=>{ const chosen=myReaction===r.id; return( ); })}

)} {/* Action bar */}

); } // ─── Post Composer (Category-First) ────────────────────────────────────────── function PostComposer({onPost}){ const [step,setStep]=useState(0); // 0=closed 1=pick-category 2=write const [cat,setCat]=useState(""); const [draft,setDraft]=useState(""); const [urgency,setUrgency]=useState("high"); const [lostType,setLostType]=useState("lost"); const [blocked,setBlocked]=useState(false); const [images,setImages]=useState([]); const [policeAlert,setPoliceAlert]=useState(false); // show police gate modal // Missing Person specific fields const [missingType,setMissingType]=useState("child"); const [missingName,setMissingName]=useState(""); const [missingAge,setMissingAge]=useState(""); const [missingLastSeen,setMissingLastSeen]=useState(""); const [missingContact,setMissingContact]=useState(""); const meta=CAT_META[cat]||{}; const isAlert=ALERT_CATEGORIES.includes(cat); const isMissing=cat==="Missing Person"; const isLF=cat==="Lost & Found"; const handleDraft=(v)=>{ setDraft(v); setBlocked(checkViolation(v)); }; const resetAll=()=>{setStep(0);setCat("");setDraft("");setBlocked(false);setImages([]);setMissingName("");setMissingAge("");setMissingLastSeen("");setMissingContact("");setPoliceAlert(false);}; const missingReady=isMissing&&missingName.trim()&&missingLastSeen.trim(); const canPost=isMissing?missingReady:(draft.trim()&&!blocked); const doPost=()=>{ if(!canPost) return; let content=draft; let extra={}; if(isMissing){ content=`🆘 MISSING ${missingType==="child"?"CHILD":"PERSON"}: ${missingName}${missingAge?`, ${missingAge}`:""}. Last seen: ${missingLastSeen}.${draft.trim()?" "+draft.trim():""}${missingContact?" Contact: "+missingContact:""}`; extra={missingType,missingName,missingAge,missingLastSeen,missingContact}; } onPost({category:cat,content,urgency:cat==="Safety"?urgency:null,lostType:cat==="Lost & Found"?lostType:null,images,...extra}); resetAll(); }; if(step===0) return(

); if(step===1) return(

What are you posting about?

{/* Police Alert Gate Modal */} {policeAlert&&{setPoliceAlert(false);setStep(2);}}/>}

{/* Missing Person – full-width, visually distinct urgent button */} {/* Other categories – 2-column grid */}

{Object.entries(CAT_META).filter(([n])=>n!=="Missing Person").map(([name,m])=>( ))}

); return(

{/* Category header stripe */}

{meta.icon} {cat} {isMissing&&🔊 URGENT TONE ALERT} {isAlert&&!isMissing&&🔔 INSTANT ALERT}

{/* ── Verification gate for restricted categories ── */} {NEEDS_VERIFIED_CATS.includes(cat)&&!MOCK_USER.verified&&(

🔒

Account Verification Required

To post in {cat}, your account must be verified by our admin team. {MOCK_USER.pendingReview?" Your verification is under review.":""}

{MOCK_USER.pendingReview ?

⏳ Verification in progress — we'll notify you by SMS once approved.

→ Complete signup & submit your documents to get verified.

}

)} {/* ── Review-queue notice for Safety/L&F/Missing (unverified) ── */} {REVIEW_QUEUE_CATS.includes(cat)&&!isMissing&&!MOCK_USER.verified&&(

⏳

Pending verification: Your post will be reviewed by our admin/customer support team before it's visible to the community. We prioritise safety and emergency posts.

)} {/* Only show the form when allowed */} {(!NEEDS_VERIFIED_CATS.includes(cat)||MOCK_USER.verified)&&( <> {/* ── MISSING PERSON form ── */} {isMissing&&( <> {/* Child / Adult toggle */}

Who is missing?

{[["child","👶 Missing Child"],["adult","🧑 Missing Adult"]].map(([v,l])=>( ))}

{/* Name */}

Full Name *

setMissingName(e.target.value)} placeholder={missingType==="child"?"Child's full name…":"Person's full name…"} style={{width:"100%",padding:"9px 12px",borderRadius:10,border:`1.5px solid ${C.border}`,fontSize:13,outline:"none",boxSizing:"border-box",fontFamily:"inherit"}}/>

{/* Age + Physical description – side by side */}

Age

setMissingAge(e.target.value)} placeholder="e.g. 7 years" style={{width:"100%",padding:"9px 12px",borderRadius:10,border:`1.5px solid ${C.border}`,fontSize:13,outline:"none",boxSizing:"border-box",fontFamily:"inherit"}}/>

Contact Number

setMissingContact(e.target.value)} placeholder="Your mobile number" style={{width:"100%",padding:"9px 12px",borderRadius:10,border:`1.5px solid ${C.border}`,fontSize:13,outline:"none",boxSizing:"border-box",fontFamily:"inherit"}}/>

{/* Last seen */}

Last Seen Location & Time *

setMissingLastSeen(e.target.value)} placeholder="e.g. Park Gate C, GM Smondo – Today 3:30 PM" style={{width:"100%",padding:"9px 12px",borderRadius:10,border:`1.5px solid ${C.border}`,fontSize:13,outline:"none",boxSizing:"border-box",fontFamily:"inherit"}}/>

{/* Additional description */}

Physical Description / Clothing

handleDraft(e.target.value)} rows={2}
                placeholder="Describe clothing, features, anything that helps identify…"
                style={{width:"100%",padding:"9px 12px",borderRadius:10,border:`1.5px solid ${C.border}`,fontSize:13,outline:"none",resize:"vertical",fontFamily:"inherit",boxSizing:"border-box"}}/>
            </div>
          </>
        )}

{/* ── Safety: urgency ── */}
        {cat==="Safety"&&(
          <div>
            <div style={{fontSize:12,fontWeight:700,color:C.text,marginBottom:6}}>🚨 Urgency Level</div>
            <div style={{display:"flex",gap:6}}>
              {[["high","🔴 High",C.coral],["medium","🟡 Medium",C.marigold],["low","🟢 Low",C.mint]].map(([v,l,c])=>(
                <button key={v} onClick={()=>setUrgency(v)}
                  style={{flex:1,padding:"6px",borderRadius:10,border:`2px solid ${urgency===v?c:C.border}`,background:urgency===v?`${c}18`:"#fff",fontWeight:700,fontSize:11,color:urgency===v?c:C.muted,cursor:"pointer"}}>{l}</button>
              ))}
            </div>
          </div>
        )}

{/* ── Lost & Found: lost/found toggle ── */}
        {cat==="Lost & Found"&&(
          <div style={{display:"flex",gap:6}}>
            {[["lost","🔍 I Lost Something"],["found","✅ I Found Something"]].map(([v,l])=>(
              <button key={v} onClick={()=>setLostType(v)}
                style={{flex:1,padding:"8px",borderRadius:10,border:`2px solid ${lostType===v?C.marigold:C.border}`,background:lostType===v?C.marigoldL:"#fff",fontWeight:700,fontSize:12,color:lostType===v?C.text:C.muted,cursor:"pointer"}}>{l}</button>
            ))}
          </div>
        )}

{/* ── Text content (non-missing) ── */}
        {!isMissing&&(
          <>
            {blocked&&<ContentBlockedBanner context="post" onEdit={()=>{setDraft("");setBlocked(false);}}/>}
            {!blocked&&(
              <PIITextarea value={draft} onChange={handleDraft} rows={3}
                placeholder={
                  cat==="Safety"?"Describe the safety concern, location, and what residents should do…":
                  cat==="Lost & Found"?lostType==="lost"?"What did you lose? Describe item, last seen location, and how to contact you…":"What did you find? Describe item, where you found it, how to reach you…":
                  cat==="Recommendation"?"Who or what are you recommending? Share name, location, and why…":
                  cat==="Services"?"Describe the service, provider name, contact, and your experience…":
                  "What's happening in your neighbourhood?"
                }/>
            )}
          </>
        )}

{/* ── Image upload (Missing Person + Lost & Found) ── */}
        {(isMissing||isLF)&&(
          <ImageUpload images={images} onChange={setImages}
            label={isMissing?"Photo of Missing Person":"Photo of Lost/Found Item"}
            maxImages={isMissing?3:4}/>
        )}

{/* ── Notification channel preview (alert categories) ── */}
        {isAlert&&(
          <div style={{padding:"10px 12px",borderRadius:10,background:isMissing?C.crimsonL:cat==="Safety"?C.coralL:C.marigoldL,border:`1px solid ${(isMissing?C.crimson:cat==="Safety"?C.coral:C.marigold)}33`}}>
            <div style={{fontSize:11,fontWeight:700,color:isMissing?C.crimson:cat==="Safety"?C.coral:C.marigold,marginBottom:6}}>
              {isMissing?"🔊 How this alert will reach EC Phase 2 members:":"🔔 How this alert will reach EC Phase 2 members:"}
            </div>
            <div style={{display:"flex",flexWrap:"wrap",gap:5}}>
              {["📱 App push notification","📧 Email to all members","💬 SMS to all members",...(isMissing?["🔊 Urgent tone on all devices"]:["📡 Share with nearby areas"])].map(ch=>(
                <span key={ch} style={{fontSize:10,fontWeight:700,padding:"3px 8px",borderRadius:99,background:"rgba(255,255,255,0.7)",color:C.text}}>{ch}</span>
              ))}
            </div>
          </div>
        )}

<div style={{display:"flex",gap:8}}>
          <button onClick={resetAll} style={{flex:1,padding:"10px",borderRadius:12,background:C.surface,color:C.muted,fontWeight:700,fontSize:13,border:`1.5px solid ${C.border}`,cursor:"pointer"}}>Cancel</button>
          <button onClick={doPost}
            style={{flex:1,padding:"10px",borderRadius:12,background:!canPost?C.border:meta.color||C.purple,color:!canPost?C.muted:"#fff",fontWeight:900,fontSize:13,border:"none",cursor:"pointer"}}>
            {blocked?"🚫 Blocked":isMissing?"🆘 Send Urgent Alert":isAlert?"🚨 Post & Alert":"Post"}
          </button>
        </div>

</> /* end allowed-to-post wrapper */
        )}
      </div>
    </div>
  );
}

// ─── Promotion Modal ──────────────────────────────────────────────────────────
function PromotionModal({bizName, onClose}){
  const [sel,setSel]=useState(null);
  const [paid,setPaid]=useState(false);

if(paid) return(
    <div style={{position:"fixed",inset:0,zIndex:300,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(26,16,51,0.65)",backdropFilter:"blur(6px)",padding:"0 16px"}}>
      <div style={{width:"100%",maxWidth:360,background:"#fff",borderRadius:24,padding:"28px 24px",textAlign:"center"}}>
        <div style={{fontSize:48,marginBottom:10}}>🎉</div>
        <div style={{fontWeight:900,fontSize:18,color:C.text}}>Promotion Active!</div>
        <div style={{fontSize:13,color:C.muted,marginTop:6,lineHeight:1.5}}>
          <span style={{fontWeight:700,color:C.purple}}>{bizName}</span> is now promoted as a
          <span style={{fontWeight:700,color:PROMO_TIERS.find(t=>t.tier===sel)?.color}}> {PROMO_TIERS.find(t=>t.tier===sel)?.label} </span>
          for today. Verified residents of EC Phase 2 will see your promotion.
        </div>
        <div style={{margin:"16px 0",padding:"12px 16px",borderRadius:12,background:C.surface,border:`1px solid ${C.border}`,display:"flex",justifyContent:"space-between",fontSize:12}}>
          <span style={{color:C.muted}}>Amount paid</span>
          <span style={{fontWeight:900,color:C.purple}}>₹{sel}</span>
        </div>
        <div style={{fontSize:11,color:C.muted,marginBottom:16}}>Valid: Today only (24 hours from now)</div>
        <button onClick={onClose} style={{width:"100%",padding:"12px",borderRadius:14,background:C.purple,color:"#fff",fontWeight:900,fontSize:14,border:"none",cursor:"pointer"}}>Done</button>
      </div>
    </div>
  );

return(
    <div style={{position:"fixed",inset:0,zIndex:300,display:"flex",alignItems:"flex-end",justifyContent:"center",background:"rgba(26,16,51,0.6)",backdropFilter:"blur(5px)"}}>
      <div style={{width:"100%",maxWidth:430,background:"#fff",borderRadius:"24px 24px 0 0",paddingBottom:32,maxHeight:"90vh",overflowY:"auto"}}>
        <div style={{display:"flex",justifyContent:"center",padding:"12px 0 4px"}}><div style={{width:40,height:4,borderRadius:99,background:C.border}}/></div>
        <div style={{padding:"10px 20px 14px",borderBottom:`1px solid ${C.border}`}}>
          <div style={{fontWeight:900,fontSize:16,color:C.text}}>Promote Your Business</div>
          <div style={{fontSize:12,color:C.muted,marginTop:2}}>{bizName} · Choose a 1-day promotion plan</div>
        </div>
        <div style={{padding:"14px 16px",display:"flex",flexDirection:"column",gap:10}}>
          {PROMO_TIERS.map(t=>{
            const on=sel===t.tier;
            return(
              <button key={t.tier} onClick={()=>setSel(t.tier)}
                style={{display:"flex",alignItems:"flex-start",gap:12,padding:"14px 14px",borderRadius:16,border:`2px solid ${on?t.color:C.border}`,background:on?t.colorL:"#fff",cursor:"pointer",textAlign:"left",transition:"all 0.15s"}}>
                <div style={{width:40,height:40,borderRadius:12,background:on?t.color:"#F3F4F6",display:"flex",alignItems:"center",justifyContent:"center",fontSize:20,flexShrink:0}}>{t.icon}</div>
                <div style={{flex:1}}>
                  <div style={{display:"flex",alignItems:"center",gap:6}}>
                    <span style={{fontWeight:900,fontSize:14,color:on?t.color:C.text}}>₹{t.tier}</span>
                    <span style={{fontSize:11,fontWeight:700,padding:"2px 7px",borderRadius:99,background:on?t.color+"22":"#F3F4F6",color:on?t.color:C.muted}}>{t.label}</span>
                  </div>
                  <div style={{fontSize:11,color:C.muted,marginTop:3,lineHeight:1.4}}>{t.desc}</div>
                  <div style={{display:"flex",flexWrap:"wrap",gap:4,marginTop:6}}>
                    {t.perks.map(p=>(
                      <span key={p} style={{fontSize:9,fontWeight:700,padding:"2px 6px",borderRadius:99,background:on?t.color+"18":"#F9FAFB",color:on?t.color:C.muted,border:`1px solid ${on?t.color+"33":C.border}`}}>✓ {p}</span>
                    ))}
                  </div>
                </div>
                <div style={{width:20,height:20,borderRadius:99,border:`2px solid ${on?t.color:C.border}`,background:on?t.color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginTop:2}}>
                  {on&&<span style={{color:"#fff",fontSize:10,fontWeight:900}}>✓</span>}
                </div>
              </button>
            );
          })}
        </div>
        <div style={{padding:"4px 16px 0",display:"flex",flexDirection:"column",gap:8}}>
          <div style={{padding:"10px 14px",borderRadius:12,background:C.surface,border:`1px solid ${C.border}`,fontSize:11,color:C.muted,lineHeight:1.5}}>
            ℹ️ All promotions are valid for <span style={{fontWeight:700}}>1 day only</span>. ₹500 posts appear in the feed sidebar (ordered by posting time). ₹250 and ₹100 posts appear within the main feed, ordered by tier then time.
          </div>
          <button onClick={()=>{if(sel)setPaid(true);}}
            style={{width:"100%",padding:"13px",borderRadius:14,background:sel?PROMO_TIERS.find(t=>t.tier===sel)?.color||C.purple:C.border,color:sel?"#fff":C.muted,fontWeight:900,fontSize:14,border:"none",cursor:"pointer"}}>
            {sel?`Pay ₹${sel} & Activate`:"Select a plan above"}
          </button>
          <button onClick={onClose} style={{width:"100%",padding:"11px",borderRadius:14,background:C.surface,color:C.muted,fontWeight:700,fontSize:13,border:`1px solid ${C.border}`,cursor:"pointer"}}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

// ── ReportSheet ──────────────────────────────────────────
function ReportSheet({type,name,onClose}){
  const [selected,setSelected]=useState(null);
  const [done,setDone]=useState(false);
  const reasons=type==="post"
    ?["Misinformation / Fake News","Spam or Scam","Harassment","Hate Speech","Inappropriate Content","Other"]
    :["Harassment or Bullying","Impersonation / Fake Account","Spam","Threatening Behaviour","Sharing Personal Info","Other"];
  if(done)return(
    <div style={{position:"fixed",inset:0,zIndex:400,background:"rgba(10,0,20,0.65)",display:"flex",alignItems:"flex-end"}}>
      <div style={{width:"100%",background:"#fff",borderRadius:"28px 28px 0 0",padding:"32px 24px 44px",textAlign:"center"}}>
        <div style={{fontSize:52,marginBottom:10}}>✅</div>
        <div style={{fontWeight:900,fontSize:18,color:"#18103A",marginBottom:6}}>Report Submitted</div>
        <div style={{fontSize:13,color:"#7C7290",marginBottom:24,lineHeight:1.6}}>We'll review this and take action within 24 hours. Thank you for keeping the community safe.</div>
        <button onClick={onClose} style={{width:"100%",padding:"14px",borderRadius:16,background:"#5C2D91",color:"#fff",fontWeight:900,fontSize:15,border:"none",cursor:"pointer"}}>Done</button>
      </div>
    </div>
  );
  return(
    <div style={{position:"fixed",inset:0,zIndex:400,background:"rgba(10,0,20,0.65)",display:"flex",alignItems:"flex-end"}} onClick={onClose}>
      <div style={{width:"100%",background:"#fff",borderRadius:"28px 28px 0 0",padding:"24px 20px 44px"}} onClick={e=>e.stopPropagation()}>
        <div style={{width:44,height:5,borderRadius:99,background:"#ECEAF4",margin:"0 auto 22px"}}/>
        <div style={{fontWeight:900,fontSize:17,color:"#18103A",marginBottom:3}}>Report {type==="post"?"Post":"@"+name}</div>
        <div style={{fontSize:12,color:"#7C7290",marginBottom:18}}>Help us understand what's wrong with this {type}.</div>
        <div style={{display:"flex",flexDirection:"column",gap:9}}>
          {reasons.map(r=>(
            <button key={r} onClick={()=>setSelected(r)}
              style={{padding:"12px 16px",borderRadius:14,textAlign:"left",border:`1.5px solid ${selected===r?"#B91C1C":"#ECEAF4"}`,background:selected===r?"#FEF2F2":"#fff",cursor:"pointer",fontSize:13,fontWeight:selected===r?700:500,color:selected===r?"#B91C1C":"#18103A",display:"flex",alignItems:"center",justifyContent:"space-between",transition:"all 0.15s"}}>
              {r}{selected===r&&<span style={{color:"#B91C1C",fontSize:16}}>●</span>}
            </button>
          ))}
        </div>
        <button onClick={()=>selected&&setDone(true)}
          style={{marginTop:18,width:"100%",padding:"14px",borderRadius:16,background:selected?"#B91C1C":"#E5E5E5",color:selected?"#fff":"#aaa",fontWeight:900,fontSize:14,border:"none",cursor:selected?"pointer":"default",transition:"all 0.2s"}}>
          Submit Report
        </button>
      </div>
    </div>
  );
}

// ── UserProfileSheet ─────────────────────────────────────
function UserProfileSheet({person,onClose,onBlock,onReport}){
  const mutualPosts=Math.floor(Math.random()*15)+3;
  return(
    <div style={{position:"fixed",inset:0,zIndex:400,background:"rgba(10,0,20,0.65)",display:"flex",alignItems:"flex-end"}} onClick={onClose}>
      <div style={{width:"100%",background:"#fff",borderRadius:"28px 28px 0 0",paddingBottom:44}} onClick={e=>e.stopPropagation()}>
        {/* Handle */}
        <div style={{width:44,height:5,borderRadius:99,background:"#ECEAF4",margin:"12px auto 0"}}/>
        {/* Cover gradient */}
        <div style={{height:80,background:`linear-gradient(135deg,${person.avC},${person.avC}88)`,margin:"12px 0 0",position:"relative"}}>
          <div style={{position:"absolute",bottom:-28,left:20,width:56,height:56,borderRadius:18,background:`linear-gradient(135deg,${person.avC},${person.avC}BB)`,display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",fontWeight:900,fontSize:20,border:"3px solid #fff",boxShadow:`0 4px 16px ${person.avC}55`}}>{person.av}</div>
        </div>
        {/* Info */}
        <div style={{padding:"36px 20px 16px"}}>
          <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBottom:4}}>
            <div>
              <div style={{fontSize:18,fontWeight:900,color:"#18103A"}}>{person.name}</div>
              <div style={{fontSize:12,color:"#7C7290",marginTop:2}}>✓ Verified Resident · EC Phase 1</div>
            </div>
            <span style={{fontSize:10,fontWeight:800,padding:"4px 10px",borderRadius:99,background:"#ECFDF5",color:"#059669",border:"1px solid #A7F3D0"}}>✓ Aadhaar</span>
          </div>
          {/* Stats row */}
          <div style={{display:"flex",gap:0,marginTop:14,borderRadius:16,overflow:"hidden",border:"1.5px solid #ECEAF4"}}>
            {[["🏘","Prestige Sunrise\nPark · B-304"],["📝",`${mutualPosts} posts`],["🤝","128\nconnections"]].map(([ic,val],i)=>(
              <div key={i} style={{flex:1,padding:"12px 8px",textAlign:"center",borderLeft:i>0?"1.5px solid #ECEAF4":"none"}}>
                <div style={{fontSize:18,marginBottom:4}}>{ic}</div>
                <div style={{fontSize:10,fontWeight:700,color:"#18103A",whiteSpace:"pre-line",lineHeight:1.3}}>{val}</div>
              </div>
            ))}
          </div>
          {/* Member since */}
          <div style={{marginTop:12,padding:"10px 14px",borderRadius:13,background:"#F5F4F7",display:"flex",alignItems:"center",gap:10}}>
            <span style={{fontSize:15}}>📅</span>
            <div>
              <div style={{fontSize:11,fontWeight:700,color:"#18103A"}}>Member since Jan 2024</div>
              <div style={{fontSize:10,color:"#7C7290"}}>Active in EC Phase 1 community</div>
            </div>
          </div>
          {/* Action buttons */}
          <div style={{display:"flex",gap:10,marginTop:14}}>
            <button onClick={onClose} style={{flex:1,padding:"12px",borderRadius:14,background:"#F3EBFF",color:"#5C2D91",fontWeight:900,fontSize:13,border:"none",cursor:"pointer"}}>💬 Message</button>
            <button onClick={()=>{onClose();onReport();}} style={{padding:"12px 16px",borderRadius:14,background:"#FFF7EC",color:"#D97706",fontWeight:700,fontSize:13,border:"none",cursor:"pointer"}}>⚑ Report</button>
            <button onClick={()=>{onClose();onBlock();}} style={{padding:"12px 16px",borderRadius:14,background:"#FFF0F1",color:"#FF6B7A",fontWeight:700,fontSize:13,border:"none",cursor:"pointer"}}>🚫 Block</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── BlockConfirmSheet ─────────────────────────────────────
function BlockConfirmSheet({name,onConfirm,onClose}){
  const [done,setDone]=useState(false);
  if(done)return(
    <div style={{position:"fixed",inset:0,zIndex:400,background:"rgba(10,0,20,0.65)",display:"flex",alignItems:"flex-end"}}>
      <div style={{width:"100%",background:"#fff",borderRadius:"28px 28px 0 0",padding:"32px 24px 44px",textAlign:"center"}}>
        <div style={{fontSize:52,marginBottom:10}}>🚫</div>
        <div style={{fontWeight:900,fontSize:18,color:"#18103A",marginBottom:6}}>{name} Blocked</div>
        <div style={{fontSize:13,color:"#7C7290",marginBottom:24,lineHeight:1.6}}>You won't see their posts or messages. You can unblock them anytime from Privacy & Safety settings.</div>
        <button onClick={onClose} style={{width:"100%",padding:"14px",borderRadius:16,background:"#FF6B7A",color:"#fff",fontWeight:900,fontSize:15,border:"none",cursor:"pointer"}}>OK</button>
      </div>
    </div>
  );
  return(
    <div style={{position:"fixed",inset:0,zIndex:400,background:"rgba(10,0,20,0.65)",display:"flex",alignItems:"flex-end"}} onClick={onClose}>
      <div style={{width:"100%",background:"#fff",borderRadius:"28px 28px 0 0",padding:"28px 20px 44px"}} onClick={e=>e.stopPropagation()}>
        <div style={{width:44,height:5,borderRadius:99,background:"#ECEAF4",margin:"0 auto 22px"}}/>
        <div style={{fontSize:48,textAlign:"center",marginBottom:14}}>🚫</div>
        <div style={{fontWeight:900,fontSize:17,color:"#18103A",textAlign:"center",marginBottom:8}}>Block {name}?</div>
        <div style={{fontSize:13,color:"#7C7290",textAlign:"center",marginBottom:24,lineHeight:1.7,padding:"0 8px"}}>They won't be able to message you, see your posts, or find your profile. You can unblock them anytime.</div>
        <div style={{display:"flex",gap:10}}>
          <button onClick={onClose} style={{flex:1,padding:"13px",borderRadius:14,background:"#F5F4F7",color:"#18103A",fontWeight:700,fontSize:14,border:"1px solid #ECEAF4",cursor:"pointer"}}>Cancel</button>
          <button onClick={()=>{onConfirm();setDone(true)}} style={{flex:1,padding:"13px",borderRadius:14,background:"#FF6B7A",color:"#fff",fontWeight:900,fontSize:14,border:"none",cursor:"pointer"}}>Block</button>
        </div>
      </div>
    </div>
  );
}

const cats=["All",...Object.keys(CAT_META)];

// Sort business promo posts: ₹500 → sidebar; in feed: ₹250 first, then ₹100, same-tier by promoTime
  const sidebar500=bizPromos.filter(b=>b.promoTier===500).sort((a,b)=>a.promoTime-b.promoTime);
  const feed250=bizPromos.filter(b=>b.promoTier===250).sort((a,b)=>a.promoTime-b.promoTime);
  const feed100=bizPromos.filter(b=>b.promoTier===100).sort((a,b)=>a.promoTime-b.promoTime);

const basePosts=cat==="All"?feedPosts:feedPosts.filter(p=>p.category===cat);

// Build final feed:
  //   • ₹250 posts pinned at top (in order of posting time)
  //   • Then regular posts, with one ₹100 post injected after every 2nd regular post
  const buildFeed=()=>{
    const items=[];
    feed250.forEach(b=>items.push({_type:"biz",_tier:250,...b}));
    let b100idx=0;
    basePosts.forEach((post,i)=>{
      items.push({_type:"post",...post});
      if(cat==="All"&&(i+1)%2===0&&b100idx<feed100.length){
        items.push({_type:"biz",_tier:100,...feed100[b100idx++]});
      }
    });
    return items;
  };
  const feedItems=buildFeed();

// Called by PostComposer when user submits a post
  const handlePost=(postData)=>{
    const {category,content,...extra}=postData;
    const newPost={
      id:Date.now(), author:"Meena T.", av:"MT", avC:C.purple,
      apartment:"Prestige Sunrise Park", time:"Just now",
      category, content, likes:0, comments:0, sharedFrom:null,
      ...extra,
    };
    setFeedPosts(p=>[newPost,...p]);
    // All alert categories → show dispatch modal + queue toast + queue cross-share
    if(ALERT_CATEGORIES.includes(category)){
      setDispatch({id:newPost.id, category, content, memberCount:247});
    }
  };

// DispatchModal "Got it" / "Share with nearby areas" → open CrossShareModal
  const handleDispatchDone=()=>{
    if(dispatch){
      const alertId=Date.now()+"a";
      setAlerts(a=>[...a,{
        id:alertId, cat:dispatch.category, area:"EC Phase 2",
        content:dispatch.content, author:"Meena T.", memberCount:dispatch.memberCount, sharedAreas:[],
      }]);
      setCrossShare({id:dispatch.id, category:dispatch.category, content:dispatch.content});
    }
    setDispatch(null);
  };

// After cross-share modal: update alert badge + mark post as shared
  const handleShare=(areas)=>{
    if(crossShare){
      setAlerts(a=>a.map(x=>x.content===crossShare.content?{...x,sharedAreas:areas}:x));
      setFeedPosts(p=>p.map(x=>x.id===crossShare.id?{...x,sharedAreas:areas}:x));
    }
    setCrossShare(null);
  };
  const handleSkip=()=>setCrossShare(null);

// React to a post
  const handleReact=(postId,reactionId)=>{
    setReactions(r=>reactionId?{...r,[postId]:reactionId}:(({[postId]:_,...rest})=>rest)(r));
  };

// Community admin removes a cross-shared post from this community
  const adminRemove=(postId)=>setRemovedPosts(s=>new Set([...s,postId]));

return(
    <div style={{background:"#F0F2F5",minHeight:"100vh"}}>
      {storyOpen&&<StoryViewer story={storyOpen} onClose={()=>setStoryOpen(null)}/>}
      {/* ── Instant notification toasts ── */}
      <NotificationToast alerts={alerts} onDismiss={(id)=>setAlerts(a=>a.filter(x=>x.id!==id))}/>

{/* ── Dispatch confirmation modal (shown immediately after alert post) ── */}
      {dispatch&&<DispatchModal category={dispatch.category} memberCount={dispatch.memberCount} onDone={handleDispatchDone}/>}

{/* ── Cross-share modal (appears after Safety/L&F/Missing post) ── */}
      {crossShare&&<CrossShareModal category={crossShare.category} onShare={handleShare} onSkip={handleSkip}/>}

{/* ── Promotion modal ── */}
      {promotionFor&&<PromotionModal bizName={promotionFor} onClose={()=>setPromotionFor(null)}/>}

{/* ── ₹500 FEATURED SIDEBAR STRIP ── */}
      {sidebar500.length>0&&(
        <div className="mx-3 mt-3">
          <div style={{background:"linear-gradient(135deg,#FFFBEB,#FEF3C7)",border:`1.5px solid ${C.marigold}`,borderRadius:16,overflow:"hidden"}}>
            <div style={{padding:"8px 14px",borderBottom:`1px solid ${C.marigold}33`,display:"flex",alignItems:"center",justifyContent:"space-between"}}>
              <div style={{display:"flex",alignItems:"center",gap:6}}>
                <span style={{fontSize:14}}>⭐</span>
                <span style={{fontSize:12,fontWeight:900,color:"#92400E"}}>FEATURED BUSINESSES</span>
              </div>
              <span style={{fontSize:10,color:"#B45309",fontWeight:600}}>Verified Businesses</span>
            </div>
            {sidebar500.map((biz,i)=>(
              <div key={biz.id} style={{padding:"12px 14px",borderBottom:i<sidebar500.length-1?`1px solid ${C.marigold}22`:"none",display:"flex",gap:10,alignItems:"flex-start"}}>
                <div style={{width:40,height:40,borderRadius:10,background:biz.avC,display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",fontWeight:900,fontSize:12,flexShrink:0}}>{biz.av}</div>
                <div style={{flex:1}}>
                  <div style={{display:"flex",alignItems:"center",gap:5}}>
                    <span style={{fontSize:13,fontWeight:900,color:"#1A1033"}}>{biz.bizName}</span>
                    {biz.verified&&<span style={{fontSize:9,fontWeight:800,padding:"1px 5px",borderRadius:99,background:"#ECFDF5",color:"#059669"}}>✓ Verified</span>}
                  </div>
                  <div style={{fontSize:10,color:C.muted,marginBottom:4}}>{biz.bizType} · {biz.area}</div>
                  <div style={{fontSize:12,color:"#374151",lineHeight:1.4}}>{biz.content}</div>
                  <div style={{marginTop:5,fontSize:10,fontWeight:600,color:"#92400E"}}>📞 {biz.contact}</div>
                </div>
                <button onClick={()=>setPromotionFor(biz.bizName)}
                  style={{fontSize:9,fontWeight:700,padding:"3px 7px",borderRadius:6,background:C.marigoldL,color:"#92400E",border:"1px solid #F59E0B",cursor:"pointer",flexShrink:0}}>⭐ Promote</button>
              </div>
            ))}
          </div>
        </div>
      )}

{/* ── Report / Block overlays ── */}
      {reportSheet&&<ReportSheet type="post" name={reportSheet.author} onClose={()=>setReportSheet(null)}/>}
      {blockSheet&&<BlockConfirmSheet name={blockSheet.author} onConfirm={()=>setBlockedAuthors(s=>{const n=new Set(s);n.add(blockSheet.author);return n;})} onClose={()=>setBlockSheet(null)}/>}
      {/* ⋮ post menu backdrop */}
      {postMenu&&<div style={{position:"fixed",inset:0,zIndex:90}} onClick={()=>setPostMenu(null)}/>}

{/* ── Feed greeting header ── */}
      <div style={{padding:"14px 16px 6px",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
        <div>
          <div style={{fontSize:11,fontWeight:600,color:"#7C7290",letterSpacing:"0.02em"}}>MYTOWN 360 · EC PHASE 1</div>
          <div style={{fontSize:18,fontWeight:900,color:"#18103A",marginTop:1}}>Good morning, Meena! 👋</div>
        </div>
        <div style={{display:"flex",gap:8,alignItems:"center"}}>
          <button style={{width:38,height:38,borderRadius:12,background:"#F3EBFF",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:17}}>🔍</button>
          <div style={{position:"relative"}}>
            <button style={{width:38,height:38,borderRadius:12,background:"#F3EBFF",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:17}}>🔔</button>
            <span style={{position:"absolute",top:-3,right:-3,width:16,height:16,borderRadius:"50%",background:"#E11D48",color:"#fff",fontSize:9,fontWeight:900,display:"flex",alignItems:"center",justifyContent:"center",border:"2px solid #fff"}}>3</span>
          </div>
        </div>
      </div>

{/* ── Story / Neighbours strip ── */}
      <div style={{overflowX:"auto",padding:"12px 14px 4px",scrollbarWidth:"none"}}>
        <div style={{display:"flex",gap:10,width:"max-content"}}>
          {/* Add Story tile */}
          <div onClick={()=>setStoryOpen("own")} style={{display:"flex",flexDirection:"column",alignItems:"center",gap:5,cursor:"pointer"}}>
            <div style={{
              width:56,height:56,borderRadius:18,
              background:"linear-gradient(135deg,#F3EBFF,#EAE0FF)",
              border:`2px dashed ${C.purple}55`,
              display:"flex",alignItems:"center",justifyContent:"center",
              fontSize:22,
            }}>＋</div>
            <span style={{fontSize:10,fontWeight:700,color:C.purple}}>Your Story</span>
          </div>
          {[
            {init:"RA",c:"#4F46E5",name:"Rahul A.",live:true},
            {init:"PS",c:"#D97706",name:"Priya S.",live:false},
            {init:"KM",c:"#059669",name:"Kiran M.",live:true},
            {init:"SW",c:"#E11D48",name:"Sunita W.",live:false},
            {init:"VR",c:"#0284C7",name:"Vijay R.",live:true},
            {init:"AM",c:"#7C3AED",name:"Asha M.",live:false},
          ].map(s=>(
            <div key={s.init} onClick={()=>setStoryOpen(s)} style={{display:"flex",flexDirection:"column",alignItems:"center",gap:5,cursor:"pointer"}}>
              <div style={{position:"relative"}}>
                <div style={{
                  width:56,height:56,borderRadius:18,
                  background:`linear-gradient(135deg,${s.c},${s.c}99)`,
                  display:"flex",alignItems:"center",justifyContent:"center",
                  color:"#fff",fontWeight:900,fontSize:17,
                  border:`2.5px solid ${s.live?"#00B89F":"transparent"}`,
                  boxShadow:s.live?`0 0 0 2px #fff, 0 0 0 4px #00B89F`:`0 2px 8px ${s.c}44`,
                }}>{s.init}</div>
                {s.live&&<span style={{
                  position:"absolute",bottom:0,right:0,
                  width:14,height:14,borderRadius:"50%",
                  background:"#00B89F",border:"2px solid #fff",
                }}/>}
              </div>
              <span style={{fontSize:10,fontWeight:600,color:C.muted,maxWidth:56,textAlign:"center",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{s.name}</span>
            </div>
          ))}
        </div>
      </div>

{/* ── Pinned community alert banner — compact ── */}
      <div style={{margin:"8px 14px 0",borderRadius:14,padding:"10px 14px",display:"flex",gap:10,alignItems:"center",background:"linear-gradient(135deg,#FFF1F2,#FFE4E7)",border:`1.5px solid ${C.coral}40`,boxShadow:"0 2px 8px rgba(244,63,94,0.1)"}}>
        <div style={{width:32,height:32,borderRadius:10,background:"linear-gradient(135deg,#E11D48,#FF6B7A)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:15,flexShrink:0}}>⚠️</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:12,fontWeight:900,color:"#BE123C"}}>Active Alert · Prestige Sunrise Park</div>
          <div style={{fontSize:11,color:"#9F1239",marginTop:1}}>Suspicious activity reported. Stay alert.</div>
        </div>
        <span style={{fontSize:18,color:"#E11D48"}}>›</span>
      </div>

{/* ── Post Composer ── */}
      <div style={{margin:"10px 14px 0"}}>
        <PostComposer onPost={handlePost}/>
      </div>

{/* ── Category filter chips ── */}
      <div style={{overflowX:"auto",padding:"10px 14px 4px",scrollbarWidth:"none"}}>
        <div style={{display:"flex",gap:7,width:"max-content"}}>
          {cats.map(c=>{
            const m=CAT_META[c];const active=cat===c;
            return(
              <button key={c} onClick={()=>setCat(c)}
                style={{
                  padding:"6px 14px",borderRadius:99,fontSize:11,fontWeight:800,
                  whiteSpace:"nowrap",border:"none",cursor:"pointer",
                  display:"flex",alignItems:"center",gap:5,
                  background:active
                    ? (m?`linear-gradient(135deg,${m.color},${m.color}CC)`:`linear-gradient(135deg,${C.purple},${C.purpleL})`)
                    : "#fff",
                  color:active?"#fff":C.muted,
                  boxShadow:active
                    ? `0 3px 12px ${m?m.color:C.purple}44`
                    : `0 1px 4px rgba(28,15,60,0.06)`,
                  transform:active?"scale(1.04)":"scale(1)",
                  transition:"all 0.18s",
                }}>
                {m&&<span style={{fontSize:13}}>{m.icon}</span>}{c}
              </button>
            );
          })}
        </div>
      </div>

{/* ── Posts list ── */}
      <div style={{paddingBottom:96,background:"#F0F2F5",padding:"8px 10px 96px"}}>

{/* ── Unified feed: ₹250 at top, regular posts, ₹100 interspersed ── */}
        {feedItems.filter(item=>item._type!=="post"||!blockedAuthors.has(item.author)).map(item=>{
          /* ── Business promotion card (₹250 or ₹100) ── */
          if(item._type==="biz"){
            const biz=item;
            const tierColor=biz._tier===250?"#8B5CF6":C.mint;
            return(
              <div key={`biz-${biz.id}`} style={{background:"#fff",borderBottom:`1px solid ${C.border}`,borderLeft:`4px solid ${tierColor}`,paddingLeft:2}}>
                <div style={{padding:"12px 14px",display:"flex",gap:10,alignItems:"flex-start"}}>
                  <div style={{width:42,height:42,borderRadius:12,background:biz.avC,display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",fontWeight:900,fontSize:13,flexShrink:0}}>{biz.av}</div>
                  <div style={{flex:1}}>
                    <div style={{display:"flex",alignItems:"center",gap:5,marginBottom:1}}>
                      <span style={{fontSize:14,fontWeight:900,color:C.text}}>{biz.bizName}</span>
                      {biz.verified&&<span style={{fontSize:9,fontWeight:800,padding:"1px 5px",borderRadius:99,background:"#ECFDF5",color:"#059669"}}>✓ Verified</span>}
                    </div>
                    <div style={{fontSize:10,color:C.muted,marginBottom:5}}>{biz.bizType} · {biz.area}</div>
                    <div style={{fontSize:12,color:C.text,lineHeight:1.5}}>{biz.content}</div>
                    <div style={{marginTop:6,fontSize:11,fontWeight:600,color:tierColor}}>📞 {biz.contact}</div>
                  </div>
                  <button onClick={()=>setPromotionFor(biz.bizName)}
                    style={{fontSize:9,fontWeight:700,padding:"4px 9px",borderRadius:8,background:tierColor,color:"#fff",border:"none",cursor:"pointer",flexShrink:0,alignSelf:"flex-start"}}>Promote</button>
                </div>
              </div>
            );
          }
          /* ── Regular post ── */
          const post=item;
          const m=CAT_META[post.category]||{icon:"📌",color:C.purple};
          const isRemoved=removedPosts.has(post.id);
          const isSharedFromOther=post.sharedFrom&&post.sharedFrom!=="EC Phase 2";
          const isMissingPost=post.category==="Missing Person";
          return(
            <article key={`post-${post.id}`} style={{
              background:"#fff",
              borderRadius:12,
              boxShadow:"0 1px 3px rgba(0,0,0,0.12)",
              marginBottom:10,
              overflow:"hidden",
              ...(isMissingPost?{borderLeft:`4px solid ${C.crimson}`}:{}),
            }}>
              {isRemoved?(
                /* ── Removed by admin overlay ── */
                <div style={{padding:"24px 16px",textAlign:"center",background:"#F9F8FB"}}>
                  <div style={{fontSize:28,marginBottom:6}}>🚫</div>
                  <div style={{fontSize:13,fontWeight:700,color:C.muted}}>Post removed by community admin</div>
                  <div style={{fontSize:11,color:C.muted,marginTop:3}}>This shared post was removed as it was considered off-topic or spam for EC Phase 2.</div>
                </div>
              ):isMissingPost?(
                /* ── MISSING PERSON special card ── */
                <>
                  {/* Urgent crimson header bar */}
                  <div style={{background:C.crimson,padding:"10px 16px",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                    <div style={{display:"flex",alignItems:"center",gap:8}}>
                      <span style={{fontSize:18}}>🆘</span>
                      <div>
                        <div style={{fontWeight:900,fontSize:13,color:"#fff"}}>
                          {post.missingType==="child"?"MISSING CHILD":"MISSING PERSON"}
                        </div>
                        <div style={{fontSize:10,color:"rgba(255,255,255,0.8)",marginTop:1}}>{post.area} · {post.time}</div>
                      </div>
                    </div>
                    <div style={{display:"flex",gap:4,alignItems:"center"}}>
                      <span style={{fontSize:9,fontWeight:800,padding:"3px 7px",borderRadius:99,background:"rgba(255,255,255,0.22)",color:"#fff"}}>🔊 URGENT TONE</span>
                      <span style={{fontSize:9,fontWeight:800,padding:"3px 7px",borderRadius:99,background:"rgba(255,255,255,0.22)",color:"#fff"}}>247 notified</span>
                    </div>
                  </div>
                  {/* Person details block */}
                  <div style={{padding:"14px 16px"}}>
                    {/* Large name + age */}
                    <div style={{display:"flex",alignItems:"flex-start",gap:12,marginBottom:12}}>
                      <div style={{width:52,height:52,borderRadius:12,background:C.crimsonL,border:`2px dashed ${C.crimson}`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,fontSize:28}}>
                        {post.missingType==="child"?"👶":"🧑"}
                      </div>
                      <div>
                        <div style={{fontSize:18,fontWeight:900,color:C.crimson}}>{post.missingName}</div>
                        {post.missingAge&&<div style={{fontSize:13,fontWeight:600,color:C.text,marginTop:2}}>Age: {post.missingAge}</div>}
                      </div>
                    </div>
                    {/* Detail rows */}
                    <div style={{display:"flex",flexDirection:"column",gap:7}}>
                      <div style={{display:"flex",gap:8,alignItems:"flex-start"}}>
                        <span style={{fontSize:14,width:22,textAlign:"center",flexShrink:0}}>📍</span>
                        <div>
                          <div style={{fontSize:10,fontWeight:700,color:C.muted,textTransform:"uppercase",letterSpacing:0.5}}>Last Seen</div>
                          <div style={{fontSize:12,fontWeight:600,color:C.text}}>{post.missingLastSeen}</div>
                        </div>
                      </div>
                      {post.missingDesc&&(
                        <div style={{display:"flex",gap:8,alignItems:"flex-start"}}>
                          <span style={{fontSize:14,width:22,textAlign:"center",flexShrink:0}}>👕</span>
                          <div>
                            <div style={{fontSize:10,fontWeight:700,color:C.muted,textTransform:"uppercase",letterSpacing:0.5}}>Description</div>
                            <div style={{fontSize:12,color:C.text}}>{post.missingDesc}</div>
                          </div>
                        </div>
                      )}
                      {post.missingContact&&(
                        <div style={{display:"flex",gap:8,alignItems:"center"}}>
                          <span style={{fontSize:14,width:22,textAlign:"center",flexShrink:0}}>📞</span>
                          <div>
                            <div style={{fontSize:10,fontWeight:700,color:C.muted,textTransform:"uppercase",letterSpacing:0.5}}>Contact</div>
                            <div style={{fontSize:12,fontWeight:700,color:C.crimson}}>{post.missingContact}</div>
                          </div>
                        </div>
                      )}
                    </div>
                    {/* Posted by */}
                    <div style={{marginTop:10,paddingTop:10,borderTop:`1px solid ${C.crimson}22`,display:"flex",alignItems:"center",gap:8}}>
                      <Avatar initials={post.av} color={post.avC} size={28}/>
                      <div style={{fontSize:11,color:C.muted}}>Posted by <span style={{fontWeight:700,color:C.text}}>{post.author}</span> · {post.apartment}</div>
                      <Verified/>
                    </div>
                    {/* Action buttons */}
                    <div style={{marginTop:10,display:"flex",gap:8}}>
                      <button style={{flex:1,padding:"9px",borderRadius:10,background:C.crimson,color:"#fff",fontWeight:900,fontSize:12,border:"none",cursor:"pointer"}}>↗️ Share This Alert</button>
                      <button style={{flex:1,padding:"9px",borderRadius:10,background:C.crimsonL,color:C.crimson,fontWeight:700,fontSize:12,border:`1px solid ${C.crimson}44`,cursor:"pointer"}}>💬 Comment</button>
                    </div>
                    {/* Image thumbnails if any */}
                    {post.images&&post.images.length>0&&(
                      <div style={{marginTop:8,display:"flex",gap:6,flexWrap:"wrap"}}>
                        {post.images.map((img,i)=>(
                          <div key={i} style={{width:64,height:64,borderRadius:10,background:C.crimsonL,border:`1.5px solid ${C.crimson}33`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22}}>🖼️</div>
                        ))}
                      </div>
                    )}
                  </div>
                  {/* Dispatch confirmation strip */}
                  <div style={{padding:"8px 16px",background:C.crimsonL,borderTop:`1px solid ${C.crimson}22`,display:"flex",flexWrap:"wrap",gap:4}}>
                    <span style={{fontSize:9,fontWeight:800,padding:"2px 7px",borderRadius:99,background:"#fff",color:C.crimson}}>🔔 Push: 247</span>
                    <span style={{fontSize:9,fontWeight:800,padding:"2px 7px",borderRadius:99,background:"#fff",color:"#15803D"}}>📧 Email sent</span>
                    <span style={{fontSize:9,fontWeight:800,padding:"2px 7px",borderRadius:99,background:"#fff",color:"#1D4ED8"}}>💬 SMS sent</span>
                    <span style={{fontSize:9,fontWeight:800,padding:"2px 7px",borderRadius:99,background:"#fff",color:C.crimson}}>🔊 Urgent tone</span>
                  </div>
                  <ReactionBar postId={post.id} baseCounts={POST_RXNS[post.id]||{}} myReaction={reactions[post.id]||null} onReact={handleReact}/>
                </>
              ):(
                /* ── Facebook-style post ── */
                <>
                  {/* ── Author header ── */}
                  <div style={{padding:"14px 16px 10px",display:"flex",alignItems:"center",gap:10}}>
                    {/* Avatar with online dot */}
                    <div style={{position:"relative",flexShrink:0}}>
                      <div style={{
                        width:42,height:42,borderRadius:"50%",
                        background:`linear-gradient(135deg,${post.avC},${post.avC}CC)`,
                        display:"flex",alignItems:"center",justifyContent:"center",
                        color:"#fff",fontWeight:900,fontSize:14,
                        boxShadow:`0 2px 8px ${post.avC}55`,
                      }}>{post.av}</div>
                      <div style={{position:"absolute",bottom:0,right:0,width:12,height:12,borderRadius:"50%",background:"#31A24C",border:"2px solid #fff"}}/>
                    </div>
                    {/* Name + meta */}
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{display:"flex",alignItems:"center",gap:5}}>
                        <span style={{fontWeight:700,fontSize:14,color:C.text}}>{post.author}</span>
                        <Verified/>
                      </div>
                      <div style={{display:"flex",alignItems:"center",gap:5,marginTop:1}}>
                        <span style={{fontSize:11,color:C.muted}}>{post.apartment}</span>
                        <span style={{fontSize:11,color:C.muted}}>·</span>
                        <span style={{fontSize:11,color:C.muted}}>{post.time}</span>
                        <span style={{fontSize:11,color:C.muted}}>·</span>
                        <span style={{fontSize:12}}>🌐</span>
                      </div>
                    </div>
                    {/* ⋮ menu */}
                    <div style={{position:"relative",flexShrink:0}}>
                      <button onClick={e=>{e.stopPropagation();setPostMenu(postMenu===post.id?null:post.id);}}
                        style={{width:36,height:36,borderRadius:"50%",background:postMenu===post.id?"#E4E6EB":"transparent",border:"none",cursor:"pointer",color:C.muted,fontSize:20,display:"flex",alignItems:"center",justifyContent:"center"}}>⋮</button>
                      {postMenu===post.id&&(
                        <div style={{position:"absolute",right:0,top:40,background:"#fff",borderRadius:12,boxShadow:"0 4px 24px rgba(0,0,0,0.18)",zIndex:100,minWidth:200,overflow:"hidden"}} onClick={e=>e.stopPropagation()}>
                          <button style={{width:"100%",padding:"12px 16px",textAlign:"left",border:"none",cursor:"pointer",background:"transparent",fontSize:14,fontWeight:600,color:C.text,display:"flex",alignItems:"center",gap:10}}>🔖 Save Post</button>
                          <button style={{width:"100%",padding:"12px 16px",textAlign:"left",border:"none",cursor:"pointer",background:"transparent",fontSize:14,fontWeight:600,color:C.text,display:"flex",alignItems:"center",gap:10}}>↗️ Share Post</button>
                          <button onClick={()=>{setPostMenu(null);setReportSheet({postId:post.id,author:post.author});}}
                            style={{width:"100%",padding:"12px 16px",textAlign:"left",border:"none",cursor:"pointer",background:"transparent",fontSize:14,fontWeight:600,color:"#F59E0B",display:"flex",alignItems:"center",gap:10}}>⚑ Report Post</button>
                          <button onClick={()=>{setPostMenu(null);setBlockSheet({author:post.author});}}
                            style={{width:"100%",padding:"12px 16px",textAlign:"left",border:"none",cursor:"pointer",background:"#FFF1F2",fontSize:14,fontWeight:700,color:"#F43F5E",display:"flex",alignItems:"center",gap:10}}>🚫 Block {post.author}</button>
                        </div>
                      )}
                    </div>
                  </div>
                  {/* ── Category badge ── */}
                  <div style={{padding:"0 16px 10px",display:"flex",gap:6,flexWrap:"wrap"}}>
                    <span style={{display:"inline-flex",alignItems:"center",gap:4,padding:"4px 12px",borderRadius:99,background:`${m.color}15`,fontSize:12,fontWeight:700,color:m.color}}>
                      {m.icon} {post.category}
                    </span>
                    {isSharedFromOther&&<span style={{display:"inline-flex",alignItems:"center",gap:3,padding:"4px 10px",borderRadius:99,background:C.purpleFg,fontSize:11,fontWeight:700,color:C.purple}}>📡 {post.sharedFrom}</span>}
                    {isSharedFromOther&&<button onClick={()=>adminRemove(post.id)} style={{fontSize:11,fontWeight:700,color:C.coral,background:C.coralL,border:"none",borderRadius:99,padding:"4px 10px",cursor:"pointer"}}>🗑 Remove</button>}
                  </div>
                  {/* ── Post content ── */}
                  <div style={{padding:"0 16px 14px"}}>
                    <p style={{fontSize:15,lineHeight:1.65,color:C.text,margin:0}}>{post.content}</p>
                  </div>
                  {/* ── Reaction summary row ── */}
                  <div style={{padding:"6px 16px",borderTop:`1px solid ${C.border}`,display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                    <div style={{display:"flex",alignItems:"center",gap:4}}>
                      <div style={{display:"flex"}}>
                        <span style={{fontSize:16}}>👍</span>
                        <span style={{fontSize:16,marginLeft:-4}}>❤️</span>
                      </div>
                      <span style={{fontSize:13,color:C.muted}}>{(post.likes||0)+(Math.floor(Math.random()*10))} reactions</span>
                    </div>
                    <div style={{display:"flex",gap:10}}>
                      <span style={{fontSize:13,color:C.muted}}>{post.comments||0} comments</span>
                      <span style={{fontSize:13,color:C.muted}}>·</span>
                      <span style={{fontSize:13,color:C.muted}}>3 shares</span>
                    </div>
                  </div>
                  {/* ── Facebook action buttons ── */}
                  <div style={{display:"flex",borderTop:`1px solid ${C.border}`,padding:"4px 8px"}}>
                    <button style={{flex:1,padding:"8px 0",display:"flex",alignItems:"center",justifyContent:"center",gap:6,border:"none",background:"transparent",cursor:"pointer",borderRadius:8,color:reactions[post.id]?"#1877F2":C.muted,fontWeight:600,fontSize:14}}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill={reactions[post.id]?"#1877F2":"none"} stroke={reactions[post.id]?"#1877F2":"currentColor"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                      Like
                    </button>
                    <button style={{flex:1,padding:"8px 0",display:"flex",alignItems:"center",justifyContent:"center",gap:6,border:"none",background:"transparent",cursor:"pointer",borderRadius:8,color:C.muted,fontWeight:600,fontSize:14}}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                      Comment
                    </button>
                    <button style={{flex:1,padding:"8px 0",display:"flex",alignItems:"center",justifyContent:"center",gap:6,border:"none",background:"transparent",cursor:"pointer",borderRadius:8,color:C.muted,fontWeight:600,fontSize:14}}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                      Share
                    </button>
                  </div>
                </>
              )}
            </article>
          );
        })}
      </div>
    </div>
  );
}

<div className="rounded-3xl overflow-hidden relative mb-2" style={{height:300,background:"linear-gradient(145deg,#e8eaff,#f3e8ff,#e0f7f4)"}}>
        <svg className="absolute inset-0 w-full h-full" style={{opacity:0.45}}>
          <line x1="5%" y1="50%" x2="95%" y2="50%" stroke="#c8b6e8" strokeWidth="7"/>
          <line x1="50%" y1="5%" x2="50%" y2="95%" stroke="#c8b6e8" strokeWidth="7"/>
          <line x1="15%" y1="15%" x2="85%" y2="85%" stroke="#a8d8cf" strokeWidth="4"/>
          <line x1="72%" y1="10%" x2="28%" y2="78%" stroke="#a8d8cf" strokeWidth="4"/>
          <text x="52%" y="46%" fill="#9b72d4" fontSize="8" fontWeight="bold">NICE Road</text>
          <text x="8%" y="52%" fill="#9b72d4" fontSize="7">Hosur Rd</text>
          <text x="52%" y="18%" fill="#9b72d4" fontSize="7">Sarjapur Rd</text>
        </svg>
        {PINS.filter(p=> showParks===false || showParks===null ? true : p.t===showParks).map((p,i)=>(
          <button key={i} onClick={()=>setAp(ap===i?null:i)} className="absolute flex flex-col items-center transition-transform hover:scale-110"
            style={{left:`${p.x}%`,top:`${p.y}%`,transform:"translate(-50%,-100%)"}}>
            <div className="w-9 h-9 rounded-2xl flex items-center justify-center text-base shadow-lg border-2 border-white" style={{background:p.c}}>{PI[p.t]}</div>
            {(ap===i||p.t==="area")&&<div className="mt-1 px-2 py-0.5 rounded-xl text-xs font-black shadow whitespace-nowrap" style={{background:"#fff",color:p.c}}>{p.label}</div>}
          </button>
        ))}
        <div className="absolute" style={{left:"42%",top:"30%",transform:"translate(-50%,-50%)"}}>
          <div className="w-4 h-4 rounded-full border-2 border-white shadow animate-pulse" style={{background:"#3B82F6"}}/>
        </div>
        <div className="absolute bottom-3 right-3 rounded-xl px-3 py-1.5 text-xs font-semibold flex items-center gap-1.5 shadow" style={{background:"rgba(255,255,255,0.92)",color:C.muted}}>
          <span className="w-2 h-2 rounded-full inline-block" style={{background:"#3B82F6"}}/>You're here
        </div>
      </div>
      {/* Map legend */}
      <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14,padding:"6px 2px"}}>
        {[["📍","Areas","#5C2D91"],["🌳","Parks","#16A34A"],["🛒","Grocery","#EA580C"],["🏫","Schools","#2563EB"],["🏥","Hospitals","#DC2626"],["⛽","Petrol","#D97706"],["🏨","Hotels","#7C3AED"],["🛕","Temples","#B45309"],["🎬","Cinemas","#0891B2"],["🏧","ATMs","#059669"],["🍽️","Food","#DC2626"],["⚠️","Alerts","#FF6B7A"],["🎉","Events","#FFB347"]].map(([ico,lbl,col])=>(
          <span key={lbl} style={{display:"flex",alignItems:"center",gap:4,fontSize:11,color:col,fontWeight:700}}>
            <span>{ico}</span>{lbl}
          </span>
        ))}
      </div>
      <h3 className="font-black text-sm mb-2" style={{color:C.text}}>📍 All Covered Areas</h3>
      <div className="grid grid-cols-2 gap-2 mb-5">
        {AREAS_LIST.map(a=>(
          <div key={a.name} className="rounded-xl p-3 flex items-center gap-2" style={{background:"#fff",border:`1.5px solid ${C.border}`}}>
            <div className="w-2 h-2 rounded-full flex-shrink-0" style={{background:C.purple}}/>
            <div className="min-w-0">
              <div className="text-xs font-bold truncate" style={{color:C.text}}>{a.name}</div>
              <div className="text-xs" style={{color:C.muted}}>PIN {a.pin}</div>
            </div>
          </div>
        ))}
      </div>
      {/* ── Nearby Areas (within 10 km) ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🗺 Nearby Areas</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:C.purpleFg,color:C.purple}}>Within 10 km</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:7,marginBottom:20}}>
        {NEARBY_LOCALITIES.map(a=>(
          <div key={a.name} style={{borderRadius:12,background:"#fff",border:`1.5px solid ${C.border}`,padding:"10px 12px",display:"flex",alignItems:"center",gap:10}}>
            {/* Direction compass badge */}
            <div style={{width:36,height:36,borderRadius:10,background:`${a.color}18`,border:`1.5px solid ${a.color}33`,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",flexShrink:0}}>
              <span style={{fontSize:9,fontWeight:900,color:a.color,letterSpacing:"0.05em"}}>{a.dir}</span>
              <span style={{fontSize:8,color:a.color,fontWeight:700}}>{a.dist}</span>
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontWeight:800,fontSize:13,color:"#1F2937"}}>{a.name}</div>
              <div style={{fontSize:11,color:"#6B7280",marginTop:1,lineHeight:1.4}}>{a.note}</div>
            </div>
            <div style={{padding:"3px 10px",borderRadius:99,background:`${a.color}14`,flexShrink:0}}>
              <span style={{fontSize:11,fontWeight:700,color:a.color}}>{a.dist}</span>
            </div>
          </div>
        ))}
      </div>

<h3 className="font-black text-sm mb-2" style={{color:C.text}}>📁 Local Directory</h3>
      <div className="space-y-2 mb-5">
        {DIRECTORY.map(([ic,lb,n])=>(
          <button key={lb} className="w-full rounded-xl p-3 flex items-center justify-between" style={{background:"#fff",border:`1.5px solid ${C.border}`}}>
            <div className="flex items-center gap-3"><span className="text-xl">{ic}</span><span className="text-sm font-bold" style={{color:C.text}}>{lb}</span></div>
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-black px-2 py-0.5 rounded-full" style={{background:C.purpleFg,color:C.purple}}>{n}</span>
              <span className="font-black" style={{color:C.muted}}>›</span>
            </div>
          </button>
        ))}
      </div>

{/* ── Parks & Recreation ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🌳 Parks & Recreation</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#DCFCE7",color:"#16A34A"}}>{PARKS.length} spots</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9,marginBottom:20}}>
        {PARKS.map(park=>(
          <div key={park.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #BBF7D0",overflow:"hidden",display:"flex"}}>
            <div style={{width:5,flexShrink:0,background: park.type==="Lake"?"#0EA5E9": park.type.includes("Cycling")?"#F59E0B": park.type.includes("Heritage")?"#A855F7":"#16A34A"}}/>
            <div style={{flex:1,padding:"11px 12px"}}>
              <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                <div style={{display:"flex",alignItems:"center",gap:7}}>
                  <span style={{fontSize:20}}>{park.icon}</span>
                  <div>
                    <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{park.name}</div>
                    <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{park.area}</div>
                  </div>
                </div>
                <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 8px",borderRadius:99,
                  background: park.type==="Lake"?"#E0F2FE": park.type.includes("Cycling")?"#FEF3C7": park.type.includes("Heritage")?"#F3E8FF":"#DCFCE7",
                  color:       park.type==="Lake"?"#0369A1": park.type.includes("Cycling")?"#B45309": park.type.includes("Heritage")?"#7E22CE":"#15803D",
                  whiteSpace:"nowrap"}}>
                  {park.type}
                </span>
              </div>
              <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{park.desc}</div>
              <div style={{display:"flex",alignItems:"center",gap:5}}>
                <span style={{fontSize:11}}>🕐</span>
                <span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{park.timings}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

{/* ── Grocery & Supermarkets ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🛒 Grocery & Supermarkets</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#FFF7ED",color:"#EA580C"}}>{SUPERMARKETS.length} stores</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9}}>
        {SUPERMARKETS.map(store=>{
          const typeColor = store.type==="Hypermarket"?"#7C3AED": store.type==="Fresh Produce"?"#16A34A": store.type==="Kirana / Daily Needs"?"#0369A1":"#EA580C";
          const typeBg    = store.type==="Hypermarket"?"#F3E8FF": store.type==="Fresh Produce"?"#DCFCE7": store.type==="Kirana / Daily Needs"?"#E0F2FE":"#FFF7ED";
          const barColor  = store.type==="Hypermarket"?"#7C3AED": store.type==="Fresh Produce"?"#16A34A": store.type==="Kirana / Daily Needs"?"#0369A1":"#EA580C";
          return(
            <div key={store.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #FED7AA",overflow:"hidden",display:"flex"}}>
              <div style={{width:5,flexShrink:0,background:barColor}}/>
              <div style={{flex:1,padding:"11px 12px"}}>
                <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                  <div style={{display:"flex",alignItems:"center",gap:7}}>
                    <span style={{fontSize:20}}>{store.icon}</span>
                    <div>
                      <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{store.name}</div>
                      <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{store.area}</div>
                    </div>
                  </div>
                  <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 8px",borderRadius:99,background:typeBg,color:typeColor,whiteSpace:"nowrap"}}>
                    {store.type}
                  </span>
                </div>
                <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{store.desc}</div>
                <div style={{display:"flex",alignItems:"center",gap:5}}>
                  <span style={{fontSize:11}}>🕐</span>
                  <span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{store.timings}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

{/* ── Schools & Daycare ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🏫 Schools & Daycare</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#EFF6FF",color:"#2563EB"}}>{SCHOOLS.length} listed</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9}}>
        {SCHOOLS.map(school=>{
          const isGovt   = school.type.includes("Govt");
          const isDaycare= school.type.includes("Preschool")||school.type.includes("Daycare");
          const barColor = isGovt?"#7C3AED": isDaycare?"#EC4899":"#2563EB";
          const badgeBg  = isGovt?"#F3E8FF": isDaycare?"#FCE7F3":"#EFF6FF";
          const badgeCol = isGovt?"#7C3AED": isDaycare?"#9D174D":"#1D4ED8";
          return(
            <div key={school.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #BFDBFE",overflow:"hidden",display:"flex"}}>
              <div style={{width:5,flexShrink:0,background:barColor}}/>
              <div style={{flex:1,padding:"11px 12px"}}>
                <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                  <div style={{display:"flex",alignItems:"center",gap:7}}>
                    <span style={{fontSize:20}}>{school.icon}</span>
                    <div>
                      <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{school.name}</div>
                      <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{school.area}</div>
                    </div>
                  </div>
                  <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:badgeBg,color:badgeCol,whiteSpace:"nowrap",maxWidth:100,textAlign:"right",lineHeight:1.3}}>
                    {school.type}
                  </span>
                </div>
                <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{school.desc}</div>
                <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:4}}>
                  <div style={{display:"flex",alignItems:"center",gap:5}}>
                    <span style={{fontSize:11}}>🕐</span>
                    <span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{school.timings}</span>
                  </div>
                  {school.phone&&(
                    <a href={`tel:${school.phone}`} style={{fontSize:11,fontWeight:700,color:"#2563EB",textDecoration:"none",display:"flex",alignItems:"center",gap:3}}>
                      📞 {school.phone}
                    </a>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

{/* ── Hospitals & Clinics ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🏥 Hospitals & Clinics</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#FEF2F2",color:"#DC2626"}}>{HOSPITALS.length} listed</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9,marginBottom:4}}>
        {HOSPITALS.map(h=>(
          <div key={h.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #FECACA",overflow:"hidden",display:"flex"}}>
            <div style={{width:5,flexShrink:0,background:h.type.includes("Govt")?"#7C3AED":h.type.includes("Clinic")?"#059669":"#DC2626"}}/>
            <div style={{flex:1,padding:"11px 12px"}}>
              <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                <div style={{display:"flex",alignItems:"center",gap:7}}>
                  <span style={{fontSize:20}}>{h.icon}</span>
                  <div>
                    <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{h.name}</div>
                    <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{h.area}</div>
                  </div>
                </div>
                <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:h.type.includes("Govt")?"#F3E8FF":h.type.includes("Clinic")?"#DCFCE7":"#FEF2F2",color:h.type.includes("Govt")?"#7C3AED":h.type.includes("Clinic")?"#059669":"#DC2626",whiteSpace:"nowrap"}}>{h.type}</span>
              </div>
              <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{h.desc}</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:4}}>
                <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{fontSize:11}}>🕐</span><span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{h.timings}</span></div>
                {h.phone&&<a href={`tel:${h.phone}`} style={{fontSize:11,fontWeight:700,color:"#DC2626",textDecoration:"none"}}>📞 {h.phone}</a>}
              </div>
            </div>
          </div>
        ))}
      </div>

{/* ── Petrol Pumps ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>⛽ Petrol Pumps</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#FFFBEB",color:"#D97706"}}>{PETROL_PUMPS.length} stations</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9,marginBottom:4}}>
        {PETROL_PUMPS.map(p=>(
          <div key={p.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #FDE68A",overflow:"hidden",display:"flex"}}>
            <div style={{width:5,flexShrink:0,background:"#D97706"}}/>
            <div style={{flex:1,padding:"11px 12px"}}>
              <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                <div style={{display:"flex",alignItems:"center",gap:7}}>
                  <span style={{fontSize:20}}>{p.icon}</span>
                  <div>
                    <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{p.name}</div>
                    <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{p.area}</div>
                  </div>
                </div>
                <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:"#FFFBEB",color:"#B45309",whiteSpace:"nowrap"}}>{p.type}</span>
              </div>
              <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{p.desc}</div>
              <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{fontSize:11}}>🕐</span><span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{p.timings}</span></div>
            </div>
          </div>
        ))}
      </div>

{/* ── Hotels & Stay ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🏨 Hotels & Stay</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#F3E8FF",color:"#7C3AED"}}>{HOTELS.length} options</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9,marginBottom:4}}>
        {HOTELS.map(h=>(
          <div key={h.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #DDD6FE",overflow:"hidden",display:"flex"}}>
            <div style={{width:5,flexShrink:0,background:h.type==="4-Star"?"#F59E0B":h.type==="3-Star"?"#7C3AED":"#6B7280"}}/>
            <div style={{flex:1,padding:"11px 12px"}}>
              <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                <div style={{display:"flex",alignItems:"center",gap:7}}>
                  <span style={{fontSize:20}}>{h.icon}</span>
                  <div>
                    <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{h.name}</div>
                    <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{h.area}</div>
                  </div>
                </div>
                <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:h.type==="4-Star"?"#FEF3C7":h.type==="3-Star"?"#F3E8FF":"#F3F4F6",color:h.type==="4-Star"?"#B45309":h.type==="3-Star"?"#7C3AED":"#374151",whiteSpace:"nowrap"}}>{h.type}</span>
              </div>
              <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{h.desc}</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:4}}>
                <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{fontSize:11}}>🕐</span><span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{h.timings}</span></div>
                {h.phone&&<a href={`tel:${h.phone}`} style={{fontSize:11,fontWeight:700,color:"#7C3AED",textDecoration:"none"}}>📞 {h.phone}</a>}
              </div>
            </div>
          </div>
        ))}
      </div>

{/* ── Temples & Places of Worship ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🛕 Temples & Places of Worship</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#FFF7ED",color:"#B45309"}}>{TEMPLES.length} listed</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9,marginBottom:4}}>
        {TEMPLES.map(t=>(
          <div key={t.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #FDE68A",overflow:"hidden",display:"flex"}}>
            <div style={{width:5,flexShrink:0,background:t.type==="Mosque"?"#059669":t.type==="Church"?"#2563EB":"#D97706"}}/>
            <div style={{flex:1,padding:"11px 12px"}}>
              <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                <div style={{display:"flex",alignItems:"center",gap:7}}>
                  <span style={{fontSize:20}}>{t.icon}</span>
                  <div>
                    <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{t.name}</div>
                    <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{t.area}</div>
                  </div>
                </div>
                <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:t.type==="Mosque"?"#DCFCE7":t.type==="Church"?"#EFF6FF":"#FFFBEB",color:t.type==="Mosque"?"#059669":t.type==="Church"?"#2563EB":"#B45309",whiteSpace:"nowrap"}}>{t.type}</span>
              </div>
              <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{t.desc}</div>
              <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{fontSize:11}}>🕐</span><span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{t.timings}</span></div>
            </div>
          </div>
        ))}
      </div>

{/* ── Cinemas & Entertainment ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🎬 Cinemas & Entertainment</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#ECFEFF",color:"#0891B2"}}>{CINEMAS.length} venues</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9,marginBottom:4}}>
        {CINEMAS.map(c=>(
          <div key={c.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #A5F3FC",overflow:"hidden",display:"flex"}}>
            <div style={{width:5,flexShrink:0,background:c.type==="Multiplex"?"#0891B2":"#6B7280"}}/>
            <div style={{flex:1,padding:"11px 12px"}}>
              <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                <div style={{display:"flex",alignItems:"center",gap:7}}>
                  <span style={{fontSize:20}}>{c.icon}</span>
                  <div>
                    <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{c.name}</div>
                    <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{c.area}</div>
                  </div>
                </div>
                <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:c.type==="Multiplex"?"#ECFEFF":"#F3F4F6",color:c.type==="Multiplex"?"#0891B2":"#374151",whiteSpace:"nowrap"}}>{c.type}</span>
              </div>
              <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{c.desc}</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:4}}>
                <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{fontSize:11}}>🕐</span><span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{c.timings}</span></div>
                {c.phone&&<a href={`tel:${c.phone}`} style={{fontSize:11,fontWeight:700,color:"#0891B2",textDecoration:"none"}}>📞 {c.phone}</a>}
              </div>
            </div>
          </div>
        ))}
      </div>

{/* ── ATMs ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🏧 ATMs</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#DCFCE7",color:"#059669"}}>{ATMS.length} ATMs</span>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,marginBottom:4}}>
        {ATMS.map(a=>(
          <div key={a.name} style={{borderRadius:12,background:"#fff",border:"1.5px solid #A7F3D0",padding:"10px 11px"}}>
            <div style={{display:"flex",alignItems:"center",gap:7,marginBottom:4}}>
              <span style={{fontSize:18}}>{a.icon}</span>
              <div style={{minWidth:0}}>
                <div style={{fontWeight:800,fontSize:12,color:"#1F2937",lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{a.type}</div>
                <div style={{fontSize:10,color:"#6B7280"}}>{a.area}</div>
              </div>
            </div>
            <div style={{display:"flex",alignItems:"center",gap:4}}>
              <span style={{width:6,height:6,borderRadius:"50%",background:"#10B981",flexShrink:0,display:"inline-block"}}/>
              <span style={{fontSize:10,fontWeight:600,color:"#059669"}}>{a.timings}</span>
            </div>
          </div>
        ))}
      </div>
      {/* ── Restaurants & Cafés ── */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"18px 0 10px"}}>
        <h3 className="font-black text-sm" style={{color:C.text}}>🍽️ Restaurants & Cafés</h3>
        <span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:99,background:"#FEF2F2",color:"#DC2626"}}>{RESTAURANTS.length} listed</span>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:9}}>
        {RESTAURANTS.map(r=>{
          const typeColor = r.type.includes("South Indian")||r.type.includes("Darshini")?"#B45309":r.type.includes("Veg")?"#059669":r.type.includes("Café")||r.type.includes("Coffee")?"#0891B2":"#DC2626";
          const typeBg    = r.type.includes("South Indian")||r.type.includes("Darshini")?"#FFF7ED":r.type.includes("Veg")?"#DCFCE7":r.type.includes("Café")||r.type.includes("Coffee")?"#ECFEFF":"#FEF2F2";
          return(
            <div key={r.name} style={{borderRadius:14,background:"#fff",border:"1.5px solid #FECACA",overflow:"hidden",display:"flex"}}>
              <div style={{width:5,flexShrink:0,background:typeColor}}/>
              <div style={{flex:1,padding:"11px 12px"}}>
                <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:6,marginBottom:4}}>
                  <div style={{display:"flex",alignItems:"center",gap:7}}>
                    <span style={{fontSize:20}}>{r.icon}</span>
                    <div>
                      <div style={{fontWeight:800,fontSize:13,color:"#1F2937",lineHeight:1.2}}>{r.name}</div>
                      <div style={{fontSize:11,color:"#6B7280",marginTop:1}}>{r.area}</div>
                    </div>
                  </div>
                  <span style={{flexShrink:0,fontSize:10,fontWeight:700,padding:"2px 7px",borderRadius:99,background:typeBg,color:typeColor,whiteSpace:"nowrap"}}>{r.type}</span>
                </div>
                <div style={{fontSize:12,color:"#4B5563",lineHeight:1.5,marginBottom:5}}>{r.desc}</div>
                <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:4}}>
                  <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{fontSize:11}}>🕐</span><span style={{fontSize:11,fontWeight:600,color:"#6B7280"}}>{r.timings}</span></div>
                  {r.phone&&<a href={`tel:${r.phone}`} style={{fontSize:11,fontWeight:700,color:"#DC2626",textDecoration:"none"}}>📞 {r.phone}</a>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

{/* Menu list */}
      <div style={{margin:"0 12px 12px",borderRadius:20,overflow:"hidden",background:"#fff",boxShadow:"0 4px 20px rgba(28,15,60,0.08)"}}>
        {MENU.map(([ic,title,sub],i)=>(
          <button key={title} onClick={()=>setMenuItem([ic,title,sub])} style={{
            width:"100%",display:"flex",alignItems:"center",gap:12,
            padding:"13px 16px",textAlign:"left",border:"none",cursor:"pointer",
            borderBottom:i<MENU.length-1?`1px solid ${C.border}`:"none",
            background:"transparent",
          }}>
            <div style={{width:36,height:36,borderRadius:11,background:C.surface,display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,flexShrink:0}}>{ic}</div>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:13,color:C.text}}>{title}</div>
              <div style={{fontSize:11,color:C.muted,marginTop:1}}>{sub}</div>
            </div>
            <span style={{color:C.muted,fontWeight:900,fontSize:16}}>›</span>
          </button>
        ))}
      </div>
      {/* Admin Panel — not shown in public UI, access directly via mytown360.in/admin */}
      <div style={{padding:"0 12px"}}>
      <button onClick={()=>nav("landing")} style={{
        width:"100%",padding:"13px",borderRadius:16,fontWeight:800,fontSize:13,
        border:`1.5px solid ${C.rose}44`,color:C.rose,
        background:"linear-gradient(135deg,#FFF1F2,#FFE4E7)",
        cursor:"pointer",marginBottom:20,
      }}>🚪 Sign Out</button>
      <div className="text-center space-y-1">
        <div className="flex items-center justify-center gap-2"><Logo size={18}/><span className="text-sm font-black" style={{color:C.text}}>MyTown 360</span></div>
        <p className="text-xs" style={{color:C.muted}}>mytown360.in · v1.0 · Electronic City, Bangalore 🇮🇳</p>
      </div>
    </div>
    </div>
  );
}

// ─── Community Manager Data ──────────────────────────────────────────────────
// ─── PII Consent Modal ───────────────────────────────────────────────────────
function PIIConsentModal({piiType, onAccept, onDecline}){
  const meta = PII_META[piiType]||PII_META.phone;
  return(
    <div style={{position:"fixed",inset:0,zIndex:200,display:"flex",alignItems:"flex-end",justifyContent:"center",background:"rgba(26,16,51,0.6)",backdropFilter:"blur(4px)"}}>
      <div style={{width:"100%",maxWidth:430,background:"#fff",borderRadius:"24px 24px 0 0",padding:"0 0 36px",animation:"slideUp 0.3s ease"}}>
        <div style={{display:"flex",justifyContent:"center",paddingTop:12}}><div style={{width:40,height:4,borderRadius:99,background:C.border}}/></div>
        {/* Warning header */}
        <div style={{margin:"16px 20px 0",padding:"14px 16px",borderRadius:16,background:"#FFF8E7",border:`1.5px solid ${C.marigold}66`,display:"flex",gap:12,alignItems:"flex-start"}}>
          <span style={{fontSize:28}}>{meta.icon}</span>
          <div>
            <div style={{fontWeight:900,fontSize:15,color:C.text}}>Sensitive Information Detected</div>
            <div style={{fontSize:12,color:C.muted,marginTop:3}}>You are about to share your <span style={{fontWeight:700,color:C.coral}}>{meta.label}</span>.</div>
          </div>
        </div>
        {/* Info */}
        <div style={{margin:"12px 20px 0",fontSize:13,color:C.text,lineHeight:1.6}}>
          <p style={{marginBottom:8}}>{meta.msg}</p>
          <div style={{padding:"12px 14px",borderRadius:12,background:C.coralL,border:`1.5px solid ${C.coral}33`}}>
            <p style={{fontWeight:700,fontSize:12,color:C.coral,marginBottom:4}}>⚠️ Important Disclaimer</p>
            <p style={{fontSize:12,color:C.text,lineHeight:1.5}}>
              MyTown 360 is <strong>not responsible</strong> for any consequences arising from sharing this information.
              This is entirely your personal choice. Once shared, we cannot guarantee how this information will be used by others.
            </p>
          </div>
        </div>
        {/* Consent buttons */}
        <div style={{margin:"16px 20px 0",display:"flex",flexDirection:"column",gap:10}}>
          <button onClick={onAccept}
            style={{width:"100%",padding:"13px",borderRadius:14,background:C.purple,color:"#fff",fontWeight:900,fontSize:14,border:"none",cursor:"pointer"}}>
            ✅ I Accept — Share My {meta.label}
          </button>
          <button onClick={onDecline}
            style={{width:"100%",padding:"13px",borderRadius:14,background:C.coralL,color:C.coral,fontWeight:900,fontSize:14,border:`1.5px solid ${C.coral}33`,cursor:"pointer"}}>
            ❌ Decline — Remove This Information
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Content Blocked Banner ───────────────────────────────────────────────────
function ContentBlockedBanner({context, onEdit}){
  return(
    <div style={{borderRadius:16,overflow:"hidden",border:`1.5px solid ${C.coral}55`,marginBottom:8}}>
      <div style={{background:`linear-gradient(90deg,${C.coral},#FF9AA5)`,padding:"8px 14px",display:"flex",gap:8,alignItems:"center"}}>
        <span style={{fontSize:16}}>🚫</span>
        <span style={{color:"#fff",fontWeight:900,fontSize:12}}>CONTENT BLOCKED — POLICY VIOLATION</span>
      </div>
      <div style={{background:"#FFF5F5",padding:"12px 14px"}}>
        <p style={{fontSize:12,color:C.text,marginBottom:8,lineHeight:1.5}}>
          This {context} was automatically blocked because it appears to contain <strong>sexual or inappropriate content</strong> that violates our Community Guidelines.
        </p>
        <div style={{display:"flex",gap:8}}>
          {onEdit&&<button onClick={onEdit} style={{flex:1,padding:"7px",borderRadius:10,background:C.purple,color:"#fff",fontWeight:700,fontSize:12,border:"none",cursor:"pointer"}}>✏️ Edit Content</button>}
          <div style={{flex:1,padding:"7px",borderRadius:10,background:C.surface,color:C.muted,fontWeight:600,fontSize:12,textAlign:"center"}}>📋 Report Filed</div>
        </div>
      </div>
    </div>
  );
}

// ─── PII-aware Textarea ────────────────────────────────────────────────────────
// Detects PII as user types; shows consent modal before allowing sensitive content
function PIITextarea({value, onChange, placeholder, rows=3, style={}}){
  const [showConsent,setShowConsent]=useState(false);
  const [pending,setPending]=useState("");
  const [piiType,setPiiType]=useState(null);
  const [accepted,setAccepted]=useState(new Set());
  const handleChange=(e)=>{
    const v=e.target.value;
    const detected=detectPII(v);
    if(detected&&!accepted.has(detected)){ setPending(v);setPiiType(detected);setShowConsent(true); }
    else{ onChange(v); }
  };
  const accept=()=>{ setAccepted(p=>new Set([...p,piiType]));onChange(pending);setShowConsent(false); };
  const decline=()=>{ setShowConsent(false); /* keep old value, don't update */ };
  return(
    <>
      {showConsent&&<PIIConsentModal piiType={piiType} onAccept={accept} onDecline={decline}/>}
      <textarea rows={rows} value={value} onChange={handleChange} placeholder={placeholder}
        className="w-full rounded-xl p-3 text-sm resize-none focus:outline-none"
        style={{background:C.surface,border:`1.5px solid ${C.border}`,color:C.text,...style}}/>
    </>
  );
}

// ─── PII-aware Input ──────────────────────────────────────────────────────────
function PIIInput({value, onChange, placeholder, style={}}){
  const [showConsent,setShowConsent]=useState(false);
  const [pending,setPending]=useState("");
  const [piiType,setPiiType]=useState(null);
  const [accepted,setAccepted]=useState(new Set());
  const handleChange=(e)=>{
    const v=e.target.value;
    const detected=detectPII(v);
    if(detected&&!accepted.has(detected)){ setPending(v);setPiiType(detected);setShowConsent(true); }
    else{ onChange(v); }
  };
  const accept=()=>{ setAccepted(p=>new Set([...p,piiType]));onChange(pending);setShowConsent(false); };
  const decline=()=>{ setShowConsent(false); };
  return(
    <>
      {showConsent&&<PIIConsentModal piiType={piiType} onAccept={accept} onDecline={decline}/>}
      <input value={value} onChange={handleChange} placeholder={placeholder}
        className="flex-1 text-sm bg-transparent focus:outline-none"
        style={{color:C.text,...style}}/>
    </>
  );
}

// ─── Ineligibility Modal ────────────────────────────────────────────────────
function IneligibilityModal({onClose, stats, candidateCount}){
  const checks=[
    { ok:stats.verified,         label:"Verified Resident",         detail:"Government ID + address proof must be verified",     fix:"Complete verification in your Profile" },
    { ok:stats.eventsOrg>=5,     label:`Organised 5+ Events (you: ${stats.eventsOrg})`, detail:"Must have organised at least 5 community events",  fix:"Organise more events from the Events tab" },
    { ok:stats.posts>=10,        label:`10+ Community Posts (you: ${stats.posts})`,      detail:"Must be an active poster in neighbourhood feed",   fix:"Engage more in the Neighbourhood Feed" },
    { ok:stats.area!==undefined, label:"Same Area Resident",         detail:"Can only apply for your own registered area",        fix:"Your area is auto-detected from your address" },
    { ok:candidateCount<4,       label:`Slot Available (${candidateCount}/4 taken)`,     detail:"Maximum 4 candidates per election",                fix:"Wait for next election cycle" },
  ];
  const passed=checks.filter(c=>c.ok).length;
  return(
    <div style={{position:"fixed",inset:0,zIndex:100,display:"flex",alignItems:"flex-end",justifyContent:"center",background:"rgba(26,16,51,0.55)",backdropFilter:"blur(4px)"}}>
      <div style={{width:"100%",maxWidth:430,background:"#fff",borderRadius:"24px 24px 0 0",padding:"0 0 32px",maxHeight:"90vh",overflowY:"auto"}}>
        {/* Handle bar */}
        <div style={{display:"flex",justifyContent:"center",paddingTop:12,paddingBottom:4}}>
          <div style={{width:40,height:4,borderRadius:99,background:C.border}}/>
        </div>
        {/* Header */}
        <div style={{padding:"12px 20px 16px",borderBottom:`1.5px solid ${C.border}`}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
            <div>
              <div style={{fontWeight:900,fontSize:16,color:C.text}}>Eligibility Check</div>
              <div style={{fontSize:12,color:C.muted,marginTop:2}}>You meet <span style={{fontWeight:800,color:passed===checks.length?C.mint:C.coral}}>{passed}/{checks.length}</span> conditions to apply</div>
            </div>
            <button onClick={onClose} style={{width:32,height:32,borderRadius:10,background:C.surface,border:`1.5px solid ${C.border}`,fontWeight:900,fontSize:14,cursor:"pointer",color:C.muted}}>✕</button>
          </div>
          {/* Progress bar */}
          <div style={{marginTop:12,height:6,borderRadius:99,background:C.border}}>
            <div style={{height:6,borderRadius:99,background:passed===checks.length?C.mint:C.coral,width:`${(passed/checks.length)*100}%`,transition:"width 0.5s"}}/>
          </div>
        </div>
        {/* Conditions list */}
        <div style={{padding:"12px 20px 0"}}>
          {checks.map((c,i)=>(
            <div key={i} style={{display:"flex",gap:12,padding:"12px 0",borderBottom:i<checks.length-1?`1px solid ${C.border}`:"none"}}>
              <div style={{width:28,height:28,borderRadius:99,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,fontSize:14,background:c.ok?C.mintL:C.coralL}}>
                {c.ok?"✅":"❌"}
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:700,fontSize:13,color:c.ok?C.text:C.muted}}>{c.label}</div>
                <div style={{fontSize:11,color:C.muted,marginTop:1}}>{c.detail}</div>
                {!c.ok&&<div style={{fontSize:11,fontWeight:600,color:C.coral,marginTop:3}}>→ {c.fix}</div>}
              </div>
            </div>
          ))}
        </div>
        {/* Footer CTA */}
        <div style={{padding:"16px 20px 0"}}>
          {passed===checks.length?(
            <button onClick={onClose} style={{width:"100%",padding:"12px",borderRadius:14,background:C.purple,color:"#fff",fontWeight:900,fontSize:14,border:"none",cursor:"pointer"}}>
              ✅ You're Eligible · Continue to Apply →
            </button>
          ):(
            <div style={{borderRadius:14,padding:"12px 14px",background:C.coralL,border:`1.5px solid ${C.coral}33`}}>
              <div style={{fontWeight:700,fontSize:12,color:C.coral}}>❌ Not yet eligible</div>
              <div style={{fontSize:11,color:C.muted,marginTop:3}}>Complete the conditions above before the application deadline. Check back once you meet all requirements.</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── Community Manager Screen ────────────────────────────────────────────────
function CommunityManagerScreen(){
  const [selArea,  setSelArea]  = useState("ep2");
  const [voted,    setVoted]    = useState(null);
  const [view,     setView]     = useState("main");
  const [applyStep,setApplyStep]= useState(1);
  const [applyForm,setApplyForm]= useState({photo:"",proof:"",profession:"",statement:""});
  const [voteAnim, setVoteAnim] = useState(null);
  const [showIneligible, setShowIneligible] = useState(false);

const handleApplyClick=()=>{
    if(meEligible) setView("apply");
    else setShowIneligible(true);
  };

if(view==="apply") return <CMApplyScreen step={applyStep} setStep={setApplyStep} form={applyForm} setForm={setApplyForm} onDone={()=>setView("success")} onBack={()=>setView("main")} area={CM_AREAS.find(a=>a.id===selArea)}/>;
  if(view==="success") return <CMSuccessScreen onBack={()=>{setView("main");setApplyStep(1);}}/>;

return(
    <div className="px-4 py-4 space-y-4">
      {showIneligible&&<IneligibilityModal onClose={()=>setShowIneligible(false)} stats={MY_STATS} candidateCount={candidates.length}/>}

{/* Title */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-black" style={{color:C.text}}>Community Admins</h2>
          <p className="text-xs mt-0.5" style={{color:C.muted}}>6-month term · Top 4 shortlisted · Area residents vote</p>
        </div>
        <span className="text-xs font-bold px-2.5 py-1 rounded-xl" style={{background:C.purpleFg,color:C.purple}}>🔄 Every 6 months</span>
      </div>

{/* Area selector */}
      <div className="flex gap-2 overflow-x-auto pb-1">
        {CM_AREAS.map(a=>{
          const ph=ELECTION_PHASES[a.id];
          const badge = ph==="voting"?"🗳":ph==="pre_election"?"📣":ph==="stable"?"✅":"🏛";
          return(
            <button key={a.id} onClick={()=>setSelArea(a.id)}
              className="flex-shrink-0 px-3 py-1.5 rounded-xl text-xs font-black transition-all"
              style={selArea===a.id?{background:C.purple,color:"#fff"}:{background:C.surface,color:C.muted,border:`1.5px solid ${C.border}`}}>
              {badge} {a.label}
            </button>
          );
        })}
      </div>

{/* ── ELECTION NOTIFICATION BANNER (pre_election phase) ── */}
      {phase==="pre_election" && (
        <div className="rounded-2xl overflow-hidden" style={{border:`1.5px solid ${C.marigold}55`}}>
          <div className="px-4 py-2 flex items-center gap-2" style={{background:`linear-gradient(90deg,${C.marigold},#FFD580)`}}>
            <span className="text-sm">📣</span>
            <span className="font-black text-xs text-white">ELECTION NOTIFICATION — Sent to all {selArea.toUpperCase()} members</span>
          </div>
          <div className="px-4 py-3" style={{background:"#FFFDF0"}}>
            <p className="text-xs leading-relaxed" style={{color:C.text}}>
              <span className="font-black">Current admin's term ends in 30 days.</span> The next Community Admin election for <span className="font-bold" style={{color:C.marigold}}>{CM_AREAS.find(a=>a.id===selArea)?.label}</span> is now open for applications. Eligible residents can apply before <span className="font-bold">{term.applyDeadline}</span>. Top 4 by activity score will be shortlisted for community voting.
            </p>
            <div className="flex gap-2 mt-2 flex-wrap">
              <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.marigoldL,color:"#B87A00"}}>Applications: {term.applicantsCount}/4</span>
              <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.coralL,color:C.coral}}>Deadline: {term.applyDeadline}</span>
            </div>
          </div>
        </div>
      )}

{/* ── CURRENT ADMIN + TERM CARD ── */}
      {manager && (
        <div className="rounded-2xl overflow-hidden" style={{background:"#fff",border:`1.5px solid ${C.purple}22`}}>
          <div className="px-4 py-2 flex items-center gap-2" style={{background:`linear-gradient(90deg,${C.purple},${C.purpleL})`}}>
            <span className="text-white text-xs font-black">👑 CURRENT COMMUNITY ADMIN · 6-MONTH TERM</span>
          </div>
          <div className="px-4 pt-3 pb-1 flex items-center gap-3">
            <div className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-black text-lg flex-shrink-0"
              style={{background:manager.color}}>{manager.avatar}</div>
            <div className="flex-1">
              <div className="font-black text-sm" style={{color:C.text}}>{manager.name}</div>
              <div className="text-xs" style={{color:C.muted}}>{manager.apt}</div>
              <div className="flex gap-2 mt-1.5 flex-wrap">
                <span className="text-xs font-bold px-2 py-0.5 rounded-full" style={{background:C.purpleFg,color:C.purple}}>{term.termStart} – {term.termEnd}</span>
                <span className="text-xs font-bold px-2 py-0.5 rounded-full" style={{background:C.mintL,color:C.mint}}>✅ Verified</span>
              </div>
            </div>
          </div>
          {/* Term progress bar */}
          {phase==="stable" && term.totalDays && (
            <div className="px-4 pb-3">
              <div className="flex items-center justify-between text-xs mb-1.5">
                <span style={{color:C.muted}}>Term Progress</span>
                <span style={{fontWeight:700,color:C.purple}}>{term.daysLeft} days remaining</span>
              </div>
              <div className="rounded-full h-3" style={{background:C.border,position:"relative"}}>
                <div className="h-3 rounded-full" style={{width:`${Math.min(100,(term.daysElapsed/term.totalDays)*100)}%`,background:`linear-gradient(90deg,${C.purple},${C.mint})`}}/>
              </div>
              <div className="flex justify-between text-xs mt-1" style={{color:C.muted}}>
                <span>{term.termStart}</span>
                <span>Next election opens: <span style={{fontWeight:700,color:C.marigold}}>{term.nextElectionOpen}</span></span>
                <span>{term.termEnd}</span>
              </div>
            </div>
          )}
          {/* Pre-election warning */}
          {phase==="pre_election" && (
            <div className="mx-4 mb-3 rounded-xl px-3 py-2" style={{background:C.marigoldL,border:`1.5px solid ${C.marigold}44`}}>
              <div className="text-xs font-black" style={{color:"#B87A00"}}>⚠️ Term ending soon — Election notifications sent to all members</div>
              <div className="text-xs mt-0.5" style={{color:C.muted}}>Applications are now open. Current admin finishes on {term.termEnd}.</div>
            </div>
          )}
          {/* Contact button */}
          <div className="px-4 pb-3">
            <button className="w-full py-2 rounded-xl text-sm font-bold transition-all active:scale-95"
              style={{background:C.purpleFg,color:C.purple,border:`1.5px solid ${C.purple}22`}}>
              📞 Contact {manager.name.split(" ")[0]}
            </button>
          </div>
        </div>
      )}

{/* No admin state */}
      {!manager && phase!=="voting" && (
        <div className="rounded-2xl px-4 py-4 flex items-center gap-3" style={{background:C.marigoldL,border:`1.5px solid ${C.marigold}44`}}>
          <span className="text-2xl">🏛</span>
          <div>
            <div className="font-black text-sm" style={{color:C.text}}>No Community Admin yet</div>
            <div className="text-xs mt-0.5" style={{color:C.muted}}>{term.note||"Apply to start the first election for this area!"}</div>
          </div>
        </div>
      )}

{/* ── VOTING PHASE: Shortlist banner ── */}
      {phase==="voting" && (
        <div className="rounded-2xl overflow-hidden" style={{border:`1.5px solid ${C.coral}44`}}>
          <div className="px-4 py-2 flex items-center justify-between" style={{background:`linear-gradient(90deg,${C.coral},#FF9AA5)`}}>
            <span className="text-white font-black text-xs">🗳 VOTING IN PROGRESS</span>
            <span className="text-white text-xs font-bold">{term.daysLeftVoting} days left</span>
          </div>
          {/* Top-4 selection explanation */}
          <div className="px-4 py-3" style={{background:"#FFF8F9"}}>
            <div className="text-xs font-black mb-2" style={{color:C.text}}>How candidates were shortlisted</div>
            <div className="text-xs mb-3 leading-relaxed" style={{color:C.muted}}>
              <span className="font-bold">{term.totalApplicants} residents applied.</span> Top {term.shortlistedTo} by <span className="font-bold" style={{color:C.purple}}>activity score</span> (events × 3 + posts) were shortlisted for voting.
            </div>
            {/* Applicant pool */}
            <div className="space-y-1.5">
              {EP2_POOL.map((p,i)=>(
                <div key={i} className="flex items-center gap-2 px-2 py-1.5 rounded-xl"
                  style={{background:p.shortlisted?"#fff":C.surface,border:`1px solid ${p.shortlisted?C.mint+"44":C.border}`}}>
                  <span className="text-xs w-5 text-center">{p.shortlisted?"✅":"❌"}</span>
                  <span className="text-xs font-bold flex-1" style={{color:p.shortlisted?C.text:C.muted}}>{p.name}</span>
                  <span className="text-xs" style={{color:C.muted}}>{p.eventsOrg}ev+{p.posts}p</span>
                  <span className="text-xs font-black px-1.5 py-0.5 rounded-full"
                    style={{background:p.shortlisted?C.mintL:C.surface,color:p.shortlisted?C.mint:C.muted}}>
                    {p.score}pts
                  </span>
                  {p.shortlisted&&<span className="text-xs font-black" style={{color:C.mint}}>#{i+1}</span>}
                </div>
              ))}
            </div>
            <div className="mt-2 text-xs px-2 py-1.5 rounded-xl font-medium" style={{background:C.purpleFg,color:C.purple}}>
              Score = (Events organised × 3) + Community posts
            </div>
          </div>
          <div className="px-4 py-2 flex items-center justify-between" style={{background:"#fff",borderTop:`1px solid ${C.border}`}}>
            <span className="text-xs font-bold" style={{color:C.muted}}>Voting period: {term.votingStart} → {term.votingEnd}</span>
            <span className="text-xs font-black" style={{color:C.coral}}>{totalVotes} votes cast</span>
          </div>
        </div>
      )}

{/* ── CANDIDATES / VOTING CARDS ── */}
      {phase==="voting" && candidates.length>0 && (
        <div>
          <div className="flex items-center justify-between mb-3">
            <div className="font-black text-sm" style={{color:C.text}}>Shortlisted Candidates ({candidates.length}/4)</div>
            {voted&&<div className="text-xs font-bold px-2 py-0.5 rounded-full" style={{background:C.mintL,color:C.mint}}>✅ You voted</div>}
          </div>
          <div className="space-y-3">
            {candidates.map((c,i)=>{
              const myVote=voted===c.id;
              const vcount=c.votes+(myVote?1:0);
              const pct=totalVotes>0?Math.round(vcount/totalVotes*100):0;
              const rank=[...candidates].sort((a,b)=>b.votes-a.votes).findIndex(x=>x.id===c.id);
              const rankColors=[C.marigold,C.mint,C.purple,C.muted];
              return(
                <div key={c.id} className="rounded-2xl overflow-hidden"
                  style={{background:"#fff",border:`1.5px solid ${myVote?C.mint:C.border}`,boxShadow:myVote?`0 0 0 3px ${C.mint}22`:undefined}}>
                  <div className="h-1" style={{background:rankColors[rank]}}/>
                  <div className="px-4 pt-3 pb-3">
                    <div className="flex items-start gap-3">
                      <div className="relative flex-shrink-0">
                        <div className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-black"
                          style={{background:c.color}}>{c.avatar}</div>
                        {rank===0&&<span className="absolute -top-1 -right-1 text-sm">👑</span>}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="font-black text-sm" style={{color:C.text}}>{c.name}</div>
                        <div className="text-xs truncate" style={{color:C.muted}}>{c.apt}</div>
                        <div className="text-xs mt-0.5" style={{color:C.purple}}>{c.profession}</div>
                        <div className="flex gap-1.5 mt-1.5 flex-wrap">
                          <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.mintL,color:C.mint}}>✅ Verified</span>
                          <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.purpleFg,color:C.purple}}>📅 {c.eventsOrg} events</span>
                          <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.marigoldL,color:"#B87A00"}}>💬 {c.posts} posts</span>
                          <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.surface,color:C.muted}}>🏆 {calcScore(c.eventsOrg,c.posts)}pts</span>
                        </div>
                      </div>
                    </div>
                    <p className="text-xs mt-2 leading-relaxed px-1" style={{color:C.muted}}>"{c.statement}"</p>
                    <div className="mt-3">
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-xs font-bold" style={{color:C.muted}}>{pct}% · {vcount} votes</span>
                        {rank===0&&<span className="text-xs font-black" style={{color:C.marigold}}>🏆 Leading</span>}
                      </div>
                      <div className="rounded-full h-2 mb-3" style={{background:C.border}}>
                        <div className="h-2 rounded-full transition-all duration-700"
                          style={{width:`${pct}%`,background:myVote?C.mint:c.color}}/>
                      </div>
                      {!voted&&meInArea?(
                        <button onClick={()=>doVote(c.id)} className="w-full py-2 rounded-xl font-black text-sm transition-all active:scale-95"
                          style={{background:voteAnim===c.id?C.mint:C.purple,color:"#fff"}}>
                          {voteAnim===c.id?"✅ Voted!":"🗳 Vote for "+c.name.split(" ")[0]}
                        </button>
                      ):myVote?(
                        <div className="w-full py-2 rounded-xl font-black text-sm text-center" style={{background:C.mintL,color:C.mint}}>✅ You voted for {c.name.split(" ")[0]}</div>
                      ):voted?(
                        <div className="w-full py-2 rounded-xl text-sm text-center font-medium" style={{background:C.surface,color:C.muted}}>Vote already cast</div>
                      ):(
                        <div className="w-full py-2 rounded-xl text-xs text-center font-medium" style={{background:C.surface,color:C.muted}}>Only {CM_AREAS.find(a=>a.id===selArea)?.label} residents can vote</div>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

{/* ── APPLY SECTION (pre_election or no_admin) ── */}
      {(phase==="pre_election"||phase==="no_admin") && meInArea && (
        <div className="rounded-2xl overflow-hidden" style={{border:`1.5px solid ${C.purple}33`}}>
          <div className="px-4 py-3" style={{background:C.purpleFg}}>
            <div className="font-black text-sm" style={{color:C.purple}}>✍️ Apply for Community Admin</div>
            <div className="text-xs mt-0.5" style={{color:C.muted}}>6-month term · Up to 4 shortlisted by activity · Area residents elect</div>
          </div>
          <div className="px-4 py-3" style={{background:"#fff"}}>
            <div className="space-y-2 mb-3">
              {[
                [MY_STATS.verified,        "Verified Resident",                    "Government ID + address proof required"],
                [MY_STATS.eventsOrg>=5,    `5+ Events Organised (${MY_STATS.eventsOrg})`, "Min 5 community events organised"],
                [MY_STATS.posts>=10,       `Active Poster (${MY_STATS.posts} posts)`,       "Min 10 posts in community feed"],
                [candidates.length<4,      `Slot Available (${candidates.length}/4)`,        "Max 4 candidates shortlisted"],
              ].map(([ok,label,sub])=>(
                <div key={label} className="flex items-start gap-2.5">
                  <span className="text-sm mt-0.5 flex-shrink-0">{ok?"✅":"❌"}</span>
                  <div><div className="text-xs font-bold" style={{color:ok?C.text:C.muted}}>{label}</div>
                       <div className="text-xs" style={{color:C.muted}}>{sub}</div></div>
                </div>
              ))}
            </div>
            <button onClick={handleApplyClick}
              className="w-full py-2.5 rounded-xl font-black text-sm transition-all active:scale-95"
              style={{background:C.purple,color:"#fff",cursor:"pointer"}}>
              {meEligible ? "Apply to Stand for Election →" : "Check My Eligibility →"}
            </button>
          </div>
        </div>
      )}

{/* Stable phase — next election info */}
      {phase==="stable" && (
        <div className="rounded-2xl px-4 py-3" style={{background:C.surface,border:`1.5px solid ${C.border}`}}>
          <div className="font-black text-xs mb-1" style={{color:C.muted}}>NEXT ELECTION</div>
          <div className="text-sm" style={{color:C.text}}>Applications will open <span className="font-black" style={{color:C.marigold}}>{term.nextElectionOpen}</span></div>
          <div className="text-xs mt-0.5" style={{color:C.muted}}>All members will be notified 1 month before the election. Eligible residents can then apply to stand.</div>
        </div>
      )}

<div className="h-4"/>
    </div>
  );
}

// ─── CM Apply Screen ─────────────────────────────────────────────────────────
function CMApplyScreen({step, setStep, form, setForm, onDone, onBack, area}){
  const set=(k,v)=>setForm(f=>({...f,[k]:v}));
  const STEPS=["Eligibility","Your Details","Submit"];
  return(
    <div className="px-4 py-4">
      {/* Back */}
      <button onClick={onBack} className="flex items-center gap-1 text-sm font-bold mb-4" style={{color:C.purple}}>
        ← Back to Elections
      </button>
      <h2 className="text-lg font-black mb-1" style={{color:C.text}}>Apply as Community Manager</h2>
      <p className="text-xs mb-4" style={{color:C.muted}}>Area: <span className="font-bold" style={{color:C.purple}}>{area?.label}</span></p>

{/* Step dots */}
      <div className="flex items-center gap-2 mb-6">
        {STEPS.map((s,i)=>(
          <div key={s} className="flex items-center gap-2">
            <div className="flex flex-col items-center">
              <div className="w-7 h-7 rounded-full flex items-center justify-center font-black text-xs"
                style={{background:i+1<=step?C.purple:"#E5E5E5",color:i+1<=step?"#fff":C.muted}}>
                {i+1<step?"✓":i+1}
              </div>
              <div className="text-xs mt-1 font-semibold" style={{color:i+1===step?C.purple:C.muted}}>{s}</div>
            </div>
            {i<STEPS.length-1&&<div className="w-10 h-0.5 mb-4" style={{background:i+1<step?C.purple:C.border}}/>}
          </div>
        ))}
      </div>

{step===1&&(
        <div className="space-y-3">
          <div className="rounded-2xl p-4" style={{background:"#fff",border:`1.5px solid ${C.border}`}}>
            <div className="font-black text-sm mb-3" style={{color:C.text}}>Eligibility Requirements</div>
            {[
              ["✅","Verified Resident","Government ID & address proof verified"],
              ["✅","5+ Events Organised","You've organised 7 community events"],
              ["✅","Active Community Member","24 posts in community feed"],
              ["✅","Voting Rights","You are a verified area resident"],
            ].map(([ic,t,s])=>(
              <div key={t} className="flex items-start gap-3 mb-3">
                <span className="text-base flex-shrink-0">{ic}</span>
                <div>
                  <div className="text-sm font-bold" style={{color:C.text}}>{t}</div>
                  <div className="text-xs" style={{color:C.muted}}>{s}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="rounded-2xl p-3 text-xs" style={{background:C.purpleFg,color:C.purple}}>
            ⚠️ By applying, your name and details will be visible to all residents of {area?.label}.
            The community will vote within the election period.
          </div>
          <button onClick={()=>setStep(2)} className="w-full py-3 rounded-xl font-black text-sm"
            style={{background:C.purple,color:"#fff"}}>I Understand · Continue →</button>
        </div>
      )}

{step===2&&(
        <div className="space-y-4">
          {/* Photo upload */}
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>📸 Your Photo</label>
            <div className="rounded-2xl border-2 border-dashed flex flex-col items-center justify-center py-8 cursor-pointer"
              style={{borderColor:form.photo?C.mint:C.border,background:form.photo?C.mintL:C.surface}}
              onClick={()=>set("photo","uploaded")}>
              {form.photo
                ?<><span className="text-3xl">✅</span><span className="text-xs font-bold mt-1" style={{color:C.mint}}>Photo uploaded</span></>
                :<><span className="text-3xl">📷</span><span className="text-xs font-bold mt-1" style={{color:C.muted}}>Tap to upload a clear face photo</span></>
              }
            </div>
          </div>
          {/* Address proof */}
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>📄 Recent Address Proof</label>
            <div className="rounded-2xl border-2 border-dashed flex flex-col items-center justify-center py-6 cursor-pointer"
              style={{borderColor:form.proof?C.mint:C.border,background:form.proof?C.mintL:C.surface}}
              onClick={()=>set("proof","uploaded")}>
              {form.proof
                ?<><span className="text-3xl">✅</span><span className="text-xs font-bold mt-1" style={{color:C.mint}}>Document uploaded</span></>
                :<><span className="text-3xl">🗂</span><span className="text-xs font-bold mt-1" style={{color:C.muted}}>Electricity bill / Bank statement (≤3 months)</span></>
              }
            </div>
          </div>
          {/* Profession */}
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>💼 Profession / Background</label>
            <input value={form.profession} onChange={e=>set("profession",e.target.value)}
              placeholder="e.g. Software Engineer at Wipro, EC Phase 2"
              className="w-full rounded-xl px-4 py-3 text-sm focus:outline-none"
              style={{border:`2px solid ${form.profession?C.mint:C.border}`,background:"#fff",color:C.text}}/>
          </div>
          {/* Statement */}
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>🗣 Your Statement <span style={{color:C.muted,fontWeight:400}}>(max 200 chars)</span></label>
            <textarea value={form.statement} onChange={e=>set("statement",e.target.value.slice(0,200))}
              placeholder="Why do you want to be Community Manager? What will you do for the area?"
              rows={3}
              className="w-full rounded-xl px-4 py-3 text-sm focus:outline-none resize-none"
              style={{border:`2px solid ${form.statement?C.mint:C.border}`,background:"#fff",color:C.text}}/>
            <div className="text-xs text-right mt-0.5" style={{color:C.muted}}>{form.statement.length}/200</div>
          </div>
          <div className="flex gap-3">
            <button onClick={()=>setStep(1)} className="flex-1 py-3 rounded-xl font-bold text-sm"
              style={{background:C.surface,color:C.muted,border:`1.5px solid ${C.border}`}}>← Back</button>
            <button onClick={()=>{if(form.photo&&form.proof&&form.profession&&form.statement)setStep(3);}}
              className="flex-1 py-3 rounded-xl font-black text-sm"
              style={{background:form.photo&&form.proof&&form.profession&&form.statement?C.purple:C.border,
                      color:form.photo&&form.proof&&form.profession&&form.statement?"#fff":C.muted}}>
              Review →
            </button>
          </div>
        </div>
      )}

{step===3&&(
        <div className="space-y-3">
          <div className="rounded-2xl overflow-hidden" style={{background:"#fff",border:`1.5px solid ${C.border}`}}>
            <div className="px-4 py-2 font-black text-xs" style={{background:C.purpleFg,color:C.purple}}>Review Your Application</div>
            {[["📸 Photo","Uploaded ✅"],["📄 Address Proof","Uploaded ✅"],["💼 Profession",form.profession],["🗣 Statement",form.statement]].map(([l,v])=>(
              <div key={l} className="px-4 py-2.5" style={{borderBottom:`1px solid ${C.border}`}}>
                <div className="text-xs font-bold mb-0.5" style={{color:C.muted}}>{l}</div>
                <div className="text-sm" style={{color:C.text}}>{v}</div>
              </div>
            ))}
            <div className="px-4 py-2.5">
              <div className="text-xs font-bold mb-0.5" style={{color:C.muted}}>📍 Area</div>
              <div className="text-sm" style={{color:C.text}}>{area?.label}</div>
            </div>
          </div>
          <div className="rounded-2xl p-3 text-xs" style={{background:C.mintL,color:C.mint}}>
            ✅ Your application will be reviewed by the MyTown 360 team within 24 hours.
            Once approved, residents of {area?.label} will be able to vote for you.
          </div>
          <div className="flex gap-3">
            <button onClick={()=>setStep(2)} className="flex-1 py-3 rounded-xl font-bold text-sm"
              style={{background:C.surface,color:C.muted,border:`1.5px solid ${C.border}`}}>← Edit</button>
            <button onClick={onDone} className="flex-1 py-3 rounded-xl font-black text-sm"
              style={{background:C.mint,color:"#fff"}}>Submit Application 🎉</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── CM Success Screen ───────────────────────────────────────────────────────
function CMSuccessScreen({onBack}){
  return(
    <div className="px-4 py-12 flex flex-col items-center text-center">
      <div className="text-6xl mb-4">🎉</div>
      <h2 className="text-2xl font-black mb-2" style={{color:C.text}}>Application Submitted!</h2>
      <p className="text-sm mb-1" style={{color:C.muted}}>Your candidacy application has been received.</p>
      <p className="text-xs mb-6" style={{color:C.muted}}>Our team will review it within 24 hours. You'll get a notification once it's approved and residents can start voting for you.</p>
      <div className="w-full rounded-2xl p-4 mb-6 space-y-2" style={{background:C.purpleFg,border:`1.5px solid ${C.purple}22`}}>
        {[["📬","Notification","You'll be notified on approval"],["🗳","Voting Opens","Area residents can vote once approved"],["👑","Result","Candidate with most votes becomes manager"]].map(([ic,t,s])=>(
          <div key={t} className="flex items-center gap-3 text-left">
            <span className="text-xl">{ic}</span>
            <div><div className="text-sm font-bold" style={{color:C.purple}}>{t}</div><div className="text-xs" style={{color:C.muted}}>{s}</div></div>
          </div>
        ))}
      </div>
      <button onClick={onBack} className="w-full py-3 rounded-xl font-black text-sm"
        style={{background:C.purple,color:"#fff"}}>Back to Elections →</button>
    </div>
  );
}

// ─── Admin Directory Screen ──────────────────────────────────────────────────
function AdminDirectoryScreen({nav}){
  const [msgTarget,setMsgTarget]=useState(null);
  const [msgText,setMsgText]=useState("");
  const [sent,setSent]=useState(null);
  const sendMsg=()=>{ if(!msgText.trim())return; setSent(msgTarget); setMsgTarget(null); setMsgText(""); };
  return(
    <div className="px-4 py-4">
      <button onClick={()=>nav("messages")} className="flex items-center gap-1 text-sm font-bold mb-4" style={{color:C.purple}}>← Back</button>
      <h2 className="text-xl font-black mb-1" style={{color:C.text}}>Community Admins Directory</h2>
      <p className="text-xs mb-4" style={{color:C.muted}}>As a <span className="font-bold" style={{color:C.mint}}>verified resident</span>, you can contact any area's Community Admin for information and assistance.</p>

{/* Message compose modal */}
      {msgTarget&&(
        <div style={{position:"fixed",inset:0,zIndex:100,display:"flex",alignItems:"flex-end",justifyContent:"center",background:"rgba(26,16,51,0.55)",backdropFilter:"blur(4px)"}}>
          <div style={{width:"100%",maxWidth:430,background:"#fff",borderRadius:"24px 24px 0 0",padding:"0 20px 36px"}}>
            <div style={{display:"flex",justifyContent:"center",paddingTop:12,paddingBottom:8}}><div style={{width:40,height:4,borderRadius:99,background:C.border}}/></div>
            <div style={{fontWeight:900,fontSize:15,color:C.text,marginBottom:4}}>Message {msgTarget.name}</div>
            <div style={{fontSize:12,color:C.muted,marginBottom:12}}>{CM_AREAS.find(a=>a.id===msgTarget.area)?.label} · Community Admin</div>
            <PIITextarea value={msgText} onChange={setMsgText} placeholder={`Write your message to ${msgTarget.name.split(" ")[0]}…`} rows={4}/>
            <div style={{marginTop:12,display:"flex",gap:10}}>
              <button onClick={()=>{setMsgTarget(null);setMsgText("");}} style={{flex:1,padding:"11px",borderRadius:14,background:C.surface,color:C.muted,fontWeight:700,fontSize:13,border:`1.5px solid ${C.border}`,cursor:"pointer"}}>Cancel</button>
              <button onClick={sendMsg} style={{flex:1,padding:"11px",borderRadius:14,background:msgText.trim()?C.purple:C.border,color:msgText.trim()?"#fff":C.muted,fontWeight:900,fontSize:13,border:"none",cursor:"pointer"}}>Send Message ↑</button>
            </div>
          </div>
        </div>
      )}

{/* Sent success toast */}
      {sent&&(
        <div className="mb-4 px-4 py-3 rounded-2xl flex items-center gap-2" style={{background:C.mintL,border:`1.5px solid ${C.mint}44`}}>
          <span className="text-lg">✅</span>
          <div>
            <div className="font-bold text-sm" style={{color:C.mint}}>Message sent to {sent.name}</div>
            <div className="text-xs" style={{color:C.muted}}>They'll respond in your Messages tab</div>
          </div>
        </div>
      )}

<div className="space-y-3 pb-24">
        {CM_AREAS.map(area=>{
          const mgr=CURRENT_MANAGERS[area.id];
          const phase=ELECTION_PHASES[area.id];
          return(
            <div key={area.id} className="rounded-2xl overflow-hidden" style={{background:"#fff",border:`1.5px solid ${C.border}`}}>
              {/* Area header */}
              <div className="px-4 py-2 flex items-center justify-between" style={{background:C.surface,borderBottom:`1.5px solid ${C.border}`}}>
                <div className="font-black text-sm" style={{color:C.text}}>{area.label}</div>
                <span className="text-xs font-bold px-2 py-0.5 rounded-full"
                  style={{background:mgr?C.mintL:C.marigoldL, color:mgr?C.mint:"#B87A00"}}>
                  {mgr?"✅ Admin Active":"🏛 Vacant"}
                </span>
              </div>
              {mgr?(
                <div className="px-4 py-3">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-black flex-shrink-0"
                      style={{background:mgr.color}}>{mgr.avatar}</div>
                    <div className="flex-1">
                      <div className="font-black text-sm" style={{color:C.text}}>{mgr.name}</div>
                      <div className="text-xs" style={{color:C.muted}}>{mgr.apt}</div>
                      <div className="flex gap-1.5 mt-1 flex-wrap">
                        <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.mintL,color:C.mint}}>✅ Verified Admin</span>
                        <span className="text-xs px-2 py-0.5 rounded-full font-bold" style={{background:C.purpleFg,color:C.purple}}>📅 {mgr.events} events</span>
                      </div>
                    </div>
                  </div>
                  <button onClick={()=>setMsgTarget({...mgr,area:area.id})}
                    className="w-full py-2.5 rounded-xl font-black text-sm transition-all active:scale-95"
                    style={{background:C.purple,color:"#fff"}}>
                    📩 Send Message to {mgr.name.split(" ")[0]}
                  </button>
                </div>
              ):(
                <div className="px-4 py-4 text-center">
                  <div className="text-2xl mb-1">🏛</div>
                  <div className="text-sm font-bold" style={{color:C.muted}}>No admin elected yet</div>
                  <div className="text-xs mt-0.5" style={{color:C.muted}}>
                    {phase==="voting"?"Election is in progress — results coming soon":
                     phase==="pre_election"?"Election nominations are open":
                     "Election will open soon"}
                  </div>
                  <button onClick={()=>nav("community")} className="mt-3 px-4 py-1.5 rounded-xl text-xs font-bold"
                    style={{background:C.purpleFg,color:C.purple}}>View Election →</button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Event Create Screen ──────────────────────────────────────────────────────
function EventCreateScreen({onBack}){
  const [step,setStep]=useState(1);
  const [form,setForm]=useState({title:"",desc:"",date:"",time:"",category:"",location:"",useGPS:false,photos:[],invitees:[]});
  const [blocked,setBlocked]=useState(false);
  const [done,setDone]=useState(false);
  const set=(k,v)=>setForm(f=>({...f,[k]:v}));
  const CATEGORIES=["🎉 Social","📚 Education","🏃 Sports & Fitness","🎨 Art & Culture","🌿 Environment","🍽 Food & Dining","👶 Kids & Family","🛡 Safety"];
  const STEPS=["Details","Location","Invite","Photos"];

const handleDescChange=(v)=>{
    set("desc",v);
    if(checkViolation(v)) setBlocked(true); else setBlocked(false);
  };

if(done) return(
    <div className="px-4 py-12 flex flex-col items-center text-center">
      <div className="text-6xl mb-4">🎉</div>
      <h2 className="text-2xl font-black mb-2" style={{color:C.text}}>Event Created!</h2>
      <p className="text-sm mb-6" style={{color:C.muted}}>Your event has been posted to the community. Invited members will be notified.</p>
      <button onClick={onBack} className="w-full max-w-xs py-3 rounded-xl font-black text-sm" style={{background:C.purple,color:"#fff"}}>Back to Events →</button>
    </div>
  );

return(
    <div className="px-4 py-4">
      <button onClick={onBack} className="flex items-center gap-1 text-sm font-bold mb-4" style={{color:C.purple}}>← Cancel</button>
      <h2 className="text-lg font-black mb-1" style={{color:C.text}}>Host a Community Event</h2>

{/* Step indicators */}
      <div className="flex items-center gap-1.5 mb-5">
        {STEPS.map((s,i)=>(
          <div key={s} className="flex items-center gap-1.5">
            <div className="flex flex-col items-center">
              <div className="w-7 h-7 rounded-full flex items-center justify-center font-black text-xs"
                style={{background:i+1<=step?C.purple:"#E5E5E5",color:i+1<=step?"#fff":C.muted}}>
                {i+1<step?"✓":i+1}
              </div>
              <div className="text-xs mt-0.5 font-semibold" style={{color:i+1===step?C.purple:C.muted,fontSize:9}}>{s}</div>
            </div>
            {i<STEPS.length-1&&<div className="w-6 h-0.5 mb-3" style={{background:i+1<step?C.purple:C.border}}/>}
          </div>
        ))}
      </div>

{/* Step 1: Event Details */}
      {step===1&&(
        <div className="space-y-4">
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>Event Title *</label>
            <PIIInput value={form.title} onChange={v=>set("title",v)} placeholder="e.g. Weekend Yoga at Prestige Garden"/>
          </div>
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>Description</label>
            {blocked&&<ContentBlockedBanner context="event description" onEdit={()=>setBlocked(false)}/>}
            {!blocked&&<PIITextarea value={form.desc} onChange={handleDescChange} placeholder="Tell the community about this event…" rows={3}/>}
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>📅 Date *</label>
              <input type="date" value={form.date} onChange={e=>set("date",e.target.value)}
                className="w-full rounded-xl px-3 py-2.5 text-sm focus:outline-none"
                style={{border:`2px solid ${C.border}`,background:"#fff",color:C.text}}/>
            </div>
            <div>
              <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>⏰ Time *</label>
              <input type="time" value={form.time} onChange={e=>set("time",e.target.value)}
                className="w-full rounded-xl px-3 py-2.5 text-sm focus:outline-none"
                style={{border:`2px solid ${C.border}`,background:"#fff",color:C.text}}/>
            </div>
          </div>
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>Category *</label>
            <div className="grid grid-cols-2 gap-2">
              {CATEGORIES.map(cat=>(
                <button key={cat} onClick={()=>set("category",cat)}
                  className="py-2 px-3 rounded-xl text-xs font-bold border-2 text-left transition-all"
                  style={form.category===cat?{borderColor:C.purple,background:C.purpleFg,color:C.purple}:{borderColor:C.border,color:C.muted,background:"#fff"}}>
                  {cat}
                </button>
              ))}
            </div>
          </div>
          <button onClick={()=>{if(form.title&&form.date&&form.category&&!blocked)setStep(2);}}
            className="w-full py-3 rounded-xl font-black text-sm transition-all"
            style={{background:form.title&&form.date&&form.category&&!blocked?C.purple:C.border, color:form.title&&form.date&&form.category&&!blocked?"#fff":C.muted}}>
            Next: Location →
          </button>
        </div>
      )}

{/* Step 2: Location */}
      {step===2&&(
        <div className="space-y-4">
          <div>
            <label className="text-sm font-black block mb-1.5" style={{color:C.text}}>📍 Event Location *</label>
            <div className="flex items-center rounded-xl px-3 py-2.5 gap-2"
              style={{background:"#fff",border:`2px solid ${form.useGPS?C.mint:C.border}`}}>
              <span className="text-base">📍</span>
              <input className="flex-1 text-sm font-medium bg-transparent focus:outline-none" style={{color:C.text}}
                placeholder="e.g. Prestige Sunrise Park Clubhouse, EC Phase 1"
                value={form.location} onChange={e=>set("location",e.target.value)} disabled={form.useGPS}/>
            </div>
          </div>
          <button onClick={()=>{set("useGPS",!form.useGPS);if(!form.useGPS)set("location","📍 Electronic City Phase 2 (12.8456°N, 77.6603°E)");else set("location","");}}
            className="w-full py-2.5 rounded-xl font-bold text-sm flex items-center justify-center gap-2 transition-all"
            style={{background:form.useGPS?C.mintL:C.surface,border:`1.5px solid ${form.useGPS?C.mint:C.border}`,color:form.useGPS?C.mint:C.muted}}>
            {form.useGPS?"✅ Using your current location":"📡 Use My Current GPS Location"}
          </button>
          {form.useGPS&&(
            <div className="rounded-xl px-4 py-3" style={{background:C.mintL,border:`1.5px solid ${C.mint}44`}}>
              <div className="text-xs font-bold" style={{color:C.mint}}>📍 Location Shared</div>
              <div className="text-xs mt-0.5" style={{color:C.muted}}>EC Phase 2 · 12.8456°N, 77.6603°E · Accurate to 10m</div>
            </div>
          )}
          {/* Mini map preview */}
          <div className="rounded-2xl overflow-hidden" style={{border:`1.5px solid ${C.border}`,height:140,background:"#E8E3F5",position:"relative"}}>
            <svg width="100%" height="100%">
              <rect width="100%" height="100%" fill="#E8E3F5"/>
              <rect x="20%" y="30%" width="60%" height="40%" rx="8" fill="#D4C8E8"/>
              <circle cx="50%" cy="50%" r="8" fill={C.coral}/>
              <circle cx="50%" cy="50%" r="20" fill={C.coral} fillOpacity="0.2"/>
            </svg>
            <div className="absolute bottom-2 left-2 right-2 rounded-xl px-3 py-1.5 text-xs font-semibold" style={{background:"rgba(255,255,255,0.9)",color:C.text}}>
              📍 {form.location||"Enter location above"}
            </div>
          </div>
          <div className="flex gap-3">
            <button onClick={()=>setStep(1)} className="flex-1 py-3 rounded-xl font-bold text-sm" style={{background:C.surface,color:C.muted,border:`1.5px solid ${C.border}`}}>← Back</button>
            <button onClick={()=>{if(form.location)setStep(3);}} className="flex-1 py-3 rounded-xl font-black text-sm"
              style={{background:form.location?C.purple:C.border,color:form.location?"#fff":C.muted}}>Next: Invite →</button>
          </div>
        </div>
      )}

{/* Step 3: Invite Members */}
      {step===3&&(
        <div className="space-y-3">
          <div className="text-xs px-3 py-2 rounded-xl font-medium" style={{background:C.purpleFg,color:C.purple}}>
            {form.invitees.length===0?"Tap members to invite them to this event":
             `${form.invitees.length} member${form.invitees.length>1?"s":""} invited`}
          </div>
          <div className="space-y-2">
            {COMMUNITY_MEMBERS.map(m=>{
              const sel=form.invitees.includes(m.id);
              return(
                <button key={m.id} onClick={()=>set("invitees",sel?form.invitees.filter(x=>x!==m.id):[...form.invitees,m.id])}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-2xl text-left transition-all"
                  style={{background:sel?C.purpleFg:"#fff",border:`1.5px solid ${sel?C.purple:C.border}`}}>
                  <div className="w-10 h-10 rounded-xl flex items-center justify-center text-white font-black text-xs flex-shrink-0"
                    style={{background:m.avC}}>{m.av}</div>
                  <div className="flex-1">
                    <div className="font-bold text-sm" style={{color:sel?C.purple:C.text}}>{m.name}</div>
                    <div className="text-xs" style={{color:C.muted}}>{m.apt}</div>
                  </div>
                  <div className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
                    style={{background:sel?C.purple:C.surface,border:`1.5px solid ${sel?C.purple:C.border}`}}>
                    {sel&&<span className="text-white text-xs font-black">✓</span>}
                  </div>
                </button>
              );
            })}
          </div>
          <div className="flex gap-3">
            <button onClick={()=>setStep(2)} className="flex-1 py-3 rounded-xl font-bold text-sm" style={{background:C.surface,color:C.muted,border:`1.5px solid ${C.border}`}}>← Back</button>
            <button onClick={()=>setStep(4)} className="flex-1 py-3 rounded-xl font-black text-sm" style={{background:C.purple,color:"#fff"}}>
              {form.invitees.length>0?`Next: Photos (${form.invitees.length} invited) →`:"Next: Photos →"}
            </button>
          </div>
        </div>
      )}

{/* Step 4: Photos */}
      {step===4&&(
        <div className="space-y-4">
          <div className="text-xs px-3 py-2 rounded-xl font-medium" style={{background:C.purpleFg,color:C.purple}}>
            📸 Add photos to make your event more engaging. All uploads are screened for inappropriate content.
          </div>
          {/* Upload area */}
          <button onClick={()=>set("photos",[...form.photos,`photo_${form.photos.length+1}`])}
            className="w-full py-8 rounded-2xl border-2 border-dashed flex flex-col items-center justify-center gap-2 transition-all"
            style={{borderColor:form.photos.length>0?C.mint:C.border,background:C.surface}}>
            <span className="text-4xl">{form.photos.length>0?"📸":"🖼"}</span>
            <span className="text-sm font-bold" style={{color:C.muted}}>
              {form.photos.length>0?`${form.photos.length} photo${form.photos.length>1?"s":""} added · Tap to add more`:"Tap to upload event photos"}
            </span>
          </button>
          {form.photos.length>0&&(
            <div className="grid grid-cols-3 gap-2">
              {form.photos.map((_,i)=>(
                <div key={i} className="rounded-xl aspect-square flex items-center justify-center text-3xl"
                  style={{background:C.purpleFg}}>📷</div>
              ))}
            </div>
          )}
          {/* Content policy notice */}
          <div className="rounded-xl px-3 py-2.5 text-xs" style={{background:"#FFF8E7",border:`1.5px solid ${C.marigold}55`}}>
            <span className="font-bold" style={{color:"#B87A00"}}>🛡 Content Policy: </span>
            <span style={{color:C.muted}}>All photos are automatically scanned for sexual, violent or inappropriate content and will be blocked if they violate our Community Guidelines.</span>
          </div>
          {/* Summary */}
          <div className="rounded-2xl overflow-hidden" style={{background:"#fff",border:`1.5px solid ${C.border}`}}>
            <div className="px-4 py-2 font-black text-xs" style={{background:C.purpleFg,color:C.purple}}>Event Summary</div>
            {[["📌",form.title],["📅",`${form.date} at ${form.time}`],["📍",form.location],[`${form.category.split(" ")[0]}`,form.category.slice(3)],[`👥`,`${form.invitees.length} members invited`],[`📸`,`${form.photos.length} photos`]].map(([ic,val])=>(
              <div key={ic} className="px-4 py-2.5 flex items-center gap-2" style={{borderBottom:`1px solid ${C.border}`}}>
                <span className="text-sm">{ic}</span><span className="text-sm" style={{color:C.text}}>{val}</span>
              </div>
            ))}
          </div>
          <div className="flex gap-3">
            <button onClick={()=>setStep(3)} className="flex-1 py-3 rounded-xl font-bold text-sm" style={{background:C.surface,color:C.muted,border:`1.5px solid ${C.border}`}}>← Back</button>
            <button onClick={()=>setDone(true)} className="flex-1 py-3 rounded-xl font-black text-sm" style={{background:C.mint,color:"#fff"}}>🎉 Post Event</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── SCREEN: Helplines ────────────────────────────────────────────────────────
function HelplineScreen({nav}){
  const cats = [...new Set(HELPLINES.map(h=>h.cat))];
  const [expandedCat, setExpandedCat] = useState(null);

const catMeta = {
    "Emergency":  { icon:"🚨", color:"#DC2626", bg:"#FEF2F2" },
    "EC Local":   { icon:"🏘", color:"#1D4ED8", bg:"#EFF6FF" },
    "Utilities":  { icon:"⚡", color:"#D97706", bg:"#FFFBEB" },
    "Transport":  { icon:"🚌", color:"#0369A1", bg:"#F0F9FF" },
    "Medical":    { icon:"🏥", color:"#059669", bg:"#F0FDF4" },
    "Police":     { icon:"👮", color:"#1E40AF", bg:"#EFF6FF" },
  };

// Emergency numbers always shown at top
  const emergencyNums = HELPLINES.filter(h=>h.cat==="Emergency");

return(
    <div style={{minHeight:"100vh",background:C.surface,paddingBottom:80}}>
      {/* Back header */}
      <div style={{display:"flex",alignItems:"center",gap:10,padding:"16px 16px 12px",background:"#fff",borderBottom:`1.5px solid ${C.border}`,position:"sticky",top:0,zIndex:10}}>
        <button onClick={()=>nav("feed")}
          style={{width:36,height:36,borderRadius:10,background:C.purpleFg,border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:C.purple,fontSize:18,fontWeight:900,flexShrink:0}}>
          ‹
        </button>
        <div>
          <div style={{fontWeight:900,fontSize:16,color:C.text}}>📞 Helpline Numbers</div>
          <div style={{fontSize:11,color:C.muted}}>Electronic City · Bangalore</div>
        </div>
      </div>

<div style={{padding:"14px 14px 0"}}>
        {/* Emergency strip — always visible */}
        <div style={{borderRadius:16,background:"#FEF2F2",border:"1.5px solid #FCA5A5",padding:"12px 12px 6px",marginBottom:14}}>
          <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:10}}>
            <span style={{fontSize:16}}>🚨</span>
            <span style={{fontWeight:900,fontSize:13,color:"#DC2626",textTransform:"uppercase",letterSpacing:"0.08em"}}>Emergency Numbers</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:7}}>
            {emergencyNums.map(h=>(
              <a key={h.phone} href={`tel:${h.phone}`}
                style={{display:"flex",alignItems:"center",gap:8,padding:"10px 10px",borderRadius:12,background:"#fff",border:"1.5px solid #FCA5A5",textDecoration:"none",cursor:"pointer"}}>
                <div style={{width:32,height:32,borderRadius:8,background:h.color,display:"flex",alignItems:"center",justifyContent:"center",fontSize:14,flexShrink:0}}>
                  {h.icon}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:11,fontWeight:700,color:"#1F2937",lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{h.name}</div>
                  <div style={{fontSize:13,fontWeight:900,color:h.color,letterSpacing:"0.03em"}}>{h.phone}</div>
                </div>
              </a>
            ))}
          </div>
        </div>

{/* Other category accordions */}
        {cats.filter(c=>c!=="Emergency").map(cat=>{
          const meta = catMeta[cat]||{icon:"📋",color:C.purple,bg:C.purpleFg};
          const items = HELPLINES.filter(h=>h.cat===cat);
          const isOpen = expandedCat===cat;
          return(
            <div key={cat} style={{borderRadius:14,background:"#fff",border:`1.5px solid ${C.border}`,marginBottom:10,overflow:"hidden"}}>
              {/* Category header */}
              <button onClick={()=>setExpandedCat(isOpen?null:cat)}
                style={{width:"100%",display:"flex",alignItems:"center",gap:10,padding:"13px 14px",background:isOpen?meta.bg:"#fff",border:"none",cursor:"pointer",textAlign:"left"}}>
                <div style={{width:36,height:36,borderRadius:10,background:meta.bg,border:`1.5px solid ${meta.color}33`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,flexShrink:0}}>
                  {meta.icon}
                </div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:800,fontSize:14,color:meta.color}}>{cat}</div>
                  <div style={{fontSize:11,color:C.muted}}>{items.length} contact{items.length>1?"s":""}</div>
                </div>
                <span style={{fontSize:16,color:C.muted,fontWeight:700,transform:isOpen?"rotate(90deg)":"none",transition:"transform 0.2s",flexShrink:0}}>›</span>
              </button>

{/* Expanded items */}
              {isOpen && (
                <div style={{borderTop:`1px solid ${C.border}`,padding:"10px 12px 12px",display:"flex",flexDirection:"column",gap:7}}>
                  {items.map(h=>(
                    <a key={h.phone} href={`tel:${h.phone}`}
                      style={{display:"flex",alignItems:"center",gap:10,padding:"10px 12px",borderRadius:12,background:meta.bg,border:`1.5px solid ${meta.color}33`,textDecoration:"none"}}>
                      <div style={{width:36,height:36,borderRadius:9,background:"#fff",border:`1.5px solid ${meta.color}44`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,flexShrink:0}}>
                        {h.icon}
                      </div>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:12,fontWeight:700,color:"#1F2937",marginBottom:1,lineHeight:1.2}}>{h.name}</div>
                        <div style={{fontSize:14,fontWeight:900,color:meta.color,letterSpacing:"0.03em"}}>{h.phone}</div>
                      </div>
                      <div style={{width:32,height:32,borderRadius:8,background:meta.color,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                        <span style={{fontSize:14}}>📞</span>
                      </div>
                    </a>
                  ))}
                </div>
              )}
            </div>
          );
        })}

{/* BMTC / KSRTC note */}
        <div style={{borderRadius:14,background:"#F0F9FF",border:"1.5px solid #BAE6FD",padding:"12px 14px",marginBottom:10}}>
          <div style={{fontWeight:800,fontSize:13,color:"#0369A1",marginBottom:6}}>🚌 Bus Routes serving Electronic City</div>
          <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
            {BUS_ROUTES.map(r=>(
              <span key={r} style={{padding:"4px 10px",borderRadius:99,background:"#fff",border:"1.5px solid #BAE6FD",fontSize:11,fontWeight:700,color:"#0369A1"}}>{r}</span>
            ))}
          </div>
        </div>

{/* Disclaimer */}
        <div style={{textAlign:"center",padding:"8px 0 4px"}}>
          <span style={{fontSize:11,color:C.muted}}>Tap any card to call directly · Numbers verified for EC Bangalore</span>
        </div>
      </div>
    </div>
  );
}

// ─── Admin Panel Screen ───────────────────────────────────────────────────────
function AdminPanelScreen({nav}){
  const TABS=[
    {id:"overview",   icon:"📊", label:"Overview"},
    {id:"otp",        icon:"🔑", label:"OTP"},
    {id:"email",      icon:"✉️",  label:"Email"},
    {id:"notif",      icon:"🔔", label:"Notifications"},
    {id:"integrations",icon:"🔌",label:"Integrations"},
    {id:"users",      icon:"👥", label:"Users"},
    {id:"reports",    icon:"🚩", label:"Reports"},
  ];
  const [activeTab,setActiveTab]=useState("overview");
  const [saved,setSaved]=useState(false);
  const [testResult,setTestResult]=useState("");

/* ── OTP state ── */
  const [otp,setOtp]=useState({
    smsProvider:"none", smsSenderId:"", smsApiKey:"", smsTemplateId:"",
    twilioSid:"", twilioFrom:"", emailOtpEnabled:false, emailProvider:"none", otpExpiryMinutes:10,
    testPhone:""
  });

/* ── Email state ── */
  const [email,setEmail]=useState({
    provider:"none", sendgridKey:"", fromEmail:"", fromName:"MyTown 360",
    smtpHost:"", smtpPort:587, smtpUser:"", smtpPass:"", smtpSecure:false,
    welcomeEmail:true, verifyEmail:true, postApproved:true, eventReminder:true, reportAlert:true,
    testEmail:""
  });

/* ── Notifications state ── */
  const [notif,setNotif]=useState({
    pushEnabled:false, fcmServerKey:"", fcmProjectId:"",
    smsAlertsEnabled:false, inAppEnabled:true,
    pushOnNewPost:true, pushOnReply:true, pushOnEvent:true, pushOnMessage:true, pushOnElection:true
  });

/* ── Integrations state ── */
  const [integrations,setIntegrations]=useState([
    {key:"google_maps",  label:"Google Maps",       category:"maps",      icon:"🗺️",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"razorpay",     label:"Razorpay",           category:"payments",  icon:"💳",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"cloudinary",   label:"Cloudinary",         category:"media",     icon:"☁️",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"aws_s3",       label:"AWS S3",             category:"media",     icon:"🪣",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"firebase_fcm", label:"Firebase FCM",       category:"push",      icon:"🔔",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"google_oauth", label:"Google OAuth",       category:"auth",      icon:"🔐",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"sentry",       label:"Sentry (Errors)",    category:"analytics", icon:"🐛",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"mixpanel",     label:"Mixpanel",           category:"analytics", icon:"📊",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"msg91",        label:"MSG91 (SMS OTP)",    category:"sms",       icon:"📱",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"twilio",       label:"Twilio (SMS/Voice)", category:"sms",       icon:"📞",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"sendgrid",     label:"SendGrid",           category:"email",     icon:"✉️",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
    {key:"whatsapp_biz", label:"WhatsApp Business",  category:"messaging", icon:"💬",  enabled:false, apiKey:"", apiSecret:"", webhookUrl:""},
  ]);
  const [expandedIntg,setExpandedIntg]=useState(null);

/* ── Mock users / reports ── */
  const [users]=useState([
    {id:"u2",name:"Ravi Kumar",    area:"EC Phase 1",apt:"Brigade Gateway",verified:false,isBanned:false,role:"resident",phone:"98765 43210",joined:"Jan 2025"},
    {id:"u3",name:"Priya Sharma",  area:"EC Phase 2",apt:"Prestige Tech Cloud",verified:true, isBanned:false,role:"resident",phone:"87654 32109",joined:"Feb 2025"},
    {id:"u4",name:"Arjun Nair",    area:"Electronic City",apt:"Sobha Dream Acres",verified:false,isBanned:true, role:"resident",phone:"76543 21098",joined:"Mar 2025"},
    {id:"u5",name:"Divya Menon",   area:"Hosa Road",apt:"Prestige Sunrise",verified:true, isBanned:false,role:"moderator",phone:"65432 10987",joined:"Dec 2024"},
    {id:"u6",name:"Mohammed Asif", area:"EC Phase 1",apt:"Mantri Lithos",verified:false,isBanned:false,role:"resident",phone:"54321 09876",joined:"Apr 2025"},
  ]);
  const [userSearch,setUserSearch]=useState("");
  const [userStates,setUserStates]=useState({});

const filteredUsers=users.filter(u=>u.name.toLowerCase().includes(userSearch.toLowerCase())||u.area.toLowerCase().includes(userSearch.toLowerCase()));

const [reports]=useState([
    {id:"r1",type:"post",  content:"Fake missing person post",    reporter:"Priya Sharma", date:"Today, 9:10 AM",  status:"pending", severity:"high"},
    {id:"r2",type:"user",  content:"Spamming multiple categories",reporter:"Ravi Kumar",   date:"Yesterday",       status:"pending", severity:"medium"},
    {id:"r3",type:"post",  content:"Inappropriate content in feed",reporter:"Divya Menon", date:"2 days ago",      status:"actioned",severity:"high"},
    {id:"r4",type:"listing",content:"Fake listing / scam",         reporter:"Arjun Nair",  date:"3 days ago",      status:"pending", severity:"medium"},
    {id:"r5",type:"post",  content:"Misinformation about COVID",   reporter:"Mohammed Asif",date:"1 week ago",     status:"dismissed",severity:"low"},
  ]);
  const [reportStates,setReportStates]=useState({});

const showSaved=()=>{setSaved(true);setTimeout(()=>setSaved(false),2000);};

/* ─── Styles ─── */
  const card={background:"#fff",borderRadius:14,padding:16,marginBottom:12,boxShadow:"0 1px 4px rgba(0,0,0,0.08)"};
  const label={display:"block",fontSize:12,fontWeight:700,color:"#555",marginBottom:4,marginTop:10};
  const input={width:"100%",padding:"9px 12px",borderRadius:8,border:"1.5px solid #E5E7EB",fontSize:14,outline:"none",boxSizing:"border-box",color:"#111"};
  const select={...input,background:"#fff"};
  const toggle=(val,onChg)=>(
    <div onClick={onChg} style={{width:44,height:24,borderRadius:12,background:val?"#7C3AED":"#CBD5E1",position:"relative",cursor:"pointer",transition:"background 0.2s",flexShrink:0}}>
      <div style={{position:"absolute",top:2,left:val?22:2,width:20,height:20,borderRadius:"50%",background:"#fff",boxShadow:"0 1px 3px rgba(0,0,0,0.2)",transition:"left 0.2s"}}/>
    </div>
  );
  const btn=(label,onClick,variant="primary")=>(
    <button onClick={onClick} style={{padding:"9px 18px",borderRadius:8,border:"none",cursor:"pointer",fontWeight:700,fontSize:13,
      background:variant==="primary"?C.purple:variant==="danger"?"#EF4444":variant==="success"?"#10B981":"#F3F4F6",
      color:variant==="ghost"?"#555":"#fff",marginRight:6,marginTop:8}}>
      {label}
    </button>
  );

/* ─── OVERVIEW TAB ─── */
  const statsData=[
    {label:"Total Users",     value:"2,847", icon:"👥", color:"#7C3AED",bg:"#EDE9FE"},
    {label:"Verified",        value:"1,203", icon:"✅", color:"#10B981",bg:"#D1FAE5"},
    {label:"Posts Today",     value:"48",    icon:"📝", color:"#0EA5E9",bg:"#E0F2FE"},
    {label:"Pending Reports", value:"4",     icon:"🚩", color:"#EF4444",bg:"#FEE2E2"},
    {label:"Active Businesses",value:"34",  icon:"🏪", color:"#F59E0B",bg:"#FEF3C7"},
    {label:"Events This Week",value:"12",   icon:"📅", color:"#8B5CF6",bg:"#EDE9FE"},
  ];

/* ─── RENDER ─── */
  return(
    <div style={{background:"#F0F2F5",minHeight:"100vh",paddingBottom:80}}>
      {/* Header */}
      <div style={{background:"#fff",padding:"12px 16px",display:"flex",alignItems:"center",gap:10,borderBottom:"1px solid #E5E7EB",position:"sticky",top:0,zIndex:20}}>
        <button onClick={()=>nav("feed")} style={{background:"none",border:"none",fontSize:20,cursor:"pointer",padding:"0 4px"}}>←</button>
        <div>
          <div style={{fontWeight:900,fontSize:16,color:C.purple}}>⚙️ Admin Panel</div>
          <div style={{fontSize:11,color:"#888"}}>MyTown 360 · Super Admin</div>
        </div>
        {saved&&<div style={{marginLeft:"auto",background:"#D1FAE5",color:"#065F46",padding:"4px 10px",borderRadius:20,fontSize:12,fontWeight:700}}>✅ Saved</div>}
      </div>

{/* Tab bar */}
      <div style={{display:"flex",overflowX:"auto",background:"#fff",borderBottom:"1px solid #E5E7EB",padding:"0 4px"}}>
        {TABS.map(t=>(
          <button key={t.id} onClick={()=>setActiveTab(t.id)} style={{
            flexShrink:0,padding:"10px 12px",border:"none",background:"none",cursor:"pointer",
            fontSize:12,fontWeight:700,
            color:activeTab===t.id?C.purple:"#888",
            borderBottom:activeTab===t.id?`2px solid ${C.purple}`:"2px solid transparent",
            whiteSpace:"nowrap"
          }}>
            {t.icon} {t.label}
          </button>
        ))}
      </div>

{/* ── OVERVIEW ── */}
        {activeTab==="overview"&&(
          <>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:12}}>
              {statsData.map(s=>(
                <div key={s.label} style={{...card,padding:14,marginBottom:0,display:"flex",alignItems:"center",gap:10}}>
                  <div style={{width:40,height:40,borderRadius:10,background:s.bg,display:"flex",alignItems:"center",justifyContent:"center",fontSize:18}}>{s.icon}</div>
                  <div>
                    <div style={{fontSize:20,fontWeight:900,color:s.color}}>{s.value}</div>
                    <div style={{fontSize:11,color:"#888",fontWeight:600}}>{s.label}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:10}}>⚡ Quick Actions</div>
              {[
                {icon:"🔑",label:"Configure OTP Provider",  sub:"SMS & Email OTP",  tab:"otp"},
                {icon:"✉️",label:"Setup Email Service",     sub:"SendGrid / SMTP",  tab:"email"},
                {icon:"🔔",label:"Push Notifications",      sub:"Firebase FCM",     tab:"notif"},
                {icon:"🔌",label:"Third-party Integrations",sub:"APIs & SDKs",      tab:"integrations"},
                {icon:"👥",label:"Manage Users",            sub:"Verify, ban, roles",tab:"users"},
                {icon:"🚩",label:"Review Reports",          sub:"4 pending",        tab:"reports"},
              ].map(q=>(
                <div key={q.tab} onClick={()=>setActiveTab(q.tab)} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 0",borderBottom:"1px solid #F3F4F6",cursor:"pointer"}}>
                  <div style={{width:36,height:36,borderRadius:9,background:C.purpleL,display:"flex",alignItems:"center",justifyContent:"center",fontSize:16}}>{q.icon}</div>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:700,fontSize:13,color:"#111"}}>{q.label}</div>
                    <div style={{fontSize:11,color:"#888"}}>{q.sub}</div>
                  </div>
                  <span style={{color:"#bbb",fontSize:16}}>›</span>
                </div>
              ))}
            </div>
          </>
        )}

{/* ── OTP TAB ── */}
        {activeTab==="otp"&&(
          <>
            <div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:4}}>📱 SMS OTP Provider</div>
              <div style={{fontSize:12,color:"#888",marginBottom:10}}>Used for phone verification during signup & login.</div>

<span style={label}>Provider</span>
              <select style={select} value={otp.smsProvider} onChange={e=>setOtp({...otp,smsProvider:e.target.value})}>
                <option value="none">— Not configured —</option>
                <option value="msg91">MSG91</option>
                <option value="twilio">Twilio</option>
                <option value="2factor">2Factor.in</option>
              </select>

{otp.smsProvider==="msg91"&&(<>
                <span style={label}>MSG91 Auth Key</span>
                <input style={input} type="password" placeholder="Enter MSG91 API key" value={otp.smsApiKey} onChange={e=>setOtp({...otp,smsApiKey:e.target.value})}/>
                <span style={label}>Sender ID</span>
                <input style={input} placeholder="e.g. MTWN36" value={otp.smsSenderId} onChange={e=>setOtp({...otp,smsSenderId:e.target.value})}/>
                <span style={label}>Flow / Template ID</span>
                <input style={input} placeholder="MSG91 flow ID" value={otp.smsTemplateId} onChange={e=>setOtp({...otp,smsTemplateId:e.target.value})}/>
              </>)}

{otp.smsProvider==="twilio"&&(<>
                <span style={label}>Account SID</span>
                <input style={input} type="password" placeholder="ACxxxxxxxxxx" value={otp.twilioSid} onChange={e=>setOtp({...otp,twilioSid:e.target.value})}/>
                <span style={label}>Auth Token</span>
                <input style={input} type="password" placeholder="Twilio auth token" value={otp.smsApiKey} onChange={e=>setOtp({...otp,smsApiKey:e.target.value})}/>
                <span style={label}>From Number</span>
                <input style={input} placeholder="+1 234 567 8900" value={otp.twilioFrom} onChange={e=>setOtp({...otp,twilioFrom:e.target.value})}/>
              </>)}

{otp.smsProvider==="2factor"&&(<>
                <span style={label}>2Factor API Key</span>
                <input style={input} type="password" placeholder="2Factor API key" value={otp.smsApiKey} onChange={e=>setOtp({...otp,smsApiKey:e.target.value})}/>
                <span style={label}>Template Name</span>
                <input style={input} placeholder="OTPTEMPLATE" value={otp.smsTemplateId} onChange={e=>setOtp({...otp,smsTemplateId:e.target.value})}/>
              </>)}

<span style={label}>OTP Expiry (minutes)</span>
              <input style={input} type="number" min={5} max={60} value={otp.otpExpiryMinutes} onChange={e=>setOtp({...otp,otpExpiryMinutes:+e.target.value})}/>
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:4}}>📧 Email OTP</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
                <span style={{fontSize:13,color:"#555"}}>Enable email OTP as fallback</span>
                {toggle(otp.emailOtpEnabled,()=>setOtp({...otp,emailOtpEnabled:!otp.emailOtpEnabled}))}
              </div>
              {otp.emailOtpEnabled&&(
                <>
                  <span style={label}>Email Provider for OTP</span>
                  <select style={select} value={otp.emailProvider} onChange={e=>setOtp({...otp,emailProvider:e.target.value})}>
                    <option value="none">— Select provider —</option>
                    <option value="sendgrid">SendGrid</option>
                    <option value="smtp">Custom SMTP</option>
                  </select>
                  <div style={{fontSize:12,color:"#888",marginTop:6}}>Configure provider details in the Email tab.</div>
                </>
              )}
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:8}}>🧪 Test OTP</div>
              <input style={input} placeholder="+91 98765 43210" value={otp.testPhone} onChange={e=>setOtp({...otp,testPhone:e.target.value})}/>
              {btn("Send Test OTP",()=>{setTestResult("✅ Test OTP sent! Check the phone.");setTimeout(()=>setTestResult(""),4000);},"primary")}
              {testResult&&<div style={{marginTop:8,fontSize:13,color:"#065F46",background:"#D1FAE5",padding:"8px 12px",borderRadius:8}}>{testResult}</div>}
            </div>

{btn("Save OTP Settings",showSaved)}
          </>
        )}

{/* ── EMAIL TAB ── */}
        {activeTab==="email"&&(
          <>
            <div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:4}}>📨 Email Provider</div>
              <span style={label}>Provider</span>
              <select style={select} value={email.provider} onChange={e=>setEmail({...email,provider:e.target.value})}>
                <option value="none">— Not configured —</option>
                <option value="sendgrid">SendGrid</option>
                <option value="smtp">Custom SMTP</option>
              </select>

{email.provider==="sendgrid"&&(<>
                <span style={label}>SendGrid API Key</span>
                <input style={input} type="password" placeholder="SG.xxxxxxxxxxxxxxxx" value={email.sendgridKey} onChange={e=>setEmail({...email,sendgridKey:e.target.value})}/>
              </>)}

{email.provider==="smtp"&&(<>
                <span style={label}>SMTP Host</span>
                <input style={input} placeholder="smtp.example.com" value={email.smtpHost} onChange={e=>setEmail({...email,smtpHost:e.target.value})}/>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                  <div>
                    <span style={label}>Port</span>
                    <input style={input} type="number" value={email.smtpPort} onChange={e=>setEmail({...email,smtpPort:+e.target.value})}/>
                  </div>
                  <div>
                    <span style={{...label,marginTop:10}}>TLS</span>
                    <div style={{paddingTop:8,display:"flex",alignItems:"center",gap:8}}>
                      {toggle(email.smtpSecure,()=>setEmail({...email,smtpSecure:!email.smtpSecure}))}
                      <span style={{fontSize:12,color:"#555"}}>{email.smtpSecure?"On":"Off"}</span>
                    </div>
                  </div>
                </div>
                <span style={label}>Username</span>
                <input style={input} placeholder="smtp@example.com" value={email.smtpUser} onChange={e=>setEmail({...email,smtpUser:e.target.value})}/>
                <span style={label}>Password</span>
                <input style={input} type="password" placeholder="SMTP password" value={email.smtpPass} onChange={e=>setEmail({...email,smtpPass:e.target.value})}/>
              </>)}

{email.provider!=="none"&&(<>
                <span style={label}>From Email</span>
                <input style={input} placeholder="noreply@mytown360.in" value={email.fromEmail} onChange={e=>setEmail({...email,fromEmail:e.target.value})}/>
                <span style={label}>From Name</span>
                <input style={input} placeholder="MyTown 360" value={email.fromName} onChange={e=>setEmail({...email,fromName:e.target.value})}/>
              </>)}
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:10}}>📬 Email Triggers</div>
              {[
                {key:"welcomeEmail",  label:"Welcome email on signup"},
                {key:"verifyEmail",   label:"Account verification"},
                {key:"postApproved",  label:"Post approved notification"},
                {key:"eventReminder", label:"Event reminders (24 hrs before)"},
                {key:"reportAlert",   label:"Report alerts to admin"},
              ].map(t=>(
                <div key={t.key} style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"8px 0",borderBottom:"1px solid #F3F4F6"}}>
                  <span style={{fontSize:13,color:"#333"}}>{t.label}</span>
                  {toggle(email[t.key],()=>setEmail({...email,[t.key]:!email[t.key]}))}
                </div>
              ))}
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:8}}>🧪 Send Test Email</div>
              <input style={input} placeholder="test@example.com" value={email.testEmail} onChange={e=>setEmail({...email,testEmail:e.target.value})}/>
              {btn("Send Test Email",()=>{setTestResult("✅ Test email queued!");setTimeout(()=>setTestResult(""),4000);},"primary")}
              {testResult&&<div style={{marginTop:8,fontSize:13,color:"#065F46",background:"#D1FAE5",padding:"8px 12px",borderRadius:8}}>{testResult}</div>}
            </div>

{btn("Save Email Settings",showSaved)}
          </>
        )}

{/* ── NOTIFICATIONS TAB ── */}
        {activeTab==="notif"&&(
          <>
            <div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:10}}>🔔 Push Notifications (FCM)</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
                <span style={{fontSize:13,color:"#555"}}>Enable Push Notifications</span>
                {toggle(notif.pushEnabled,()=>setNotif({...notif,pushEnabled:!notif.pushEnabled}))}
              </div>
              {notif.pushEnabled&&(<>
                <span style={label}>Firebase Project ID</span>
                <input style={input} placeholder="mytown360-xxxxx" value={notif.fcmProjectId} onChange={e=>setNotif({...notif,fcmProjectId:e.target.value})}/>
                <span style={label}>FCM Server Key (Legacy) / Service Account JSON Path</span>
                <input style={input} type="password" placeholder="AAAA:xxxxxxxxxxx" value={notif.fcmServerKey} onChange={e=>setNotif({...notif,fcmServerKey:e.target.value})}/>
                <div style={{fontSize:11,color:"#888",marginTop:4}}>Find this in Firebase Console → Project Settings → Cloud Messaging</div>
              </>)}
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:10}}>📱 SMS Alerts</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                <div>
                  <div style={{fontSize:13,color:"#333"}}>Enable SMS alerts</div>
                  <div style={{fontSize:11,color:"#888"}}>Uses your SMS OTP provider</div>
                </div>
                {toggle(notif.smsAlertsEnabled,()=>setNotif({...notif,smsAlertsEnabled:!notif.smsAlertsEnabled}))}
              </div>
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:10}}>🔔 Push Triggers</div>
              {[
                {key:"pushOnNewPost", label:"New community post"},
                {key:"pushOnReply",   label:"Replies to user posts"},
                {key:"pushOnEvent",   label:"New events in area"},
                {key:"pushOnMessage", label:"New direct messages"},
                {key:"pushOnElection",label:"Election / voting updates"},
              ].map(t=>(
                <div key={t.key} style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"8px 0",borderBottom:"1px solid #F3F4F6"}}>
                  <span style={{fontSize:13,color:"#333"}}>{t.label}</span>
                  {toggle(notif[t.key],()=>setNotif({...notif,[t.key]:!notif[t.key]}))}
                </div>
              ))}
            </div>

<div style={card}>
              <div style={{fontWeight:800,fontSize:14,color:"#111",marginBottom:4}}>🔔 In-App Notifications</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                <span style={{fontSize:13,color:"#555"}}>Show in-app notification bell</span>
                {toggle(notif.inAppEnabled,()=>setNotif({...notif,inAppEnabled:!notif.inAppEnabled}))}
              </div>
            </div>

{btn("Save Notification Settings",showSaved)}
          </>
        )}

{/* ── INTEGRATIONS TAB ── */}
        {activeTab==="integrations"&&(
          <>
            <div style={{fontSize:12,color:"#888",marginBottom:8,padding:"0 2px"}}>Tap any integration to expand and configure its API keys.</div>
            {["auth","payments","media","push","sms","email","maps","analytics","messaging"].map(cat=>{
              const catItems=integrations.filter(i=>i.category===cat);
              if(!catItems.length) return null;
              const catLabels={auth:"🔐 Auth",payments:"💳 Payments",media:"📸 Media & Storage",push:"🔔 Push",sms:"📱 SMS",email:"✉️ Email",maps:"🗺️ Maps",analytics:"📊 Analytics",messaging:"💬 Messaging"};
              return(
                <div key={cat} style={{marginBottom:12}}>
                  <div style={{fontSize:11,fontWeight:800,color:C.purple,marginBottom:6,textTransform:"uppercase",letterSpacing:1}}>{catLabels[cat]||cat}</div>
                  {catItems.map(intg=>(
                    <div key={intg.key} style={{background:"#fff",borderRadius:12,marginBottom:8,overflow:"hidden",boxShadow:"0 1px 3px rgba(0,0,0,0.08)"}}>
                      {/* Header row */}
                      <div style={{display:"flex",alignItems:"center",gap:10,padding:"12px 14px",cursor:"pointer"}}
                           onClick={()=>setExpandedIntg(expandedIntg===intg.key?null:intg.key)}>
                        <div style={{width:36,height:36,borderRadius:9,background:intg.enabled?"#EDE9FE":"#F3F4F6",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18}}>{intg.icon}</div>
                        <div style={{flex:1}}>
                          <div style={{fontWeight:700,fontSize:13,color:"#111"}}>{intg.label}</div>
                          <div style={{fontSize:11,color:intg.enabled?"#7C3AED":"#9CA3AF",fontWeight:600}}>{intg.enabled?"● Active":"○ Inactive"}</div>
                        </div>
                        {toggle(intg.enabled,()=>setIntegrations(integrations.map(i=>i.key===intg.key?{...i,enabled:!i.enabled}:i)))}
                        <span style={{color:"#bbb",fontSize:14,marginLeft:4}}>{expandedIntg===intg.key?"▲":"▼"}</span>
                      </div>
                      {/* Expanded config */}
                      {expandedIntg===intg.key&&(
                        <div style={{padding:"0 14px 14px",borderTop:"1px solid #F3F4F6"}}>
                          <span style={label}>API Key / Client ID</span>
                          <input style={input} type="password" placeholder="Enter API key" value={intg.apiKey}
                            onChange={e=>setIntegrations(integrations.map(i=>i.key===intg.key?{...i,apiKey:e.target.value}:i))}/>
                          <span style={label}>API Secret / Client Secret</span>
                          <input style={input} type="password" placeholder="Enter secret" value={intg.apiSecret}
                            onChange={e=>setIntegrations(integrations.map(i=>i.key===intg.key?{...i,apiSecret:e.target.value}:i))}/>
                          <span style={label}>Webhook URL (optional)</span>
                          <input style={input} placeholder="https://mytown360.in/api/v1/webhooks/..." value={intg.webhookUrl}
                            onChange={e=>setIntegrations(integrations.map(i=>i.key===intg.key?{...i,webhookUrl:e.target.value}:i))}/>
                          {btn("Save",showSaved,"primary")}
                          {btn("Remove",()=>setIntegrations(integrations.map(i=>i.key===intg.key?{...i,apiKey:"",apiSecret:"",webhookUrl:"",enabled:false}:i)),"danger")}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              );
            })}
          </>
        )}

{/* ── USERS TAB ── */}
        {activeTab==="users"&&(
          <>
            <div style={{...card,padding:"10px 12px"}}>
              <input style={{...input,marginBottom:0}} placeholder="🔍  Search by name or area..." value={userSearch} onChange={e=>setUserSearch(e.target.value)}/>
            </div>
            {filteredUsers.map(u=>{
              const st=userStates[u.id]||{verified:u.verified,isBanned:u.isBanned};
              return(
                <div key={u.id} style={card}>
                  <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8}}>
                    <div style={{width:40,height:40,borderRadius:"50%",background:C.purpleL,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:900,color:C.purple,fontSize:14}}>
                      {u.name.split(" ").map(n=>n[0]).join("")}
                    </div>
                    <div style={{flex:1}}>
                      <div style={{fontWeight:800,fontSize:13,color:"#111"}}>{u.name}</div>
                      <div style={{fontSize:11,color:"#888"}}>{u.apt} · {u.area}</div>
                      <div style={{fontSize:11,color:"#888"}}>📱 {u.phone} · Joined {u.joined}</div>
                    </div>
                    <span style={{fontSize:11,fontWeight:700,padding:"3px 8px",borderRadius:20,background:u.role==="admin"?"#EDE9FE":u.role==="moderator"?"#D1FAE5":"#F3F4F6",color:u.role==="admin"?C.purple:u.role==="moderator"?"#065F46":"#555"}}>
                      {u.role}
                    </span>
                  </div>
                  <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
                    {!st.verified&&btn("✅ Verify",()=>setUserStates({...userStates,[u.id]:{...st,verified:true}}),"success")}
                    {st.verified&&<span style={{fontSize:12,fontWeight:700,color:"#10B981",padding:"6px 12px"}}>✅ Verified</span>}
                    {!st.isBanned&&btn("🚫 Ban",()=>setUserStates({...userStates,[u.id]:{...st,isBanned:true}}),"danger")}
                    {st.isBanned&&btn("↩️ Unban",()=>setUserStates({...userStates,[u.id]:{...st,isBanned:false}}),"ghost")}
                  </div>
                  {st.isBanned&&<div style={{fontSize:12,color:"#EF4444",fontWeight:700,marginTop:6}}>⛔ This user is banned</div>}
                </div>
              );
            })}
          </>
        )}

{/* ── REPORTS TAB ── */}
        {activeTab==="reports"&&(
          <>
            {reports.map(r=>{
              const st=reportStates[r.id]||r.status;
              const sevColor={high:"#EF4444",medium:"#F59E0B",low:"#6B7280"}[r.severity]||"#888";
              const typeIcon={post:"📝",user:"👤",listing:"🏪"}[r.type]||"🚩";
              return(
                <div key={r.id} style={{...card,borderLeft:`4px solid ${sevColor}`}}>
                  <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6}}>
                    <span style={{fontSize:18}}>{typeIcon}</span>
                    <div style={{flex:1}}>
                      <div style={{fontWeight:800,fontSize:13,color:"#111"}}>{r.content}</div>
                      <div style={{fontSize:11,color:"#888"}}>Reported by {r.reporter} · {r.date}</div>
                    </div>
                    <span style={{fontSize:10,fontWeight:800,padding:"3px 8px",borderRadius:20,
                      background:st==="pending"?"#FEE2E2":st==="actioned"?"#D1FAE5":"#F3F4F6",
                      color:st==="pending"?"#EF4444":st==="actioned"?"#065F46":"#6B7280",textTransform:"uppercase"}}>
                      {st}
                    </span>
                  </div>
                  {st==="pending"&&(
                    <div style={{display:"flex",gap:6}}>
                      {btn("✅ Action",()=>setReportStates({...reportStates,[r.id]:"actioned"}),"danger")}
                      {btn("❌ Dismiss",()=>setReportStates({...reportStates,[r.id]:"dismissed"}),"ghost")}
                    </div>
                  )}
                </div>
              );
            })}
          </>
        )}

</div>
    </div>
  );
}

// ─── Root App ──────────────────────────────────────────────────────────────────
export default function MyTown360(){
  const [screen,setScreen]=useState("landing");
  const [tab,setTab]=useState("feed");
  const [sidebarOpen,setSidebarOpen]=useState(false);
  const nav=(s)=>{
    const appTabs=["feed","events","map","messages","profile","community"];
    if(s==="community_apply"){setScreen("app");setTab("community");}
    else if(s==="contact_admin"){setScreen("admin_directory");}
    else if(s==="admin_panel"){window.open("/admin","_blank");}
    else if(appTabs.includes(s)){setScreen("app");setTab(s);}
    else setScreen(s);
  };
  if(screen==="landing")         return <><GlobalStyles/><LandingScreen nav={nav}/></>;
  if(screen==="login")           return <><GlobalStyles/><LoginScreen nav={nav}/></>;
  if(screen==="forgot")          return <><GlobalStyles/><ForgotScreen nav={nav}/></>;
  if(screen==="signup")          return <><GlobalStyles/><SignupScreen nav={nav}/></>;
  if(screen==="helplines") return(
    <div className="min-h-screen" style={{background:C.surface}}>
      <Sidebar open={sidebarOpen} onClose={()=>setSidebarOpen(false)} nav={nav} activeTab=""/>
      <HelplineScreen nav={nav}/>
      <BottomNav tab="" setTab={(t)=>{setScreen("app");setTab(t);}}/>
    </div>
  );
  if(screen==="admin_directory") return(
    <div className="min-h-screen" style={{background:C.surface}}>
      <Sidebar open={sidebarOpen} onClose={()=>setSidebarOpen(false)} nav={nav} activeTab=""/>
      <TopBar setScreen={nav} onMenuOpen={()=>setSidebarOpen(true)}/>
      <div className="pb-20"><AdminDirectoryScreen nav={nav}/></div>
      <BottomNav tab="" setTab={(t)=>{setScreen("app");setTab(t);}}/>
    </div>
  );
  if(screen==="admin_panel") return(
    <div style={{maxWidth:480,margin:"0 auto",minHeight:"100dvh"}}>
      <AdminPanelScreen nav={nav}/>
    </div>
  );
  return(
    <div style={{minHeight:"100dvh",background:C.surface,maxWidth:480,margin:"0 auto",position:"relative",overflowX:"hidden"}}>
      <GlobalStyles/>
      <Sidebar open={sidebarOpen} onClose={()=>setSidebarOpen(false)} nav={nav} activeTab={tab}/>
      <TopBar setScreen={nav} onMenuOpen={()=>setSidebarOpen(true)}/>
      <div style={{paddingBottom:80,paddingTop:60}}>
        {tab==="feed"      &&<FeedScreen/>}
        {tab==="events"    &&<EventsScreen/>}
        {tab==="community" &&<CommunityManagerScreen/>}
        {tab==="map"       &&<MapScreen/>}
        {tab==="messages"  &&<MessagesScreen/>}
        {tab==="profile"   &&<ProfileScreen nav={nav}/>}
      </div>
      <BottomNav tab={tab} setTab={setTab}/>
    </div>
  );
}

// ── Browser render entry point (CDN / Babel standalone deployment) ──────────
if (typeof window !== "undefined" && typeof ReactDOM !== "undefined") {
  window.MyTown360 = MyTown360;
}