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

export default async function HomePage() {
  const content = await getContent("home");

  return (
    <>
      <section
        className="hero"
        style={{ backgroundImage: `linear-gradient(90deg, rgba(6, 24, 52, 0.96), rgba(8, 42, 96, 0.78), rgba(8, 42, 96, 0.58)), url("${content.heroImage || "/workbench-signal.svg"}"), linear-gradient(135deg, #07172d, #0b3778)` }}
      >
        <div className="container hero-content">
          <p className="eyebrow">{content.eyebrow}</p>
          <h1>{content.title}</h1>
          <p className="lead">{content.subtitle}</p>
          <p className="hero-copy">{content.heroText}</p>
          <div className="hero-badges" aria-label="Technische Schwerpunkte">
            {content.badges.map((badge) => <span key={badge}>{badge}</span>)}
          </div>
          <div className="hero-actions">
            <Link className="button" href={content.cta.primary.href}>{content.cta.primary.label}</Link>
            <Link className="button secondary" href={content.cta.secondary.href}>{content.cta.secondary.label}</Link>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <p className="eyebrow">Leistungsbereiche</p>
            <h2>{content.cta.text}</h2>
            <p className="lead">{content.intro}</p>
          </div>
          <div className="grid three">
            {content.features.map((feature) => <ServiceCard key={feature.title} title={feature.title}>{feature.text}</ServiceCard>)}
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="container split">
          <div>
            <p className="eyebrow">{content.promise.eyebrow}</p>
            <h2>{content.promise.title}</h2>
            <p className="lead">{content.promise.text}</p>
            <div className="actions">
              <Link className="button" href={content.promise.button.href}>{content.promise.button.label}</Link>
            </div>
          </div>
          <div className="card">
            <h3>{content.promise.title}</h3>
            <ul className="list">
              {content.promise.bullets.map((item) => <li key={item}>{item}</li>)}
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}