/* app-smartdocs.jsx — "Smart Documents": Confluence macros that pull live Jira data. */

const SDOC_FEATS = [
{
  icon: 'Code',
  title: 'Confluence macros with dedicated layouts included',
  body: 'Macros sit inside your templates and pull formatted Jira content such as requirements, risks and tests onto the page.'
},
{
  icon: 'Lock',
  title: 'Pull on demand, locked on release',
  body: 'Macros pull only when you ask. If Jira has newer content, the document flags it as outdated; released versions stay locked.'
},
{
  icon: 'Sparkles',
  title: 'Rovo agents draft and review',
  body: 'Qity\u2019s Rovo agents help write the rest of the document and review it against your standards.'
}];


const SDOC_REFS = [
{ id: 'DOC-564', title: 'Baby monitor \u2014 intended use' },
{ id: 'DOC-595', title: 'IEC 62304' },
{ id: 'DOC-1323', title: 'ISO 14971' }];


function SDocAva({ src, badge }) {
  return (
    <span className="cdoc-ava">
      <img src={src} alt="" loading="lazy" />
      {badge && <span className="cdoc-ava-badge"><Ico name="Check" /></span>}
    </span>);

}

function ConfluenceDoc() {
  return (
    <div className="window cdoc" role="img" aria-label="A controlled document in Confluence with Qity macros pulling data from Jira">
      <div className="cdoc-page">
        <div className="cdoc-title">Product Requirements — Baby monitor</div>

        {/* ---- Document Control macro ---- */}
        <div className="cdoc-macro cdoc-dc">
          <div className="cdoc-dc-top">
            <span className="cdoc-chev"><Ico name="ChevronRight" /></span>
            <span className="cdoc-dc-icon"><Ico name="FileCheck" /></span>
            <span className="cdoc-bread"><b>DC-23</b> <Ico name="ArrowRight" /> <b>DOC-2</b> &middot; Version 2</span>
            <span className="cdoc-dc-tools">
              <span className="loz loz-yellow cdoc-status">QA approval <Ico name="ChevronDown" /></span>
            </span>
          </div>
          <div className="cdoc-dc-people">
            <div className="cdoc-pgroup">
              <span className="cdoc-plabel">Owner</span>
              <SDocAva src="assets/doc-avatar-1.png" />
            </div>
            <div className="cdoc-pgroup">
              <span className="cdoc-plabel">Authors</span>
              <SDocAva src="assets/doc-avatar-2.png" />
            </div>
            <div className="cdoc-pgroup">
              <span className="cdoc-plabel">Approvers</span>
              <span className="cdoc-stack">
                <SDocAva src="assets/doc-avatar-3.png" badge />
                <SDocAva src="assets/doc-avatar-4.png" badge />
                <SDocAva src="assets/doc-avatar-5.png" />
              </span>
            </div>
          </div>
        </div>

        {/* ---- Purpose ---- */}
        <div className="cdoc-h">Purpose</div>
        <p className="cdoc-text">This document lists the requirements for the Baby Monitor product.

        </p>

        {/* ---- References (Table of References macro) ---- */}
        <div className="cdoc-h">References</div>
        <div className="cdoc-macro cdoc-ref">
          <div className="cdoc-reftable">
            <div className="cdoc-refrow cdoc-refhead"><span>Doc ID</span><span>Title</span></div>
            {SDOC_REFS.map((r) =>
            <div className="cdoc-refrow" key={r.id}><span className="cdoc-refid">{r.id}</span><span>{r.title}</span></div>
            )}
          </div>
          <div className="cdoc-reffind">
            <span className="cdoc-input">Find document&hellip;</span>
            <span className="cdoc-cancel">Cancel</span>
            <span className="cdoc-linkbtn"><Ico name="Link" /></span>
          </div>
        </div>

        {/* ---- Training requirements (Training app macro) ---- */}
        <div className="cdoc-h">Product requirements</div>
        <div className="cdoc-macro cdoc-app">
          <div className="cdoc-approw"><span className="cdoc-refid">BM-112</span><span>Rechargeable battery</span></div>
          <div className="cdoc-approw"><span className="cdoc-refid">BM-118</span><span>WiFi connectivity</span></div>
        </div>
      </div>
    </div>);

}

function AbstractDoc() {
  return (
    <div className="window cdoc adoc" role="img" aria-label="An abstract representation of a controlled document with Qity macros">
      <div className="adoc-page">
        <span className="adoc-title" />

        {/* Document Control macro */}
        <div className="adoc-macro adoc-dc">
          <span className="adoc-ic"><Ico name="FileCheck" /></span>
          <span className="loz loz-yellow adoc-loz">QA approval</span>
          <span className="adoc-avas"><span className="adoc-ava" /><span className="adoc-ava" /><span className="adoc-ava" /></span>
        </div>

        <div className="adoc-text"><span className="adoc-bar w100" /><span className="adoc-bar w75" /></div>

        {/* Table of References macro */}
        <div className="adoc-macro adoc-block">
          <span className="adoc-tag adoc-tag-b"><Ico name="Link" /></span>
          <div className="adoc-row"><span className="adoc-chip adoc-chip-b" /><span className="adoc-bar w70" /></div>
          <div className="adoc-row"><span className="adoc-chip adoc-chip-b" /><span className="adoc-bar w55" /></div>
          <div className="adoc-row"><span className="adoc-chip adoc-chip-b" /><span className="adoc-bar w65" /></div>
        </div>

        {/* Requirements macro */}
        <div className="adoc-macro adoc-block">
          <span className="adoc-tag adoc-tag-t"><Ico name="ClipboardCheck" /></span>
          <div className="adoc-row"><span className="adoc-chip adoc-chip-g" /><span className="adoc-bar w60" /></div>
          <div className="adoc-row"><span className="adoc-chip adoc-chip-g" /><span className="adoc-bar w50" /></div>
        </div>
      </div>
    </div>);

}

function AnimatedDoc() {
  const ref = React.useRef(null);
  const [play, setPlay] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {setPlay(true);return;}
    if (!('IntersectionObserver' in window)) {setPlay(true);return;}
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {if (en.isIntersecting) {setPlay(true);io.disconnect();}});
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const blocks = [
    { c: 'b', label: 'Table of references', icon: 'jira-document', rows: 3 },
    { c: 'p', label: 'Equipment', icon: 'jira-equipment', rows: 2 },
    { c: 'g', label: 'Tests', icon: 'jira-test', rows: 3 },
    { c: 'r', label: 'Defects', icon: 'jira-defect', rows: 2 }];

  return (
    <div ref={ref} className={'window cdoc adoc andoc' + (play ? ' is-playing' : '')} role="img" aria-label="A Test Report document with content sliding in from Jira">
      <div className="adoc-page">
        <div className="andoc-title">Test Report</div>

        {/* Document Control macro stays pinned at the top */}
        <div className="adoc-macro adoc-dc">
          <span className="loz adoc-loz andoc-docid">DOC-352</span>
          <span className="adoc-avas">
            <span className="adoc-ava"><img src="assets/doc-avatar-1.png" alt="" /><span className="adoc-ava-chk andoc-chk-1"><Ico name="Check" /></span></span>
            <span className="adoc-ava"><img src="assets/doc-avatar-2.png" alt="" /><span className="adoc-ava-chk andoc-chk-2"><Ico name="Check" /></span></span>
            <span className="adoc-ava"><img src="assets/doc-avatar-3.png" alt="" /><span className="adoc-ava-chk andoc-chk-3"><Ico name="Check" /></span></span>
          </span>
          <span className="andoc-status">
            <span className="loz loz-yellow adoc-loz andoc-st-appr">Approval</span>
            <span className="loz loz-gry adoc-loz andoc-st-draft">Draft</span>
            <span className="loz loz-grn adoc-loz andoc-st-rel">Released</span>
          </span>
        </div>

        {/* content streaming in from Jira */}
        {blocks.map((b, i) =>
        <div className={'andoc-item andoc-sl' + i} key={b.label}>
            <div className="andoc-h">{b.label}</div>
            <div className="adoc-macro andoc-box">
              <span className="andoc-lock"><Ico name="Lock" /></span>
              {Array.from({ length: b.rows }).map((_, r) =>
            <div className="adoc-row" key={r}><img className="andoc-rowicon" src={asset('assets/' + b.icon + '.png')} alt="" /><span className={'adoc-bar w' + [70, 55, 65][r % 3]} /></div>
            )}
            </div>
          </div>
        )}
      </div>
    </div>);

}

function SmartDocs({ tweaks }) {
  const docStyle = tweaks && tweaks.docStyle || 'Detailed';
  const DocVisual = docStyle === 'Abstract' ? AbstractDoc : docStyle === 'Animated' ? AnimatedDoc : ConfluenceDoc;
  return (
    <section className="sec sdocs" id="documents">
      <div className="container sdocs-grid">
        <div className="sdocs-copy">
          <h2 className="h-sec">Document templates, wired into Jira</h2>
          <p className="lead" style={{ marginTop: 16 }}>Confluence macros pull Jira content into professionally crafted document templates. Every document is built straight from the quality data behind it.

          </p>
          <div className="sdocs-feats">
            {SDOC_FEATS.map((f, i) =>
            <div className="sdoc-feat reveal" key={f.title} style={{ transitionDelay: i * 0.07 + 's' }}>
              <span className="sdoc-ico"><Ico name={f.icon} /></span>
              <div className="sdoc-feat-body">
                <h3>{f.title}</h3>
                <p>{f.body}</p>
              </div>
            </div>
            )}
          </div>
        </div>
        <div className={'sdocs-visual' + (docStyle === 'Animated' ? '' : ' reveal d1')}>
          <DocVisual />
        </div>
      </div>
    </section>);

}

Object.assign(window, { SmartDocs, ConfluenceDoc, AbstractDoc, AnimatedDoc });