// Shim: yeni-tasarim/pages 2/*.jsx dosyalarını shared-components.jsx ile uyumlu hale getirir
// Sayfa: import etmiyor, browser'da global olarak yüklenir.

(function () {
  // BROSIS_COLORS — shared-components.jsx'in C objesiyle aynı paleti expose et
  if (typeof C !== 'undefined') {
    window.BROSIS_COLORS = {
      primary: C.primary,
      accent:  C.accent,
      soft:    C.soft,
      deep:    C.deep,
      bg:      C.bg,
      border:  C.border,
      muted:   C.muted,
      text:    C.text,
    };
  }

  // activePage adını PageShell'in beklediği id'ye dönüştür
  const ACTIVE_MAP = {
    'Ana Sayfa': 'anasayfa',
    'Anasayfa':  'anasayfa',
    'Kurumsal':  'kurumsal',
    'Hizmetlerimiz': 'hizmetler',
    'Programlar': 'programlar',
    'Belgelendirme': 'belgelendirme',
    'Akademi': 'akademi',
    'Kariyer': 'kariyer',
    'İletişim': 'iletisim',
    'Iletisim': 'iletisim',
  };

  // BrosisPage → PageShell ile sarmalı
  window.BrosisPage = function BrosisPage({ children, activePage, breadcrumb }) {
    const mapped = ACTIVE_MAP[activePage] || (activePage || '').toLowerCase();
    return React.createElement(PageShell, { activePage: mapped, breadcrumb }, children);
  };
})();

// Eski tasarımdan birebir kopyalanmış helper'lar (BROSIS_COLORS'a bağımlı)
function BrosisPageHero({ eyebrow, title, titleAccent, subtitle, bg, children }) {
  const C2 = window.BROSIS_COLORS;
  return (
    <div style={{
      background: bg || C2.primary,
      padding: '72px 64px 80px',
      color: '#fff',
      fontFamily: "'Inter', sans-serif",
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.04,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.8) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
      }}/>
      <div style={{
        position: 'absolute', top: -80, right: -80,
        width: 400, height: 400, borderRadius: '50%',
        background: `radial-gradient(circle, ${C2.accent}22 0%, transparent 70%)`,
        pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', maxWidth: 800 }}>
        {eyebrow && (
          <div style={{
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 700, color: C2.accent, marginBottom: 16,
          }}>{eyebrow}</div>
        )}
        <h1 style={{
          fontSize: 52, fontWeight: 800, lineHeight: 1.05,
          letterSpacing: '-0.03em', margin: '0 0 20px',
          color: '#fff',
        }}>
          {title}{titleAccent && <span style={{
            fontFamily: "'Instrument Serif', serif",
            fontStyle: 'italic', fontWeight: 400,
            color: C2.accent,
          }}> {titleAccent}</span>}
        </h1>
        {subtitle && (
          <p style={{
            fontSize: 18, lineHeight: 1.65, margin: 0,
            color: 'rgba(255,255,255,0.72)', maxWidth: 640,
            fontWeight: 400,
          }}>{subtitle}</p>
        )}
        {children}
      </div>
    </div>
  );
}
window.BrosisPageHero = BrosisPageHero;

function BrosisSection({ children, bg, tight, style: extraStyle }) {
  return (
    <div style={{
      padding: tight ? '48px 64px' : '80px 64px',
      background: bg || '#fff',
      fontFamily: "'Inter', sans-serif",
      ...(extraStyle || {}),
    }}>
      {children}
    </div>
  );
}
window.BrosisSection = BrosisSection;

function SectionHeading({ eyebrow, title, accent, sub, center }) {
  const C2 = window.BROSIS_COLORS;
  return (
    <div style={{ marginBottom: 40, textAlign: center ? 'center' : 'left' }}>
      {eyebrow && (
        <div style={{
          fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          fontWeight: 700, color: C2.accent, marginBottom: 12,
        }}>{eyebrow}</div>
      )}
      <h2 style={{
        fontSize: 38, fontWeight: 800, lineHeight: 1.08,
        letterSpacing: '-0.03em', margin: '0 0 12px',
        color: C2.primary,
      }}>
        {title}{accent && <span style={{
          fontFamily: "'Instrument Serif', serif",
          fontStyle: 'italic', fontWeight: 400,
          color: C2.accent,
        }}> {accent}</span>}
      </h2>
      {sub && <p style={{ fontSize: 16, color: '#475569', margin: 0, lineHeight: 1.6, maxWidth: center ? 600 : 720, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{sub}</p>}
    </div>
  );
}
window.SectionHeading = SectionHeading;

function InfoCard({ icon, title, body, accent, style: extra }) {
  const C2 = window.BROSIS_COLORS;
  return (
    <div style={{
      background: '#fff', border: `1px solid ${C2.border}`, borderRadius: 14,
      padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 12,
      ...(extra || {}),
    }}>
      {icon && (
        <div style={{
          width: 44, height: 44, borderRadius: 11,
          background: accent ? `${C2.accent}18` : C2.soft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 20,
        }}>{icon}</div>
      )}
      {title && <div style={{ fontSize: 15, fontWeight: 700, color: C2.primary }}>{title}</div>}
      {body && <p style={{ fontSize: 13, color: '#475569', margin: 0, lineHeight: 1.55 }}>{body}</p>}
    </div>
  );
}
window.InfoCard = InfoCard;