import {Mail, Phone} from 'lucide-react';
import {contact} from '@/config/contact';

const schedulerUrl = 'https://42min.us/kubapyla';

function phoneHref(phone: string) {
  return `tel:${phone.replaceAll(' ', '')}`;
}

export function ContactSection() {
  return (
    <section id="kontakt" className="contactSection sectionBand">
      <div className="container contactSection__grid">
        <div className="contactSection__intro">
          <div>
            <p className="eyebrow">Kontakt</p>
            <h2>Porozmawiajmy o konfiguratorze 3D</h2>
            <p>Opisz katalog produktów, zakres wariantów albo pierwszy pomysł na demo. Wrócimy z konkretną ścieżką wdrożenia.</p>
          </div>
          <address className="contactSection__details">
            <div>
              <Mail size={22} />
              <a href={`mailto:${contact.email}`}>{contact.email}</a>
            </div>
            <div>
              <Phone size={22} />
              <span>
                {contact.phones.map(phone => (
                  <a href={phoneHref(phone)} key={phone}>
                    {phone}
                  </a>
                ))}
              </span>
            </div>
          </address>
        </div>
        <div className="contactSection__schedulerWrap">
          <iframe
            className="contactSection__scheduler"
            src={schedulerUrl}
            title="Umów rozmowę z Ultifide"
            loading="lazy"
            referrerPolicy="strict-origin-when-cross-origin"
          />
          <a className="contactSection__fallback" href={schedulerUrl} target="_blank" rel="noreferrer">
            Umów rozmowę online w kalendarzu
          </a>
        </div>
      </div>
    </section>
  );
}
