export default function Header() {
  const isPro = Boolean(window.rescueFill?.isPro);

  return (
    <header className="bg-white border-b border-slate-200 h-14 px-5 flex items-center justify-between sticky top-0 z-40" style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
      {/* Brand */}
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 rounded-lg overflow-hidden shrink-0" style={{ boxShadow: '0 1px 4px rgba(0,0,0,0.15)' }}>
          <svg width="32" height="32" viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="240" cy="240" r="220" stroke="#E5E7EB" strokeWidth="2"></circle>
            <path d="M240 20C350 20 440 110 440 240" stroke="#EF4444" strokeWidth="3" strokeLinecap="round"></path>
            <circle cx="440" cy="240" r="6" fill="#EF4444"></circle>
            <circle cx="240" cy="20" r="6" fill="#EF4444"></circle>
            <rect x="110" y="140" width="260" height="200" rx="16" fill="#ffffff" stroke="#111827" strokeWidth="2"></rect>
            <rect x="110" y="140" width="260" height="40" rx="16" fill="#F9FAFB"></rect>
            <circle cx="330" cy="160" r="4" fill="#EF4444"></circle>
            <circle cx="310" cy="160" r="4" fill="#EF4444"></circle>
            <circle cx="290" cy="160" r="4" fill="#EF4444"></circle>
            <rect x="130" y="210" width="60" height="8" rx="4" fill="#D1D5DB"></rect>
            <rect x="130" y="235" width="50" height="8" rx="4" fill="#E5E7EB"></rect>
            <rect x="130" y="260" width="40" height="8" rx="4" fill="#E5E7EB"></rect>
            <path d="M200 240H280" stroke="#111827" strokeWidth="2" strokeDasharray="4 4"></path>
            <path d="M270 230L290 240L270 250Z" fill="#EF4444"></path>
            <rect x="290" y="210" width="60" height="8" rx="4" fill="#22C55E"></rect>
            <rect x="290" y="235" width="70" height="8" rx="4" fill="#16A34A"></rect>
            <rect x="290" y="260" width="65" height="8" rx="4" fill="#15803D"></rect>
            <path d="M240 185C230 185 222 193 222 203H212L228 219L244 203H234C234 197 238 193 244 193C248 193 252 195 254 199L260 195C256 189 249 185 240 185Z" fill="#EF4444"></path>
            <rect x="130" y="300" width="220" height="10" rx="5" fill="#22C55E"></rect>
          </svg>
        </div>
        <div>
          <div className="text-[0.9375rem] font-bold text-slate-900 leading-none tracking-tight">RescueFill</div>
          <div className="text-[0.6875rem] text-slate-500 mt-0.5 leading-none">Abandoned Form Recovery</div>
        </div>

        {/* Plan badge — informational only, never hides features */}
        {isPro ? (
          <span className="text-[0.625rem] font-bold px-2 py-0.5 rounded-full text-white leading-none" style={{ background: 'linear-gradient(135deg,#10b981,#059669)' }}>EXTENDED</span>
        ) : (
          <span className="text-[0.625rem] font-semibold px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 leading-none">FREE</span>
        )}
      </div>

      {/* Right actions */}
      <div className="flex items-center gap-1.5">
        <a
          href="https://rescuefill.com/docs"
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-indigo-600 px-2.5 py-1.5 rounded-lg hover:bg-slate-50 transition-colors"
        >
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
          </svg>
          Docs
        </a>

        <a
          href="https://themefreex.com/support"
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-indigo-600 px-2.5 py-1.5 rounded-lg hover:bg-slate-50 transition-colors"
        >
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
          Support
        </a>
      </div>
    </header>
  );
}