// Hero — emphasizes 17 years of experience, the security partnership stack,
// Datakor's own corporate IT services. Light, B2B, security-confident.

const HERO_COPY = {
  tr: {
    chip:   'Adapazarı · Sakarya · 17 yıllık kurumsal IT tecrübesi',
    title1: 'Kurumsal ',
    titleA: 'siber güvenlik',
    title2: ', sunucu ve ',
    titleB: 'yönetilen IT',
    title3: '. Tek elden, Sakarya\'da.',
    sub:    'Datakor; sunucu ve mail sunucu kurulumundan kurumsal güvenlik duvarına, bulut yedeklemeden 7/24 yönetilen IT desteğine kadar tüm kurumsal bilişim ihtiyacınızı 17 yıllık deneyimle, tek noktadan yönetir. Bitdefender, WatchGuard, Narbulut, Netwrix, LogAlarm, Gaterzone, Logtin ve TransferChain Pass yetkili çözüm ortağıyız.',
    cta1:   'Kurumsal Hizmetleri İncele',
    cta2:   '0264 777 11 88',
    partnersOver: 'Yetkili Çözüm Ortakları',
    stats: [
      { n: '17',     l: 'Yıllık kurumsal IT tecrübesi' },
      { n: '8',      l: 'Yetkili güvenlik markası' },
      { n: '7/24',   l: 'Yönetilen IT desteği' },
      { n: '16',     l: 'Sakarya ilçesinde yerinde' },
    ],
  },
  en: {
    chip:   'Adapazarı · Sakarya · 17 years of enterprise IT experience',
    title1: 'Enterprise ',
    titleA: 'cybersecurity',
    title2: ', servers and ',
    titleB: 'managed IT',
    title3: '. One partner. Sakarya.',
    sub:    'Datakor delivers the full corporate IT stack — from server and mail server deployment to enterprise firewalls, from cloud backup to 24/7 managed IT — with 17 years of experience, from a single point of contact. Authorized partner for Bitdefender, WatchGuard, Narbulut, Netwrix, LogAlarm, Gaterzone, Logtin and TransferChain Pass.',
    cta1:   'Explore Corporate Services',
    cta2:   '+90 264 777 11 88',
    partnersOver: 'Authorized Solution Partners',
    stats: [
      { n: '17',     l: 'Years of enterprise IT' },
      { n: '8',      l: 'Authorized security brands' },
      { n: '24/7',   l: 'Managed support' },
      { n: '16',     l: 'On-site across Sakarya' },
    ],
  },
};

const HERO_PARTNERS = [
  'Bitdefender', 'WatchGuard', 'Narbulut',
  'Netwrix', 'LogAlarm', 'Gaterzone', 'Logtin', 'TransferChain Pass',
];

const Hero = () => {
  const { lang } = useLang();
  const t = pick(HERO_COPY, lang);

  return (
    <section style={{
      position: 'relative',
      padding: '210px 0 88px',
      background: `
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(30,111,224,0.07), transparent 70%),
        var(--bg)
      `,
      overflow: 'hidden',
    }}>
      <div aria-hidden className="grid-pattern" style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        maskImage: 'radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 75%)',
        pointerEvents: 'none',
      }} />

      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 960 }}>
          <div data-dk="hero-chip" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            padding: '8px 14px', borderRadius: 999,
            background: 'var(--surface)', border: '1px solid var(--line)',
            fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13,
            color: 'var(--ink-2)', marginBottom: 30,
            boxShadow: 'var(--shadow-1)',
          }}>
            <span aria-hidden style={{
              width: 8, height: 8, borderRadius: 999, background: 'var(--brand)',
              boxShadow: '0 0 0 3px rgba(30,111,224,0.18)',
            }} />
            {t.chip}
            <span style={{ color: 'var(--muted)' }}>·</span>
            <span style={{ color: 'var(--muted)', fontFamily: 'var(--mono)', fontSize: 12 }}>
              Bilgim Grup
            </span>
          </div>

          <h1 className="h-display">
            {t.title1}
            <span style={{ color: 'var(--brand)' }}>{t.titleA}</span>
            {t.title2}
            <span style={{ color: 'var(--navy)', whiteSpace: 'nowrap' }}>{t.titleB}</span>
            {t.title3}
          </h1>

          <p className="body-lg" style={{ marginTop: 26, maxWidth: 760 }}>
            {t.sub}
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 36 }}>
            <a href="#hizmetler" className="btn btn-primary">
              {t.cta1}
              <span aria-hidden>↓</span>
            </a>
            <a href={`tel:${DK_CONTACT.phoneIntl}`} className="btn btn-secondary">
              <PhoneIcon size={15} color="var(--brand)" />
              {t.cta2}
            </a>
          </div>

          {/* Partner chips — full 8-brand stack */}
          <div style={{ marginTop: 56 }}>
            <div style={{
              textTransform: 'uppercase', letterSpacing: '0.16em',
              fontSize: 11, fontWeight: 700, color: 'var(--muted)',
              fontFamily: 'var(--sans)',
              marginBottom: 14,
            }}>
              {t.partnersOver}
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {HERO_PARTNERS.map(p => (
                <span key={p} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '8px 14px', borderRadius: 999,
                  background: 'var(--surface)', border: '1px solid var(--line)',
                  boxShadow: 'var(--shadow-1)',
                  fontFamily: 'var(--display)', fontWeight: 800, fontSize: 13.5,
                  color: 'var(--ink)',
                }}>
                  <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand)' }} />
                  {p}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* Stat strip */}
        <div data-dk="hero-stats" className="grid-4" style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          background: 'var(--surface)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--r-md)',
          boxShadow: 'var(--shadow-1)',
          overflow: 'hidden',
        }}>
          {t.stats.map((s, i, arr) => (
            <div key={s.l} style={{
              padding: '30px 28px',
              borderRight: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div style={{
                fontFamily: 'var(--display)', fontWeight: 800,
                fontSize: 'clamp(32px, 3.2vw, 42px)',
                color: 'var(--brand)', letterSpacing: '-0.02em', lineHeight: 1,
                fontVariantNumeric: 'tabular-nums',
              }}>{s.n}</div>
              <div style={{
                fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 14.5,
                color: 'var(--ink-2)', marginTop: 6,
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });