/* articles.jsx — SectionIndex (ingredients/techniques), ArticlePage, LegalPage */
(function () {
  const { useEffect } = React;
  const { cx, fmtDate, useReveal } = window;

  function SectionIndex({ section, go }) {
    const ref = useReveal();
    const { ArticleRow } = window;
    const meta = window.SECTIONS[section];
    const items = window.ARTICLES.filter((a) => a.section === section)
      .sort((a, b) => new Date(b.date) - new Date(a.date));
    const Ico = section === "techniques" ? window.Icons.Book : window.Icons.Sprout;

    return (
      <div className="page container container-tight" ref={ref} style={{ paddingTop: "2.6rem", paddingBottom: "4rem" }}>
        <div className="row reveal" style={{ gap: "1rem", marginBottom: "1.4rem" }}>
          <span style={{ width: "3rem", height: "3rem", borderRadius: ".8rem", background: "var(--brand-soft)", color: "color-mix(in srgb, var(--brand) 70%, hsl(var(--foreground)))", display: "grid", placeContent: "center", flex: "none" }}><Ico size={26} /></span>
          <div className="col" style={{ gap: ".2rem" }}>
            <h1 className="h1">{meta.label}</h1>
            <span className="muted" style={{ fontSize: ".9rem" }}>{items.length} {items.length === 1 ? "entry" : "entries"}</span>
          </div>
        </div>
        <p className="lead reveal" style={{ marginBottom: "2rem", textWrap: "pretty" }}>{meta.blurb}</p>

        <div className="card reveal" style={{ overflow: "hidden" }}>
          {items.map((a, idx) => <ArticleRow key={a.slug} article={a} go={go} last={idx === items.length - 1} />)}
        </div>
      </div>
    );
  }

  function ArticlePage({ section, slug, go }) {
    const ref = useReveal();
    const { MD, ArticleRow } = window;
    const { ChevronLeft, Clock, ArrowRight } = window.Icons;
    const article = window.ARTICLES.find((a) => a.slug === slug && a.section === section) || window.ARTICLES.find((a) => a.slug === slug);
    useEffect(() => { window.scrollTo(0, 0); }, [slug]);
    const meta = window.SECTIONS[article.section];
    const more = window.ARTICLES.filter((a) => a.section === article.section && a.slug !== article.slug).slice(0, 2);

    return (
      <div className="page container container-tight" ref={ref} style={{ paddingTop: "1.5rem", paddingBottom: "4rem" }}>
        <button className="btn btn-ghost btn-sm" style={{ paddingLeft: ".4rem", marginBottom: "1.4rem" }} onClick={() => go({ name: "section", section: article.section })}>
          <ChevronLeft size={16} /> {meta.label}
        </button>

        <article>
          <header className="col reveal" style={{ gap: "1rem", marginBottom: "2rem" }}>
            <span className="badge badge-brand" style={{ alignSelf: "flex-start" }}>{meta.label}</span>
            <h1 className="h1" style={{ maxWidth: 720 }}>{article.title}</h1>
            <p className="lead" style={{ textWrap: "pretty" }}>{article.summary}</p>
            <div className="row muted" style={{ gap: ".7rem", fontSize: ".85rem" }}>
              <span className="row" style={{ gap: ".35rem" }}><Clock size={14} />{article.readMins} min read</span>
              <span>·</span><span>{fmtDate(article.date)}</span>
            </div>
            <hr className="sep" style={{ marginTop: ".5rem" }} />
          </header>

          <div className="prose reveal">
            <MD text={article.body} />
          </div>
        </article>

        {more.length > 0 && (
          <div className="reveal" style={{ marginTop: "3.5rem" }}>
            <h2 className="h3" style={{ marginBottom: "1rem" }}>More {meta.label.toLowerCase()}</h2>
            <div className="card" style={{ overflow: "hidden" }}>
              {more.map((a, idx) => <ArticleRow key={a.slug} article={a} go={go} last={idx === more.length - 1} />)}
            </div>
          </div>
        )}
      </div>
    );
  }

  function LegalPage({ which, go }) {
    const { ChevronLeft } = window.Icons;
    const title = which === "impressum" ? "Impressum" : "Data Protection";
    return (
      <div className="page container container-tight" style={{ paddingTop: "1.5rem", paddingBottom: "5rem" }}>
        <button className="btn btn-ghost btn-sm" style={{ paddingLeft: ".4rem", marginBottom: "1.4rem" }} onClick={() => go({ name: "home" })}>
          <ChevronLeft size={16} /> Home
        </button>
        <h1 className="h1" style={{ marginBottom: "1rem" }}>{title}</h1>
        <div className="prose">
          <p>Currently this site is only used privately.</p>
        </div>
      </div>
    );
  }

  Object.assign(window, { SectionIndex, ArticlePage, LegalPage });
})();