---
import Layout from '../layouts/Layout.astro'
---

<Layout title="Contact Us | MoreminiMore Co.,Ltd.">
  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
        ติดต่อเรา
      </h1>
      <p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
        คุณสามารถติดต่อเราได้หลายช่องทาง พร้อมข้อมูลเบื้องต้น กรอกแบบฟอร์ม
      </p>
      
      <div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
        <!-- Contact Info -->
        <div class="space-y-8">
          <div class="bg-white p-8 rounded-lg shadow-md">
            <h2 class="text-2xl font-bold mb-6 text-secondary">ช่องทางติดต่อ</h2>
            <div class="space-y-6">
              <div class="flex items-start gap-4">
                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📧</div>
                <div>
                  <h3 class="font-bold mb-1">อีเมล</h3>
                  <a href="mailto:contact@moreminimore.com" class="text-gray-600 hover:text-primary transition">contact@moreminimore.com</a>
                </div>
              </div>
              <div class="flex items-start gap-4">
                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📞</div>
                <div>
                  <h3 class="font-bold mb-1">โทรศัพท์</h3>
                  <a href="tel:0809955945" class="text-gray-600 hover:text-primary transition">080-995-5945</a>
                </div>
              </div>
              <div class="flex items-start gap-4">
                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">💬</div>
                <div>
                  <h3 class="font-bold mb-1">Social Media</h3>
                  <div class="flex gap-4 mt-2">
                    <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">Facebook</a>
                    <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">Twitter</a>
                    <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">LinkedIn</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="bg-black text-white p-8 rounded-lg">
            <h3 class="text-xl font-bold mb-4">เวลาทำการ</h3>
            <p class="text-gray-300">จันทร์ - ศุกร์: 9:00 - 18:00 น.</p>
            <p class="text-gray-300">เสาร์ - อาทิตย์: ตามนัดหมาย</p>
          </div>
        </div>
        
        <!-- Contact Form Placeholder -->
        <div class="bg-white p-8 rounded-lg shadow-md">
          <h2 class="text-2xl font-bold mb-6 text-secondary">ส่งข้อความถึงเรา</h2>
          <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
            <p class="text-gray-500 mb-4">📝 แบบฟอร์มติดต่อ</p>
            <p class="text-gray-400 text-sm mb-4">
              ในระหว่างนี้ คุณสามารถติดต่อเราผ่านช่องทางด้านซ้าย
            </p>
            <a href="mailto:contact@moreminimore.com" class="bg-primary text-black px-6 py-3 rounded-full font-bold hover:bg-primary-hover transition inline-block">
              ส่งอีเมล
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-20 bg-gray-100">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl font-bold mb-8 text-secondary">สนใจรับปรึกษาฟรี?</h2>
      <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
        เราพร้อมให้คำปรึกษาเบื้องต้น โดยไม่มีค่าใช้จ่าย
      </p>
      <a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
        นัดคุยกับเรา
      </a>
    </div>
  </section>
</Layout>
