import { ArrowRightIcon, PhoneIcon } from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import { companyData } from "@/data/companyData";
import styles from "./CtaSection.module.css";

export default function CtaSection() {
  return (
    <section className={styles.cta} aria-labelledby="cta-heading">
      <div className={styles.inner}>
        <div className={styles.content}>
          <h2 id="cta-heading" className={styles.heading}>
            Saubere Räume für einen starken ersten Eindruck
          </h2>

          <div className={styles.actions}>
            <Link href="/kontakt" className="btn btn btn--filled-inverse">
              <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={18} weight="bold" />
              </span>
              Jetzt Angebot anfragen
            </Link>

            <a
              href={`tel:${companyData.contact.phone.value}`}
              className="btn btn--tertiary"
            >
              <span className="btn-icon" aria-hidden="true">
                <PhoneIcon size={18} weight="bold" />
              </span>
              {companyData.contact.phone.display}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}