// Tour listing page & single tour detail page & booking

const ListingPage = ({ setPage, initialFilters, savedTours, toggleSaved }) => {
  const [days, setDays] = React.useState(initialFilters?.days || 'all');
  const [vibe, setVibe] = React.useState('all');
  const [region, setRegion] = React.useState('all');
  const [sort, setSort] = React.useState('duration');
  const [view, setView] = React.useState('grid');

  const filtered = React.useMemo(() => {
    let list = (window.TOURS || []).filter(Boolean).filter((t) => {
      if (days !== 'all' && t.days !== Number(days)) return false;
      if (vibe !== 'all' && t.vibe !== vibe) return false;
      if (region !== 'all' && t.region !== region) return false;
      return true;
    });
    if (sort === 'duration') list.sort((a, b) => a.days - b.days);
    if (sort === 'price-asc') list.sort((a, b) => a.price - b.price);
    if (sort === 'price-desc') list.sort((a, b) => b.price - a.price);
    return list;
  }, [days, vibe, region, sort]);

  return (
    <div className="fade-in">
      <section style={{ padding: '60px 36px 40px', borderBottom: '1px solid var(--line)' }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 16 }}>
          {filtered.length} tours · India · 1 to 7 days
        </div>
        <h1 className="serif" style={{ fontSize: 72, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 32px', lineHeight: 1 }}>
          All the <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>tours.</em>
        </h1>

        {/* Filter bar */}
        <div style={{ display: 'flex', gap: 32, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <FilterGroup label="Duration">
            {[{ id: 'all', label: 'Any' }, ...[1,2,3,4,5,6,7].map(d => ({ id: String(d), label: `${d}d` }))].map(d => (
              <button key={d.id} className={`chip ${String(days) === d.id ? 'active' : ''}`} onClick={() => setDays(d.id === 'all' ? 'all' : Number(d.id))}>
                {d.label}
              </button>
            ))}
          </FilterGroup>
          <FilterGroup label="Vibe">
            {VIBES.map(v => (
              <button key={v.id} className={`chip ${vibe === v.id ? 'active' : ''}`} onClick={() => setVibe(v.id)}>
                {v.icon} {v.label}
              </button>
            ))}
          </FilterGroup>
          <FilterGroup label="Region">
            {REGIONS.map(r => (
              <button key={r.id} className={`chip ${region === r.id ? 'active' : ''}`} onClick={() => setRegion(r.id)}>{r.label}</button>
            ))}
          </FilterGroup>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 12, alignItems: 'flex-end' }}>
            <FilterGroup label="Sort">
              <select value={sort} onChange={(e) => setSort(e.target.value)}
                style={{ padding: '7px 12px', border: '1px solid var(--line)', borderRadius: 999, background: 'var(--white)', fontSize: 13 }}>
                <option value="duration">Duration ↑</option>
                <option value="price-asc">Price ↑</option>
                <option value="price-desc">Price ↓</option>
              </select>
            </FilterGroup>
            <div style={{ display: 'flex', border: '1px solid var(--line)', borderRadius: 999, overflow: 'hidden' }}>
              {['grid', 'list'].map(v => (
                <button key={v} onClick={() => setView(v)}
                  style={{ padding: '7px 14px', fontSize: 13, background: view === v ? 'var(--ink)' : 'transparent', color: view === v ? 'white' : 'var(--ink)' }}>
                  {v}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Results */}
      <section style={{ padding: '40px 36px 100px' }}>
        {view === 'grid' ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {filtered.map((t) => (
              <TourCardLarge key={t.id} tour={t}
                saved={savedTours.includes(t.id)}
                onSave={() => toggleSaved(t.id)}
                onClick={() => setPage({ name: 'detail', id: t.id })} />
            ))}
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {filtered.map((t, i) => (
              <TourRowLarge key={t.id} tour={t} index={i}
                saved={savedTours.includes(t.id)}
                onSave={() => toggleSaved(t.id)}
                onClick={() => setPage({ name: 'detail', id: t.id })} />
            ))}
          </div>
        )}
      </section>
      <Footer />
    </div>
  );
};

const FilterGroup = ({ label, children }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 8 }}>{label}</div>
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{children}</div>
  </div>
);

const TourCardLarge = ({ tour, saved, onSave, onClick }) => (
  <div style={{ cursor: 'pointer' }} onClick={onClick}>
    <div style={{ aspectRatio: '4/5', marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
      <Placeholder tone={tour.hero.tone} img={tour.hero.img} label={tour.hero.label} />
      <button
        onClick={(e) => { e.stopPropagation(); onSave(); }}
        style={{
          position: 'absolute', top: 14, right: 14,
          width: 36, height: 36, borderRadius: 18,
          background: saved ? 'var(--clay)' : 'var(--bg)',
          color: saved ? 'white' : 'var(--ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
        <Icon name="heart" size={15} />
      </button>
      <div style={{ position: 'absolute', top: 14, left: 14, background: 'var(--bg)', padding: '4px 10px', borderRadius: 999 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          {tour.days}{tour.days === 1 ? 'd' : 'd'} · {tour.vibe}
        </span>
      </div>
    </div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
      <h3 className="serif" style={{ fontSize: 24, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>{tour.title}</h3>
    </div>
    <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 14 }}>{tour.tagline}</p>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)' }}>
        {tour.location}
      </span>
      <span className="serif" style={{ fontSize: 18, fontWeight: 500 }}>₹{tour.price.toLocaleString('en-IN')}</span>
    </div>
  </div>
);

const TourRowLarge = ({ tour, index, saved, onSave, onClick }) => (
  <div onClick={onClick} style={{
    display: 'grid', gridTemplateColumns: '60px 140px 1fr 180px 120px 40px',
    gap: 24, padding: '24px 0',
    borderTop: index === 0 ? '1px solid var(--ink)' : '1px solid var(--line)',
    alignItems: 'center', cursor: 'pointer',
  }}>
    <div className="numeral" style={{ fontSize: 40, color: 'var(--ink)' }}>{tour.days}</div>
    <div style={{ width: 140, height: 100 }}>
      <Placeholder tone={tour.hero.tone} img={tour.hero.img} label="" />
    </div>
    <div>
      <h3 className="serif" style={{ fontSize: 26, fontWeight: 400, margin: '0 0 4px', letterSpacing: '-0.02em' }}>{tour.title}</h3>
      <div style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{tour.tagline}</div>
    </div>
    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)' }}>
      {tour.location}
    </div>
    <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>₹{tour.price.toLocaleString('en-IN')}</div>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
      <Icon name="arrow" size={18} />
    </div>
  </div>
);

/* ================== DETAIL PAGE ================== */

const DetailPage = ({ id, setPage, savedTours, toggleSaved, addToBooking }) => {
  const _tours = (window.TOURS || []).filter(Boolean);
  const tour = _tours.find((t) => t.id === id) || _tours[0];
  const [activeDay, setActiveDay] = React.useState(1);
  const [guests, setGuests] = React.useState(2);
  const [date, setDate] = React.useState('');
  const [dateError, setDateError] = React.useState(false);

  React.useEffect(() => { if (!tour && _tours.length > 0) setPage({ name: 'home' }); }, []);
  if (!tour) return <div style={{padding:'80px 40px',textAlign:'center',color:'var(--muted)'}}>Loading...</div>;

  const saved = savedTours.includes(tour.id);

  return (
    <div className="fade-in">
      {/* Hero */}
      <section style={{ padding: '32px 36px 0' }}>
        <button className="btn btn-ghost" onClick={() => setPage({ name: 'listing' })} style={{ marginBottom: 24 }}>
          <Icon name="arrowLeft" size={14} /> All tours
        </button>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>
              <span style={{ color: 'var(--clay)' }}>✶</span> {tour.location} · {tour.vibe}
            </div>
            <h1 className="serif" style={{ fontSize: 80, fontWeight: 300, letterSpacing: '-0.04em', margin: 0, lineHeight: 0.95 }}>
              {tour.title.split(' ').map((w, i) => (
                <span key={i} style={i === tour.title.split(' ').length - 1 ? { fontStyle: 'italic', color: 'var(--clay)' } : {}}>
                  {w}{i < tour.title.split(' ').length - 1 ? ' ' : ''}
                </span>
              ))}
            </h1>
            <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: 560, marginTop: 24, lineHeight: 1.4 }}>
              {tour.tagline}.
            </p>
            <div style={{ display: 'flex', gap: 32, marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
              <Stat label="Duration" value={`${tour.days} ${tour.days === 1 ? 'day' : 'days'}`} />
              <Stat label="Group size" value={tour.guests} />
              <Stat label="Starts at" value={tour.startsAt} />
              <Stat label="From" value={`₹${tour.price.toLocaleString('en-IN')}`} />
            </div>
          </div>
          <div style={{ aspectRatio: '1/1', borderRadius: 4, overflow: 'hidden' }}>
            <Placeholder tone={tour.hero.tone} img={tour.hero.img} label={tour.hero.label} />
          </div>
        </div>
      </section>

      {/* Ticker of highlights */}
      <Ticker items={tour.highlights} />

      {/* Day-by-day itinerary */}
      <section style={{ padding: '80px 36px', background: 'var(--bg-2)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>Day by day</div>
            <h2 className="serif" style={{ fontSize: 54, fontWeight: 300, letterSpacing: '-0.03em', margin: 0, lineHeight: 1 }}>
              Your<br />week, <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>sketched.</em>
            </h2>
            <p style={{ marginTop: 20, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6, maxWidth: 360 }}>
              Times are rough. Your guide adjusts to the weather, your pace, and anything you want to linger on.
            </p>
          </div>
          <div style={{ position: 'relative' }}>
            {/* Vertical curved spine */}
            <svg style={{ position: 'absolute', left: 17, top: 36, bottom: 36, width: 2, height: 'calc(100% - 72px)' }} preserveAspectRatio="none" viewBox="0 0 2 100">
              <line x1="1" y1="0" x2="1" y2="100" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 3" />
            </svg>
            {tour.itinerary.map((d) => (
              <div key={d.day} style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 24, marginBottom: 24, alignItems: 'flex-start' }}>
                <div className={`day-dot ${activeDay === d.day ? 'active' : ''}`} onClick={() => setActiveDay(d.day)}>
                  {d.day}
                </div>
                <div style={{
                  background: 'var(--white)',
                  border: '1px solid var(--line)',
                  borderRadius: 4,
                  padding: 24,
                  cursor: 'pointer',
                }} onClick={() => setActiveDay(activeDay === d.day ? 0 : d.day)}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>
                        Day {d.day}
                      </div>
                      <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, margin: 0, letterSpacing: '-0.02em' }}>
                        {d.title}
                      </h3>
                    </div>
                    <Icon name={activeDay === d.day ? 'minus' : 'plus'} size={18} />
                  </div>
                  {activeDay === d.day && (
                    <div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                      {d.stops.map((s, i) => (
                        <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 16, padding: '10px 0', alignItems: 'center', borderBottom: i < d.stops.length - 1 ? '1px dashed var(--line)' : 'none' }}>
                          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em' }}>
                            STOP {String(i + 1).padStart(2, '0')}
                          </div>
                          <div style={{ fontSize: 15 }}>{s}</div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Included / Not included */}
      <section style={{ padding: '80px 36px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          <IncludesCard title="What’s included" tone="sage" items={[
            'All stays (handpicked homestays & boutique hotels)',
            'Inter-city transport by car or local transport',
            'Daily breakfast + 2 signature meals',
            'English-speaking local guide',
            'Permits, entry fees, activity costs',
            'Water bottles, small first-aid kit',
          ]} />
          <IncludesCard title="Not included" tone="muted" items={[
            'Flights or trains to start city',
            'Alcohol & optional upgrades',
            'Personal shopping',
            'Travel insurance',
            'Anything labeled “optional” in itinerary',
          ]} />
        </div>
      </section>

      {/* Booking */}
      <section style={{ padding: '80px 36px', background: 'var(--ink)', color: 'var(--bg)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <h2 className="serif" style={{ fontSize: 64, fontWeight: 300, letterSpacing: '-0.03em', margin: 0, lineHeight: 1 }}>
              Ready for<br />this <em style={{ fontStyle: 'italic', color: 'var(--butter)' }}>one?</em>
            </h2>
            <p style={{ marginTop: 20, color: 'rgba(255,255,255,0.7)', maxWidth: 460, fontSize: 16, lineHeight: 1.6 }}>
              We reserve spots in the order we receive them. 20% confirms your seat; the rest is due two weeks before departure. Cancel free up to 30 days out.
            </p>
          </div>
          <div style={{ background: 'var(--bg)', color: 'var(--ink)', padding: 32, borderRadius: 4 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20, alignItems: 'flex-end' }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>Per person, from</span>
              <span className="serif" style={{ fontSize: 40, fontWeight: 500, lineHeight: 1 }}>₹{tour.price.toLocaleString('en-IN')}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
              <label style={{ display: 'block' }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>Start date <span style={{ color: 'var(--clay)' }}>*</span></span>
                <input type="date" value={date} onChange={(e) => { setDate(e.target.value); setDateError(false); }}
                  min={new Date(Date.now() + 86400000).toISOString().split('T')[0]}
                  style={{ width: '100%', marginTop: 4, padding: '10px 12px', border: `1px solid ${dateError || !date ? 'var(--clay)' : 'var(--line)'}`, borderRadius: 2, fontSize: 14, background: 'var(--white)' }} />
                {dateError && <span style={{ fontSize: 11, color: 'var(--clay)', marginTop: 4, display: 'block' }}>Please select a travel date</span>}
              </label>
              <label style={{ display: 'block' }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>Travellers</span>
                <div style={{ marginTop: 4, padding: '6px 6px 6px 12px', border: '1px solid var(--line)', borderRadius: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--white)' }}>
                  <span style={{ fontSize: 14 }}>{guests}</span>
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button onClick={() => setGuests(Math.max(1, guests - 1))} style={{ width: 28, height: 28, borderRadius: 2, border: '1px solid var(--line)' }}><Icon name="minus" size={12} /></button>
                    <button onClick={() => setGuests(Math.min(12, guests + 1))} style={{ width: 28, height: 28, borderRadius: 2, border: '1px solid var(--line)' }}><Icon name="plus" size={12} /></button>
                  </div>
                </div>
              </label>
            </div>
            <div style={{ paddingTop: 16, borderTop: '1px solid var(--line)', marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, fontSize: 14 }}>
                <span>{guests} × ₹{tour.price.toLocaleString('en-IN')}</span>
                <span>₹{(guests * tour.price).toLocaleString('en-IN')}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, fontSize: 14, color: 'var(--muted)' }}>
                <span>Taxes & fees</span>
                <span>₹{Math.round(guests * tour.price * 0.05).toLocaleString('en-IN')}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 8, borderTop: '1px dashed var(--line)', marginTop: 8 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Total</span>
                <span className="serif" style={{ fontSize: 28, fontWeight: 500 }}>₹{Math.round(guests * tour.price * 1.05).toLocaleString('en-IN')}</span>
              </div>
            </div>
            <button className="btn btn-clay" style={{ width: '100%', justifyContent: 'center', padding: 16, fontSize: 15 }}
              onClick={() => { if (!date) { setDateError(true); return; } addToBooking(tour.id, guests, date); setPage({ name: 'booking', id: tour.id, guests, date }); }}>
              Reserve this tour →
            </button>
            <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', marginTop: 8, fontSize: 13 }}
              onClick={() => toggleSaved(tour.id)}>
              <Icon name="heart" size={14} /> {saved ? 'Saved' : 'Save for later'}
            </button>
          </div>
        </div>
      </section>

      {/* Related */}
      <section style={{ padding: '80px 36px' }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>Other tours you might like</div>
        <h2 className="serif" style={{ fontSize: 40, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 32px' }}>
          If you have a bit <em style={{ fontStyle: 'italic' }}>more time…</em>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {TOURS.filter(t => t.id !== tour.id).slice(0, 3).map(t => (
            <TourCardLarge key={t.id} tour={t}
              saved={savedTours.includes(t.id)}
              onSave={() => toggleSaved(t.id)}
              onClick={() => { setPage({ name: 'detail', id: t.id }); window.scrollTo(0, 0); }} />
          ))}
        </div>
      </section>

      <Footer />
    </div>
  );
};

const Stat = ({ label, value }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>{label}</div>
    <div className="serif" style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{value}</div>
  </div>
);

const IncludesCard = ({ title, items, tone }) => (
  <div style={{ background: tone === 'sage' ? 'var(--sage-soft)' : 'var(--bg-2)', padding: 32, borderRadius: 4 }}>
    <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, margin: '0 0 20px', letterSpacing: '-0.02em' }}>{title}</h3>
    {items.map((item, i) => (
      <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 10, padding: '10px 0', borderBottom: i < items.length - 1 ? '1px dashed rgba(0,0,0,0.12)' : 'none', alignItems: 'flex-start' }}>
        <div style={{ color: tone === 'sage' ? 'var(--sage)' : 'var(--muted)', marginTop: 2 }}>
          {tone === 'sage' ? <Icon name="check" size={15} /> : <Icon name="close" size={14} />}
        </div>
        <div style={{ fontSize: 15, lineHeight: 1.4 }}>{item}</div>
      </div>
    ))}
  </div>
);

/* ================== BOOKING PAGE ================== */

const BookingPage = ({ tourId, guests, date, setPage }) => {
  const _btours = (window.TOURS || []).filter(Boolean);
  const tour = _btours.find(t => t.id === tourId) || _btours[0];
  if (!tour) return null;
  const [step, setStep] = React.useState(1);
  const [contact, setContact] = React.useState({ name: '', email: '', phone: '' });
  const [pay, setPay] = React.useState({ method: 'upi', upi: '', card: '' });

  const subtotal = (guests || 2) * tour.price;
  const tax = Math.round(subtotal * 0.05);
  const total = subtotal + tax;
  const deposit = Math.round(total * 0.20);

  return (
    <div className="fade-in" style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 36px 80px' }}>
      <button className="btn btn-ghost" onClick={() => setPage({ name: 'detail', id: tour.id })} style={{ marginBottom: 24 }}>
        <Icon name="arrowLeft" size={14} /> Back to tour
      </button>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>
        Booking · step {step} of 3
      </div>
      <h1 className="serif" style={{ fontSize: 56, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 40px', lineHeight: 1 }}>
        {step === 1 && <>Almost <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>yours.</em></>}
        {step === 2 && <>How should we <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>pay?</em></>}
        {step === 3 && <>You’re <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>going.</em></>}
      </h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'start' }}>
        <div>
          {/* Step bar */}
          <div style={{ display: 'flex', gap: 12, marginBottom: 32 }}>
            {['Contact', 'Payment', 'Confirm'].map((s, i) => (
              <div key={s} style={{ flex: 1, display: 'flex', gap: 10, alignItems: 'center' }}>
                <div className={`day-dot ${step >= i + 1 ? 'active' : ''}`} style={{ width: 30, height: 30, fontSize: 13 }}>
                  {step > i + 1 ? <Icon name="check" size={14} /> : i + 1}
                </div>
                <div style={{ fontSize: 13, fontWeight: step === i + 1 ? 500 : 400, color: step >= i + 1 ? 'var(--ink)' : 'var(--muted)' }}>
                  {s}
                </div>
              </div>
            ))}
          </div>

          {step === 1 && (
            <div style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 4, padding: 32 }}>
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 400, margin: '0 0 20px' }}>Who’s leading this trip?</h3>
              {[
                { key: 'name', label: 'Full name', placeholder: 'As on your ID', type: 'text' },
                { key: 'email', label: 'Email', placeholder: 'hello@you.com', type: 'email' },
                { key: 'phone', label: 'Phone', placeholder: '+91', type: 'tel' },
              ].map(f => (
                <label key={f.key} style={{ display: 'block', marginBottom: 16 }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>{f.label}</span>
                  <input type={f.type} placeholder={f.placeholder} value={contact[f.key]}
                    onChange={(e) => setContact({ ...contact, [f.key]: e.target.value })}
                    style={{ width: '100%', marginTop: 4, padding: 12, border: '1px solid var(--line)', borderRadius: 2, fontSize: 15 }} />
                </label>
              ))}
              <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 16 }}>
                We’ll send your confirmation and pre-trip packet to this email.
              </div>
              <button className="btn btn-dark" style={{ width: '100%', justifyContent: 'center', padding: 14 }}
                disabled={!contact.name || !contact.email}
                onClick={() => setStep(2)}>
                Continue to payment →
              </button>
            </div>
          )}

          {step === 2 && (
            <div style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 4, padding: 32 }}>
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 400, margin: '0 0 8px' }}>Pay 20% now, rest closer to trip</h3>
              <p style={{ color: 'var(--muted)', fontSize: 14, margin: '0 0 24px' }}>
                Due today: <strong style={{ color: 'var(--ink)' }}>₹{deposit.toLocaleString('en-IN')}</strong>. Balance of ₹{(total - deposit).toLocaleString('en-IN')} due 14 days before departure.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 20 }}>
                {[
                  { id: 'upi', label: 'UPI' },
                  { id: 'card', label: 'Card' },
                  { id: 'netbank', label: 'Net banking' },
                ].map(m => (
                  <button key={m.id} onClick={() => setPay({ ...pay, method: m.id })}
                    style={{
                      padding: 16, textAlign: 'center',
                      border: pay.method === m.id ? '1.5px solid var(--ink)' : '1px solid var(--line)',
                      background: pay.method === m.id ? 'var(--bg-2)' : 'var(--white)',
                      borderRadius: 2, fontSize: 14, fontWeight: pay.method === m.id ? 500 : 400,
                    }}>{m.label}</button>
                ))}
              </div>
              {pay.method === 'upi' && (
                <label style={{ display: 'block', marginBottom: 16 }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>UPI ID</span>
                  <input type="text" placeholder="you@upi" value={pay.upi} onChange={(e) => setPay({ ...pay, upi: e.target.value })}
                    style={{ width: '100%', marginTop: 4, padding: 12, border: '1px solid var(--line)', borderRadius: 2, fontSize: 15 }} />
                </label>
              )}
              {pay.method === 'card' && (
                <label style={{ display: 'block', marginBottom: 16 }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>Card number</span>
                  <input type="text" placeholder="0000 0000 0000 0000" value={pay.card} onChange={(e) => setPay({ ...pay, card: e.target.value })}
                    style={{ width: '100%', marginTop: 4, padding: 12, border: '1px solid var(--line)', borderRadius: 2, fontSize: 15, fontFamily: 'JetBrains Mono, monospace' }} />
                </label>
              )}
              {pay.method === 'netbank' && (
                <div style={{ fontSize: 14, color: 'var(--muted)', padding: 16, background: 'var(--bg-2)', borderRadius: 2, marginBottom: 16 }}>
                  You’ll be redirected to your bank to complete payment.
                </div>
              )}
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-outline" onClick={() => setStep(1)}>Back</button>
                <button className="btn btn-clay" style={{ flex: 1, justifyContent: 'center', padding: 14 }}
                  onClick={() => setStep(3)}>
                  Pay ₹{deposit.toLocaleString('en-IN')} →
                </button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div style={{ background: 'var(--sage-soft)', border: '1px solid var(--sage)', borderRadius: 4, padding: 40, textAlign: 'center' }}>
              <div style={{ width: 72, height: 72, borderRadius: 36, background: 'var(--sage)', color: 'white', margin: '0 auto 24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="check" size={36} />
              </div>
              <h3 className="serif" style={{ fontSize: 36, fontWeight: 400, margin: '0 0 12px', letterSpacing: '-0.02em' }}>
                You’re <em style={{ fontStyle: 'italic' }}>confirmed</em>.
              </h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 15, maxWidth: 400, margin: '0 auto 24px', lineHeight: 1.5 }}>
                A confirmation is on its way to <strong>{contact.email || 'your email'}</strong>. Your pre-trip packet arrives 7 days before departure.
              </p>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--sage)', marginBottom: 24 }}>
                Booking reference: RMLY-{Date.now().toString().slice(-6)}
              </div>
              <button className="btn btn-sage" onClick={() => setPage({ name: 'home' })}>Back to discover</button>
            </div>
          )}
        </div>

        {/* Sticky summary */}
        <aside style={{ position: 'sticky', top: 100 }}>
          <div style={{ border: '1px solid var(--line)', borderRadius: 4, overflow: 'hidden', background: 'var(--white)' }}>
            <div style={{ height: 160 }}>
              <Placeholder tone={tour.hero.tone} img={tour.hero.img} label={tour.hero.label} />
            </div>
            <div style={{ padding: 24 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 6 }}>
                {tour.days} {tour.days === 1 ? 'day' : 'days'} · {tour.location.split(',')[0]}
              </div>
              <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, margin: '0 0 16px', letterSpacing: '-0.02em' }}>{tour.title}</h3>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 8 }}>
                <span style={{ color: 'var(--muted)' }}>Travellers</span>
                <span>{guests || 2}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 8 }}>
                <span style={{ color: 'var(--muted)' }}>Date</span>
                <span>{date || 'Flexible'}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 8 }}>
                <span style={{ color: 'var(--muted)' }}>Subtotal</span>
                <span>₹{subtotal.toLocaleString('en-IN')}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 14 }}>
                <span style={{ color: 'var(--muted)' }}>Taxes & fees</span>
                <span>₹{tax.toLocaleString('en-IN')}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 14, borderTop: '1px dashed var(--line)' }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Total</span>
                <span className="serif" style={{ fontSize: 28, fontWeight: 500 }}>₹{total.toLocaleString('en-IN')}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 13, color: 'var(--clay)' }}>
                <span>Due today (20%)</span>
                <span style={{ fontWeight: 600 }}>₹{deposit.toLocaleString('en-IN')}</span>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

const InquiryPage = ({ setPage }) => {
  const [form, setForm] = React.useState({
    name: '', phone: '', email: '', city: '',
    travelDate: '', budget: '', adults: '2', children: '0', tripType: 'Leisure / Holiday',
    accommodation: 'Standard (3-star)',
    message: '', hearAbout: 'Google Search',
  });
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [done, setDone] = React.useState(null);
  const [inqSs, setInqSs] = React.useState(window.SITE_SETTINGS || {});
  React.useEffect(() => {
    fetch('/api/settings').then(r => r.json()).then(s => { window.SITE_SETTINGS = s; setInqSs(s); }).catch(() => {});
  }, []);

  const set = (k) => (e) => { setForm(f => ({ ...f, [k]: e.target.value })); setErrors(er => ({ ...er, [k]: '' })); };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.phone.trim()) e.phone = 'Required';
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Valid email required';
    if (!form.travelDate) e.travelDate = 'Required';
    return e;
  };

  const submit = async (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setLoading(true);
    try {
      const r = await fetch('/api/inquiries', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, guests: form.adults + (form.children !== '0' ? ` adults + ${form.children} children` : ' adults') }),
      });
      const data = await r.json();
      if (r.ok) setDone(data.inquiryNo);
      else setErrors({ _: data.error || 'Submission failed. Please try again.' });
    } catch { setErrors({ _: 'Network error. Please try again.' }); }
    setLoading(false);
  };

  if (done) return (
    <div className="fade-in" style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
      <div style={{ textAlign: 'center', maxWidth: 520 }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
          <Icon name="check" size={28} color="var(--white)" />
        </div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>Inquiry Received</div>
        <h2 className="serif" style={{ fontSize: 52, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 16px', lineHeight: 1 }}>
          We'll be in <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>touch.</em>
        </h2>
        <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 24 }}>
          Your inquiry has been received. Our team will contact you within 24 hours to discuss your trip.
        </p>
        <div style={{ display: 'inline-block', background: 'var(--ink)', color: 'var(--white)', padding: '14px 28px', borderRadius: 2, marginBottom: 32 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 4 }}>Your Inquiry Number</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '0.06em' }}>{done}</div>
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <button className="btn btn-dark" onClick={() => setPage({ name: 'listing' })}>Browse Tours</button>
          <button className="btn btn-ghost" onClick={() => { setDone(null); setForm({ name:'',phone:'',email:'',city:'',travelDate:'',budget:'',adults:'2',children:'0',tripType:'Leisure / Holiday',accommodation:'Standard (3-star)',message:'',hearAbout:'Google Search' }); }}>New Inquiry</button>
        </div>
      </div>
    </div>
  );

  const Field = ({ label, required, error, children }) => (
    <div>
      <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: error ? 'var(--clay)' : 'var(--muted)', marginBottom: 6 }}>
        {label} {required && <span style={{ color: 'var(--clay)' }}>*</span>}
      </label>
      {children}
      {error && <span style={{ fontSize: 11, color: 'var(--clay)', marginTop: 4, display: 'block' }}>{error}</span>}
    </div>
  );

  const inputStyle = (err) => ({ width: '100%', padding: '10px 12px', border: `1px solid ${err ? 'var(--clay)' : 'var(--line)'}`, borderRadius: 2, fontSize: 14, background: 'var(--white)', fontFamily: 'inherit' });
  const selectStyle = { width: '100%', padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 2, fontSize: 14, background: 'var(--white)', fontFamily: 'inherit' };

  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 40 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20, paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
        <h2 className="serif" style={{ fontSize: 22, fontWeight: 400, margin: 0 }}>{title}</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {children}
      </div>
    </div>
  );

  const accomOptions = ['Budget (2-star)', 'Standard (3-star)', 'Comfort (4-star)', 'Luxury (5-star)'];

  return (
    <>
    <div className="fade-in" style={{ maxWidth: 1100, margin: '0 auto', padding: '60px 36px 80px' }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 16 }}>Plan Your Journey</div>
      <h1 className="serif" style={{ fontSize: 64, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 8px', lineHeight: 1 }}>
        Tell us about your <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>trip.</em>
      </h1>
      <p style={{ fontSize: 15, color: 'var(--muted)', marginBottom: 48, maxWidth: 520 }}>
        Fill in the details below and our travel experts will craft a personalised itinerary for you within 24 hours.
      </p>

      <form onSubmit={submit}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.6fr', gap: 48, alignItems: 'start' }}>
          <div>
            {/* Personal Info */}
            <Section title="Personal Information">
              <Field label="Full Name" required error={errors.name}>
                <input type="text" value={form.name} onChange={set('name')} placeholder="Your full name" style={inputStyle(errors.name)} />
              </Field>
              <Field label="Phone Number" required error={errors.phone}>
                <input type="tel" value={form.phone} onChange={set('phone')} placeholder="+91 XXXXX XXXXX" style={inputStyle(errors.phone)} />
              </Field>
              <Field label="Email Address" required error={errors.email}>
                <input type="email" value={form.email} onChange={set('email')} placeholder="your@email.com" style={inputStyle(errors.email)} />
              </Field>
              <Field label="City / State">
                <input type="text" value={form.city} onChange={set('city')} placeholder="Your city" style={inputStyle()} />
              </Field>
            </Section>

            {/* Trip Details */}
            <Section title="Trip Details">
              <Field label="Travel Date" required error={errors.travelDate}>
                <input type="date" value={form.travelDate} onChange={set('travelDate')} min={new Date(Date.now() + 86400000).toISOString().split('T')[0]} style={inputStyle(errors.travelDate)} />
              </Field>
              <Field label="Approx. Budget per Person">
                <input type="number" value={form.budget} onChange={set('budget')} placeholder="e.g. 15000" style={inputStyle()} />
              </Field>
              <Field label="No. of Adults" required>
                <select value={form.adults} onChange={set('adults')} style={selectStyle}>
                  {['1','2','3','4','5','6','7','8','9','10'].map(n => <option key={n} value={n}>{n} {n === '1' ? 'Adult' : 'Adults'}</option>)}
                </select>
              </Field>
              <Field label="No. of Children">
                <select value={form.children} onChange={set('children')} style={selectStyle}>
                  <option value="0">No Children</option>
                  {['1','2','3','4','5'].map(n => <option key={n} value={n}>{n} {n === '1' ? 'Child' : 'Children'}</option>)}
                </select>
              </Field>
              <div style={{ gridColumn: '1 / -1' }}>
                <Field label="Trip Type">
                  <select value={form.tripType} onChange={set('tripType')} style={selectStyle}>
                    {['Leisure / Holiday', 'Honeymoon', 'Family Trip', 'Group Tour', 'Adventure', 'Cultural / Heritage', 'Business + Leisure'].map(t => <option key={t}>{t}</option>)}
                  </select>
                </Field>
              </div>
            </Section>

            {/* Accommodation */}
            <div style={{ marginBottom: 40 }}>
              <div style={{ paddingBottom: 14, borderBottom: '1px solid var(--line)', marginBottom: 20 }}>
                <h2 className="serif" style={{ fontSize: 22, fontWeight: 400, margin: 0 }}>Accommodation Preference</h2>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {accomOptions.map(opt => (
                  <label key={opt} style={{
                    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 18px',
                    border: `1.5px solid ${form.accommodation === opt ? 'var(--ink)' : 'var(--line)'}`,
                    borderRadius: 2, cursor: 'pointer', fontSize: 14,
                    background: form.accommodation === opt ? 'var(--ink)' : 'var(--white)',
                    color: form.accommodation === opt ? 'var(--white)' : 'var(--ink)',
                    transition: 'all 0.15s',
                  }}>
                    <input type="radio" name="accommodation" value={opt} checked={form.accommodation === opt} onChange={set('accommodation')} style={{ display: 'none' }} />
                    {opt}
                  </label>
                ))}
              </div>
            </div>

            {/* Additional Info */}
            <div style={{ marginBottom: 32 }}>
              <div style={{ paddingBottom: 14, borderBottom: '1px solid var(--line)', marginBottom: 20 }}>
                <h2 className="serif" style={{ fontSize: 22, fontWeight: 400, margin: 0 }}>Additional Information</h2>
              </div>
              <div style={{ marginBottom: 16 }}>
                <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 }}>Message / Special Requirements</label>
                <textarea value={form.message} onChange={set('message')} rows={4} placeholder="Any dietary needs, anniversary celebrations, accessibility requirements, or custom requests…"
                  style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 2, fontSize: 14, resize: 'vertical', fontFamily: 'inherit', background: 'var(--white)' }} />
              </div>
              <div>
                <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 }}>How did you hear about us?</label>
                <select value={form.hearAbout} onChange={set('hearAbout')} style={selectStyle}>
                  {['Google Search', 'Instagram', 'Facebook', 'Friend / Family', 'Travel Blog', 'YouTube', 'Other'].map(h => <option key={h}>{h}</option>)}
                </select>
              </div>
            </div>

            {errors._ && <div style={{ fontSize: 13, color: 'var(--clay)', marginBottom: 16, padding: '12px 16px', background: '#fff5f5', border: '1px solid #fecaca', borderRadius: 2 }}>{errors._}</div>}
            <button type="submit" className="btn btn-dark" style={{ width: '100%', justifyContent: 'center', padding: '16px 24px', fontSize: 15 }} disabled={loading}>
              {loading ? 'Sending…' : 'Send Inquiry →'}
            </button>
            <p style={{ fontSize: 12, color: 'var(--muted)', textAlign: 'center', marginTop: 12 }}>
              <Icon name="check" size={12} /> Your information is secure and will never be shared.
            </p>
          </div>

          {/* Sidebar */}
          <div style={{ position: 'sticky', top: 80, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 4, padding: 28 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 16 }}>Need Help?</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {inqSs.contact_phone && (
                  <div>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>Call Us</div>
                    <a href={`tel:${inqSs.contact_phone}`} style={{ fontSize: 14, color: 'var(--ink)', display: 'block' }}>{inqSs.contact_phone}</a>
                  </div>
                )}
                {inqSs.contact_email && (
                  <div>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>Email Us</div>
                    <a href={`mailto:${inqSs.contact_email}`} style={{ fontSize: 14, color: 'var(--ink)' }}>{inqSs.contact_email}</a>
                  </div>
                )}
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>Working Hours</div>
                  <div style={{ fontSize: 14, color: 'var(--ink)' }}>Mon–Sat: 9AM – 7PM</div>
                  <div style={{ fontSize: 14, color: 'var(--ink)' }}>Sunday: 10AM – 4PM</div>
                </div>
              </div>
            </div>
            <div style={{ background: 'var(--ink)', color: 'var(--white)', borderRadius: 4, padding: 28 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 16 }}>Why Book With Us</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {['Free cancellation up to 15 days', 'Best price guarantee', '24/7 support during your trip', 'Expert local guides', '10+ years of experience'].map(item => (
                  <div key={item} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, opacity: 0.88 }}>
                    <Icon name="check" size={14} color="var(--butter)" stroke={2} /> {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <Footer />
    </>
  );
};

// ─── About Page ────────────────────────────────────────────────────
const AboutPage = ({ setPage }) => {
  const stats = [
    { value: '10+', label: 'Years of experience' },
    { value: '200+', label: 'Tour packages' },
    { value: '15,000+', label: 'Happy travellers' },
    { value: '7', label: 'States covered' },
  ];
  const values = [
    { icon: 'compass', title: 'Curated by locals', body: 'Every route is designed by people who actually live there — not algorithms. We know the detours worth taking.' },
    { icon: 'users', title: 'Small groups only', body: 'Max 12 travellers per trip. Intimate, unhurried, personal. No herding through monuments.' },
    { icon: 'heart', title: 'Honest pricing', body: 'What you see is what you pay. No hidden charges, no "optional" extras that aren\'t optional.' },
    { icon: 'star', title: 'On-ground support', body: '24/7 support during every trip, not just a helpline number. A real person, reachable, always.' },
  ];
  return (
    <>
      <div className="fade-in">
        {/* Hero */}
        <section style={{ padding: '80px 36px 60px', borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
          <div style={{ maxWidth: 900 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>About Roamlly</div>
            <h1 className="serif" style={{ fontSize: 80, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 28px', lineHeight: 0.95 }}>
              We believe every journey<br />should feel <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>unhurried.</em>
            </h1>
            <p style={{ fontSize: 18, color: 'var(--muted)', lineHeight: 1.7, maxWidth: 560 }}>
              Roamlly was started by a small group of travel obsessives from Kolkata who were tired of itineraries that felt like checklists. We build tours the way we'd want to travel — slow, curious, and always local.
            </p>
          </div>
        </section>

        {/* Stats */}
        <section style={{ borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
            {stats.map((s, i) => (
              <div key={s.label} style={{ padding: '48px 36px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div className="serif" style={{ fontSize: 56, fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8 }}>{s.value}</div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)' }}>{s.label}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Story */}
        <section style={{ padding: '80px 36px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start', maxWidth: 1100, margin: '0 auto' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>Our Story</div>
              <h2 className="serif" style={{ fontSize: 52, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 28px', lineHeight: 1 }}>
                From Kolkata,<br />with <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>care.</em>
              </h2>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.8, marginBottom: 20 }}>
                Founded in 2015, Roamlly grew out of a single WhatsApp group of friends swapping hidden gems across India. What started as weekend escapes from Kolkata became a full-scale operation spanning seven states and over 200 curated experiences.
              </p>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.8, marginBottom: 32 }}>
                We're headquartered in Bowbazar, Kolkata — the same neighbourhood where our first tour started. Every package we sell is one we've personally scouted, stayed at, and eaten our way through.
              </p>
              <button className="btn btn-dark" onClick={() => setPage({ name: 'inquiry' })}>
                Plan a trip with us <Icon name="arrow" size={14} />
              </button>
            </div>
            <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', aspectRatio: '4/3', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ textAlign: 'center', padding: 40 }}>
                <div className="serif" style={{ fontSize: 32, fontWeight: 300, color: 'var(--muted)', marginBottom: 8 }}>Kolkata</div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)', opacity: 0.6 }}>Headquarters · Since 2015</div>
              </div>
            </div>
          </div>
        </section>

        {/* Values */}
        <section style={{ padding: '80px 36px', borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
          <div style={{ maxWidth: 1100, margin: '0 auto' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>How we work</div>
            <h2 className="serif" style={{ fontSize: 52, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 52px', lineHeight: 1 }}>
              The Roamlly <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>difference.</em>
            </h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line)' }}>
              {values.map((v, i) => (
                <div key={v.title} style={{ padding: '36px 28px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                  <div style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20, background: 'var(--white)', border: '1px solid var(--line)' }}>
                    <Icon name={v.icon} size={20} />
                  </div>
                  <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 10 }}>{v.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.7, margin: 0 }}>{v.body}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Team */}
        <section style={{ padding: '80px 36px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ maxWidth: 1100, margin: '0 auto' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>The people behind it</div>
            <h2 className="serif" style={{ fontSize: 52, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 52px', lineHeight: 1 }}>
              Who we <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>are.</em>
            </h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--line)' }}>
              {[
                { name: 'Arjun Bose', role: 'Founder & Chief Route Maker', bio: 'Former travel journalist. Has personally scouted every route in West Bengal twice.' },
                { name: 'Priya Sharma', role: 'Head of Experiences', bio: 'Rajasthan specialist with a decade of designing cultural and heritage itineraries.' },
                { name: 'Ravi Menon', role: 'South India Lead', bio: 'Karnataka and Tamil Nadu expert. Speaks four languages and can recommend the best thali in every town.' },
              ].map((person, i) => (
                <div key={person.name} style={{ padding: '40px 32px', borderRight: i < 2 ? '1px solid var(--line)' : 'none' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                    <span style={{ color: 'var(--white)', fontSize: 22, fontWeight: 300, fontFamily: 'serif' }}>{person.name[0]}</span>
                  </div>
                  <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>{person.name}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--clay)', marginBottom: 14 }}>{person.role}</div>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.7, margin: 0 }}>{person.bio}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section style={{ padding: '80px 36px', background: 'var(--ink)', color: 'var(--white)' }}>
          <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
            <h2 className="serif" style={{ fontSize: 60, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 20px', lineHeight: 1 }}>
              Ready to <em style={{ fontStyle: 'italic', color: 'var(--butter)' }}>go?</em>
            </h2>
            <p style={{ fontSize: 15, opacity: 0.6, lineHeight: 1.7, marginBottom: 36 }}>Browse 200+ tours across India or drop us a line — we'll find something perfect for you.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              <button className="btn" style={{ background: 'var(--white)', color: 'var(--ink)', padding: '14px 28px', fontSize: 15 }} onClick={() => setPage({ name: 'listing' })}>
                Browse Tours <Icon name="arrow" size={14} />
              </button>
              <button className="btn btn-ghost" style={{ borderColor: 'rgba(255,255,255,0.3)', color: 'var(--white)', padding: '14px 28px', fontSize: 15 }} onClick={() => setPage({ name: 'contact' })}>
                Contact Us
              </button>
            </div>
          </div>
        </section>
      </div>
      <Footer />
    </>
  );
};

// ─── Contact Page ────────────────────────────────────────────────────
const ContactPage = ({ setPage }) => {
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', subject: 'General Enquiry', message: '' });
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [ss, setSs] = React.useState(window.SITE_SETTINGS || {});
  React.useEffect(() => {
    fetch('/api/settings').then(r => r.json()).then(s => { window.SITE_SETTINGS = s; setSs(s); }).catch(() => {});
  }, []);

  const set = (k) => (e) => { setForm(f => ({ ...f, [k]: e.target.value })); setErrors(er => ({ ...er, [k]: '' })); };

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.phone.trim()) errs.phone = 'Required';
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Valid email required';
    if (!form.message.trim()) errs.message = 'Required';
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setLoading(true);
    try {
      const r = await fetch('/api/inquiries', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, type: 'contact', guests: '1' }),
      });
      if (r.ok) setDone(true);
      else setErrors({ _: 'Submission failed. Please try again.' });
    } catch { setErrors({ _: 'Network error. Please try again.' }); }
    setLoading(false);
  };

  const inputSt = (err) => ({ width: '100%', padding: '11px 14px', border: `1.5px solid ${err ? 'var(--clay)' : 'var(--line)'}`, borderRadius: 2, fontSize: 14, background: 'var(--white)', fontFamily: 'inherit', outline: 'none' });

  const addrLines = ss.contact_address ? ss.contact_address.split('\n').filter(Boolean) : ['–'];
  const waNum = (ss.contact_phone || '').replace(/\D/g, '');
  const infoCards = [
    { icon: 'pin',     title: 'Our Office',     lines: addrLines },
    { icon: 'users',   title: 'Call Us',         lines: [ss.contact_phone || '–'], links: ss.contact_phone ? [`tel:${ss.contact_phone}`] : [] },
    { icon: 'compass', title: 'Email Us',        lines: [ss.contact_email || '–'], links: ss.contact_email ? [`mailto:${ss.contact_email}`] : [] },
    { icon: 'clock',   title: 'Working Hours',   lines: ['Mon–Sat: 9AM – 7PM', 'Sunday: 10AM – 4PM'] },
  ];

  return (
    <>
      <div className="fade-in">
        {/* Header */}
        <section style={{ padding: '60px 36px 40px', borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 16 }}>Get In Touch</div>
          <h1 className="serif" style={{ fontSize: 72, fontWeight: 300, letterSpacing: '-0.03em', margin: '0 0 12px', lineHeight: 1 }}>
            Let's talk about your <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>trip.</em>
          </h1>
          <p style={{ fontSize: 15, color: 'var(--muted)', maxWidth: 480 }}>Our team typically responds within a few hours during working hours.</p>
        </section>

        {/* Info cards */}
        <section style={{ borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
            {infoCards.map((card, i) => (
              <div key={card.title} style={{ padding: '36px 28px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ width: 40, height: 40, background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, borderRadius: 2 }}>
                  <Icon name={card.icon} size={18} color="var(--white)" />
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>{card.title}</div>
                {card.lines.map((line, j) => (
                  card.links?.[j] ? (
                    <a key={j} href={card.links[j]} style={{ display: 'block', fontSize: 14, color: 'var(--clay)', marginBottom: 2 }}>{line}</a>
                  ) : (
                    <div key={j} style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.6 }}>{line}</div>
                  )
                ))}
              </div>
            ))}
          </div>
        </section>

        {/* Form + Map */}
        <section style={{ padding: '60px 36px 80px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, maxWidth: 1100, margin: '0 auto', alignItems: 'start' }}>
            {/* Form */}
            <div style={{ background: 'var(--white)', border: '1px solid var(--line)', padding: 40 }}>
              {done ? (
                <div style={{ textAlign: 'center', padding: '40px 20px' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                    <Icon name="check" size={24} color="var(--white)" />
                  </div>
                  <h3 className="serif" style={{ fontSize: 32, fontWeight: 300, marginBottom: 12 }}>Message sent!</h3>
                  <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 24 }}>We've received your message and will get back to you within a few hours.</p>
                  <button className="btn btn-dark" onClick={() => { setDone(false); setForm({ name:'', phone:'', email:'', subject:'General Enquiry', message:'' }); }}>Send Another</button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>Send a message</div>
                  <h2 className="serif" style={{ fontSize: 36, fontWeight: 300, margin: '0 0 28px' }}>How Can We <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>Help You?</em></h2>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                    <div>
                      <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: errors.name ? 'var(--clay)' : 'var(--muted)', marginBottom: 6 }}>Full Name <span style={{ color: 'var(--clay)' }}>*</span></label>
                      <input value={form.name} onChange={set('name')} placeholder="Your name" style={inputSt(errors.name)} />
                      {errors.name && <span style={{ fontSize: 11, color: 'var(--clay)' }}>{errors.name}</span>}
                    </div>
                    <div>
                      <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: errors.phone ? 'var(--clay)' : 'var(--muted)', marginBottom: 6 }}>Phone <span style={{ color: 'var(--clay)' }}>*</span></label>
                      <input value={form.phone} onChange={set('phone')} placeholder="+91 XXXXX XXXXX" style={inputSt(errors.phone)} />
                      {errors.phone && <span style={{ fontSize: 11, color: 'var(--clay)' }}>{errors.phone}</span>}
                    </div>
                  </div>
                  <div style={{ marginBottom: 14 }}>
                    <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: errors.email ? 'var(--clay)' : 'var(--muted)', marginBottom: 6 }}>Email Address <span style={{ color: 'var(--clay)' }}>*</span></label>
                    <input type="email" value={form.email} onChange={set('email')} placeholder="your@email.com" style={inputSt(errors.email)} />
                    {errors.email && <span style={{ fontSize: 11, color: 'var(--clay)' }}>{errors.email}</span>}
                  </div>
                  <div style={{ marginBottom: 14 }}>
                    <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 }}>Subject</label>
                    <select value={form.subject} onChange={set('subject')} style={{ ...inputSt(), cursor: 'pointer' }}>
                      {['General Enquiry', 'Tour Booking', 'Custom Package', 'Cancellation / Refund', 'Feedback', 'Other'].map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>
                  <div style={{ marginBottom: 20 }}>
                    <label className="mono" style={{ display: 'block', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: errors.message ? 'var(--clay)' : 'var(--muted)', marginBottom: 6 }}>Message <span style={{ color: 'var(--clay)' }}>*</span></label>
                    <textarea rows={5} value={form.message} onChange={set('message')} placeholder="Tell us how we can help you…" style={{ ...inputSt(errors.message), resize: 'vertical' }} />
                    {errors.message && <span style={{ fontSize: 11, color: 'var(--clay)' }}>{errors.message}</span>}
                  </div>
                  {errors._ && <div style={{ fontSize: 13, color: 'var(--clay)', marginBottom: 14, padding: '10px 14px', background: '#fff5f5', border: '1px solid #fecaca', borderRadius: 2 }}>{errors._}</div>}
                  <button type="submit" className="btn btn-dark" style={{ width: '100%', justifyContent: 'center', padding: '14px 20px', fontSize: 15, marginBottom: 10 }} disabled={loading}>
                    <Icon name="compass" size={15} /> {loading ? 'Sending…' : 'Send Message'}
                  </button>
                  {waNum && (
                    <a href={`https://wa.me/${waNum}`} className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', padding: '14px 20px', fontSize: 15, display: 'flex', color: '#25d366', borderColor: '#25d366' }}>
                      Chat on WhatsApp
                    </a>
                  )}
                </form>
              )}
            </div>

            {/* Map + Social */}
            <div>
              <div style={{ border: '1px solid var(--line)', overflow: 'hidden', marginBottom: 24 }}>
                <iframe
                  src="https://maps.google.com/maps?q=27+Weston+Street,+Bowbazar,+Kolkata+700012&output=embed"
                  width="100%" height="340" style={{ border: 'none', display: 'block' }}
                  title="Roamlly Office Location" loading="lazy" />
              </div>
              <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 28 }}>
                <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 16 }}>Follow Us</div>
                <div style={{ display: 'flex', gap: 10 }}>
                  {[
                    { label: 'Facebook', href: '#', bg: '#1877F2', color: '#fff' },
                    { label: 'Instagram', href: '#', bg: 'linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)', color: '#fff' },
                    { label: 'YouTube', href: '#', bg: '#FF0000', color: '#fff' },
                  ].map(s => (
                    <a key={s.label} href={s.href} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 16px', background: s.bg, color: s.color, borderRadius: 2, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>
                      {s.label}
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
      <Footer />
    </>
  );
};

// ─── Saved Page ─────────────────────────────────────────────────────
const SavedPage = ({ savedTours, toggleSaved, setPage }) => {
  const tours = (window.TOURS || []).filter(Boolean).filter(t => savedTours.includes(t.id));
  return (
    <>
      <div className="fade-in" style={{ minHeight: '60vh' }}>
        <section style={{ padding: '60px 36px 40px', borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 16 }}>
            {tours.length} saved {tours.length === 1 ? 'tour' : 'tours'}
          </div>
          <h1 className="serif" style={{ fontSize: 64, fontWeight: 300, letterSpacing: '-0.03em', margin: 0, lineHeight: 1 }}>
            Your saved <em style={{ fontStyle: 'italic', color: 'var(--clay)' }}>tours.</em>
          </h1>
        </section>
        {tours.length === 0 ? (
          <div style={{ padding: '80px 36px', textAlign: 'center' }}>
            <div style={{ marginBottom: 20, opacity: 0.3 }}><Icon name="heart" size={48} /></div>
            <h2 className="serif" style={{ fontSize: 36, fontWeight: 300, margin: '0 0 12px' }}>Nothing saved yet</h2>
            <p style={{ color: 'var(--muted)', fontSize: 15, marginBottom: 28 }}>Browse our tours and tap the heart to save ones you love.</p>
            <button className="btn btn-dark" onClick={() => setPage({ name: 'listing' })}>Browse All Tours <Icon name="arrow" size={14} /></button>
          </div>
        ) : (
          <section style={{ padding: '40px 36px 80px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
              {tours.map(t => {
                const saved = savedTours.includes(t.id);
                return (
                  <div key={t.id} style={{ border: '1px solid var(--line)', padding: 24 }}>
                    <div style={{ aspectRatio: '4/3', overflow: 'hidden', marginBottom: 16, background: 'var(--bg)' }}>
                      <Placeholder tone={t.hero.tone} img={t.hero.img} label={t.hero.label} style={{ width: '100%', height: '100%' }} />
                    </div>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 }}>{t.days} days · {t.region}</div>
                    <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 4, lineHeight: 1.3 }}>{t.title}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 16 }}>{t.tagline}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div>
                        <span className="mono" style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>From</span>
                        <span className="serif" style={{ fontSize: 24, fontWeight: 400, marginLeft: 6 }}>₹{t.price.toLocaleString('en-IN')}</span>
                      </div>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <button onClick={() => toggleSaved(t.id)} style={{ padding: '8px 12px', border: '1px solid var(--line)', borderRadius: 2, fontSize: 13, color: saved ? 'var(--clay)' : 'var(--muted)' }}>
                          <Icon name="heart" size={14} />
                        </button>
                        <button className="btn btn-dark" onClick={() => setPage({ name: 'detail', id: t.id })}>View</button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        )}
      </div>
      <Footer />
    </>
  );
};

Object.assign(window, { ListingPage, DetailPage, BookingPage });