// Contact section — phone (0264 777 11 88), WhatsApp (0533 561 16 11),
// email (bilgi@datakor.com.tr), address, hours. Bilingual.

const CONTACT_COPY = {
  tr: {
    eyebrow: 'İletişim',
    title:   'Sakarya\'nın kurumsal IT ortağı. Tek aramayla başlar.',
    sub:     'Datakor ekibi Adapazarı merkezli olarak 16 Sakarya ilçesine yerinde hizmet verir. Uzaktan destek için Rustdesk üzerinden 7/24 erişilebilirsiniz.',
    callTitle: 'Telefon',
    callSub:   'Pzt – Cmt · 08:30 – 19:00',
    waTitle:   'WhatsApp',
    waSub:     'Hızlı yanıt için yazın',
    mailTitle: 'E-posta',
    mailSub:   'Tüm kurumsal talepler',
    addrTitle: 'Adres',
    addrLine1: 'Cumhuriyet Mah. Dr. Nuri Bayar Cad. 47/B',
    addrLine2: 'Adapazarı, Sakarya · 54100',
    hoursTitle:'Çalışma Saatleri',
    hoursLine: 'Pazartesi – Cumartesi · 08:30 – 19:00',
    parentTitle: 'Bağlı Olduğu Grup',
    parentLink:  'Bilgim Kurumsal Hizmetler →',
  },
  en: {
    eyebrow: 'Contact',
    title:   'Sakarya\'s corporate IT partner. One call to begin.',
    sub:     'Datakor delivers on-site service across 16 Sakarya districts from Adapazarı, with 24/7 remote support via Rustdesk.',
    callTitle: 'Phone',
    callSub:   'Mon – Sat · 08:30 – 19:00',
    waTitle:   'WhatsApp',
    waSub:     'Write for quick replies',
    mailTitle: 'Email',
    mailSub:   'All corporate inquiries',
    addrTitle: 'Address',
    addrLine1: 'Cumhuriyet Mah. Dr. Nuri Bayar Cad. 47/B',
    addrLine2: 'Adapazarı, Sakarya · 54100',
    hoursTitle:'Hours',
    hoursLine: 'Monday – Saturday · 08:30 – 19:00',
    parentTitle: 'Parent Group',
    parentLink:  'Bilgim Kurumsal Hizmetler →',
  },
};

const ContactTile = ({ icon, title, sub, big, href, accent }) => (
  <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noreferrer" style={{
    display: 'flex', flexDirection: 'column', gap: 8, textDecoration: 'none',
    padding: 22, borderRadius: 'var(--r-md)',
    background: accent ? 'var(--brand)' : 'var(--surface)',
    border: accent ? '1px solid var(--brand)' : '1px solid var(--line)',
    color: accent ? '#fff' : 'var(--ink)',
    transition: 'all 200ms var(--ease)',
    boxShadow: 'var(--shadow-1)',
  }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-2)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-1)'; }}
  >
    <div style={{ opacity: accent ? 0.9 : 1, color: accent ? '#fff' : 'var(--brand)', display: 'flex', alignItems: 'center' }}>{icon}</div>
    <div style={{
      fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 700,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      color: accent ? 'rgba(255,255,255,0.8)' : 'var(--muted)',
    }}>{title}</div>
    <div style={{
      fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22,
      letterSpacing: '-0.01em', color: accent ? '#fff' : 'var(--ink)',
    }}>{big}</div>
    <div style={{
      fontFamily: 'var(--sans)', fontSize: 13, color: accent ? 'rgba(255,255,255,0.78)' : 'var(--muted)',
    }}>{sub}</div>
  </a>
);

const ContactSection = () => {
  const { lang } = useLang();
  const t = pick(CONTACT_COPY, lang);
  return (
    <section id="iletisim" className="section reveal" style={{ background: 'var(--bg)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 820, marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 className="h-section">{t.title}</h2>
          <p className="body-lg" style={{ marginTop: 18 }}>{t.sub}</p>
        </div>

        <div className="grid-3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 14,
        }}>
          <ContactTile
            icon={<PhoneIcon size={22} />}
            title={t.callTitle}
            big={DK_CONTACT.phone}
            sub={t.callSub}
            href={`tel:${DK_CONTACT.phoneIntl}`}
            accent={true}
          />
          <ContactTile
            icon={<MailIcon size={22} />}
            title={t.mailTitle}
            big={DK_CONTACT.email}
            sub={t.mailSub}
            href={`mailto:${DK_CONTACT.email}`}
          />
          <ContactTile
            icon={<WhatsIcon size={22} color="var(--brand)" />}
            title={t.waTitle}
            big={DK_CONTACT.whatsappPhone}
            sub={t.waSub}
            href={DK_CONTACT.whatsapp}
          />
        </div>

        {/* Address + parent group + hours */}
        <div className="grid-3" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 14,
        }}>
          <div className="card" style={{ padding: 22 }}>
            <div style={{
              fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 700,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--muted)', marginBottom: 8,
            }}>{t.addrTitle}</div>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 17, color: 'var(--ink)', lineHeight: 1.4 }}>
              {t.addrLine1}<br/>{t.addrLine2}
            </div>
          </div>
          <div className="card" style={{ padding: 22 }}>
            <div style={{
              fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 700,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--muted)', marginBottom: 8,
            }}>{t.hoursTitle}</div>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 17, color: 'var(--ink)' }}>
              {t.hoursLine}
            </div>
          </div>
          <a href={DK_CONTACT.parent.url} target="_blank" rel="noreferrer" className="card" style={{
            padding: 22, textDecoration: 'none',
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{
              fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 700,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--muted)',
            }}>{t.parentTitle}</div>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 17, color: 'var(--brand)' }}>
              {t.parentLink}
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)' }}>
              bilgim.com.tr
            </div>
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ContactSection });