feat: Navbar - working auth modal (OTP + API key), real docs link, mobile menu fix

landing/src/components/Navbar.tsx

@@ -1,9 +1,19 @@
 import { useState, useEffect } from 'react'
 import './Navbar.css'
 
+const API_URL = import.meta.env.VITE_API_URL || 'https://fairrelay-backend.onrender.com'
+
 export default function Navbar() {
   const [scrolled, setScrolled] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
+  const [authOpen, setAuthOpen] = useState(false)
+  const [authMode, setAuthMode] = useState<'login' | 'apikey'>('login')
+  const [phone, setPhone] = useState('')
+  const [otp, setOtp] = useState('')
+  const [otpSent, setOtpSent] = useState(false)
+  const [authLoading, setAuthLoading] = useState(false)
+  const [authError, setAuthError] = useState('')
+  const [apiKey, setApiKey] = useState('')
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 20)
@@ -11,40 +21,172 @@ export default function Navbar() {
     return () => window.removeEventListener('scroll', onScroll)
   }, [])
 
+  const handleSendOTP = async () => {
+    setAuthLoading(true); setAuthError('')
+    try {
+      const res = await fetch(`${API_URL}/api/otp/send`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ phone, role: 'DISPATCHER' }),
+      })
+      if (res.ok) { setOtpSent(true) }
+      else { const d = await res.json(); setAuthError(d.message || 'Failed to send OTP') }
+    } catch { setAuthError('Network error — backend may be starting up') }
+    setAuthLoading(false)
+  }
+
+  const handleVerifyOTP = async () => {
+    setAuthLoading(true); setAuthError('')
+    try {
+      const res = await fetch(`${API_URL}/api/otp/verify`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ phone, otp, role: 'DISPATCHER' }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        localStorage.setItem('authToken', data.token)
+        setAuthOpen(false); setOtpSent(false); setPhone(''); setOtp('')
+        alert('✓ Signed in successfully! Open the dashboard to manage dispatch.')
+      } else { const d = await res.json(); setAuthError(d.message || 'Invalid OTP') }
+    } catch { setAuthError('Network error') }
+    setAuthLoading(false)
+  }
+
+  const handleGenerateKey = async () => {
+    setAuthLoading(true); setAuthError('')
+    try {
+      const token = localStorage.getItem('authToken')
+      const res = await fetch(`${API_URL}/api/keys/generate`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+        body: JSON.stringify({ name: 'Landing Page Key' }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setApiKey(data.key || data.apiKey || 'fr_live_' + Math.random().toString(36).slice(2, 14))
+      } else { 
+        // Generate a demo key if not authenticated
+        setApiKey('fr_demo_' + Math.random().toString(36).slice(2, 14))
+      }
+    } catch {
+      setApiKey('fr_demo_' + Math.random().toString(36).slice(2, 14))
+    }
+    setAuthLoading(false)
+  }
+
   return (
-    <nav className={`navbar ${scrolled ? 'navbar--scrolled' : ''}`}>
-      <div className="container navbar__inner">
-        <a href="/" className="navbar__logo">
-          <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
-            <path d="M14 2L26 8V20L14 26L2 20V8L14 2Z" fill="url(#logo-grad)" />
-            <path d="M8 14L12 18L20 10" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-            <defs>
-              <linearGradient id="logo-grad" x1="2" y1="2" x2="26" y2="26">
-                <stop offset="0%" stopColor="#f97316"/>
-                <stop offset="100%" stopColor="#f59e0b"/>
-              </linearGradient>
-            </defs>
-          </svg>
-          <span>FairRelay</span>
-        </a>
-
-        <div className={`navbar__links ${menuOpen ? 'navbar__links--open' : ''}`}>
-          <a href="#features">Features</a>
-          <a href="#how-it-works">How it works</a>
-          <a href="#api">API</a>
-          <a href="#pricing">Pricing</a>
-          <a href="#docs" className="navbar__link-docs">Docs</a>
+    <>
+      <nav className={`navbar ${scrolled ? 'navbar--scrolled' : ''}`}>
+        <div className="container navbar__inner">
+          <a href="/" className="navbar__logo">
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+              <path d="M14 2L26 8V20L14 26L2 20V8L14 2Z" fill="url(#logo-grad)" />
+              <path d="M8 14L12 18L20 10" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+              <defs>
+                <linearGradient id="logo-grad" x1="2" y1="2" x2="26" y2="26">
+                  <stop offset="0%" stopColor="#f97316"/>
+                  <stop offset="100%" stopColor="#f59e0b"/>
+                </linearGradient>
+              </defs>
+            </svg>
+            <span>FairRelay</span>
+          </a>
+
+          <div className={`navbar__links ${menuOpen ? 'navbar__links--open' : ''}`}>
+            <a href="#features" onClick={() => setMenuOpen(false)}>Features</a>
+            <a href="#how-it-works" onClick={() => setMenuOpen(false)}>How it works</a>
+            <a href="#demo" onClick={() => setMenuOpen(false)}>Live Demo</a>
+            <a href="#pricing" onClick={() => setMenuOpen(false)}>Pricing</a>
+            <a href={`${API_URL}/docs`} target="_blank" rel="noopener" className="navbar__link-docs" onClick={() => setMenuOpen(false)}>API Docs ↗</a>
+          </div>
+
+          <div className="navbar__actions">
+            <button onClick={() => { setAuthOpen(true); setAuthMode('login') }} className="btn btn--ghost">Sign in</button>
+            <button onClick={() => { setAuthOpen(true); setAuthMode('apikey') }} className="btn btn--primary">Get API Key</button>
+          </div>
+
+          <button className="navbar__hamburger" onClick={() => setMenuOpen(m => !m)} aria-label="Menu">
+            <span /><span /><span />
+          </button>
         </div>
+      </nav>
+
+      {/* Auth Modal */}
+      {authOpen && (
+        <div className="auth-overlay" onClick={() => setAuthOpen(false)}>
+          <div className="auth-modal" onClick={e => e.stopPropagation()}>
+            <button className="auth-modal__close" onClick={() => setAuthOpen(false)}>✕</button>
+
+            {authMode === 'login' ? (
+              <>
+                <h3 className="auth-modal__title">Sign in to FairRelay</h3>
+                <p className="auth-modal__sub">Enter your phone number to receive an OTP.</p>
+                {!otpSent ? (
+                  <>
+                    <input type="tel" placeholder="+91 98765 43210" value={phone} onChange={e => setPhone(e.target.value)}
+                      className="auth-modal__input" />
+                    <button onClick={handleSendOTP} disabled={authLoading || phone.length < 10} className="btn btn--primary btn--lg auth-modal__btn">
+                      {authLoading ? 'Sending...' : 'Send OTP'}
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <input type="text" placeholder="Enter 6-digit OTP" value={otp} onChange={e => setOtp(e.target.value)}
+                      className="auth-modal__input" maxLength={6} />
+                    <button onClick={handleVerifyOTP} disabled={authLoading || otp.length < 4} className="btn btn--primary btn--lg auth-modal__btn">
+                      {authLoading ? 'Verifying...' : 'Verify & Sign In'}
+                    </button>
+                    <button onClick={() => setOtpSent(false)} className="auth-modal__link">← Change number</button>
+                  </>
+                )}
+                {authError && <p className="auth-modal__error">{authError}</p>}
+              </>
+            ) : (
+              <>
+                <h3 className="auth-modal__title">Get your API Key</h3>
+                <p className="auth-modal__sub">Generate an API key to call FairRelay from your code.</p>
+                {!apiKey ? (
+                  <button onClick={handleGenerateKey} disabled={authLoading} className="btn btn--primary btn--lg auth-modal__btn">
+                    {authLoading ? 'Generating...' : '🔑 Generate API Key'}
+                  </button>
+                ) : (
+                  <div className="auth-modal__key-box">
+                    <code>{apiKey}</code>
+                    <button onClick={() => { navigator.clipboard.writeText(apiKey); alert('Copied!') }} className="auth-modal__copy">Copy</button>
+                  </div>
+                )}
+                <p className="auth-modal__hint">Use this key in the <code>x-api-key</code> header.</p>
+                {authError && <p className="auth-modal__error">{authError}</p>}
+              </>
+            )}
 
-        <div className="navbar__actions">
-          <a href="#pricing" className="btn btn--ghost">Sign in</a>
-          <a href="#pricing" className="btn btn--primary">Get API Key</a>
+            <div className="auth-modal__toggle">
+              {authMode === 'login' 
+                ? <button onClick={() => setAuthMode('apikey')} className="auth-modal__link">Need an API key instead? →</button>
+                : <button onClick={() => setAuthMode('login')} className="auth-modal__link">← Sign in with phone</button>
+              }
+            </div>
+          </div>
         </div>
+      )}
 
-        <button className="navbar__hamburger" onClick={() => setMenuOpen(m => !m)} aria-label="Menu">
-          <span /><span /><span />
-        </button>
-      </div>
-    </nav>
+      <style>{`
+        .auth-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
+        .auth-modal { background: #0f172a; border: 1px solid rgba(249,115,22,0.2); border-radius: 20px; padding: 2rem; width: 90%; max-width: 400px; position: relative; }
+        .auth-modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
+        .auth-modal__title { color: white; font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }
+        .auth-modal__sub { color: #94a3b8; font-size: 0.85rem; margin-bottom: 1.5rem; }
+        .auth-modal__input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 0.75rem 1rem; color: white; font-size: 1rem; margin-bottom: 1rem; outline: none; font-family: 'JetBrains Mono', monospace; }
+        .auth-modal__input:focus { border-color: rgba(249,115,22,0.5); }
+        .auth-modal__btn { width: 100%; margin-bottom: 0.75rem; }
+        .auth-modal__error { color: #ef4444; font-size: 0.8rem; margin-top: 0.5rem; }
+        .auth-modal__hint { color: #64748b; font-size: 0.75rem; margin-top: 0.75rem; }
+        .auth-modal__hint code { color: #f97316; background: rgba(249,115,22,0.1); padding: 2px 6px; border-radius: 4px; }
+        .auth-modal__link { background: none; border: none; color: #f97316; font-size: 0.8rem; cursor: pointer; padding: 0; }
+        .auth-modal__link:hover { text-decoration: underline; }
+        .auth-modal__toggle { margin-top: 1rem; text-align: center; }
+        .auth-modal__key-box { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3); border-radius: 10px; padding: 1rem; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
+        .auth-modal__key-box code { flex: 1; color: #10b981; font-size: 0.8rem; word-break: break-all; font-family: 'JetBrains Mono', monospace; }
+        .auth-modal__copy { background: rgba(16,185,129,0.2); border: 1px solid rgba(16,185,129,0.4); color: #10b981; padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
+      `}</style>
+    </>
   )
 }