/* NutriDMS, Documentation, FAQ, Support */
const { useState: useDState, useEffect: useDEffect, useRef: useDRef } = React;

const _DocsCtx = { role: "super-admin", page: "docs", setPage: () => {}, lang: "en", setLang: () => {}, openCmd: () => {}, openNotif: () => {} };

/* ─── Mini Nav ─── */
function DocsNav() {
  return (
    <div className="docs-nav">
      <div className="inner">
        <a href="Landing.html" className="ld-logo">
          <NutriHoriz height={34} />
        </a>
        <div className="docs-nav-links">
          <a href="Landing.html">Home</a>
          <a href="Landing.html#pricing">Pricing</a>
          <a href="documentation.html" className="active">Docs</a>
          <a href="security.html">Security</a>
          <a href="documentation.html#faq">FAQ</a>
          <a href="documentation.html#support">Support</a>
          <a href="documentation.html#status">Status</a>
        </div>
        <a href="book-demo.html" className="btn primary sm"><Icon name="calendar" size={13} stroke={2.4} /> Book Demo</a>
        <LangSwitch />
        <ThemeToggle />
      </div>
    </div>);

}

/* ─── Hero ─── */
function DocsHero() {
  return (
    <div className="docs-hero">
      <div className="inner">
        <span className="ld-eyebrow"><Icon name="book-open" size={12} stroke={2.5} /> Help Center</span>
        <h1>How can we help?</h1>
        <p>Documentation, technical guides, FAQ, and 24/7 support for NutriDMS enterprise customers and Loraa.ai operators.</p>
        <div className="docs-search">
          <Icon name="search" size={18} stroke={2.2} style={{ color: "var(--gray-500)" }} />
          <input placeholder="Search the documentation, try 'SSO', 'Loraa', 'audit log', 'rate limit'…" />
          <span className="kbd">⌘ K</span>
        </div>
        <div className="docs-quick">
          {[
          { ic: "book-open", t: "Getting started", d: "Set up your workspace, invite your team, import recipes.", href: "#getting-started" },
          { ic: "lightbulb", t: "Loraa.ai guide", d: "Train, tune, and trust Loraa inside your workflows.", href: "#laura" },
          { ic: "key-round", t: "SSO & SAML", d: "Connect Okta, Entra ID, Google, or any SAML provider.", href: "#sso" },
          { ic: "life-buoy", t: "Get support", d: "Reach our 24/7 enterprise support team.", href: "#support" }].
          map((c, i) =>
          <a key={i} href={c.href} className="docs-quick-card">
              <div className="ic"><Icon name={c.ic} size={18} stroke={2.2} /></div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </a>
          )}
        </div>
      </div>
    </div>);

}

/* ─── Sidebar TOC ─── */
const SECTIONS = [
{ group: "Get started", items: [
  { id: "getting-started", t: "Getting started", ic: "rocket" },
  { id: "workspaces", t: "Workspaces & teams", ic: "users" },
  { id: "import", t: "Importing recipes", ic: "upload" }]
},
{ group: "Platform", items: [
  { id: "recipes", t: "Recipe management", ic: "chef-hat" },
  { id: "workflows", t: "Workflows & approvals", ic: "git-branch" },
  { id: "audit", t: "Audit logs", ic: "file-clock" }]
},
{ group: "Loraa.ai", items: [
  { id: "laura", t: "Introducing Loraa.ai", ic: "lightbulb" },
  { id: "laura-rules", t: "Custom validation rules", ic: "settings-2" }]
},
{ group: "Admin", items: [
  { id: "sso", t: "SSO / SAML / SCIM", ic: "key-round" },
  { id: "roles", t: "Roles & permissions", ic: "shield" },
  { id: "api", t: "API reference", ic: "code" }]
},
{ group: "Trust", items: [
  { id: "security", t: "Security", ic: "lock" },
  { id: "sla", t: "SLA & uptime", ic: "server" },
  { id: "status", t: "System status", ic: "activity" },
  { id: "changelog", t: "Changelog", ic: "history" }]
},
{ group: "Help", items: [
  { id: "faq", t: "FAQ", ic: "help-circle" },
  { id: "support", t: "Get support", ic: "life-buoy" }]
}];


function DocsTOC({ active }) {
  return (
    <aside className="docs-toc">
      {SECTIONS.map((g, i) =>
      <div key={i} className="docs-toc-group">
          <h4>{g.group}</h4>
          {g.items.map((it) =>
        <a key={it.id} href={`#${it.id}`} className={active === it.id ? "active" : ""}>{it.t}</a>
        )}
        </div>
      )}
    </aside>);

}

/* ─── FAQ ─── */
const FAQS = [
{ q: "How quickly will my account manager respond after I book a demo?",
  a: "Your dedicated NutriDMS account manager will respond within 24 hours of your booking, usually much sooner. You'll receive a confirmation email with calendar invite, a tailored agenda, and pre-demo questionnaire." },
{ q: "Do you offer a free trial?",
  a: "Yes. The Starter and Professional tiers come with a 7-day free trial, no credit card required. Enterprise customers receive a 30-day pilot in a dedicated sandbox workspace." },
{ q: "What is Loraa.ai and is it included?",
  a: "Loraa.ai is our embedded validation, recommendation, and review assistant. She runs inside every workflow, flagging allergen mismatches, sodium drift, rule conflicts, and compliance gaps. Loraa is included from the Professional tier upward, and is available as a paid add-on for Starter." },
{ q: "Can Loraa.ai be trained on our internal nutrition policies?",
  a: "Yes. On the Enterprise tier, Loraa ingests your validation rules, health-tag definitions, and historical reviewer decisions. She adapts her suggestions to your organization's policy posture, without sending data outside your tenant." },
{ q: "How do you handle compliance audits and certifications?",
  a: "NutriDMS is designed with security and auditability in mind, and built for scalable compliance workflows. We provide tamper-evident audit logs, exportable to your SIEM, with configurable retention (7 days to 7 years). Enterprise customers receive a Trust & Compliance pack on request." },
{ q: "What integrations does NutriDMS support?",
  a: "First-class integrations: Okta, Entra ID, Google Workspace (SSO/SCIM); Slack, Microsoft Teams (notifications); Snowflake, BigQuery (data export); Zapier, Make (no-code); REST API with webhooks. Enterprise customers can request bespoke integrations." },
{ q: "Can we self-host NutriDMS?",
  a: "Enterprise customers can deploy in their own VPC (AWS / Azure / GCP) via our private-cloud option. Air-gapped deployments are supported on request, contact your account manager." },
{ q: "How is billing handled?",
  a: "Monthly or annual billing on Starter and Professional tiers. Yearly billing saves 20%. Enterprise contracts are custom, typically annual with quarterly invoicing. We accept ACH, wire, and major credit cards." },
{ q: "What happens to my data if I cancel?",
  a: "You retain full ownership of your data. Upon cancellation, you can export everything (recipes, audit logs, configurations) via the admin panel or API. We delete your data 30 days after cancellation unless you request otherwise." },
{ q: "Do you offer onboarding and training?",
  a: "Professional includes 2 onboarding sessions and async support. Enterprise includes a dedicated implementation manager, multi-week onboarding, role-based training for every team, and a named CSM for the contract term." }];


function FAQItem({ q, a }) {
  const [open, setOpen] = useDState(false);
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span className="ic"><Icon name="help-circle" size={14} stroke={2.4} /></span>
        {q}
        <Icon name="chevron-right" size={18} stroke={2.4} className="chev" />
      </button>
      {open && <div className="faq-a">{a}</div>}
    </div>);

}

/* ─── Right Rail ─── */
function DocsRail() {
  return (
    <aside className="docs-rail">
      <div className="help-card">
        <h6>Need a human?</h6>
        <p>Talk to a NutriDMS account manager, typical response in under 4 hours during business hours.</p>
        <a href="book-demo.html" className="btn primary sm"><Icon name="calendar" size={13} stroke={2.4} /> Book a call</a>
      </div>
      <h5>Quick Links</h5>
      <ul>
        <li><a href="#api"><Icon name="code" size={14} stroke={2.2} /> API Reference</a></li>
        <li><a href="#status"><Icon name="activity" size={14} stroke={2.2} /> System status</a></li>
        <li><a href="#changelog"><Icon name="history" size={14} stroke={2.2} /> Changelog</a></li>
        <li><a href="#security"><Icon name="lock" size={14} stroke={2.2} /> Security &amp; Trust</a></li>
        <li><a href="mailto:support@nutridms.com"><Icon name="mail" size={14} stroke={2.2} /> support@nutridms.com</a></li>
      </ul>
    </aside>);

}

/* ─── Body ─── */
function DocsBody() {
  const [active, setActive] = useDState("getting-started");
  useDEffect(() => {
    const ids = SECTIONS.flatMap((g) => g.items.map((i) => i.id));
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setActive(e.target.id);});
    }, { rootMargin: "-30% 0px -60% 0px", threshold: 0 });
    ids.forEach((id) => {const el = document.getElementById(id);if (el) io.observe(el);});
    return () => io.disconnect();
  }, []);

  return (
    <div className="docs-body">
      <DocsTOC active={active} />
      <main className="docs-main">

        <section id="getting-started" className="docs-section">
          <h2><span className="ic-h"><Icon name="rocket" size={20} stroke={2.2} /></span> Getting started</h2>
          <p className="sub">Get from signup to first published recipe in 15 minutes. This guide walks you through workspace setup, team invites, and importing your first batch of recipes.</p>
          <h3>1. Create your workspace</h3>
          <p>Sign up at <a className="docs-link" href="index.html">nutridms.com</a> and create a workspace. Workspaces are isolated environments, recipes, users, and audit logs are scoped to the workspace. Most organizations use one workspace per business unit.</p>
          <h3>2. Invite your team</h3>
          <p>Go to <strong>Settings → Members</strong> and invite teammates by email. Assign one of the seven enterprise roles: <em>Admin, Manager, Compliance, QA Reviewer, Dietitian, Contributor, Media Contributor</em>. Permissions are inherited. see <a className="docs-link" href="#roles">Roles &amp; permissions</a>.</p>
          <h3>3. Configure your validation rules</h3>
          <p>Visit <strong>Compliance → Rule Engine</strong>. NutriDMS ships with 40+ pre-built rules (Low Sodium, Heart Friendly, Diabetic Safe, etc.). You can clone, edit, or define your own, Loraa will apply them to every recipe automatically.</p>
        </section>

        <section id="workspaces" className="docs-section">
          <h2><span className="ic-h"><Icon name="users" size={20} stroke={2.2} /></span> Workspaces &amp; teams</h2>
          <p className="sub">Structure your operation with workspaces, teams, and queues that mirror how your org actually works.</p>
          <p>Workspaces are top-level containers. Within a workspace, you can create <strong>teams</strong> (e.g. North America, EMEA), <strong>queues</strong> (Pending Validation, Compliance Review, Publishing), and <strong>collections</strong> (Q4 Launch, Winter Menu).</p>
          <h3>Cross-workspace policies</h3>
          <p>Enterprise customers can apply <em>org-wide</em> validation rules across all workspaces, useful when central compliance owns the policy but each business unit owns its own recipes.</p>
        </section>

        <section id="import" className="docs-section">
          <h2><span className="ic-h"><Icon name="upload" size={20} stroke={2.2} /></span> Importing recipes</h2>
          <p className="sub">Bring in your existing recipe library from CSV, Excel, PDF, or our API.</p>
          <p>Use <strong>Recipes → Import</strong> for guided CSV and Excel imports, NutriDMS auto-maps your columns and runs Loraa.ai validation on every imported record.</p>
          <pre><span className="com"># Bulk import via the API</span>{"\n"}<span className="kw">curl</span> -X POST https://api.nutridms.com/v1/recipes/import \{"\n"}  -H <span className="str">"Authorization: Bearer $NUTRIDMS_TOKEN"</span> \{"\n"}  -F <span className="str">"file=@recipes.csv"</span> \{"\n"}  -F <span className="str">"workspace=acme-foods"</span> \{"\n"}  -F <span className="str">"validate=true"</span></pre>
        </section>

        <section id="recipes" className="docs-section">
          <h2><span className="ic-h"><Icon name="chef-hat" size={20} stroke={2.2} /></span> Recipe management</h2>
          <p className="sub">Create, version, and publish recipes through structured lifecycles.</p>
          <p>Every recipe carries a versioned history, drafts, validation results, reviewer comments, and approval signatures. Roll back to any prior version with one click. Republish a corrected version without breaking downstream integrations.</p>
        </section>

        <section id="workflows" className="docs-section">
          <h2><span className="ic-h"><Icon name="git-branch" size={20} stroke={2.2} /></span> Workflows &amp; approvals</h2>
          <p className="sub">Compose multi-stage approval flows with conditional logic and SLA enforcement.</p>
          <p>The visual flow builder lets you express conditions like <em>"if recipe contains tree nuts AND is consumer-facing, require additional Compliance sign-off"</em>. Workflows enforce that recipes cannot publish without the right approvals.</p>
        </section>

        <section id="audit" className="docs-section">
          <h2><span className="ic-h"><Icon name="file-clock" size={20} stroke={2.2} /></span> Audit logs</h2>
          <p className="sub">Tamper-evident history of every change, approval, and access event.</p>
          <p>Audit logs are append-only, cryptographically chained, and exportable to your SIEM (Splunk, Datadog, Sumo Logic). Retention is configurable per workspace, from 7 days to 7 years.</p>
        </section>

        <section id="laura" className="docs-section">
          <h2>
            <img src="assets/laura-mark.png" alt="" width="42" height="42" style={{ borderRadius: 10 }} />
            Introducing Loraa.ai
          </h2>
          <p className="sub">Loraa is the AI co-pilot embedded throughout NutriDMS. She validates, recommends, summarizes, and accelerates, without ever leaving your workflows.</p>
          <h3>What Loraa does</h3>
          <ul>
            <li><strong>Validation</strong>, flags allergen mismatches, sodium drift, conflicting health tags, missing fields.</li>
            <li><strong>Recommendation</strong>, suggests corrections, missing information, and rule fixes in plain language.</li>
            <li><strong>Summarization</strong>, for QA reviewers: a one-paragraph risk summary on every recipe.</li>
            <li><strong>Insights</strong>, highlights bottlenecks, validation patterns, and reviewer workload across your operation.</li>
          </ul>
          <h3>How Loraa learns from your team</h3>
          <p>On the Enterprise tier, Loraa adapts to your organization's reviewer decisions, without ever sending data outside your tenant. Override Loraa's suggestion, and she'll weight that pattern higher next time.</p>
          <h3>Trust model</h3>
          <p>Loraa's findings always include a <em>confidence score</em> and an <em>explainability trail</em>, which rule fired, what value triggered it, and the recipe state at evaluation time. Auditors can replay any Loraa decision.</p>
        </section>

        <section id="laura-rules" className="docs-section">
          <h2><span className="ic-h"><Icon name="settings-2" size={20} stroke={2.2} /></span> Custom validation rules</h2>
          <p className="sub">Express your nutrition policy as rules Loraa applies continuously.</p>
          <pre><span className="com"># Example: define a "Low Sodium" rule</span>{"\n"}<span className="kw">rule</span> <span className="str">"Low Sodium"</span> {"{"}{"\n"}  applies_to: <span className="str">"all recipes"</span>{"\n"}  condition:  sodium_mg &lt;= <span className="str">"480"</span>{"\n"}  severity:   warn{"\n"}  message:    <span className="str">"Sodium exceeds Low Sodium threshold"</span>{"\n"}{"}"}</pre>
        </section>

        <section id="sso" className="docs-section">
          <h2><span className="ic-h"><Icon name="key-round" size={20} stroke={2.2} /></span> SSO / SAML / SCIM</h2>
          <p className="sub">Connect your identity provider in 10 minutes.</p>
          <p>NutriDMS supports SAML 2.0 (Okta, Entra ID / Azure AD, Google Workspace, OneLogin, Ping, JumpCloud), OpenID Connect, and SCIM 2.0 for automatic user provisioning and deprovisioning. SSO is included on Professional and Enterprise.</p>
          <h3>SAML setup</h3>
          <ol>
            <li>In NutriDMS, go to <strong>Settings → Authentication → SSO</strong>.</li>
            <li>Copy the ACS URL and entity ID into your IdP.</li>
            <li>Upload the IdP metadata XML back into NutriDMS.</li>
            <li>Map the <code>email</code>, <code>firstName</code>, <code>lastName</code>, and (optionally) <code>role</code> attributes.</li>
            <li>Test with a single user, then enforce SSO org-wide.</li>
          </ol>
        </section>

        <section id="roles" className="docs-section">
          <h2><span className="ic-h"><Icon name="shield" size={20} stroke={2.2} /></span> Roles &amp; permissions</h2>
          <p className="sub">Seven built-in roles cover most operations. Build custom roles on Enterprise.</p>
          <ul>
            <li><strong>Enterprise Admin</strong>, full system access, billing, integrations.</li>
            <li><strong>Manager</strong>, team-level dashboards, workload routing, SLA visibility.</li>
            <li><strong>Compliance</strong>, approve / reject recipes, configure policies.</li>
            <li><strong>QA Reviewer</strong>, review and clear validation findings.</li>
            <li><strong>Dietitian</strong>, manage health-tag rules and nutrition logic.</li>
            <li><strong>Contributor</strong>, draft and submit recipes for review.</li>
            <li><strong>Media Contributor</strong>, upload and route imagery.</li>
          </ul>
        </section>

        <section id="api" className="docs-section">
          <h2><span className="ic-h"><Icon name="code" size={20} stroke={2.2} /></span> API reference</h2>
          <p className="sub">REST + webhooks. All endpoints are versioned and rate-limited.</p>
          <pre><span className="com"># List recipes</span>{"\n"}<span className="kw">GET</span> https://api.nutridms.com/v1/recipes?status=pending-review{"\n\n"}<span className="com"># Webhook payload, recipe.approved</span>{"\n"}{"{"} <span className="str">"event"</span>: <span className="str">"recipe.approved"</span>, <span className="str">"recipe_id"</span>: <span className="str">"4129"</span>, <span className="str">"approver"</span>: <span className="str">"sarah@..."</span> {"}"}</pre>
          <p>Rate limit: 600 req/min per token. Enterprise tier can negotiate higher quotas. See full reference at <a className="docs-link" href="#">api.nutridms.com/docs</a>.</p>
        </section>

        <section id="security" className="docs-section">
          <h2><span className="ic-h"><Icon name="lock" size={20} stroke={2.2} /></span> Security</h2>
          <p className="sub">Enterprise-ready architecture. Designed with security and auditability in mind. Built for scalable compliance workflows.</p>
          <ul>
            <li>Data encrypted in transit (TLS 1.3) and at rest (AES-256).</li>
            <li>Per-tenant encryption keys on Enterprise (BYOK supported).</li>
            <li>RBAC enforced server-side; permission checks on every request.</li>
            <li>Annual third-party penetration tests; reports available under NDA.</li>
            <li>24/7 SOC monitoring with anomaly detection on every workspace.</li>
          </ul>
        </section>

        <section id="sla" className="docs-section">
          <h2><span className="ic-h"><Icon name="server" size={20} stroke={2.2} /></span> SLA &amp; uptime</h2>
          <p className="sub">99.99% uptime SLA on Enterprise contracts. Service credits for missed targets.</p>
          <ul>
            <li><strong>P0 (down):</strong> 15-minute response, 4-hour resolution target.</li>
            <li><strong>P1 (major degradation):</strong> 1-hour response, same-day target.</li>
            <li><strong>P2 (degraded):</strong> 4-hour response, next business day target.</li>
            <li><strong>P3 (issue):</strong> 1 business day response.</li>
          </ul>
        </section>

        <section id="status" className="docs-section">
          <h2><span className="ic-h"><Icon name="activity" size={20} stroke={2.2} /></span> System status</h2>
          <p className="sub">Real-time health of every NutriDMS subsystem. Subscribe to incident updates at status.nutridms.com.</p>
          <div className="docs-status">
            <div className="status-row"><div className="dot" /><div className="nm">API · v1</div><div className="v">99.998%</div></div>
            <div className="status-row"><div className="dot" /><div className="nm">Web App</div><div className="v">99.997%</div></div>
            <div className="status-row"><div className="dot" /><div className="nm">Loraa.ai service</div><div className="v">99.99%</div></div>
            <div className="status-row"><div className="dot" /><div className="nm">Audit log pipeline</div><div className="v">100%</div></div>
            <div className="status-row"><div className="dot warn" /><div className="nm">Webhook delivery (US-East)</div><div className="v">99.82%</div></div>
            <div className="status-row"><div className="dot" /><div className="nm">Media uploads</div><div className="v">99.995%</div></div>
          </div>
          <p>Last 90 days · all times UTC.</p>
        </section>

        <section id="changelog" className="docs-section">
          <h2><span className="ic-h"><Icon name="history" size={20} stroke={2.2} /></span> Changelog</h2>
          <p className="sub">What's new in NutriDMS.</p>
          <h3>v2.6, May 2026</h3>
          <ul>
            <li>Loraa.ai now supports custom validation rule reasoning with explainability trail.</li>
            <li>Workflow builder: new <em>conditional split</em> node for branching approval paths.</li>
            <li>SCIM 2.0 group sync now supports nested groups (Okta, Entra ID).</li>
          </ul>
          <h3>v2.5, April 2026</h3>
          <ul>
            <li>Audit log export to Splunk HEC.</li>
            <li>Bulk role assignment via SCIM.</li>
            <li>Recipe versioning: side-by-side diff view.</li>
          </ul>
        </section>

        <section id="faq" className="docs-section">
          <h2><span className="ic-h"><Icon name="help-circle" size={20} stroke={2.2} /></span> Frequently asked questions</h2>
          <p className="sub">Quick answers to common questions. Can't find what you need? <a className="docs-link" href="#support">Contact support</a>.</p>
          {FAQS.map((f, i) => <FAQItem key={i} {...f} />)}
        </section>

        <section id="support" className="docs-section">
          <h2><span className="ic-h"><Icon name="life-buoy" size={20} stroke={2.2} /></span> Get support</h2>
          <p className="sub">Three ways to reach the NutriDMS team. Enterprise customers get a dedicated CSM and a private Slack channel.</p>
          <div className="support-grid">
            <div className="support-card">
              <div className="ic"><Icon name="mail" size={18} stroke={2.2} /></div>
              <h4>Email support</h4>
              <p>For non-urgent issues, questions, and how-to. Typical response in under 4 hours during business hours.</p>
              <a href="mailto:support@nutridms.com" className="btn secondary sm" style={{ width: "100%", justifyContent: "center" }}><Icon name="mail" size={13} stroke={2.2} /> support@nutridms.com</a>
              <div className="row-meta"><Icon name="clock" size={12} stroke={2.2} /> 24/7 monitored · 4h target</div>
            </div>
            <div className="support-card">
              <div className="ic"><Icon name="message-circle" size={18} stroke={2.2} /></div>
              <h4>Live chat</h4>
              <p>In-app chat with our support team for Professional and Enterprise customers. Median response under 90 seconds.</p>
              <a href="index.html" className="btn secondary sm" style={{ width: "100%", justifyContent: "center" }}><Icon name="message-circle" size={13} stroke={2.2} /> Open in-app chat</a>
              <div className="row-meta"><Icon name="users" size={12} stroke={2.2} /> Professional &amp; Enterprise</div>
            </div>
            <div className="support-card" style={{ width: "220px" }}>
              <div className="ic"><Icon name="phone" size={18} stroke={2.2} /></div>
              <h4>Priority phone</h4>
              <p>For P0/P1 incidents on Enterprise contracts. Direct line to your on-call CSM with named escalation paths.</p>
              <a href="book-demo.html" className="btn secondary sm" style={{ justifyContent: "center", alignItems: "stretch", width: "220px" }}><Icon name="phone" size={13} stroke={2.2} /> Request priority phone</a>
              <div className="row-meta"><Icon name="shield-check" size={12} stroke={2.2} /> Enterprise only · 15-min SLA</div>
            </div>
          </div>
        </section>
      </main>
      <DocsRail />
    </div>);

}

/* ─── Root ─── */
function DocsApp() {
  return (
    <I18nProvider>
      <AppCtx.Provider value={_DocsCtx}>
        <div className="docs-wrap">
          <DocsNav />
          <DocsHero />
          <DocsBody />
        </div>
      </AppCtx.Provider>
    </I18nProvider>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<DocsApp />);