����JFIF��`�`�����Viewing File: /home/u820193700/domains/spiti2026im.in/public_html/js/components.js
// --- Helper Components ---

function PrayerFlags({ height = 6 }) {
  const cols = [window.C.flagRed, window.C.saffron, window.C.flagWhite, window.C.flagGreen, window.C.flagBlue];
  return (
    <div style={{ display: "flex", height, overflow: "hidden", flexShrink: 0 }}>
      {Array.from({ length: 40 }).map((_, i) => (
        <div key={i} style={{ flex: 1, background: cols[i % 5] }} />
      ))}
    </div>
  );
}

function MtnDiv({ fill, above }) {
  return (
    <div className="mtn-div" style={{ background: above || "transparent" }}>
      <svg viewBox="0 0 1200 55" preserveAspectRatio="none" style={{ display: "block", width: "100%", height: 44 }}>
        <path d="M0,55 L0,40 L100,18 L200,35 L300,8 L420,30 L520,6 L620,24 L720,2 L840,28 L950,10 L1080,32 L1200,12 L1200,55 Z" fill={fill} />
      </svg>
    </div>
  );
}

function MtnDivFlip({ fill, above }) {
  return (
    <div className="mtn-div" style={{ background: above || "transparent" }}>
      <svg viewBox="0 0 1200 55" preserveAspectRatio="none" style={{ display: "block", width: "100%", height: 44 }}>
        <path d="M0,0 L0,15 L100,37 L200,20 L300,47 L420,25 L520,49 L620,31 L720,53 L840,27 L950,45 L1080,23 L1200,43 L1200,0 Z" fill={fill} />
      </svg>
    </div>
  );
}

function Stars({ count = 100 }) {
  const s = React.useRef(
    Array.from({ length: count }, () => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      r: Math.random() * 1.3 + 0.4,
      o: Math.random() * 0.7 + 0.3,
    }))
  ).current;
  return (
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} preserveAspectRatio="xMidYMid slice">
      {s.map((st, i) => (
        <circle key={i} cx={`${st.x}%`} cy={`${st.y}%`} r={st.r} fill="white" opacity={st.o} />
      ))}
    </svg>
  );
}

// --- Specific UI Components ---

function DayCard({ day }) {
  const { C } = window;
  const FB = "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&h=320&fit=crop&q=75";
  const nightDay = day.n === 8;
  const stopColor = { fuel: "#E65100", chai: "#F57F17", food: "#2E7D32", photo: "#1565C0", mech: "#6A1B9A", "🚌": "#1565C0", "✈️": "#1565C0" };
  const typeBg = { fuel: "#FFF3E0", chai: "#FFF8E1", food: "#F1F8E9", photo: "#E3F2FD", mech: "#F3E5F5" };
  const col = (t) => stopColor[t] || day.accent;

  const s = day.stops,
    n = s.length,
    W = 800,
    H = 200,
    pL = 60,
    pR = 60,
    aw = W - pL - pR;
  const alts = s.map((x) => x.a || 500),
    minA = Math.min(...alts),
    maxA = Math.max(...alts),
    rng = Math.max(maxA - minA, 300);
  const ay = alts.map((a) => H - 60 - ((a - minA) / rng) * (H - 120));
  const xs = s.map((_, i) => pL + Math.round(i * (aw / Math.max(n - 1, 1))));
  let path = `M ${xs[0]} ${ay[0]}`;
  for (let i = 1; i < n; i++) {
    const cx = Math.round((xs[i - 1] + xs[i]) / 2);
    path += ` C ${cx} ${ay[i - 1]} ${cx} ${ay[i]} ${xs[i]} ${ay[i]}`;
  }

  return (
    <div className="fade-in" style={{ maxWidth: 800, margin: "0 auto", background: "#fff", borderRadius: 16, overflow: "hidden", border: `1px solid ${C.stoneMid}30`, boxShadow: `0 20px 40px ${C.stone}25` }}>
      <div style={{ height: 6, background: day.accent }} />
      <div style={{ padding: "20px 24px", borderBottom: `1px solid ${C.stonePale}` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 12 }}>
          <div>
            <div style={{ color: day.accent, fontWeight: 700, fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", marginBottom: 4, fontFamily: 'var(--font-heading)' }}>Day {day.n} · {day.date}</div>
            <div style={{ fontSize: 24, fontWeight: 500, color: C.inkDark, lineHeight: 1.2, fontFamily: 'var(--font-heading)' }}>{day.from} → {day.to}</div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            {[[day.km, "Distance"], [day.alt, "Max Alt"], [day.riding, "Riding"]].map(([v, l]) => (
              <div key={l} style={{ background: C.stonePale, border: `1px solid ${C.stoneMid}30`, borderRadius: 10, padding: "8px 14px", textAlign: "center", minWidth: 70 }}>
                <div style={{ color: day.accent, fontWeight: 700, fontSize: 13, fontFamily: 'var(--font-heading)' }}>{v}</div>
                <div style={{ color: C.inkLight, fontSize: 9, textTransform: "uppercase", letterSpacing: ".06em", marginTop: 2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="day-card-images">
        <div style={{ position: "relative", overflow: "hidden" }}>
          <img src={day.locImg} alt={day.to} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} onError={(e) => { e.target.src = FB }} />
          <div className="glass" style={{ position: "absolute", bottom: 12, left: 12, color: "#E8B84B", fontSize: 10, fontWeight: 700, padding: "4px 12px", borderRadius: 6 }}>📍 {day.from} → {day.to}</div>
          {day.n === 8 && <div style={{ position: "absolute", top: 12, right: 12, background: C.flagRed, color: "#fff", fontSize: 10, fontWeight: 700, padding: "4px 10px", borderRadius: 6 }}>EXCLUSIVE</div>}
        </div>
        <div style={{ position: "relative", overflow: "hidden" }}>
          <img src={day.hotelImg} alt={day.hotelName} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} onError={(e) => { e.target.src = FB }} />
          <div style={{ position: "absolute", bottom: 12, left: 12, background: "rgba(26,90,114,.88)", color: "#fff", fontSize: 9, fontWeight: 700, padding: "4px 10px", borderRadius: 6 }}>🏨 {day.hotelName}</div>
        </div>
      </div>
      <div style={{ background: nightDay ? "#0D1B2E" : C.stonePale, padding: "20px 0" }}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
          <rect width={W} height={H} fill={nightDay ? "#0D1B2E" : "#F5F4F2"} rx="0" />
          <path d={`${path} L ${xs[n - 1]} ${H} L ${xs[0]} ${H} Z`} fill={nightDay ? "rgba(74,143,168,.15)" : `${day.accent}18`} />
          <path d={path} fill="none" stroke={day.accent} strokeWidth="3" />
          <line x1={pL} y1={H - 2} x2={W - pR} y2={H - 2} stroke={nightDay ? "#2A4A6E" : "#DEDAD4"} strokeWidth="1" />
          {s.map((st, i) => {
            const x = xs[i],
              y = ay[i],
              c = col(st.t) || col(st.icon) || "#555";
            const flip = i % 2 !== 0,
              ly = flip ? y - 20 : y + 26,
              ny = flip ? y - 40 : y + 46;
            return (
              <g key={i}>
                <circle cx={x} cy={y} r={7} fill={c} stroke="white" strokeWidth="2" />
                <text x={x} y={ly} textAnchor="middle" fontSize="18">{st.icon}</text>
                <text x={x} y={ny} textAnchor="middle" fontSize="13" fontWeight="600" fill={nightDay ? "#8A9BAA" : "#6A5A48"} fontFamily="var(--font-heading)">
                  {st.l}
                </text>
              </g>
            );
          })}
        </svg>
      </div>
      <div style={{ padding: "20px 24px", display: "grid", gap: 20 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, color: C.saffron, textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 20 }}>Route Highlights</div>
            <div style={{ display: "grid", gap: 16 }}>
              {day.stops.map((st, i) => {
                const c = col(st.t) || col(st.icon) || "#555";
                const bg = typeBg[st.t] || C.stonePale;
                return (
                  <div key={i} className="route-highlight-grid">
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: bg, border: `1.5px solid ${c}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>{st.icon}</div>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                      <span style={{ fontWeight: 600, fontSize: 16, color: C.inkDark, fontFamily: 'var(--font-heading)' }}>{st.l}</span>
                      {st.a && <span style={{ fontSize: 12, color: c, fontWeight: 700 }}>{st.a.toLocaleString()}m</span>}
                    </div>
                    <div style={{ fontSize: 14, color: C.inkMid, lineHeight: 1.4, fontFamily: 'var(--font-main)' }}>{st.note}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <div style={{ borderTop: `1px solid ${C.stonePale}`, paddingTop: 24, marginTop: 8 }}>
            <p style={{ color: C.inkMid, fontSize: 16, lineHeight: 1.8, marginBottom: 16, fontFamily: 'var(--font-main)' }}>{day.summary}</p>
            <div className="glass" style={{ borderLeft: `4px solid ${day.accent}`, padding: "14px 18px", borderRadius: "0 10px 10px 0", fontSize: 14, color: nightDay ? "rgba(255,255,255,.75)" : C.inkMid, fontStyle: "italic", background: nightDay ? "rgba(26,46,74,0.6)" : "var(--stonePale)" }}>
              🌿 {day.flora}
            </div>
          </div>
      </div>
    </div>
  );
}

// --- Admin Section Components ---

function AdminLogin({ onLogin, onBack }) {
  const { C } = window;
  const [user, setUser] = React.useState("admin");
  const [pw, setPw] = React.useState("");
  const [err, setErr] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const go = async () => { 
    setLoading(true);
    setErr("");
    const res = await onLogin(user, pw);
    if (!res.success) { 
      setErr(res.message || "Invalid credentials"); 
    } 
    setLoading(false);
  };

  return (
    <div style={{ minHeight: "100vh", background: "#F9F9F8", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ width: "100%", maxWidth: 400 }}>
        <button onClick={onBack} style={{ background: "none", border: "none", color: "#888", fontSize: 13, cursor: "pointer", marginBottom: 32 }}>← Back to Expedition Page</button>
        <div style={{ background: "#fff", border: "1px solid #E5E7EB", borderRadius: 20, padding: 40, boxShadow: '0 10px 25px rgba(0,0,0,0.05)' }}>
          <div style={{ color: C.saffron, fontWeight: 700, fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase", marginBottom: 8 }}>Avahan Motors</div>
          <div className="serif" style={{ fontSize: 28, color: "#111", marginBottom: 6 }}>Organiser Gateway</div>
          <div style={{ color: "#888", fontSize: 14, marginBottom: 32 }}>Secure access for Spiti 2026 team</div>
          
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: "block", fontSize: 11, fontWeight: 700, color: "#9CA3AF", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 8 }}>Username</label>
            <input
              type="text"
              value={user}
              onChange={(e) => setUser(e.target.value)}
              placeholder="Username"
              style={{ width: "100%", border: "1.5px solid #E5E7EB", borderRadius: 10, padding: "12px 16px", fontSize: 16, outline: "none", boxSizing: "border-box" }}
            />
          </div>

          <div style={{ marginBottom: 20 }}>
            <label style={{ display: "block", fontSize: 11, fontWeight: 700, color: "#9CA3AF", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 8 }}>Access Password</label>
            <input
              type="password"
              value={pw}
              onChange={(e) => setPw(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && go()}
              placeholder="Password"
              style={{ width: "100%", border: `1.5px solid ${err ? "#ef4444" : "#E5E7EB"}`, borderRadius: 10, padding: "12px 16px", fontSize: 16, outline: "none", boxSizing: "border-box" }}
            />
          </div>

          {err && <div style={{ color: "#ef4444", fontSize: 13, marginBottom: 16, fontWeight: 600 }}>⚠️ {err}</div>}
          
          <button 
            onClick={go} 
            disabled={loading}
            style={{ width: "100%", background: loading ? "#ccc" : C.saffron, color: "#fff", border: "none", padding: 14, borderRadius: 10, fontWeight: 700, fontSize: 15, cursor: loading ? "not-allowed" : "pointer", transition: "all 0.2s" }}
          >
            {loading ? "Authenticating..." : "Sign In →"}
          </button>
        </div>
      </div>
    </div>
  );
}

function AdminDashboard({ data, save, tab, setTab, onLogout }) {
  const { C } = window;
  const nav = [
    { id: "overview", label: "Overview" },
    { id: "regs", label: "Registrations", badge: data.regs.length },
    { id: "hotels", label: "Hotels", badge: data.hotels?.length || 0 },
    { id: "interests", label: "Interests", badge: data.interests.length },
    { id: "qa", label: "Q & A", badge: data.qa.filter((q) => !q.answer).length, red: true },
    { id: "whatsapp", label: "WhatsApp" },
    { id: "gallery", label: "Gallery" },
    { id: "contacts", label: "Contacts" },
  ];

  return (
    <div className="admin-layout" style={{ display: "flex", background: "#F9F9F8", fontFamily: "var(--font-main)" }}>
      <div className="admin-sidebar" style={{ background: "#fff", borderRight: "1px solid #E5E7EB", display: "flex", flexDirection: "column", flexShrink: 0, zIndex: 100 }}>
        <div className="admin-brand" style={{ padding: "24px 20px", borderBottom: "1px solid #F3F4F6" }}>
          <div style={{ color: C.saffron, fontWeight: 700, fontSize: 13, letterSpacing: ".1em", textTransform: "uppercase", fontFamily: 'var(--font-heading)' }}>Avahan Motors</div>
          <div style={{ color: "#9CA3AF", fontSize: 11, marginTop: 4 }}>Spiti 2026 · Control</div>
          <button className="hide-desktop" onClick={onLogout} style={{ background: 'none', border: 'none', color: '#9CA3AF', fontSize: 18, cursor: 'pointer' }}>🗙</button>
        </div>
        <nav className="admin-nav" style={{ flex: 1, padding: "16px 12px" }}>
          {nav.map((item) => (
            <button
              key={item.id}
              onClick={() => setTab(item.id)}
              style={{
                width: "100%",
                textAlign: "left",
                background: tab === item.id ? "#FEF3C7" : "transparent",
                border: "none",
                borderLeft: `3px solid ${tab === item.id ? C.saffron : "transparent"}`,
                color: tab === item.id ? C.ochreDeep : "#6B7280",
                padding: "12px 14px",
                fontSize: 14,
                cursor: "pointer",
                borderRadius: "0 8px 8px 0",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                marginBottom: 4,
                fontWeight: tab === item.id ? 600 : 400
              }}
            >
              <span>{item.label}</span>
              {item.badge > 0 && (
                <span style={{ background: item.red ? "#FEE2E2" : C.saffronPale, color: item.red ? "#7F1D1D" : C.ochreDeep, fontSize: 11, fontWeight: 700, padding: "2px 8px", borderRadius: 12 }}>
                  {item.badge}
                </span>
              )}
            </button>
          ))}
        </nav>
        <div className="admin-logout-wrap" style={{ padding: "16px", borderTop: "1px solid #F3F4F6" }}>
          <button onClick={onLogout} style={{ width: "100%", background: "none", border: "1px solid #E5E7EB", color: "#9CA3AF", padding: "10px", borderRadius: 10, fontSize: 13, cursor: "pointer" }}>← View Public Site</button>
        </div>
      </div>
      <div className="admin-content" style={{ flex: 1, padding: '40px', overflowY: 'auto' }}>
        {tab === "overview" && <AOverview data={data} setTab={setTab} />}
        {tab === "regs" && <ARegs data={data} save={save} />}
        {tab === "hotels" && <AHotels data={data} save={save} />}
        {tab === "interests" && <AInterests data={data} save={save} />}
        {tab === "qa" && <AQA data={data} save={save} />}
        {tab === "whatsapp" && <AWhatsApp data={data} />}
        {tab === "gallery" && <AGallery data={data} save={save} />}
        {tab === "contacts" && <AContacts data={data} save={save} />}
      </div>
    </div>
  );
}

function ACard({ title, action, children }) {
  return (
    <div className="admin-card" style={{ background: "#fff", border: "1px solid #E5E7EB", borderRadius: 16, overflow: "hidden", marginBottom: 20, boxShadow: '0 4px 6px rgba(0,0,0,0.02)' }}>
      {(title || action) && (
        <div style={{ padding: "18px 24px", borderBottom: "1px solid #F3F4F6", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          {title && <div style={{ fontWeight: 600, fontSize: 16, fontFamily: 'var(--font-heading)' }}>{title}</div>}
          {action}
        </div>
      )}
      <div className="admin-card-body" style={{ padding: "20px 24px" }}>{children}</div>
    </div>
  );
}

function SPill({ status }) {
  const m = { pending: ["#FEF3C7", "#78350F", "Pending"], confirmed: ["#D1FAE5", "#064E3B", "Confirmed"], paid: ["#DCFCE7", "#14532D", "Paid ✓"], cancelled: ["#FEE2E2", "#7F1D1D", "Cancelled"], interested: ["#DBEAFE", "#1E3A8A", "Interested"] };
  const [bg, color, label] = m[status] || ["#F3F4F6", "#374151", status || "—"];
  return <span style={{ background: bg, color, fontSize: 11, fontWeight: 700, padding: "3px 10px", borderRadius: 20, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</span>;
}

function AOverview({ data, setTab }) {
  const { C, fmtDate } = window;
  const activeRegsCount = data.regs.filter((r) => r.status !== 'cancelled').length;
  const paid = data.regs.filter((r) => r.status !== 'cancelled' && (r.payment === "paid" || r.payment === "full paid")).length;
  return (
    <div style={{ animation: 'fadeIn 0.5s ease' }}>
      <div className="serif" style={{ fontSize: 32, color: "#111", marginBottom: 8 }}>Market Overview</div>
      <div style={{ color: "#888", fontSize: 15, marginBottom: 32 }}>Real-time statistics for the Spiti 2026 Expedition</div>
      
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 20, marginBottom: 40 }}>
        {[[activeRegsCount, `${paid} paid · ${15 - activeRegsCount} left`, "Active Registrations", C.saffron, "regs"], [data.interests.length, "Potential leads", "Leads", "#3b82f6", "interests"], [Math.max(0, 15 - activeRegsCount), "of 15 capacity", "Available", "#8b5cf6", "regs"]].map(([v, s, l, col, tab]) => (
          <div key={l} onClick={() => setTab(tab)} style={{ background: "#fff", border: "1px solid #E5E7EB", borderRadius: 16, padding: 24, cursor: "pointer", transition: 'all 0.2s ease' }}>
            <div style={{ fontSize: 11, color: "#9CA3AF", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 12, fontWeight: 700 }}>{l}</div>
            <div style={{ fontSize: 44, fontWeight: 700, color: col, lineHeight: 1, marginBottom: 8 }}>{v}</div>
            <div style={{ fontSize: 13, color: "#9CA3AF" }}>{s}</div>
          </div>
        ))}
      </div>

      <ACard title="Recent Activity" action={<button onClick={() => setTab("regs")} style={{ background: "none", border: "none", color: C.saffron, fontSize: 14, cursor: "pointer", fontWeight: 600 }}>Manage All →</button>}>
        {data.regs.length === 0 ? (
          <div style={{ padding: "40px", textAlign: "center", color: "#D1D5DB", fontSize: 15 }}>No registrations recorded yet.</div>
        ) : (
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: "100%", minWidth: "600px", borderCollapse: "collapse", fontSize: 14 }}>
              <thead>
                <tr style={{ textAlign: "left" }}>
                {["Name", "Bike", "Status", "Date"].map(h => <th key={h} style={{ padding: "12px 0", color: "#9CA3AF", fontWeight: 600, fontSize: 11, textTransform: "uppercase" }}>{h}</th>)}
              </tr>
            </thead>
            <tbody>
              {[...data.regs].reverse().slice(0, 5).map((r, i) => (
                <tr key={i} style={{ borderBottom: "1px solid #F9FAFB" }}>
                  <td style={{ padding: "16px 0", fontWeight: 600 }}>{r.name}</td>
                  <td style={{ padding: "16px 0", color: "#6B7280" }}>{r.bike || "—"}</td>
                  <td style={{ padding: "16px 0" }}><SPill status={r.status} /></td>
                  <td style={{ padding: "16px 0", color: "#9CA3AF" }}>{fmtDate(r.created_at)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        )}
      </ACard>
    </div>
  );
}

function ARegs({ data, save }) {
    const { cleanPhone } = window;
    const upd = async (uid, k, v, currentReg) => {
        const body = { 
            action: 'update_reg', 
            uid, 
            status: k === 'status' ? v : currentReg.status,
            payment_status: k === 'payment_status' ? v : currentReg.payment_status,
            notes: currentReg.notes || ""
        };
        await save("admin_update", null, body);
    };
    const del = async (uid) => {
        if (confirm("Permanently delete this registration?")) {
            await save("admin_update", null, { action: "delete_reg", uid });
        }
    };
    const downloadCsv = () => {
        window.location.href = (window.BASE_API || "api/") + 'admin_actions.php?action=export_csv&type=registrations';
    };
    return (
        <div style={{ animation: 'fadeIn 0.5s ease' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
                <div className="serif" style={{ fontSize: 32, color: "#111" }}>Registrations</div>
                <button onClick={downloadCsv} style={{ background: '#F0FFF4', color: '#166534', border: '1.5px solid #BBF7D0', padding: '10px 20px', borderRadius: 8, fontWeight: 700, fontSize: 13, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>⬇ Download CSV</button>
            </div>
            <ACard>
                <div style={{overflowX: 'auto'}}>
                    <table style={{width: '100%', borderCollapse: 'collapse', fontSize: 14}}>
                        <thead>
                            <tr style={{textAlign: 'left', borderBottom: '2px solid #F3F4F6'}}>
                                {["Rider", "Contact", "Bike", "Status", "Payment", "Action"].map(h => <th key={h} style={{padding: '12px 8px', color: '#9CA3AF', fontSize: 11, textTransform: 'uppercase'}}>{h}</th>)}
                            </tr>
                        </thead>
                        <tbody>
                            {data.regs.map(r => (
                                <tr key={r.uid} style={{borderBottom: '1px solid #F9FAFB'}}>
                                    <td style={{padding: '16px 8px', fontWeight: 600}}>{r.name}</td>
                                    <td style={{padding: '16px 8px'}}><a href={`tel:${r.phone}`} style={{color: '#2563eb', textDecoration: 'none'}}>{r.phone}</a></td>
                                    <td style={{padding: '16px 8px', color: '#6B7280'}}>{r.bike || "—"}</td>
                                    <td style={{padding: '16px 8px'}}>
                                        <select value={r.status || "pending"} onChange={e => upd(r.uid, "status", e.target.value, r)} style={{border: '1px solid #E5E7EB', borderRadius: 6, padding: '4px 8px'}}>
                                            {["pending", "confirmed", "paid", "cancelled"].map(s => <option key={s} value={s}>{s}</option>)}
                                        </select>
                                    </td>
                                    <td style={{padding: '16px 8px'}}>
                                        <select value={r.payment_status || "unpaid"} onChange={e => upd(r.uid, "payment_status", e.target.value, r)} style={{border: '1px solid #E5E7EB', borderRadius: 6, padding: '4px 8px'}}>
                                            {["unpaid", "deposit paid", "full paid"].map(s => <option key={s} value={s}>{s}</option>)}
                                        </select>
                                    </td>
                                    <td style={{padding: '16px 8px', display: 'flex', gap: 8}}>
                                        <a href={`https://wa.me/${cleanPhone(r.phone)}`} target="_blank" style={{background: '#DCFCE7', color: '#166534', padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, textDecoration: 'none'}}>WhatsApp</a>
                                        <button onClick={() => del(r.uid)} style={{background: 'none', border: '1px solid #FECACA', color: '#EF4444', padding: '6px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer'}}>Delete</button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </ACard>
        </div>
    );
}

function AInterests({ data, save }) {
    const { cleanPhone, fmtDate } = window;
    const convert = async (i) => {
        // 1. Create registration
        await save("regs", null, { ...i, bike: i.bike || "" });
        // 2. Delete interest
        await save("admin_update", null, { action: "delete_interest", uid: i.uid });
    };
    const downloadCsv = () => {
        window.location.href = (window.BASE_API || "api/") + 'admin_actions.php?action=export_csv&type=interests';
    };
    return (
        <div style={{ animation: 'fadeIn 0.5s ease' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
                <div className="serif" style={{ fontSize: 32, color: "#111" }}>Leads Tracker</div>
                <button onClick={downloadCsv} style={{ background: '#F0FFF4', color: '#166534', border: '1.5px solid #BBF7D0', padding: '10px 20px', borderRadius: 8, fontWeight: 700, fontSize: 13, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>⬇ Download CSV</button>
            </div>
            <ACard>
                <div style={{overflowX: 'auto'}}>
                    <table style={{width: '100%', borderCollapse: 'collapse', fontSize: 14}}>
                        <thead>
                            <tr style={{textAlign: 'left', borderBottom: '2px solid #F3F4F6'}}>
                                {["Lead", "Contact", "City", "Date", "Action"].map(h => <th key={h} style={{padding: '12px 8px', color: '#9CA3AF', fontSize: 11, textTransform: 'uppercase'}}>{h}</th>)}
                            </tr>
                        </thead>
                        <tbody>
                            {data.interests.map(r => (
                                <tr key={r.uid} style={{borderBottom: '1px solid #F9FAFB'}}>
                                    <td style={{padding: '16px 8px', fontWeight: 600}}>{r.name}</td>
                                    <td style={{padding: '16px 8px'}}><a href={`tel:${r.phone}`} style={{color: '#2563eb', textDecoration: 'none'}}>{r.phone}</a></td>
                                    <td style={{padding: '16px 8px', color: '#6B7280'}}>{r.city || "—"}</td>
                                    <td style={{padding: '16px 8px', color: '#9CA3AF'}}>{fmtDate(r.created_at)}</td>
                                    <td style={{padding: '16px 8px', display: 'flex', gap: 8}}>
                                        <a href={`https://wa.me/${cleanPhone(r.phone)}`} target="_blank" style={{background: '#DCFCE7', color: '#166534', padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, textDecoration: 'none'}}>Chat</a>
                                        <button onClick={() => convert(r)} style={{background: '#FEF3C7', color: '#78350F', border: 'none', padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer'}}>Convert</button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </ACard>
        </div>
    );
}


// --- Q&A Tab ---
function AQA({ data, save }) {
  const { C, fmtDate } = window;
  const [answers, setAnswers] = React.useState({});

  const submitAnswer = async (q) => {
    const answer = answers[q.uid] ?? q.answer ?? '';
    await save('admin_update', null, { action: 'answer_qa', uid: q.uid, answer, published: q.published ? 1 : 0 });
  };

  const togglePublished = async (q) => {
    const answer = answers[q.uid] ?? q.answer ?? '';
    await save('admin_update', null, { action: 'answer_qa', uid: q.uid, answer, published: q.published ? 0 : 1 });
  };

  const deleteQA = async (q) => {
    if (confirm("Are you sure you want to delete this question?")) {
      await save('admin_update', null, { action: 'delete_qa', uid: q.uid });
    }
  };

  return (
    <div style={{ animation: 'fadeIn 0.5s ease' }}>
      <div className="serif" style={{ fontSize: 32, color: '#111', marginBottom: 8 }}>Q & A</div>
      <div style={{ color: '#888', fontSize: 15, marginBottom: 32 }}>Answer rider questions. Toggle published to show on the public page.</div>
      {data.qa.length === 0 ? (
        <ACard><div style={{ padding: 40, textAlign: 'center', color: '#D1D5DB' }}>No questions yet.</div></ACard>
      ) : data.qa.map(q => (
        <ACard key={q.uid}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: 15, color: '#111', marginBottom: 4 }}>{q.question}</div>
              <div style={{ fontSize: 12, color: '#9CA3AF' }}>Asked by {q.asked_by || 'Anonymous'} · {fmtDate(q.created_at)}</div>
            </div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0, marginLeft: 16 }}>
              <button
                onClick={() => togglePublished(q)}
                style={{ background: q.published ? '#D1FAE5' : '#F3F4F6', color: q.published ? '#065F46' : '#6B7280', border: 'none', padding: '4px 12px', borderRadius: 20, fontSize: 11, fontWeight: 700, cursor: 'pointer' }}
              >{q.published ? '✓ Published' : 'Unpublished'}</button>
            </div>
          </div>
          <textarea
            defaultValue={q.answer || ''}
            onChange={e => setAnswers(a => ({ ...a, [q.uid]: e.target.value }))}
            placeholder="Type your answer..."
            rows={3}
            style={{ width: '100%', border: '1.5px solid #E5E7EB', borderRadius: 8, padding: '10px 12px', fontSize: 14, resize: 'vertical', outline: 'none', boxSizing: 'border-box', marginBottom: 10, fontFamily: 'inherit' }}
          />
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <button
              onClick={() => submitAnswer(q)}
              style={{ background: C.saffron, color: '#fff', border: 'none', padding: '8px 20px', borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: 'pointer' }}
            >Save Answer</button>
            <button
              onClick={() => deleteQA(q)}
              style={{ background: 'transparent', color: '#EF4444', border: '1px solid #FECACA', padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
            >Delete</button>
          </div>
        </ACard>
      ))}
    </div>
  );
}

// --- WhatsApp Tab ---
function AWhatsApp({ data }) {
  const { C, templates } = window;
  const [active, setActive] = React.useState(0);
  const [vars, setVars] = React.useState({});
  const [copied, setCopied] = React.useState(false);

  const activeRegsCount = (data.regs || []).filter(r => r.status !== 'cancelled').length;
  const spotsLeft = Math.max(0, 15 - activeRegsCount);
  const tpl = templates[active];

  const rendered = tpl.body
    .replace(/\[Spots\]/g, (vars.spots !== undefined && vars.spots !== '') ? vars.spots : spotsLeft)
    .replace(/\[Name\]/g, vars.name || '[Name]')
    .replace(/\[link\]/g, vars.link || '[link]')
    .replace(/\[number\]/g, vars.number || '[number]')
    .replace(/\[date\]/g, vars.date || '[date]');

  const copy = () => {
    navigator.clipboard.writeText(rendered);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div style={{ animation: 'fadeIn 0.5s ease' }}>
      <div className="serif" style={{ fontSize: 32, color: '#111', marginBottom: 8 }}>WhatsApp Templates</div>
      <div style={{ color: '#888', fontSize: 15, marginBottom: 32 }}>Fill placeholders and copy the message.</div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
        {templates.map((t, i) => (
          <button key={i} onClick={() => setActive(i)} style={{ background: active === i ? C.saffron : '#fff', color: active === i ? '#fff' : '#374151', border: `1.5px solid ${active === i ? C.saffron : '#E5E7EB'}`, padding: '8px 18px', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>{t.label}</button>
        ))}
      </div>
      <div className="form-two-col" style={{ gap: 24 }}>
        <div>
          <ACard title="Placeholders">
            {[['name', 'Rider Name', 'e.g. Rahul'], ['spots', 'Spots Left', spotsLeft], ['link', 'Register Link', ''], ['number', 'Phone Number', ''], ['date', 'Deadline Date', '']].map(([k, label, ph]) => (
              <div key={k} style={{ marginBottom: 14 }}>
                <label style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', textTransform: 'uppercase', display: 'block', marginBottom: 4 }}>{label}</label>
                <input value={vars[k] ?? (k === 'spots' ? spotsLeft : '')} onChange={e => setVars(v => ({ ...v, [k]: e.target.value }))} placeholder={String(ph)} style={{ width: '100%', border: '1.5px solid #E5E7EB', borderRadius: 8, padding: '8px 12px', fontSize: 14, outline: 'none', boxSizing: 'border-box' }} />
              </div>
            ))}
          </ACard>
        </div>
        <div>
          <ACard title="Preview">
            <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontFamily: 'inherit', fontSize: 14, color: '#374151', lineHeight: 1.7, margin: 0, marginBottom: 16 }}>{rendered}</pre>
            <button onClick={copy} style={{ width: '100%', background: copied ? '#D1FAE5' : C.saffron, color: copied ? '#065F46' : '#fff', border: 'none', padding: '12px', borderRadius: 8, fontWeight: 700, fontSize: 14, cursor: 'pointer', transition: 'all 0.2s' }}>
              {copied ? '✓ Copied!' : 'Copy to Clipboard'}
            </button>
          </ACard>
        </div>
      </div>
    </div>
  );
}

// --- Contacts Tab ---
function AContacts({ data, save }) {
  const { C, cleanPhone, fmtDate } = window;
  const [showAdd, setShowAdd] = React.useState(false);
  const [form, setForm] = React.useState({});
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const addContact = async () => {
    if (!form.name || !form.phone) return;
    await save('contacts', null, { ...form });
    setForm({});
    setShowAdd(false);
  };

  return (
    <div style={{ animation: 'fadeIn 0.5s ease' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
        <div className="serif" style={{ fontSize: 32, color: '#111' }}>Contacts</div>
        <button onClick={() => setShowAdd(s => !s)} style={{ background: C.saffron, color: '#fff', border: 'none', padding: '10px 20px', borderRadius: 8, fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>+ Add Contact</button>
      </div>
      {showAdd && (
        <ACard title="New Contact">
          <div className="form-two-col" style={{ marginBottom: 16 }}>
            {[['name', 'Name', 'text', 'e.g. Rahul Sharma'], ['phone', 'Phone', 'tel', 'e.g. 9876543210'], ['email', 'Email', 'email', ''], ['city', 'City', 'text', ''], ['source', 'Source', 'text', 'Instagram, WA, etc']].map(([k, label, type, ph]) => (
              <div key={k}>
                <label style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', textTransform: 'uppercase', display: 'block', marginBottom: 4 }}>{label}</label>
                <input value={form[k] || ''} onChange={e => {
                  let v = e.target.value;
                  if(type === 'tel') v = v.replace(/\\D/g, '').substring(0, 10);
                  set(k, v);
                }} type={type} placeholder={ph} style={{ width: '100%', border: '1.5px solid #E5E7EB', borderRadius: 8, padding: '8px 12px', fontSize: 14, outline: 'none', boxSizing: 'border-box' }} />
              </div>
            ))}
          </div>
          <button onClick={addContact} style={{ background: C.saffron, color: '#fff', border: 'none', padding: '10px 24px', borderRadius: 8, fontWeight: 700, cursor: 'pointer' }}>Save Contact</button>
        </ACard>
      )}
      <ACard>
        <div style={{ overflowX: 'auto' }}>
          {data.contacts?.length === 0 ? (
            <div style={{ padding: 40, textAlign: 'center', color: '#D1D5DB' }}>No contacts yet. Add one above.</div>
          ) : (
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
              <thead>
                <tr style={{ textAlign: 'left', borderBottom: '2px solid #F3F4F6' }}>
                  {['Name', 'Phone', 'City', 'Source', 'Added', 'Action'].map(h => <th key={h} style={{ padding: '12px 8px', color: '#9CA3AF', fontSize: 11, textTransform: 'uppercase' }}>{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {(data.contacts || []).map(c => (
                  <tr key={c.uid} style={{ borderBottom: '1px solid #F9FAFB' }}>
                    <td style={{ padding: '14px 8px', fontWeight: 600 }}>{c.name}</td>
                    <td style={{ padding: '14px 8px' }}><a href={`tel:${c.phone}`} style={{ color: '#2563eb', textDecoration: 'none' }}>{c.phone}</a></td>
                    <td style={{ padding: '14px 8px', color: '#6B7280' }}>{c.city || '—'}</td>
                    <td style={{ padding: '14px 8px', color: '#6B7280' }}>{c.source || '—'}</td>
                    <td style={{ padding: '14px 8px', color: '#9CA3AF' }}>{fmtDate(c.created_at)}</td>
                    <td style={{ padding: '14px 8px' }}>
                      <a href={`https://wa.me/${cleanPhone(c.phone)}`} target="_blank" style={{ background: '#DCFCE7', color: '#166534', padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, textDecoration: 'none' }}>WhatsApp</a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </ACard>
    </div>
  );
}

// --- Form Helper Components ---

function DkF({ label, value, onChange, type = "text", placeholder = "" }) {
  return (
    <div style={{ display: 'grid', gap: 6 }}>
      <label style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,.5)", textTransform: "uppercase", letterSpacing: ".06em" }}>{label}</label>
      <input
        type={type}
        value={value || ""}
        onChange={(e) => {
            let v = e.target.value;
            if (type === 'tel') v = v.replace(/\\D/g, '').substring(0, 10);
            onChange(v);
        }}
        placeholder={placeholder}
        style={{ width: "100%", background: "rgba(0,0,0,.3)", border: "1px solid rgba(255,255,255,.15)", borderRadius: 8, padding: "12px 14px", fontSize: 14, color: "#fff", outline: "none" }}
      />
    </div>
  );
}

function DkSel({ label, value, onChange, options }) {
  return (
    <div style={{ display: 'grid', gap: 6 }}>
      <label style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,.5)", textTransform: "uppercase", letterSpacing: ".06em" }}>{label}</label>
      <select
        value={value || ""}
        onChange={(e) => onChange(e.target.value)}
        style={{ width: "100%", background: "rgba(0,0,0,.3)", border: "1px solid rgba(255,255,255,.15)", borderRadius: 8, padding: "12px 14px", fontSize: 14, color: "#fff", outline: "none", cursor: 'pointer' }}
      >
        <option value="">Select</option>
        {options.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
    </div>
  );
}



// --- Gallery Tab ---
function AGallery({ data, save }) {
  const [form, setForm] = React.useState({ type: 'youtube', url: '', title: '' });
  const [file, setFile] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const onAdd = async (e) => {
    e.preventDefault();
    setLoading(true);
    const fd = new FormData();
    fd.append('action', 'add_gallery_item');
    if ((form.type === 'image' || form.type === 'video') && file) {
      fd.append('media_file', file);
    }
    fd.append('type', form.type);
    fd.append('url', form.url);
    fd.append('title', form.title);

    try {
      const res = await fetch((window.BASE_API || "api/") + 'admin_actions.php?action=add_gallery_item', {
        method: 'POST',
        body: fd
      });
      if (res.ok) {
        save('refresh');
        setForm({ type: 'youtube', url: '', title: '' });
        setFile(null);
      }
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  };

  const onDelete = async (uid) => {
    if (!confirm('Are you sure you want to delete this item?')) return;
    await save('admin_update', null, { action: 'delete_gallery_item', uid });
  };

  return (
    <div style={{ animation: 'fadeIn 0.5s ease' }}>
      <div style={{ marginBottom: 32 }}>
        <div className="serif" style={{ fontSize: 24, fontWeight: 700, color: '#111', textTransform: 'uppercase', letterSpacing: '.05em' }}>Gallery Management</div>
        <div style={{ color: '#6B7280', fontSize: 13, marginTop: 4 }}>Upload images, local videos, or paste YouTube and online links</div>
      </div>

      <ACard title="Add New Media">
        <form onSubmit={onAdd} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
          <div>
            <label style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', textTransform: 'uppercase', marginBottom: 6, display: 'block' }}>Type</label>
            <select value={form.type} onChange={e => setForm({...form, type: e.target.value})} style={{ width: '100%', padding: 10, border: '1px solid #E5E7EB', borderRadius: 8 }}>
              <option value="image">Local Image (Upload)</option>
              <option value="video">Local Video (Upload)</option>
              <option value="youtube">YouTube Video (Link)</option>
              <option value="online_img">Online Image (URL)</option>
            </select>
          </div>
          {(form.type === 'image' || form.type === 'video') ? (
            <div>
              <label style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', textTransform: 'uppercase', marginBottom: 6, display: 'block' }}>Select File</label>
              <input type="file" accept={form.type === 'image' ? 'image/*' : 'video/*'} onChange={e => setFile(e.target.files[0])} style={{ width: '100%', fontSize: 12 }} />
            </div>
          ) : (
            <div>
              <label style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', textTransform: 'uppercase', marginBottom: 6, display: 'block' }}>Link / URL</label>
              <input value={form.url} onChange={e => setForm({...form, url: e.target.value})} placeholder={form.type === 'youtube' ? 'YouTube link' : 'https://image.url'} style={{ width: '100%', padding: 10, border: '1px solid #E5E7EB', borderRadius: 8 }} />
            </div>
          )}
          <div>
            <label style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', textTransform: 'uppercase', marginBottom: 6, display: 'block' }}>Title (Optional)</label>
            <input value={form.title} onChange={e => setForm({...form, title: e.target.value})} placeholder="e.g. Rohtang Pass 2024" style={{ width: '100%', padding: 10, border: '1px solid #E5E7EB', borderRadius: 8 }} />
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <button disabled={loading} type="submit" style={{ width: '100%', background: C.saffron, color: '#fff', border: 'none', padding: 10, borderRadius: 8, fontWeight: 600, cursor: 'pointer' }}>
              {loading ? 'Uploading...' : 'Add to Gallery'}
            </button>
          </div>
        </form>
      </ACard>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 16 }}>
        {(data.gallery || []).map(m => (
          <div key={m.uid} style={{ background: '#fff', border: '1px solid #E5E7EB', borderRadius: 12, overflow: 'hidden', position: 'relative' }}>
             {m.type === 'image' || m.type === 'online_img' ? (
                <img src={m.url} style={{ width: '100%', height: 140, objectFit: 'cover', background: '#F3F4F6' }} alt="" />
             ) : (
                <div style={{ width: '100%', height: 140, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 24 }}>🎞</div>
             )}
             <div style={{ padding: 12 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#111', marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.title || 'Untitled'}</div>
                <div style={{ fontSize: 11, color: '#9CA3AF', textTransform: 'uppercase' }}>{m.type}</div>
                <button onClick={() => onDelete(m.uid)} style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(239, 68, 68, 0.9)', color: '#fff', border: 'none', width: 24, height: 24, borderRadius: 12, cursor: 'pointer', fontSize: 14 }}>&times;</button>
             </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- Hotels Tab ---
function AHotels({ data, save }) {
  const [editing, setEditing] = React.useState(null);
  const [form, setForm] = React.useState({});
  
  const cycleStatus = async (h) => {
    const order = { 'Not Booked': 'Pending', 'Pending': 'Booked', 'Booked': 'Not Booked' };
    await save('admin_update', null, { action: 'update_hotel', ...h, status: order[h.status] || 'Not Booked' });
  };

  const startEdit = (h) => {
    setEditing(h.uid);
    setForm({ ...h });
  };
  
  const saveEdit = async () => {
    await save('admin_update', null, { action: 'update_hotel', ...form });
    setEditing(null);
  };
  
  // Status unused per user request
  
  const getIcon = (name) => {
    if (name.includes('Chandratal')) return '⛺';
    if (name.includes('Banjara') || name.includes('Chitkul')) return '⚠️';
    return '📋';
  };

  return (
    <div style={{ animation: 'fadeIn 0.5s ease' }}>
      <div style={{ marginBottom: 32 }}>
        <div className="serif" style={{ fontSize: 24, fontWeight: 700, color: '#111', textTransform: 'uppercase', letterSpacing: '.05em' }}>Hotel Booking Tracker</div>
        <div style={{ color: '#6B7280', fontSize: 13, marginTop: 4 }}>Edit and review hotel details</div>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20, marginBottom: 40 }}>
        {(data.hotels || []).map(h => (
          <div key={h.uid} style={{ background: '#fff', border: '1px solid #E5E7EB', borderRadius: 12, overflow: 'hidden' }}>
            {editing === h.uid ? (
              <div style={{ padding: 16 }}>
                <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} style={{ width: '100%', marginBottom: 8, padding: 6, border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13 }} placeholder="Hotel Name" />
                <input value={form.day_location} onChange={e => setForm({...form, day_location: e.target.value})} style={{ width: '100%', marginBottom: 8, padding: 6, border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13 }} placeholder="Day Location" />
                <input value={form.rooms_needed} onChange={e => setForm({...form, rooms_needed: e.target.value})} style={{ width: '100%', marginBottom: 8, padding: 6, border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13 }} placeholder="Rooms needed" />
                <input value={form.rate_estimate} onChange={e => setForm({...form, rate_estimate: e.target.value})} style={{ width: '100%', marginBottom: 8, padding: 6, border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13 }} placeholder="Rate" />
                <input value={form.contact} onChange={e => setForm({...form, contact: e.target.value})} style={{ width: '100%', marginBottom: 8, padding: 6, border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13 }} placeholder="Contact" />
                <textarea value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} style={{ width: '100%', marginBottom: 8, padding: 6, resize: 'vertical', border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13 }} placeholder="Notes" rows={3} />
                <div style={{ display: 'flex', gap: 8 }}>
                  <button onClick={saveEdit} style={{ background: '#10B981', color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 4, cursor: 'pointer', fontSize: 12, fontWeight: 600 }}>Save</button>
                  <button onClick={() => setEditing(null)} style={{ background: '#E5E7EB', color: '#374151', border: 'none', padding: '6px 12px', borderRadius: 4, cursor: 'pointer', fontSize: 12, fontWeight: 600 }}>Cancel</button>
                </div>
              </div>
            ) : (
              <>
                <div style={{ padding: 16, borderBottom: '1px solid #E5E7EB' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                    <div style={{ fontWeight: 700, fontSize: 16, color: '#111' }}>{getIcon(h.name)} {h.name}</div>
                  </div>
                  <div style={{ fontSize: 12, color: '#6B7280' }}>{h.day_location}</div>
                </div>
                
                <div style={{ padding: 16, fontSize: 13 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, borderBottom: '1px solid #F3F4F6', paddingBottom: 8 }}>
                    <span style={{ color: '#6B7280' }}>Rooms needed</span>
                    <span style={{ fontWeight: 600, color: '#111' }}>{h.rooms_needed}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, borderBottom: '1px solid #F3F4F6', paddingBottom: 8 }}>
                    <span style={{ color: '#6B7280' }}>Rate estimate</span>
                    <span style={{ fontWeight: 600, color: '#059669' }}>{h.rate_estimate}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, borderBottom: '1px solid #F3F4F6', paddingBottom: 8 }}>
                    <span style={{ color: '#6B7280' }}>Contact</span>
                    <span style={{ fontWeight: 600, color: '#2563EB' }}>{h.contact}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <span style={{ color: '#6B7280', whiteSpace: 'nowrap', marginRight: 16 }}>Notes</span>
                    <span style={{ color: '#DC2626', fontSize: 12, textAlign: 'right' }}>{h.notes}</span>
                  </div>
                </div>
                
                <div style={{ padding: '12px 16px', background: '#F9FAFB', borderTop: '1px solid #E5E7EB', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                  <button onClick={() => startEdit(h)} style={{ background: '#E5E7EB', color: '#374151', border: 'none', padding: '6px 16px', borderRadius: 6, fontSize: 12, fontWeight: 700, cursor: 'pointer' }}>Edit Details</button>
                </div>
              </>
            )}
          </div>
        ))}
      </div>
      
      <div style={{ background: '#F3F4F6', padding: 12, borderRadius: 8, fontSize: 12, color: '#6B7280' }}>
        📋 Book in this order. 1) Chandratal High Camp → 2) Chitkul Heritage → 3) Jibhi Banjara → 4) All others. Chandratal books out by February for June.
      </div>
    </div>
  );
}

// Export components to window at the absolute end
window.Components = {
  PrayerFlags,
  MtnDiv,
  MtnDivFlip,
  Stars,
  DayCard,
  AdminLogin,
  AdminDashboard,
  AQA,
  AWhatsApp,
  AContacts,
  AHotels,
  AGallery,
  DkF,
  DkSel
};
Back to Directory �������}�!1AQa"q2���#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������������� ������w�!1AQaq"2�B���� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz������������������������������������������������������������������������ ��?��_��+��?��(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(�����