import { Link } from "react-router-dom";
import { ABOS, preisText, weitereArbeitTeile } from "@/data/abos";
import "./preise.css";

/** Spezifikation 7.5 (Standardtext; der Preisanker für O1 ist noch nicht freigegeben). */
const EINLEITUNG =
  "Für Ihr Projekt bekommen Sie vorher ein Angebot mit Preis. Für den Betrieb danach gibt es zwei Abos. " +
  "Alle Preise sind Endpreise; als Kleinunternehmer (§\u00a019\u00a0UStG) berechnen wir keine Umsatzsteuer.";

/** Spezifikation 7.5: zwei Abos nebeneinander (Handy untereinander). Zahlen kommen aus src/data/abos.ts. */
const Preise = () => {
  const [vorher, schritte, nachher] = weitereArbeitTeile();

  return (
    <section id="preise" className="wk-section wk-section--alt wk-preise" aria-labelledby="preise-titel">
      <div className="wk-container">
        <h2 id="preise-titel" className="wk-h2 wk-reveal">
          Was es kostet. Vorher.
        </h2>
        <p className="wk-lead wk-reveal">{EINLEITUNG}</p>

        <div className="wk-preise__raster">
          {ABOS.map((abo) => (
            <article key={abo.id} className="wk-abo wk-reveal" aria-labelledby={`abo-${abo.id}`}>
              <h3 id={`abo-${abo.id}`} className="wk-h3 wk-abo__name">
                {abo.name}
              </h3>
              <p className="wk-abo__preis">
                <span className="wk-abo__betrag wk-num">{preisText(abo.preis)}</span>{" "}
                <span className="wk-abo__einheit">im Monat</span>
              </p>
              <p className="wk-abo__text">{abo.beschreibung}</p>
              <p className="wk-abo__aktion">
                <Link to={abo.link.to} className="wk-link wk-abo__link">
                  {abo.link.text}
                </Link>
              </p>
            </article>
          ))}
        </div>

        <p className="wk-preise__weitere wk-reveal">
          {vorher}
          <span className="wk-preise__nicht-trennen">{schritte}</span>
          {nachher}
        </p>
      </div>
    </section>
  );
};

export default Preise;