/* NutriDMS, Security & Compliance Page */
const { useState: useSState, useEffect: useSEffect } = React;
const _SecCtx = { role:"super-admin", page:"security", setPage:()=>{}, lang:"en", setLang:()=>{}, openCmd:()=>{}, openNotif:()=>{} };

/* ─── Nav ─── */
function SecNav() {
  return (
    <div className="ld-nav-wrap">
      <nav className="ld-nav">
        <a href="Landing.html" className="ld-logo">
          <NutriHoriz height={36}/>
        </a>
        <div className="ld-nav-links">
          <a href="Landing.html#platform">Platform</a>
          <a href="Landing.html#ai">Loraa.ai</a>
          <a href="documentation.html">Docs</a>
          <a href="security.html" style={{color:"var(--brand-700)",background:"var(--green-50)"}}>Security</a>
          <a href="Landing.html#pricing">Pricing</a>
        </div>
        <div className="ld-nav-cta">
          <LangSwitch />
          <ThemeToggle />
          <a href="signin.html" className="btn ghost sm">Sign in</a>
          <a href="book-demo.html" className="btn primary sm">
            <Icon name="calendar" size={14} stroke={2.2} /> Book Demo
          </a>
        </div>
      </nav>
    </div>
  );
}

/* ─── Hero ─── */
function SecHero() {
  return (
    <section className="sec-hero">
      <div className="inner">
        <div>
          <span className="ld-eyebrow"><Icon name="shield-check" size={12} stroke={2.5}/> Security & Compliance</span>
          <h1>Enterprise-ready architecture. Auditability by design.</h1>
          <p>
            NutriDMS is built for the demands of regulated nutrition operations. Encryption,
            granular permissions, tamper-evident audit logs, and enterprise controls, engineered
            so your compliance team can prove what happened, who did it, and when.
          </p>
          <div className="pillars">
            <span className="pill"><Icon name="lock" size={13} stroke={2.4}/> AES-256 at rest</span>
            <span className="pill"><Icon name="shield" size={13} stroke={2.4}/> TLS 1.3 in transit</span>
            <span className="pill"><Icon name="file-clock" size={13} stroke={2.4}/> Tamper-evident logs</span>
            <span className="pill"><Icon name="key-round" size={13} stroke={2.4}/> SSO / SAML / SCIM</span>
            <span className="pill"><Icon name="users" size={13} stroke={2.4}/> Granular RBAC</span>
          </div>
          <div style={{display:"flex",gap:10,marginTop:28}}>
            <a href="#pillars" className="btn primary"><Icon name="arrow-down" size={14} stroke={2.4}/> Explore controls</a>
            <a href="book-demo.html" className="btn secondary"><Icon name="calendar" size={14} stroke={2.4}/> Request Trust pack</a>
          </div>
        </div>

        <div className="sec-shield">
          <div className="sec-shield-card">
            <div className="crest"><Icon name="shield-check" size={42} stroke={2.2}/></div>
            <h3 className="ttl">NutriDMS Trust Posture</h3>
            <div className="sub">Snapshot · updated daily</div>
            <div className="meters">
              <div className="m-row">
                <div className="lbl">Encryption coverage</div>
                <div className="bar"><i style={{width:"100%"}}/></div>
                <div className="val">100%</div>
              </div>
              <div className="m-row">
                <div className="lbl">Audit log integrity</div>
                <div className="bar"><i style={{width:"100%"}}/></div>
                <div className="val">100%</div>
              </div>
              <div className="m-row">
                <div className="lbl">SSO adoption (Enterprise)</div>
                <div className="bar"><i style={{width:"96%"}}/></div>
                <div className="val">96%</div>
              </div>
              <div className="m-row">
                <div className="lbl">Backup success (90d)</div>
                <div className="bar"><i style={{width:"99%"}}/></div>
                <div className="val">99.9%</div>
              </div>
              <div className="m-row">
                <div className="lbl">Mean detection time</div>
                <div className="bar"><i style={{width:"92%"}}/></div>
                <div className="val">&lt; 4 min</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Pillars (Encryption, Audit, RBAC, Enterprise Controls) ─── */
function SecPillars() {
  const pillars = [
    { num: "01", ic: "lock", title: "Encryption",
      lead: "Strong defaults, configurable for regulated workloads. Every byte protected in motion and at rest.",
      bullets: [
        <><strong>TLS 1.3</strong> for all client-server traffic; HSTS preloaded.</>,
        <><strong>AES-256</strong> at rest across databases, object storage, and backups.</>,
        <><strong>Per-tenant keys</strong> with optional <strong>BYOK / HYOK</strong> on Enterprise.</>,
        <><strong>Field-level encryption</strong> for sensitive recipe metadata and PII.</>,
        <>Hardware-backed key management (AWS KMS, GCP KMS).</>,
      ],
      badges: ["TLS 1.3", "AES-256", "BYOK", "FIPS 140-2 modules"] },

    { num: "02", ic: "file-clock", title: "Audit Logs",
      lead: "Append-only, cryptographically chained logs of every meaningful action. Reviewers replay history; auditors prove it.",
      bullets: [
        <><strong>Tamper-evident</strong> chain, any modification breaks the seal.</>,
        <>Every recipe action, approval, role change, and validation event captured.</>,
        <>Configurable retention from 7 days to 7 years; legal hold supported.</>,
        <>Export to <strong>Splunk, Datadog, Sumo Logic, S3</strong> via webhook or HEC.</>,
        <>Reviewer playback: reconstruct recipe state at any past timestamp.</>,
      ],
      badges: ["Append-only", "SHA-256 chain", "SIEM export", "Legal hold"] },

    { num: "03", ic: "users", title: "Role Permissions",
      lead: "Granular RBAC by department, function, and scope. Designed so least-privilege isn't a compliance theater.",
      bullets: [
        <>Seven built-in roles: <strong>Admin, Manager, Compliance, QA, Dietitian, Contributor, Media Contributor</strong>.</>,
        <><strong>Custom roles</strong> with per-resource permissions (Enterprise).</>,
        <>Server-side permission checks on every request, never trusted client-side.</>,
        <>Per-workspace and org-wide policy scoping.</>,
        <><strong>Permission auditing</strong>, diff what changed, who approved it.</>,
      ],
      badges: ["RBAC", "Least-privilege", "Per-workspace", "Permission audit"] },

    { num: "04", ic: "shield", title: "Enterprise Controls",
      lead: "The controls security teams expect. SSO, SCIM, IP allowlisting, session policy, deprovisioning that actually works.",
      bullets: [
        <><strong>SAML 2.0 SSO</strong> with Okta, Entra ID, Google, OneLogin, Ping, JumpCloud.</>,
        <><strong>SCIM 2.0</strong> for automatic provisioning and instant deprovisioning.</>,
        <><strong>IP allowlists</strong>, session timeout, MFA enforcement, device posture.</>,
        <>Private cloud / VPC deployment; air-gapped on request.</>,
        <>Quarterly access reviews surfaced inside the product.</>,
      ],
      badges: ["SSO / SAML", "SCIM 2.0", "IP allowlist", "VPC deploy"] },
  ];

  return (
    <section className="sec-section" id="pillars">
      <div className="ld-container">
        <div className="ld-section-head" data-reveal="up">
          <span className="ld-eyebrow"><Icon name="layout-grid" size={12} stroke={2.5}/> Platform Controls</span>
          <h2 className="ld-h2">Four pillars of platform security.</h2>
          <p className="ld-lede">The controls NutriDMS ships with, defaults strong, configurable where it matters, and observable end-to-end.</p>
        </div>
        <div className="sec-pillars">
          {pillars.map((p, i) => (
            <div key={i} className="sec-pillar" data-reveal="up" style={{transitionDelay:`${(i%2)*80}ms`}}>
              <div className="num">{p.num}</div>
              <div className="head">
                <div className="ic"><Icon name={p.ic} size={24} stroke={2.2}/></div>
                <div>
                  <h3>{p.title}</h3>
                </div>
              </div>
              <p className="lead">{p.lead}</p>
              <ul>
                {p.bullets.map((b, j) => (
                  <li key={j}><Icon name="check" size={14} stroke={2.6}/> <span>{b}</span></li>
                ))}
              </ul>
              <div className="badges">
                {p.badges.map((b, j) => <span key={j} className="bd">{b}</span>)}
              </div>
            </div>
          ))}
        </div>

        <div className="sec-stats">
          <div className="sec-stat"><div className="v">99.99%</div><div className="l">SLA UPTIME TARGET</div></div>
          <div className="sec-stat"><div className="v">&lt; 4 min</div><div className="l">MEAN DETECTION TIME</div></div>
          <div className="sec-stat"><div className="v">100%</div><div className="l">TLS / AT-REST ENCRYPTION</div></div>
          <div className="sec-stat"><div className="v">7 yr</div><div className="l">MAX AUDIT RETENTION</div></div>
        </div>
      </div>
    </section>
  );
}

/* ─── Internal Procedures ─── */
function SecProcedures() {
  const procs = [
    { n: "Internal · Policy", ic: "shield", title: "Security Policies",
      desc: "How NutriDMS protects customer data, manages risk, and responds to incidents. Reviewed quarterly by the Security Committee.",
      toc: [
        { ic: "shield-alert", t: "Information Security Policy", meta: "v4.2 · Jul 2026" },
        { ic: "siren", t: "Incident Response Plan", meta: "v3.1 · Tested Q2" },
        { ic: "alert-octagon", t: "Vulnerability Management", meta: "Continuous" },
        { ic: "binary", t: "Cryptography Standard", meta: "FIPS-aligned" },
        { ic: "lock", t: "Data Classification Schema", meta: "4 tiers" },
      ],
      owner: "CISO Office", review: "Quarterly" },

    { n: "Internal · Access", ic: "key-round", title: "Access Policies",
      desc: "Who can access what, under which conditions. Strictly least-privilege with mandatory periodic reviews and just-in-time elevation for sensitive operations.",
      toc: [
        { ic: "users", t: "Role-Based Access Control (RBAC) Policy", meta: "Org-wide" },
        { ic: "key-round", t: "Identity & Authentication Standard", meta: "SSO + MFA req." },
        { ic: "clock", t: "Just-in-Time Access (JIT) Procedure", meta: "Production · 4h max" },
        { ic: "search-check", t: "Quarterly Access Review", meta: "Auto-surfaced" },
        { ic: "shield-x", t: "Privileged Account Management", meta: "PAM enforced" },
      ],
      owner: "IAM Lead", review: "Quarterly" },

    { n: "Internal · Resilience", ic: "database-backup", title: "Backup Procedures",
      desc: "Redundant backups across regions, integrity-verified, restore-tested. Recovery objectives codified per workload tier.",
      toc: [
        { ic: "database", t: "Backup Schedule & Retention Matrix", meta: "Tiered" },
        { ic: "refresh-cw", t: "Cross-Region Replication", meta: "Hot + warm" },
        { ic: "rotate-ccw", t: "Restore Testing Playbook", meta: "Monthly drill" },
        { ic: "timer", t: "RPO / RTO Objectives", meta: "RPO 15m · RTO 1h" },
        { ic: "scale", t: "Backup Integrity Verification", meta: "SHA-256 hashed" },
      ],
      owner: "SRE", review: "Monthly" },

    { n: "Internal · People", ic: "user-cog", title: "Onboarding / Offboarding Procedures",
      desc: "Repeatable, audited human processes for hires, role changes, and exits. Same rigor for employees, contractors, and integration partners.",
      toc: [
        { ic: "user-plus", t: "Employee Onboarding Checklist", meta: "Day 0-30" },
        { ic: "graduation-cap", t: "Security Awareness Training", meta: "Annual + role-based" },
        { ic: "shuffle", t: "Role Change Procedure", meta: "JIT re-provisioning" },
        { ic: "user-x", t: "Offboarding Checklist", meta: "Same-day deprovisioning" },
        { ic: "handshake", t: "Contractor & Vendor Onboarding", meta: "DPA + scoped access" },
      ],
      owner: "People Ops + IT", review: "Per event + annual" },
  ];
  return (
    <section className="sec-section band" id="procedures">
      <div className="ld-container">
        <div className="ld-section-head" data-reveal="up">
          <span className="ld-eyebrow"><Icon name="folder-cog" size={12} stroke={2.5}/> Prepared Internally</span>
          <h2 className="ld-h2">The procedures behind the platform.</h2>
          <p className="ld-lede">
            Public controls only work if they're backed by maintained internal practice. These are the
            documented procedures NutriDMS operates against, available to Enterprise customers under NDA
            as part of the Trust pack.
          </p>
        </div>
        <div className="sec-procs">
          {procs.map((p, i) => (
            <div key={i} className="sec-proc" data-reveal="up" style={{transitionDelay:`${(i%2)*80}ms`}}>
              <div className="pn">{p.n}</div>
              <h3>{p.title}</h3>
              <p className="desc">{p.desc}</p>
              <div className="toc">
                {p.toc.map((it, j) => (
                  <div key={j} className="tr">
                    <div className="ic"><Icon name={it.ic} size={14} stroke={2.4}/></div>
                    <div className="nm">{it.t}</div>
                    <div className="meta">{it.meta}</div>
                  </div>
                ))}
              </div>
              <div className="foot">
                <span className="owner"><Icon name="user-round" size={12} stroke={2.4}/> Owner · {p.owner}</span>
                <span><Icon name="repeat" size={12} stroke={2.4}/> Reviewed: {p.review}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Disclosure block ─── */
function SecDisclosure() {
  return (
    <section className="sec-section" style={{paddingTop:0}}>
      <div className="ld-container">
        <div className="sec-discl" data-reveal="up">
          <div className="icon"><Icon name="file-shield" size={28} stroke={2.2}/></div>
          <div>
            <h3>Request the NutriDMS Trust pack.</h3>
            <p>Internal policies, audit logs sample, architecture diagrams, and our latest penetration test summary, available to enterprise customers and prospects under NDA, typically within 2 business days.</p>
          </div>
          <a href="book-demo.html" className="btn primary lg"><Icon name="download" size={14} stroke={2.4}/> Request access</a>
        </div>
      </div>
    </section>
  );
}

/* ─── Mini footer ─── */
function SecFooter() {
  return (
    <footer className="ld-foot">
      <div className="ld-foot-grid">
        <div>
          <a href="Landing.html" className="ld-logo">
            <NutriHoriz height={42}/>
          </a>
          <p className="blurb">Enterprise-ready architecture. Designed with security and auditability in mind. Built for scalable compliance workflows.</p>
        </div>
        <div className="ld-foot-col"><h5>Security</h5><ul>
          <li><a href="#pillars">Encryption</a></li>
          <li><a href="#pillars">Audit Logs</a></li>
          <li><a href="#pillars">RBAC</a></li>
          <li><a href="#pillars">Enterprise Controls</a></li>
        </ul></div>
        <div className="ld-foot-col"><h5>Procedures</h5><ul>
          <li><a href="#procedures">Security Policies</a></li>
          <li><a href="#procedures">Access Policies</a></li>
          <li><a href="#procedures">Backup Procedures</a></li>
          <li><a href="#procedures">Onboarding / Offboarding</a></li>
        </ul></div>
        <div className="ld-foot-col"><h5>Help</h5><ul>
          <li><a href="documentation.html">Documentation</a></li>
          <li><a href="documentation.html#faq">FAQ</a></li>
          <li><a href="documentation.html#support">Tech Support</a></li>
          <li><a href="book-demo.html">Contact</a></li>
        </ul></div>
        <div className="ld-foot-col"><h5>Company</h5><ul>
          <li><a href="Landing.html">About</a></li>
          <li><a href="Landing.html#pricing">Pricing</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Terms</a></li>
        </ul></div>
      </div>
      <div className="ld-foot-bottom">
        <div>© 2026 SoftLab Digital · NutriDMS. All rights reserved.</div>
        <div className="socials">
          <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={15} stroke={2}/></a>
          <a href="#" aria-label="Twitter"><Icon name="twitter" size={15} stroke={2}/></a>
          <a href="#" aria-label="GitHub"><Icon name="github" size={15} stroke={2}/></a>
        </div>
      </div>
    </footer>
  );
}

/* ─── Reveal hook ─── */
function useRevealS() {
  useSEffect(() => {
    const els = document.querySelectorAll("[data-reveal]");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function SecShell() {
  useRevealS();
  return (
    <AppCtx.Provider value={_SecCtx}>
      <div>
        <SecNav />
        <SecHero />
        <SecPillars />
        <SecProcedures />
        <SecDisclosure />
        <SecFooter />
      </div>
    </AppCtx.Provider>
  );
}

function SecApp() {
  return <I18nProvider><SecShell /></I18nProvider>;
}

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