import React from "react";
import { Badge } from "../ui/badge";

export default function Tentang() {
    return (
        <section className="py-16 container max-w-7xl mx-auto px-4">
            <div className="max-w-4xl mx-auto relative">
                <div className="flex flex-col items-center gap-8">
                    {/* Circle Image */}
                    <img
                        src="/assets/elipse.svg"
                        alt="Circular gradient"
                        className="hidden md:block absolute -left-5 top-1/3 -translate-y-1/2 w-32 h-32 md:w-48 md:h-96 -z-10"
                    />

                    {/* Text Content */}
                    <div className="flex flex-col items-center text-center">
                        <div className="space-y-4">
                            <Badge className="bg-black text-white hover:bg-green-600 cursor-pointer">
                                Tentang
                            </Badge>

                            <h2 className="text-3xl font-bold text-green-600">
                                Sistem Ketaatan Lingkungan
                                <br />
                                (SKL)
                            </h2>

                            <p className="text-gray-600 leading-relaxed max-w-2xl">
                                SKL adalah Sistem Ketaatan Lingkungan yang
                                dinaungi oleh Dinas Lingkungan Hidup Provinsi
                                DKI Jakarta dengan menyediakan sistem yang dapat
                                memberikan pelayanan dalam pelaporan, analisa
                                dan evaluasi pengelolaan lingkungan dilakukan
                                oleh perusahaan atau kegiatan usaha yang berada
                                di Provinsi DKI Jakarta.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}