// Experience detail page + Checkout flow + About

// ────────────────────────────────────────────
// BookCard — add-to-cart sidebar for the ExperienceDetail
// ────────────────────────────────────────────
function BookCard({ exp, lang }) {
  const cart = window.__bbCart.useCart();
  const router = window.__bbRouter;
  const t = window.COPY[lang].bookcard;

  const dateOptions = React.useMemo(() => {
    const out = []; const today = new Date();
    for (let i = 1; i <= 21; i++) {
      const d = new Date(today); d.setDate(today.getDate() + i);
      out.push(d.toISOString().slice(0, 10));
    }
    return out;
  }, []);

  const [date, setDate] = React.useState(dateOptions[1]);
  const [departure, setDeparture] = React.useState(exp.departures[0]);
  const [guests, setGuests] = React.useState(2);
  const [flash, setFlash] = React.useState(null);

  React.useEffect(() => { setDeparture(exp.departures[0]); }, [exp.id]);

  const subtotal = exp.price * guests;

  const onAdd = (goToCheckout) => {
    cart.addItem({ expId: exp.id, date, departure, guests });
    if (goToCheckout) {
      router.navigate("checkout");
    } else {
      cart.openDrawer();
      setFlash(t.flashAdded);
      setTimeout(() => setFlash(null), 2000);
    }
  };

  return (
    <div className="book-card">
      <div className="book-card-head">
        <span className="eyebrow">{t.reserve}</span>
        <div className="book-price">
          <span className="display small">${exp.price}</span>
          <span className="mono">{t.perPerson}</span>
        </div>
      </div>

      <div className="book-fields">
        <label className="book-field">
          <span className="mono">{t.date}</span>
          <select value={date} onChange={(e) => setDate(e.target.value)}>
            {dateOptions.map((iso) => (
              <option key={iso} value={iso}>{window.__bbCart.formatDate(iso, lang)}</option>
            ))}
          </select>
        </label>

        <label className="book-field">
          <span className="mono">{t.departure}</span>
          <select value={departure} onChange={(e) => setDeparture(e.target.value)}>
            {exp.departures.map((tm) => <option key={tm} value={tm}>{tm}</option>)}
          </select>
        </label>

        <div className="book-field book-field-guests">
          <span className="mono">{t.guests}</span>
          <div className="stepper">
            <button type="button" onClick={() => setGuests(Math.max(1, guests - 1))}>−</button>
            <span>{guests}</span>
            <button type="button" onClick={() => setGuests(Math.min(8, guests + 1))}>+</button>
          </div>
        </div>
      </div>

      <div className="book-subtotal">
        <span className="mono">{t.subtotal}</span>
        <strong>${subtotal} USD</strong>
      </div>

      <button className="btn btn-primary btn-lg full" onClick={() => onAdd(false)}>
        {t.addToCart} +
      </button>
      <button className="btn btn-link book-book-only" onClick={() => onAdd(true)}>
        {t.bookOnly} →
      </button>

      {flash && <span className="book-flash mono">{flash}</span>}

      <ul className="book-facts">
        <li><span className="mono">{t.duration}</span>{exp.duration[lang]}</li>
        <li><span className="mono">{t.group}</span>{exp.group[lang]}</li>
        <li>
          <span className="mono">{t.difficulty}</span>
          <span className="diff-dots">
            {[1,2,3].map(n => <span key={n} className={`dot ${n <= exp.difficulty ? "on" : ""}`} />)}
          </span>
        </li>
      </ul>

      <p className="book-note mono">{t.note}</p>
    </div>
  );
}

// ────────────────────────────────────────────
// Experience detail
// ────────────────────────────────────────────
function ExperienceDetail({ exp, lang, t: _t, setRoute }) {
  if (!exp) exp = window.EXPERIENCES[0];
  const itinerary = window.ITINERARIES[exp.id] || window.ITINERARIES.default;
  const t = window.COPY[lang].detail;

  return (
    <div className="detail">
      <div className="detail-hero">
        <img src={exp.heroImg} alt={exp.title[lang]} />
        <div className="detail-hero-overlay" />
        <div className="detail-hero-copy">
          <button className="back-btn mono" onClick={() => setRoute("catalog")}>
            ← {t.allExpeditions}
          </button>
          <span className="eyebrow light">{exp.type[lang]} · {exp.location}</span>
          <h1 className="detail-title">{exp.title[lang]}</h1>
        </div>
        <div className="detail-hero-meta mono">
          <span>{exp.kicker}</span><span>·</span><span>{exp.location}</span>
        </div>
      </div>

      <div className="detail-body">
        <aside className="detail-sidebar">
          <BookCard exp={exp} lang={lang} />
        </aside>

        <main className="detail-main">
          <section className="detail-section">
            <p className="detail-lede">{exp.subtitle[lang]}</p>
          </section>

          <section className="detail-section">
            <h3 className="section-label mono">01 &nbsp; {t.sections.day}</h3>
            <ol className="itinerary">
              {itinerary.map((step, i) => (
                <li key={i}>
                  <span className="itin-time mono">{step.time}</span>
                  <div className="itin-body">
                    <strong>{step.title[lang]}</strong>
                    <p>{step.body[lang]}</p>
                  </div>
                </li>
              ))}
            </ol>
          </section>

          <section className="detail-section">
            <h3 className="section-label mono">02 &nbsp; {t.sections.included}</h3>
            <div className="include-grid">
              {(exp.includes?.[lang] || exp.tags[lang]).map((item, i) => (
                <div key={i} className="include-item">
                  <span className="mono">{String(i + 1).padStart(2, "0")}</span>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </section>

          <section className="detail-section">
            <h3 className="section-label mono">03 &nbsp; {t.sections.bring}</h3>
            <div className="bring-grid">
              {t.bringItems.map((item, i) => (
                <span key={i} className="bring-chip">{item}</span>
              ))}
            </div>
          </section>

          <section className="detail-section">
            <h3 className="section-label mono">04 &nbsp; {t.sections.guide}</h3>
            {(() => {
              const guide = window.GUIDES[exp.guideId] || window.GUIDES.itzel;
              return (
                <div className="guide-card">
                  <div className="guide-avatar">
                    <img src={guide.img} alt={guide.name} />
                  </div>
                  <div>
                    <h4 className="display small">{guide.name}</h4>
                    <span className="mono guide-role">{guide.role[lang]}</span>
                    <p className="guide-bio">{guide.bio[lang]}</p>
                    <span className="mono guide-rating">★ {guide.rating.score} · {guide.rating.count} {t.reviews}</span>
                  </div>
                </div>
              );
            })()}
          </section>
        </main>
      </div>

      <RelatedStrip exp={exp} lang={lang} openExperience={(e) => setRoute("detail", e)} />
    </div>
  );
}

function RelatedStrip({ exp, lang, openExperience }) {
  const others = window.EXPERIENCES.filter(e => e.id !== exp.id).slice(0, 4);
  const t = window.COPY[lang].detail;
  return (
    <section className="related">
      <div className="related-head">
        <h3 className="display small">{t.related}</h3>
      </div>
      <div className="related-grid">
        {others.map(o => {
          const Link = window.__bbRouter.Link;
          return (
            <Link key={o.id} route="detail" entity={o} className="related-card">
              <img src={o.thumb} alt={o.title[lang]} />
              <div className="related-body">
                <span className="mono">{o.kicker} · {o.type[lang]}</span>
                <h4>{o.title[lang]}</h4>
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}

// ────────────────────────────────────────────
// Checkout — cart-based single-page form
// ────────────────────────────────────────────
function CheckoutPage({ lang, setRoute }) {
  const cart = window.__bbCart.useCart();
  const { formatDate } = window.__bbCart;
  const t = window.COPY[lang].checkout;

  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [notes, setNotes] = React.useState("");
  const [addReserve, setAddReserve] = React.useState(true);
  const [errors, setErrors] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);

  const reserveAmount = addReserve ? cart.reserve4 : 0;
  const totalToday    = cart.subtotal + reserveAmount;

  if (cart.items.length === 0) {
    return (
      <div className="checkout checkout-empty">
        <div className="checkout-empty-inner">
          <WaveGlyph style={{ width: 100, height: 28, color: "var(--teal)" }} />
          <span className="eyebrow">{t.emptyEyebrow}</span>
          <h1 className="display small">{t.emptyTitle}</h1>
          <p>{t.emptyBody}</p>
          <button className="btn btn-primary" onClick={() => setRoute("catalog")}>
            {window.COPY[lang].cart.browse} →
          </button>
        </div>
      </div>
    );
  }

  const validate = () => {
    const errs = {};
    if (!name.trim()) errs.name = t.errRequired;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = t.errEmail;
    if (phone.replace(/\D/g, "").length < 7) errs.phone = t.errPhone;
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  // Hand off to Stripe Checkout. The real Booking row is created by
  // the backend's Stripe webhook on session.completed, so here we
  // only need to send cart contents and customer info, then redirect.
  // The local cart is cleared on the success page.
  const submit = async () => {
    if (!validate()) return;
    if (submitting) return;
    setSubmitting(true);
    setSubmitError(null);
    try {
      const cartLines = cart.items
        .filter((i) => i.exp)
        .map((i) => ({
          expId: i.expId,
          date: i.date,
          departure: i.departure,
          guests: i.guests,
          line: i.line,
          exp: i.exp,
        }));
      const customer = {
        email,
        name: name.trim(),
        phone,
        locale: lang,
      };
      const origin = window.location.origin;
      await window.__bbCartApi.submitAndRedirect({
        customer,
        items: cartLines,
        successUrl: `${origin}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
        cancelUrl:  `${origin}/checkout`,
      });
    } catch (err) {
      setSubmitting(false);
      setSubmitError(err?.body?.error || err?.message || "checkout_failed");
    }
  };

  return (
    <div className="checkout">
      <div className="checkout-head">
        <button className="back-btn mono" onClick={() => setRoute("catalog")}>
          ← {t.keepBrowsing}
        </button>
        <div>
          <span className="eyebrow">{t.eyebrow}</span>
          <h1 className="display">{t.title_1}<em>{t.titleEm}</em></h1>
        </div>
      </div>

      <div className="checkout-grid">
        <main className="checkout-main">
          <section className="checkout-section">
            <h3 className="section-label mono">01 &nbsp; {t.section1}</h3>

            <div className="field-group">
              <label className="field-label mono">{t.fullName}</label>
              <input type="text" value={name} onChange={(e) => setName(e.target.value)} className={errors.name ? "err" : ""} autoComplete="name" />
              {errors.name && <p className="err">{errors.name}</p>}
            </div>

            <div className="field-row">
              <div className="field-group">
                <label className="field-label mono">{t.email}</label>
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className={errors.email ? "err" : ""} autoComplete="email" />
                {errors.email && <p className="err">{errors.email}</p>}
              </div>
              <div className="field-group">
                <label className="field-label mono">{t.phone}</label>
                <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} className={errors.phone ? "err" : ""} autoComplete="tel" />
                {errors.phone && <p className="err">{errors.phone}</p>}
              </div>
            </div>

            <div className="field-group">
              <label className="field-label mono">{t.notes}</label>
              <textarea rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder={t.notesPlaceholder} />
            </div>
          </section>

          <section className="checkout-section">
            <h3 className="section-label mono">02 &nbsp; {t.section2}</h3>
            <div className="pay-card" style={{ background:'rgba(42,139,156,0.06)', border:'1px solid rgba(42,139,156,0.2)', borderRadius:12, padding:'18px 20px' }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                <span style={{ fontSize:22 }}>🔒</span>
                <strong>
                  {lang === 'en'
                    ? 'Pay securely on Stripe'
                    : 'Paga de forma segura en Stripe'}
                </strong>
              </div>
              <p className="mono" style={{ fontSize:13, lineHeight:1.5, margin:0, color:'var(--ink-soft, #555)' }}>
                {lang === 'en'
                  ? 'When you continue, we will hand off to Stripe Checkout to take payment. Your card details never touch our servers.'
                  : 'Al continuar te llevamos a Stripe Checkout para procesar el pago. Tus datos de tarjeta no pasan por nuestros servidores.'}
              </p>
              <label className="check-row reserve-optin" style={{ marginTop:14 }}>
                <input type="checkbox" checked={addReserve} onChange={(e) => setAddReserve(e.target.checked)} />
                <span className="reserve-optin-body">
                  <strong>{t.reserveOptInTitle.replace("$AMT", `$${cart.reserve4}`)}</strong>
                  <small className="mono">{t.reserveOptInSub}</small>
                </span>
              </label>
            </div>
          </section>

          {submitError && (
            <div style={{ background:'#fee', border:'1px solid #fbb', color:'#911', padding:'12px 14px', borderRadius:8, marginTop:12, fontSize:14 }}>
              {lang === 'en'
                ? 'Could not start checkout: '
                : 'No se pudo iniciar el pago: '}
              <span className="mono">{submitError}</span>
            </div>
          )}

          <button className="btn btn-primary btn-lg full checkout-submit" onClick={submit} disabled={submitting}>
            {submitting
              ? (lang === 'en' ? 'Redirecting…' : 'Redirigiendo…')
              : (lang === 'en'
                  ? `Pay $${totalToday} with Stripe`
                  : `Pagar $${totalToday} con Stripe`)} →
          </button>
          <p className="book-note mono checkout-fineprint">{t.fineprint}</p>
        </main>

        <aside className="checkout-summary">
          <h3 className="section-label mono">{t.yourCart} · {cart.rowCount}</h3>
          <ul className="checkout-items">
            {cart.items.map((item) => {
              if (!item.exp) return null;
              return (
                <li key={item.id} className="checkout-item">
                  <img src={item.exp.thumb} alt="" />
                  <div className="checkout-item-body">
                    <strong>{item.exp.title[lang]}</strong>
                    <span className="mono">{formatDate(item.date, lang)} · {item.departure}</span>
                    <div className="checkout-item-row">
                      <div className="cart-stepper">
                        <button type="button" onClick={() => cart.updateGuests(item.id, item.guests - 1)}>−</button>
                        <span>{item.guests}</span>
                        <button type="button" onClick={() => cart.updateGuests(item.id, item.guests + 1)}>+</button>
                      </div>
                      <span className="mono checkout-item-price">${item.line}</span>
                    </div>
                  </div>
                  <button className="checkout-item-remove" onClick={() => cart.removeItem(item.id)} aria-label={window.COPY[lang].cart.remove}>×</button>
                </li>
              );
            })}
          </ul>

          <div className="checkout-totals">
            <div><span className="mono">{t.subtotal}</span><span>${cart.subtotal}</span></div>
            {addReserve && (
              <div><span className="mono">{t.conservationFund}</span><span>${cart.reserve4}</span></div>
            )}
            <div className="checkout-divider" />
            <div><span className="mono">{t.totalToday}</span><strong className="display small">${totalToday}</strong></div>
            <p className="mono checkout-totals-note">{t.totalNote}</p>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────
// Checkout success — Stripe success-redirect landing.
// The real Booking row is created by the backend's Stripe webhook on
// session.completed (idempotent), so this page just acknowledges
// receipt, clears the local cart, and surfaces the Stripe session_id
// for support reference.
// ────────────────────────────────────────────
function CheckoutSuccessPage({ lang, setRoute }) {
  const cart = window.__bbCart.useCart();
  const sessionId = React.useMemo(() => {
    try { return new URLSearchParams(window.location.search).get("session_id") || ""; }
    catch { return ""; }
  }, []);

  React.useEffect(() => {
    cart.clearCart();
  }, []);

  const t = window.COPY[lang].success;

  return (
    <div className="checkout booking-done">
      <div className="booking-done-inner">
        <WaveGlyph style={{ width: 120, height: 32, color: "var(--teal)" }} />
        <span className="eyebrow">{t.reserved}</span>
        <h1 className="display">
          {lang === 'en' ? 'Payment received.' : 'Pago recibido.'}
        </h1>
        <p className="confirm-body">
          {lang === 'en'
            ? 'Your booking is being confirmed right now. A confirmation email with your voucher and pickup details will land in your inbox within a minute.'
            : 'Tu reserva se está confirmando ahora mismo. Recibirás un correo con tu voucher y los detalles de recogida en menos de un minuto.'}
        </p>

        {sessionId && (
          <div className="confirm-summary" style={{ marginTop:18 }}>
            <div style={{ flexDirection:'column', alignItems:'flex-start' }}>
              <span className="mono" style={{ opacity:0.6, fontSize:12 }}>
                {lang === 'en' ? 'Stripe session' : 'Sesión Stripe'}
              </span>
              <span className="mono" style={{ wordBreak:'break-all', fontSize:12 }}>{sessionId}</span>
              <span className="mono" style={{ opacity:0.6, fontSize:11, marginTop:6 }}>
                {lang === 'en'
                  ? 'Save this in case you need to contact support.'
                  : 'Guárdalo por si necesitas contactarnos.'}
              </span>
            </div>
          </div>
        )}

        <div className="confirm-ctas" style={{ marginTop:24 }}>
          <button className="btn btn-primary" onClick={() => setRoute("home")}>{t.backHome}</button>
          <button className="btn btn-ghost" onClick={() => setRoute("catalog")}>{t.addAnother}</button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────
// About
// ────────────────────────────────────────────
function AboutPage({ lang }) {
  const t = window.COPY[lang].about;
  return (
    <div className="about">
      <section className="about-hero">
        <span className="eyebrow">{t.eyebrow}</span>
        <h1 className="about-title">
          {t.title_1}<em>{t.titleEm_1}</em><br/>{t.title_2}<em>{t.titleEm_2}</em>
        </h1>
      </section>

      <section className="about-block">
        <div className="about-block-grid">
          <div>
            <h3 className="section-label mono">{t.foundersLabel}</h3>
          </div>
          <div>
            <p className="about-lede">{t.founders1}</p>
            <p>{t.founders2}</p>
          </div>
        </div>
      </section>

      <section className="about-pillars">
        {t.pillars.map((p, i) => (
          <div key={i} className="pillar">
            <span className="display pillar-num">{String(i + 1).padStart(2, "0")}</span>
            <h3 className="display small">{p.title}</h3>
            <p>{p.body}</p>
          </div>
        ))}
      </section>

      <section className="about-guides">
        <div className="sec-head">
          <span className="eyebrow">{t.guidesEyebrow}</span>
          <h2 className="display">{t.guidesTitle}</h2>
        </div>
        <div className="guide-row">
          {[
            { name: "Itzel Canché", role: { en: "Marine biologist", es: "Bióloga marina" }, img: "images/team-itzel-800.webp" },
            { name: "Mateo Poot", role: { en: "Dive master", es: "Instructor PADI" }, img: "images/team-mateo-800.webp" },
            { name: "Paulina Cauich", role: { en: "Archaeologist", es: "Arqueóloga" }, img: "images/team-paulina-800.webp" },
            { name: "Diego Uc", role: { en: "Jungle & ruins", es: "Selva y ruinas" }, img: "images/team-diego-800.webp" },
          ].map((g) => (
            <div key={g.name} className="guide-tile">
              <img src={g.img} alt={g.name} />
              <div>
                <strong>{g.name}</strong>
                <span className="mono">{g.role[lang]}</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// ────────────────────────────────────────────
// Contact (small, mostly to complete the nav)
// ────────────────────────────────────────────
function ContactPage({ lang }) {
  const [sent, setSent] = React.useState(false);
  const t = window.COPY[lang].contact;
  return (
    <div className="contact">
      <span className="eyebrow">{t.eyebrow}</span>
      <h1 className="display">{t.title_1}<em>{t.titleEm}</em></h1>
      <p className="contact-lede">{t.lede}</p>
      {sent ? (
        <div className="contact-sent">
          <WaveGlyph style={{ width: 80, color: "var(--teal)" }} />
          <h3 className="display small">{t.sent}</h3>
          <p>{t.sentSub}</p>
        </div>
      ) : (
        <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <div className="field-row">
            <div className="field-group">
              <label className="mono">{t.nameLabel}</label>
              <input required />
            </div>
            <div className="field-group">
              <label className="mono">Email</label>
              <input required type="email" />
            </div>
          </div>
          <div className="field-group">
            <label className="mono">{window.COPY[lang].checkout.notes}</label>
            <textarea rows={5} required />
          </div>
          <button className="btn btn-primary btn-lg" type="submit">{t.sendBtn} →</button>
        </form>
      )}
    </div>
  );
}

// ────────────────────────────────────────────
// Journal — index of all field notes, each clickable to its individual page
// ────────────────────────────────────────────
function JournalPage({ lang, openPost }) {
  const posts = window.JOURNAL;
  const Link = window.__bbRouter.Link;
  const t = window.COPY[lang].journalIndex;
  return (
    <div className="journal">
      <div className="journal-head">
        <span className="eyebrow">{t.eyebrow}</span>
        <h1 className="display">{t.title_1}<em>{t.titleEm}</em></h1>
      </div>
      <div className="journal-grid">
        {posts.map((p, i) => (
          <Link key={p.id} route="journal-post" entity={p} className={`journal-post ${i === 0 ? "lead" : ""}`}>
            <img src={i === 0 ? p.img : p.thumb} alt="" />
            <div>
              <span className="mono">{p.kicker} · {p.date}</span>
              <h3 className="display small">{p.title[lang]}</h3>
              <p>{p.excerpt[lang]}</p>
              <span className="journal-read">{t.read} →</span>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────
// Journal post — individual article page
// ────────────────────────────────────────────
function JournalPost({ post, lang, setRoute, openPost }) {
  if (!post) post = window.JOURNAL[0];
  const author = post.author ? window.GUIDES[post.author] : null;
  const related = window.JOURNAL.filter(p => p.id !== post.id).slice(0, 2);
  const t = window.COPY[lang].post;

  return (
    <article className="post">
      <div className="post-hero">
        <img src={post.img} alt="" />
        <div className="post-hero-gradient" />
      </div>

      <div className="post-inner">
        <button className="back-btn mono post-back" onClick={() => setRoute("journal")}>
          ← {t.allNotes}
        </button>

        <header className="post-head">
          <span className="eyebrow">{post.kicker} · {post.date} · {post.readMinutes} {t.minRead}</span>
          <h1 className="display post-title">{post.title[lang]}</h1>
          <p className="post-lede">{post.excerpt[lang]}</p>
        </header>

        <div className="post-body">
          {post.body[lang].map((para, i) => (
            <p key={i}>{para}</p>
          ))}
        </div>

        {author && (
          <div className="post-byline">
            <img src={author.img} alt={author.name} />
            <div>
              <span className="mono">{t.writtenBy}</span>
              <strong>{author.name}</strong>
              <span className="mono post-byline-role">{author.role[lang]}</span>
            </div>
          </div>
        )}

        {related.length > 0 && (
          <section className="post-related">
            <h3 className="section-label mono">{t.keepReading}</h3>
            <div className="post-related-grid">
              {related.map((p) => (
                <a key={p.id} href={window.__bbRouter.buildPath("journal-post", p)} className="post-related-card"
                   onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return; e.preventDefault(); openPost(p); window.scrollTo(0, 0); }}>
                  <img src={p.thumb} alt="" />
                  <div>
                    <span className="mono">{p.kicker}</span>
                    <h4 className="display small">{p.title[lang]}</h4>
                    <span className="journal-read">{t.read} →</span>
                  </div>
                </a>
              ))}
            </div>
          </section>
        )}
      </div>
    </article>
  );
}

Object.assign(window, { ExperienceDetail, CheckoutPage, CheckoutSuccessPage, AboutPage, ContactPage, JournalPage, JournalPost });