'use client';

import { useTranslations } from 'next-intl';

export function Contact() {
  const t = useTranslations();

  const contactList = [
    {
      icon: 'uil-envelope-alt',
      titleKey: 'Contact.email',
      value: 'hello@pintumasuk.id',
    },
    {
      icon: 'uil-phone',
      titleKey: 'Contact.phone',
      value: '+62 812-3456-7890',
    },
    {
      icon: 'uil-map-marker',
      titleKey: 'Contact.office',
      valueKey: 'Contact.address',
    },
  ];

  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="contact-card">
          <div className="contact-info">
            <span className="eyebrow eyebrow-light eyebrow-pill">
              <span className="dot"></span>
              {t('Contact.eyebrow')}
            </span>
            <h2 style={{ marginTop: '14px' }}>{t('Contact.title')}</h2>
            <p>{t('Contact.desc')}</p>

            <div className="contact-list">
              {contactList.map((item, i) => (
                <div className="contact-item" key={i}>
                  <div className="ci-icon">
                    <i className={`uil ${item.icon}`}></i>
                  </div>
                  <div>
                    <b>{(t as any)(item.titleKey)}</b>
                    <span>{item.valueKey ? (t as any)(item.valueKey) : item.value}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="contact-form">
            <h3>{t('Contact.form.title')}</h3>
            <form onSubmit={(e) => e.preventDefault()}>
              <div className="field-row">
                <div className="field">
                  <label htmlFor="cname">{t('Contact.form.name')}</label>
                  <input id="cname" type="text" placeholder={t('Contact.form.placeholderName')} />
                </div>
                <div className="field">
                  <label htmlFor="cemail">{t('Contact.email')}</label>
                  <input id="cemail" type="email" placeholder={t('Contact.form.placeholderEmail')} />
                </div>
              </div>
              <div className="field">
                <label htmlFor="cmsg">{t('Contact.form.needs')}</label>
                <textarea id="cmsg" placeholder={t('Contact.form.placeholderNeeds')}></textarea>
              </div>
              <button type="submit" className="btn btn-orange">
                {t('Contact.form.submit')}
              </button>
              <p className="form-note">{t('Contact.form.note')}</p>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}