// HimLocal — Web v2 Home (landing)

const { useState: useStateWHome, useEffect: useEffectWHome } = React;

const W_HERO_PHOTOS = [
  'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2000&q=80',
  'https://images.unsplash.com/photo-1626621341517-bbf3d9990a23?w=2000&q=80',
  'https://images.unsplash.com/photo-1455156218388-5e61b526818b?w=2000&q=80',
  'https://images.unsplash.com/photo-1513415564515-763d91423bdd?w=2000&q=80',
];

const W_HERO_TAGLINES = [
  { eyebrow:'In the mountains, slowly', title:<>Experience the <em>Himalayas.</em></>, caption:'Routes, homestays and local makers — picked by the people who actually live up here.' },
  { eyebrow:'Field guide', title:<>Spiti, in <em>autumn.</em></>, caption:'A three-day cold-desert circuit. Slate-roofed homestays. Butter tea at 4 am.' },
  { eyebrow:'Walk, slowly', title:<>Trails that don\u2019t <em>trend.</em></>, caption:'Local guides, honest altitudes, real grades. From day-hikes to high crossings.' },
  { eyebrow:'Mornings', title:<>Dhauladhar at <em>first light.</em></>, caption:'Triund tea-houses, oak forests, and the spine of the range from your window.' },
];

function WIcon({ name, size = 22 }) {
  const c = { stroke:'currentColor', fill:'none', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' };
  switch (name) {
    case 'search':   return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>;
    case 'arrow':    return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'cart':     return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M6 6h15l-1.5 9h-12L4 3H2"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>;
    case 'map':      return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M3 6v15l6-3 6 3 6-3V3l-6 3-6-3-6 3z"/><path d="M9 3v15M15 6v15"/></svg>;
    case 'mountain': return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="m4 21 7-12 4 6 2-3 3 9z"/><circle cx="17" cy="6" r="2"/></svg>;
    case 'route':    return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h6a4 4 0 0 1 0 8h-4a4 4 0 0 0 0 8h4"/></svg>;
    case 'plus':     return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M12 5v14M5 12h14"/></svg>;
    case 'check':    return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M5 12l5 5L20 7"/></svg>;
    default: return null;
  }
}
window.WIcon = WIcon;

function WebTopNav({ route, onGoHome, onGoExplore, onGoShop, onGoAdventures, onGoCafes, onOpenCart, onOpenProfile, onOpenNotifs, onSignIn, unread = 0, cartCount, avatarUrl, dark, extraLinks }) {
  return (
    <div className={`w2-nav ${dark ? 'w2-nav--dark' : ''}`}>
      <div className="w2-nav__brand" onClick={onGoHome}>
        <img className="w2-nav__mark" src="../../assets/logos/logo-mark.svg" alt="HimLocal logo"/>
        <span className="w2-nav__wm">Him<em>Local</em></span>
      </div>
      <div className="w2-nav__links">
        <button className={`w2-nav__link ${route === 'home' ? 'is-on' : ''}`} onClick={onGoHome}>Home</button>
        <button className={`w2-nav__link ${route === 'explore' ? 'is-on' : ''}`} onClick={onGoExplore}>Explore</button>
        <button className={`w2-nav__link ${extraLinks?.itineraries?.active ? 'is-on' : ''}`} onClick={extraLinks?.itineraries?.onClick || onGoAdventures}>Itineraries</button>
        <button className={`w2-nav__link ${route === 'shop' ? 'is-on' : ''}`} onClick={onGoShop}>Shop local</button>
        <button className="w2-nav__link" onClick={onGoCafes}>Cafés ↗</button>
      </div>
      <div className="w2-nav__right">
        {onOpenNotifs && (
          <button className="w2-nav__icon-btn w2-nav__bell" onClick={onOpenNotifs} aria-label="Notifications">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
            {unread > 0 && <span className="w2-nav__bell-dot"/>}
          </button>
        )}
        <button className="w2-nav__icon-btn" onClick={onOpenCart} aria-label="Cart">
          <WIcon name="cart" size={16}/>
          {cartCount > 0 && <span className="w2-nav__badge">{cartCount}</span>}
        </button>
        <button className="w2-nav__avatar" style={{ backgroundImage:`url(${avatarUrl})` }} onClick={onOpenProfile} aria-label="Profile"/>
      </div>
    </div>
  );
}
window.WebTopNav = WebTopNav;

function WebHome({ data, onSearch, onTileExplore, onTileShop, onTileCafes, onTileAdventures, onTileTrips, onContinueTrip, onOpenCreator, onOpenShopCat, onOpenPage, onOpenCurated, onOpenActivity }) {
  const [photoIdx, setPhotoIdx] = useStateWHome(0);
  useEffectWHome(() => {
    const id = setInterval(() => setPhotoIdx(i => (i + 1) % W_HERO_PHOTOS.length), 6000);
    return () => clearInterval(id);
  }, []);
  const tag = W_HERO_TAGLINES[photoIdx];
  const D = data;

  return (
    <div className="w2-home w2-route">
      {/* HERO */}
      <div className="w2-hero">
        {W_HERO_PHOTOS.map((src, i) => (
          <div key={i} className={`w2-hero__photo ${i === photoIdx ? 'is-on' : ''}`} style={{ backgroundImage:`url(${src})` }}/>
        ))}
        <div className="w2-hero__scrim"/>
        <div className="w2-hero__copy">
          <span className="w2-hero__eyebrow">{tag.eyebrow}</span>
          <h1 className="w2-hero__title">{tag.title}</h1>
          <p className="w2-hero__caption">{tag.caption}</p>
        </div>
        <div className="w2-hero__dots">
          {W_HERO_PHOTOS.map((_, i) => <span key={i} className={`w2-hero__dot ${i === photoIdx ? 'is-on' : ''}`}/>)}
        </div>
      </div>

      {/* Search strip (lifted below hero) */}
      <div className="w2-search-strip">
        <div className="w2-search">
          <div className="w2-search__field" onClick={onSearch}>
            <div className="w2-search__lbl">Where</div>
            <div className="w2-search__val--strong">Spiti, Kinnaur, Parvati…</div>
          </div>
          <div className="w2-search__field" onClick={onSearch}>
            <div className="w2-search__lbl">When</div>
            <div className="w2-search__val">Any 3 — 7 days</div>
          </div>
          <div className="w2-search__field" onClick={onSearch}>
            <div className="w2-search__lbl">Travellers</div>
            <div className="w2-search__val">2 adults</div>
          </div>
          <button className="w2-search__cta" onClick={onSearch} aria-label="Search"><WIcon name="search" size={22}/></button>
        </div>
      </div>

      {/* Lifted tiles */}
      <div className="w2-tiles">
        <button className="w2-tile" onClick={onTileExplore}>
          <div className="w2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1551632811-561732d1e306?w=1400&q=80)` }}/>
          <div className="w2-tile__scrim"/>
          <span className="w2-tile__chip">Discover</span>
          <div className="w2-tile__title">Explore <em>places &amp; trails</em></div>
          <div className="w2-tile__sub">Map · List · Itinerary, all in one view</div>
        </button>
        <button className="w2-tile" onClick={onTileShop}>
          <div className="w2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?w=1200&q=80)` }}/>
          <div className="w2-tile__scrim"/>
          <span className="w2-tile__chip">Local makers</span>
          <div className="w2-tile__title">Shop <em>local</em></div>
          <div className="w2-tile__sub">Wool, ghee, honey, crafts</div>
        </button>
        <button className="w2-tile" onClick={onTileTrips}>
          <div className="w2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1455156218388-5e61b526818b?w=1200&q=80)` }}/>
          <div className="w2-tile__scrim"/>
          <span className="w2-tile__chip">Multi-day</span>
          <div className="w2-tile__title">Trips &amp; <em>treks</em></div>
          <div className="w2-tile__sub">Curated routes · 3 to 11 days</div>
        </button>
        <button className="w2-tile w2-tile--external" onClick={onTileCafes}>
          <div className="w2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1200&q=80)` }}/>
          <div className="w2-tile__scrim"/>
          <span className="w2-tile__chip">External · Zomato</span>
          <div className="w2-tile__title">Cafés &amp; <em>kitchens</em></div>
          <div className="w2-tile__sub">Open the cafe directory ↗</div>
        </button>
      </div>

      {/* Continue trip */}
      <div className="w2-section w2-section--tight">
        <div className="w2-continue" onClick={onContinueTrip}>
          <div className="w2-continue__badge">3D</div>
          <div className="w2-continue__body">
            <div className="w2-continue__lbl">Trip in progress</div>
            <div className="w2-continue__t">Spiti <em>circuit</em> · 3 days</div>
            <div className="w2-continue__m">10 — 12 May 2026 · 2 stops confirmed · 4 fluid · Hosted by Sourabh Thakur</div>
          </div>
          <button className="w2-continue__cta" onClick={onContinueTrip}>Open itinerary →</button>
        </div>
      </div>

      {/* Creator routes */}
      <div className="w2-section">
        <div className="w2-sech">
          <div>
            <h2 className="w2-sech__t">Routes by <em>locals</em></h2>
            <div className="w2-sech__sub">Trips written, walked and hosted by people who live up here.</div>
          </div>
          <button className="w2-sech__more" onClick={onTileExplore}>See all routes</button>
        </div>
        <div className="w2-crow">
          {D.creators.map(c => (
            <button key={c.id} className="w2-ccard" onClick={() => onOpenCreator(c.id)}>
              <div className="w2-ccard__bg" style={{ backgroundImage:`url(${c.img})` }}/>
              <div className="w2-ccard__scrim"/>
              <div className="w2-ccard__top">
                <span className="w2-ccard__region">{c.region}</span>
                <span className="w2-ccard__days">{c.days} DAYS</span>
              </div>
              <div className="w2-ccard__body">
                <div className="w2-ccard__title">{c.route}</div>
                <div className="w2-ccard__by">by {c.name}</div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Adventures */}
      {/* Trips & treks — multi-day curated itineraries */}
      <div className="w2-section">
        <div className="w2-sech">
          <div>
            <h2 className="w2-sech__t">Trips &amp; treks, <em>graded.</em></h2>
            <div className="w2-sech__sub">Multi-day curated routes. Stays, permits and the lead host included.</div>
          </div>
          <button className="w2-sech__more" onClick={onTileTrips}>All trips →</button>
        </div>
        <div className="w2-adv-row">
          {(D.curatedItineraries || []).slice(0, 6).map(c => (
            <button key={c.id} className="w2-adv" onClick={() => onOpenCurated && onOpenCurated(c.id)}>
              <div className="w2-adv__bg" style={{ backgroundImage:`url(${c.img})` }}/>
              <div className="w2-adv__scrim"/>
              <span className="w2-adv__grade">{c.route?.length || c.days || 3} DAYS</span>
              <span className="w2-adv__meta">from ₹{(c.priceTotal || c.priceFrom || 0).toLocaleString()}</span>
              <div className="w2-adv__name">{c.title}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Day adventures — single-day, book-a-slot */}
      <div className="w2-section">
        <div className="w2-sech">
          <div>
            <h2 className="w2-sech__t">Day <em>adventures.</em></h2>
            <div className="w2-sech__sub">Paragliding, rafting, biking — book one slot, head out tomorrow.</div>
          </div>
          <button className="w2-sech__more" onClick={onTileAdventures}>All activities →</button>
        </div>
        <div className="w2-adv-row">
          {(D.activities || []).slice(0, 6).map(a => (
            <button key={a.id} className="w2-adv" onClick={() => onOpenActivity && onOpenActivity(a.id)}>
              <div className="w2-adv__bg" style={{ backgroundImage:`url(${a.img})` }}/>
              <div className="w2-adv__scrim"/>
              <span className="w2-adv__grade">{a.duration?.split('·')[0]?.trim() || 'Half-day'}</span>
              <span className="w2-adv__meta">from ₹{(a.priceFrom || 0).toLocaleString()}</span>
              <div className="w2-adv__name">{a.name}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Quick shop */}
      <div className="w2-section">
        <div className="w2-sech">
          <div>
            <h2 className="w2-sech__t">From the <em>local</em> shop.</h2>
            <div className="w2-sech__sub">Yak wool above Kibber. Ghee from three families in Mud. Apricots from Kalpa.</div>
          </div>
          <button className="w2-sech__more" onClick={onTileShop}>Full shop →</button>
        </div>
        <div className="w2-qshop">
          {D.shopProducts.slice(0, 5).map(p => {
            const cat = D.shopCategories.find(c => c.id === p.cat);
            return (
              <button key={p.id} className="w2-qprod" onClick={() => onOpenShopCat(p.cat)}>
                <div className="w2-qprod__img" style={{ backgroundImage:`url(${p.img})` }}/>
                <div className="w2-qprod__body">
                  <div className="w2-qprod__cat">{cat?.name}</div>
                  <div className="w2-qprod__name">{p.name}</div>
                  <div className="w2-qprod__price">₹{p.price.toLocaleString()}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Footer */}
      <div className="w2-footer">
        <div className="w2-footer__inner">
          <div>
            <div className="w2-footer__brand">Him<em>Local</em></div>
            <div className="w2-footer__tagline">An editorial field-guide for the Himalayas. Built with locals, in the mountains. © 2026 HimLocal Field Studios.</div>
          </div>
          <div>
            <h6>Discover</h6>
            <ul>
              <li onClick={onTileExplore}>Trails</li>
              <li onClick={onTileExplore}>Homestays</li>
              <li onClick={onTileExplore}>Creator routes</li>
              <li onClick={onTileExplore}>Monastery list</li>
            </ul>
          </div>
          <div>
            <h6>Shop</h6>
            <ul>
              <li onClick={() => onOpenShopCat('wool')}>Woolen artisans</li>
              <li onClick={() => onOpenShopCat('ghee')}>Ghee &amp; dairy</li>
              <li onClick={() => onOpenShopCat('honey')}>Honey &amp; tea</li>
              <li onClick={() => onOpenShopCat('craft')}>Crafts &amp; metalwork</li>
            </ul>
          </div>
          <div>
            <h6>Field studio</h6>
            <ul>
              <li onClick={() => onOpenPage && onOpenPage('about')}>About</li>
              <li onClick={() => onOpenPage && onOpenPage('become-a-host')}>Become a host</li>
              <li onClick={() => onOpenPage && onOpenPage('contact')}>Press &amp; partners</li>
              <li onClick={() => onOpenPage && onOpenPage('help')}>Help</li>
              <li onClick={() => onOpenPage && onOpenPage('faq')}>FAQ</li>
              <li onClick={() => onOpenPage && onOpenPage('cancellation')}>Cancellation</li>
              <li onClick={() => onOpenPage && onOpenPage('terms')}>Terms</li>
              <li onClick={() => onOpenPage && onOpenPage('privacy')}>Privacy</li>
            </ul>
          </div>
        </div>
        <div className="w2-footer__bottom">
          <span>HimLocal · Design System v2 · May 2026</span>
          <span>Made between Manali · Kalpa · Bengaluru</span>
        </div>
      </div>
    </div>
  );
}
window.WebHome = WebHome;