/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */
/* tutorials.jsx — Tutorials page: two Arcade walkthroughs, stacked.
   Each item lives in i18n.jsx under `tutorials.items` with an
   `arcadeSrc` (Arcade embed URL). When empty, a styled placeholder
   renders so the page never breaks. */

/* ── Arcade embed (responsive 16:9) ─────────────────────────── */

const ArcadeEmbed = ({ src, title, embedPending, embedPendingSub }) => {
  if (!src) {
    return (
      <div className="tm-tut-embed tm-tut-embed-pending" aria-label={embedPending}>
        <div className="tm-tut-embed-motif" aria-hidden="true">
          <span className="tm-tut-pill" />
          <span className="tm-tut-disc tm-tut-disc-blue" />
          <span className="tm-tut-disc tm-tut-disc-mint" />
        </div>
        <div className="tm-tut-embed-play" aria-hidden="true">
          <i className="ph-fill ph-play"></i>
        </div>
        <div className="tm-tut-embed-caption">
          <span className="tm-tut-embed-pending-label">{embedPending}</span>
          <span className="tm-tut-embed-pending-sub">{embedPendingSub}</span>
        </div>
      </div>
    );
  }
  return (
    <div className="tm-tut-embed">
      <iframe
        src={src}
        title={title}
        frameBorder="0"
        loading="lazy"
        webkitallowfullscreen="true"
        mozallowfullscreen="true"
        allowFullScreen
        allow="clipboard-write; fullscreen"
      />
    </div>
  );
};

/* ── Tutorial block ─────────────────────────────────────────── */

const TutorialBlock = ({ item, embedPending, embedPendingSub }) => (
  <article className="tm-tut-block" id={item.id}>
    <div className="tm-tut-block-head">
      <span className="tm-tut-block-num">{item.number}</span>
      <div className="tm-tut-block-head-text">
        <h2 className="tm-tut-block-title">{item.title}</h2>
        <p className="tm-tut-block-lede">{item.lede}</p>
      </div>
    </div>
    <ArcadeEmbed
      src={item.arcadeSrc}
      title={item.title}
      embedPending={embedPending}
      embedPendingSub={embedPendingSub}
    />
  </article>
);

/* ── Main app ───────────────────────────────────────────────── */

const TutorialsApp = () => {
  const { c } = useLang();
  const t = c.tutorials;

  return (
    <>
      <NavBar current="tutorials" />
      <main className="tm-tut">
        {/* Hero */}
        <header className="tm-tut-hero">
          <div className="tm-container">
            <span className="tm-tut-eyebrow">{t.heroEyebrow}</span>
            <h1 className="tm-tut-h1">{t.heroH1}</h1>
            <p className="tm-tut-hero-sub">{t.heroSub}</p>
          </div>
        </header>

        {/* Tutorials stack */}
        <div className="tm-container tm-tut-body">
          <div className="tm-tut-stack">
            {t.items.map((item) => (
              <TutorialBlock
                key={item.id}
                item={item}
                embedPending={t.embedPending}
                embedPendingSub={t.embedPendingSub}
              />
            ))}
          </div>

          {/* Final CTA */}
          <div className="tm-tut-crosslink">
            <div>
              <p className="tm-tut-crosslink-text">{t.finalCta.text}</p>
              <p className="tm-tut-crosslink-sub">{t.finalCta.sub}</p>
            </div>
            <a className="tm-btn tm-btn-dark tm-btn-sm" href="mailto:info@teramot.com?subject=Tutorial%20request">
              {t.finalCta.btn}
              <i className="ph-bold ph-arrow-right"></i>
            </a>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
};

const TutorialsRoot = () => (
  <LangProvider>
    <TutorialsApp />
  </LangProvider>
);

ReactDOM.createRoot(document.getElementById('root')).render(<TutorialsRoot />);