/* global React, Media, useReveal, useLocale */
// Jullia — Contacts. By introduction, but reachable directly. Two people, two
// lines each: a call, an email. No form, no map, no social wall.

const CONTACTS = [
  { ref: '01', name: 'Oleksandr', roleKey: 'ceoRole', phone: '+48 538 929 272', email: 'Oleksandr.lysak@jullia-audio.com' },
  { ref: '02', name: 'Mark', roleKey: 'managerRole', phone: '+48 539 644 607', email: 'Mark.lysak@jullia-audio.com' },
];

function Contacts() {
  const { Eyebrow, Divider } = window.JulliaDesignSystem_b654aa;
  const { t } = useLocale();
  const ref = useReveal();

  return (
    <div ref={ref} style={{ background: 'var(--canvas)' }}>
      <section style={{ minHeight: '50vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'var(--space-9) var(--margin-page) var(--space-8)' }}>
        <div data-reveal>
          <Eyebrow accent style={{ marginBottom: 'var(--space-6)' }}>{t('contacts.eyebrow')}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(52px, 9vw, 108px)', lineHeight: 0.98, letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: '0 0 var(--space-7)' }}>
            {t('contacts.title')}
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 480, margin: 0 }}>
            {t('contacts.sub')}
          </p>
        </div>
      </section>

      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal>
          <Media ratio="21 / 9" src="assets/img/craftsman-hands.jpg" alt="" showCaption={false} />
        </div>
      </section>

      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal style={{ marginBottom: 'var(--space-8)' }}><Divider /></div>
        <div className="jx-grid-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 'var(--space-8)' }}>
          {CONTACTS.map((c) => (
            <article data-reveal key={c.ref} style={{ borderTop: '1px solid var(--hairline)', paddingTop: 'var(--space-6)' }}>
              <Eyebrow index={c.ref} style={{ marginBottom: 'var(--space-7)' }}>{t(`contacts.${c.roleKey}`)}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-3xl)', letterSpacing: '-0.02em', color: 'var(--text-emphasis)', margin: '0 0 var(--space-6)' }}>{c.name}</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 6 }}>{t('contacts.callLabel')}</div>
                  <a href={`tel:${c.phone.replace(/\s+/g, '')}`} style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', color: 'var(--text-primary)', textDecoration: 'none' }}>{c.phone}</a>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 6 }}>{t('contacts.emailLabel')}</div>
                  <a href={`mailto:${c.email}`} style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', color: 'var(--text-primary)', textDecoration: 'none', wordBreak: 'break-all' }}>{c.email}</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

window.Contacts = Contacts;