From 64b104c5a9a07846777ad0378c1bd62ee8acea5f Mon Sep 17 00:00:00 2001
From: Ryan McLean <ryan1_00@hotmail.com>
Date: Fri, 16 Jan 2026 13:27:16 +0000
Subject: [PATCH] Added SDK page, Updated Integrations

---
 package-lock.json          |  10 ++
 src/App.jsx                |  11 ++
 src/pages/Integrations.jsx |  99 +++++++++++
 src/pages/SDK.jsx          | 346 +++++++++++++++++++++++++++++++++++++
 4 files changed, 466 insertions(+)
 create mode 100644 src/pages/SDK.jsx

diff --git a/package-lock.json b/package-lock.json
index f602073..2b0e446 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1721,6 +1722,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1762,6 +1764,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1867,6 +1870,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2125,6 +2129,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3099,6 +3104,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3160,6 +3166,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3169,6 +3176,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3455,6 +3463,7 @@
       "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -3576,6 +3585,7 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/App.jsx b/src/App.jsx
index 414f922..e352d3e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import HomePage from './pages/Home'
 import WhyPage from './pages/Why'
 import IntegrationsPage from './pages/Integrations'
 import SpecificationPage from './pages/Specification'
+import SDKPage from './pages/SDK'
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
           <Route path="/" element={<HomePage />} />
           <Route path="/why" element={<WhyPage />} />
           <Route path="/spec" element={<SpecificationPage />} />
+          <Route path="/sdk" element={<SDKPage />} />
           <Route path="/integrations" element={<IntegrationsPage />} />
         </Routes>
         <Footer />
@@ -53,6 +55,12 @@ function Navigation() {
           >
             Specification
           </Link>
+          <Link
+            to="/sdk"
+            className={`hover:text-gray-900 transition-colors ${location.pathname === '/sdk' ? 'text-gray-900 font-medium' : ''}`}
+          >
+            SDK
+          </Link>
           <Link
             to="/integrations"
             className={`hover:text-gray-900 transition-colors ${location.pathname === '/integrations' ? 'text-gray-900 font-medium' : ''}`}
@@ -90,6 +98,9 @@ function Footer() {
           <Link to="/spec" className="hover:text-gray-900 transition-colors">
             Specification
           </Link>
+          <Link to="/sdk" className="hover:text-gray-900 transition-colors">
+            SDK
+          </Link>
           <Link to="/integrations" className="hover:text-gray-900 transition-colors">
             Integrations
           </Link>
diff --git a/src/pages/Integrations.jsx b/src/pages/Integrations.jsx
index 59573fe..89fcce9 100644
--- a/src/pages/Integrations.jsx
+++ b/src/pages/Integrations.jsx
@@ -65,6 +65,12 @@ export default function IntegrationsPage() {
                                     </svg>
                                     <span className="text-gray-600"><strong className="text-gray-900">Sync Neo4j</strong> — Push graph data to Neo4j for querying</span>
                                 </li>
+                                <li className="flex items-start gap-3">
+                                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span className="text-gray-600"><strong className="text-gray-900">Export OpenC2</strong> — Generate actuator profiles for SOAR integration</span>
+                                </li>
                             </ul>
                         </div>
                         <div>
@@ -263,6 +269,99 @@ export default function IntegrationsPage() {
                 </div>
             </section>
 
+            {/* ServiceNow CMDB */}
+            <section className="py-16 px-6">
+                <div className="max-w-5xl mx-auto">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
+                            <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+                            </svg>
+                        </div>
+                        <h2 className="text-2xl font-semibold">ServiceNow CMDB</h2>
+                        <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded">Available</span>
+                    </div>
+
+                    <p className="text-gray-600 mb-8 max-w-3xl">
+                        Sync SCP architecture graphs to ServiceNow Configuration Management Database. Maps systems
+                        to Configuration Items with configurable field mappings and relationship creation.
+                    </p>
+
+                    <div className="grid md:grid-cols-2 gap-8 mb-10">
+                        <div>
+                            <h3 className="font-medium text-gray-900 mb-4">Features</h3>
+                            <ul className="space-y-3">
+                                <li className="flex items-start gap-3">
+                                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span className="text-gray-600"><strong className="text-gray-900">CMDB Sync</strong> — Create/update CIs from SCP graph nodes</span>
+                                </li>
+                                <li className="flex items-start gap-3">
+                                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span className="text-gray-600"><strong className="text-gray-900">Relationship Mapping</strong> — Map dependencies to CMDB relationships</span>
+                                </li>
+                                <li className="flex items-start gap-3">
+                                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span className="text-gray-600"><strong className="text-gray-900">Dry-run Mode</strong> — Validate before syncing to production</span>
+                                </li>
+                                <li className="flex items-start gap-3">
+                                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span className="text-gray-600"><strong className="text-gray-900">Configurable Mappings</strong> — Custom field mapping with YAML config</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 className="font-medium text-gray-900 mb-4">Default Mappings</h3>
+                            <div className="bg-gray-100 rounded-lg p-4 text-sm">
+                                <table className="w-full text-gray-600">
+                                    <tbody>
+                                        <tr><td className="py-1 font-medium text-gray-900">URN</td><td>→ correlation_id</td></tr>
+                                        <tr><td className="py-1 font-medium text-gray-900">Name</td><td>→ name</td></tr>
+                                        <tr><td className="py-1 font-medium text-gray-900">Tier</td><td>→ business_criticality</td></tr>
+                                        <tr><td className="py-1 font-medium text-gray-900">Team/Domain</td><td>→ comments</td></tr>
+                                        <tr><td className="py-1 font-medium text-gray-900">Dependencies</td><td>→ cmdb_rel_ci</td></tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-6">
+                        <h3 className="font-medium text-gray-900">Usage</h3>
+
+                        <div className="bg-gray-900 rounded-xl p-6 space-y-4">
+                            <div>
+                                <p className="text-gray-400 text-sm mb-2"># Dry-run to validate</p>
+                                <code className="text-gray-300 font-mono text-sm">scp-servicenow cmdb sync graph.json --dry-run</code>
+                            </div>
+                            <div>
+                                <p className="text-gray-400 text-sm mb-2"># Sync to ServiceNow</p>
+                                <code className="text-gray-300 font-mono text-sm">scp-servicenow cmdb sync graph.json</code>
+                            </div>
+                        </div>
+
+                        <a
+                            href="https://github.com/krackenservices/scp-integrations/tree/main/packages/vendor/servicenow"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
+                        >
+                            View on GitHub
+                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </section>
+
             {/* Mermaid Export */}
             <section className="py-16 px-6 bg-gray-50">
                 <div className="max-w-5xl mx-auto">
diff --git a/src/pages/SDK.jsx b/src/pages/SDK.jsx
new file mode 100644
index 0000000..53d1541
--- /dev/null
+++ b/src/pages/SDK.jsx
@@ -0,0 +1,346 @@
+import { Link } from 'react-router-dom'
+
+const codeExample = `from scp_sdk import Manifest, Graph
+
+# Load from file
+manifest = Manifest.from_file("scp.yaml")
+print(manifest.urn)   # urn:scp:payment-service
+print(manifest.tier)  # 1
+print(manifest.team)  # payments-platform
+
+# Get specific dependency
+dep = manifest.get_dependency("urn:scp:user-service")
+print(dep.criticality)  # required`
+
+const graphExample = `from scp_sdk import Graph
+
+# Load from unified JSON (from scp-cli scan --export json)
+graph = Graph.from_file("graph.json")
+
+# Query systems
+for system in graph.systems():
+    print(system.name)
+
+# Find system and analyze
+payment_svc = graph.find_system("urn:scp:payment-service")
+deps = graph.dependencies_of(payment_svc)
+dependents = graph.dependents_of(payment_svc)  # Blast radius`
+
+const integrationExample = `from scp_sdk.core.graph import SystemNode, DependencyEdge
+from scp_sdk.integrations.base import IntegrationBase
+from scp_sdk.integrations.registry import register_integration
+
+@register_integration("pagerduty")
+class PagerDutyIntegration(IntegrationBase):
+    """Sync SCP systems to PagerDuty services."""
+
+    def sync_system(self, system: SystemNode) -> None:
+        """Create/update PagerDuty service."""
+        service_data = {
+            "name": system.name,
+            "description": f"SCP System: {system.urn}",
+            "escalation_policy": self.get_policy(system.team),
+        }
+        # Call PagerDuty API...
+
+    def sync_dependency(self, edge: DependencyEdge) -> None:
+        """Sync dependency (optional for PagerDuty)."""
+        pass`
+
+export default function SDKPage() {
+    return (
+        <>
+            {/* Hero */}
+            <section className="pt-32 pb-16 px-6">
+                <div className="max-w-5xl mx-auto">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center">
+                            <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-gray-900">
+                                SCP SDK
+                            </h1>
+                            <p className="text-gray-500 mt-1">Python SDK for System Capability Protocol</p>
+                        </div>
+                    </div>
+                    <p className="text-xl text-gray-600 max-w-3xl leading-relaxed mb-8">
+                        Programmatic access to SCP manifests and graphs. Build custom integrations
+                        with type-safe models and a reusable framework that handles integration boilerplate.
+                    </p>
+                    <div className="flex gap-4">
+                        <a
+                            href="https://github.com/krackenservices/scp-sdk"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
+                        >
+                            View on GitHub
+                        </a>
+                        <a
+                            href="#quickstart"
+                            className="inline-flex items-center px-5 py-2.5 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
+                        >
+                            Quick Start
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            {/* Features */}
+            <section className="py-16 px-6 bg-gray-50">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-8">Features</h2>
+                    <div className="grid md:grid-cols-3 gap-6">
+                        <FeatureCard
+                            title="Core Models"
+                            description="Type-safe Pydantic models for SCP v0.1 manifests. Full validation and serialization support."
+                            icon={
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                            }
+                        />
+                        <FeatureCard
+                            title="Graph Abstraction"
+                            description="Efficient querying and traversal of system dependencies. Find blast radius and dependency chains."
+                            icon={
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+                            }
+                        />
+                        <FeatureCard
+                            title="Export/Import"
+                            description="JSON graph serialization for transformations. Round-trip your architecture data through any format."
+                            icon={
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                            }
+                        />
+                        <FeatureCard
+                            title="Integration Framework"
+                            description="Base classes for building integrations. Handles graph iteration, error handling, retries, and logging."
+                            icon={
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
+                            }
+                        />
+                        <FeatureCard
+                            title="Testing Utilities"
+                            description="Fixtures and helpers for testing integrations. Mock clients, graph builders, and CLI test helpers."
+                            icon={
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+                            }
+                        />
+                        <FeatureCard
+                            title="Tier Utilities"
+                            description="Helper functions for tier handling, criticality mapping, and common classification tasks."
+                            icon={
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                            }
+                        />
+                    </div>
+                </div>
+            </section>
+
+            {/* Installation */}
+            <section id="quickstart" className="py-16 px-6">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-8">Installation</h2>
+                    <div className="bg-gray-900 rounded-xl p-6 space-y-4 max-w-2xl">
+                        <div>
+                            <p className="text-gray-400 text-sm mb-2"># Using uv (recommended)</p>
+                            <code className="text-gray-300 font-mono text-sm">uv add scp-sdk</code>
+                        </div>
+                        <div>
+                            <p className="text-gray-400 text-sm mb-2"># Or with pip</p>
+                            <code className="text-gray-300 font-mono text-sm">pip install scp-sdk</code>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Load and Query */}
+            <section className="py-16 px-6 bg-gray-50">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-4">Load and Query Manifests</h2>
+                    <p className="text-gray-600 mb-8 max-w-3xl">
+                        Load SCP manifests from files or YAML strings. Access system properties with type-safe accessors.
+                    </p>
+                    <div className="bg-gray-900 rounded-xl p-6 overflow-auto">
+                        <pre className="text-sm text-gray-300 font-mono leading-relaxed">
+                            <code>{codeExample}</code>
+                        </pre>
+                    </div>
+                </div>
+            </section>
+
+            {/* Graph Operations */}
+            <section className="py-16 px-6">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-4">Build and Query Graphs</h2>
+                    <p className="text-gray-600 mb-8 max-w-3xl">
+                        Work with the unified JSON format from <code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm">scp-cli scan --export json</code>.
+                        Find systems, traverse dependencies, and calculate blast radius.
+                    </p>
+                    <div className="bg-gray-900 rounded-xl p-6 overflow-auto">
+                        <pre className="text-sm text-gray-300 font-mono leading-relaxed">
+                            <code>{graphExample}</code>
+                        </pre>
+                    </div>
+                </div>
+            </section>
+
+            {/* Integration Framework */}
+            <section className="py-16 px-6 bg-gray-50">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-4">Build Custom Integrations</h2>
+                    <p className="text-gray-600 mb-8 max-w-3xl">
+                        The SDK makes building integrations incredibly simple. Extend <code className="bg-gray-200 px-1.5 py-0.5 rounded text-sm">IntegrationBase</code> and
+                        implement just the sync methods. The framework handles everything else.
+                    </p>
+
+                    <div className="grid md:grid-cols-2 gap-8 mb-8">
+                        <div>
+                            <h3 className="font-medium text-gray-900 mb-4">The SDK handles:</h3>
+                            <ul className="space-y-2">
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    Graph iteration
+                                </li>
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    Error handling & retries
+                                </li>
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    Structured logging
+                                </li>
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    Dry-run mode
+                                </li>
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    ID caching
+                                </li>
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    Field mapping utilities
+                                </li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 className="font-medium text-gray-900 mb-4">You implement:</h3>
+                            <ul className="space-y-2">
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                    </svg>
+                                    <code className="bg-gray-200 px-1.5 py-0.5 rounded text-sm">sync_system()</code>
+                                </li>
+                                <li className="flex items-center gap-2 text-gray-600">
+                                    <svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                    </svg>
+                                    <code className="bg-gray-200 px-1.5 py-0.5 rounded text-sm">sync_dependency()</code> (optional)
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="bg-gray-900 rounded-xl p-6 overflow-auto">
+                        <pre className="text-sm text-gray-300 font-mono leading-relaxed">
+                            <code>{integrationExample}</code>
+                        </pre>
+                    </div>
+                </div>
+            </section>
+
+            {/* Documentation Links */}
+            <section className="py-16 px-6">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-8">Documentation</h2>
+                    <div className="grid md:grid-cols-3 gap-6">
+                        <a
+                            href="https://github.com/krackenservices/scp-sdk/blob/main/docs/api-reference.md"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-6 border border-gray-200 rounded-xl hover:border-indigo-300 hover:shadow-md transition-all group"
+                        >
+                            <h3 className="font-semibold text-gray-900 mb-2 group-hover:text-indigo-600">API Reference</h3>
+                            <p className="text-gray-600 text-sm">Detailed API documentation for all modules and classes.</p>
+                        </a>
+                        <a
+                            href="https://github.com/krackenservices/scp-sdk/blob/main/docs/integration-guide.md"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-6 border border-gray-200 rounded-xl hover:border-indigo-300 hover:shadow-md transition-all group"
+                        >
+                            <h3 className="font-semibold text-gray-900 mb-2 group-hover:text-indigo-600">Integration Guide</h3>
+                            <p className="text-gray-600 text-sm">Step-by-step tutorial for building custom integrations.</p>
+                        </a>
+                        <a
+                            href="https://github.com/krackenservices/scp-sdk/tree/main/examples"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-6 border border-gray-200 rounded-xl hover:border-indigo-300 hover:shadow-md transition-all group"
+                        >
+                            <h3 className="font-semibold text-gray-900 mb-2 group-hover:text-indigo-600">Examples</h3>
+                            <p className="text-gray-600 text-sm">Common usage patterns and runnable code snippets.</p>
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            {/* Related */}
+            <section className="py-16 px-6 bg-gray-50">
+                <div className="max-w-5xl mx-auto">
+                    <h2 className="text-2xl font-semibold mb-6">Built With the SDK</h2>
+                    <p className="text-gray-600 mb-8">
+                        These integrations are built using the SDK framework:
+                    </p>
+                    <div className="grid md:grid-cols-2 gap-6">
+                        <Link
+                            to="/integrations"
+                            className="p-6 border border-gray-200 rounded-xl bg-white hover:border-indigo-300 hover:shadow-md transition-all"
+                        >
+                            <h3 className="font-semibold text-gray-900 mb-2">ServiceNow CMDB</h3>
+                            <p className="text-gray-600 text-sm">Sync SCP architecture to ServiceNow Configuration Management Database.</p>
+                        </Link>
+                        <Link
+                            to="/integrations"
+                            className="p-6 border border-gray-200 rounded-xl bg-white hover:border-indigo-300 hover:shadow-md transition-all"
+                        >
+                            <h3 className="font-semibold text-gray-900 mb-2">SCP Constructor</h3>
+                            <p className="text-gray-600 text-sm">CLI tool for scanning, validating, and exporting SCP graphs.</p>
+                        </Link>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}
+
+function FeatureCard({ title, description, icon }) {
+    return (
+        <div className="p-6 border border-gray-200 rounded-xl bg-white">
+            <div className="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
+                <svg className="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    {icon}
+                </svg>
+            </div>
+            <h3 className="font-semibold text-gray-900 mb-2">{title}</h3>
+            <p className="text-gray-600 text-sm leading-relaxed">{description}</p>
+        </div>
+    )
+}