import Image from "next/image";
import {Roboto} from "next/font/google";

const roboto = Roboto({weight: "400", subsets: ["latin"]});

export default function Hero() {
    return (
        <div className={roboto.className}>
            <div id="hero"
                 className="flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700">

                {/* Left Section: Text */}
                <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30
                                backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
                    <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
                        Hi, I’m Dennis
                    </h1>
                    <h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
                        Student & Software Engineer
                    </h2>
                    <h3 className="mt-1 text-lg md:text-xl text-gray-600">
                        Based in Osnabrück, Germany
                    </h3>

                    <p className="mt-6 text-gray-800 text-lg leading-relaxed">
                        Passionate about technology, coding, and solving real-world problems.
                        I enjoy building innovative solutions and continuously expanding my knowledge.
                    </p>

                    <p className="mt-4 text-gray-700 text-base">
                        Currently working on exciting projects that merge creativity with functionality.
                        Always eager to learn and collaborate!
                    </p>
                </div>

                {/* Right Section: Image */}
                <div className="flex mt-8 md:mt-0 md:ml-12">
                    <Image
                        src="/images/me.jpg"
                        alt="Image of Dennis"
                        width={400}
                        height={400}
                        className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
                    />
                </div>
            </div>
        </div>
    );
}