<template>
    <div class=" min-h-screen font-sans">
        <div class="max-w-md mx-auto p-4">
            <!-- Header -->
            <header class="bg-zinc-600 dark:bg-zinc-950 text-white p-4 rounded-lg shadow-md mb-6">
                <h1 class="text-2xl font-bold text-center">گلچین</h1>
                <p class="text-center text-zinc-100 dark:text-zinc-200 mt-1">شبکه اجتماعی مرجع</p>
            </header>

            <!-- Navigation -->
            <nav class="flex justify-around mb-8">
                <a href="#about"
                    class="bg-zinc-500 dark:bg-zinc-700 text-white px-4 py-2 rounded-lg shadow hover:bg-zinc-600 transition">درباره
                    ما</a>
                <a href="#contact"
                    class="bg-zinc-500 dark:bg-zinc-700 text-white px-4 py-2 rounded-lg shadow hover:bg-zinc-600 transition">تماس
                    با ما</a>
            </nav>

            <!-- About Us Section -->
            <section id="about" class="bg-white dark:bg-zinc-950 p-6 rounded-lg shadow-md mb-6">
                <h2 class="text-xl font-bold text-zinc-700 dark:text-zinc-300 mb-4">درباره ما</h2>
                <p class="text-zinc-700 dark:text-zinc-300 leading-relaxed">
                    شرکت  حدید را حال راه‌اندازی چند شبکه اجتماعی با رویکردها و کاربردهای گوناگون است. سایت گلچین به عنوان مرجع ثبت اطلاعات کاربری تمامی این شبکه های اجتماعی راه‌اندازی و ارائه شده است..
                </p>
                <div class="mt-4">
                    <h3 class="font-semibold text-zinc-600 dark:text-zinc-400">مزایای شبکه‌های اجتماعی ما:</h3>
                    <ul class="list-disc pr-5 mt-2 text-zinc-700 dark:text-zinc-300">
                        <li class="mb-1">رایگان بودن خدمات سایت</li>
                        <li class="mb-1">امکان درآمدزایی</li>
                        <li class="mb-1">یکپارچه بودن کاربری</li>
                        <li>جامعه هدف بزرگ</li>
                    </ul>
                </div>
            </section>

            <!-- Contact Us Section -->
            <section id="contact" class="bg-white dark:bg-zinc-950 p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-bold text-zinc-700 dark:text-zinc-300 mb-4">تماس با ما</h2>
                <form class="space-y-4">
                    <div>
                        <label for="name" class="block text-zinc-700 dark:text-zinc-300 mb-1">نام شما:</label>
                        <input type="text" id="name"
                            class="w-full p-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-zinc-50 dark:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500">
                    </div>
                    <div>
                        <label for="email" class="block text-zinc-700 dark:text-zinc-300 mb-1">ایمیل:</label>
                        <input type="email" id="email"
                            class="w-full p-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-zinc-50 dark:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500">
                    </div>
                    <div>
                        <label for="message" class="block text-zinc-700 dark:text-zinc-300 mb-1">پیام شما:</label>
                        <textarea id="message" rows="4"
                            class="w-full p-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-zinc-50 dark:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500"></textarea>
                    </div>
                    <button type="submit"
                        class="w-full bg-zinc-600 dark:bg-zinc-700 text-white py-2 px-4 rounded-lg hover:bg-zinc-700 dark:hover:bg-zinc-950 transition shadow-md">ارسال
                        پیام</button>
                </form>

                <div class="mt-6">
                    <h3 class="font-semibold text-zinc-600 dark:text-zinc-400 mb-2">راه های ارتباطی:</h3>
                    <div class="flex items-center text-zinc-700 dark:text-zinc-300 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        <span>۰۹۳۷۳۶۰۵۵۹۰</span>
                    </div>
                    <div class="flex items-center text-zinc-700 dark:text-zinc-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        <span>info@golchin.app</span>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>
