import { Container } from "@/src/components/site";

type Reference = {
  readonly name: string;
  readonly href: string;
  readonly built: string;
};

const REFERENCES: readonly Reference[] = [
  {
    name: "klz-cables.com",
    href: "https://klz-cables.com",
    built:
      "multilingual (DE/EN) Next.js site with a headless CMS and generated PDF datasheets",
  },
  {
    name: "e-tib.com",
    href: "https://e-tib.com",
    built:
      "multilingual Next.js site with structured data, automated QA and CI/CD",
  },
];

export const BuiltAndRunning: React.FC = () => (
  <section className="border-b border-border py-10 md:py-14">
    <Container>
      <p className="!mb-0 text-sm leading-relaxed text-muted md:text-base">
        <span className="mr-2 font-mono text-xs uppercase tracking-widest text-accent">
          Built and running
        </span>
        {REFERENCES.map((ref, index) => (
          <span key={ref.name}>
            {index > 0 ? " · " : null}
            <a
              href={ref.href}
              rel="noopener"
              className="underline underline-offset-4 hover:text-accent"
            >
              {ref.name}
            </a>{" "}
            {ref.built}
          </span>
        ))}
      </p>
    </Container>
  </section>
);