export default function Home() {
    return (
        <>
            <main
                className="bg-[url('/background.jpg')] bg-cover flex flex-col items-center justify-center min-h-screen bg-gray-100 text-white px-4">
                <section className="text-center max-w-2xl">
                    <h1 className="text-4xl font-bold mb-4">Willkommen bei <span className="bg-[var(--color-primary)]">MKV Kleinholz</span>
                    </h1>
                    <p className="text-lg mb-6">
                        Ihr Mobilkranvermieter aus Mülheim und Umgebung
                    </p>
                    <a
                        href="/about"
                        className="inline-block bg-[var(--color-primary)] text-white px-6 py-2 rounded hover:bg-[var(--color-primary)] transition"
                    >
                        Mehr erfahren
                    </a>
                </section>
            </main>
            <div className="w-full h-100">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2489.1370108126625!2d6.875406576840839!3d51.400537171789225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b8c14b986f8f25%3A0x8cc0d4e323228ee8!2sAdac%20Mobilit%C3%A4tspartner%20Kleinholz!5e0!3m2!1sde!2sde!4v1755638002671!5m2!1sde!2sde"
                    width="100%"
                    height="100%"
                    className="border:0"
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                ></iframe>
            </div>
        </>
    );
}
