/* EnableUnion — page components */

/* ─────────── Hero section ─────────── */

function HeroSection({ t }) {
  const h = t.home;
  return (
    <section className="hero">
      <div className="container hero__inner">
        <div>
          <div className="hero__eyebrow">{h.eyebrow}</div>
          <h1 className="hero__title">
            {h.title_a}<br /><em>{h.title_b}</em>
          </h1>
          <p className="hero__lede">{h.lede}</p>
          <div className="hero__meta">
            <span><strong>{h.meta.founded_val}</strong> · {h.meta.founded}</span>
            <span><strong>{h.meta.siege_val}</strong> · {h.meta.siege}</span>
            <span><strong>{h.meta.portfolio_val}</strong> · {h.meta.portfolio}</span>
          </div>
        </div>
        <div className="hero__ornament">
          <Crest letter={h.crest_letter} />
        </div>
      </div>
    </section>
  );
}

/* ─────────── About / mission section ─────────── */

function AboutSection({ t, num }) {
  const a = t.about;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-head__num">
            {a.eyebrow}
            <strong>{num || "Chapter I"}</strong>
          </div>
          <h2 className="section-head__title">
            {a.title_a} <em>{a.title_b}</em>
          </h2>
        </div>
        <div className="mission">
          <div>
            <div className="hero__eyebrow" style={{marginBottom: "16px"}}>{a.lede_intro}</div>
            <p className="mission__lede"><em>“</em>{a.lede}<em>”</em></p>
          </div>
          <div className="mission__body">
            {a.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
        <div className="pillars">
          {a.pillars.map((p, i) => (
            <div className="pillar" key={i}>
              <div className="pillar__num">— {p.num} —</div>
              <h3 className="pillar__title">{p.title}</h3>
              <p className="pillar__body">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Products section ─────────── */

function ProductCard({ p }) {
  return (
    <article className="product" data-product={p.slug}>
      <div className="product__meta">
        <span>{p.meta_left}</span>
        <span>{p.meta_right}</span>
      </div>
      <div className={"product__image product__image--" + (p.slug || "default")}>
        {p.image && <img src={p.image} alt={p.image_label} />}
      </div>
      <h3 className="product__name">{p.name}</h3>
      <p className="product__tagline">{p.tagline}</p>
      <p className="product__desc">{p.desc}</p>
      <ul className="product__features">
        {p.features.map((f, i) => <li key={i}>{f}</li>)}
      </ul>
      <div className="product__cta">→ {p.cta}</div>
    </article>
  );
}

function ProductsSection({ t, num, alt }) {
  const p = t.products;
  return (
    <section className={"section" + (alt ? " section--alt" : "")}>
      <div className="container">
        <div className="section-head">
          <div className="section-head__num">
            {p.eyebrow}
            <strong>{num || "Chapter II"}</strong>
          </div>
          <h2 className="section-head__title">
            {p.title_a} <em>{p.title_b}</em>
          </h2>
        </div>
        <p className="hero__lede" style={{maxWidth: "70ch", marginBottom: "var(--s-7)"}}>
          {p.lede}
        </p>
        <div className="products">
          <ProductCard p={{ ...p.bloomoo, slug: "bloomoo", image: "assets/bloomoo.png" }} />
          <ProductCard p={{ ...p.lastribe, slug: "lastribe", image: "assets/lastribe.png" }} />
        </div>
      </div>
    </section>
  );
}

/* ─────────── Contact section ─────────── */

function ContactSection({ t, num }) {
  const c = t.contact;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-head__num">
            {c.eyebrow}
            <strong>{num || "Chapter III"}</strong>
          </div>
          <h2 className="section-head__title">&nbsp;</h2>
        </div>
        <div className="contact">
          <div>
            <h3 className="contact__title">{c.title_a}<br /><em>{c.title_b}</em></h3>
            <p className="hero__lede" style={{marginTop: "var(--s-5)", maxWidth:"46ch"}}>{c.lede}</p>
          </div>
          <div className="contact__details">
            {c.rows.map((r, i) => (
              <div className="contact__row" key={i}>
                <span>{r.label}</span>
                <span>
                  {r.href
                    ? <a href={r.href}>{r.value}</a>
                    : r.value}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Pages: home, about, products, contact ─────────── */

function HomePage({ t }) {
  return (
    <div className="fade-in">
      <HeroSection t={t} />
      <AboutSection t={t} num="Chapter I" />
      <ProductsSection t={t} num="Chapter II" alt />
      <ContactSection t={t} num="Chapter III" />
    </div>
  );
}

function PageHeader({ eyebrow, title_a, title_b, sub, updated }) {
  return (
    <section className="page-title">
      <div className="container">
        <div className="page-title__eyebrow">{eyebrow}</div>
        <h1>{title_a} <em>{title_b}</em></h1>
        {sub && <p className="page-title__sub">{sub}</p>}
        {updated && <div className="stamp">{updated}</div>}
      </div>
    </section>
  );
}

function AboutPage({ t }) {
  return (
    <div className="fade-in">
      <PageHeader
        eyebrow={t.about.eyebrow}
        title_a={t.about.title_a}
        title_b={t.about.title_b}
      />
      <AboutSection t={t} num="Chapter I" />
      <ContactSection t={t} num="Chapter II" />
    </div>
  );
}

function ProductsPage({ t }) {
  return (
    <div className="fade-in">
      <PageHeader
        eyebrow={t.products.eyebrow}
        title_a={t.products.title_a}
        title_b={t.products.title_b}
      />
      <ProductsSection t={t} num="Portfolio" />
    </div>
  );
}

function ContactPage({ t }) {
  return (
    <div className="fade-in">
      <PageHeader
        eyebrow={t.contact.eyebrow}
        title_a={t.contact.title_a}
        title_b={t.contact.title_b}
      />
      <ContactSection t={t} num="Address" />
    </div>
  );
}

/* ─────────── Legal article shell ─────────── */

function slugify(s, i) {
  const base = (s || "").toString()
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-|-$/g, "");
  return (base || "section") + "-" + i;
}

function LegalArticle({ data }) {
  return (
    <article className="article">
      <div className="container article__layout">
        <aside className="toc" aria-label="Sections">
          <h4>Sections</h4>
          <ol>
            {data.toc.map((label, i) => (
              <li key={i}>
                <a href={"#" + window.location.hash.slice(1).split('?')[0] + "?s=" + slugify(label, i)}
                   onClick={(e) => {
                     e.preventDefault();
                     const el = document.getElementById(slugify(label, i));
                     if (el) window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: "smooth"});
                   }}>
                  {label}
                </a>
              </li>
            ))}
          </ol>
        </aside>
        <div className="article-body">
          {data.sections.map((s, i) => {
            const id = slugify(data.toc[i] || s.title, i);
            return (
              <div key={i}>
                <h2 id={id}>
                  <span className="num">{s.num}</span>
                  <span>{s.title}</span>
                </h2>
                {(s.body || []).map((p, j) => <p key={"p"+j}>{p}</p>)}
                {s.list && (
                  <ul>
                    {s.list.map((li, j) => <li key={"l"+j}>{li}</li>)}
                  </ul>
                )}
                {s.dl && (
                  <dl className="dl">
                    {s.dl.map(([k, v], j) => (
                      <React.Fragment key={"d"+j}>
                        <dt>{k}</dt>
                        <dd>{v}</dd>
                      </React.Fragment>
                    ))}
                  </dl>
                )}
                {(s.after || []).map((p, j) => <p key={"a"+j}>{p}</p>)}
              </div>
            );
          })}
        </div>
      </div>
    </article>
  );
}

function LegalPage({ t, kind }) {
  const data = t[kind];
  return (
    <div className="fade-in">
      <PageHeader
        eyebrow={data.eyebrow}
        title_a={data.title_a}
        title_b={data.title_b}
        sub={data.sub}
        updated={data.updated}
      />
      <LegalArticle data={data} />
    </div>
  );
}

/* expose */
Object.assign(window, {
  HomePage, AboutPage, ProductsPage, ContactPage, LegalPage,
});