/* Chowdown with Fearless — Website UI kit: shared layout components.
   Composes the design-system primitives from the compiled bundle. */
const NS = window.ChowdownVietnamDesignSystem_25f67d || {};
const { Button, Badge, Tag, Avatar, SocialLinks } = NS;
const CDF = window.CDF;

const Ico = (n, props = {}) => <i data-lucide={n} {...props}></i>;

/* ---------------- Logo wordmark ---------------- */
function Wordmark({ dark = false, onClick }) {
  return (
    <a className={`kw ${dark ? "kw--dark" : ""}`} href="#/" onClick={onClick} aria-label="Chowdown with Fearless — home">
      <span className="kw__word">Ch<span className="kw__o">o</span>wdown</span>
      <span className="kw__tag">with Fearless</span>
    </a>
  );
}

/* ---------------- Top utility + sticky nav ---------------- */
function SiteHeader({ route, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const root = document.querySelector(".kit-scroll") || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setScrolled(y > 24);
    };
    root.addEventListener("scroll", onScroll, { passive: true });
    return () => root.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { label: "Austria", to: "#/tour/austria", tag: "Current" },
    { label: "Vietnam", to: "#/tour/vietnam" },
    { label: "Portugal", to: "#/tour/portugal" },
    { label: "Thailand", to: "#/tour/thailand" },
    { label: "Past Tours", to: "#/past" },
    { label: "About", to: "#/about" },
  ];
  const nav2 = (to) => (e) => { e.preventDefault(); setOpen(false); go(to); };

  return (
    <header className={`kh ${scrolled ? "kh--scrolled" : ""}`}>
      <div className="kh__util">
        <div className="kit-container kh__util-in">
          <a href={`mailto:${CDF.brand.email}`} className="kh__mail">{Ico("mail")} {CDF.brand.email}</a>
          <SocialLinks variant="bare" size="sm" iconColor="FBF5EA" />
        </div>
      </div>
      <div className="kit-container kh__bar">
        <Wordmark onClick={nav2("#/")} />
        <nav className="kh__nav">
          {nav.map((n) => (
            <a key={n.to} href={n.to} onClick={nav2(n.to)}
               className={`kh__link ${route === n.to ? "is-active" : ""}`}>
              {n.label}
              {n.tag ? <span className="kh__navtag">{n.tag}</span> : null}
            </a>
          ))}
        </nav>
        <div className="kh__cta">
          <Button size="sm" variant="primary" href={`mailto:${CDF.brand.email}`}>Email Monika</Button>
        </div>
        <button className="kh__burger" onClick={() => setOpen((o) => !o)} aria-label="Menu">
          {Ico(open ? "x" : "menu")}
        </button>
      </div>
      {open ? (
        <div className="kh__mobile">
          {nav.map((n) => (
            <a key={n.to} href={n.to} onClick={nav2(n.to)} className="kh__mlink">{n.label}</a>
          ))}
          <a href="#/contact" onClick={nav2("#/contact")} className="kh__mlink">Contact</a>
        </div>
      ) : null}
    </header>
  );
}

/* ---------------- Section heading (eyebrow + serif title) ---------------- */
function SectionHead({ eyebrow, title, intro, align = "left", light = false }) {
  return (
    <div className={`ksh ksh--${align} ${light ? "ksh--light" : ""}`}>
      {eyebrow ? <p className="ksh__eyebrow">{eyebrow}</p> : null}
      {title ? <h2 className="ksh__title">{title}</h2> : null}
      {intro ? <p className="ksh__intro">{intro}</p> : null}
    </div>
  );
}

/* ---------------- Photo gallery (horizontal scroll) ---------------- */
function GalleryStrip({ images }) {
  return (
    <div className="kgal" role="list">
      {images.map((src, i) => (
        <figure className="kgal__item" role="listitem" key={i}>
          <img src={src} alt="" loading="lazy" />
        </figure>
      ))}
    </div>
  );
}

/* ---------------- Testimonials carousel ---------------- */
function Testimonials({ items }) {
  const [i, setI] = React.useState(0);
  const n = items.length;
  const go = (d) => setI((p) => (p + d + n) % n);
  const t = items[i];
  return (
    <div className="ktest">
      <div className="ktest__quotemark" aria-hidden="true">&ldquo;</div>
      <blockquote className="ktest__quote">{t.quote}</blockquote>
      <div className="ktest__person">
        <Avatar name={t.name} size="md" />
        <div>
          <div className="ktest__name">{t.name}</div>
          <div className="ktest__place">{t.place}</div>
        </div>
      </div>
      <div className="ktest__controls">
        <button className="ktest__btn" onClick={() => go(-1)} aria-label="Previous">{Ico("arrow-left")}</button>
        <div className="ktest__dots">
          {items.map((_, k) => (
            <button key={k} className={`ktest__dot ${k === i ? "is-on" : ""}`} onClick={() => setI(k)} aria-label={`Review ${k + 1}`} />
          ))}
        </div>
        <button className="ktest__btn" onClick={() => go(1)} aria-label="Next">{Ico("arrow-right")}</button>
      </div>
    </div>
  );
}

/* ---------------- Newsletter signup (shared) ---------------- */
function NewsletterForm({ variant = "band" }) {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email) return;
    const subject = encodeURIComponent("Newsletter signup — Chowdown with Fearless");
    const body = encodeURIComponent(`Hi Monika,\n\nPlease add me to your tour mailing list.\n\nEmail: ${email}\n\nThanks!`);
    window.location.href = `mailto:${CDF.brand.email}?subject=${subject}&body=${body}`;
    setDone(true);
  };
  if (done) {
    return <p className={`nl__done nl__done--${variant}`}>{Ico("check")} You're on the list — your email is opening to confirm.</p>;
  }
  return (
    <form className={`nl nl--${variant}`} onSubmit={submit}>
      <label className="nl__field">
        {Ico("mail")}
        <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
               placeholder="you@email.com" aria-label="Email address" />
      </label>
      <Button variant="gold" size={variant === "footer" ? "md" : "lg"} iconRight={Ico("arrow-right")}>Subscribe</Button>
    </form>
  );
}

/* ---------------- Footer ---------------- */
function SiteFooter({ go }) {
  const nav2 = (to) => (e) => { e.preventDefault(); go(to); };
  return (
    <footer className="kf">
      <div className="kf__nl">
        <div className="kit-container kf__nl-in">
          <div className="kf__nl-copy">
            <h3 className="kf__nl-title">Join the mailing list</h3>
            <p className="kf__nl-sub">New tour dates and a few stories from the road — no spam, leave anytime.</p>
          </div>
          <NewsletterForm variant="footer" />
        </div>
      </div>
      <div className="kit-container kf__grid">
        <div className="kf__brand">
          <Wordmark dark onClick={nav2("#/")} />
          <p className="kf__blurb">Chowdown Vietnam Food Tour and Fearless Cooking were created to share my passion with you.</p>
          <SocialLinks variant="outline" size="md" iconColor="FBF5EA" />
        </div>
        <div className="kf__col">
          <h4>Destinations</h4>
          {CDF.tours.map((t) => (
            <a key={t.slug} href={`#/tour/${t.slug}`} onClick={nav2(`#/tour/${t.slug}`)}>{t.country}</a>
          ))}
        </div>
        <div className="kf__col">
          <h4>Explore</h4>
          <a href="#/past" onClick={nav2("#/past")}>Past Tours</a>
          <a href="#/about" onClick={nav2("#/about")}>About Monika</a>
          <a href="#/contact" onClick={nav2("#/contact")}>Contact</a>
          <a href={CDF.brand.social[3].url} target="_blank" rel="noreferrer">YouTube</a>
        </div>
        <div className="kf__col">
          <h4>Get in touch</h4>
          <a href={`mailto:${CDF.brand.email}`}>{CDF.brand.email}</a>
          <p className="kf__small">Email Monika directly — she answers every message personally.</p>
        </div>
      </div>
      <div className="kit-container kf__base">
        <span>© {new Date().getFullYear()} Chowdown with Fearless. All rights reserved.</span>
        <span>Eat. Explore. Repeat.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Wordmark, SiteHeader, SectionHead, GalleryStrip, Testimonials, NewsletterForm, SiteFooter, Ico });