import PageHero from "@/components/PageHero";
import RepairForm from "@/components/RepairForm";
import { defaultContent } from "@/lib/content/defaults";
import { getContent } from "@/lib/content/service";
import { createContentMetadata } from "../seo";

export const dynamic = "force-dynamic";

export async function generateMetadata() {
  const content = await getContent("repair");
  return createContentMetadata(content.seo, defaultContent.repair.seo);
}

export default async function RepairPage() {
  const content = await getContent("repair");
  const paragraph = content.paragraphs[0];

  return (
    <>
      <PageHero eyebrow={content.eyebrow} title={content.title}>
        {content.subtitle}
      </PageHero>
      <section className="section">
        <div className="container split">
          <div>
            <h2>{paragraph?.title || content.cta.text}</h2>
            <p className="lead">{paragraph?.text || content.intro}</p>
            <ul className="list">
              {content.list.map((item) => <li key={item}>{item}</li>)}
            </ul>
          </div>
          <div className="panel">
            <RepairForm />
          </div>
        </div>
      </section>
    </>
  );
}