// Contact CTA + footer

const ContactSection = () => (
  <section id="iletisim" className="section" style={{ background: 'var(--surface)' }}>
    <div className="wrap">
      <div className="card" style={{
        padding: 'clamp(40px, 5vw, 72px)',
        background: 'var(--navy)', color: '#fff',
        border: 0, borderRadius: 'var(--r-lg)',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Subtle accent corner */}
        <div aria-hidden style={{
          position: 'absolute', top: -100, right: -100,
          width: 360, height: 360, borderRadius: 999,
          background: 'radial-gradient(circle, rgba(184,134,46,0.18), transparent 60%)',
          pointerEvents: 'none',
        }} />
        <div aria-hidden style={{
          position: 'absolute', bottom: -120, left: -120,
          width: 320, height: 320, borderRadius: 999,
          background: 'radial-gradient(circle, rgba(30,111,224,0.15), transparent 60%)',
          pointerEvents: 'none',
        }} />

        <div className="contact-grid" style={{
          position: 'relative', zIndex: 1,
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--c-adaplanet)' }}>İletişim</div>
            <h2 style={{
              fontFamily: 'var(--display)', fontWeight: 800,
              fontSize: 'clamp(34px, 4.5vw, 56px)', lineHeight: 1.05,
              letterSpacing: '-0.02em', margin: '0 0 18px', color: '#fff',
              textWrap: 'balance',
            }}>
              Sakarya'daki tüm kurumsal teknoloji ihtiyacınız için tek numara.
            </h2>
            <p style={{
              fontFamily: 'var(--sans)', fontSize: 17, lineHeight: 1.65,
              color: 'rgba(255,255,255,0.78)', fontWeight: 400,
              margin: '0 0 32px', maxWidth: 540,
            }}>
              Bilgim Bilgisayar, Adaplanet veya Datakor — talebiniz hangisine yönelik
              olursa olsun, aynı numaradan ulaşırsınız. Aynı gün yerinde destek için arayın.
            </p>
            <a href="tel:+902647771188" style={{
              display: 'inline-flex', alignItems: 'center', gap: 14,
              padding: '20px 28px', borderRadius: 999,
              background: '#fff', color: 'var(--navy)',
              textDecoration: 'none',
              fontFamily: 'var(--display)', fontWeight: 800,
              fontSize: 'clamp(22px, 2.5vw, 30px)',
              letterSpacing: '-0.005em',
              boxShadow: '0 16px 40px rgba(0,0,0,0.25)',
              transition: 'all 220ms var(--ease)',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 20px 48px rgba(0,0,0,0.32)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.25)'; }}
            >
              <span aria-hidden style={{ color: 'var(--c-adaplanet)', fontSize: 24 }}>☎</span>
              0264 777 11 88
            </a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { lbl: 'Merkez Adres',    v: 'Cumhuriyet Mah.\nDr. Nuri Bayar Cad. 47/B', s: 'Adapazarı, Sakarya' },
              { lbl: 'E-posta',         v: 'satis@bilgim.com.tr',  s: 'destek@bilgim.com.tr' },
              { lbl: 'Çalışma Saatleri', v: 'Pzt – Cumartesi',     s: '08:30 – 19:00' },
            ].map(r => (
              <div key={r.lbl} style={{
                padding: '20px 22px', borderRadius: 'var(--r-md)',
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.12)',
              }}>
                <div style={{
                  fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 11.5,
                  letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'var(--c-adaplanet)', marginBottom: 8,
                }}>{r.lbl}</div>
                <div style={{
                  fontFamily: 'var(--display)', fontWeight: 700, fontSize: 18,
                  color: '#fff', whiteSpace: 'pre-line', lineHeight: 1.45,
                }}>{r.v}</div>
                <div style={{
                  fontFamily: 'var(--sans)', fontSize: 14,
                  color: 'rgba(255,255,255,0.6)', marginTop: 4,
                }}>{r.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      }
    `}</style>
  </section>
);

const FooterRow = () => (
  <footer style={{
    background: 'var(--bg-2)', padding: '48px 0 32px',
    borderTop: '1px solid var(--line)',
  }}>
    <div className="wrap">
      <div className="foot-grid" style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32,
        marginBottom: 40,
      }}>
        <div>
          <BilgimWordmark size="lg" />
          <p style={{
            fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55,
            color: 'var(--muted)', margin: '16px 0 0', maxWidth: 320,
          }}>
            Sakarya'nın 15 yıllık kurumsal teknoloji ortağı. Bilgim Bilgisayar,
            Adaplanet ve Datakor markalarıyla.
          </p>
        </div>

        {[
          { title: 'Markalarımız', links: [
            { l: 'Bilgim Bilgisayar', h: 'https://bilgimbilgisayar.com' },
            { l: 'Adaplanet',         h: 'https://adaplanet.com.tr' },
            { l: 'Datakor',           h: 'https://datakor.com.tr' },
          ]},
          { title: 'Hizmetler', links: [
            { l: 'IT & Teknik Servis', h: '#hizmetler' },
            { l: 'Kurumsal Tedarik',   h: '#hizmetler' },
            { l: 'Siber Güvenlik',     h: '#hizmetler' },
            { l: 'CCTV & Alarm',       h: '#hizmetler' },
            { l: 'PDKS',               h: '#hizmetler' },
          ]},
          { title: 'Şirket', links: [
            { l: 'Hizmet Bölgemiz', h: '#bolgeler' },
            { l: 'SSS',             h: '#sss' },
            { l: 'İletişim',        h: '#iletisim' },
          ]},
        ].map(col => (
          <div key={col.title}>
            <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--muted)' }}>{col.title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {col.links.map(l => (
                <li key={l.l}>
                  <a href={l.h} style={{
                    fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500,
                    color: 'var(--ink-2)', textDecoration: 'none',
                  }}>{l.l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <hr className="hr" />

      <div style={{
        marginTop: 24,
        display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
        fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--muted)',
      }}>
        <span>© 2026 Bilgim · Bilgim Bilgisayar &amp; Yazılım Hizmetleri. Tüm hakları saklıdır.</span>
        <span>Adapazarı · Sakarya · Türkiye</span>
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
      }
      @media (max-width: 560px) {
        .foot-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </footer>
);

Object.assign(window, { ContactSection, FooterRow });