// Hero — light corporate. Tek vurgu: 15 yıllık Sakarya IT ortağı.

const Hero = () => (
  <section style={{
    position: 'relative',
    padding: '160px 0 88px',
    background: `
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(30, 111, 224, 0.05), transparent 70%),
      var(--bg)
    `,
    overflow: 'hidden',
  }}>
    <div className="wrap">
      <div style={{ maxWidth: 920 }}>
        {/* Eyebrow chip */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 14px', borderRadius: 999,
          background: 'var(--surface)', border: '1px solid var(--line)',
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13,
          color: 'var(--ink-2)', marginBottom: 28,
          boxShadow: 'var(--shadow-1)',
        }}>
          <span aria-hidden style={{
            width: 8, height: 8, borderRadius: 999, background: 'var(--success)',
            boxShadow: '0 0 0 3px var(--success-soft)',
          }} />
          Adapazarı · Sakarya · <span style={{ color: 'var(--muted)' }}>2010'dan bu yana</span>
        </div>

        <h1 className="h-display">
          Sakarya'nın <span style={{ color: 'var(--c-datakor)' }}>kurumsal IT</span>,{' '}
          <span style={{ color: 'var(--c-adaplanet)' }}>tedarik</span> ve{' '}
          <span style={{ color: 'var(--navy)' }}>siber güvenlik</span> ortağı.
        </h1>

        <p className="body-lg" style={{
          marginTop: 24, maxWidth: 680,
        }}>
          Bilgim Bilgisayar, Adaplanet ve Datakor olarak; Adapazarı merkezli,
          Sakarya genelinde 15+ yıldır kurumsal müşterilerin tüm teknoloji
          ihtiyacını tek çatı altında çözüyoruz.
        </p>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 36 }}>
          <a href="#markalarimiz" className="btn btn-primary">
            Hizmetlerimizi inceleyin
            <span aria-hidden>↓</span>
          </a>
          <a href="tel:+902647771188" className="btn btn-secondary">
            <span aria-hidden style={{ color: 'var(--c-adaplanet)' }}>☎</span>
            0264 777 11 88
          </a>
        </div>

        {/* Brand chips */}
        <div style={{
          display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 56,
        }}>
          {[
            { dot: 'var(--c-bilgim)',    n: 'Bilgim Bilgisayar', s: 'IT & teknik servis' },
            { dot: 'var(--c-adaplanet)', n: 'Adaplanet',         s: 'Kurumsal tedarik' },
            { dot: 'var(--c-datakor)',   n: 'Datakor',           s: 'Siber güvenlik' },
          ].map(b => (
            <a key={b.n} href="#markalarimiz" style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 18px', borderRadius: 999,
              background: 'var(--surface)', border: '1px solid var(--line)',
              textDecoration: 'none', boxShadow: 'var(--shadow-1)',
              transition: 'all 200ms var(--ease)',
            }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-2)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-1)'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <span aria-hidden style={{
                width: 10, height: 10, borderRadius: 999, background: b.dot,
              }} />
              <span style={{
                fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15,
                color: 'var(--ink)',
              }}>{b.n}</span>
              <span style={{
                fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
                color: 'var(--muted)',
              }}>· {b.s}</span>
            </a>
          ))}
        </div>
      </div>

      {/* Stats row */}
      <div style={{
        marginTop: 88,
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
        gap: 0,
        background: 'var(--surface)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--r-md)',
        boxShadow: 'var(--shadow-1)',
        overflow: 'hidden',
      }}>
        {[
          { n: '15+',    l: 'Yıl sektör deneyimi' },
          { n: '400+',   l: 'Kurumsal müşteri' },
          { n: '1.200+', l: 'Yönetilen cihaz' },
          { n: '16',     l: 'Sakarya ilçesi' },
        ].map((s, i, arr) => (
          <div key={s.l} style={{
            padding: '28px 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(34px, 3.4vw, 44px)',
              color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 1,
            }}>{s.n}</div>
            <div style={{
              fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 15,
              color: 'var(--ink-2)', marginTop: 6,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });