/* Imlil Trips Morocco — core components: icons, header, hero, tours, tour detail */

const D = window.IMLIL_DATA;
const WA_LINK = "https://wa.me/" + D.brand.whatsapp.replace(/[^0-9]/g, "");
const TEL_LINK = "tel:" + D.brand.whatsapp;

/* ---------- tiny icons (simple strokes only) ---------- */
function IconPhone({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"></path>
    </svg>
  );
}
function IconWhatsApp({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3a9 9 0 0 0-7.8 13.5L3 21l4.7-1.2A9 9 0 1 0 12 3"></path>
      <path d="M8.8 9.2c0 3 3 6 6 6l1.4-1.4-1.9-1.2-1 .7a6.5 6.5 0 0 1-2.6-2.6l.7-1-1.2-1.9z"></path>
    </svg>
  );
}
function IconX({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true">
      <path d="M6 6l12 12M18 6L6 18"></path>
    </svg>
  );
}
function IconChevron({ dir = "right", size = 22 }) {
  const d = dir === "left" ? "M14 6l-6 6 6 6" : "M10 6l6 6-6 6";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d}></path>
    </svg>
  );
}
function IconBurger() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true">
      <path d="M4 7h16M4 12h16M4 17h16"></path>
    </svg>
  );
}
function IconGlobe({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9"></circle>
      <path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"></path>
    </svg>
  );
}

function Stars({ rating, className }) {
  const { t } = useLang();
  const full = Math.round(rating);
  return <span className={className} aria-label={t("stars_aria", { r: rating })}>{"★★★★★".slice(0, full)}{"☆☆☆☆☆".slice(0, 5 - full)}</span>;
}

function Difficulty({ level, label }) {
  return (
    <span className="diff">
      <span className="diff-ticks" aria-hidden="true">
        {[1, 2, 3, 4, 5].map((n) => <i key={n} className={n <= level ? "on" : ""}></i>)}
      </span>
      {label ? <span className="diff-label">{label}</span> : null}
    </span>
  );
}

/* ---------- language toggle (subtle icon → options menu) ---------- */
function LangToggle({ className = "" }) {
  const { lang, setLang, t } = useLang();
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
  }, [open]);
  const choose = (l) => { setLang(l); setOpen(false); };
  return (
    <div className={"lang-menu " + className} ref={ref}>
      <button
        type="button"
        className="lang-btn"
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={t("language")}
        title={t("language")}
      >
        <IconGlobe size={18} />
      </button>
      {open ? (
        <div className="lang-pop" role="menu">
          {window.IMLIL_LANGS.map((l) => (
            <button
              key={l}
              type="button"
              role="menuitemradio"
              aria-checked={lang === l}
              className={"lang-opt" + (lang === l ? " active" : "")}
              onClick={() => choose(l)}
              lang={l}
            >
              {window.IMLIL_LANG_NAME[l]}
            </button>
          ))}
        </div>
      ) : null}
    </div>
  );
}

/* ---------- fade-up on scroll (once) ---------- */
function FadeGroup({ children, className = "" }) {
  const ref = React.useRef(null);
  const [state, setState] = React.useState("pending");
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) { setState("inview"); io.disconnect(); }
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className={"fade-group " + state + " " + className}>{children}</div>;
}

/* ---------- header ---------- */
function SiteHeader({ onBook }) {
  const { t } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [drawer, setDrawer] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["#tours", t("nav_tours")], ["#photos", t("nav_photos")], ["#reviews", t("nav_reviews")], ["#about", t("nav_about")]
  ];
  const go = (e, href) => {
    e.preventDefault();
    setDrawer(false);
    const el = document.querySelector(href);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };
  return (
    <React.Fragment>
      <header className={"site-header" + (scrolled ? " scrolled" : "")}>
        <div className="header-inner">
          <a className="wordmark" href="#top" onClick={(e) => go(e, "#top")}>
            <span className="wm-top">Imlil Trips</span>
            <span className="wm-sub">{t("wm_sub")}</span>
          </a>
          <nav className="nav-desktop" aria-label={t("nav_main")}>
            {links.map(([href, label]) => (
              <a key={href} href={href} onClick={(e) => go(e, href)}>{label}</a>
            ))}
            <LangToggle />
            <a href="#reserve" className="btn btn-solid header-book" onClick={(e) => go(e, "#reserve")}>{t("book_tour")}</a>
          </nav>
          <div className="header-mobile-actions">
            <LangToggle className="lang-btn-compact" />
            <button className="burger" aria-label={t("open_menu")} onClick={() => setDrawer(true)}><IconBurger /></button>
          </div>
        </div>
      </header>
      <div className={"drawer-scrim" + (drawer ? " open" : "")} onClick={() => setDrawer(false)}></div>
      <aside className={"drawer" + (drawer ? " open" : "")} aria-hidden={!drawer}>
        <button className="drawer-close" aria-label={t("close_menu")} onClick={() => setDrawer(false)}><IconX /></button>
        <nav aria-label={t("nav_mobile")}>
          {links.map(([href, label]) => (
            <a key={href} href={href} onClick={(e) => go(e, href)}>{label}</a>
          ))}
          <a href="#reserve" onClick={(e) => go(e, "#reserve")}>{t("nav_reserve")}</a>
        </nav>
        <div className="drawer-cta">
          <a className="btn btn-solid" href={WA_LINK} target="_blank" rel="noopener"><IconWhatsApp size={16} /> {t("whatsapp")}</a>
          <a className="btn btn-outline" href={TEL_LINK}><IconPhone size={16} /> {D.brand.whatsappDisplay}</a>
        </div>
      </aside>
    </React.Fragment>
  );
}

/* ---------- hero ---------- */
function Hero({ onBook }) {
  const { t, p } = useLang();
  const b = D.brand;
  const slides = D.heroSlides;
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const tm = setInterval(() => setIdx((i) => (i + 1) % slides.length), 6500);
    return () => clearInterval(tm);
  }, [slides.length]);
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="hero-slides" aria-hidden="true">
        {slides.map((s, i) => (
          <div key={s.src} className={"hero-slide" + (i === idx ? " active" : "")}>
            <img src={s.src} alt="" loading={i === 0 ? "eager" : "lazy"} />
          </div>
        ))}
      </div>
      <div className="hero-shade" aria-hidden="true"></div>
      <p className="hero-loc">{t("hero_loc")}</p>
      <div className="hero-content">
        <p className="hero-rating">
          <Stars rating={b.rating} className="stars" />
          <span><strong>{b.rating.toFixed(1)}</strong> <span className="count">{t("reviews_traveller", { n: b.reviewCount })}</span></span>
        </p>
        <h1>{t("hero_title")}</h1>
        <p className="hero-promise">{p(b.promise)} {p(b.heroSub)}</p>
        <div className="hero-ctas">
          <button className="btn btn-solid" onClick={onBook}>{t("book_tour")}</button>
          <a className="btn btn-wa" href={WA_LINK} target="_blank" rel="noopener"><IconWhatsApp size={16} /> {t("whatsapp")}</a>
        </div>
      </div>
      <div className="hero-dots">
        {slides.map((s, i) => (
          <button key={s.src} className={"hero-dot" + (i === idx ? " active" : "")} aria-label={t("slide_aria", { n: i + 1 })} onClick={() => setIdx(i)}><i></i></button>
        ))}
      </div>
    </section>
  );
}

/* ---------- tours ---------- */
function TourCard({ tour, onOpen }) {
  const { t, p } = useLang();
  return (
    <button className="tour-card" onClick={() => onOpen(tour.id)} data-screen-label={"Tour card: " + p(tour.name)}>
      <span className="tour-card-img"><img src={tour.cover} alt={p(tour.name)} loading="lazy" /></span>
      <span className="tour-card-body">
        <span className="tour-meta">
          <span>{p(tour.duration)}</span>
          <span>{p(tour.maxAltitude)}</span>
          <span>{p(tour.type)}</span>
        </span>
        <h3>{p(tour.name)}</h3>
        <Difficulty level={tour.difficulty} label={p(tour.difficultyLabel)} />
        <span className="summary">{p(tour.summary)}</span>
        <span className="tour-card-foot">
          <span className="text-link">{t("view_itinerary")} <span aria-hidden="true">→</span></span>
        </span>
      </span>
    </button>
  );
}

function ToursSection({ onOpen }) {
  const { t } = useLang();
  return (
    <section className="section" id="tours" data-screen-label="Tours">
      <FadeGroup>
        <div className="section-head">
          <p className="eyebrow">{t("tours_eyebrow")}</p>
          <h2>{t("tours_title")}</h2>
          <p className="sub">{t("tours_sub")}</p>
        </div>
        <div className="tour-grid">
          {D.tours.map((tour) => <TourCard key={tour.id} tour={tour} onOpen={onOpen} />)}
        </div>
      </FadeGroup>
    </section>
  );
}

/* ---------- tour detail overlay ---------- */
function TourDetail({ tourId, onClose, onReserve, onPhoto }) {
  const { t, p } = useLang();
  const tour = D.tours.find((x) => x.id === tourId);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);
  if (!tour) return null;
  const tourName = p(tour.name);
  return (
    <div className="detail-root" role="dialog" aria-modal="true" aria-label={tourName} data-screen-label={"Tour detail: " + tourName}>
      <div className="detail-scrim" onClick={onClose}></div>
      <div className="detail-panel">
        <div className="detail-top">
          <img src={tour.cover} alt={tourName} />
          <div className="detail-top-shade" aria-hidden="true"></div>
          <button className="detail-close" aria-label={t("close")} onClick={onClose}><IconX /></button>
          <div className="detail-top-text">
            <p className="eyebrow" style={{ color: "oklch(0.9 0.05 80)" }}>{p(tour.duration)} · {p(tour.season)}</p>
            <h2>{tourName}</h2>
          </div>
        </div>
        <div className="detail-body">
          <p className="sub" style={{ maxWidth: "68ch" }}>{p(tour.summary)}</p>

          <div className="facts">
            <div className="fact"><b>{p(tour.duration)}</b><span>{t("fact_duration")}</span></div>
            <div className="fact"><b>{p(tour.maxAltitude)}</b><span>{t("fact_highest")}</span></div>
            <div className="fact"><b><Difficulty level={tour.difficulty} /></b><span>{p(tour.difficultyLabel)}</span></div>
            <div className="fact"><b>{p(tour.type)}</b><span>{t("fact_grouptype")}</span></div>
          </div>

          <div className="detail-section">
            <h3>{t("detail_dayby")}</h3>
            <div className="itin">
              {tour.itinerary.map((it, i) => (
                <div className="itin-row" key={i}>
                  <span className="itin-day">{p(it.day)}</span>
                  <div className="itin-content">
                    <h4>{p(it.title)}</h4>
                    <span className="itin-time">{p(it.time)}</span>
                    <p>{p(it.text)}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="twocol">
            <div className="detail-section">
              <h3>{t("detail_included")}</h3>
              <ul className="checklist">
                {tour.included.map((x, i) => <li key={i}>{p(x)}</li>)}
              </ul>
            </div>
            <div className="detail-section">
              <h3>{t("detail_notincluded")}</h3>
              <ul className="checklist minus">
                {tour.notIncluded.map((x, i) => <li key={i}>{p(x)}</li>)}
              </ul>
            </div>
          </div>

          <div className="detail-section">
            <h3>{t("detail_tobring")}</h3>
            <div className="chips">
              {tour.toBring.map((x, i) => <span className="chip" key={i}>{p(x)}</span>)}
            </div>
          </div>

          <div className="detail-section">
            <h3>{t("detail_fromtour")}</h3>
            <div className="detail-gallery">
              {tour.images.map((src) => (
                <button key={src} aria-label={t("open_photo")} onClick={() => onPhoto(src)}>
                  <img src={src} alt="" loading="lazy" />
                </button>
              ))}
            </div>
          </div>

          <div className="detail-cta">
            <button className="btn btn-solid" onClick={() => onReserve(tour.id)}>{t("detail_reserve_this")}</button>
            <a className="btn btn-outline" href={WA_LINK + "?text=" + encodeURIComponent(t("wa_ask_text", { name: tourName }))} target="_blank" rel="noopener">{t("detail_ask_wa")}</a>
          </div>
        </div>
        <div className="detail-bar">
          <button className="btn btn-solid" onClick={() => onReserve(tour.id)}>{t("reserve_short")}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  IconPhone, IconWhatsApp, IconX, IconChevron, IconBurger, IconGlobe,
  Stars, Difficulty, FadeGroup, LangToggle,
  SiteHeader, Hero, ToursSection, TourDetail,
  WA_LINK, TEL_LINK
});