/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer, DOCS */
/* docs.jsx — Documentation page renderer. */

const { useEffect: useEffectDocs, useState: useStateDocs, useRef: useRefDocs } = React;

/* HTML helper — copy contains light inline markup (<strong>, <em>, <code>, <a>) */
const html = (s) => ({ __html: s });

/* ── Sidebar TOC with scroll-spy ────────────────────────────── */

const TOC = ({ labels }) => {
  const [active, setActive] = useStateDocs(0);

  useEffectDocs(() => {
    const sections = labels.map((_, i) => document.getElementById(`s${i + 1}`));
    const onScroll = () => {
      const y = window.scrollY + 140;
      let idx = 0;
      sections.forEach((sec, i) => { if (sec && sec.offsetTop <= y) idx = i; });
      setActive(idx);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [labels]);

  return (
    <aside className="tm-docs-toc" aria-label="Table of contents">
      <span className="tm-docs-toc-label">Contents</span>
      <ol>
        {labels.map((l, i) => (
          <li key={i}>
            <a href={`#s${i + 1}`} className={active === i ? 'is-active' : ''}>
              <span className="tm-docs-toc-num">{String(i + 1).padStart(2, '0')}</span>
              <span>{l}</span>
            </a>
          </li>
        ))}
      </ol>
    </aside>
  );
};

/* ── Section shell ──────────────────────────────────────────── */

const Section = ({ n, label, children }) => (
  <section id={`s${n}`} className="tm-docs-section">
    <span className="tm-docs-section-num">{String(n).padStart(2, '0')} · {label}</span>
    <h2 className="tm-docs-h2" dangerouslySetInnerHTML={html(label)} />
    {children}
  </section>
);

/* ── Callout ────────────────────────────────────────────────── */

const Callout = ({ children, icon = 'ph-shield-check' }) => (
  <div className="tm-docs-callout">
    <i className={`ph-bold ${icon} tm-docs-callout-icon`}></i>
    <div className="tm-docs-callout-body" dangerouslySetInnerHTML={html(children)} />
  </div>
);

/* ── Step card ──────────────────────────────────────────────── */

const Step = ({ n, step }) => (
  <article className="tm-docs-step">
    <span className="tm-docs-step-num">{n}</span>
    <div className="tm-docs-step-body">
      <h4 className="tm-docs-step-title">{step.title}</h4>
      {step.body && <p dangerouslySetInnerHTML={html(step.body)} />}
      {step.listLabel && <p style={{ marginTop: 0 }}><strong style={{ color: 'var(--ink)' }}>{step.listLabel}</strong></p>}
      {step.list && (
        <ul>
          {step.list.map((it, i) => <li key={i} dangerouslySetInnerHTML={html(it)} />)}
        </ul>
      )}
      {step.quote && (
        <blockquote style={{
          margin: '10px 0', padding: '10px 14px',
          borderLeft: '3px solid var(--accent)',
          background: 'color-mix(in oklab, var(--accent) 4%, transparent)',
          borderRadius: '0 8px 8px 0',
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: '14.5px', color: 'var(--ink)', lineHeight: 1.5
        }}>{step.quote}</blockquote>
      )}
      {step.extra && <p dangerouslySetInnerHTML={html(step.extra)} />}
      {step.options && step.options.map((opt, i) => (
        <div key={i} className="tm-docs-option">
          <span className="tm-docs-option-tag">{opt.tag}</span>
          <p className="tm-docs-option-title">{opt.title}</p>
          <ol>
            {opt.list.map((it, j) => <li key={j} dangerouslySetInnerHTML={html(it)} />)}
          </ol>
        </div>
      ))}
    </div>
  </article>
);

/* ── Tutorial cluster (used in §5) ──────────────────────────── */

const Tutorial = ({ title, lede, steps, partA, partB, partBalt, partC }) => (
  <>
    <h3>{title}</h3>
    {lede && <p>{lede}</p>}
    {steps && (
      <div className="tm-docs-steps">
        {steps.map((step, i) => <Step key={i} n={i + 1} step={step} />)}
      </div>
    )}
    {[partA, partB, partBalt, partC].filter(Boolean).map((part, i) => (
      <div key={i} className="tm-docs-option" style={{ marginTop: i === 0 ? 16 : 12 }}>
        <span className="tm-docs-option-tag">{part.tag}</span>
        <p className="tm-docs-option-title">{part.title}</p>
        <ol>
          {part.list.map((it, j) => <li key={j} dangerouslySetInnerHTML={html(it)} />)}
        </ol>
      </div>
    ))}
  </>
);

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

const DocsApp = () => {
  const { lang } = useLang();
  const d = DOCS[lang];

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

        {/* Body grid */}
        <div className="tm-container">
          <div className="tm-docs-body">
            <TOC labels={d.toc} />

            <div className="tm-docs-main">
              {/* 1. What is Teramot */}
              <Section n={1} label={d.toc[0]}>
                <p className="tm-docs-lede">{d.s1.lede}</p>
                {d.s1.body.map((p, i) => <p key={i}>{p}</p>)}
                <h4>{d.s1.designedForLabel}</h4>
                <ul>
                  {d.s1.designedFor.map((it, i) => <li key={i}>{it}</li>)}
                </ul>
                <Callout icon="ph-shield-check">{d.s1.callout}</Callout>
              </Section>

              {/* 2. How it works */}
              <Section n={2} label={d.toc[1]}>
                <p className="tm-docs-lede">{d.s2.lede}</p>
                <div className="tm-docs-steps">
                  {d.s2.steps.map((step, i) => <Step key={i} n={i + 1} step={step} />)}
                </div>
                <h4>{d.s2.compareLabel}</h4>
                {d.s2.compareLines.map((line, i) => (
                  <p key={i}>
                    <strong>{line[0]}:</strong> <span dangerouslySetInnerHTML={html(line[1])} />
                  </p>
                ))}
              </Section>

              {/* 3. Key concepts */}
              <Section n={3} label={d.toc[2]}>
                <p className="tm-docs-lede">{d.s3.lede}</p>
                <div className="tm-docs-concepts">
                  {d.s3.concepts.map((cc, i) => (
                    <div key={i} className="tm-docs-concept">
                      <h4 className="tm-docs-concept-title">{cc.title}</h4>
                      <p className="tm-docs-concept-body" dangerouslySetInnerHTML={html(cc.body)} />
                    </div>
                  ))}
                </div>
              </Section>

              {/* 4. Sources */}
              <Section n={4} label={d.toc[3]}>
                <p className="tm-docs-lede">{d.s4.lede}</p>
                <div className="tm-docs-sources">
                  {d.s4.groups.map((g, i) => (
                    <div key={i} className="tm-docs-source-group">
                      <span className="tm-docs-source-label">{g.label}</span>
                      <div className="tm-docs-source-pills">
                        {g.items.map((it, j) => (
                          <span key={j} className="tm-docs-source-pill">{it}</span>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
                <p dangerouslySetInnerHTML={html(d.s4.footer)} />
              </Section>

              {/* 5. How to use */}
              <Section n={5} label={d.toc[4]}>
                <p className="tm-docs-lede">{d.s5.lede}</p>

                <Tutorial title={d.s5.t1Title} steps={d.s5.t1} />

                <Tutorial
                  title={d.s5.t2Title}
                  lede={d.s5.t2Lede}
                  partA={d.s5.t2A}
                  partB={d.s5.t2B}
                  partBalt={d.s5.t2BAlt}
                  partC={d.s5.t2C}
                />

                <Tutorial title={d.s5.t3Title} lede={d.s5.t3Lede} steps={d.s5.t3} />
              </Section>

              {/* 6. Pricing */}
              <Section n={6} label={d.toc[5]}>
                <p className="tm-docs-lede">{d.s6.lede}</p>
                <ul>
                  {d.s6.includes.map((it, i) => <li key={i}>{it}</li>)}
                </ul>
                <div className="tm-docs-plans">
                  {d.s6.plans.map((p, i) => (
                    <div key={i} className="tm-docs-plan">
                      <div className="tm-docs-plan-head">
                        <span className="tm-docs-plan-name">{p.name}</span>
                        <span className="tm-docs-plan-price">{p.price}</span>
                      </div>
                      <p className="tm-docs-plan-sub">{p.sub}</p>
                    </div>
                  ))}
                </div>
                <h4>{d.s6.limitsTitle}</h4>
                <ul>
                  {d.s6.limits.map((it, i) => <li key={i} dangerouslySetInnerHTML={html(it)} />)}
                </ul>
                <div className="tm-docs-crosslink">
                  <div>
                    <p className="tm-docs-crosslink-text">{d.s6.crosslinkText}</p>
                    <p className="tm-docs-crosslink-sub">{d.s6.crosslinkSub}</p>
                  </div>
                  <a className="tm-btn tm-btn-dark tm-btn-sm" href="pricing.html">
                    {d.s6.crosslinkBtn}
                    <i className="ph-bold ph-arrow-right"></i>
                  </a>
                </div>
              </Section>

              {/* 7. Security */}
              <Section n={7} label={d.toc[6]}>
                <p className="tm-docs-lede">{d.s7.lede}</p>
                <h4>{d.s7.propsLabel}</h4>
                <ul>
                  {d.s7.props.map((it, i) => <li key={i} dangerouslySetInnerHTML={html(it)} />)}
                </ul>
                <h4>{d.s7.onPremTitle}</h4>
                <p>{d.s7.onPremBody}</p>
              </Section>

              {/* 8. FAQ */}
              <Section n={8} label={d.toc[7]}>
                <div className="tm-docs-faq">
                  {d.s8.faqs.map((f, i) => (
                    <details key={i}>
                      <summary>{f.q}</summary>
                      <div className="tm-docs-faq-body">{f.a}</div>
                    </details>
                  ))}
                </div>

                <div className="tm-docs-crosslink" style={{ marginTop: 40 }}>
                  <div>
                    <p className="tm-docs-crosslink-text">{d.finalCrosslink.text}</p>
                    <p className="tm-docs-crosslink-sub">{d.finalCrosslink.sub}</p>
                  </div>
                  <a className="tm-btn tm-btn-dark tm-btn-sm" href="mailto:info@teramot.com">
                    {d.finalCrosslink.btn}
                    <i className="ph-bold ph-arrow-right"></i>
                  </a>
                </div>
              </Section>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
};

const DocsRoot = () => (
  <LangProvider>
    <DocsApp />
  </LangProvider>
);

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