From 39abfae43ecffbea7a11ddff52389dd5a650445d Mon Sep 17 00:00:00 2001
From: William Chi <williamc28275311@yahoo.com>
Date: Mon, 27 Apr 2026 18:26:46 -0400
Subject: [PATCH] feat: add ScrollDownButton component and integrate it into
 the home page; update EmailCaptureModal to remove unused props

---
 src/app/intake/page.js               | 50 ++++++++--------------------
 src/app/page.js                      |  5 ++-
 src/components/EmailCaptureModal.jsx |  8 ++---
 src/components/ScrollDownButton.jsx  | 15 +++++++++
 4 files changed, 35 insertions(+), 43 deletions(-)
 create mode 100644 src/components/ScrollDownButton.jsx

diff --git a/src/app/intake/page.js b/src/app/intake/page.js
index c7782cd..b930ca4 100644
--- a/src/app/intake/page.js
+++ b/src/app/intake/page.js
@@ -46,6 +46,9 @@ function ModeSelector({ onSelect }) {
 
   return (
     <div className="flex h-screen w-screen overflow-hidden">
+      <Link href="/" className="absolute top-5 left-5 z-10 text-white/50 hover:text-white transition-colors">
+        <X className="w-5 h-5" />
+      </Link>
       {/* Voice side */}
       <div
         className="relative flex flex-col items-center justify-center cursor-pointer select-none transition-all duration-500 ease-in-out bg-black"
@@ -469,6 +472,7 @@ function VoiceIntake({ onBack }) {
   const [errorMsg, setErrorMsg] = useState(null);
   const [finalizeResult, setFinalizeResult] = useState(null);
   const [showModal, setShowModal] = useState(false);
+  const [showHomeButton, setShowHomeButton] = useState(false);
   const messagesEndRef = useRef(null);
   const hasConnectedRef = useRef(false);
   const msgCounterRef = useRef(0);
@@ -606,51 +610,25 @@ function VoiceIntake({ onBack }) {
         {showModal && <CredentialsModal onClose={() => setShowModal(false)} />}
         <div className="min-h-screen bg-white bg-[radial-gradient(circle_at_1.5px_1.5px,rgba(23,23,23,0.2)_1.5px,transparent_0)] bg-[length:39px_39px] flex items-center justify-center px-6">
           <div className="max-w-sm w-full flex flex-col items-center gap-6 text-center">
-            <span className="text-5xl">✅</span>
+            <svg className="w-12 h-12 text-gray-900" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
             <h2 className="text-2xl font-semibold text-gray-900">You&apos;re all set</h2>
             <EmailCaptureModal
               caseId={finalizeResult.caseId}
               patientId={finalizeResult.patientId}
               queuePosition={finalizeResult.queuePosition}
-              onDone={() => setShowModal(true)}
+              onDone={() => { setShowModal(true); setShowHomeButton(true); }}
             />
-            <div className="w-full flex flex-col gap-2">
-              <Link
-                href={`/patient/status?patientId=${finalizeResult.patientId}&caseId=${finalizeResult.caseId}`}
-                className="text-sm text-gray-700 underline underline-offset-2 hover:text-gray-900"
-              >
-                Check live queue status
-              </Link>
-              <Link
-                href="/patient/login"
-                className="text-sm text-gray-500 underline underline-offset-2 hover:text-gray-700"
-              >
-                Patient sign-in
-              </Link>
-              <Link
-                href="/staff/login"
-                className="text-sm text-gray-500 underline underline-offset-2 hover:text-gray-700"
-              >
-                Staff sign-in
-              </Link>
+            {showHomeButton && (
               <Link
                 href="/"
-                className="text-xs text-gray-400 underline underline-offset-2 hover:text-gray-600 mt-1"
+                onClick={() => { try { sessionStorage.removeItem(STORAGE_KEY); } catch { /* ignore */ } }}
+                className="inline-flex h-10 items-center rounded-md border border-neutral-300 bg-white px-4 text-sm font-semibold text-neutral-800 shadow-sm transition hover:border-neutral-500 hover:bg-neutral-50"
               >
                 Back to home
               </Link>
-            </div>
-            <button
-              onClick={() => {
-                try { sessionStorage.removeItem(STORAGE_KEY); } catch { /* ignore */ }
-                setPhase("idle");
-                setFinalizeResult(null);
-                setShowModal(false);
-              }}
-              className="text-xs text-gray-300 hover:text-gray-500 transition-colors"
-            >
-              Start new intake
-            </button>
+            )}
           </div>
         </div>
       </>
@@ -712,9 +690,9 @@ function VoiceIntake({ onBack }) {
           </p>
         )}
         {messages.map((msg) => (
-          <div key={msg.id} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+          <div key={msg.id} className={`flex ${msg.source === "user" ? "justify-end" : "justify-start"}`}>
             <div className={`max-w-[80%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed ${
-              msg.role === "user"
+              msg.source === "user"
                 ? "bg-gray-900 text-white rounded-br-sm"
                 : "bg-gray-100 text-gray-800 rounded-bl-sm"
             }`}>
diff --git a/src/app/page.js b/src/app/page.js
index 5fa8d50..ea5843c 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -2,6 +2,7 @@ import Link from "next/link";
 import TypewriterHeadline from "@/components/TypewriterHeadline";
 import TypewriterText from "@/components/TypewriterText";
 import CheckInButton from "@/components/CheckInButton";
+import ScrollDownButton from "@/components/ScrollDownButton";
 
 // --- Static data ---
 const HOW_IT_WORKS = [
@@ -100,10 +101,12 @@ export default function Home() {
         >
           <CheckInButton />
         </section>
+
+        <ScrollDownButton targetId="how-it-works" />
       </main>
 
       {/* --- How it works --- */}
-      <section className="border-t border-neutral-200 bg-white px-5 py-20 sm:px-8 sm:py-28 lg:px-13">
+      <section id="how-it-works" className="border-t border-neutral-200 bg-white px-5 py-20 sm:px-8 sm:py-28 lg:px-13">
         <div className="mx-auto max-w-4xl">
           <p className="mb-8 text-lg text-neutral-500 sm:text-xl">
             <TypewriterText text="How it works" />
diff --git a/src/components/EmailCaptureModal.jsx b/src/components/EmailCaptureModal.jsx
index 4e70c5a..8c1c6da 100644
--- a/src/components/EmailCaptureModal.jsx
+++ b/src/components/EmailCaptureModal.jsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-export default function EmailCaptureModal({ caseId, patientId, queuePosition, onDone }) {
+export default function EmailCaptureModal({ patientId, onDone }) {
   const [uiState, setUiState] = useState("prompt"); // prompt | submitting | sent | skipped | error
   const [email, setEmail] = useState("");
   const [errorMsg, setErrorMsg] = useState(null);
@@ -42,11 +42,7 @@ export default function EmailCaptureModal({ caseId, patientId, queuePosition, on
   }
 
   if (uiState === "skipped") {
-    return (
-      <p className="text-xs text-gray-400 text-center">
-        No email sent. Remember your queue position <strong className="text-gray-600">#{queuePosition}</strong>.
-      </p>
-    );
+    return null;
   }
 
   return (
diff --git a/src/components/ScrollDownButton.jsx b/src/components/ScrollDownButton.jsx
new file mode 100644
index 0000000..3368666
--- /dev/null
+++ b/src/components/ScrollDownButton.jsx
@@ -0,0 +1,15 @@
+"use client";
+
+export default function ScrollDownButton({ targetId }) {
+  return (
+    <button
+      onClick={() => document.getElementById(targetId)?.scrollIntoView({ behavior: "smooth" })}
+      className="mt-24 text-neutral-400 hover:text-neutral-700 transition-colors animate-bounce"
+      aria-label="Scroll down"
+    >
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+  );
+}