From 8f2f897184c62167ab3ae3de210003eeafc4932c Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuth.timo@gmail.com>
Date: Wed, 25 Mar 2026 20:08:25 -0500
Subject: [PATCH] SEO

---
 components/Breadcrumb.tsx  | 51 +++++++++++++++++++----------
 src/pages/BlogPostPage.tsx | 15 +++++++++
 src/pages/ContactPage.tsx  | 67 +++++++++++++++++++++++++++++---------
 src/pages/ServicePage.tsx  | 18 ++++++++++
 4 files changed, 118 insertions(+), 33 deletions(-)

diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index 6082a8e..dab7e2f 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -11,24 +11,41 @@ interface BreadcrumbProps {
 }
 
 const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
+  const breadcrumbSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.label,
+      ...(item.to ? { item: `https://bayareait.services${item.to}` } : {}),
+    })),
+  };
+
   return (
-    <nav aria-label="breadcrumb" className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
-      {items.map((item, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && <span className="text-gray-400 dark:text-gray-600">/</span>}
-          {item.to ? (
-            <Link
-              to={item.to}
-              className="hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              {item.label}
-            </Link>
-          ) : (
-            <span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
-          )}
-        </React.Fragment>
-      ))}
-    </nav>
+    <>
+      <nav aria-label="breadcrumb" className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
+        {items.map((item, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && <span className="text-gray-400 dark:text-gray-600">/</span>}
+            {item.to ? (
+              <Link
+                to={item.to}
+                className="hover:text-gray-900 dark:hover:text-white transition-colors"
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </nav>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+    </>
   );
 };
 
diff --git a/src/pages/BlogPostPage.tsx b/src/pages/BlogPostPage.tsx
index 0f3ef7d..0f06c87 100644
--- a/src/pages/BlogPostPage.tsx
+++ b/src/pages/BlogPostPage.tsx
@@ -24,6 +24,20 @@ const BlogPostPage: React.FC<BlogPostPageProps> = ({ data }) => {
         ? 'Local Services'
         : 'IT Insights';
 
+    const schema = {
+        "@context": "https://schema.org",
+        "@type": "BlogPosting",
+        "headline": data.h1,
+        "description": data.description,
+        "url": `https://bayareait.services/${data.slug}`,
+        "image": data.image ? `https://bayareait.services${data.image}` : "https://bayareait.services/logo.svg",
+        "publisher": {
+            "@type": "Organization",
+            "name": "Bay Area IT",
+            "url": "https://bayareait.services"
+        }
+    };
+
     return (
         <>
             <SEO
@@ -31,6 +45,7 @@ const BlogPostPage: React.FC<BlogPostPageProps> = ({ data }) => {
                 description={data.description}
                 keywords={data.keywords}
                 canonicalUrl={`https://bayareait.services/${data.slug}`}
+                schema={schema}
             />
 
             <div className="min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden pt-32 pb-16">
diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
index 22ae5b3..ca76d73 100644
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -1,11 +1,41 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import SEO from '../../components/SEO';
 
-const ContactPage: React.FC = () => {
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
+const ContactPage: React.FC = () => {
+    const [isSubmitted, setIsSubmitted] = useState(false);
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+
+        const formData = new FormData(event.currentTarget);
+        const name = String(formData.get('name') || '').trim();
+        const phone = String(formData.get('phone') || '').trim();
+        const email = String(formData.get('email') || '').trim();
+        const company = String(formData.get('company') || '').trim();
+        const message = String(formData.get('message') || '').trim();
+
+        const subject = encodeURIComponent(`Website inquiry from ${name || 'Bay Area IT visitor'}`);
+        const body = encodeURIComponent(
+            [
+                `Name: ${name || 'Not provided'}`,
+                `Phone: ${phone || 'Not provided'}`,
+                `Email: ${email || 'Not provided'}`,
+                `Company: ${company || 'Not provided'}`,
+                '',
+                'Message:',
+                message || 'No message provided',
+            ].join('\n'),
+        );
+
+        window.location.href = `mailto:info@bayareaaffiliates.com?subject=${subject}&body=${body}`;
+        setIsSubmitted(true);
+        event.currentTarget.reset();
+    };
 
     const faqs = [
         { q: 'How quickly can you start?', a: 'Most assessments can begin within 48 hours of contact. Emergency support is available 24/7.' },
@@ -44,33 +74,38 @@ const ContactPage: React.FC = () => {
                         className="bg-white/5 backdrop-blur-sm p-8 md:p-10 rounded-3xl shadow-xl border border-white/10"
                     >
                         <h3 className="text-2xl font-bold mb-8 text-white">Send us a message</h3>
-                        <form className="space-y-6">
+                        <form className="space-y-6" onSubmit={handleSubmit}>
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div>
                                     <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">Name *</label>
-                                    <input type="text" id="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
+                                    <input type="text" id="name" name="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
                                 </div>
                                 <div>
                                     <label htmlFor="phone" className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
-                                    <input type="tel" id="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
+                                    <input type="tel" id="phone" name="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
                                 </div>
                             </div>
                             <div>
                                 <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">Email *</label>
-                                <input type="email" id="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
+                                <input type="email" id="email" name="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
                             </div>
                             <div>
                                 <label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">Company</label>
-                                <input type="text" id="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
+                                <input type="text" id="company" name="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
                             </div>
                             <div>
                                 <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">Message *</label>
-                                <textarea id="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
-                            </div>
-                            <button type="submit" className="w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)]">
-                                Send Message
-                            </button>
-                        </form>
+                                <textarea id="message" name="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
+                            </div>
+                            <button type="submit" className="w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)]">
+                                Send Message
+                            </button>
+                            {isSubmitted && (
+                                <p className="text-sm text-gray-400">
+                                    Your mail client should open with the message prefilled. If it does not, email us at info@bayareaaffiliates.com.
+                                </p>
+                            )}
+                        </form>
                     </motion.div>
 
                     {/* Right: FAQ & Info */}
diff --git a/src/pages/ServicePage.tsx b/src/pages/ServicePage.tsx
index c7ed6ac..b9c6502 100644
--- a/src/pages/ServicePage.tsx
+++ b/src/pages/ServicePage.tsx
@@ -89,6 +89,23 @@ const ServicePage: React.FC<ServicePageProps> = ({ data }) => {
         window.scrollTo(0, 0);
     }, []);
 
+    const schema = {
+        "@context": "https://schema.org",
+        "@type": "Service",
+        "name": data.h1,
+        "description": data.description,
+        "url": `https://bayareait.services/${data.slug}`,
+        "provider": {
+            "@type": "Organization",
+            "name": "Bay Area IT",
+            "url": "https://bayareait.services"
+        },
+        "areaServed": {
+            "@type": "AdministrativeArea",
+            "name": "Corpus Christi and the Coastal Bend"
+        }
+    };
+
     return (
         <>
             <SEO
@@ -96,6 +113,7 @@ const ServicePage: React.FC<ServicePageProps> = ({ data }) => {
                 description={data.description}
                 keywords={data.keywords}
                 canonicalUrl={`https://bayareait.services/${data.slug}`}
+                schema={schema}
             />
 
             <div className="min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">