// HimLocal — Web v2.1 Trip Context + Itineraries (mine + curated) + Create + Booking gate

const { useState: useStateWIt, useEffect: useEffectWIt, useRef: useRefWIt, useMemo: useMemoWIt } = React;

// Date helpers (avoid using new Date('YYYY-MM-DD') edge cases — use parts)
function fmtDateRange(start, end) {
  if (!start) return 'Add dates';
  try {
    const s = new Date(start + 'T00:00:00');
    const e = end ? new Date(end + 'T00:00:00') : null;
    const opts = { day:'numeric', month:'short' };
    const sStr = s.toLocaleDateString('en-IN', opts);
    if (!e) return sStr;
    const eStr = e.toLocaleDateString('en-IN', { ...opts, year:'numeric' });
    return `${sStr} → ${eStr}`;
  } catch { return start + (end ? ` → ${end}` : ''); }
}
function daysBetween(start, end) {
  try {
    const s = new Date(start + 'T00:00:00');
    const e = new Date(end + 'T00:00:00');
    return Math.max(1, Math.round((e - s) / 86400000));
  } catch { return 1; }
}

// ─── Trip Context bar (sticky) ─────────────────────────────
function WebTripContext({ ctx, setCtx, plan, onUpgrade }) {
  const [open, setOpen] = useStateWIt(false);
  const ref = useRefWIt(null);
  const guestsLabel = `${ctx.adults} ${ctx.adults === 1 ? 'adult' : 'adults'}${ctx.children ? ` · ${ctx.children} child` : ''}`;
  return (
    <>
      <div className="w2-trip">
        <span className="w2-trip__lbl">Trip context</span>
        <button className="w2-trip__pill" ref={ref} onClick={() => setOpen(true)}>
          <window.WIcon name="route" size={14}/>
          <span>Dates: <strong>{fmtDateRange(ctx.checkIn, ctx.checkOut)}</strong></span>
        </button>
        <button className="w2-trip__pill" onClick={() => setOpen(true)}>
          <span>Guests: <strong>{guestsLabel}</strong></span>
        </button>
        <button className="w2-trip__pill" onClick={() => setOpen(true)}>
          <span>Rooms: <strong>{ctx.rooms}</strong></span>
        </button>
        <button className="w2-trip__plan" onClick={onUpgrade}>
          {plan.tier === 'free' ? `Free · ${plan.itineraryLimit} itineraries` : `Pro · ${plan.itineraryLimit} itineraries`} →
        </button>
      </div>
      {open && (
        <TCPop ctx={ctx} setCtx={setCtx} anchorRef={ref} onClose={() => setOpen(false)}/>
      )}
    </>
  );
}
function TCPop({ ctx, setCtx, anchorRef, onClose }) {
  const [draft, setDraft] = useStateWIt(ctx);
  const [pos, setPos] = useStateWIt({ left:120, top:120 });
  useEffectWIt(() => {
    if (anchorRef.current) {
      const r = anchorRef.current.getBoundingClientRect();
      setPos({ left:r.left, top:r.bottom + 8 });
    }
  }, []);
  const set = (k, v) => setDraft(d => ({ ...d, [k]:v }));
  const step = (k, dlt) => setDraft(d => ({ ...d, [k]:Math.max(k === 'adults' || k === 'rooms' ? 1 : 0, d[k] + dlt) }));
  const apply = () => { setCtx(draft); onClose(); };
  return (
    <>
      <div className="w2-popover-back" onClick={onClose}/>
      <div className="w2-tcpop" style={{ left:pos.left, top:pos.top }}>
        <div className="w2-tcpop__t">Trip dates &amp; guests</div>
        <div className="w2-tcpop__row">
          <div className="w2-tcpop__field">
            <div className="w2-tcpop__l">Check-in</div>
            <input type="date" value={draft.checkIn} onChange={e => set('checkIn', e.target.value)}/>
          </div>
          <div className="w2-tcpop__field">
            <div className="w2-tcpop__l">Check-out</div>
            <input type="date" value={draft.checkOut} onChange={e => set('checkOut', e.target.value)}/>
          </div>
        </div>
        {[
          { k:'adults',   name:'Adults',   sub:'13+ years' },
          { k:'children', name:'Children', sub:'2 — 12 years' },
          { k:'rooms',    name:'Rooms',    sub:'How many rooms' },
        ].map(r => (
          <div key={r.k} className="w2-tcpop__steps">
            <div>
              <div className="w2-tcpop__step-l">{r.name}</div>
              <div className="w2-tcpop__step-s">{r.sub}</div>
            </div>
            <div className="w2-tcpop__step-ct">
              <button onClick={() => step(r.k, -1)}>−</button>
              <span>{draft[r.k]}</span>
              <button onClick={() => step(r.k, 1)}>+</button>
            </div>
          </div>
        ))}
        <button className="w2-tcpop__cta" onClick={apply}>Apply</button>
      </div>
    </>
  );
}
window.WebTripContext = WebTripContext;

// ─── My Itineraries page ─────────────────────────────────
function WebItinerariesPage({ data, myItineraries, plan, onOpen, onCreate, onOpenCurated, onUpgrade, onEditDates, onDelete, onShare }) {
  const D = data;
  const used = myItineraries.length;
  const limit = plan.itineraryLimit;
  const canCreate = used < limit;
  return (
    <div className="w2-itins w2-route">
      <div className="w2-itins__inner">
        <div className="w2-itins__head">
          <div>
            <h1 className="w2-itins__title">Your <em>itineraries.</em></h1>
            <div className="w2-itins__sub">Trips you've built or copied. Drag stops on the map to reshape any day.</div>
          </div>
          <div style={{display:'flex',gap:14,alignItems:'center'}}>
            <span className="w2-itins__plan"><span>{plan.tier === 'free' ? 'Free' : 'Pro'} ·</span><strong>{used}/{limit}</strong> used</span>
            <button className="w2-itins__newcta" onClick={canCreate ? onCreate : onUpgrade}>
              <window.WIcon name="plus" size={16}/>{canCreate ? 'Create new itinerary' : 'Upgrade to Pro'}
            </button>
          </div>
        </div>

        <div className="w2-itin-cards">
          {myItineraries.map(it => {
            const stops = it.days.reduce((s, d) => s + d.stops.length, 0);
            const fixed = it.days.reduce((s, d) => s + d.stops.filter(x => x.state === 'fixed').length, 0);
            return (
              <div key={it.id} className="w2-itin-card" style={{position:'relative'}}>
                <div onClick={() => onOpen(it.id)} style={{cursor:'pointer'}}>
                  <div className="w2-itin-card__img" style={{ backgroundImage:`url(${it.img})` }}>
                    <div className="w2-itin-card__img-scrim"/>
                    <span className="w2-itin-card__region">{it.region}</span>
                    <span className={`w2-itin-card__status w2-itin-card__status--${it.status}`}>{it.status}</span>
                  </div>
                  <div className="w2-itin-card__body">
                    <h3 className="w2-itin-card__title">{it.title}</h3>
                    <div className="w2-itin-card__meta">{fmtDateRange(it.dates.start, it.dates.end)} · {it.days.length} days</div>
                    <div className="w2-itin-card__stats">
                      <span><strong>{stops}</strong> stops</span>
                      <span><strong>{fixed}</strong> confirmed</span>
                      <span><strong>{stops - fixed}</strong> fluid</span>
                    </div>
                  </div>
                </div>
                <ItinActionMenu itin={it} onEditDates={onEditDates} onDelete={onDelete} onShare={onShare}/>
              </div>
            );
          })}
          {/* Add-new tile or upgrade prompt */}
          {canCreate ? (
            <button className="w2-itin-card w2-itin-card--add" onClick={onCreate}>
              <div>
                <div className="w2-itin-card__plus">+</div>
                <h3>Create a new itinerary</h3>
                <div style={{font:'400 13px var(--font-body)',color:'var(--fg-2)',maxWidth:220,margin:'0 auto'}}>Pick a region, set dates, then add stops from the map.</div>
              </div>
            </button>
          ) : (
            <button className="w2-itin-card w2-itin-card--add" onClick={onUpgrade} style={{borderColor:'var(--lavender-500)'}}>
              <div>
                <div className="w2-itin-card__plus" style={{background:'var(--lavender-100)',color:'var(--lavender-700)'}}>★</div>
                <h3>Upgrade to Pro</h3>
                <div style={{font:'400 13px var(--font-body)',color:'var(--fg-2)',maxWidth:240,margin:'0 auto'}}>Free plan tops out at 1 active trip. Pro unlocks 10, offline maps and GPX export — ₹299/mo.</div>
              </div>
            </button>
          )}
        </div>

        {/* Curated section */}
        <div className="w2-sech">
          <div>
            <h2 className="w2-sech__t">Bookable, <em>guided.</em></h2>
            <div className="w2-sech__sub">Curated itineraries from local creators — fixed dates, fixed price, a guide on the route.</div>
          </div>
          <span className="w2-sech__more" style={{cursor:'default'}}>{D.curatedItineraries.length} packages</span>
        </div>
        <div className="w2-curated-row">
          {D.curatedItineraries.slice(0, 3).map(c => (
            <div key={c.id} className="w2-curated" onClick={() => onOpenCurated(c.id)}>
              <div className="w2-curated__img" style={{ backgroundImage:`url(${c.img})` }}>
                <div className="w2-curated__img-scrim"/>
                <span className="w2-curated__chip">{c.region} · {c.days} DAYS</span>
                <span className="w2-curated__grade">GRADE {c.grade}</span>
                <div className="w2-curated__head">
                  <div className="w2-curated__title">{c.title}</div>
                  <div className="w2-curated__creator">
                    <div className="w2-curated__avatar" style={{ backgroundImage:`url(${c.creator.avatar})` }}/>
                    <span>by {c.creator.name}{c.creator.verified ? ' ✓' : ''}</span>
                  </div>
                </div>
              </div>
              <div className="w2-curated__body">
                <div className="w2-curated__line">{c.tagline}</div>
                <div className="w2-curated__meta">
                  <div className="w2-curated__price"><strong>₹{c.priceTotal.toLocaleString()}</strong><span>{c.priceLabel}</span></div>
                  <button className="w2-curated__cta">Open →</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.WebItinerariesPage = WebItinerariesPage;

// ─── Curated detail page ─────────────────────────────────
function WebCuratedDetail({ curated, pois, onBack, onBook, onFollow, onCopy }) {
  const c = curated;
  const [picked, setPicked] = useStateWIt(c?.departures?.[0]?.id);
  const [tab, setTab] = useStateWIt('overview');
  if (!c) return null;
  const stopPois = (c.routeStops || []).map(id => pois?.find(p => p.id === id)).filter(Boolean);
  return (
    <div className="w2-curated-page w2-route">
      <div className="w2-curated-hero" style={{ backgroundImage:`url(${c.img})` }}>
        <div className="w2-curated-hero__scrim"/>
        <div className="w2-curated-hero__inner">
          <button onClick={onBack} style={{alignSelf:'flex-start',marginBottom:24,padding:'8px 16px',background:'rgba(255,255,255,.18)',backdropFilter:'blur(10px)',border:'1px solid rgba(255,255,255,.22)',borderRadius:999,color:'white',font:'600 11.5px var(--font-body)',letterSpacing:'.04em',cursor:'pointer'}}>← Back to itineraries</button>
          <div className="w2-curated-hero__chips">
            <span className="w2-curated-hero__chip">{c.region}</span>
            <span className="w2-curated-hero__chip">{c.days} DAYS</span>
            <span className="w2-curated-hero__chip">GRADE {c.grade}</span>
          </div>
          <h1 className="w2-curated-hero__title">{c.title}</h1>
          <div className="w2-curated-hero__line">{c.tagline}</div>
          <div style={{display:'flex',alignItems:'center',gap:10,marginTop:14}}>
            <div style={{width:36,height:36,borderRadius:'50%',backgroundImage:`url(${c.creator.avatar})`,backgroundSize:'cover',backgroundPosition:'center'}}/>
            <div style={{color:'white'}}>
              <div style={{font:'600 13px var(--font-body)'}}>{c.creator.name}</div>
              <div style={{font:'400 11px var(--font-body)',opacity:.85}}>{c.creator.role} · {c.followers.toLocaleString()} followers</div>
            </div>
          </div>
        </div>
      </div>
      <div className="w2-curated-content">
        <div className="w2-curated-content__body">
          <div className="w2-curated__tabs">
            <button className={`w2-curated__tab ${tab === 'overview' ? 'is-on' : ''}`} onClick={() => setTab('overview')}>Overview</button>
            <button className={`w2-curated__tab ${tab === 'map' ? 'is-on' : ''}`} onClick={() => setTab('map')}>Map view</button>
          </div>

          {tab === 'map' && (
            <>
              <div className="w2-curated-map">
                <window.WebMapCanvas pois={stopPois} pickedId={null} onSelect={() => {}}
                  tripContext={{ checkIn:c.departures[0].startDate, checkOut:c.departures[0].endDate }}
                  polylineStops={c.routeStops || []}/>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:24}}>
                {stopPois.map((p, i) => (
                  <div key={p.id} style={{display:'flex',gap:14,padding:'12px 14px',background:'var(--bg-paper)',border:'1px solid var(--border-1)',borderRadius:10}}>
                    <div style={{width:32,height:32,borderRadius:'50%',background:'var(--leaf-700)',color:'white',display:'flex',alignItems:'center',justifyContent:'center',font:'700 13px var(--font-mono)',flexShrink:0}}>{i + 1}</div>
                    <div style={{flex:1}}>
                      <div style={{font:'600 14px var(--font-body)',color:'var(--slate-700)'}}>{p.name}</div>
                      <div style={{font:'400 12px var(--font-body)',color:'var(--fg-2)',marginTop:3}}>{p.short}</div>
                    </div>
                    <div style={{font:'500 11.5px var(--font-mono)',color:'var(--fg-3)',whiteSpace:'nowrap'}}>{p.alt.toLocaleString()} m</div>
                  </div>
                ))}
              </div>
            </>
          )}

          {tab === 'overview' && (<>
          <h3>The <em>route</em></h3>
          {c.route.map(d => (
            <div key={d.d} className="w2-curated__day">
              <div className="w2-curated__day-d">{d.d}</div>
              <div className="w2-curated__day-t">{d.t}</div>
            </div>
          ))}

          <h3>What's <em>included</em></h3>
          <ul className="w2-curated__list">
            {c.includes.map((x, i) => <li key={i}>{x}</li>)}
          </ul>

          <h3>What's <em>not</em></h3>
          <ul className="w2-curated__list w2-curated__list--no">
            {c.excludes.map((x, i) => <li key={i}>{x}</li>)}
          </ul>

          <h3>Group &amp; <em>difficulty</em></h3>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,padding:'14px 0'}}>
            <div style={{padding:'14px 16px',background:'var(--bg-paper)',border:'1px solid var(--border-1)',borderRadius:10}}>
              <div style={{font:'600 10px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--fg-3)'}}>Group size</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:18,fontWeight:500,marginTop:4,color:'var(--slate-700)'}}>{c.groupSize}</div>
            </div>
            <div style={{padding:'14px 16px',background:'var(--bg-paper)',border:'1px solid var(--border-1)',borderRadius:10}}>
              <div style={{font:'600 10px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--fg-3)'}}>Difficulty</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:18,fontWeight:500,marginTop:4,color:'var(--slate-700)'}}>{c.difficulty}</div>
            </div>
          </div>
          </>)}
        </div>

        <div className="w2-curated__sidebar">
          <div className="w2-curated__sb-price">₹{c.priceTotal.toLocaleString()}</div>
          <div className="w2-curated__sb-price-l">{c.priceLabel}</div>
          <div style={{margin:'14px 0 4px',font:'600 10.5px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--fg-3)'}}>Pick a departure</div>
          <div className="w2-curated__sb-deps">
            {c.departures.map(d => (
              <div key={d.id} className={`w2-curated__dep ${picked === d.id ? 'is-on' : ''}`} onClick={() => setPicked(d.id)}>
                <span className="w2-curated__dep-dates">{fmtDateRange(d.startDate, d.endDate)}</span>
                <span className="w2-curated__dep-seats">{d.seatsLeft} seats left</span>
              </div>
            ))}
          </div>
          <button className="w2-curated__sb-cta" onClick={() => onBook(c, picked)}>Book this departure</button>
          <div className="w2-curated__sb-row">
            <button onClick={() => onFollow(c.id)}>Follow</button>
            <button onClick={() => onCopy(c.id)}>Copy to mine</button>
          </div>
          <div className="w2-curated__sb-trust">
            {c.bookedThisMonth} travellers booked this month. Cancellation up to 14 days before departure, full refund. Permits and insurance handled by HimLocal.
          </div>
        </div>
      </div>
    </div>
  );
}
window.WebCuratedDetail = WebCuratedDetail;

// ─── Create Itinerary modal ──────────────────────────────
function WebCreateModal({ presets, onClose, onCreate }) {
  const [title, setTitle] = useStateWIt('');
  const [region, setRegion] = useStateWIt(presets?.[0] || 'SPITI');
  const [start, setStart] = useStateWIt('2026-06-01');
  const [end, setEnd]     = useStateWIt('2026-06-05');
  const [adults, setAdults] = useStateWIt(2);
  const valid = title.trim().length > 0;
  return (
    <div className="w2-create-back" onClick={onClose}>
      <div className="w2-create" onClick={e => e.stopPropagation()}>
        <div className="w2-create__lbl">Create itinerary</div>
        <h2 className="w2-create__t">Start a new <em>trip.</em></h2>
        <div className="w2-create__sub">Title it, pick a region and dates. You'll add stops from the map next.</div>

        <div className="w2-create__field">
          <label className="w2-create__field-l">Trip name</label>
          <input className="w2-create__input" autoFocus placeholder="e.g. Spiti in autumn" value={title} onChange={e => setTitle(e.target.value)}/>
        </div>

        <div className="w2-create__field">
          <label className="w2-create__field-l">Region</label>
          <div className="w2-create__regions">
            {(presets || ['SPITI','PARVATI','KINNAUR','DHAULADHAR','LAHAUL','KULLU']).map(r => (
              <button key={r} className={`w2-create__region ${region === r ? 'is-on' : ''}`} onClick={() => setRegion(r)}>{r}</button>
            ))}
          </div>
        </div>

        <div className="w2-create__field">
          <label className="w2-create__field-l">Dates</label>
          <div className="w2-create__row">
            <input className="w2-create__input" type="date" value={start} onChange={e => setStart(e.target.value)}/>
            <input className="w2-create__input" type="date" value={end} onChange={e => setEnd(e.target.value)}/>
          </div>
        </div>

        <div className="w2-create__field">
          <label className="w2-create__field-l">Travellers</label>
          <input className="w2-create__input" type="number" min="1" value={adults} onChange={e => setAdults(parseInt(e.target.value) || 1)}/>
        </div>

        <div className="w2-create__actions">
          <button className="w2-create__cancel" onClick={onClose}>Cancel</button>
          <button className="w2-create__submit" disabled={!valid} style={!valid ? { opacity:.5, cursor:'not-allowed' } : null}
            onClick={() => onCreate({ title:title.trim(), region, start, end, adults })}>
            Create &amp; add stops →
          </button>
        </div>
      </div>
    </div>
  );
}
window.WebCreateModal = WebCreateModal;

// ─── Booking gate (dates + guests + rooms before payment) ──
function WebBookingGate({ poi, tripContext, onClose, onProceed }) {
  const [start, setStart] = useStateWIt(tripContext.checkIn);
  const [end, setEnd]     = useStateWIt(tripContext.checkOut);
  const [adults, setAdults] = useStateWIt(tripContext.adults);
  const [children, setChildren] = useStateWIt(tripContext.children);
  const [rooms, setRooms] = useStateWIt(tripContext.rooms);
  const nights = useMemoWIt(() => daysBetween(start, end), [start, end]);
  const ratePerNight = poi?.price || 4200;
  const subtotal = ratePerNight * nights * rooms;
  const tax = Math.round(subtotal * 0.05);
  const total = subtotal + tax;
  return (
    <>
      <div className="w2-bgate-fadeback" onClick={onClose}/>
      <div className="w2-bgate w2-bgate--slim" onClick={e => e.stopPropagation()}>
        <button className="w2-bgate__close" onClick={onClose} aria-label="Close">×</button>
        <div className="w2-bgate__lbl">Booking</div>
        <h2 className="w2-bgate__t">{poi?.name}</h2>
        <div className="w2-bgate__sub">Pre-filled from your trip. Tweak dates and guests.</div>

        <div className="w2-bgate__pillrow">
          <label className="w2-bgate__pill">
            <span>Check-in</span>
            <input type="date" value={start} onChange={e => setStart(e.target.value)}/>
          </label>
          <label className="w2-bgate__pill">
            <span>Check-out</span>
            <input type="date" value={end} onChange={e => setEnd(e.target.value)} min={start}/>
          </label>
          {[
            { k:'adults',   name:'Adults',   val:adults, set:setAdults, min:1 },
            { k:'rooms',    name:'Rooms',    val:rooms, set:setRooms, min:1 },
            { k:'children', name:'Children', val:children, set:setChildren, min:0 },
          ].map(r => (
            <div key={r.k} className="w2-bgate__pill w2-bgate__pill--step">
              <span>{r.name}</span>
              <div className="w2-bgate__step-ct">
                <button onClick={() => r.set(Math.max(r.min, r.val - 1))}>−</button>
                <strong>{r.val}</strong>
                <button onClick={() => r.set(r.val + 1)}>+</button>
              </div>
            </div>
          ))}
        </div>

        <div className="w2-bgate__summary">
          <div className="w2-bgate__summary-meta">
            <div className="w2-bgate__summary-meta-l">{nights} {nights === 1 ? 'night' : 'nights'} · {rooms} {rooms === 1 ? 'room' : 'rooms'} · {adults} adults</div>
            <div className="w2-bgate__summary-meta-s">{nights}×{rooms}×₹{ratePerNight.toLocaleString()} + 5% tax</div>
          </div>
          <strong>₹{total.toLocaleString()}</strong>
          <button className="w2-bgate__submit" onClick={() => onProceed({
            start, end, adults, children, rooms, nights, ratePerNight, subtotal, tax, total,
          })}>Continue to payment →</button>
        </div>
      </div>
    </>
  );
}
window.WebBookingGate = WebBookingGate;


// ─── Itinerary action menu (edit/delete/share) ───────────
function ItinActionMenu({ itin, onEditDates, onDelete, onShare }) {
  const [open, setOpen] = useStateWIt(false);
  return (
    <div className="w2-itin-menu" onClick={e => e.stopPropagation()}>
      <button className="w2-itin-menu__btn" onClick={() => setOpen(v => !v)} aria-label="More">⋯</button>
      {open && (
        <>
          <div style={{position:'fixed',inset:0,zIndex:11}} onClick={() => setOpen(false)}/>
          <div className="w2-itin-menu__pop">
            <button className="w2-itin-menu__item" onClick={() => { setOpen(false); onEditDates && onEditDates(itin); }}>📅 Edit dates</button>
            <button className="w2-itin-menu__item" onClick={() => { setOpen(false); onShare && onShare(itin); }}>↗ Share itinerary</button>
            <button className="w2-itin-menu__item" onClick={() => { setOpen(false); /* duplicate not wired */ }}>⎘ Duplicate</button>
            <button className="w2-itin-menu__item w2-itin-menu__item--danger" onClick={() => { setOpen(false); onDelete && onDelete(itin); }}>× Delete</button>
          </div>
        </>
      )}
    </div>
  );
}
window.ItinActionMenu = ItinActionMenu;

// ─── Edit Dates modal ──────────────────────────────────
function WebEditDatesModal({ itin, onClose, onSave }) {
  const [start, setStart] = useStateWIt(itin?.dates?.start || '');
  const [end, setEnd]     = useStateWIt(itin?.dates?.end || '');
  if (!itin) return null;
  return (
    <div className="w2-create-back" onClick={onClose}>
      <div className="w2-create" onClick={e => e.stopPropagation()}>
        <div className="w2-create__lbl">Edit dates</div>
        <h2 className="w2-create__t">Reschedule <em>{itin.title}.</em></h2>
        <div className="w2-create__sub">Days are recalculated automatically. Confirmed stays are preserved.</div>
        <div className="w2-create__field">
          <label className="w2-create__field-l">Dates</label>
          <div className="w2-create__row">
            <input className="w2-create__input" type="date" value={start} onChange={e => setStart(e.target.value)}/>
            <input className="w2-create__input" type="date" value={end} onChange={e => setEnd(e.target.value)}/>
          </div>
        </div>
        <div className="w2-create__actions">
          <button className="w2-create__cancel" onClick={onClose}>Cancel</button>
          <button className="w2-create__submit" onClick={() => onSave(itin.id, start, end)}>Save dates</button>
        </div>
      </div>
    </div>
  );
}
window.WebEditDatesModal = WebEditDatesModal;

// ─── Confirm Delete modal ──────────────────────────────
function WebConfirmDelete({ itin, onClose, onConfirm }) {
  if (!itin) return null;
  return (
    <div className="w2-create-back" onClick={onClose}>
      <div className="w2-create" onClick={e => e.stopPropagation()}>
        <div className="w2-create__lbl" style={{color:'var(--terracotta)'}}>Delete itinerary</div>
        <h2 className="w2-create__t">Delete <em>{itin.title}?</em></h2>
        <div className="w2-create__sub">This is permanent. Confirmed bookings inside this trip stay reserved — your Profile will keep their records.</div>
        <div className="w2-create__actions">
          <button className="w2-create__cancel" onClick={onClose}>Keep it</button>
          <button className="w2-create__submit" style={{background:'var(--terracotta)',boxShadow:'0 6px 18px rgba(199,106,58,.28)'}} onClick={() => onConfirm(itin.id)}>Delete forever</button>
        </div>
      </div>
    </div>
  );
}
window.WebConfirmDelete = WebConfirmDelete;

// ─── Share modal ───────────────────────────────────────
function WebShareModal({ itin, onClose }) {
  if (!itin) return null;
  const url = `himlocal.com/i/${itin.id}`;
  return (
    <div className="w2-create-back" onClick={onClose}>
      <div className="w2-create" onClick={e => e.stopPropagation()}>
        <div className="w2-create__lbl">Share itinerary</div>
        <h2 className="w2-create__t">Share <em>{itin.title}</em></h2>
        <div className="w2-create__sub">Anyone with this link can view (not edit) your trip.</div>
        <div style={{display:'flex',gap:8,marginTop:6,marginBottom:14}}>
          <input className="w2-create__input" readOnly value={url} style={{flex:1}}/>
          <button className="w2-create__submit" style={{flex:'0 0 auto',padding:'0 22px',height:46}} onClick={() => { try { navigator.clipboard?.writeText(url); } catch {} }}>Copy</button>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="w2-create__cancel" style={{flex:1}}>Email</button>
          <button className="w2-create__cancel" style={{flex:1}}>WhatsApp</button>
          <button className="w2-create__cancel" style={{flex:1}}>Twitter</button>
        </div>
        <div className="w2-create__actions">
          <button className="w2-create__cancel" style={{flex:1}} onClick={onClose}>Done</button>
        </div>
      </div>
    </div>
  );
}
window.WebShareModal = WebShareModal;