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

const SPRINT_POINTS: readonly string[] = [
  "Time-boxed sprint with a clear scope list, from 3,800 EUR. Extra work is a follow-up block, not open scope.",
  "Static Next.js site: no CMS and no server for you to run.",
  "Hosting, SSL and domain renewal are included in a flat monthly plan.",
  "Changes by email, no CMS training.",
];

export const WebsitesSection: React.FC = () => (
  <section className="border-b border-border py-14 md:py-20">
    <Container>
      <SectionHeader
        kicker="websites"
        title="Websites, handled end to end"
        lead="For clients who want a site and no involvement in the technical side."
      />
      <ul className="!m-0 mt-8 max-w-2xl list-none !p-0">
        {SPRINT_POINTS.map((point) => (
          <li key={point} className="!mb-3 flex gap-3 text-base text-muted">
            <span aria-hidden="true" className="font-mono text-accent">
              +
            </span>
            <span>{point}</span>
          </li>
        ))}
      </ul>
      <p className="!mb-0 mt-4 max-w-2xl font-mono text-sm text-faint">
        Not part of it: email and DNS administration.
      </p>
    </Container>
  </section>
);