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">
                                Status Ketaatan Lingkungan
                                <br />
                                (SKL)
                            </h2>

                            <p className="text-gray-600 leading-relaxed max-w-2xl">
                                Lorem Ipsum Is Simply Dummy Text Of The Printing
                                And Typesetting Industry. Lorem Ipsum Has Been
                                The Industry's Standard Dummy Text Ever Since
                                The 1500s, When An Unknown Printer Took A Galley
                                Of Type And Scrambled It To Make A Type Specimen
                                Book. It Has Survived Not Only Five Centuries,
                                But Also The Leap Into Electronic Typesetting,
                                Remaining Essentially Unchanged. It Was
                                Popularised In The 1960s With The Release Of
                                Letraset Sheets Containing Lorem Ipsum Passages,
                                And More Recently With Desktop Publishing
                                Software Like Aldus PageMaker Including Versions
                                Of Lorem Ipsum.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
