/* =====================================================================
   Brodemy · Pusula — Shared Components
   Tüm sayfaların kullandığı bileşenler: Nav, Footer, Button, CourseCard,
   TierBadge, ProfPill, Icon, Logo, Container, Section.

   Tüm bileşenler window'a export ediliyor → page'lerden global olarak
   erişilebilir.
   ===================================================================== */

// ── Logo & Brand mark ─────────────────────────────────────────────
function PusulaMark({ size = 32, accent = '#E0A23A', body = '#FBFAF6' }) {
  return (
    <svg viewBox="0 0 32 32" width={size} height={size} fill="none">
      <circle cx="16" cy="16" r="13" stroke={body} strokeWidth="1.4" opacity="0.4" />
      <path d="M16 4 L19 16 L16 28 L13 16 Z" fill={accent} />
      <path d="M4 16 L16 19 L28 16 L16 13 Z" fill={body} opacity="0.92" />
      <circle cx="16" cy="16" r="1.8" fill={body} />
    </svg>
  );
}

function Logo({ inverse = false, size = 'md' }) {
  const sizes = {
    sm: 'text-[18px]',
    md: 'text-[22px]',
    lg: 'text-[28px]',
  };
  const ink = inverse ? '#FBFAF6' : '#13182B';
  const accent = '#E0A23A';
  return (
    <span
      className={`font-sans font-bold ${sizes[size]} tracking-[-0.045em] leading-none`}
      style={{ color: ink }}
    >
      brodemy<span style={{ color: accent }}>.</span>
    </span>
  );
}

// Small square brand mark (for favicon, avatar slots, lockup squares).
// Text-only: lowercase "b." in a rounded square.
function BrodemyMark({ size = 32, inverse = false }) {
  const bg = inverse ? '#FBFAF6' : '#252474';
  const fg = inverse ? '#252474' : '#FBFAF6';
  const accent = '#E0A23A';
  return (
    <div
      className="rounded-[10px] grid place-items-center"
      style={{
        width: size,
        height: size,
        background: bg,
        boxShadow: inverse ? 'none' : '0 8px 22px rgba(37, 36, 116, 0.32)',
      }}
    >
      <span
        className="font-sans font-bold leading-none"
        style={{
          color: fg,
          fontSize: size * 0.56,
          letterSpacing: '-0.06em',
        }}
      >
        b<span style={{ color: accent }}>.</span>
      </span>
    </div>
  );
}

// ── Icons (Lucide-style inline SVG) ───────────────────────────────
const ICONS = {
  search:   <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
  menu:     <><path d="M3 6h18M3 12h18M3 18h18"/></>,
  filter:   <><path d="M3 6h18M7 12h10M10 18h4"/></>,
  user:     <><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
  bell:     <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>,
  arrow:    <><path d="M5 12h14M13 6l6 6-6 6"/></>,
  arrowR:   <><path d="M5 12h14M13 6l6 6-6 6"/></>,
  arrowL:   <><path d="M19 12H5M11 18l-6-6 6-6"/></>,
  arrowDn:  <><path d="M12 5v14M6 13l6 6 6-6"/></>,
  check:    <><path d="M20 6 9 17l-5-5"/></>,
  checkC:   <><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,
  play:     <polygon points="5,3 19,12 5,21" fill="currentColor" stroke="none"/>,
  clock:    <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
  cal:      <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
  book:     <><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></>,
  award:    <><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></>,
  brief:    <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
  briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
  chat:     <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
  star:     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor" stroke="none"/>,
  shield:   <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></>,
  globe:    <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
  building: <><rect x="4" y="2" width="16" height="20" rx="1"/><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M8 10h.01M16 10h.01M12 10h.01M8 14h.01M16 14h.01M12 14h.01"/></>,
  graduation: <><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></>,
  hammer:   <><path d="m15 12-8.5 8.5a2.12 2.12 0 1 1-3-3L12 9"/><path d="M17.64 15 22 10.64"/><path d="m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91"/></>,
  scissors: <><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="m20 4-8.12 8.12M14.8 14.8 20 20M8.12 8.12 12 12"/></>,
  heart:    <><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></>,
  truck:    <><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></>,
  trending: <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
  wrench:   <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
  x:        <><path d="M18 6 6 18M6 6l12 12"/></>,
  eye:      <><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></>,
  eyeOff:   <><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></>,
  phone:    <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></>,
  mail:     <><path d="M22 7V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2"/><polyline points="2 7 12 13 22 7"/></>,
  zap:      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="currentColor" stroke="none"/>,
  lock:     <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
};

function Icon({ name, size = 18, className = '', strokeWidth = 1.75, fill = 'none' }) {
  return (
    <svg
      viewBox="0 0 24 24"
      width={size}
      height={size}
      fill={fill}
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      {ICONS[name] || null}
    </svg>
  );
}

// ── Container / Section ───────────────────────────────────────────
function Container({ children, className = '', narrow = false }) {
  return (
    <div className={`relative mx-auto px-6 ${narrow ? 'max-w-[960px]' : 'max-w-[1280px]'} ${className}`}>
      {children}
    </div>
  );
}

function Section({ children, className = '', id }) {
  return (
    <section id={id} className={`relative py-16 md:py-20 ${className}`}>
      {children}
    </section>
  );
}

// ── Button ────────────────────────────────────────────────────────
function Button({ variant = 'primary', size = 'md', children, onClick, className = '', icon, iconRight, disabled, type = 'button' }) {
  const base = 'inline-flex items-center justify-center gap-2 font-semibold leading-none rounded-[10px] transition-all duration-200 ease-out active:scale-[0.98] whitespace-nowrap disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100';
  const sizes = {
    sm: 'px-3.5 py-2 text-[13px]',
    md: 'px-[18px] py-3 text-sm',
    lg: 'px-6 py-4 text-[15px]',
  };
  const variants = {
    primary: 'bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-paper shadow-[0_8px_22px_rgba(37,36,116,0.32)]',
    accent:  'bg-accent-400 hover:bg-accent-300 active:bg-accent-500 text-ink shadow-[0_8px_22px_rgba(224,162,58,0.32)]',
    secondary: 'bg-mist hover:bg-slate-200 active:bg-slate-300 text-ink',
    outline: 'bg-transparent text-ink shadow-[inset_0_0_0_1px_rgba(19,24,43,0.18)] hover:bg-slate-50 hover:shadow-[inset_0_0_0_1px_rgba(19,24,43,0.7)]',
    ghost:   'bg-transparent text-ink hover:bg-mist',
    danger:  'bg-red-700 hover:bg-red-800 text-white',
    inverse: 'bg-paper hover:bg-mist text-ink',
  };
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}
    >
      {icon && <Icon name={icon} size={size === 'lg' ? 18 : size === 'sm' ? 14 : 16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'lg' ? 18 : size === 'sm' ? 14 : 16} />}
    </button>
  );
}

// ── TierBadge ─────────────────────────────────────────────────────
function TierBadge({ tier, variant = 'strong', size = 'md' }) {
  const config = {
    plus: { name: 'Plus', c: 'var(--tier-plus)', deep: 'var(--tier-plus-deep)' },
    pro:  { name: 'Pro',  c: 'var(--tier-pro)',  deep: 'var(--tier-pro-deep)' },
    mo:   { name: 'Meslek Okulu', c: 'var(--tier-mo)', deep: 'var(--tier-mo-deep)' },
  }[tier];
  if (!config) return null;
  const sizeCls = size === 'sm' ? 'px-2 py-0.5 text-[10px]' : 'px-2.5 py-1 text-[11px]';
  if (variant === 'strong') {
    return (
      <span className={`inline-flex items-center gap-1.5 ${sizeCls} rounded-md font-bold uppercase tracking-[0.05em] text-white`}
            style={{ background: config.c }}>
        <span className="w-1.5 h-1.5 rounded-full bg-white"></span>
        {config.name}
      </span>
    );
  }
  // soft variant
  return (
    <span className={`inline-flex items-center gap-1.5 ${sizeCls} rounded-md font-bold uppercase tracking-[0.04em]`}
          style={{ background: `color-mix(in srgb, ${config.c} 12%, transparent)`, color: config.deep }}>
      <span className="w-1.5 h-1.5 rounded-full" style={{ background: config.c }}></span>
      {config.name}
    </span>
  );
}

// ── ProfPill ──────────────────────────────────────────────────────
function ProfPill({ prof, variant = 'glass', size = 'md', icon = false }) {
  const config = {
    emlak:    { name: 'Emlak',    c: '#3DB8E8', icon: 'building' },
    insaat:   { name: 'İnşaat',   c: '#F59E0B', icon: 'hammer' },
    hizmet:   { name: 'Hizmet',   c: '#10B981', icon: 'briefcase' },
    guzellik: { name: 'Güzellik', c: '#EC4899', icon: 'scissors' },
    saglik:   { name: 'Sağlık',   c: '#DC2626', icon: 'heart' },
    ulasim:   { name: 'Ulaşım',   c: '#6366F1', icon: 'truck' },
    satis:    { name: 'Satış',    c: '#8B5CF6', icon: 'trending' },
    teknik:   { name: 'Teknik',   c: '#64748B', icon: 'wrench' },
  }[prof];
  if (!config) return null;
  const sizeCls = size === 'sm' ? 'px-2.5 py-1 text-[11px]' : 'px-3 py-1.5 text-xs';
  if (variant === 'glass') {
    return (
      <span className={`inline-flex items-center gap-1.5 ${sizeCls} rounded-md font-semibold tracking-[0.02em] text-white backdrop-blur-md`}
            style={{ background: 'rgba(255,255,255,0.18)' }}>
        {config.name}
      </span>
    );
  }
  if (variant === 'soft') {
    return (
      <span className={`inline-flex items-center gap-1.5 ${sizeCls} rounded-md font-semibold`}
            style={{ background: `color-mix(in srgb, ${config.c} 12%, transparent)`, color: config.c, border: `1px solid color-mix(in srgb, ${config.c} 25%, transparent)` }}>
        <span className="w-1.5 h-1.5 rounded-full" style={{ background: config.c }}></span>
        {config.name}
      </span>
    );
  }
  // solid
  return (
    <span className={`inline-flex items-center gap-1.5 ${sizeCls} rounded-md font-semibold text-white`}
          style={{ background: config.c }}>
      {config.name}
    </span>
  );
}

// ── CourseCard ────────────────────────────────────────────────────
function CourseCard({ course, onClick, layout = 'default' }) {
  const cover = course.cover || `https://images.unsplash.com/${course.coverId}?w=700&q=70`;
  if (layout === 'compact') {
    return (
      <div onClick={onClick} className="cursor-pointer group bg-white border border-rule rounded-[14px] overflow-hidden hover:shadow-[var(--shadow-card-hover)] hover:border-brand-300 hover:-translate-y-0.5 transition-all duration-200">
        <div className="course-cover aspect-[16/10] relative p-3 flex flex-col justify-between text-white"
             style={{ '--cover-img': `url(${cover})` }}>
          <div className="flex justify-between items-center">
            <TierBadge tier={course.tier} size="sm" />
            <ProfPill prof={course.prof} variant="glass" size="sm" />
          </div>
        </div>
        <div className="p-4">
          <div className="text-[10px] font-mono uppercase tracking-[0.10em] text-fg-3 font-semibold mb-1.5">{course.vendor}</div>
          <h4 className="font-display font-semibold text-[15px] leading-[1.2] tracking-[-0.02em] text-ink mb-2 line-clamp-2">{course.title}</h4>
          <div className="flex justify-between items-end pt-2 border-t border-rule">
            <div className="font-display font-bold text-[18px] text-ink tracking-[-0.025em]">{course.price}</div>
            <span className="text-[11px] text-fg-3">{course.duration}</span>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div onClick={onClick} className="cursor-pointer group bg-white border border-rule rounded-[18px] overflow-hidden hover:shadow-[var(--shadow-card-hover)] hover:border-brand-300 hover:-translate-y-1 transition-all duration-200">
      <div className="course-cover aspect-[16/10] relative p-4 flex flex-col justify-between text-white"
           style={{ '--cover-img': `url(${cover})` }}>
        <div className="flex justify-between items-center">
          <TierBadge tier={course.tier} />
          <ProfPill prof={course.prof} variant="glass" />
        </div>
        {course.cohort && (
          <div className="text-[11px] font-semibold tracking-[0.08em] uppercase opacity-90">
            {course.cohort}
          </div>
        )}
      </div>
      <div className="p-5">
        <div className="text-[11px] font-mono uppercase tracking-[0.10em] text-fg-3 font-semibold mb-2">{course.vendor}</div>
        <h4 className="font-display font-semibold text-[18px] leading-[1.2] tracking-[-0.02em] text-ink mb-3 line-clamp-2 min-h-[2.4em]">{course.title}</h4>
        <div className="flex gap-3 text-[12px] text-fg-2 mb-4 font-medium">
          {course.duration && <span>{course.duration}</span>}
          {course.lessons && <><span className="text-slate-300">·</span><span>{course.lessons}</span></>}
          {course.hours && <><span className="text-slate-300">·</span><span>{course.hours}</span></>}
        </div>
        <div className="flex justify-between items-center pt-3.5 border-t border-rule">
          <div>
            <div className="font-display font-bold text-[22px] text-ink tracking-[-0.025em] leading-none">{course.price}</div>
            {course.installment && <div className="text-[11px] text-fg-3 mt-1">{course.installment}</div>}
          </div>
          <Button variant="primary" size="sm" iconRight="arrow">Detay</Button>
        </div>
      </div>
    </div>
  );
}

// ── Avatar ────────────────────────────────────────────────────────
function Avatar({ name, size = 36, color = '#252474' }) {
  const initials = name.split(' ').map(s => s[0]).slice(-2).join('').toUpperCase();
  return (
    <div className="rounded-full grid place-items-center font-display font-semibold text-paper tracking-tight flex-shrink-0"
         style={{ width: size, height: size, background: color, fontSize: size * 0.4 }}>
      {initials}
    </div>
  );
}

// ── UserMenu (avatar dropdown for authed nav) ─────────────────────
function UserMenu({ user, onRoute }) {
  const [open, setOpen] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);
  const menuRef = React.useRef();

  React.useEffect(() => {
    const onClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setOpen(false);
        setNotifOpen(false);
      }
    };
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);

  return (
    <div className="flex items-center gap-1" ref={menuRef}>
      {/* Notifications */}
      <div className="relative">
        <button onClick={() => { setNotifOpen(!notifOpen); setOpen(false); }}
                className="hidden md:grid w-9 h-9 place-items-center rounded-md hover:bg-mist text-fg-2 hover:text-ink transition-colors relative" aria-label="Bildirimler">
          <Icon name="bell" size={18} />
          <span className="absolute top-1.5 right-2 w-2 h-2 rounded-full bg-tier-mo border-2 border-paper"></span>
        </button>
        {notifOpen && (
          <div className="absolute right-0 top-12 w-[340px] bg-white border border-rule rounded-[14px] shadow-card-hover overflow-hidden z-50">
            <div className="px-4 py-3 border-b border-rule flex items-center justify-between">
              <div className="font-display font-semibold text-[15px] text-ink">Bildirimler</div>
              <span className="text-[11px] font-mono text-fg-3 font-semibold">3 YENI</span>
            </div>
            <div className="max-h-[400px] overflow-y-auto">
              {[
                { t: 'Yarın 20:00 — Canlı oturum', s: 'Sorumlu Emlak Pro · Modül 5', tag: 'Canlı', tagC: 'var(--tier-mo)', ago: '2 saat' },
                { t: 'Yeni ders eklendi', s: 'CRM kurulum ve kullanım · Hafta 4', tag: 'Yeni', tagC: 'var(--tier-plus)', ago: '6 saat' },
                { t: 'Sertifikan hazır', s: 'Yaşlı Bakım — Almanya · indir', tag: 'Sertifika', tagC: '#252474', ago: 'dün' },
              ].map((n, i) => (
                <div key={i} className="px-4 py-3 border-b border-rule last:border-b-0 hover:bg-mist/50 cursor-pointer">
                  <div className="flex items-start gap-2 mb-1">
                    <span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-[0.06em] text-white" style={{ background: n.tagC }}>{n.tag}</span>
                    <div className="text-[13px] font-semibold text-ink flex-1">{n.t}</div>
                  </div>
                  <div className="text-[12px] text-fg-2">{n.s}</div>
                  <div className="text-[11px] text-fg-3 mt-1 font-mono">{n.ago} önce</div>
                </div>
              ))}
            </div>
            <div className="px-4 py-2.5 bg-mist/30 text-center">
              <button className="text-[12px] font-semibold text-brand-600 hover:text-accent-500">Tümünü gör</button>
            </div>
          </div>
        )}
      </div>

      {/* Avatar dropdown */}
      <div className="relative">
        <button onClick={() => { setOpen(!open); setNotifOpen(false); }}
                className="flex items-center gap-2 pl-1 pr-2 py-1 rounded-full hover:bg-mist transition-colors">
          <Avatar name={user.name} color={user.avatarColor || '#252474'} size={30} />
          <span className="hidden md:inline text-[13px] font-semibold text-ink">{user.name.split(' ')[0]}</span>
          <Icon name="arrowDn" size={14} className={`hidden md:inline text-fg-3 transition-transform ${open ? 'rotate-180' : ''}`} />
        </button>
        {open && (
          <div className="absolute right-0 top-12 w-[260px] bg-white border border-rule rounded-[14px] shadow-card-hover overflow-hidden z-50">
            <div className="px-4 py-3 border-b border-rule flex items-center gap-3">
              <Avatar name={user.name} color={user.avatarColor || '#252474'} size={40} />
              <div className="min-w-0 flex-1">
                <div className="font-semibold text-[14px] text-ink truncate">{user.name}</div>
                <div className="text-[11px] text-fg-3 font-mono truncate">{user.email}</div>
              </div>
            </div>
            <div className="py-1.5">
              {[
                { id: 'dashboard', icon: 'graduation', label: 'Kurslarım' },
                { id: 'kohort',    icon: 'cal',        label: 'Kohortlarım' },
                { id: 'mentor',    icon: 'chat',       label: 'Mesajlar', badge: 2 },
                { id: 'profile',   icon: 'user',       label: 'Profil & Ayarlar' },
              ].map(item => (
                <button key={item.id} onClick={() => { setOpen(false); onRoute && onRoute(item.id); }}
                        className="w-full flex items-center gap-3 px-4 py-2.5 text-left text-[14px] text-ink hover:bg-mist transition-colors">
                  <Icon name={item.icon} size={16} className="text-fg-3" />
                  <span className="flex-1" dangerouslySetInnerHTML={{ __html: item.label }}></span>
                  {item.badge && <span className="px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-tier-mo text-white">{item.badge}</span>}
                </button>
              ))}
            </div>
            <div className="border-t border-rule">
              <button className="w-full flex items-center gap-3 px-4 py-2.5 text-left text-[14px] text-fg-2 hover:bg-mist transition-colors">
                <Icon name="arrowL" size={16} />
                <span>Çıkış Yap</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Nav ───────────────────────────────────────────────────────────
function Nav({ onAuth, onRoute, current, transparent = false, user }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'catalog', label: 'Kurslar' },
    { id: 'credential', label: 'Belgelendirme' },
    { id: 'career', label: 'Career' },
    { id: 'about', label: 'Hakkımızda' },
  ];

  return (
    <>
      <nav className="sticky top-0 z-40 pt-3 pb-1">
        <Container>
          <div className={`flex items-center justify-between gap-4 px-4 py-3 rounded-[18px] transition-all duration-200 ${scrolled ? 'bg-paper/85 backdrop-blur-xl border border-rule shadow-sm' : 'bg-transparent'}`}>
            <a href="#" onClick={(e) => { e.preventDefault(); onRoute && onRoute('landing'); }} className="flex-shrink-0">
              <Logo />
            </a>
            <div className="hidden md:flex items-center gap-1 flex-1 justify-center">
              {links.map(l => (
                <button
                  key={l.id}
                  onClick={() => onRoute && onRoute(l.id)}
                  className={`px-3.5 py-2 rounded-md text-[13px] font-medium transition-all ${current === l.id ? 'bg-brand-500 text-paper' : 'text-fg-2 hover:bg-mist hover:text-ink'}`}>
                  {l.label}
                </button>
              ))}
            </div>
            <div className="flex items-center gap-2">
              <button onClick={() => onRoute && onRoute('search')} className="hidden md:grid w-9 h-9 place-items-center rounded-md hover:bg-mist text-fg-2 hover:text-ink transition-colors" aria-label="Ara">
                <Icon name="search" size={18} />
              </button>
              {user ? (
                <UserMenu user={user} onRoute={onRoute} />
              ) : (
                <>
                  <Button variant="ghost" size="sm" className="hidden md:inline-flex" onClick={() => onAuth && onAuth('login')}>Giriş</Button>
                  <Button variant="primary" size="sm" onClick={() => onAuth && onAuth('register')}>Kayıt Ol</Button>
                </>
              )}
              <button onClick={() => setMobileOpen(true)} className="md:hidden grid w-9 h-9 place-items-center rounded-md hover:bg-mist text-ink" aria-label="Menü">
                <Icon name="menu" size={20} />
              </button>
            </div>
          </div>
        </Container>
      </nav>

      {/* Mobile menu */}
      {mobileOpen && (
        <div className="fixed inset-0 z-50 bg-ink/60 backdrop-blur-sm md:hidden" onClick={() => setMobileOpen(false)}>
          <div className="absolute top-0 right-0 bottom-0 w-[80%] max-w-[320px] bg-paper p-6 flex flex-col gap-2" onClick={(e) => e.stopPropagation()}>
            <div className="flex justify-between items-center mb-6">
              <Logo size="sm" />
              <button onClick={() => setMobileOpen(false)} className="grid w-9 h-9 place-items-center rounded-md hover:bg-mist"><Icon name="x" size={20} /></button>
            </div>
            {links.map(l => (
              <button key={l.id} onClick={() => { setMobileOpen(false); onRoute && onRoute(l.id); }}
                      className="text-left text-lg font-medium py-2.5 border-b border-rule text-ink">
                {l.label}
              </button>
            ))}
            <div className="mt-6 flex flex-col gap-2">
              <Button variant="outline" size="md" onClick={() => { setMobileOpen(false); onAuth && onAuth('login'); }}>Giriş</Button>
              <Button variant="primary" size="md" onClick={() => { setMobileOpen(false); onAuth && onAuth('register'); }}>Kayıt Ol</Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// ── Footer ────────────────────────────────────────────────────────
function Footer() {
  const [openCol, setOpenCol] = React.useState(null);
  const cols = [
    { title: 'Ürün', links: [
      { t: 'Kurslar', h: '/brodemy-katalog' },
      { t: 'Belgelendirme', h: '/brodemy-belge' },
      { t: 'Career', h: '/brodemy-career' },
      { t: '8 Meslek', h: '/brodemy-katalog' },
      { t: 'Premium', h: '/brodemy-premium' },
    ]},
    { title: 'Vendor', links: [
      { t: 'Akademi başvurusu', h: '/brodemy-vendor-basvuru' },
      { t: 'Belge sağlayıcı', h: '/brodemy-vendor-basvuru' },
      { t: 'İşveren paneli', h: '/brodemy-vendor-basvuru' },
      { t: 'Komisyon yapısı', h: '/brodemy-vendor-basvuru' },
      { t: 'Vendor SSS', h: '/brodemy-sss' },
    ]},
    { title: 'Hakkımızda', links: [
      { t: 'Brodemy hakkında', h: '/brodemy-hakkimizda' },
      { t: 'BIOSEE Arge A.Ş.', h: '/brodemy-hakkimizda' },
      { t: 'Blog', h: '/brodemy-blog' },
      { t: 'Referans programı', h: '/brodemy-affiliate' },
      { t: 'İletişim', h: '/brodemy-iletisim' },
    ]},
    { title: 'Yasal', links: [
      { t: 'KVKK Aydınlatma', h: '/brodemy-kvkk' },
      { t: 'Çerez Politikası', h: '/brodemy-cerez-politikasi' },
      { t: 'Kullanım Koşulları', h: '/brodemy-kullanim-kosullari' },
      { t: 'Mesafeli Satış', h: '/brodemy-mesafeli-satis' },
      { t: 'İptal & İade', h: '/brodemy-iade-politikasi' },
    ]},
  ];
  return (
    <footer className="relative bg-ink text-paper mt-20">
      <Container className="py-16">
        <div className="grid grid-cols-1 md:grid-cols-[1.5fr_repeat(4,1fr)] gap-8 md:gap-12">
          <div>
            <Logo inverse size="md" />
            <p className="text-[13px] mt-4 text-slate-400 leading-[1.6] max-w-[280px]">
              Türkiye'nin ilk multi-vendor mesleki gelişim marketplace platformu. Eğitim, belgelendirme ve kariyer tek çatı altında.
            </p>
            <div className="flex gap-3 mt-6">
              {['linkedin', 'instagram', 'youtube', 'twitter'].map(s => (
                <a key={s} href="#" className="w-9 h-9 grid place-items-center rounded-md border border-slate-700 hover:border-accent-400 hover:text-accent-400 transition-colors">
                  <Icon name="globe" size={16} />
                </a>
              ))}
            </div>
          </div>
          {cols.map((col, i) => (
            <div key={col.title}>
              <button
                className="md:cursor-default w-full flex md:block items-center justify-between text-[11px] font-mono uppercase tracking-[0.16em] text-accent-400 font-semibold pb-3 md:pb-4 border-b md:border-b-0 border-slate-700"
                onClick={() => setOpenCol(openCol === i ? null : i)}>
                <span>{col.title}</span>
                <Icon name="arrowDn" size={14} className={`md:hidden accordion-chevron ${openCol === i ? 'open' : ''}`} />
              </button>
              <ul className={`mt-3 space-y-2.5 md:!block ${openCol === i ? 'block' : 'hidden md:block'}`}>
                {col.links.map(l => (
                  <li key={l.t}>
                    <a href={l.h} className="text-[13px] text-slate-300 hover:text-paper transition-colors">{l.t}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-[12px] text-slate-400">
          <div className="leading-relaxed">
            © 2026 <strong className="text-paper">BIOSEE Arge A.Ş.</strong> · Tüm hakları saklıdır.<br className="md:hidden" />
            <span className="hidden md:inline"> · </span>Mersis: 0123456789012345 · ETBİS kayıtlı
          </div>
          <div className="flex flex-wrap gap-x-5 gap-y-1">
            <a href="/brodemy-kvkk" className="hover:text-paper">KVKK</a>
            <a href="/brodemy-cerez-politikasi" className="hover:text-paper">Çerez</a>
            <a href="/brodemy-kullanim-kosullari" className="hover:text-paper">Kullanım</a>
            <a href="/brodemy-iletisim" className="hover:text-paper">İletişim</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

// ── Test data ─────────────────────────────────────────────────────
const SAMPLE_COURSES = [
  {
    id: 'sorumlu-emlak',
    title: 'Sorumlu Emlak Danışmanı — MYK Belgesi Hazırlık Programı',
    tier: 'pro',
    prof: 'emlak',
    vendor: 'Brodemy Akademi',
    duration: '8 hafta',
    lessons: '32 ders',
    hours: '48 saat',
    price: '8.900 ₺',
    installment: '6 × 1.580 ₺',
    cohort: 'Mart 2026 · 28/40',
    coverId: 'photo-1560518883-ce09059eeffa',
    instructor: 'Av. Mehmet Yılmaz',
    rating: 4.8,
    reviews: 142,
  },
  {
    id: 'konut-satis',
    title: 'Konut Satış Müzakere Teknikleri',
    tier: 'plus',
    prof: 'emlak',
    vendor: 'Brodemy Akademi',
    duration: '4 hafta',
    lessons: '18 ders',
    hours: '22 saat',
    price: '2.450 ₺',
    installment: 'peşin · taksitsiz',
    coverId: 'photo-1582407947304-fd86f028f716',
    rating: 4.6,
  },
  {
    id: 'gayrimenkul-degerleme',
    title: 'Gayrimenkul Değerleme Uzmanlığı — SPK Hazırlık',
    tier: 'mo',
    prof: 'emlak',
    vendor: 'Aksoy Akademi',
    duration: '14 hafta',
    lessons: '64 ders',
    hours: '96 saat',
    price: '24.500 ₺',
    installment: '12 × 2.290 ₺',
    cohort: 'Nisan 2026 · 12/24',
    coverId: 'photo-1486406146926-c627a92ad1ab',
    rating: 4.9,
  },
  {
    id: 'kas-kirpik',
    title: 'Profesyonel Kaş & Kirpik Tasarımı',
    tier: 'plus',
    prof: 'guzellik',
    vendor: 'Estetik Akademi',
    duration: '3 hafta',
    lessons: '14 ders',
    hours: '18 saat',
    price: '1.880 ₺',
    installment: '3 × 680 ₺',
    coverId: 'photo-1522337360788-8b13dee7a37e',
    rating: 4.7,
  },
  {
    id: 'yasli-bakim',
    title: 'Yaşlı Bakım Elemanı — Almanya Yerleştirme Programı',
    tier: 'mo',
    prof: 'saglik',
    vendor: 'Brodemy Akademi',
    duration: '12 hafta',
    lessons: '60 ders',
    hours: '180 saat',
    price: '14.500 ₺',
    installment: '12 × 1.380 ₺',
    cohort: 'Mart 2026 · iş garantili',
    coverId: 'photo-1576091160550-2173dba999ef',
    rating: 4.9,
  },
  {
    id: 'insaat-formen',
    title: 'İnşaat Şantiye Formeni Yetkinlik Programı',
    tier: 'pro',
    prof: 'insaat',
    vendor: 'Yapı Akademi',
    duration: '10 hafta',
    lessons: '38 ders',
    hours: '52 saat',
    price: '7.200 ₺',
    installment: '6 × 1.290 ₺',
    cohort: 'Mart 2026 · 18/30',
    coverId: 'photo-1504917595217-d4dc5ebe6122',
    rating: 4.5,
  },
];

// ── Export to window ──────────────────────────────────────────────
Object.assign(window, {
  PusulaMark, BrodemyMark, Logo, Icon, ICONS, Avatar,
  Container, Section,
  Button, TierBadge, ProfPill, CourseCard,
  Nav, Footer,
  SAMPLE_COURSES,
});