/* ============================================
   Yurt on Wheels — Page components (Home + Catalog + Tour Detail)
   ============================================ */

// ---------- Home ----------
function HomePage({ route, t, tweaks }) {
  const lang = route.lang;
  return (
    <main>
      <section className="container">
        {tweaks.hero_variant === "split" && <HeroSplit t={t} lang={lang}/>}
        {tweaks.hero_variant === "fullbleed" && <HeroFullBleed t={t} lang={lang}/>}
        {tweaks.hero_variant === "quiet" && <HeroQuiet t={t} lang={lang}/>}
      </section>

      <section className="container">
        <TrustStrip t={t}/>
      </section>

      <section className="container section">
        <div className="section-head">
          <div>
            <span className="kicker gold-dot" style={{ marginBottom: 12 }}>{t.home.eyebrow}</span>
            <h2 style={{ marginTop: 8 }}>{t.home.mangystau.h}</h2>
          </div>
          <a className="see-all" href={`#/${lang}/nature`}>{t.cta.learnMore} →</a>
        </div>
        <div className="mangystau-row">
          <p className="t-body-md" style={{ maxWidth: "58ch", fontSize: 17 }}>
            {t.home.mangystau.lead}
          </p>
          <div className="mangystau-photo-grid">
            <PhotoPlaceholder locId="sherkala" aspect="3-2"/>
            <PhotoPlaceholder locId="bozzhyra_u" aspect="3-2"/>
            <PhotoPlaceholder locId="torysh" aspect="3-2"/>
            <PhotoPlaceholder locId="tuzbair" aspect="3-2"/>
          </div>
        </div>
      </section>

      <section className="container section">
        <div className="section-head">
          <div>
            <h2>{t.home.categories.h}</h2>
            <div className="sub">{t.home.categories.sub}</div>
          </div>
          <a className="see-all" href={`#/${lang}/tours`}>{t.cta.seeAll} →</a>
        </div>
        <TourGrid lang={lang} t={t} slugs={["combo-tour", "3-location-tour", "1-day-jeep-tour", "2-day-jeep-tour"]}/>
      </section>

      <section className="container section">
        <div className="two-col-stack">
          <div>
            <span className="kicker">{t.common.privateLabel}</span>
            <h2 style={{ margin: "12px 0 var(--s-base)", fontSize: 36, fontWeight: 600, letterSpacing: "-0.6px" }}>{t.home.privateBlock.h}</h2>
            <p className="t-body-md" style={{ fontSize: 17, maxWidth: "56ch" }}>{t.home.privateBlock.sub}</p>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href={`#/${lang}/private-custom-tours`}>{t.cta.requestPrivate}</a>
              <a className="btn btn-ghost" href={`#/${lang}/tours/1-day-jeep-tour`}>{t.tours["1-day-jeep-tour"].title}</a>
            </div>
          </div>
          <div className="private-photo-grid">
            <PhotoPlaceholder locId="bozzhyra_l" aspect="auto" className="span-2-rows" />
            <PhotoPlaceholder locId="kyzylkup" aspect="auto"/>
            <PhotoPlaceholder locId="beketata" aspect="auto"/>
          </div>
        </div>
      </section>

      <section className="container section-sm">
        <div className="section-head">
          <div>
            <h2>{t.home.multiCity.h}</h2>
            <div className="sub">{t.home.multiCity.sub}</div>
          </div>
        </div>
        <div className="city-strip">
          {[
            { city: "Aktau",     sub: "Caspian coast",  tone: "cool" },
            { city: "Astana",    sub: "Capital",        tone: "cool" },
            { city: "Almaty",    sub: "Mountains",      tone: "warm" },
            { city: "Turkistan", sub: "Heritage",       tone: "warm" },
            { city: "Mangystau", sub: "Steppe & cliffs", tone: "dusk" },
          ].map((c) => (
            <div key={c.city}>
              <PhotoPlaceholder label={c.city} sub={c.sub} tone={c.tone} aspect="1"/>
              <div className="t-title-md" style={{ marginTop: 8 }}>{c.city}</div>
              <div className="t-body-sm t-muted">{c.sub}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="container section">
        <div className="two-col-stack">
          <div className="card" style={{ padding: 28 }}>
            <span className="kicker">{t.nav.nature}</span>
            <h2 style={{ margin: "12px 0 8px", fontSize: 28, fontWeight: 600, letterSpacing: "-0.4px" }}>{t.home.natureTeaser.h}</h2>
            <p className="t-body-md" style={{ marginBottom: 24 }}>{t.home.natureTeaser.sub}</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 24 }}>
              <PhotoPlaceholder label={t.nature.animals.h} sub={t.nature.animals.items[0]} tone="warm" aspect="1" icon={Icon.Leaf}/>
              <PhotoPlaceholder label={t.nature.insects.h} sub={t.nature.insects.items[0]} tone="cool" aspect="1" icon={Icon.Sparkle}/>
              <PhotoPlaceholder label={t.nature.plants.h} sub={t.nature.plants.items[0]} tone="warm" aspect="1" icon={Icon.Leaf}/>
            </div>
            <a className="btn btn-ghost btn-sm" href={`#/${lang}/nature`}>{t.cta.learnMore}</a>
          </div>
          <div className="card" style={{ padding: 28 }}>
            <span className="kicker">{t.common.insurance}</span>
            <h2 style={{ margin: "12px 0 8px", fontSize: 28, fontWeight: 600, letterSpacing: "-0.4px" }}>{t.home.safetyTeaser.h}</h2>
            <p className="t-body-md" style={{ marginBottom: 24 }}>{t.home.safetyTeaser.sub}</p>
            <ul className="incl-list" style={{ marginBottom: 24 }}>
              {t.insurance.bring_items.slice(0, 4).map((it, i) => (
                <li key={i}><span className="ico"><Icon.Check width="14" height="14"/></span> {it}</li>
              ))}
            </ul>
            <a className="btn btn-ghost btn-sm" href={`#/${lang}/safety-insurance`}>{t.cta.learnMore}</a>
          </div>
        </div>
      </section>

      <section className="container section">
        <div className="closing-cta-block">
          <h2 style={{ fontSize: "clamp(22px, 3.4vw, 44px)", fontWeight: 600, letterSpacing: "-0.6px", margin: 0 }}>
            {t.home.closing}
          </h2>
          <div className="closing-cta-btns">
            <a className="btn btn-primary" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
              <Icon.WhatsApp width="18" height="18"/> {t.cta.bookWhatsApp}
            </a>
            <a className="btn btn-secondary" href={`#/${lang}/tours`}>{t.cta.seeTours}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- Hero variants ----------
function HeroSplit({ t, lang }) {
  return (
    <div className="hero-split">
      <div>
        <div className="hero-eyebrow"><span className="dot"></span>{t.home.eyebrow}</div>
        <h1 className="hero-h1">
          {t.home.heroH1Pre} <em>{t.home.heroH1Em}</em>
        </h1>
        <p className="hero-lead">{t.home.heroLead}</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href={`#/${lang}/tours`}>{t.cta.seeTours} <Icon.ArrowRight width="16" height="16"/></a>
          <a className="btn btn-secondary" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
            <Icon.WhatsApp width="18" height="18"/> {t.cta.bookWhatsApp}
          </a>
        </div>
        <div className="hero-stats">
          <div>
            <div className="hero-stat-val">{t.home.stat1.v}</div>
            <div className="hero-stat-lbl">{t.home.stat1.l}</div>
          </div>
          <div>
            <div className="hero-stat-val">{t.home.stat2.v}</div>
            <div className="hero-stat-lbl">{t.home.stat2.l}</div>
          </div>
          <div>
            <div className="hero-stat-val">{t.home.stat3.v}</div>
            <div className="hero-stat-lbl">{t.home.stat3.l}</div>
          </div>
        </div>
      </div>
      <YurtLightHero caption={t.home.heroCaption}/>
    </div>
  );
}

function HeroFullBleed({ t, lang }) {
  return (
    <div className="hero-fullbleed">
      <div className="hero-fullbleed-inner">
        <YurtLightHero caption={t.home.heroCaption}/>
        <div className="hero-fullbleed-overlay">
          <div className="hero-eyebrow hero-fullbleed-eyebrow">
            <span className="dot"></span>{t.home.eyebrow}
          </div>
          <h1 className="hero-h1 hero-fullbleed-h1">
            {t.home.heroH1Pre} <em className="hero-fullbleed-em">{t.home.heroH1Em}</em>
          </h1>
          <div className="hero-ctas hero-fullbleed-ctas">
            <a className="btn btn-primary" href={`#/${lang}/tours`}>{t.cta.seeTours} <Icon.ArrowRight width="16" height="16"/></a>
            <a className="btn btn-white" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
              <Icon.WhatsApp width="18" height="18"/> {t.cta.bookWhatsApp}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroQuiet({ t, lang }) {
  return (
    <div style={{ padding: "32px 0 24px" }}>
      <div className="hero-eyebrow"><span className="dot"></span>{t.home.eyebrow}</div>
      <h1 className="hero-h1" style={{ maxWidth: "20ch", fontSize: "clamp(34px, 4vw, 52px)" }}>
        {t.home.heroH1Pre} <em>{t.home.heroH1Em}</em>
      </h1>
      <p className="hero-lead" style={{ maxWidth: "62ch", marginBottom: 24 }}>{t.home.heroLead}</p>
      <div className="hero-ctas">
        <a className="btn btn-primary" href={`#/${lang}/tours`}>{t.cta.seeTours} <Icon.ArrowRight width="16" height="16"/></a>
        <a className="btn btn-ghost" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
          <Icon.WhatsApp width="18" height="18"/> {t.cta.bookWhatsApp}
        </a>
      </div>
      <div className="quiet-hero-strip">
        {["sherkala", "bozzhyra_u", "tuzbair", "torysh"].map(id => (
          <PhotoPlaceholder key={id} locId={id} aspect="169"/>
        ))}
      </div>
    </div>
  );
}

// ---------- Trust strip ----------
function TrustStrip({ t }) {
  const items = t.home.trust.items;
  const icons = [Icon.Truck, Icon.Compass, Icon.Plate, Icon.Shield, Icon.Globe];
  return (
    <div className="trust-strip">
      {items.map((it, i) => {
        const I = icons[i] || Icon.Sparkle;
        return (
          <div className="trust-item" key={i}>
            <span className="ico"><I width="18" height="18"/></span>
            <div>
              <div className="ttl">{it.t}</div>
              <div className="sub">{it.s}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------- Tour grid (catalog cards) ----------
function TourGrid({ slugs, lang, t }) {
  return (
    <div className="tour-grid">
      {slugs.map(slug => <TourCard key={slug} slug={slug} lang={lang} t={t}/>)}
    </div>
  );
}

function TourCard({ slug, lang, t }) {
  const tour = window.YOW_TOURS[slug] || jeepSyntheticTour(slug, t);
  const tourCopy = t.tours[slug];
  const [saved, setSaved] = useState(false);
  const heroLocs = tour.heroLocs || tour.gallery?.slice(0, 1) || ["sherkala"];

  // duration label
  const durLabel = t.common[tour.durationKey || "oneDay"];
  const isJeep = (tour.kind === "jeep") || slug.includes("jeep");
  const isMulti = slug.includes("2-day") || slug.includes("3-day");
  const badge = tour.badge;

  return (
    <a className="tour-card" href={`#/${lang}/tours/${slug}`}>
      <div className="pic-wrap">
        <PhotoPlaceholder locId={heroLocs[0]} aspect="1"/>
        {badge && <div className="favbadge">★ {badge}</div>}
        <button
          className={`heart ${saved ? "is-saved" : ""}`}
          onClick={(e) => { e.preventDefault(); e.stopPropagation(); setSaved(s => !s); }}
          aria-label="Save"
        >
          {saved ? <Icon.HeartFill/> : <Icon.Heart/>}
        </button>
      </div>
      <div>
        <div className="meta">
          <div>
            <div className="ttl">{tourCopy?.title || slug}</div>
            <div className="sub">{durLabel} · {isJeep ? t.common.jeep : t.common.group}{tour.locationsCount ? ` · ${tour.locationsCount} ${t.common.locations}` : (isMulti ? "" : "")}</div>
          </div>
          <div className="rating">
            <Icon.Star width="12" height="12"/> 4.9
          </div>
        </div>
        <div className="price-row" style={{ marginTop: 6 }}>
          <b>{tourCopy?.priceSummary}</b> <span className="sub">· {tourCopy?.priceNote}</span>
        </div>
      </div>
    </a>
  );
}

function jeepSyntheticTour(slug, t) {
  const tc = t.tours[slug];
  return {
    slug,
    kind: "jeep",
    heroLocs: ["bozzhyra_u"],
    durationKey: slug.startsWith("1") ? "oneDay" : slug.startsWith("2") ? "twoDays" : "threeDays",
  };
}

// ---------- Catalog page ----------
function CatalogPage({ route, t }) {
  const lang = route.lang;
  const [filter, setFilter] = useState("all");
  const allSlugs = window.YOW_ROUTE_LISTING;
  const filtered = useMemo(() => {
    if (filter === "all") return allSlugs;
    if (filter === "day") return allSlugs.filter(s => !s.includes("jeep") || s === "1-day-jeep-tour");
    if (filter === "jeep") return allSlugs.filter(s => s.includes("jeep"));
    if (filter === "multi") return allSlugs.filter(s => s.includes("2-day") || s.includes("3-day"));
    return allSlugs;
  }, [filter]);

  return (
    <main>
      <div className="container section-tight">
        <div className="breadcrumb">
          <a href={`#/${lang}`}>{t.nav.home}</a>
          <span className="sep">/</span>
          <span className="now">{t.nav.tours}</span>
        </div>
        <h1 className="detail-title" style={{ marginTop: 16 }}>{t.catalog.h}</h1>
        <p className="detail-sub">{t.catalog.sub}</p>
      </div>

      <div className="container">
        <div className="chips" style={{ marginBottom: 32 }}>
          {[
            { id: "all",  label: t.catalog.filters.all },
            { id: "day",  label: t.catalog.filters.day },
            { id: "jeep", label: t.catalog.filters.jeep },
            { id: "multi", label: t.catalog.filters.multi },
          ].map(f => (
            <button key={f.id} className={`chip ${filter === f.id ? "is-active" : ""}`} onClick={() => setFilter(f.id)}>
              {f.label}
            </button>
          ))}
        </div>
        <TourGrid slugs={filtered} lang={lang} t={t}/>
      </div>
    </main>
  );
}

// ---------- Tour detail (full template) ----------
function TourDetailPage({ route, t }) {
  const lang = route.lang;
  const slug = route.slug;
  const isJeep = slug.includes("jeep");
  const isMulti = slug.includes("2-day") || slug.includes("3-day");
  if (isJeep) return <JeepListPage route={route} t={t} multiDay={isMulti}/>;

  const tour = window.YOW_TOURS[slug];
  if (!tour) return <NotFound t={t} route={route}/>;
  const tc = t.tours[slug];
  const [optIdx, setOptIdx] = useState(0);
  const [openAcc, setOpenAcc] = useState(0);
  const opt = tour.options[optIdx];

  // included list — start with default
  const incl = (tour.included === "default") ? t.detail.includedDefault.slice() : [];
  if (tour.withDinner) incl.push(t.tl.dinner);
  incl.push(t.detail.memorableTea);

  return (
    <main>
      <div className="container section-tight">
        <div className="breadcrumb">
          <a href={`#/${lang}`}>{t.nav.home}</a>
          <span className="sep">/</span>
          <a href={`#/${lang}/tours`}>{t.nav.tours}</a>
          <span className="sep">/</span>
          <span className="now">{tc.title}</span>
        </div>
        <h1 className="detail-title">{tc.title}</h1>
        <p className="detail-sub">{tc.subtitle}</p>

        {/* hero photo grid (Airbnb-ish 2/2 layout) */}
        <div className="detail-hero">
          <div className="main">
            <PhotoPlaceholder locId={tour.heroLocs[0]} aspect="auto"/>
          </div>
          <div className="side">
            <PhotoPlaceholder locId={tour.gallery[1] || tour.heroLocs[1]} aspect="auto"/>
            <PhotoPlaceholder locId={tour.gallery[2] || tour.gallery[0]} aspect="auto"/>
          </div>
        </div>

        {/* Quick facts */}
        <div className="quick-facts">
          <div className="qfact"><div className="lbl">{t.common.duration}</div><div className="val">{t.common[tour.durationKey]}</div></div>
          <div className="qfact"><div className="lbl">{t.common.format}</div><div className="val">{t.common.group}</div></div>
          <div className="qfact"><div className="lbl">{t.common.locations}</div><div className="val">{tour.locationsCount}</div></div>
          <div className="qfact"><div className="lbl">{t.common.capacity}</div><div className="val">{tour.capacity}</div></div>
          <div className="qfact"><div className="lbl">{t.common.departure}</div><div className="val">{tour.departureDays.map(d => t.days[d]).join(" · ")}</div></div>
          <div className="qfact"><div className="lbl">{t.common.insurance}</div><div className="val">{t.common.yes}</div></div>
        </div>
      </div>

      <div className="container">
        <div className="detail-cols">
          <div className="main-col">
            <section>
              <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.3px", margin: "0 0 16px" }}>{t.common.whatYouSee}</h2>
              <div className="wys-grid">
                {t.detail.whatYouSee.map((w, i) => (
                  <div className="wys-item" key={i}>
                    <span className="ico"><Icon.Mountain width="20" height="20"/></span>
                    <div>
                      <div className="ttl">{w.t}</div>
                      <div className="sub">{w.s}</div>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            <section>
              <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.3px", margin: "0 0 16px" }}>{t.common.routeOptions}</h2>
              {/* Tabs (desktop) */}
              <div className="route-tabs">
                {tour.options.map((o, i) => (
                  <button key={o.id} className={`route-tab ${optIdx === i ? "is-active" : ""}`} onClick={() => setOptIdx(i)}>
                    {t.common.option} {i + 1} · {o.name}
                  </button>
                ))}
              </div>
              {/* Tab body (desktop) */}
              <div className="tab-body" style={{ display: "block" }}>
                <OptionBody opt={opt} t={t} lang={lang}/>
              </div>

              {/* Accordion (mobile) */}
              <div className="route-accordion">
                {tour.options.map((o, i) => (
                  <div key={o.id} className={`acc-item ${openAcc === i ? "is-open" : ""}`}>
                    <button className="acc-head" onClick={() => setOpenAcc(openAcc === i ? -1 : i)}>
                      <span>
                        {t.common.option} {i + 1} · {o.name}
                        <div className="price-tag">
                          {formatPriceKZT(o.adult, lang)} {t.common.adult.toLowerCase()} · {formatPriceKZT(o.child, lang)} {t.common.child.toLowerCase()}
                        </div>
                      </span>
                      <span className="chev"><Icon.Chevron width="18" height="18"/></span>
                    </button>
                    <div className="acc-body">
                      <OptionBody opt={o} t={t} lang={lang}/>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            <section>
              <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.3px", margin: "0 0 16px" }}>{t.common.includedNotIncluded}</h2>
              <ul className="incl-list">
                {incl.map((it, i) => (
                  <li key={i}><span className="ico"><Icon.Check width="16" height="16"/></span>{it}</li>
                ))}
              </ul>
            </section>

            <section>
              <InsuranceBlock t={t}/>
            </section>

            <section>
              <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.3px", margin: "0 0 16px" }}>{t.common.relatedTours}</h2>
              <RelatedTours currentSlug={slug} t={t} lang={lang}/>
            </section>
          </div>

          <aside>
            <BookingCard tour={tour} option={opt} t={t} lang={lang}/>
          </aside>
        </div>
      </div>

      <StickyMobileCTA t={t} price={`${formatPriceKZT(opt.adult, lang)} ${t.common.adult.toLowerCase()}`}/>
    </main>
  );
}

function OptionBody({ opt, t, lang }) {
  return (
    <div className="opt-body-grid">
      <div>
        <div className="t-uppercase-tag t-muted" style={{ marginBottom: 8 }}>{t.common.timeline}</div>
        <Timeline steps={opt.timeline} t={t}/>
      </div>
      <div>
        <div className="t-uppercase-tag t-muted" style={{ marginBottom: 8 }}>{t.common.price}</div>
        <div className="price-row-line">
          <span className="lbl">{t.common.adult}</span>
          <span className="val">{formatPriceKZT(opt.adult, lang)}</span>
        </div>
        <div className="price-row-line">
          <span className="lbl">{t.common.child}</span>
          <span className="val">{formatPriceKZT(opt.child, lang)}</span>
        </div>
        <div style={{ marginTop: 16 }}>
          <div className="t-uppercase-tag t-muted" style={{ marginBottom: 8 }}>{t.common.route}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {opt.locKeys.map((k, i) => (
              <div key={k} style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 14 }}>
                <div style={{ flex: "0 0 22px", height: 22, borderRadius: "50%", background: "var(--surface-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, color: "var(--ink)" }}>{i + 1}</div>
                {window.YOW_LOCATIONS[k]?.name || k}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Timeline({ steps, t }) {
  return (
    <div className="tline">
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div className="row" style={{ display: "contents" }}>
            <div className="time">{s.t}</div>
            <div className="line">
              <div className="dot"></div>
            </div>
            <div className="label">
              {isStopStep(s)
                ? <strong>{buildTimelineLabel(t, s)}</strong>
                : buildTimelineLabel(t, s)
              }
            </div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

function InsuranceBlock({ t }) {
  return (
    <div className="insurance-block">
      <h3><span className="ico"><Icon.Shield width="18" height="18"/></span> {t.insurance.h}</h3>
      <p>{t.insurance.lead}</p>
      <div className="t-title-sm" style={{ marginTop: 8 }}>{t.insurance.covers}</div>
      <ul>{t.insurance.covers_items.map((c, i) => <li key={i}>{c}</li>)}</ul>
      <div className="t-title-sm">{t.insurance.conditions}</div>
      <ul>{t.insurance.conditions_items.map((c, i) => <li key={i}>{c}</li>)}</ul>
    </div>
  );
}

function BookingCard({ tour, option, t, lang }) {
  const adult = option?.adult || tour.priceFrom;
  return (
    <div className="booking-card">
      <div className="price">
        {formatPriceKZT(adult, lang)} <small>· {t.common.adult.toLowerCase()}</small>
      </div>
      <div className="sub">{t.tours[tour.slug]?.priceNote}</div>

      <div className="form-row">
        <div className="lbl">{t.common.departure}</div>
        <div className="val">{tour.departureDays.map(d => t.days[d]).join(" · ")}</div>
      </div>
      <div className="form-row">
        <div className="lbl">{t.common.pickup}</div>
        <div className="val">{tour.pickupTime} · Aktau</div>
      </div>

      <div className="row-stack">
        <a className="btn btn-primary" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
          <Icon.WhatsApp width="18" height="18"/> {t.cta.bookViaWhatsApp}
        </a>
        <a className="btn btn-secondary" href="mailto:yurtonwheels.kz@gmail.com">
          <Icon.Mail width="16" height="16"/> {t.cta.email}
        </a>
      </div>
      <div className="legal">{t.common.bookingNote}</div>
    </div>
  );
}

function StickyMobileCTA({ t, price }) {
  return (
    <div className="sticky-cta is-on">
      <div className="price">{price}<small>· {t.common.from}</small></div>
      <a className="btn btn-primary btn-sm" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
        <Icon.WhatsApp width="16" height="16"/> {t.cta.bookNow}
      </a>
    </div>
  );
}

function RelatedTours({ currentSlug, t, lang }) {
  const slugs = window.YOW_ROUTE_LISTING.filter(s => s !== currentSlug).slice(0, 4);
  return <TourGrid slugs={slugs} lang={lang} t={t}/>;
}

function NotFound({ t, route }) {
  return (
    <main className="container section">
      <h1 className="detail-title">404</h1>
      <p className="detail-sub">Page not found.</p>
      <div style={{ marginTop: 24 }}>
        <a className="btn btn-primary" href={`#/${route.lang}`}>{t.nav.home}</a>
      </div>
    </main>
  );
}

Object.assign(window, {
  HomePage, CatalogPage, TourDetailPage, TourCard, TourGrid, NotFound,
  HeroSplit, HeroFullBleed, HeroQuiet,
});