import React from "react";
import { Badge } from "@/components/ui/badge";
import { TypeAnimation } from "react-type-animation";

const HeroSection = () => {
    return (
        <div className="container max-w-7xl">
            <div className="flex justify-center items-center relative overflow-hidden mx-auto">
                {/* Background Image */}
                <img
                    src="/assets/bg-hero.jpg"
                    alt="Jakarta Monument"
                    className="w-full h-[500px] object-cover rounded-3xl animate-fade-in"
                />

                {/* Overlay Content */}
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                    <Badge className="bg-green-500 text-white hover:bg-green-600 mb-4">
                        Portal Resmi
                    </Badge>

                    <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4 text-center">
                        <TypeAnimation
                            sequence={[
                                "Sistem Ketaatan Lingkungan",
                                1000,
                                "",
                                500,
                            ]}
                            wrapper="span"
                            speed={50}
                            repeat={Infinity}
                        />
                    </h1>

                    <p className="text-lg text-gray-600 text-center">
                        Dinas Lingkungan Hidup Provinsi DKI Jakarta
                    </p>
                </div>
            </div>
        </div>
    );
};

export default HeroSection;