Object.assign(window, { Header });

const finData = [
  { label: 'DOLAR',    value: '45,34',     change: '%0,08',  up: true  },
  { label: 'EURO',     value: '52,61',     change: '%0,68',  up: true  },
  { label: 'STERLİN',  value: '61,52',     change: '%0,37',  up: true  },
  { label: 'BITCOIN',  value: '3.515.186', change: '%-2,31', up: false },
  { label: 'BİST 100', value: '10.400,83', change: '%-0,21', up: false },
  { label: 'ALTIN',    value: '6.650',     change: '%0,46',  up: true  },
  { label: 'FAİZ',     value: '42,69',     change: '%0,00',  up: true  },
];

function Header() {
  const scrollToForm = e => {
    e.preventDefault();
    const el = document.getElementById('registration');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  const categories = [
    'SON DAKİKA', 'YAZARLAR', 'GÜNDEM', 'EKONOMİ', 'DÜNYA',
    'GÜNÜN İÇİNDEN', 'SPOR', 'HAYAT', 'MAGAZİN', 'FİNANS', 'RESMİ İLANLAR',
  ];

  return (
    <header style={{ background: '#fff', position: 'sticky', top: 0, zIndex: 100, boxShadow: '0 2px 6px rgba(0,0,0,0.12)' }}>

      {/* Red bar: hamburger + search | logo | PLUS+ */}
      <div style={{
        background: '#E30A17', padding: '8px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative',
      }}>
        {/* Left: hamburger + search */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', zIndex: 1 }}>
          <button onClick={scrollToForm} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: '2px',
            display: 'flex', alignItems: 'center', color: '#fff',
          }}>
            <svg viewBox="0 0 24 24" width="22" height="22" fill="white">
              <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
            </svg>
          </button>
          <div style={{
            display: 'flex', alignItems: 'center', gap: '6px',
            background: 'rgba(255,255,255,0.18)', borderRadius: '20px',
            padding: '5px 14px',
          }}>
            <svg viewBox="0 0 24 24" width="13" height="13" fill="rgba(255,255,255,0.85)">
              <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
            <span style={{ color: 'rgba(255,255,255,0.85)', fontSize: '13px', fontFamily: 'Arial, sans-serif' }}>
              Haber ara...
            </span>
          </div>
        </div>

        {/* Center: logo (absolute so it's truly centered) */}
        <a href="#" onClick={scrollToForm} style={{
          position: 'absolute', left: '50%', transform: 'translateX(-50%)',
          display: 'flex', alignItems: 'center',
        }}>
          <img src="./index/logo.svg" alt="Sözcü"
            style={{ height: '30px', display: 'block' }}
            onError={e => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'block'; }} />
          <span style={{ display: 'none', color: '#fff', fontSize: '22px', fontWeight: 900, fontFamily: 'Arial, sans-serif', letterSpacing: '-1px' }}>
            SÖZCÜ
          </span>
        </a>

        {/* Right: PLUS+ */}
        <a href="#" onClick={scrollToForm} style={{
          color: '#fff', fontFamily: 'Arial, sans-serif',
          fontSize: '14px', fontWeight: 900, textDecoration: 'none',
          letterSpacing: '0.5px', zIndex: 1,
        }}>
          PLUS+
        </a>
      </div>

      {/* Category nav */}
      <nav className="sozcu-nav" style={{
        display: 'flex', justifyContent: 'center',
        padding: '0 8px', background: '#fff',
        borderBottom: '1px solid #e8e8e8',
        overflowX: 'auto', scrollbarWidth: 'none',
      }}>
        {categories.map(cat => (
          <a key={cat} href="#" onClick={scrollToForm} style={{
            color: '#1a1a1a', textDecoration: 'none',
            fontSize: '11.5px', fontFamily: 'Arial, sans-serif', fontWeight: 600,
            padding: '10px 9px', whiteSpace: 'nowrap',
            display: 'inline-flex', alignItems: 'center',
            borderBottom: '3px solid transparent',
          }}
            onMouseEnter={e => e.currentTarget.style.borderBottomColor = '#E30A17'}
            onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}
          >{cat}</a>
        ))}
      </nav>

      {/* Finance ticker row */}
      <div style={{ borderBottom: '1px solid #e8e8e8', background: '#fff', overflowX: 'auto', scrollbarWidth: 'none' }}>
        <div style={{ maxWidth: '1140px', margin: '0 auto', display: 'flex', padding: '0 20px' }}>
          {finData.map((d, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: '5px',
              padding: '5px 0', flexShrink: 0,
              marginRight: i < finData.length - 1 ? '16px' : '0',
              paddingRight: i < finData.length - 1 ? '16px' : '0',
              borderRight: i < finData.length - 1 ? '1px solid #eee' : 'none',
            }}>
              <span style={{ fontSize: '11px', fontWeight: 700, color: '#555', fontFamily: 'Arial, sans-serif' }}>
                {d.label}
              </span>
              <span style={{ fontSize: '12px', color: '#1a1a1a', fontFamily: 'Arial, sans-serif', fontWeight: 600 }}>
                {d.value}
              </span>
              <span style={{
                fontSize: '11px', fontFamily: 'Arial, sans-serif', fontWeight: 600,
                color: d.up ? '#2e7d32' : '#c62828',
                display: 'flex', alignItems: 'center', gap: '1px',
              }}>
                {d.change}
                <span style={{ fontSize: '9px' }}>{d.up ? '▲' : '▼'}</span>
              </span>
            </div>
          ))}
        </div>
      </div>

    </header>
  );
}