/* Chowdown with Fearless — Website UI kit: page screens. */
const _NS = window.ChowdownVietnamDesignSystem_25f67d || {};
const { Button: KBtn, Badge: KBadge, Tag: KTag, TourCard, StatList, IncludeList, PricePanel,
        Field, Input, Select, Textarea, Avatar: KAvatar, SocialLinks } = _NS;
const D = window.CDF;
const I = window.Ico;

/* mailto: registration — every CTA opens a pre-filled email to Monika */
function regMail(t, dateLabel) {
  const when = dateLabel || t.dates;
  const subject = `Registration — ${t.country} ${t.year} · ${t.title}`;
  const body =
    `Hi Monika,\n\n` +
    `I'd love to register for (or learn more about) your ${t.country} tour — ${t.title}.\n\n` +
    `A little about me:\n` +
    `• Name:\n` +
    `• Travelling with:\n` +
    `• Preferred dates: ${when}\n` +
    `• Questions:\n\n` +
    `Thanks!\n`;
  return `mailto:${D.brand.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}

/* ---------------- Current & upcoming tours — departures board ---------------- */
function UpcomingBoard({ go }) {
  const rank = (t) => t.status === "current" ? 0 : (t.status === "upcoming" ? (t.featured ? 1 : 2) : 3);
  const tours = [...D.tours].sort((a, b) => rank(a) - rank(b));
  return (
    <section className="band band--sand upcoming">
      <div className="kit-container">
        <SectionHead
          eyebrow="Departures · 2026"
          title="Current &amp; upcoming tours"
          intro="One confirmed departure and three on the horizon. Small groups, real kitchens — reserve your seat by emailing me directly." />
        <div className="board" role="table">
          <div className="board__head" role="row">
            <span>Destination</span><span>Dates</span><span>Price</span><span></span>
          </div>
          {tours.map((t) => {
            const price = t.priceCAD != null ? `From CAD $${t.priceCAD.toLocaleString()}` : (t.priceNote || "On request");
            const isCurrent = t.status === "current";
            return (
              <div className={`board__row ${isCurrent ? "is-current" : ""}`} role="row" key={t.slug}>
                <div className="board__dest">
                  <span className="board__flag" aria-hidden="true">{t.flag}</span>
                  <div className="board__destText">
                    <div className="board__top">
                      <span className="board__country">{t.country}</span>
                      <KBadge tone={isCurrent ? "current" : "upcoming"}>{t.statusLabel}</KBadge>
                    </div>
                    <a className="board__title" href={`#/tour/${t.slug}`}
                       onClick={(e) => { e.preventDefault(); go(`#/tour/${t.slug}`); }}>{t.title}</a>
                    <span className="board__route">{I("map-pin")} {t.route} · {t.durationDays}</span>
                  </div>
                </div>
                <div className="board__dates">
                  {t.departures ? (
                    <div className="board__deps">
                      {t.departures.map((d) => <span key={d.id} className="board__dep">{d.dates}</span>)}
                    </div>
                  ) : <span className="board__datesMain">{t.dates}</span>}
                </div>
                <div className="board__price">{price}</div>
                <div className="board__cta">
                  <KBtn size="sm" variant="secondary" onClick={() => go(`#/tour/${t.slug}`)}>Details</KBtn>
                  <KBtn size="sm" variant={isCurrent ? "gold" : "primary"} href={regMail(t)} iconRight={I("arrow-right")}>
                    {isCurrent || t.featured ? "Register" : "Enquire"}
                  </KBtn>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Featured upcoming tour with multiple departures ---------------- */
function DeparturesFeature({ go }) {
  const t = D.tours.find((x) => x.featured && x.status === "upcoming");
  if (!t || !t.departures) return null;
  return (
    <section className="kit-container band">
      <div className="depfeat">
        <div className="depfeat__media">
          <img src={t.hero} alt={t.country} />
          <span className="depfeat__badge"><KBadge tone="upcoming">{t.statusLabel}</KBadge></span>
        </div>
        <div className="depfeat__body">
          <p className="depfeat__flag">{t.flag} {t.country} · {t.year}</p>
          <h2 className="depfeat__title">{t.title}</h2>
          <p className="depfeat__lede">{t.lede}</p>
          <div className="depfeat__choose">
            <p className="depfeat__chooseLabel">Choose your departure — same itinerary, three dates</p>
            <div className="depfeat__deps">
              {t.departures.map((d) => (
                <a key={d.id} className="depcard" href={regMail(t, d.dates)}>
                  <span className="depcard__dates">{d.dates}</span>
                  <span className="depcard__cta">Register {I("arrow-right")}</span>
                </a>
              ))}
            </div>
          </div>
          <KBtn variant="secondary" iconRight={I("arrow-right")} onClick={() => go("#/tour/turkey")}>View full itinerary</KBtn>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Newsletter band (home) ---------------- */
function NewsletterBand() {
  const NForm = window.NewsletterForm;
  return (
    <section className="band band--ink nlband">
      <div className="kit-container nlband__in">
        <div className="nlband__text">
          <p className="nlband__eyebrow">Stay in the loop</p>
          <h2 className="nlband__title">Get the next adventure <em>in your inbox</em></h2>
          <p className="nlband__sub">New tour dates, a few stories from the road, and the occasional recipe. No spam — and you can leave anytime.</p>
        </div>
        <div className="nlband__form">{NForm ? <NForm /> : null}</div>
      </div>
    </section>
  );
}

/* ============================ HOME ============================ */
function HomeScreen({ go }) {
  const current = D.tours.find((t) => t.status === "current");
  return (
    <div>
      {/* Hero */}
      <section className="hero">
        <div className="hero__media">
          <img src={D.monika.journey} alt="" />
          <div className="hero__wash" />
        </div>
        <div className="kit-container hero__inner">
          <p className="hero__eyebrow">Small-group culinary adventures</p>
          <h1 className="hero__title">Eat. Explore.<br /><em>Repeat.</em></h1>
          <p className="hero__sub">We travel the world through food — Vietnam, Portugal, Thailand and Austria are our playgrounds. Come hungry.</p>
          <div className="hero__cta">
            <KBtn variant="gold" size="lg" iconRight={I("arrow-right")} onClick={() => go("#/tour/austria")}>See my current tour</KBtn>
            <KBtn variant="inverse" size="lg" onClick={() => go("#/about")}>About Monika</KBtn>
          </div>
        </div>
      </section>

      {/* Current & upcoming departures board */}
      <UpcomingBoard go={go} />

      {/* Featured current tour */}
      <section className="kit-container band">
        <div className="feat">
          <div className="feat__media">
            <img src={current.hero} alt={current.country} />
            <span className="feat__badge"><KBadge tone="current">My Current Tour</KBadge></span>
          </div>
          <div className="feat__body">
            <p className="feat__flag">{current.flag} {current.country} · {current.year}</p>
            <h2 className="feat__title">{current.title}</h2>
            <p className="feat__lede">{current.lede}</p>
            <div className="feat__tags">
              {current.features.slice(0, 3).map((f, i) => <KTag key={i}>{f}</KTag>)}
            </div>
            <div className="feat__meta">
              <span>{I("calendar-days")} {current.dates}</span>
              <span>{I("map-pin")} {current.route}</span>
              <span className="feat__price">From CAD ${current.priceCAD.toLocaleString()}</span>
            </div>
            <KBtn variant="primary" size="lg" iconRight={I("arrow-right")} onClick={() => go("#/tour/austria")}>View itinerary &amp; register</KBtn>
          </div>
        </div>
      </section>

      {/* Featured upcoming \u2014 T\u00fcrkiye, three departures */}
      <DeparturesFeature go={go} />

      {/* About intro */}
      <section className="kit-container intro">
        <div className="intro__photo"><img src={D.monika.portrait} alt={D.monika.name} /></div>
        <div className="intro__text">
          <SectionHead eyebrow="About Monika" title="Your Fearless Leader." />
          <p>Chowdown Culinary Tours is the passion project of Canadian chef, restaurateur and YouTuber <strong>Monika Czerveniak</strong>.</p>
          <p>{D.monika.short} We explore the world's taste buds first — having fun and learning new ways of living along the way.</p>
          <KBtn variant="secondary" iconRight={I("arrow-right")} onClick={() => go("#/about")}>Read Monika's story</KBtn>
        </div>
      </section>

      {/* Destinations grid */}
      <section className="kit-container band">
        <SectionHead align="center" eyebrow="Travel with us" title="Popular destinations"
          intro="Four playgrounds, one obsession. Small groups, real kitchens, and a leader who has lived it." />
        <div className="destgrid">
          {D.tours.map((t) => <TourCard key={t.slug} tour={t} href={`#/tour/${t.slug}`}
            onClick={(e) => { e.preventDefault(); go(`#/tour/${t.slug}`); }} />)}
        </div>
      </section>

      {/* Gallery */}
      <section className="band band--sand">
        <div className="kit-container"><SectionHead eyebrow="Our gallery" title="Scenes from the road" /></div>
        <GalleryStrip images={D.gallery} />
      </section>

      {/* Testimonials */}
      <section className="kit-container band">
        <SectionHead align="center" eyebrow="What our guests say" title="A small group of women, one big adventure" />
        <Testimonials items={D.testimonials} />
      </section>

      {/* Newsletter */}
      <NewsletterBand />
    </div>
  );
}

/* ============================ TOUR DETAIL ============================ */
function TourScreen({ slug, go }) {
  const tour = D.tours.find((t) => t.slug === slug) || D.tours[0];
  const related = D.tours.filter((t) => t.slug !== tour.slug).slice(0, 3);
  const stats = [
    { icon: I("map-pin"), label: "Route", value: tour.route },
    { icon: I("calendar-days"), label: "Dates", value: tour.dates },
    { icon: I("clock"), label: "Duration", value: tour.durationDays },
    { icon: I("sunrise"), label: "Departure", value: tour.depart },
    { icon: I("users"), label: "Group size", value: `Max ${tour.occMax} · Min ${tour.occMin}` },
    { icon: I("shirt"), label: "Dress code", value: tour.dressCode },
  ];
  return (
    <div>
      <section className="thero">
        <div className="thero__media"><img src={tour.hero} alt={tour.country} /><div className="thero__wash" /></div>
        <div className="kit-container thero__inner">
          <a className="thero__crumb" href="#/" onClick={(e) => { e.preventDefault(); go("#/"); }}>{I("chevron-left")} All destinations</a>
          <span className="thero__badge"><KBadge tone={tour.status === "current" ? "current" : "upcoming"}>{tour.statusLabel}</KBadge></span>
          <h1 className="thero__title">{tour.flag} {tour.country}</h1>
          <p className="thero__subtitle">{tour.title}</p>
          <div className="thero__meta">
            <span>{I("calendar-days")} {tour.dates}</span>
            <span>{I("map-pin")} {tour.route}</span>
            <span>{I("clock")} {tour.durationDays}</span>
          </div>
        </div>
      </section>

      <section className="kit-container tlayout">
        <div className="tlayout__main">
          <p className="tlede">{tour.lede}</p>

          {tour.departures ? (
            <div className="tdepartures">
              <h3>Choose your departure</h3>
              <div className="tdepartures__grid">
                {tour.departures.map((d, i) => (
                  <a key={d.id} className="depcard depcard--lg" href={regMail(tour, d.dates)}>
                    <span className="depcard__tag">Departure {i + 1}</span>
                    <span className="depcard__dates">{d.dates}</span>
                    <span className="depcard__cta">Register {I("arrow-right")}</span>
                  </a>
                ))}
              </div>
              <p className="tdepartures__note">Same itinerary on every date — pick what suits you and email Monika to hold your seat with a refundable CAD ${tour.deposit} deposit.</p>
            </div>
          ) : null}

          <div className="tprose">
            <h2>We're excited to share the itinerary</h2>
            {tour.itinerary.map((p, i) => <p key={i}>{p}</p>)}
          </div>

          {tour.photos && tour.photos.length ? (
            <div className="tphotos">
              {tour.photos.map((src, i) => <img key={i} src={src} alt="" loading="lazy" />)}
            </div>
          ) : null}

          <div className="tfeatures">
            <h3>Key features</h3>
            <div className="tfeatures__tags">
              {tour.features.map((f, i) => <KTag key={i} icon={I("check")}>{f}</KTag>)}
            </div>
          </div>

          <div className="tincl">
            <div>
              <h3>What's included</h3>
              <IncludeList variant="yes" items={tour.included} />
            </div>
            <div>
              <h3>Not included</h3>
              <IncludeList variant="no" items={tour.excluded} />
            </div>
          </div>

          <div className="tcontact-note">
            For tour dates and pricing, email Monika at <a href={`mailto:${D.brand.email}`}>{D.brand.email}</a>. Have a group of 8+ ready to travel? We can build a custom itinerary.
          </div>
        </div>

        <div className="tlayout__side">
          <div className="tsticky">
            <PricePanel tour={tour} />
            <div className="tstats">
              <h3>Basic information</h3>
              <StatList items={stats} />
            </div>
          </div>
        </div>
      </section>

      <section className="kit-container band">
        <SectionHead eyebrow="Keep exploring" title="More Chowdown adventures" />
        <div className="destgrid destgrid--3">
          {related.map((t) => <TourCard key={t.slug} tour={t} href={`#/tour/${t.slug}`}
            onClick={(e) => { e.preventDefault(); go(`#/tour/${t.slug}`); }} />)}
        </div>
      </section>
    </div>
  );
}

/* ============================ PAST TOURS ============================ */
function PastScreen() {
  return (
    <div>
      <section className="kit-container pagehead">
        <SectionHead align="center" eyebrow="2012 — 2025" title="Thirteen years of chowing down"
          intro="A baker's-dozen years of small groups, big appetites and friendships made over shared tables." />
      </section>
      <section className="band band--sand">
        <div className="kit-container">
          <div className="pastvideo">
            <iframe src={D.monika.youtube} title="Chowdown with Fearless" frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen></iframe>
          </div>
        </div>
      </section>
      <section className="kit-container band">
        <div className="timeline">
          {D.pastTours.map((p, i) => (
            <div className="tl__row" key={i}>
              <div className="tl__year">{p.year}</div>
              <div className="tl__dot" />
              <div className="tl__card">
                <div className="tl__country">{p.country}</div>
                <div className="tl__note">{p.note}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ============================ ABOUT ============================ */
function AboutScreen({ go }) {
  return (
    <div>
      <section className="abouthero kit-container">
        <div className="abouthero__photo"><img src={D.monika.portrait} alt={D.monika.name} /></div>
        <div className="abouthero__text">
          <p className="ksh__eyebrow">About Me</p>
          <h1 className="abouthero__name">Monika Czerveniak,<br /><em>aka. Fearless Leader.</em></h1>
          <p>Born, fed and educated in Austria, I love travelling and exploring the world of food and pleasure. Cooking for a living has taken me to Paris, London, Beijing, Singapore and, of course, Vancouver, BC.</p>
          <div className="about__tags">
            <KTag icon={I("plane")}>Traveller of SE Asia</KTag>
            <KTag icon={I("pen-line")}>Food blogger</KTag>
            <KTag icon={I("chef-hat")}>Fearless Cooking classes</KTag>
          </div>
          <KBtn variant="primary" iconLeft={I("mail")} href={`mailto:${D.brand.email}`}>Contact me</KBtn>
        </div>
      </section>

      <section className="band band--ink">
        <div className="kit-container journey">
          <div className="journey__text">
            <SectionHead light eyebrow="My Journey" title="From a Hoi An kitchen to the world" />
            {D.monika.bio.map((p, i) => <p key={i}>{p}</p>)}
            <KBtn variant="gold" iconRight={I("arrow-right")} onClick={() => go("#/tour/austria")}>See where I'm headed next</KBtn>
          </div>
          <div className="journey__media">
            <div className="journey__video">
              <iframe src={D.monika.youtube} title="My journey in video" frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================ CONTACT ============================ */
function ContactScreen() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    const f = e.target;
    const subject = encodeURIComponent(`Enquiry — ${f.tour.value}`);
    const body = encodeURIComponent(`Hi Monika,\n\n${f.message.value}\n\n— ${f.name.value}\n${f.email.value}`);
    window.location.href = `mailto:${D.brand.email}?subject=${subject}&body=${body}`;
    setSent(true);
  };
  return (
    <section className="kit-container contact">
      <div className="contact__left">
        <p className="ksh__eyebrow">Say hello</p>
        <h1 className="contact__title">Let's plan your <em>adventure</em></h1>
        <p className="contact__lede">Tell me a little about yourself and which tour you're dreaming of. I answer every message personally — no booking engines, no call centres.</p>
        <a className="contact__email" href={`mailto:${D.brand.email}`}>{I("mail")} {D.brand.email}</a>
        <div className="contact__social">
          <SocialLinks variant="solid" size="md" />
        </div>
        <div className="contact__photo"><img src={D.gallery[2]} alt="" /></div>
      </div>
      <div className="contact__right">
        {sent ? (
          <div className="contact__sent">
            <div className="contact__sent-ico">{I("check")}</div>
            <h3>Opening your email…</h3>
            <p>Your message is ready to send to Monika. If nothing opened, write to <a href={`mailto:${D.brand.email}`}>{D.brand.email}</a>.</p>
          </div>
        ) : (
          <form className="contact__form" onSubmit={submit}>
            <Field label="Your name" required><Input name="name" placeholder="Jane Traveller" required /></Field>
            <Field label="Email" required hint="I'll reply personally."><Input name="email" type="email" placeholder="you@email.com" required /></Field>
            <Field label="Which tour interests you?">
              <Select name="tour" defaultValue="Austria 2026 — Danube E-Bike">
                {D.tours.map((t) => <option key={t.slug}>{t.country} — {t.title}</option>)}
                <option>Not sure yet — surprise me</option>
              </Select>
            </Field>
            <Field label="A little about you"><Textarea name="message" placeholder="Who you'd travel with, what you're hungry to see…" /></Field>
            <KBtn variant="gold" size="lg" fullWidth iconRight={I("send")}>Send to Monika</KBtn>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { HomeScreen, TourScreen, PastScreen, AboutScreen, ContactScreen });