import React from "react";
import { motion } from "framer-motion";
import logo from "../assets/logo.png"; // ganti dengan logo kamu

export default function Header() {
  // Fungsi untuk menggulir halaman ke bagian paling atas (koordinat y=0)
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth", // Memberikan animasi gulir yang mulus
    });
  };

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        width: "100%",
        background: "linear-gradient(135deg, #FFFFFF 0%, #FBE9D8 25%, #FB8A8A 50%, #8A3B6F 75%, #83B9FF 100%)",
        padding: "10px 0",
        boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
        zIndex: 1000,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: 80, // tetap tinggi header
        userSelect: "none"
      }}
    >
      <motion.img
        src={logo}
        alt="Fitsion Logo"
        style={{ 
          maxHeight: "150px", 
          // Menambahkan gaya kursor dan userSelect pada logo
          cursor: "pointer", 
          userSelect: "none"
        }}
        // PENTING: Menambahkan onClick HANYA pada logo
        onClick={scrollToTop}
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      />
    </header>
  );
}