/* ============================================================
   EOLODENT — Public inner pages
   ============================================================ */

function Crumb({ items }) {
  return (
    <div className="breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {it.to ? <a href={it.to} onClick={(e) => { e.preventDefault(); navigate(it.to); }}>{it.label}</a> : <span>{it.label}</span>}
          {i < items.length - 1 ? <span>/</span> : null}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------------- Servicios ---------------- */
function ServiciosPage() {
  const t = useT();
  const store = useStore();
  const services = store.get("services").filter((s) => s.active && s.key !== "consulta");
  useEffect(() => {
    const h = window.location.hash.split("#")[2];
    if (h) { const el = document.getElementById("svc-" + h); if (el) setTimeout(() => window.scrollTo({ top: el.offsetTop - 90, behavior: "smooth" }), 120); }
  }, []);
  return (
    <main>
      <section className="page-hero">
        <div className="wrap page-hero__inner">
          <Crumb items={[{ label: t("nav.inicio"), to: "#/" }, { label: t("nav.servicios") }]} />
          <p className="eyebrow">{t("treat.kicker")}</p>
          <h1>{t("svc.title")}</h1>
          <p className="lead">{t("svc.sub")}</p>
        </div>
      </section>
      <section className="section svc-detail-wrap">
        <div className="wrap">
          {services.map((s, i) => (
            <Reveal tag="article" key={s.id} id={"svc-" + s.key} className={`svc-detail ${i % 2 ? "rev" : ""}`}>
              <div className="svc-detail__media">
                <PhotoSlot id={"svcimg-" + s.key} note={s.name} radius={20} placeholder={"Foto · " + s.name} />
                <div className="svc-detail__icon"><Icon name={s.icon} size={26} /></div>
              </div>
              <div className="svc-detail__body">
                <span className="chip">{s.name}</span>
                <h2>{s.name}</h2>
                <p className="svc-detail__long">{s.long}</p>
                <div className="svc-detail__benefits">
                  <h4>{t("svc.benefits")}</h4>
                  <ul>{s.benefits.map((b, j) => <li key={j}><span className="tick"><Icon name="check" size={13} /></span>{b}</li>)}</ul>
                </div>
                <div className="svc-detail__foot">
                  <div className="svc-detail__facts">
                    <div><span>{t("svc.from")}</span><strong>{money(s.price)}</strong></div>
                    <div><span>{t("svc.duration")}</span><strong>{s.duration} {t("book.min")}</strong></div>
                  </div>
                  <a href="#/agenda" onClick={(e) => { e.preventDefault(); navigate("#/agenda?service=" + encodeURIComponent(s.name)); }} className="btn btn--primary">{t("svc.book")} <Icon name="arrow" size={16} /></a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
      <BookingCTA />
    </main>
  );
}

/* ---------------- Sucursales ---------------- */
function SucursalesPage() {
  const t = useT();
  const store = useStore();
  const branches = store.get("branches");
  return (
    <main>
      <section className="page-hero">
        <div className="wrap page-hero__inner">
          <Crumb items={[{ label: t("nav.inicio"), to: "#/" }, { label: t("nav.sucursales") }]} />
          <p className="eyebrow">{t("branches.kicker")}</p>
          <h1>{t("branches.title")}</h1>
          <p className="lead">{t("branches.sub")}</p>
        </div>
      </section>
      <section className="section branches" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <div className="grid branches__grid">
            {branches.map((b) => <BranchCard key={b.id} b={b} />)}
          </div>
        </div>
      </section>
      <BookingCTA />
    </main>
  );
}

/* ---------------- Blog list ---------------- */
function BlogPage() {
  const t = useT();
  const store = useStore();
  const posts = store.get("posts").filter((p) => p.status === "publicado");
  const cats = ["all", ...Array.from(new Set(posts.map((p) => p.category)))];
  const [cat, setCat] = useState("all");
  const list = cat === "all" ? posts : posts.filter((p) => p.category === cat);
  return (
    <main>
      <section className="page-hero">
        <div className="wrap page-hero__inner">
          <Crumb items={[{ label: t("nav.inicio"), to: "#/" }, { label: t("nav.blog") }]} />
          <p className="eyebrow">{t("blog.kicker")}</p>
          <h1>{t("blog.title")}</h1>
          <p className="lead">{t("blog.sub")}</p>
        </div>
      </section>
      <section className="section" style={{ background: "#fff" }}>
        <div className="wrap">
          <div className="blog-filter">
            {cats.map((c) => (
              <button key={c} className={`blog-filter__btn ${cat === c ? "on" : ""}`} onClick={() => setCat(c)}>
                {c === "all" ? t("blog.all") : c}
              </button>
            ))}
          </div>
          <div className="grid blog-grid mt-l">
            {list.map((p) => <BlogCard key={p.id} post={p} />)}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Blog post ---------------- */
function BlogPostPage({ slug }) {
  const t = useT();
  const store = useStore();
  const post = store.get("posts").find((p) => p.slug === slug);
  if (!post) {
    return <main><section className="page-hero"><div className="wrap page-hero__inner"><h1>Post no encontrado</h1><a href="#/blog" onClick={(e) => { e.preventDefault(); navigate("#/blog"); }} className="btn btn--cyan mt-m">{t("blog.back")}</a></div></section></main>;
  }
  const dt = new Date(post.date + "T12:00:00");
  const fdate = dt.toLocaleDateString(EoloI18n.lang === "en" ? "en-US" : "es-MX", { day: "numeric", month: "long", year: "numeric" });
  return (
    <main>
      <article className="post">
        <header className="post__head">
          <div className="wrap post__head-inner">
            <Crumb items={[{ label: t("nav.inicio"), to: "#/" }, { label: t("nav.blog"), to: "#/blog" }, { label: post.category }]} />
            <span className="chip">{post.category}</span>
            <h1>{post.title}</h1>
            <div className="post__meta"><Icon name="calendar" size={16} /> {fdate}<span className="post__dot">·</span><Icon name="clock" size={16} /> 4 min</div>
          </div>
        </header>
        <div className="wrap post__cover"><PhotoSlot id={"postcover-" + post.slug} note="Imagen principal del post" radius={20} placeholder="Imagen hero del post" /></div>
        <div className="post__body">
          {post.body.map((blk, i) => blk.type === "h" ? <h2 key={i}>{blk.text}</h2> : <p key={i}>{blk.text}</p>)}
          <div className="post__cta">
            <div>
              <h3>¿Lista tu sonrisa para su revisión?</h3>
              <p>Agenda en Coyoacán o Narvarte. Te atendemos hoy mismo.</p>
            </div>
            <a href="#/agenda" onClick={(e) => { e.preventDefault(); navigate("#/agenda"); }} className="btn btn--cyan btn--lg">{t("cta.agendar")} <Icon name="arrow" size={18} /></a>
          </div>
        </div>
      </article>
    </main>
  );
}

/* ---------------- Agenda ---------------- */
function AgendaPage() {
  const t = useT();
  const store = useStore();
  const branches = store.get("branches");
  const q = new URLSearchParams((window.location.hash.split("?")[1] || ""));
  const preBranch = q.get("branch") || "";
  return (
    <main>
      <section className="page-hero">
        <div className="wrap page-hero__inner">
          <Crumb items={[{ label: t("nav.inicio"), to: "#/" }, { label: t("nav.agenda") }]} />
          <p className="eyebrow">{t("book.kicker")}</p>
          <h1>{t("book.title")}</h1>
          <p className="lead">{t("book.sub")}</p>
        </div>
      </section>
      <section className="section agenda-page">
        <div className="wrap agenda-page__grid">
          <aside className="agenda-aside">
            <div className="agenda-aside__card">
              <h3>¿Por qué agendar en línea?</h3>
              <ul>
                <li><Icon name="check" size={16} />Eliges el horario que te queda</li>
                <li><Icon name="check" size={16} />Te confirmamos por WhatsApp</li>
                <li><Icon name="check" size={16} />Sin filas ni esperas al teléfono</li>
              </ul>
            </div>
            <div className="agenda-aside__branches">
              <h4>Nuestras sucursales</h4>
              {branches.map((b) => (
                <div key={b.id} className="agenda-branch">
                  <Icon name="map" size={18} />
                  <div><strong>{b.name}</strong><span>{b.address}</span><a href={"tel:" + b.phones[0]}>{b.phones[0]}</a></div>
                </div>
              ))}
            </div>
            <div className="agenda-aside__urgent">
              <Icon name="whatsapp" size={22} />
              <div><strong>Urgencia 24 hrs</strong><a href="https://wa.me/525548281475" target="_blank" rel="noopener">WhatsApp · 55 4828 1475</a></div>
            </div>
          </aside>
          <div className="agenda-form-wrap">
            <BookingForm preBranch={preBranch} />
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServiciosPage, SucursalesPage, BlogPage, BlogPostPage, AgendaPage, Crumb });