// 3 markamız — light cards + detail modal

const BRANDS = [
  {
    id: 'bilgim',
    name: 'Bilgim Bilgisayar',
    domain: 'bilgimbilgisayar.com',
    tagline: 'Mağaza · IT & teknik servis',
    accent: 'var(--c-bilgim)',
    accentSoft: 'var(--c-bilgim-soft)',
    description: 'Adapazarı\'ndaki mağazamızda kurumsal ve bireysel müşterilere bilgisayar, laptop, yazıcı, sarf malzeme satışı yapıyor; donanım tamiri ve yerinde teknik servis veriyoruz. Mikro ve Akınsoft WOLVOX yetkili satıcısıyız.',
    services: [
      'Mağaza · kurumsal & bireysel satış',
      'Bilgisayar & laptop donanım tamiri',
      'Yazıcı & endüstriyel fotokopi tamiri',
      'Yazıcı, toner ve sarf tedariği',
      'Yerinde teknik destek',
      'Network kurulumu',
      'Kurumsal hosting & mail kurulumu',
      'Garantili teslim mail hizmeti',
      'NAS depolama & yedekleme sistemleri',
      'ERP yazılım kurulumu (Mikro, WOLVOX)',
      'Yazılım danışmanlığı (Mikro, Akınsoft)',
      'E-Fatura geçiş süreç desteği',
      'E-İmza (Arksigner) — 15 dk aktivasyon',
      'Periyodik bakım sözleşmeleri',
      'Kurumsal bilgi işlem bakım anlaşmaları',
    ],
    partners: ['Mikro', 'Akınsoft WOLVOX', 'Arksigner'],
    personnel: [
      { name: 'Emre Yılmaz',  role: 'Kurucu Ortak' },
      { name: 'Fatih Yılmaz', role: 'Kurucu Ortak' },
    ],
  },
  {
    id: 'adaplanet',
    name: 'Adaplanet',
    fullName: 'Adaplanet Kurumsal Tedarik',
    domain: 'adaplanet.com.tr',
    tagline: 'Kurumsal tedarik & ofis ekipmanları',
    accent: 'var(--c-adaplanet)',
    accentSoft: 'var(--c-adaplanet-soft)',
    description: 'Kurumsal ölçekte toplu tedarik çözümleri. Teknoloji ürünleri, ofis ekipmanları, kurumsal kırtasiye ve sarf malzemelerini avantajlı koşullarla, tek faturada ve hızlı teslimat ile ulaştırıyoruz.',
    services: [
      'Toplu teknoloji ürünü tedariği',
      'Muadil toner & sarf malzeme (geniş stok)',
      'Kurumsal kırtasiye ürünleri',
      'Ofis ekipmanları & mobilya',
      'Yazıcı sarfı & ofis sarfı',
      'Yıllık çerçeve tedarik sözleşmeleri',
      'Tek faturada satın alma',
      'Hızlı bölgesel teslimat',
    ],
    partners: [],
    personnel: [
      { name: 'Emre Yılmaz',   role: 'Kurucu Ortak' },
      { name: 'Enes Demirtaş', role: 'Operasyon' },
      { name: 'Şenol Arslan',  role: 'Tedarik' },
      { name: 'Özgür Eker',    role: 'Kurumsal Satış' },
    ],
  },
  {
    id: 'datakor',
    name: 'Datakor',
    domain: 'datakor.com.tr',
    tagline: 'Siber güvenlik & yönetilen IT',
    accent: 'var(--c-datakor)',
    accentSoft: 'var(--c-datakor-soft)',
    description: 'Kurumsal siber güvenlik, yönetilen IT hizmetleri ve fiziksel güvenlik çözümleri. Bitdefender ve WatchGuard yetkili iş ortağı. CCTV, alarm ve PDKS sistemleri ile bütünleşik koruma.',
    services: [
      'Endpoint güvenliği (Bitdefender)',
      'Firewall & VPN (WatchGuard)',
      'Sunucu & firewall bakım anlaşmalı destek',
      'Bulut yedekleme (Narbulut yetkili bayi)',
      '3-2-1 yedekleme stratejisi & uygulama',
      '7/24 yönetilen IT desteği',
      'CCTV kamera sistemleri',
      'Hırsızlık & yangın alarmı',
      'PDKS — personel devam kontrol',
      'Siber güvenlik denetimi',
    ],
    partners: ['Bitdefender', 'WatchGuard', 'Narbulut'],
    personnel: [
      { name: 'Fatih Yılmaz', role: 'Kurucu Ortak' },
      { name: 'Sefa Satı',    role: 'Güvenlik Uzmanı' },
    ],
  },
];

const BrandCard = ({ b, onOpen }) => (
  <article style={{
    background: 'var(--surface)',
    border: '1px solid var(--line)',
    borderRadius: 'var(--r-lg)',
    overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
    transition: 'all 240ms var(--ease)',
    boxShadow: 'var(--shadow-1)',
    minHeight: 480,
  }}
    onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-2)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
    onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-1)'; e.currentTarget.style.transform = 'translateY(0)'; }}
  >
    {/* Accent band */}
    <div style={{
      height: 6, background: b.accent,
    }} />

    <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '5px 10px', borderRadius: 999,
          background: b.accentSoft,
          fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 11.5,
          letterSpacing: '0.1em', textTransform: 'uppercase',
          color: b.accent,
        }}>
          <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: b.accent }} />
          {b.tagline}
        </span>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 12,
          color: 'var(--faint)',
        }}>0{BRANDS.indexOf(b) + 1}</span>
      </div>

      <h3 className="h-card" style={{ fontSize: 30, marginTop: 4, minHeight: '2.4em' }}>{b.name}</h3>

      <div style={{
        fontFamily: 'var(--mono)', fontSize: 13.5, color: 'var(--muted)',
      }}>{b.domain}</div>

      <ul style={{ listStyle: 'none', padding: 0, margin: '8px 0 0', display: 'flex', flexDirection: 'column', gap: 0 }}>
        {b.services.slice(0, 4).map(s => (
          <li key={s} style={{
            fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink-2)',
            padding: '10px 0', borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <span aria-hidden style={{
              width: 5, height: 5, borderRadius: 999, background: b.accent,
              flex: '0 0 5px',
            }} />
            {s}
          </li>
        ))}
        <li style={{
          fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--muted)',
          padding: '12px 0 0 17px', fontWeight: 500,
        }}>
          +{b.services.length - 4} hizmet daha
        </li>
      </ul>

      <button onClick={() => onOpen(b)} style={{
        marginTop: 'auto',
        background: 'transparent', border: 0, cursor: 'pointer',
        padding: '14px 0 0', borderTop: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 14,
        color: 'var(--ink)', textAlign: 'left',
      }}>
        <span>Detayları ve ekibi gör</span>
        <span aria-hidden style={{ color: b.accent, fontSize: 18 }}>→</span>
      </button>
    </div>
  </article>
);

const BrandsSection = ({ onOpen }) => (
  <section id="markalarimiz" className="section reveal" style={{ background: 'var(--surface)' }}>
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 24, marginBottom: 56 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Markalarımız</div>
          <h2 className="h-section">Üç uzmanlık alanı. <span style={{ color: 'var(--muted)' }}>Tek telefon numarası.</span></h2>
        </div>
        <a href="tel:+902647771188" className="btn btn-secondary hide-on-mobile">
          <span aria-hidden style={{ color: 'var(--c-adaplanet)' }}>☎</span>
          0264 777 11 88
        </a>
      </div>

      <div className="brand-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22,
      }}>
        {BRANDS.map(b => <BrandCard key={b.id} b={b} onOpen={onOpen} />)}
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .brand-grid { grid-template-columns: 1fr !important; }
        .hide-on-mobile { display: none !important; }
      }
    `}</style>
  </section>
);

// ---- Modal ----
const BrandModal = ({ b, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [onClose]);

  const initials = (n) => n.split(' ').map(p => p[0]).slice(0, 2).join('');

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div
        className="modal-panel card"
        onClick={e => e.stopPropagation()}
        style={{
          maxWidth: 960, width: '100%', maxHeight: '90vh', overflow: 'auto',
          background: 'var(--surface)', borderRadius: 'var(--r-lg)',
          padding: 0, position: 'relative', boxShadow: 'var(--shadow-3)',
        }}>
        {/* Accent band */}
        <div style={{ height: 8, background: b.accent }} />

        <button onClick={onClose} aria-label="Kapat" style={{
          position: 'absolute', top: 20, right: 20, zIndex: 2,
          width: 40, height: 40, borderRadius: 999,
          background: 'var(--surface)', border: '1px solid var(--line)',
          cursor: 'pointer', fontSize: 20, lineHeight: 1, color: 'var(--ink)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>×</button>

        <div style={{ padding: 'clamp(28px, 4vw, 48px)' }}>
          {/* Head */}
          <div style={{ marginBottom: 32, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 999,
              background: b.accentSoft, color: b.accent,
              fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 12,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              marginBottom: 16,
            }}>
              <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: b.accent }} />
              {b.tagline}
            </span>
            <h2 style={{
              fontFamily: 'var(--display)', fontWeight: 800,
              fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.05,
              letterSpacing: '-0.02em', margin: '0 0 8px', color: 'var(--ink)',
            }}>{b.fullName || b.name}</h2>
            <a href={`https://${b.domain}`} target="_blank" rel="noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 16px', borderRadius: 999,
              background: b.accentSoft, color: b.accent,
              border: `1px solid ${b.accent}`,
              fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15,
              textDecoration: 'none', letterSpacing: '0.01em',
              transition: 'all 200ms var(--ease)',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = b.accent; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = b.accentSoft; e.currentTarget.style.color = b.accent; }}
            >
              <span aria-hidden style={{ fontSize: 14 }}>🌐</span>
              {b.domain}
              <span aria-hidden style={{ fontSize: 14, marginLeft: 2 }}>↗</span>
            </a>
          </div>

          {/* Body */}
          <div className="modal-body" style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
          }}>
            <div>
              <p className="body-lg" style={{ margin: '0 0 32px', maxWidth: 540 }}>
                {b.description}
              </p>

              <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--muted)' }}>Hizmetler</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px' }}>
                {b.services.map(s => (
                  <li key={s} style={{
                    fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 500,
                    color: 'var(--ink)', padding: '12px 0',
                    borderBottom: '1px solid var(--line)',
                    display: 'flex', alignItems: 'center', gap: 12,
                  }}>
                    <span aria-hidden style={{
                      width: 22, height: 22, borderRadius: 999,
                      background: b.accentSoft, color: b.accent,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      flex: '0 0 22px', fontSize: 12, fontWeight: 800,
                    }}>✓</span>
                    {s}
                  </li>
                ))}
              </ul>

              {b.partners && b.partners.length > 0 && (
                <>
                  <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--muted)' }}>Yetkili Ortaklar</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {b.partners.map(p => (
                      <span key={p} style={{
                        fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14,
                        padding: '7px 14px', borderRadius: 999,
                        background: 'var(--bg)', border: '1px solid var(--line-strong)',
                        color: 'var(--ink-2)',
                      }}>{p}</span>
                    ))}
                  </div>
                </>
              )}
            </div>

            <div>
              <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--muted)' }}>Ekibimiz</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
                {b.personnel.map(p => (
                  <div key={p.name} style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: 14, borderRadius: 'var(--r-sm)',
                    background: 'var(--bg)',
                    border: '1px solid var(--line)',
                  }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 999,
                      background: b.accentSoft, color: b.accent,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--display)', fontWeight: 800, fontSize: 15,
                      flex: '0 0 44px',
                    }}>{initials(p.name)}</div>
                    <div>
                      <div style={{
                        fontFamily: 'var(--display)', fontWeight: 700, fontSize: 16,
                        color: 'var(--ink)',
                      }}>{p.name}</div>
                      <div style={{
                        fontFamily: 'var(--sans)', fontSize: 12, fontWeight: 600,
                        color: 'var(--muted)', letterSpacing: '0.06em',
                        textTransform: 'uppercase', marginTop: 2,
                      }}>{p.role}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="eyebrow" style={{ marginBottom: 10, color: 'var(--muted)' }}>İletişim</div>
              <a href="tel:+902647771188" style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '16px 18px', borderRadius: 'var(--r-sm)',
                background: 'var(--navy)', color: '#fff',
                textDecoration: 'none',
                fontFamily: 'var(--display)', fontWeight: 800, fontSize: 20,
                letterSpacing: '0.02em',
              }}>
                <span aria-hidden style={{ color: 'var(--c-adaplanet)', fontSize: 22 }}>☎</span>
                0264 777 11 88
              </a>
              <div style={{
                fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--muted)',
                marginTop: 10,
              }}>
                Üç marka için tek numara. Pzt–Cmt 08:30–19:00
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 760px) {
            .modal-body { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </div>
    </div>
  );
};

Object.assign(window, { BrandsSection, BrandModal, BRANDS });