// tours.jsx — Tours listing & Tour Detail pages

const CATEGORIES = [
  { id: 'all', label: 'All Journeys' },
  { id: 'classic', label: 'Classic' },
  { id: 'honeymoon', label: 'Honeymoon' },
  { id: 'beach', label: 'Beach' },
  { id: 'hill-country', label: 'Hill Country' },
  { id: 'wildlife', label: 'Wildlife' },
  { id: 'adventure', label: 'Adventure' },
  { id: 'culture', label: 'Culture' },
];

const ToursPage = () => {
  const [cat, setCat] = React.useState('all');
  const tours = cat === 'all' ? ALL_TOURS : ALL_TOURS.filter(t => t.category === cat);
  const heroRef = React.useRef(null);
  const y = useParallax(heroRef);
  const mediaT = `translate3d(0, ${y * 0.38}px, 0) scale(1.0)`;
  const contentT = `translate3d(0, ${y * 0.18}px, 0)`;
  const contentOp = Math.max(0, 1 - y / 600);

  return (
    <>
      <section ref={heroRef} className="tours-hero">
        <div className="tours-hero__media" style={{ transform: mediaT, willChange: 'transform' }}>
          <img src="images/samples/image20.webp" alt="Sri Lanka coastline" style={{objectPosition: 'center 40%'}} />
        </div>
        <div className="tours-hero__veil"></div>
        <div className="wrap tours-hero__content" style={{ transform: contentT, opacity: contentOp, willChange: 'transform, opacity' }}>
          <span className="eyebrow" style={{color: '#C6A96B'}}>The Collection</span>
          <h1 className="tours-hero__title">Curated <em>journeys.</em></h1>
        </div>
      </section>

      <section className="tours-aside-section">
        <div className="wrap">
          <div className="tours-aside">
            <span className="tours-aside__ornament">✦</span>
            <p className="tours-aside__text">
              All journeys are fully <em>bespoke</em> — final pricing varies with your choice of hotels, dates, and group size. <a className="tours-aside__link" onClick={() => window.__nav('contact')}>Contact us for a personalised quotation.</a>
            </p>
          </div>
        </div>
      </section>

      <section>
        <div className="wrap">
          <div className="tours-filters">
            <div className="tours-filters__group">
              {CATEGORIES.map(c => (
                <button
                  key={c.id}
                  className={`tours-filter ${cat === c.id ? 'tours-filter--active' : ''}`}
                  onClick={() => setCat(c.id)}
                >
                  {c.label}
                </button>
              ))}
            </div>
            <div className="tours-count">
              <i>{String(tours.length).padStart(2, '0')}</i>
              {tours.length === 1 ? 'Journey' : 'Journeys'} shown
            </div>
          </div>

          <div className="tours-grid">
            {tours.map((t, i) => (
              <Reveal as="article" key={t.id} className="tcard" delay={(i % 3) * 80}
                onClick={() => window.__nav('detail', t.id)}>
                <div className="tcard__img-wrap">
                  <img className="tcard__img" src={t.img} alt={t.title} loading="lazy" />
                  <span className="tcard__tag">{t.tag}</span>
                </div>
                <span className="tcard__num">N° {t.no}</span>
                <h3 className="tcard__title">{t.title}</h3>
                <p className="tcard__desc">{t.poetic}</p>
                <div className="tcard__meta">
                  <span><i>{t.duration}</i></span>
                  <span className="tcard__highlights">{t.highlights}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

const DetailHero = ({ tour }) => {
  const ref = React.useRef(null);
  const y = useParallax(ref);
  const mediaT = `translate3d(0, ${y * 0.38}px, 0) scale(1.06)`;
  const contentT = `translate3d(0, ${y * 0.18}px, 0)`;
  const metaT = `translate3d(0, ${y * 0.10}px, 0)`;
  const contentOp = Math.max(0, 1 - y / 700);

  return (
    <section ref={ref} className="detail-hero">
      <div className="detail-hero__media" style={{ transform: mediaT, willChange: 'transform' }}>
        <img src={tour.hero} alt={tour.title} />
      </div>
      <div className="detail-hero__veil"></div>
      <div className="wrap detail-hero__content" style={{ transform: contentT, opacity: contentOp, willChange: 'transform, opacity' }}>
        <button className="detail-hero__crumb" onClick={() => window.__nav('tours')}>
          ← {tour.crumb}
        </button>
        <span className="eyebrow" style={{color: '#C6A96B'}}>N° {tour.no.replace(/\.$/, '')} · {tour.title}</span>
        <h1 className="detail-hero__title">{tour.titlePre} <em>{tour.titleEm}</em></h1>
        <div className="detail-hero__meta" style={{ transform: metaT }}>
          {tour.meta.map(m => (
            <div key={m.lbl} className="detail-hero__meta-item">
              <span className="detail-hero__meta-lbl">{m.lbl}</span>
              <span className="detail-hero__meta-val">{m.val}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Overview = ({ tour }) => (
  <section className="wrap">
    <Reveal as="div" className="overview">
      <div className="overview__head">
        <div className="overview__label">{tour.overview.label}</div>
        <h2 className="overview__title">{tour.overview.title}</h2>
      </div>
      <div className="overview__body">
        {tour.overview.body.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </Reveal>
  </section>
);

const Timeline = ({ tour }) => {
  const [active, setActive] = React.useState(0);
  const refs = React.useRef([]);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const idx = Number(e.target.getAttribute('data-idx'));
          setActive(idx);
        }
      });
    }, { rootMargin: '-30% 0px -50% 0px', threshold: 0 });

    refs.current.forEach(el => el && io.observe(el));
    return () => io.disconnect();
  }, [tour.id]);

  const go = (i) => () => {
    refs.current[i]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="timeline-section" id="itinerary">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div className="sec-head__left">
              <span className="sec-head__num">II. Itinerary</span>
              <h2 className="sec-head__title">Day by <em>day.</em></h2>
            </div>
            <p className="sec-head__right">A working framework — to be edited with your designer. Add days, swap properties, slow down, speed up. Every Serendria journey is shaped around how you want to travel.</p>
          </div>
        </Reveal>

        <div className="timeline-layout">
          <aside className="day-nav">
            <div className="day-nav__title">Itinerary</div>
            {tour.days.map((d, i) => (
              <button
                key={i}
                className={`day-nav__btn ${active === i ? 'day-nav__btn--active' : ''}`}
                onClick={go(i)}
              >
                <i>{d.no}</i>
                <span>{d.loc}</span>
              </button>
            ))}
          </aside>

          <div className="timeline">
            {tour.days.map((d, i) => (
              <article
                key={i}
                className="timeline__day"
                data-idx={i}
                ref={el => refs.current[i] = el}
              >
                <div className="timeline__day-marker">
                  <span className="timeline__day-no">Day</span>
                  <div className="timeline__day-big">{d.big}</div>
                  <div className="timeline__day-loc">{d.loc}</div>
                </div>
                <div>
                  <h3 className="timeline__day-title">{d.title}</h3>
                  <p className="timeline__day-body">{d.body}</p>
                  <div className="timeline__day-img">
                    <img src={d.img} alt={d.title} loading="lazy" style={d.imgPos ? {objectPosition: d.imgPos} : undefined} />
                  </div>
                  <div className="timeline__day-highlights">
                    {d.chips.map((c, ci) => <span key={ci} className="timeline__chip">{c}</span>)}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Hotels = ({ tour }) => (
  <section className="hotels">
    <div className="wrap">
      <Reveal>
        <div className="sec-head">
          <div className="sec-head__left">
            <span className="sec-head__num">III. Hotels</span>
            <h2 className="sec-head__title">Where you'll <em>sleep.</em></h2>
          </div>
          <p className="sec-head__right">{tour.hotels.length} properties form the spine of this journey — each one personally vetted. Every other night is yours to shape with your designer.</p>
        </div>
      </Reveal>
      <div className="hotels__grid">
        {tour.hotels.map((h, i) => (
          <Reveal as="article" key={h.name} className="hotel" delay={i * 80}>
            <div className="hotel__img"><img src={h.img} alt={h.name} loading="lazy" /></div>
            <span className="hotel__loc">{h.loc}</span>
            <h3 className="hotel__name">{h.name}</h3>
            <span className="hotel__nights">{h.nights}</span>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const ContactBand = () => (
  <section className="pricing-band">
    <div className="wrap">
      <Reveal>
        <div className="pricing-band__sub">Every Serendria journey is priced individually — final costs vary based on your hotel selection, travel dates, and group size.</div>
        <button className="btn btn--gold btn--lg" onClick={() => window.__nav('contact')}>
          Request a Quotation <span className="btn__arrow">→</span>
        </button>
        <p className="pricing-band__caption">All journeys include private chauffeur, internal transfers, breakfasts and curated experiences. International flights are arranged separately at preferred fares.</p>
      </Reveal>
    </div>
  </section>
);

const DetailPage = ({ tourId }) => {
  const tour = TOUR_DETAILS[tourId] || TOUR_DETAILS['island-loop'];
  return (
    <>
      <DetailHero tour={tour} />
      <Overview tour={tour} />
      <Timeline tour={tour} />
      <Hotels tour={tour} />
      <ContactBand />
    </>
  );
};

Object.assign(window, { ToursPage, DetailPage });