import { Link } from "@inertiajs/react";
import React from "react";
import { AiOutlineInstagram } from "react-icons/ai";
const Landing = () => {
    return (
        <div className="flex flex-col w-full min-h-[100dvh] py-12">
            {/* <PlayMusic /> */}
            <img
                className="fixed -z-10 opacity-50 blur-xs top-0 w-full h-full object-cover"
                src="/assets/images/bglanding.png"
                alt=""
            />
            <div className="flex flex-col h-full flex-1 max-w-[1000px] px-6 mx-auto md:justify-center md:items-center">
                <div className="flex flex-col w-[90%] md:w-[90%] h-[400px] justify-end">
                    <h1 className="text-2xl font-bold">Rumah Baca Kita</h1>
                    <div className="bg-white border-2 px-4 py-3 rounded-lg mt-3 md:w-[50%]">
                        <p>
                            <span className="text-blue-500 font-semibold">
                                Rumah Baca Kita
                            </span>{" "}
                            merupakan sebuah tempat yang menyediakan jasa secara
                            gratis untuk anak-anak bisa membaca, belajar, dan
                            bermain. Rumah Baca Kita berlokasi di kabupaten
                            Banyuwang, Jawa Timur
                        </p>

                        <div className="flex items-center mt-4 gap-2">
                            <AiOutlineInstagram size={24} />
                            <p>rumahbacakitabwi</p>
                        </div>
                    </div>
                    <Link href="/login">
                        <button className="btn btn-primary w-fit mt-6">
                            Masuk disini
                        </button>
                    </Link>
                </div>
                <div className="flex flex-col w-full mx-auto">
                    <h1 className="text-2xl text-center py-3 font-bold">
                        Modul Pembelajaran
                    </h1>
                    <div className="grid grid-cols-1 md:grid-cols-3 mt-6  md:px-12 gap-4">
                        <CardService
                            title="Berhitung"
                            icon="/assets/images/berhitung.png"
                        />
                        <CardService
                            title="Membaca"
                            icon="/assets/images/membaca.png"
                        />
                        <CardService
                            title="Tebak Gambar"
                            icon="/assets/images/kuis.png"
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};

const CardService = ({ title, icon }) => {
    return (
        <Link href="/user">
            <div className="flex flex-row p-4 bg-white/70 backdrop-blur-sm rounded-lg border-2 items-center gap-3">
                <img className="w-24 h-24 object-cover" src={icon} alt="ic" />
                <h1 className="text-lg font-bold">{title}</h1>
            </div>
        </Link>
    );
};

export default Landing;