From 5fb71ecb1c411dfc5bb01db859a8ae6549f80455 Mon Sep 17 00:00:00 2001
From: neonwatty <jermwatt@gmail.com>
Date: Wed, 28 Jan 2026 15:39:24 -0700
Subject: [PATCH] feat: add interactive API Demo section

- Add API Demo section showcasing all BugDrop JavaScript API methods
- Include interactive "Try it" buttons for open, close, hide, show,
  isOpen, and isButtonVisible methods
- Add navigation link to new section
- Responsive 3-column grid layout matching existing design
---
 src/App.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/App.tsx |  82 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 184 insertions(+)

diff --git a/src/App.css b/src/App.css
index bf017da..94d8c30 100644
--- a/src/App.css
+++ b/src/App.css
@@ -641,6 +641,108 @@ body {
   line-height: 1.7;
 }
 
+/* ===========================================
+   API Demo Section
+   =========================================== */
+
+.api-demo-section {
+  position: relative;
+  z-index: 1;
+  padding: 6rem 2rem;
+  background: var(--bg-warm);
+}
+
+.api-demo-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.api-methods-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+}
+
+.api-method-card {
+  background: white;
+  border-radius: 16px;
+  padding: 1.75rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid transparent;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.api-method-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--accent-orange);
+  box-shadow: 0 12px 35px rgba(255, 107, 53, 0.12);
+}
+
+.api-method-card h3 {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--accent-orange);
+  margin: 0;
+}
+
+.api-method-card p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin: 0;
+  flex-grow: 1;
+}
+
+.api-demo-button {
+  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
+  color: white;
+  border: none;
+  padding: 0.625rem 1.25rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 700;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  align-self: flex-start;
+}
+
+.api-demo-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
+}
+
+.api-code-snippet {
+  display: block;
+  background: var(--bg-cream);
+  padding: 0.625rem 0.875rem;
+  border-radius: 8px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.8rem;
+  color: var(--text-body);
+  margin-top: auto;
+}
+
+@media (max-width: 900px) {
+  .api-methods-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .api-methods-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .api-demo-section {
+    padding: 4rem 1.5rem;
+  }
+}
+
 /* ===========================================
    Quiz/Demo Section
    =========================================== */
diff --git a/src/App.tsx b/src/App.tsx
index 1364882..323c8dc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -102,6 +102,7 @@ function App() {
         <div className="nav-links">
           <a href="#how-it-works" className="nav-link">How It Works</a>
           <a href="#features" className="nav-link">Features</a>
+          <a href="#api-demo" className="nav-link">API Demo</a>
           <a href="#demo" className="nav-link">Find Your Doxie</a>
           <span
             className="nav-link nav-report-bug"
@@ -242,6 +243,87 @@ function App() {
         </div>
       </section>
 
+      {/* API Demo Section */}
+      <section className="api-demo-section" id="api-demo">
+        <div className="api-demo-container">
+          <div className="section-header">
+            <span className="section-label">JavaScript API</span>
+            <h2 className="section-title">Control BugDrop Programmatically</h2>
+            <p className="section-subtitle">
+              Use the BugDrop API to integrate feedback into your own UI and workflows.
+            </p>
+          </div>
+          <div className="api-methods-grid">
+            <div className="api-method-card">
+              <h3>open()</h3>
+              <p>Opens the feedback modal programmatically.</p>
+              <button
+                className="api-demo-button"
+                onClick={() => window.BugDrop?.open()}
+              >
+                Try it
+              </button>
+              <code className="api-code-snippet">BugDrop.open()</code>
+            </div>
+            <div className="api-method-card">
+              <h3>close()</h3>
+              <p>Closes the feedback modal if it's open.</p>
+              <button
+                className="api-demo-button"
+                onClick={() => window.BugDrop?.close()}
+              >
+                Try it
+              </button>
+              <code className="api-code-snippet">BugDrop.close()</code>
+            </div>
+            <div className="api-method-card">
+              <h3>hide()</h3>
+              <p>Hides the floating bug button.</p>
+              <button
+                className="api-demo-button"
+                onClick={() => window.BugDrop?.hide()}
+              >
+                Try it
+              </button>
+              <code className="api-code-snippet">BugDrop.hide()</code>
+            </div>
+            <div className="api-method-card">
+              <h3>show()</h3>
+              <p>Shows the floating button (clears dismissed state).</p>
+              <button
+                className="api-demo-button"
+                onClick={() => window.BugDrop?.show()}
+              >
+                Try it
+              </button>
+              <code className="api-code-snippet">BugDrop.show()</code>
+            </div>
+            <div className="api-method-card">
+              <h3>isOpen()</h3>
+              <p>Returns true if the modal is currently open.</p>
+              <button
+                className="api-demo-button"
+                onClick={() => alert(`isOpen(): ${window.BugDrop?.isOpen()}`)}
+              >
+                Try it
+              </button>
+              <code className="api-code-snippet">BugDrop.isOpen()</code>
+            </div>
+            <div className="api-method-card">
+              <h3>isButtonVisible()</h3>
+              <p>Returns true if the floating button is visible.</p>
+              <button
+                className="api-demo-button"
+                onClick={() => alert(`isButtonVisible(): ${window.BugDrop?.isButtonVisible()}`)}
+              >
+                Try it
+              </button>
+              <code className="api-code-snippet">BugDrop.isButtonVisible()</code>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Interactive Demo / Preference Builder */}
       <section className="demo-section" id="demo">
         <div className="demo-container">