Phase 3: service pages on a shared template

- ServicePage template: H1 with service + area, intro with Call/Text
  above the fold, What I fix, Pricing, How it works, Why choose me,
  a testimonial, FAQs (with FAQPage schema), CTA band, related services
- Service copy moved to src/lib/services.js, rewritten in first person
  with owner-confirmed jobs and prices only; removes the "team of
  technicians", "preferred choice", Mac and motherboard claims
- FaqList and CtaBand extracted and shared with the homepage
- Button gains primary/outlineDark variants; responsive page-header H1
- Compact Chatwoot bubble on phones so it doesn't cover CTAs

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/app/page.js

@@ -5,15 +5,10 @@ import bgimage from "./assets/header-bg.jpg";
 import Button from "./components/Button";
 import { GoogleMapsEmbed } from "@next/third-parties/google";
 import ContactForm from "./components/ContactForm";
-import JsonLd from "./components/JsonLd";
-import { pageMetadata, faqSchema, business, links } from "@/lib/site";
+import FaqList from "./components/FaqList";
+import CtaBand from "./components/CtaBand";
+import { pageMetadata, business, links } from "@/lib/site";
 import { homeFaqs } from "@/lib/faqs";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
 import {
   ArrowRight,
   Briefcase,
@@ -22,7 +17,6 @@ import {
   HardDrive,
   Laptop,
   MapPin,
-  MessageCircle,
   MessageSquare,
   Monitor,
   MonitorCog,
@@ -337,58 +331,14 @@ export default function Home() {
           className="container mx-auto max-w-3xl mb-32 scroll-mt-20"
           id="faq"
         >
-          <JsonLd data={faqSchema(homeFaqs)} />
           <h2 className="text-center text-3xl font-bold mb-8">
             Frequently asked questions
           </h2>
-          <Accordion className="mb-8">
-            {homeFaqs.map(({ question, answer, list }, i) => (
-              <AccordionItem key={question} value={`item-${i + 1}`}>
-                <AccordionTrigger>{question}</AccordionTrigger>
-                <AccordionContent>
-                  {answer}
-                  {list && (
-                    <ul className="list-disc pl-6 my-2">
-                      {list.map((item) => (
-                        <li key={item}>{item}</li>
-                      ))}
-                    </ul>
-                  )}
-                </AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
+          <FaqList faqs={homeFaqs} />
           <SectionCta />
         </section>
 
-        <section className="bg-sky-900 text-white py-16">
-          <div className="container mx-auto text-center">
-            <h2 className="text-3xl font-bold mb-4">
-              Get your computer sorted
-            </h2>
-            <p className="mb-8">
-              Call or text now, or send the details and I&apos;ll get back to
-              you with a quote.
-            </p>
-            <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-3">
-              <Button href={links.tel}>
-                <Phone aria-hidden="true" />
-                Call {business.phone}
-              </Button>
-              <Button href={links.sms} variant="outline">
-                <MessageSquare aria-hidden="true" />
-                Text me
-              </Button>
-              <Button href={links.whatsapp} variant="outline">
-                <MessageCircle aria-hidden="true" />
-                WhatsApp
-              </Button>
-              <Button href="#quote" variant="outline">
-                Get a quote
-              </Button>
-            </div>
-          </div>
-        </section>
+        <CtaBand quoteHref="#quote" />
         <section
           id="quote"
           className="container mx-auto max-w-2xl py-16 scroll-mt-20"