import { Link } from "react-router-dom";
import { usePageMeta } from "@/hooks/use-page-meta";
import "./unterseiten.css";

/** „Der Unterschied“: nummerierte Textzeilen statt Karten (Phase 2 schreibt die ganze Seite neu). */
const UNTERSCHIED = [
  {
    nr: "01",
    titel: "Alles aus einer Hand",
    text: "Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.",
  },
  {
    nr: "02",
    titel: "Systeme statt Inseln",
    text: "CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.",
  },
  {
    nr: "03",
    titel: "Betreuung im Abo",
    text: "Nach dem Go-live kümmern wir uns im Wartungs-Abo um Updates und kleine Änderungen.",
  },
];

const About = () => {
  usePageMeta(
    "Über uns",
    "WEBklar hilft KMU beim digitalen Wachstum: Systeme statt Chaos, ein Partner für Website, Prozesse und Automatisierung."
  );

  return (
    <>
      <div className="wk-seite">
        <div className="wk-container">
          <div className="wk-seite__kopf">
            <span className="wk-eyebrow">Über WEBklar</span>
            <h1 className="wk-seite__titel">Digitalisierung, die im Alltag spürbar wird.</h1>
          </div>

          <div className="wk-ueber__text">
            <p>
              WEBklar ist die Webagentur für Unternehmen, die wachsen wollen – ohne
              dass Geschäftsführung und Team unter Tool-Chaos und manuellen Abläufen leiden.
            </p>

            <p>
              Wir verbinden <strong>Website, Prozesse und Automatisierung</strong> zu einem System. Kein
              isoliertes Redesign, kein weiteres Plugin – sondern eine Lösung, die Anfragen, Daten und Abläufe
              zusammenführt.
            </p>
          </div>

          <div className="wk-ueber__aussage">
            <p>Unser Anspruch: weniger Reibung.</p>
            <p>Mehr planbares Wachstum.</p>
          </div>

          <p className="wk-ueber__schluss">
            Starten Sie mit einem kostenlosen Gespräch – wir zeigen Ihnen die nächsten Schritte.
          </p>

          <div className="wk-seite__aktionen">
            <Link to="/kontakt" className="wk-btn wk-btn--primary">
              Projekt besprechen
            </Link>
            <Link to="/" className="wk-btn wk-btn--secondary">
              Zur Startseite
            </Link>
          </div>
        </div>
      </div>

      {/* Der Unterschied */}
      <section className="wk-section wk-section--alt" aria-labelledby="unterschied-titel">
        <div className="wk-container">
          <span className="wk-eyebrow">Der Unterschied</span>
          <h2 id="unterschied-titel" className="wk-h2">
            Warum Unternehmen zu uns wechseln.
          </h2>

          <ol className="wk-unterschied" role="list">
            {UNTERSCHIED.map((punkt) => (
              <li key={punkt.nr}>
                <p className="wk-unterschied__nr" aria-hidden>
                  {punkt.nr}
                </p>
                <h3 className="wk-h3">{punkt.titel}</h3>
                <p>{punkt.text}</p>
              </li>
            ))}
          </ol>

          <div className="wk-seite__aktionen">
            <Link to="/kontakt" className="wk-btn wk-btn--primary">
              Projekt besprechen
            </Link>
          </div>
        </div>
      </section>
    </>
  );
};

export default About;