import Link from "next/link";
import PageHero from "@/components/PageHero";
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("radio-service");
  return createContentMetadata(content.seo, defaultContent["radio-service"].seo);
}

export default async function RadioServicePage() {
  const content = await getContent("radio-service");

  return (
    <>
      <PageHero eyebrow={content.eyebrow} title={content.title}>
        {content.subtitle}
      </PageHero>
      <section className="section">
        <div className="container split">
          <div>
            <h2>{content.listTitle}</h2>
            <ul className="list">
              {content.symptoms.map((symptom) => <li key={symptom}>{symptom}</li>)}
            </ul>
          </div>
          <div className="panel">
            <h2>{content.cta.text}</h2>
            <p className="lead">{content.intro}</p>
            <ul className="list">
              {content.measurements.map((measurement) => <li key={measurement}>{measurement}</li>)}
            </ul>
            <p>{content.alignment}</p>
            <p>{content.repair}</p>
            <Link className="button" href={content.cta.primary.href}>{content.cta.primary.label}</Link>
          </div>
        </div>
      </section>
    </>
  );
}