import { company } from "@/lib/site-content";

export function ContactStrip() {
  return (
    <section id="kontakt" className="section-block pb-10">
      <div className="container-shell">
        <div className="rounded-3xl border border-copper-200 bg-copper-50 p-7 shadow-card sm:p-10">
          <div className="grid gap-6 md:grid-cols-[1.2fr_1fr] md:items-center">
            <div>
              <p className="eyebrow text-copper-700">Direkter Kontakt</p>
              <h2 className="mt-3 text-3xl font-semibold text-alpine-900">Ein Anruf klaert oft mehr als zehn Mails.</h2>
              <p className="mt-4 max-w-2xl text-alpine-700">
                Wenn Sie einen Tarif wechseln, einen Standort anbinden oder eine Stoerung melden wollen: Sie landen
                nicht in einem anonymen Ticketsystem, sondern bei einem Team aus der Region.
              </p>
            </div>

            <div className="rounded-2xl border border-copper-200 bg-white p-6">
              <ul className="space-y-3 text-sm text-alpine-800">
                <li>
                  <span className="font-semibold">Telefon:</span>{" "}
                  <a className="text-alpine-700 underline decoration-copper-400 underline-offset-4" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
                    {company.phone}
                  </a>
                </li>
                <li>
                  <span className="font-semibold">Beratung:</span>{" "}
                  <a className="text-alpine-700 underline decoration-copper-400 underline-offset-4" href={`mailto:${company.email}`}>
                    {company.email}
                  </a>
                </li>
                <li>
                  <span className="font-semibold">Stoerung:</span>{" "}
                  <a className="text-alpine-700 underline decoration-copper-400 underline-offset-4" href={`mailto:${company.supportEmail}`}>
                    {company.supportEmail}
                  </a>
                </li>
                <li>
                  <span className="font-semibold">Erreichbarkeit:</span> {company.openingHours}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}