/* global React */
// ============================================================
// Trips Index — listing + filters + sort
// ============================================================

const { useState: useStateT } = React;

const ALL_TRIPS = [
  { id: 1, slug: "kerala",            place: "Kerala",            country: "India",      region: "Asia",       cat: "Backpacking",  img: "https://images.unsplash.com/photo-1602216056096-3b40cc0c9944?w=900&q=80",  days: 12, grp: "8–12", rating: 4.9, price: 1480, tag: "Slow trek through Kerala backwaters and hills", season: "Sep–Nov" },
  { id: 2, slug: "faroe-islands",     place: "Faroe Islands",     country: "Denmark",    region: "Europe",     cat: "Group Trip",   img: "https://images.unsplash.com/photo-1500380804539-4e1e8c1e7118?w=900&q=80",  days: 7,  grp: "6–10", rating: 4.8, price: 1890, tag: "Cliffs, fog, tiny villages", season: "May–Aug" },
  { id: 3, slug: "sapa-highlands",    place: "Sapa Highlands",    country: "Vietnam",    region: "Asia",       cat: "Group Trip",   img: "https://images.unsplash.com/photo-1528127269322-539801943592?w=900&q=80",  days: 9,  grp: "8–12", rating: 4.9, price: 1120, tag: "Rice terraces & homestays", season: "Mar–May" },
  { id: 4, slug: "kerala-backwaters", place: "Kerala Backwaters", country: "India",      region: "Asia",       cat: "Staycation",   img: "https://images.unsplash.com/photo-1602216056096-3b40cc0c9944?w=900&q=80",  days: 6,  grp: "10",   rating: 4.7, price:  860, tag: "Houseboat & coastal staycation", season: "Nov–Feb" },
  { id: 5, slug: "lofoten-loop",      place: "Lofoten Loop",      country: "Norway",     region: "Europe",     cat: "Group Trip",   img: "https://images.unsplash.com/photo-1601439678777-b2b3c56fa627?w=900&q=80",  days: 8,  grp: "6–8",  rating: 4.9, price: 2240, tag: "Arctic light & fishing huts", season: "Jun–Sep" },
  { id: 6, slug: "atlas-mountains",   place: "Atlas Mountains",   country: "Morocco",    region: "Africa",     cat: "Backpacking",  img: "https://images.unsplash.com/photo-1489493585363-d69421e0edd3?w=900&q=80",  days: 10, grp: "8–14", rating: 4.8, price: 1340, tag: "Berber villages & desert nights", season: "Apr–Jun" },
  { id: 7, slug: "patagonia-circuit", place: "Patagonia Circuit", country: "Chile",      region: "Americas",   cat: "Backpacking",  img: "https://images.unsplash.com/photo-1531731314338-be5dac2a14d3?w=900&q=80",  days: 14, grp: "8–10", rating: 4.9, price: 2680, tag: "W-trek through Torres del Paine", season: "Nov–Mar" },
  { id: 8, slug: "cinque-terre",      place: "Cinque Terre",      country: "Italy",      region: "Europe",     cat: "Staycation",   img: "https://images.unsplash.com/photo-1499678329028-101435549a4e?w=900&q=80",  days: 5,  grp: "10",   rating: 4.7, price:  980, tag: "Coastal villages & slow mornings", season: "May–Oct" },
  { id: 9, slug: "hokkaido-powder",   place: "Hokkaido Powder",   country: "Japan",      region: "Asia",       cat: "Group Trip",   img: "https://images.unsplash.com/photo-1551524559-8af4e6624178?w=900&q=80",  days: 8,  grp: "6–10", rating: 4.9, price: 2120, tag: "Snowboard, onsen, tiny izakayas", season: "Jan–Feb" },
];

function FilterPill({ label, active, onClick, count }) {
  return (
    <button onClick={onClick} style={{
      padding: '10px 18px', borderRadius: 999, border: 'none', cursor: 'pointer',
      background: active ? 'var(--steel-blue)' : 'transparent',
      color: active ? '#fff' : 'var(--night-navy)',
      fontFamily: 'var(--f-sub)', fontWeight: 500, fontSize: 14,
      boxShadow: active ? '0 6px 14px rgba(52,88,130,0.25)' : 'inset 0 0 0 1px var(--ink-12)',
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>
      {label}
      {count !== undefined && (
        <span className="t-mono" style={{
          fontSize: 10,
          padding: '2px 7px', borderRadius: 999,
          background: active ? 'rgba(255,255,255,0.2)' : 'var(--ink-08)',
          color: active ? '#fff' : 'var(--ink-60)',
        }}>{count}</span>
      )}
    </button>
  );
}

function TripsIndex() {
  const [cat, setCat] = useStateT('All');
  const [region, setRegion] = useStateT('All');
  const [sort, setSort] = useStateT('Curated');

  const cats = ['All', 'Group Trip', 'Staycation', 'Backpacking'];
  const regions = ['All', 'Europe', 'Asia', 'Africa', 'Americas'];
  const sorts = ['Curated', 'Price ↑', 'Duration', 'Rating'];

  let filtered = ALL_TRIPS.filter((t) =>
    (cat === 'All' || t.cat === cat) &&
    (region === 'All' || t.region === region)
  );
  if (sort === 'Price ↑') filtered = [...filtered].sort((a, b) => a.price - b.price);
  if (sort === 'Duration') filtered = [...filtered].sort((a, b) => a.days - b.days);
  if (sort === 'Rating')   filtered = [...filtered].sort((a, b) => b.rating - a.rating);

  return (
    <div style={{ width: '100%', background: '#fff', overflowX: 'hidden' }}>
      <window.SiteNav active="Trips"/>
      <window.PageHeader
        kicker="◆ ALL TRIPS · 120 CURATED · 40 DESTINATIONS"
        title="EVERY TRIP"
        italic="WORTH TAKING."
        sub="Filter by region, pace, or season. Each trip is led by someone who's run it three times before you ever heard of it."
        bg="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1800&q=70"
      />

      {/* Filter bar */}
      <div style={{
        position: 'sticky', top: 90, zIndex: 40,
        background: 'rgba(255,255,255,0.85)',
        backdropFilter: 'blur(20px) saturate(150%)',
        WebkitBackdropFilter: 'blur(20px) saturate(150%)',
        borderBottom: '1px solid var(--ink-08)',
        padding: '20px 64px',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div className="t-mono" style={{ color: 'var(--ink-60)', fontSize: 10 }}>CATEGORY</div>
          {cats.map((c) => <FilterPill key={c} label={c} active={cat === c} onClick={() => setCat(c)}/>)}
          <div style={{ width: 1, height: 24, background: 'var(--ink-12)' }}/>
          <div className="t-mono" style={{ color: 'var(--ink-60)', fontSize: 10 }}>REGION</div>
          {regions.map((r) => <FilterPill key={r} label={r} active={region === r} onClick={() => setRegion(r)}/>)}
          <div style={{ flex: 1 }}/>
          <div className="t-mono" style={{ color: 'var(--ink-60)', fontSize: 10 }}>SORT</div>
          <select value={sort} onChange={(e) => setSort(e.target.value)} style={{
            padding: '8px 14px', borderRadius: 999, border: '1px solid var(--ink-12)',
            background: '#fff', fontFamily: 'var(--f-sub)', fontSize: 13, color: 'var(--night-navy)', cursor: 'pointer',
          }}>
            {sorts.map((s) => <option key={s}>{s}</option>)}
          </select>
        </div>
      </div>

      {/* Results */}
      <section style={{ padding: '40px 64px 96px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
          <div className="t-mono" style={{ color: 'var(--ink-60)' }}>SHOWING {filtered.length} OF {ALL_TRIPS.length} TRIPS</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost" style={{ border: '1px solid var(--ink-12)', padding: '8px 14px', fontSize: 12 }}>◧ Map view</button>
          </div>
        </div>
        {filtered.length === 0 ? (
          <div style={{ padding: '80px 0', textAlign: 'center', color: 'var(--ink-60)' }}>
            <div className="t-display" style={{ fontSize: 36, color: 'var(--night-navy)', marginBottom: 8 }}>NOTHING HERE YET.</div>
            <div className="t-sub">Try a different filter — or drop us a note and we'll plan something.</div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {filtered.map((t) => (
              <a key={t.id} href={`trip-detail.html?slug=${t.slug}`} className="trip-card" style={{
                background: '#fff', borderRadius: 20, overflow: 'hidden',
                border: '1px solid var(--ink-08)', boxShadow: 'var(--sh-card)',
                textDecoration: 'none', color: 'inherit', display: 'block', cursor: 'pointer',
              }}>
                <div style={{ position: 'relative', height: 280, overflow: 'hidden' }}>
                  <img src={t.img} alt={t.place} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                  <div style={{
                    position: 'absolute', top: 14, left: 14,
                    background: 'rgba(18,32,58,0.55)',
                    backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
                    padding: '5px 10px', borderRadius: 999,
                  }}>
                    <span className="t-mono" style={{ fontSize: 9, color: '#fff' }}>{t.cat.toUpperCase()}</span>
                  </div>
                  <div style={{
                    position: 'absolute', top: 14, right: 14,
                    background: 'rgba(255,255,255,0.22)',
                    backdropFilter: 'blur(14px) saturate(150%)',
                    WebkitBackdropFilter: 'blur(14px) saturate(150%)',
                    border: '1.5px solid var(--trailhead-gold)',
                    borderRadius: 999, padding: '6px 12px',
                  }}>
                    <span className="t-mono" style={{ fontSize: 9, color: '#fff', marginRight: 4 }}>FROM</span>
                    <span className="t-mono" style={{ fontSize: 12, color: '#fff', fontWeight: 500 }}>${t.price}</span>
                  </div>
                </div>
                <div style={{ padding: '18px 22px 22px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <div>
                      <div className="t-display" style={{ fontSize: 26, color: 'var(--night-navy)', lineHeight: 1 }}>{t.place.toUpperCase()}</div>
                      <div className="t-mono" style={{ color: 'var(--ink-60)', marginTop: 6 }}>{t.country.toUpperCase()} · {t.season.toUpperCase()}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ color: 'var(--trailhead-gold)', fontSize: 13, letterSpacing: 2 }}>★★★★★</div>
                      <div className="t-mono" style={{ color: 'var(--ink-60)', marginTop: 3, fontSize: 11 }}>{t.rating}</div>
                    </div>
                  </div>
                  <p className="t-sub" style={{ fontSize: 14, color: 'var(--ink-60)', margin: '10px 0 14px', lineHeight: 1.4 }}>{t.tag}</p>
                  <div style={{ display: 'flex', gap: 16, paddingTop: 12, borderTop: '1px solid var(--ink-08)' }}>
                    <div className="t-mono" style={{ color: 'var(--ink-60)' }}>◴ {t.days} DAYS</div>
                    <div className="t-mono" style={{ color: 'var(--ink-60)' }}>◎ {t.grp}</div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        )}
      </section>
      <window.SiteFooter/>
    </div>
  );
}

window.TripsIndex = TripsIndex;