// HimLocal — v2 Home / Landing screen
// Cinematic hero with rotating photos, search CTA, quick tiles,
// continue-trip card, quick-shop strip, creator routes, adventures.

const { useState: useStateHome, useEffect: useEffectHome, useRef: useRefHome } = React;

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

const 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 it, slowly', title: <>Trails that don\u2019t <em>trend.</em></>, caption:'Local guides, real altitudes, honest 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.' },
];

const SEARCH_HINTS = [
  'Where to next? Spiti, Parvati, Kinnaur…',
  'Search Triund, Tabo, Hampta…',
  'Find a homestay above the Pin valley…',
  '"3 day Himachal in May"',
];

function HomeIcon({ 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 'compass':return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><circle cx="12" cy="12" r="10"/><path d="m16 8-3 7-5 1 3-7z"/></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 'shop':   return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M3 9V7l3-4h12l3 4v2M3 9v11h18V9M3 9h18M8 9v3a4 4 0 0 0 8 0V9"/></svg>;
    case 'coffee': return <svg width={size} height={size} viewBox="0 0 24 24" {...c}><path d="M4 8h12v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"/><path d="M16 11h2a2 2 0 0 1 0 4h-2M8 4V2M12 4V2"/></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>;
    default: return null;
  }
}

window.HomeIcon = HomeIcon;

function HimLocalHomeScreen({ data, onSearch, onTileExplore, onTileShop, onTileCafes, onTileAdventures, onTileTrips, onOpenProfile, onContinueTrip, onOpenShop, onOpenCreator, onOpenCurated, onOpenActivity }) {
  const [photoIdx, setPhotoIdx] = useStateHome(0);

  useEffectHome(() => {
    const id = setInterval(() => setPhotoIdx(i => (i + 1) % HERO_PHOTOS.length), 5200);
    return () => clearInterval(id);
  }, []);

  const tagline = HERO_TAGLINES[photoIdx];
  const D = data;

  return (
    <div className="v2-home">
      {/* HERO */}
      <div className="v2-hero">
        {HERO_PHOTOS.map((src, i) => (
          <div key={i}
            className={`v2-hero__photo ${i === photoIdx ? 'is-on' : ''}`}
            style={{ backgroundImage: `url(${src})` }}/>
        ))}
        <div className="v2-hero__scrim"/>

        {/* Top bar */}
        <div className="v2-home__top">
          <div className="v2-home__brand">
            <img className="v2-home__mark" src="../../assets/logos/logo-mark.svg" alt="HimLocal logo"/>
            <span className="v2-home__wm">Him<em>Local</em></span>
          </div>
          <div className="v2-home__avatar"
            style={{ backgroundImage:`url(${D.profile.avatar})` }}
            onClick={onOpenProfile}/>
        </div>

        {/* Copy + indicators */}
        <div className="v2-hero__copy">
          <span className="v2-hero__eyebrow">{tagline.eyebrow}</span>
          <h1 className="v2-hero__title">{tagline.title}</h1>
          <p className="v2-hero__caption">{tagline.caption}</p>
        </div>
        <div className="v2-hero__dots">
          {HERO_PHOTOS.map((_, i) => (
            <span key={i} className={`v2-hero__dot ${i === photoIdx ? 'is-on' : ''}`}/>
          ))}
        </div>

        {/* Big SEARCH cta */}
        <button className="v2-search-cta" onClick={onSearch}>
          <span className="v2-search-cta__icon"><HomeIcon name="search" size={22}/></span>
          <div className="v2-search-cta__text">
            <div className="v2-search-cta__primary">Where in the Himalayas?</div>
            <div className="v2-search-cta__hint" style={{ height:13, overflow:'hidden' }}>
              <span style={{ display:'block' }}>{SEARCH_HINTS[0]}</span>
              <span style={{ display:'block' }}>{SEARCH_HINTS[1]}</span>
              <span style={{ display:'block' }}>{SEARCH_HINTS[2]}</span>
              <span style={{ display:'block' }}>{SEARCH_HINTS[3]}</span>
            </div>
          </div>
          <span className="v2-search-cta__send"><HomeIcon name="arrow" size={18}/></span>
        </button>
      </div>

      {/* TILES + BODY */}
      <div className="v2-home__body">
        {/* Continue trip card */}
        <div className="v2-continue" onClick={onContinueTrip}>
          <div className="v2-continue__avatar">3D</div>
          <div className="v2-continue__body">
            <div className="v2-continue__lbl">Trip in progress</div>
            <div className="v2-continue__title">Spiti <em>circuit</em> · 3 days</div>
            <div className="v2-continue__meta">10 — 12 May · 2 stops confirmed · 4 fluid</div>
          </div>
          <button className="v2-continue__cta">Open</button>
        </div>

        {/* Primary action tiles */}
        <div className="v2-tiles">
          <button className="v2-tile v2-tile--wide" onClick={onTileExplore}>
            <div className="v2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1551632811-561732d1e306?w=1200&q=80)` }}/>
            <div className="v2-tile__scrim"/>
            <span className="v2-tile__chip">Discover</span>
            <div className="v2-tile__title">Explore <em>places &amp; trails</em></div>
            <div className="v2-tile__sub">Map, list, itinerary — all in one view</div>
          </button>

          <button className="v2-tile" onClick={onTileShop}>
            <div className="v2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?w=900&q=80)` }}/>
            <div className="v2-tile__scrim"/>
            <span className="v2-tile__chip">Local makers</span>
            <div className="v2-tile__title">Shop <em>local</em></div>
            <div className="v2-tile__sub">Wool, ghee, honey, crafts</div>
          </button>

          <button className="v2-tile" onClick={onTileTrips}>
            <div className="v2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1455156218388-5e61b526818b?w=900&q=80)` }}/>
            <div className="v2-tile__scrim"/>
            <span className="v2-tile__chip">Multi-day</span>
            <div className="v2-tile__title">Trips &amp; <em>treks</em></div>
            <div className="v2-tile__sub">Curated routes · 3 to 11 days</div>
          </button>

          <button className="v2-tile v2-tile--external" onClick={onTileCafes}>
            <div className="v2-tile__bg" style={{ backgroundImage:`url(https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=900&q=80)` }}/>
            <div className="v2-tile__scrim"/>
            <span className="v2-tile__chip">External · Zomato</span>
            <div className="v2-tile__title">Cafés &amp; <em>kitchens</em></div>
            <div className="v2-tile__sub">Open the cafe directory ↗</div>
          </button>
        </div>

        {/* CREATOR ROUTES */}
        <div className="v2-sech">
          <div className="v2-sech__t">Routes by <em>locals</em></div>
          <button className="v2-sech__more" onClick={onTileExplore}>See all</button>
        </div>
        <div className="v2-crow">
          {D.creators.map(c => (
            <button key={c.id} className="v2-ccard" onClick={() => onOpenCreator(c.id)}>
              <div className="v2-ccard__bg" style={{ backgroundImage:`url(${c.img})` }}/>
              <div className="v2-ccard__scrim"/>
              <div className="v2-ccard__top">
                <span className="v2-ccard__region">{c.region}</span>
                <span className="v2-ccard__days">{c.days} DAYS</span>
              </div>
              <div className="v2-ccard__body">
                <div className="v2-ccard__title">{c.route}</div>
                <div className="v2-ccard__by">by {c.name}</div>
              </div>
            </button>
          ))}
        </div>

        {/* QUICK SHOP */}
        <div className="v2-sech">
          <div className="v2-sech__t">Quick <em>shop</em></div>
          <button className="v2-sech__more" onClick={onTileShop}>Full shop →</button>
        </div>
        <div className="v2-qshop">
          <div className="v2-qshop__row">
            {D.shopProducts.slice(0, 6).map(p => (
              <button key={p.id} className="v2-qshop-card" onClick={() => onOpenShop(p.cat)}>
                <div className="v2-qshop-card__img" style={{ backgroundImage:`url(${p.img})` }}/>
                <div className="v2-qshop-card__name">{p.name}</div>
                <div className="v2-qshop-card__price">₹{p.price.toLocaleString()}</div>
              </button>
            ))}
          </div>
        </div>

        {/* TRIPS & TREKS — multi-day curated itineraries */}
        <div className="v2-sech">
          <div className="v2-sech__t">Trips &amp; treks, <em>graded</em></div>
          <button className="v2-sech__more" onClick={onTileTrips}>See all</button>
        </div>
        <div className="v2-adv-row">
          {(D.curatedItineraries || []).slice(0, 6).map(c => (
            <button key={c.id} className="v2-adv" onClick={() => onOpenCurated && onOpenCurated(c.id)}>
              <div className="v2-adv__bg" style={{ backgroundImage:`url(${c.img})` }}/>
              <div className="v2-adv__scrim"/>
              <span className="v2-adv__grade">{c.route?.length || c.days || 3} DAYS</span>
              <div className="v2-adv__body">
                <div className="v2-adv__name">{c.title}</div>
                <div className="v2-adv__meta">{c.region} · from ₹{(c.priceTotal || c.priceFrom || 0).toLocaleString()}</div>
              </div>
            </button>
          ))}
        </div>

        {/* DAY ADVENTURES — single-day, book a slot */}
        <div className="v2-sech">
          <div className="v2-sech__t">Day <em>adventures</em></div>
          <button className="v2-sech__more" onClick={onTileAdventures}>See all</button>
        </div>
        <div className="v2-adv-row">
          {(D.activities || []).slice(0, 6).map(a => (
            <button key={a.id} className="v2-adv" onClick={() => onOpenActivity && onOpenActivity(a.id)}>
              <div className="v2-adv__bg" style={{ backgroundImage:`url(${a.img})` }}/>
              <div className="v2-adv__scrim"/>
              <span className="v2-adv__grade">{a.duration?.split('·')[0]?.trim() || 'Half-day'}</span>
              <div className="v2-adv__body">
                <div className="v2-adv__name">{a.name}</div>
                <div className="v2-adv__meta">{a.region} · from ₹{(a.priceFrom || 0).toLocaleString()}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.HimLocalHomeScreen = HimLocalHomeScreen;