frontend/src/components/Header.jsx

import React from 'react';
import { ShieldCheck } from 'lucide-react';
import { motion } from 'framer-motion';

const Header = () => {
  return (
    <motion.header
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      className="w-full max-w-5xl pt-16 pb-12 flex flex-col items-center justify-center text-center px-4"
    >
      <div className="flex items-center gap-5 mb-5">
        <div className="neu-panel p-4 rounded-2xl flex items-center justify-center text-blue-500">
          <ShieldCheck size={48} />
        </div>
        <h1 className="text-5xl font-bold tracking-tight text-gray-200">
          Detect<span className="text-blue-500">AI</span>
        </h1>
      </div>
      <p className="text-gray-500 text-lg max-w-xl font-medium">
        Advanced DeBERTa-powered detection.
      </p>
    </motion.header>
  );
};

export default Header;