// HimLocal — Mobile v2.4 Adventure activities (list + detail)

const { useState: useStateMAct, useMemo: useMemoMAct } = React;

function MobileActivitiesScreen({ data, onBack, onOpen }) {
  const [cat, setCat] = useStateMAct('all');
  const list = useMemoMAct(() => cat === 'all' ? data.activities : data.activities.filter(a => a.kind === cat), [cat]);
  return (
    <div className="app-acts">
      <button onClick={onBack} style={{position:'absolute',top:60,left:14,width:36,height:36,borderRadius:'50%',background:'var(--bg-paper)',border:'1px solid var(--border-1)',cursor:'pointer',color:'var(--slate-700)',zIndex:5}}>←</button>
      <div className="app-acts__head" style={{paddingTop:62}}>
        <h1 className="app-acts__t">Adventure <em>activities.</em></h1>
        <div className="app-acts__sub">Paragliding, rafting, biking — book a slot with a vetted local operator.</div>
      </div>
      <div className="app-acts__cats">
        <button className={`app-acts__cat ${cat === 'all' ? 'is-on' : ''}`} onClick={() => setCat('all')}>All</button>
        {data.activityCategories.map(c => (
          <button key={c.id} className={`app-acts__cat ${cat === c.id ? 'is-on' : ''}`} onClick={() => setCat(c.id)}>{c.name}</button>
        ))}
      </div>
      {list.map(a => (
        <button key={a.id} className="app-act-card" onClick={() => onOpen(a.id)}>
          <div className="app-act-card__bg" style={{ backgroundImage:`url(${a.img})` }}/>
          <div className="app-act-card__scrim"/>
          <span className="app-act-card__chip">{a.region}</span>
          <div className="app-act-card__price">₹{a.priceFrom.toLocaleString()}<span>per person</span></div>
          <div className="app-act-card__name">{a.name}</div>
          <div className="app-act-card__loc">{a.location} · {a.duration.split('·')[0].trim()}</div>
        </button>
      ))}
    </div>
  );
}
window.MobileActivitiesScreen = MobileActivitiesScreen;

function MobileActivityDetail({ activity, onBack, onBook }) {
  const a = activity;
  const [vendorId, setVendorId] = useStateMAct(a?.vendors[0]?.id);
  const [slotId, setSlotId]     = useStateMAct(a?.slots[0]?.id);
  const [adults, setAdults]     = useStateMAct(2);
  if (!a) return null;
  const vendor = a.vendors.find(v => v.id === vendorId) || a.vendors[0];
  const slot   = a.slots.find(s => s.id === slotId)   || a.slots[0];
  const total = (vendor?.price || a.priceFrom) * adults;
  return (
    <div className="app-act-page">
      <div className="app-act-page__scroll">
        <div className="app-act-page__hero" style={{ backgroundImage:`url(${a.img})` }}>
          <div className="app-act-page__scrim"/>
          <button className="app-act-page__back" onClick={onBack}>←</button>
          <div className="app-act-page__hero-copy">
          <div style={{display:'flex',gap:6,marginBottom:8}}>
            <span style={{font:'600 9px var(--font-body)',letterSpacing:'.2em',padding:'3px 9px',borderRadius:999,background:'rgba(255,255,255,.18)',backdropFilter:'blur(8px)',border:'1px solid rgba(255,255,255,.22)'}}>{a.region}</span>
            <span style={{font:'600 9px var(--font-body)',letterSpacing:'.2em',padding:'3px 9px',borderRadius:999,background:'rgba(255,255,255,.18)',backdropFilter:'blur(8px)',border:'1px solid rgba(255,255,255,.22)'}}>GRADE {a.grade}</span>
          </div>
          <h1 className="app-act-page__title">{a.name}</h1>
          <div className="app-act-page__line">{a.tagline}</div>
        </div>
      </div>
      <div className="app-act-page__body">
        <h3>Quick facts</h3>
        <div className="app-act-stats-m">
          <div>
            <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>Duration</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:500,color:'var(--slate-700)',marginTop:3}}>{a.duration}</div>
          </div>
          <div>
            <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>Difficulty</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:500,color:'var(--slate-700)',marginTop:3}}>{a.difficulty.split('·')[0].trim()}</div>
          </div>
          <div>
            <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>Altitude</div>
            <div style={{fontFamily:'var(--font-mono)',fontSize:14,fontWeight:600,color:'var(--slate-700)',marginTop:3}}>{a.alt.toLocaleString()} m</div>
          </div>
          <div>
            <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)'}}>Season</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:500,color:'var(--slate-700)',marginTop:3}}>{a.season}</div>
          </div>
        </div>

        <h3>About</h3>
        <div style={{font:'400 13px var(--font-body)',color:'var(--fg-1)',lineHeight:1.6}}>{a.description}</div>

        <h3>Choose an operator</h3>
        {a.vendors.map(v => (
          <div key={v.id} className={`app-act-vendor ${vendorId === v.id ? 'is-on' : ''}`} onClick={() => setVendorId(v.id)}>
            <div>
              <div className="app-act-vendor__name">{v.name}</div>
              <div className="app-act-vendor__rating">★ {v.rating} <span style={{color:'var(--fg-3)',fontWeight:400}}>({v.reviews})</span></div>
              <div style={{display:'flex',flexWrap:'wrap',gap:4,marginTop:6}}>
                {v.includes.slice(0,3).map((i, idx) => <span key={idx} style={{font:'500 10px var(--font-body)',padding:'2px 7px',borderRadius:999,background:'var(--bone-100)',color:'var(--fg-2)'}}>{i}</span>)}
              </div>
            </div>
            <div className="app-act-vendor__price"><strong>₹{v.price.toLocaleString()}</strong></div>
          </div>
        ))}

        <h3>Travellers</h3>
        <div style={{display:'inline-flex',alignItems:'center',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:999,padding:2}}>
          <button onClick={() => setAdults(n => Math.max(1, n - 1))} style={{width:30,height:30,background:0,border:0,cursor:'pointer',color:'var(--slate-700)',fontSize:14}}>−</button>
          <span style={{padding:'0 14px',font:'600 12px var(--font-mono)',color:'var(--slate-700)'}}>{adults} {adults === 1 ? 'person' : 'people'}</span>
          <button onClick={() => setAdults(n => n + 1)} style={{width:30,height:30,background:0,border:0,cursor:'pointer',color:'var(--slate-700)',fontSize:14}}>+</button>
        </div>

        <h3>Pick a slot</h3>
        {a.slots.map(s => (
          <div key={s.id} className={`app-act-slot ${slotId === s.id ? 'is-on' : ''}`} onClick={() => setSlotId(s.id)}>
            <span className="app-act-slot-dt">{new Date(s.date + 'T00:00:00').toLocaleDateString('en-IN', { day:'numeric', month:'short' })} · {s.start}</span>
            <span className="app-act-slot-st">{s.seatsLeft} seats</span>
          </div>
        ))}
      </div>
      </div>{/* /.app-act-page__scroll */}

      <div className="app-act-page__check">
        <div className="app-act-page__check-l">
          <strong>₹{total.toLocaleString()}</strong>
          <span>{adults} × ₹{(vendor?.price || a.priceFrom).toLocaleString()}</span>
        </div>
        <button className="app-act-page__check-btn" onClick={() => onBook(a, vendor, slot, { adults, total })}>Book →</button>
      </div>
    </div>
  );
}
window.MobileActivityDetail = MobileActivityDetail;