/* ============================================
   Yurt on Wheels — Jeep tour pages & other pages
   ============================================ */

// ---------- Jeep tour list page (1-day) ----------
function JeepListPage({ route, t, multiDay }) {
  const lang = route.lang;
  const slug = route.slug;
  const tc = t.tours[slug];
  const isOne = slug === "1-day-jeep-tour";
  const isTwo = slug === "2-day-jeep-tour";
  const isThree = slug === "3-day-jeep-tour";

  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>

        <div className="detail-hero" style={{ marginTop: 24 }}>
          <div className="main"><PhotoPlaceholder locId="bozzhyra_u" aspect="auto"/></div>
          <div className="side">
            <PhotoPlaceholder locId="kyzylkup" aspect="auto"/>
            <PhotoPlaceholder locId="beketata" aspect="auto"/>
          </div>
        </div>

        <div className="quick-facts">
          <div className="qfact"><div className="lbl">{t.common.duration}</div><div className="val">{t.common[isOne ? "oneDay" : isTwo ? "twoDays" : "threeDays"]}</div></div>
          <div className="qfact"><div className="lbl">{t.common.format}</div><div className="val">{t.common.privateLabel} · {t.common.jeep}</div></div>
          <div className="qfact"><div className="lbl">{t.common.capacity}</div><div className="val">1–4</div></div>
          <div className="qfact"><div className="lbl">{t.common.locations}</div><div className="val">{isOne ? "1–6" : isTwo ? "8–12" : "12–15"}</div></div>
          <div className="qfact"><div className="lbl">{t.common.languages}</div><div className="val">KZ · RU · EN · ZH</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">
        {isOne && <Jeep1DayList route={route} t={t}/>}
        {isTwo && <JeepMultiDayList rows={window.YOW_JEEP_2DAY} t={t} lang={lang} days={2}/>}
        {isThree && <JeepMultiDayList rows={window.YOW_JEEP_3DAY} t={t} lang={lang} days={3}/>}

        <div style={{ marginTop: 64 }}>
          <h2 style={{ fontSize: 22, fontWeight: 600, margin: "0 0 16px" }}>{t.common.includedNotIncluded}</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="two-col-stack">
            <div>
              <div className="t-uppercase-tag t-muted" style={{ marginBottom: 8 }}>{t.common.included}</div>
              <ul className="incl-list" style={{ gridTemplateColumns: "1fr" }}>
                {(multiDay ? [...t.detail.includedJeep, ...t.detail.campIncluded] : t.detail.includedJeep).map((it, i) => (
                  <li key={i}><span className="ico"><Icon.Check width="14" height="14"/></span> {it}</li>
                ))}
                <li><span className="ico"><Icon.Check width="14" height="14"/></span> {t.detail.memorableTea}</li>
              </ul>
            </div>
            <div>
              <div className="t-uppercase-tag t-muted" style={{ marginBottom: 8 }}>{t.common.notIncluded}</div>
              <ul className="incl-list" style={{ gridTemplateColumns: "1fr" }}>
                {t.detail.notIncludedJeep.map((it, i) => (
                  <li key={i} className="excl"><span className="ico"><Icon.X width="14" height="14"/></span> {it}</li>
                ))}
              </ul>
              {multiDay && (
                <p className="t-body-sm t-muted" style={{ marginTop: 16 }}>{t.detail.campNote}</p>
              )}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 48 }}>
          <InsuranceBlock t={t}/>
        </div>

        <div style={{ marginTop: 64, padding: "48px 32px", background: "var(--surface-soft)", borderRadius: "var(--r-md)", textAlign: "center" }}>
          <h2 style={{ fontSize: 24, fontWeight: 600, margin: 0 }}>{t.cta.requestPrivate}</h2>
          <p className="t-body-md" style={{ maxWidth: "52ch", margin: "8px auto 24px" }}>{t.private.sub}</p>
          <div style={{ display: "inline-flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <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="mailto:yurtonwheels.kz@gmail.com">
              <Icon.Mail width="16" height="16"/> {t.cta.email}
            </a>
          </div>
        </div>

        <div style={{ marginTop: 64 }}>
          <h2 style={{ fontSize: 24, fontWeight: 600, margin: "0 0 16px" }}>{t.common.relatedTours}</h2>
          <RelatedTours currentSlug={slug} t={t} lang={lang}/>
        </div>
      </div>
    </main>
  );
}

// 1-day jeep — compact 2-col list with filter sidebar
function Jeep1DayList({ route, t }) {
  const lang = route.lang;
  const [filter, setFilter] = useState("all");
  const rows = window.YOW_JEEP_1DAY;
  const filters = window.YOW_JEEP_FILTERS;
  const filtered = useMemo(() => filter === "all" ? rows : rows.filter(r => r.cat === filter), [filter, rows]);
  const renderRoute = (route) =>
    route.map(k => window.YOW_LOCATIONS[k]?.name || k).join(" → ");

  return (
    <div className="jeep-layout">
      <aside className="jeep-sidebar">
        <div className="jeep-sidebar-label">{t.cta.reset}</div>
        {filters.map(f => (
          <button
            key={f.id}
            className={`chip ${filter === f.id ? "is-active" : ""}`}
            onClick={() => setFilter(f.id)}
            style={{ width: "100%", justifyContent: "flex-start" }}
          >
            {f.labels[lang] || f.labels.en}
            <span style={{ marginLeft: "auto", color: filter === f.id ? "rgba(255,255,255,0.7)" : "var(--muted)", fontSize: 12 }}>
              {f.id === "all" ? rows.length : rows.filter(r => r.cat === f.id).length}
            </span>
          </button>
        ))}
      </aside>
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <div className="t-body-sm t-muted">
            {filtered.length} {t.common.locations} {/* using "locations" loosely as count label */}
          </div>
          <div className="t-body-sm t-muted">{t.common.perCar}</div>
        </div>
        <div className="jeep-list">
          {filtered.map(r => (
            <div className="jeep-row" key={r.id}>
              <div>
                <div className="route">{renderRoute(r.route)}</div>
                <div className="meta-row">
                  <span className="pill">{r.route.length} {t.common.locations}</span>
                  <span className="pill">
                    {filters.find(f => f.id === r.cat)?.labels[lang] || r.cat}
                  </span>
                </div>
              </div>
              <div className="price">
                {formatPriceKZT(r.price, lang)}
                <small>{t.common.perCar}</small>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// 2- and 3-day jeep lists — multi-day cards with day-by-day route summary
function JeepMultiDayList({ rows, t, lang, days }) {
  const [activeId, setActiveId] = useState(rows[0]?.id);
  return (
    <div>
      <div className="t-uppercase-tag t-muted" style={{ marginBottom: 16 }}>{t.common.routeOptions}</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 16 }}>
        {rows.map((r, i) => (
          <div
            key={r.id}
            className="card"
            style={{
              padding: 20,
              borderColor: activeId === r.id ? "var(--ink)" : "var(--hairline)",
              cursor: "pointer",
            }}
            onClick={() => setActiveId(r.id)}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8, marginBottom: 12 }}>
              <div className="t-title-md">{t.common.option} {i + 1}</div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>{formatPriceKZT(r.price, lang)}</div>
            </div>
            <div className="t-body-sm t-muted" style={{ marginBottom: 12 }}>
              {r.locs} {t.common.locations} · {days === 2 ? t.common.twoDays : t.common.threeDays}
            </div>
            {["day1", "day2", "day3"].slice(0, days).map((dk, di) => r[dk] && (
              <div key={dk} style={{ marginBottom: 8 }}>
                <div className="t-uppercase-tag t-muted" style={{ marginBottom: 4 }}>
                  {t.common.day} {di + 1}
                </div>
                <div className="t-body-sm" style={{ color: "var(--ink)" }}>
                  {r[dk].map(k => window.YOW_LOCATIONS[k]?.name || k).join(" → ")}
                </div>
              </div>
            ))}
            <div style={{ marginTop: 16 }}>
              <a className="btn btn-secondary btn-sm" href="https://wa.me/77775102211" target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()}>
                <Icon.WhatsApp width="14" height="14"/> {t.cta.bookViaWhatsApp}
              </a>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Private / Custom Tours ----------
function PrivatePage({ route, t }) {
  const lang = route.lang;
  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.private}</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "var(--s-xxl)", alignItems: "center" }} className="two-col-stack">
          <div>
            <span className="kicker gold-dot">{t.common.privateLabel}</span>
            <h1 className="detail-title" style={{ marginTop: 12 }}>{t.private.h}</h1>
            <p className="hero-lead" style={{ marginTop: 12 }}>{t.private.sub}</p>
            <div className="hero-ctas" style={{ marginTop: 24 }}>
              <a className="btn btn-primary" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
                <Icon.WhatsApp width="18" height="18"/> {t.cta.requestPrivate}
              </a>
              <a className="btn btn-ghost" href={`#/${lang}/tours/1-day-jeep-tour`}>{t.cta.seeAll}</a>
            </div>
          </div>
          <YurtLightHero caption={t.home.heroCaption}/>
        </div>
      </div>

      <div className="container section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--s-xxl)" }} className="two-col-stack">
          <div className="card" style={{ padding: 28 }}>
            <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>{t.private.why_h}</h3>
            <ul className="incl-list" style={{ gridTemplateColumns: "1fr", marginTop: 16 }}>
              {t.private.why.map((w, i) => (
                <li key={i}><span className="ico"><Icon.Check width="14" height="14"/></span> {w}</li>
              ))}
            </ul>
          </div>
          <div className="card" style={{ padding: 28 }}>
            <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>{t.private.get_h}</h3>
            <ul className="incl-list" style={{ gridTemplateColumns: "1fr", marginTop: 16 }}>
              {t.private.get.map((w, i) => (
                <li key={i}><span className="ico"><Icon.Sparkle width="14" height="14"/></span> {w}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <div className="container section">
        <div className="section-head">
          <h2>{t.private.flow_h}</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="how-grid">
          {t.private.flow.map((s, i) => (
            <div key={i} className="card" style={{ padding: 20 }}>
              <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--primary-soft)", color: "var(--primary-ink)", fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 12 }}>
                {i + 1}
              </div>
              <div className="t-title-md" style={{ marginBottom: 6 }}>{s.t}</div>
              <div className="t-body-sm t-muted">{s.s}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="container section">
        <h2 style={{ fontSize: 24, fontWeight: 600, margin: "0 0 16px" }}>{t.common.relatedTours}</h2>
        <TourGrid slugs={["1-day-jeep-tour", "2-day-jeep-tour", "3-day-jeep-tour", "combo-tour"]} lang={lang} t={t}/>
      </div>
    </main>
  );
}

// ---------- Nature page ----------
function NaturePage({ route, t }) {
  const lang = route.lang;
  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.nature}</span>
        </div>
        <h1 className="detail-title">{t.nature.h}</h1>
        <p className="detail-sub" style={{ maxWidth: "62ch" }}>{t.nature.sub}</p>
      </div>

      <div className="container section">
        <div className="nat-cards">
          <NatureCard
            kind={t.nature.animals}
            icon={Icon.Mountain}
            tone="warm"
          />
          <NatureCard
            kind={t.nature.insects}
            icon={Icon.Sparkle}
            tone="cool"
          />
          <NatureCard
            kind={t.nature.plants}
            icon={Icon.Leaf}
            tone="warm"
          />
        </div>
      </div>

      <div className="container section">
        <div style={{ background: "var(--surface-soft)", padding: 32, borderRadius: "var(--r-md)" }}>
          <div className="t-uppercase-tag t-muted">{t.common.timeline}</div>
          <h2 style={{ margin: "8px 0 16px", fontSize: 24, fontWeight: 600 }}>{t.home.natureTeaser.sub}</h2>
          <p className="t-body-md" style={{ maxWidth: "60ch" }}>{t.home.mangystau.lead}</p>
        </div>
      </div>
    </main>
  );
}

function NatureCard({ kind, icon, tone }) {
  return (
    <div className="nat-card">
      <PhotoPlaceholder
        label={kind.h}
        sub={kind.items[0]}
        tone={tone}
        aspect="45"
        icon={icon}
      />
      <h3>{kind.h}</h3>
      <p>{kind.desc}</p>
      <div className="tags">
        {kind.items.map((it, i) => <span className="tag" key={i}>{it}</span>)}
      </div>
    </div>
  );
}

// ---------- Safety & Insurance ----------
function SafetyPage({ route, t }) {
  const lang = route.lang;
  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.safety}</span>
        </div>
        <h1 className="detail-title">{t.insurance.h}</h1>
        <p className="detail-sub">{t.insurance.lead}</p>
      </div>

      <div className="container section">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "var(--s-xxl)" }} className="two-col-stack">
          <div className="card" style={{ padding: 32 }}>
            <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>{t.insurance.covers}</h3>
            <ul className="incl-list" style={{ gridTemplateColumns: "1fr", marginTop: 12 }}>
              {t.insurance.covers_items.map((it, i) => (
                <li key={i}><span className="ico"><Icon.Shield width="16" height="16"/></span> {it}</li>
              ))}
            </ul>
            <h3 style={{ marginTop: 24, fontSize: 20, fontWeight: 600 }}>{t.insurance.conditions}</h3>
            <ul className="incl-list" style={{ gridTemplateColumns: "1fr", marginTop: 12 }}>
              {t.insurance.conditions_items.map((it, i) => (
                <li key={i}><span className="ico"><Icon.Check width="14" height="14"/></span> {it}</li>
              ))}
            </ul>
          </div>
          <div className="card" style={{ padding: 32, background: "var(--surface-soft)" }}>
            <span className="kicker">{t.insurance.bring_h}</span>
            <h3 style={{ marginTop: 12, fontSize: 20, fontWeight: 600 }}>{t.insurance.bring_h}</h3>
            <ul className="incl-list" style={{ gridTemplateColumns: "1fr", marginTop: 12 }}>
              {t.insurance.bring_items.map((it, i) => (
                <li key={i}><span className="ico"><Icon.Sparkle width="14" height="14"/></span> {it}</li>
              ))}
            </ul>
            <div style={{ marginTop: 24 }}>
              <a className="btn btn-primary btn-sm" href="https://wa.me/77775102211" target="_blank" rel="noreferrer">
                <Icon.WhatsApp width="16" height="16"/> {t.cta.askGuide}
              </a>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

// ---------- Contact page ----------
function ContactPage({ route, t }) {
  const lang = route.lang;
  const [sent, setSent] = useState(false);
  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.contact}</span>
        </div>
        <h1 className="detail-title">{t.contact.h}</h1>
        <p className="detail-sub">{t.contact.sub}</p>
      </div>

      <div className="container section">
        <div className="contact-grid">
          <div className="contact-card">
            <div className="contact-row">
              <span className="ico"><Icon.WhatsApp width="18" height="18"/></span>
              <div>
                <div className="lbl">WhatsApp</div>
                <a href="https://wa.me/77775102211" className="val">+7 777 510 22 11</a>
              </div>
            </div>
            <div className="contact-row">
              <span className="ico"><Icon.Mail width="18" height="18"/></span>
              <div>
                <div className="lbl">Email</div>
                <a href="mailto:yurtonwheels.kz@gmail.com" className="val">yurtonwheels.kz@gmail.com</a>
              </div>
            </div>
            <div className="contact-row">
              <span className="ico"><Icon.Phone width="18" height="18"/></span>
              <div>
                <div className="lbl">{t.cta.phone}</div>
                <a href="tel:+77775102211" className="val">+7 777 510 22 11</a>
              </div>
            </div>
            <div className="contact-row">
              <span className="ico"><Icon.Instagram width="18" height="18"/></span>
              <div>
                <div className="lbl">Instagram</div>
                <a href="https://instagram.com/yurtonwheels.kz" target="_blank" rel="noreferrer" className="val">@yurtonwheels.kz</a>
              </div>
            </div>
            <div className="contact-row">
              <span className="ico"><Icon.MapPin width="18" height="18"/></span>
              <div>
                <div className="lbl">{t.contact.address_h}</div>
                <div className="val">{t.contact.address}</div>
              </div>
            </div>
            <div className="contact-row">
              <span className="ico"><Icon.Clock width="18" height="18"/></span>
              <div>
                <div className="lbl">{t.contact.hours_h}</div>
                <div className="val">{t.contact.hours}</div>
              </div>
            </div>
          </div>

          <div>
            <h3 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 16px" }}>{t.contact.form_h}</h3>
            {sent ? (
              <div className="card" style={{ padding: 28, textAlign: "center" }}>
                <Icon.Check width="32" height="32" style={{ color: "var(--primary)" }}/>
                <p style={{ margin: "12px 0 0" }}>{t.contact.form.sent}</p>
              </div>
            ) : (
              <form
                className="card"
                style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12 }}
                onSubmit={e => { e.preventDefault(); setSent(true); }}
              >
                <Field label={t.contact.form.name} type="text"/>
                <Field label={t.contact.form.contact} type="text"/>
                <FieldSelect label={t.contact.form.tour}>
                  {window.YOW_ROUTE_LISTING.map(s => (
                    <option key={s} value={s}>{t.tours[s].title}</option>
                  ))}
                </FieldSelect>
                <Field label={t.contact.form.people} type="number"/>
                <Field label={t.contact.form.message} type="textarea"/>
                <button className="btn btn-primary" type="submit" style={{ marginTop: 8 }}>{t.contact.form.send}</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

function Field({ label, type = "text" }) {
  return (
    <label style={{ display: "block" }}>
      <div className="t-uppercase-tag" style={{ color: "var(--muted)", marginBottom: 6 }}>{label}</div>
      {type === "textarea"
        ? <textarea rows="3" style={inputStyle}/>
        : <input type={type} style={inputStyle}/>
      }
    </label>
  );
}
function FieldSelect({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <div className="t-uppercase-tag" style={{ color: "var(--muted)", marginBottom: 6 }}>{label}</div>
      <select style={inputStyle}>{children}</select>
    </label>
  );
}
const inputStyle = {
  width: "100%",
  padding: "12px 14px",
  border: "1px solid var(--hairline)",
  borderRadius: "var(--r-sm)",
  fontSize: 15,
  fontFamily: "inherit",
  color: "var(--ink)",
  background: "var(--canvas)",
};

Object.assign(window, {
  JeepListPage, PrivatePage, NaturePage, SafetyPage, ContactPage,
});