����JFIF��`�`�����Viewing File: /home/u820193700/domains/spiti2026im.in/public_html/js/main.js
function App() {
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    const check = () => {
      if (window.Components && window.C && window.days) setReady(true);
      else setTimeout(check, 50);
    };
    check();
  }, []);

  const [view, setView] = React.useState(window.INITIAL_VIEW || "pub");
  const [data, setData] = React.useState({ regs: [], interests: [], qa: [], contacts: [], hotels: [], gallery: [] });
  const [adminUser, setAdminUser] = React.useState(null);
  const [adminTab, setAdminTab] = React.useState("overview");
  const [apiError, setApiError] = React.useState(null);

  const fetchData = async () => {
    try {
      setApiError(null);
      const res = await fetch((window.BASE_API || "api/") + "admin_actions.php?action=get_data").catch(e => { throw new Error("Network error or Blocked request: " + e.message); });
      if (res.ok) {
        const json = await res.json();
        if (json.regs) setData(json);
      } else {
        const text = await res.text();
        setApiError(`API Error ${res.status}: ${text.substring(0, 100)}`);
      }
    } catch (e) {
      console.error("Fetch error:", e);
      setApiError(e.message);
    }
  };

  React.useEffect(() => {
    if (view === "admin") fetchData();
  }, [view]);

  if (!ready) return <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#888', fontSize: 14 }}>Initializing Spiti Expedition...</div>;

  const { PrayerFlags, MtnDiv, MtnDivFlip, Stars, DayCard, AdminLogin, AdminDashboard, DkF, DkSel } = window.Components;
  const { C, days: ALL_DAYS, exclusives: EXCLUSIVES, db, uid, fmtDate, cleanPhone } = window;


  const save = async (key, val, body = {}) => {
    const api = window.BASE_API || "api/";
    if (key === "regs" || key === "interests") {
      const res = await fetch(api + "register.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...body, type: key === "interests" ? "interest" : "full" }),
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok) { 
        if (view === "admin") fetchData(); 
        return { success: true }; 
      }
      return { success: false, error: json.error || 'Submission failed. Please try again.' };
    } else if (key === "admin_update") {
      const res = await fetch(api + "admin_actions.php?action=" + body.action, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      if (res.ok) fetchData();
    } else if (key === "contacts") {
      const res = await fetch(api + "admin_actions.php?action=add_contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      if (res.ok) fetchData();
    } else if (key === "refresh") {
      fetchData();
    }
  };

  const onLogin = async (username, password) => {
    try {
      const res = await fetch((window.BASE_API || "api/") + "login.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });
      const text = await res.text();
      let json;
      try {
        json = JSON.parse(text);
      } catch (e) {
        throw new Error("Invalid server response: " + text.substring(0, 50));
      }

      if (res.ok && json.success) {
        setAdminUser(json.admin);
        setView("admin");
        return { success: true };
      }
      return { success: false, message: json.message || json.error || "Login failed" };
    } catch (e) {
      console.error("Login catch:", e);
      return { success: false, message: e.message.includes("fetch") ? "Network connection blocked" : e.message };
    }
  };

  const renderContent = () => {
    if (!data)
      return (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", color: C.inkLight, fontSize: 16 }}>
          Loading Expedition Data...
        </div>
      );

    if (view === "login")
      return <AdminLogin onLogin={onLogin} onBack={() => setView("pub")} />;

    if (view === "admin") {
      return (
        <AdminDashboard
          data={data}
          save={save}
          tab={adminTab}
          setTab={setAdminTab}
          onLogout={() => setView("pub")}
        />
      );
    }

    return <PublicPage data={data} save={save} onAdmin={() => setView("login")} />;
  };

  return (
    <React.Fragment>
      {apiError && (
        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, background: '#ef4444', color: 'white', padding: '10px 20px', zIndex: 10000, textAlign: 'center', fontSize: 13, fontWeight: 700 }}>
          ⚠️ API Connection Error: {apiError}. <button onClick={() => window.location.reload()} style={{ background: 'white', color: '#ef4444', border: 'none', padding: '2px 8px', borderRadius: 4, marginLeft: 10, cursor: 'pointer' }}>Retry</button>
        </div>
      )}
      {renderContent()}
    </React.Fragment>
  );
}

function PublicPage({ data, save, onAdmin }) {
  if (!window.Components) return null;
  const { C, days: ALL_DAYS, exclusives: EXCLUSIVES, db, uid, fmtDate, cleanPhone } = window;
  const { PrayerFlags, MtnDiv, MtnDivFlip, Stars, DayCard, AdminLogin, AdminDashboard, DkF, DkSel } = window.Components;

  const [formType, setFormType] = React.useState("interest");
  const [fields, setFields] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [activeDay, setActiveDay] = React.useState(0);
  const [formError, setFormError] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);
  const [fullScreenMedia, setFullScreenMedia] = React.useState(null);

  const set = (k, v) => { setFormError(''); setFields((f) => ({ ...f, [k]: v })); };
  const activeRegsCount = data.regs.filter(r => r.status === 'confirmed').length;
  const spotsLeft = Math.max(0, 15 - activeRegsCount);

  // Public Q&A and Hotel state
  const [publicQA, setPublicQA] = React.useState([]);
  const [hotels, setHotels] = React.useState([]);
  const [gallery, setGallery] = React.useState([
    { uid: 'd1', type: 'image', url: 'https://images.unsplash.com/photo-1589308454676-476239634cc3?w=800&q=80', title: 'The High Passes' },
    { uid: 'd2', type: 'image', url: 'https://images.unsplash.com/photo-1520202157774-6725227807c4?w=800&q=80', title: 'Key Monastery' },
    { uid: 'd3', type: 'youtube', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ', title: 'Expedition Trailer' }
  ]);
  const [qaForm, setQaForm] = React.useState({ asked_by: '', question: '' });
  const [qaSubmitted, setQaSubmitted] = React.useState(false);
  const [qaLoading, setQaLoading] = React.useState(false);

  React.useEffect(() => {
    fetch('api/qa_public.php')
      .then(r => r.json())
      .then(d => setPublicQA(d.qa || []))
      .catch(() => { });

    fetch('api/get_hotels.php')
      .then(r => r.json())
      .then(d => setHotels(d.hotels || []))
      .catch(() => { });

    fetch('api/get_gallery.php')
      .then(r => r.json())
      .then(d => {
        if (d.gallery && d.gallery.length > 0) setGallery(d.gallery);
      })
      .catch(() => { });
  }, []);

  const galleryRef = React.useRef(null);
  const scrollGallery = (dir) => {
    if (galleryRef.current) {
      const scrollAmount = 340;
      galleryRef.current.scrollBy({ left: dir * scrollAmount, behavior: 'smooth' });
    }
  };

  const submitQuestion = async () => {
    if (!qaForm.question.trim() || qaForm.question.trim().length < 5) return;
    setQaLoading(true);
    try {
      const res = await fetch('api/qa_public.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(qaForm),
      });
      if (res.ok) {
        setQaSubmitted(true);
        setQaForm({ asked_by: '', question: '' });
      }
    } catch (e) { }
    setQaLoading(false);
  };

  const handleSubmit = async () => {
    setFormError('');
    // Sanitize phone: strip +91 and non-digits, limit to 10
    const rawPhone = (fields.phone || '');
    const cleanPhone = rawPhone.replace(/[^0-9]/g, '');

    // Basic mandatory checks
    if (!fields.name || !fields.name.trim()) { setFormError('Name is required.'); return; }
    if (!cleanPhone || cleanPhone.length !== 10) { setFormError('Enter a valid 10-digit phone number.'); return; }
    if (!fields.city || !fields.city.trim()) { setFormError('City is required.'); return; }

    if (formType === 'full') {
      if (!fields.bike || !fields.bike.trim()) { setFormError('Bike model is required.'); return; }
      if (!fields.blood || !fields.blood.trim()) { setFormError('Blood group is required.'); return; }
      if (!fields.tshirt || !fields.tshirt.trim()) { setFormError('T-Shirt size is required.'); return; }
      if (!fields.em_name || !fields.em_name.trim()) { setFormError('Emergency contact name is required.'); return; }
      if (!fields.em_phone || !fields.em_phone.trim()) { setFormError('Emergency contact number is required.'); return; }
      if (!fields.experience || !fields.experience.trim()) { setFormError('Riding experience is required.'); return; }
    }

    setSubmitting(true);
    const result = await save(formType === "interest" ? "interests" : "regs", null, { ...fields, phone: cleanPhone });
    setSubmitting(false);
    if (result && result.success) {
      setSubmitted(true);
    } else {
      setFormError(result?.error || 'Submission failed. Please try again.');
    }
  };

  return (
    <div style={{ background: C.stonePale }}>
      {/* Full Screen Modal */}
      {fullScreenMedia && (
        <div
          onClick={() => setFullScreenMedia(null)}
          style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", background: "rgba(0,0,0,0.92)", zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center", cursor: "zoom-out", animation: "fadeIn 0.2s ease" }}
        >
          <div style={{ position: "absolute", top: 24, right: 32, color: "rgba(255,255,255,0.6)", fontSize: 40, fontWeight: 300 }}>&times;</div>
          <img
            src={fullScreenMedia.url.startsWith('http') ? fullScreenMedia.url : './' + fullScreenMedia.url}
            style={{ maxWidth: "90%", maxHeight: "90vh", objectFit: "contain", borderRadius: 12, boxShadow: "0 24px 60px rgba(0,0,0,0.8)" }}
            onClick={(e) => e.stopPropagation()}
            alt={fullScreenMedia.title}
          />
        </div>
      )}

      <PrayerFlags height={8} />

      {/* Navigation */}
      <nav className="glass-dark" style={{ padding: "14px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", position: "sticky", top: 0, zIndex: 100 }}>
        <div>
          <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 11, letterSpacing: ".15em", textTransform: "uppercase", fontFamily: 'var(--font-heading)' }}>Avahan Motors</div>
          <div style={{ color: C.nightGlow, fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", marginTop: 2 }}>Spiti Valley 2026</div>
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <button onClick={() => document.getElementById("join").scrollIntoView({ behavior: "smooth" })} style={{ background: C.saffron, color: "#fff", border: "none", padding: "8px 20px", borderRadius: 8, fontWeight: 700, fontSize: 13, cursor: "pointer" }}>Register</button>
          <button onClick={onAdmin} style={{ background: "transparent", color: C.inkPale, border: `1px solid ${C.nightLight}`, padding: "8px 14px", borderRadius: 8, fontSize: 12, cursor: "pointer" }}>Admin</button>
        </div>
      </nav>

      {/* Hero */}
      <header style={{ background: `linear-gradient(180deg, ${C.night} 0%, ${C.nightMid} 70%, ${C.nightLight} 100%)`, padding: "100px 24px 40px", position: "relative", textAlign: "center", overflow: "hidden" }}>
        <Stars count={150} />
        <div className="fade-in" style={{ position: "relative" }}>
          <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 12, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 20 }}>June 10 – 20, 2026 · Limited to 15 Riders</div>
          <h1 className="serif" style={{ fontSize: "clamp(40px, 8vw, 84px)", color: "#fff", lineHeight: 1.05, marginBottom: 20 }}>
            The Spiti Valley<br />
            <span style={{ color: C.saffronLight, fontStyle: "italic" }}>High Altitude Quest</span>
          </h1>
          <p className="serif" style={{ color: C.inkPale, fontSize: 18, fontStyle: "italic", maxWidth: 600, margin: "0 auto 40px", lineHeight: 1.8 }}>
            "A journey from the city's hum to the silence of the Moon Lake."
          </p>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <button onClick={() => { setFormType("full"); document.getElementById("join").scrollIntoView({ behavior: "smooth" }) }} style={{ background: C.saffron, color: "#fff", border: "none", padding: "16px 36px", borderRadius: 10, fontWeight: 700, fontSize: 16, cursor: "pointer" }}>Join the Crew — ₹75K</button>
            <button onClick={() => { setFormType("interest"); document.getElementById("join").scrollIntoView({ behavior: "smooth" }) }} style={{ background: "transparent", color: C.saffronLight, border: `2px solid ${C.saffronLight}`, padding: "16px 36px", borderRadius: 10, fontWeight: 700, fontSize: 16, cursor: "pointer" }}>Get Itinerary →</button>
          </div>
          {spotsLeft <= 5 && spotsLeft > 0 && <div style={{ marginTop: 24, fontSize: 14, color: "#F87171", fontWeight: 700 }}>⚡ Rare Opportunity: Only {spotsLeft} slots left.</div>}
        </div>
      </header>

      <MtnDiv fill={C.stone} above={C.nightLight} />

      {/* Stats */}
      <div className="stats-grid" style={{ background: C.stone, borderTop: `1px solid ${C.stoneDeep}20` }}>
        {[["15", "Riders"], ["1,369 km", "Total Ride"], ["10", "Days"], ["4,590m", "Peak Alt"], ["Jun 10", "Departure"], [spotsLeft.toString(), "Available"]].map(([v, l]) => (
          <div key={l} style={{ padding: "30px 20px", textAlign: "center", borderRight: `1px solid ${C.stoneDeep}10` }}>
            <div className="serif" style={{ color: C.saffronPale, fontSize: 32, fontWeight: 700 }}>{v}</div>
            <div style={{ color: C.inkPale, fontSize: 11, textTransform: "uppercase", letterSpacing: ".15em", marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>

      <MtnDivFlip fill={C.stonePale} above={C.stone} />

      {/* Itinerary */}
      <section style={{ padding: "80px 24px", textAlign: "center" }}>
        <div style={{ marginBottom: 44 }}>
          <div style={{ color: C.ochre, fontWeight: 700, fontSize: 12, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 12 }}>The Journey Map</div>
          <h2 style={{ fontSize: "clamp(28px, 5vw, 44px)", color: C.inkDark, fontWeight: 500 }}>Ten days of thin air & thick memories.</h2>
        </div>

        <div className="day-tabs-wrap" style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center", marginBottom: 32 }}>
          {ALL_DAYS.map((d, i) => (
            <button key={d.n} onClick={() => setActiveDay(i)} style={{ background: activeDay === i ? ALL_DAYS[i].accent : "#fff", color: activeDay === i ? "#fff" : C.inkMid, border: `1.5px solid ${activeDay === i ? ALL_DAYS[i].accent : C.stoneMid}40`, padding: "8px 20px", borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: "pointer" }}>Day {d.n}</button>
          ))}
        </div>

        <DayCard day={ALL_DAYS[activeDay]} />
      </section>

      {/* Exclusives */}
      <MtnDiv fill={C.glacierDeep} above={C.stonePale} />
      <section style={{ background: `linear-gradient(180deg, ${C.glacierDeep} 0%, ${C.glacier} 100%)`, padding: "80px 24px" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div style={{ color: C.glacierPale, fontWeight: 700, fontSize: 12, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 16 }}>The Avahan Difference</div>
          <h2 className="serif" style={{ fontSize: "clamp(24px, 5vw, 40px)", color: "#fff", fontWeight: 400 }}>Beyond the standard trail.</h2>
        </div>
        <div className="exclusives-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24, maxWidth: 1100, margin: "0 auto" }}>
          {EXCLUSIVES.map(([title, desc, day, accent, imgUrl]) => (
            <div key={title} className="glass" style={{ position: "relative", borderRadius: 16, overflow: "hidden", minHeight: 240, borderTop: `6px solid ${accent}`, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
              <img src={imgUrl} alt={title} style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 }} />
              <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", background: "linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%)", zIndex: 1 }} />
              <div style={{ position: "relative", zIndex: 2, padding: "24px 20px" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                  <h3 className="serif" style={{ color: "#fff", fontSize: 20 }}>{title}</h3>
                  <span className="glass" style={{ fontSize: 10, color: "#fff", padding: "4px 10px", borderRadius: 6, fontWeight: 700 }}>{day}</span>
                </div>
                <p style={{ color: "rgba(255,255,255,0.85)", fontSize: 14, lineHeight: 1.6 }}>{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Gallery Section */}
      <MtnDiv fill={C.night} above={C.glacier} />
      <section style={{ background: C.night, padding: "60px 24px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 8 }}>Expedition Gallery</div>
            <h2 className="serif" style={{ fontSize: "clamp(24px, 5vw, 40px)", color: "#fff", fontWeight: 400 }}>Glimpses of the High Quest</h2>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginBottom: 24 }}>
            <button
              onClick={() => scrollGallery(-1)}
              className="glass scroll-btn"
              aria-label="Previous"
            >
              ←
            </button>
            <button
              onClick={() => scrollGallery(1)}
              className="glass scroll-btn"
              aria-label="Next"
            >
              →
            </button>
          </div>

          <div className="gallery-scroll-container" ref={galleryRef}>
            {gallery.map((m, i) => (
              <div key={m.uid} className="glass gallery-card">
                {m.type === 'image' || m.type === 'online_img' ? (
                  <>
                    <img
                      src={m.url.startsWith('http') ? m.url : (window.BASE_UPLOADS || "") + m.url}
                      style={{ width: '100%', height: 240, objectFit: 'cover', cursor: 'zoom-in' }}
                      alt={m.title}
                      onClick={() => setFullScreenMedia(m)}
                    />
                    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, background: 'linear-gradient(transparent, rgba(0,0,0,0.8))', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ color: '#fff', fontSize: 13, fontWeight: 600 }}>{m.title}</span>
                      <a
                        href={(window.BASE_API || "api/") + `download.php?url=${encodeURIComponent(m.url)}&title=${encodeURIComponent(m.title)}`}
                        download={true}
                        target="_blank"
                        style={{ background: C.saffron, color: '#fff', padding: '4px 10px', borderRadius: 4, fontSize: 11, fontWeight: 700, textDecoration: 'none' }}
                      >
                        {m.type === 'video' ? 'View 🎥' : 'Download 📸'}
                      </a>
                    </div>
                  </>
                ) : m.type === 'video' ? (
                  <video src={m.url} controls style={{ width: '100%', height: 240, objectFit: 'cover' }} />
                ) : (
                  <iframe
                    src={m.url}
                    style={{ width: '100%', height: 240, border: 'none' }}
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  ></iframe>
                )}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40, textAlign: 'center', padding: '32px', borderRadius: 20, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)' }}>
            <h3 className="serif" style={{ color: C.saffronLight, fontSize: 22, marginBottom: 8 }}>Captured by the Quest?</h3>
            <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14, marginBottom: 16 }}>Share your high-altitude moments with the community. Send your photos and videos to us.</p>
            <a href="mailto:info@spiti2026im.in" style={{ color: '#fff', fontSize: 16, fontWeight: 700, textDecoration: 'none', borderBottom: `2px solid ${C.saffron}`, paddingBottom: 4 }}>info@spiti2026im.in →</a>
          </div>
        </div>
      </section>

      {/* Registration */}
      <MtnDiv fill={C.nightLight} above={C.night} />
      <section id="join" style={{ background: `linear-gradient(180deg, ${C.nightLight} 0%, ${C.nightMid} 100%)`, padding: "40px 24px" }}>
        <div style={{ maxWidth: 600, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 24 }}>
            <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 8 }}>Reserve Your Machine</div>
            <h2 className="serif" style={{ fontSize: 28, color: "#fff" }}>{spotsLeft > 0 ? `${spotsLeft} Seats Left` : "Waitlist Only"}</h2>
          </div>

          {submitted ? (
            <div className="glass" style={{ padding: 40, textAlign: "center", borderRadius: 20 }}>
              <h3 className="serif" style={{ color: C.saffronLight, fontSize: 28, marginBottom: 12 }}>You're on the list.</h3>
              <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 15, lineHeight: 1.6 }}>We'll reach out within 24 hours to finalize your registration and share the briefing documents.</p>
            </div>
          ) : (
            <div className="glass" style={{ borderRadius: 20, overflow: "hidden" }}>
              <div style={{ display: "flex", borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
                {[["interest", "Just Curious"], ["full", "I'm In"]].map(([type, label]) => (
                  <button key={type} onClick={() => setFormType(type)} style={{ flex: 1, padding: "16px 20px", background: formType === type ? "rgba(255,255,255,0.05)" : "transparent", color: formType === type ? C.saffronLight : "rgba(255,255,255,0.4)", border: "none", borderBottom: formType === type ? `3px solid ${C.saffronLight}` : "3px solid transparent", fontSize: 13, fontWeight: 700, cursor: "pointer", letterSpacing: ".1em", textTransform: "uppercase" }}>{label}</button>
                ))}
              </div>
              <div className="form-body" style={{ padding: "24px 32px" }}>
                <div style={{ display: "grid", gap: 16 }}>
                  {[["Name", "name", "text", "e.g. Rahul Sharma"], ["Email Address", "email", "email", "e.g. rahul@example.com"], ["Contact Number", "phone", "tel", "e.g. 9876543210"], ["City", "city", "text", "e.g. Delhi"]].map(([l, k, t, p]) => (
                    <DkF key={k} label={l} value={fields[k]} onChange={(v) => set(k, v)} type={t} placeholder={p} />
                  ))}
                  {formType === "full" && (
                    <>
                      <div className="form-two-col">
                        <DkF label="Emergency Contact Person" value={fields.em_name} onChange={(v) => set("em_name", v)} placeholder="e.g. Priya Sharma" />
                        <DkF label="Emergency Contact Number" value={fields.em_phone} onChange={(v) => set("em_phone", v)} type="tel" placeholder="e.g. 9876500000" />
                      </div>
                      <DkSel label="Riding Experience" value={fields.experience} onChange={(v) => set("experience", v)} options={["Beginner (< 1 year)", "Intermediate (1-4 years)", "Professional (> 5 years)"]} />
                      <div className="form-two-col">
                        <DkF label="Blood Group" value={fields.blood} onChange={(v) => set("blood", v)} placeholder="e.g. O+" />
                        <DkSel label="T-Shirt Size" value={fields.tshirt} onChange={(v) => set("tshirt", v)} options={["S", "M", "L", "XL", "XXL"]} />
                      </div>
                      <DkF label="Bike Model" value={fields.bike} onChange={(v) => set("bike", v)} placeholder="e.g. Himalayan 450" />
                      <DkF label="Medical Notes" value={fields.medical} onChange={(v) => set("medical", v)} placeholder="Any allergies or past medical history" />
                    </>
                  )}
                </div>
                {formError && (
                  <div style={{ background: 'rgba(245,158,11,0.12)', border: '1px solid rgba(245,158,11,0.35)', borderRadius: 8, padding: '10px 16px', marginTop: 16, color: '#F59E0B', fontSize: 13, fontWeight: 600 }}>
                    ⚠ {formError}
                  </div>
                )}
                <button onClick={handleSubmit} disabled={submitting} style={{ width: "100%", background: submitting ? 'rgba(245,158,11,0.5)' : C.saffron, color: "#fff", border: "none", padding: 16, borderRadius: 10, fontWeight: 700, fontSize: 14, cursor: submitting ? "not-allowed" : "pointer", marginTop: 16, textTransform: "uppercase", letterSpacing: ".1em", transition: 'background 0.2s' }}>
                  {submitting ? "Submitting..." : (formType === "interest" ? "Send Details" : "Finalize Registration")}
                </button>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Stays & Hotels Section */}
      {hotels.length > 0 && (
        <section style={{ background: C.nightMid, padding: "40px 24px", borderTop: '1px solid rgba(255,255,255,0.05)' }}>
          <div style={{ maxWidth: 1200, margin: "0 auto" }}>
            <div style={{ textAlign: "center", marginBottom: 40 }}>
              <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 8 }}>Expedition Stays</div>
              <h2 className="serif" style={{ fontSize: "clamp(22px, 4vw, 32px)", color: "#fff", fontWeight: 400 }}>Basecamps & Boutique Lodges</h2>
            </div>

            <div className="stays-grid">
              {hotels.map((h, i) => (
                <div key={i} className="glass stay-card">
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                    <div>
                      <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 2 }}>{h.day_location}</div>
                      <h3 className="serif" style={{ color: "#fff", fontSize: 17, lineHeight: 1.2 }}>{h.name}</h3>
                    </div>
                  </div>

                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, padding: "8px 0", borderTop: "1px solid rgba(255,255,255,0.05)" }}>
                    <span style={{ color: "rgba(255,255,255,0.4)" }}>Arrangement</span>
                    <span style={{ color: "#fff", fontWeight: 600 }}>{h.rooms_needed}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Q&A Section */}
      <section style={{ background: C.nightMid, padding: '40px 24px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div style={{ color: C.saffronLight, fontWeight: 700, fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', marginBottom: 8 }}>Rider Q &amp; A</div>
            <h2 className="serif" style={{ fontSize: 'clamp(22px, 4vw, 32px)', color: '#fff', fontWeight: 400 }}>Got questions? We've got answers.</h2>
          </div>

          {/* Published Q&As */}
          {publicQA.length > 0 && (
            <div className="qa-grid" style={{ marginBottom: 32, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
              {publicQA.map((q, i) => (
                <div key={q.uid || i} className="glass" style={{ borderRadius: 12, padding: '20px 24px', borderLeft: `3px solid ${C.saffron}`, background: 'rgba(255,255,255,0.03)' }}>
                  <div>
                    <div style={{ fontWeight: 700, color: '#fff', fontSize: 14, marginBottom: 6, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                      <span style={{ color: C.saffronLight, flexShrink: 0 }}>Q:</span>
                      <span>{q.question}</span>
                    </div>
                    {q.answer && (
                      <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, lineHeight: 1.6, display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 4 }}>
                        <span style={{ color: C.saffronLight, fontWeight: 700, flexShrink: 0 }}>A:</span>
                        <span>{q.answer}</span>
                      </div>
                    )}
                  </div>
                  <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.25)', marginTop: 12, textAlign: 'right' }}>— {q.asked_by || 'Anonymous'}</div>
                </div>
              ))}
            </div>
          )}

          {/* Ask a question form */}
          <div style={{ maxWidth: 600, margin: '0 auto' }}>
            <div className="glass" style={{ borderRadius: 16, padding: '32px', marginTop: 8 }}>
              {qaSubmitted ? (
                <div style={{ textAlign: 'center', padding: '20px 0' }}>
                  <div style={{ fontSize: 32, marginBottom: 12 }}>🙏</div>
                  <div className="serif" style={{ color: C.saffronLight, fontSize: 22, marginBottom: 8 }}>Question received!</div>
                  <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14 }}>We'll answer it and publish it here shortly.</div>
                  <button onClick={() => setQaSubmitted(false)} style={{ marginTop: 20, background: 'none', border: '1.5px solid rgba(255,255,255,0.2)', color: 'rgba(255,255,255,0.6)', padding: '8px 20px', borderRadius: 8, cursor: 'pointer', fontSize: 13 }}>Ask Another</button>
                </div>
              ) : (
                <>
                  <div style={{ fontWeight: 700, color: '#fff', fontSize: 16, marginBottom: 20 }}>Ask a Question</div>
                  <div style={{ display: 'grid', gap: 16 }}>
                    <div>
                      <label style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,.45)', textTransform: 'uppercase', letterSpacing: '.06em', display: 'block', marginBottom: 6 }}>Your Name (optional)</label>
                      <input
                        value={qaForm.asked_by}
                        onChange={e => setQaForm(f => ({ ...f, asked_by: e.target.value }))}
                        placeholder="e.g. Rahul"
                        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', boxSizing: 'border-box' }}
                      />
                    </div>
                    <div>
                      <label style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,.45)', textTransform: 'uppercase', letterSpacing: '.06em', display: 'block', marginBottom: 6 }}>Your Question *</label>
                      <textarea
                        value={qaForm.question}
                        onChange={e => setQaForm(f => ({ ...f, question: e.target.value }))}
                        placeholder="e.g. What's included in the ₹34K package?"
                        rows={3}
                        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', resize: 'vertical', boxSizing: 'border-box', fontFamily: 'inherit' }}
                      />
                    </div>
                    <button
                      onClick={submitQuestion}
                      disabled={qaLoading || qaForm.question.trim().length < 5}
                      style={{ background: qaLoading ? '#888' : C.saffron, color: '#fff', border: 'none', padding: '14px', borderRadius: 10, fontWeight: 700, fontSize: 15, cursor: 'pointer', opacity: qaForm.question.trim().length < 5 ? 0.5 : 1 }}
                    >
                      {qaLoading ? 'Sending...' : 'Send Question 🏔'}
                    </button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

      <footer style={{ background: C.night, padding: "40px 24px", textAlign: "center", color: "#fff", borderTop: '1px solid rgba(255,255,255,0.05)' }}>
        <div className="serif" style={{ fontSize: 24, color: C.saffronLight, marginBottom: 12 }}>Avahan Motors Pvt Ltd</div>

        <div style={{ color: "rgba(255,255,255,0.7)", fontSize: 15, lineHeight: 1.8, marginBottom: 24, fontFamily: 'var(--font-main)' }}>
          <div>📍 Bengaluru</div>
          <div>✉️ info@spiti2026im.in</div>
          <div>📞 +91 9591999999 / +91 9739184422</div>
        </div>

        <p style={{ color: "rgba(255,255,255,0.3)", fontSize: 13, letterSpacing: ".1em", textTransform: "uppercase" }}>Bangalore · Chandigarh · Spiti</p>
        <button onClick={onAdmin} style={{ marginTop: 24, background: "none", border: "none", color: "rgba(255,255,255,0.2)", cursor: "pointer", textDecoration: "underline", fontSize: 12 }}>Organiser Access</button>
      </footer>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Back to Directory �������}�!1AQa"q2���#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������������� ������w�!1AQaq"2�B���� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz������������������������������������������������������������������������ ��?��_��+��?��(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(�����