computer-repair/src/app/areas/[suburb]/page.js

import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowRight, MessageSquare, Phone } from "lucide-react";
import HeaderSm from "../../components/HeaderSm";
import Button from "../../components/Button";
import CtaBand from "../../components/CtaBand";
import FaqList from "../../components/FaqList";
import JsonLd from "../../components/JsonLd";
import { areas, getArea } from "@/lib/areas";
import { services } from "@/lib/services";
import { business, links, pageMetadata, serviceSchema } from "@/lib/site";

export const dynamicParams = false;

export function generateStaticParams() {
  return areas.map(({ slug }) => ({ suburb: slug }));
}

export async function generateMetadata({ params }) {
  const area = getArea((await params).suburb);
  return pageMetadata({
    title: `Computer Repair ${area.name} | Te Atatu Computers`,
    description: `Laptop & PC repairs, upgrades, virus removal and IT support in ${area.name}. $35 diagnosis, no fix no fee. Call or text ${business.phone}.`,
    path: `/areas/${area.slug}`,
  });
}

export default async function AreaPage({ params }) {
  const area = getArea((await params).suburb);
  if (!area) notFound();

  const faqs = [
    area.faq,
    {
      question: "How much will it cost?",
      answer:
        "A diagnosis is $35, and if I can't fix it you don't pay it. Labour is $35 an hour and parts are extra. I'll tell you the cost before I start.",
    },
  ];

  return (
    <div>
      <JsonLd
        data={serviceSchema({
          name: `Computer repair in ${area.name}`,
          description: area.intro,
          path: `/areas/${area.slug}`,
          areas: [area.name],
        })}
      />
      <HeaderSm text={`Computer & Laptop Repair in ${area.name}`} />

      <section className="container mx-auto max-w-3xl mb-16">
        <p className="text-lg mb-6">{area.intro}</p>
        <div className="flex flex-col sm:flex-row gap-3">
          <Button href={links.tel} variant="primary">
            <Phone aria-hidden="true" />
            Call {business.phone}
          </Button>
          <Button href={links.sms} variant="outlineDark">
            <MessageSquare aria-hidden="true" />
            Text me
          </Button>
        </div>
      </section>

      <section className="container mx-auto max-w-3xl mb-16">
        <h2 className="text-3xl font-bold mb-4">
          Getting your computer to me
        </h2>
        <p className="mb-4">{area.gettingThere}</p>
        <p>
          I work Monday to Friday, 9am to 6pm, and weekends by appointment.
          Most repairs are done within 24–48 hours, although this isn&apos;t
          guaranteed.
        </p>
      </section>

      <section className="container mx-auto max-w-3xl mb-16">
        <h2 className="text-3xl font-bold mb-4">
          What I can help with in {area.name}
        </h2>
        <ul className="space-y-2 mb-4">
          {Object.entries(services).map(([slug, service]) => (
            <li key={slug}>
              <Link
                href={`/services/${slug}`}
                className="inline-flex items-center gap-1 font-bold text-sky-800 hover:underline"
              >
                {service.name}
                <ArrowRight aria-hidden="true" className="size-4" />
              </Link>
            </li>
          ))}
        </ul>
        <p>
          See all prices on the{" "}
          <Link href="/pricing" className="text-sky-800 underline">
            pricing page
          </Link>
          . I don&apos;t repair Apple devices.
        </p>
      </section>

      <section className="container mx-auto max-w-3xl mb-16">
        <h2 className="text-3xl font-bold mb-4">Questions</h2>
        <FaqList faqs={faqs} />
      </section>

      <CtaBand />

      <section className="container mx-auto max-w-3xl py-16">
        <h2 className="text-2xl font-bold mb-4">Other areas I serve</h2>
        <ul className="flex flex-wrap gap-x-6 gap-y-2">
          {areas
            .filter(({ slug }) => slug !== area.slug)
            .map(({ slug, name }) => (
              <li key={slug}>
                <Link
                  href={`/areas/${slug}`}
                  className="text-sky-800 hover:underline"
                >
                  {name}
                </Link>
              </li>
            ))}
        </ul>
      </section>
    </div>
  );
}