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

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

export async function ContactSection() {
  const t = await getTranslations('contact');

  return (
    <section id="kontakt" className="contactSection sectionBand">
      <div className="container contactSection__grid">
        <div className="contactSection__intro">
          <div>
            <p className="eyebrow">{t('eyebrow')}</p>
            <h2>{t('title')}</h2>
            <p>{t('description')}</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={contact.schedulerUrl}
            title={t('schedulerTitle')}
            loading="lazy"
            referrerPolicy="strict-origin-when-cross-origin"
          />
          <a className="contactSection__fallback" href={contact.schedulerUrl} target="_blank" rel="noreferrer">
            {t('schedulerFallback')}
          </a>
        </div>
      </div>
    </section>
  );
}
