import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head } from "@inertiajs/react";
import React from "react";

export default function tentang() {
    return (
        <AuthenticatedLayout header={"Tentang SKL"}>
            <Head title="Tentang SKL" />
            <div className="container mx-auto p-6">
                <div className="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div className="flex flex-col md:flex-row">
                        {/* Left side - Image */}
                        <div className="md:w-1/3 p-6 bg-gradient-to-br from-green-50 to-blue-50">
                            <a
                                href="https://heyzine.com/flip-book/3a966a8c8d.html"
                                target="_blank"
                            >
                                <img
                                    className="rounded-lg shadow-md hover:shadow-xl transition-transform duration-300 w-full h-auto object-cover transform hover:scale-105"
                                    src="/assets/cover-panduan-skl.png"
                                    alt="SKL Cover"
                                />
                            </a>
                            <div className="mt-6 text-center">
                                <a
                                    href="#"
                                    className="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
                                >
                                    <svg
                                        className="w-4 h-4 mr-2"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth="2"
                                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                                        />
                                    </svg>
                                    Unduh PDF
                                </a>
                            </div>
                        </div>

                        {/* Right side - Content */}
                        <div className="md:w-2/3 p-8">
                            <h1 className="text-3xl font-bold text-gray-800 mb-6">
                                STATUS KETAATAN LINGKUNGAN
                            </h1>

                            <div className="space-y-6 text-gray-600">
                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-green-500 mr-4"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth="2"
                                                d="M13 10V3L4 14h7v7l9-11h-7z"
                                            />
                                        </svg>
                                    </div>
                                    <p className="text-sm leading-relaxed">
                                        Merupakan bagian dari perangkat lunak
                                        CReASINDO yang dikembangkan oleh PT
                                        MANDIRI CReASINDO.
                                    </p>
                                </div>

                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-blue-500 mr-4"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth="2"
                                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                            />
                                        </svg>
                                    </div>
                                    <p className="text-sm leading-relaxed text-justify">
                                        Kegunaan Produk ini adalah menyediakan
                                        sistem yang dapat memberikan pelayanan
                                        dalam pelaporan, analisa dan evaluasi
                                        pengelolaan lingkungan dilakukan oleh
                                        perusahaan atau kegiatan usaha yang
                                        berada di Propinsi DKI Jakarta.
                                    </p>
                                </div>

                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-yellow-500 mr-4"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth="2"
                                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                                            />
                                        </svg>
                                    </div>
                                    <p className="text-sm leading-relaxed text-justify">
                                        Produk ini diberikan kepada BPLHD DKI
                                        JAKARTA melalui Proyek "SISTEM
                                        PENGAWASAN DAN PENGENDALIAN PENCEMARAN
                                        LINGKUNGAN BPLHD DKI JAKARTA 2015"
                                        Perangkat Lunak ini dilindungi oleh
                                        undang-undang negara Republik Indonesia
                                        dan Perjanjian Internasional yang
                                        berkaitan dengan Hak-Hak Kekayaan
                                        Intelektual.
                                    </p>
                                </div>
                            </div>

                            <div className="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
                                <div className="flex items-center text-blue-600">
                                    <svg
                                        className="w-5 h-5 mr-2"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth="2"
                                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                        />
                                    </svg>
                                    <p className="text-sm font-medium">
                                        Silahkan klik gambar cover di samping
                                        untuk membuka buku panduan versi
                                        flipbook
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
