import React from 'react';

const Header = ({ style = {} }) => {
  return (
    <div style={{ ...style, width: '100%' }}>
      {/* Top Banner */}
      <div style={{
        width: '100%',
        height: 40,
        backgroundColor: '#043a32',
        display: 'flex',
        padding: '11px 48px',
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <span style={{ color: '#fff', fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500 }}>Français</span>
            <img src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/icon.png" alt="language" style={{ width: 16, height: 16 }} />
          </div>
          <span style={{ color: '#fff', fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500 }}>Support</span>
        </div>
      </div>

      {/* Main Header */}
      <div style={{
        width: '100%',
        height: 72,
        display: 'flex',
        padding: '14px 48px',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottom: '1px solid #dcdcdc',
        backgroundColor: 'inherit'
      }}>
        {/* Logo and Menu */}
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <img src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/logo-my-s.png" alt="Logo MySy" style={{ width: 96, height: 32 }} />
          
          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            <span style={{ color: '#4b5162', fontFamily: 'DM Sans', fontSize: 16, fontWeight: 500 }}>À propos</span>
            <span style={{ color: '#4b5162', fontFamily: 'DM Sans', fontSize: 16, fontWeight: 500 }}>Fonctionnalités</span>
            <span style={{ color: '#4b5162', fontFamily: 'DM Sans', fontSize: 16, fontWeight: 500 }}>Tarifs</span>
            <span style={{ color: '#4b5162', fontFamily: 'DM Sans', fontSize: 16, fontWeight: 500 }}>Blog</span>
            <div style={{ width: 1, height: 12, backgroundColor: '#171717', opacity: 0.1, borderRadius: 30 }} />
            <span style={{ color: '#4b5162', fontFamily: 'DM Sans', fontSize: 16, fontWeight: 500 }}>Marketplace</span>
          </div>
        </div>

        {/* CTAs and Login */}
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button style={{
            padding: '12px 16px',
            borderRadius: 200,
            border: '1px solid #c7c9ce',
            backgroundColor: 'transparent',
            color: '#4b5162',
            fontFamily: 'DM Sans',
            fontSize: 14,
            fontWeight: 700,
            cursor: 'pointer'
          }}>
            Créer un compte
          </button>
          
          <button style={{
            padding: '12px 16px',
            borderRadius: 200,
            border: 'none',
            backgroundColor: '#3e6ee3',
            color: '#fff',
            fontFamily: 'DM Sans',
            fontSize: 14,
            fontWeight: 700,
            cursor: 'pointer'
          }}>
            Réserver une démo
          </button>

          <div style={{ width: 1, height: 12, backgroundColor: '#171717', opacity: 0.1, borderRadius: 30 }} />

          <div style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer' }}>
            <img src="https://dashboard.codeparrot.ai/api/image/Z5UxzNgGlUAkMdGQ/user.png" alt="user" style={{ width: 18, height: 18 }} />
            <span style={{ color: '#171717', fontFamily: 'DM Sans', fontSize: 16, fontWeight: 500 }}>Connexion</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;

