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

const schemaData = {
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "บริษัท มอร์มินิมอร์ จำกัด",
  "description": "บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot สำหรับ SMEs ไทย",
  "url": "https://www.moreminimore.com",
  "telephone": "0809955945",
  "email": "contact@moreminimore.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว",
    "addressLocality": "สมุทรสาคร",
    "postalCode": "74120",
    "addressCountry": "TH"
  },
  "foundingDate": "2020",
  "founders": [
    {
      "@type": "Person",
      "name": "ทีมงาน MoreminiMore"
    }
  ]
};
---

<Layout title="เกี่ยวกับเรา | บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ SEO AI Chatbot">
  <script type="application/ld+json" set:html={JSON.stringify(schemaData)} />

  <!-- Hero Section - Bold Black with Yellow Accent -->
  <section class="relative overflow-hidden min-h-[60vh] flex items-center bg-black">
    <!-- Geometric Pattern Background -->
    <div class="absolute inset-0 opacity-20">
      <div class="absolute top-0 left-0 w-full h-full" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, #fed400 40px, #fed400 41px);"></div>
    </div>
    
    <!-- Yellow accent shapes -->
    <div class="absolute top-20 right-[-100px] w-[400px] h-[400px] bg-[#fed400] rounded-full blur-[150px] opacity-30 animate-pulse-slow"></div>
    <div class="absolute bottom-[-100px] left-[-200px] w-[500px] h-[500px] bg-[#fed400] rounded-full blur-[180px] opacity-20"></div>
    
    <!-- Diagonal Lines -->
    <div class="absolute inset-0 overflow-hidden opacity-10">
      <div class="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-repeating-diagonal"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10 py-24">
      <div class="max-w-4xl mx-auto text-center">
        <!-- Animated label -->
        <div class="inline-flex items-center gap-2 px-5 py-2 bg-[#fed400] text-black rounded-full text-sm font-bold mb-8 animate-fade-in">
          <span class="w-2 h-2 bg-black rounded-full animate-pulse"></span>
          IT Partner for SMEs
        </div>
        
        <h1 class="text-5xl md:text-7xl lg:text-8xl font-black text-white mb-6 tracking-tight animate-slide-up">
          เกี่ยวกับเรา
        </h1>
        
        <p class="text-xl md:text-2xl text-white/70 max-w-2xl mx-auto leading-relaxed animate-slide-up" style="animation-delay: 0.15s;">
          มอร์มินิมอร์ — พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
        </p>
      </div>
    </div>
    
    <!-- Scroll indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
      <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2">
        <div class="w-1 h-2 bg-[#fed400] rounded-full"></div>
      </div>
    </div>
  </section>

  <!-- Vision Section - White with Black -->
  <section class="relative py-28 bg-white overflow-hidden">
    <!-- Corner accent -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-[#fed400] clip-corner-br"></div>
    
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <!-- Section label -->
        <div class="flex items-center gap-3 mb-8">
          <div class="w-12 h-[3px] bg-black"></div>
          <span class="text-sm font-bold text-black/60 tracking-widest uppercase">Vision</span>
        </div>
        
        <h2 class="text-3xl md:text-5xl font-black text-black mb-12 leading-tight">
          เติบโตไป<br/>ด้วยกัน
        </h2>
        
        <!-- Quote box with heavy border -->
        <div class="relative p-8 md:p-12 bg-black rounded-none border-4 border-black">
          <div class="absolute top-4 left-4 w-8 h-8 bg-[#fed400] -ml-2 -mt-2"></div>
          
          <p class="text-2xl md:text-3xl font-bold text-white leading-relaxed">
            "เราเชื่อว่าความสำเร็จของลูกค้าคือความสำเร็จของเรา<br/>
            <span class="text-[#fed400]">เมื่อธุรกิจของคุณเติบโต</span> เราก็เติบโตไปด้วยกัน"
          </p>
          
          <div class="absolute bottom-4 right-4 w-8 h-8 bg-[#fed400] -mr-2 -mb-2"></div>
        </div>
        
        <p class="text-lg text-gray-600 mt-8 leading-relaxed">
          ความสำเร็จที่แท้จริงไม่ใช่แค่ตัวเลข แต่คือการเห็นผลงานที่เกิดขึ้นจริงของลูกค้า
        </p>
      </div>
    </div>
  </section>

  <!-- Values Section - Black Background with Grid -->
  <section class="relative py-28 bg-[#0f0f0f] overflow-hidden">
    <!-- Grid pattern -->
    <div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 60px 60px;"></div>
    
    <!-- Yellow corner accents -->
    <div class="absolute top-0 left-0 w-24 h-24 border-l-4 border-t-4 border-[#fed400]"></div>
    <div class="absolute bottom-0 right-0 w-24 h-24 border-r-4 border-b-4 border-[#fed400]"></div>
    
    <div class="container mx-auto px-4 relative z-10">
      <div class="text-center mb-16">
        <span class="inline-block text-sm font-bold text-[#fed400] tracking-widest uppercase mb-4">Our Values</span>
        <h2 class="text-3xl md:text-5xl font-black text-white">
          สิ่งที่เรายึดมั่น
        </h2>
        <p class="text-white/60 mt-4 max-w-xl mx-auto">
          เรามุ่งเน้นที่ผลลัพธ์ที่จับต้องได้ ไม่ใช่แค่ตัวเลขบนหน้าจอ
        </p>
      </div>
      
      <!-- Values Grid - 3 columns -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
        <!-- Value 1 -->
        <div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
          <div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
            <svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          </div>
          <h3 class="text-xl font-black text-black mb-3 group-hover:text-black">เน้นผลงานจริง</h3>
          <p class="text-gray-600 text-sm group-hover:text-black/70">
            เราวัดความสำเร็จจากยอดขายที่เพิ่มขึ้นของลูกค้า ไม่ใช่แค่คะแนน SEO หรือจำนวนการเข้าชม
          </p>
        </div>
        
        <!-- Value 2 -->
        <div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
          <div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
            <svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
          </div>
          <h3 class="text-xl font-black text-black mb-3 group-hover:text-black">เป็นพาร์ทเนอร์</h3>
          <p class="text-gray-600 text-sm group-hover:text-black/70">
            เราไม่ได้มองลูกค้าเป็นแค่ผู้จ้าง แต่มองเป็นพาร์ทเนอร์ที่จะเติบโตไปด้วยกันในระยะยาว
          </p>
        </div>
        
        <!-- Value 3 -->
        <div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
          <div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
            <svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          </div>
          <h3 class="text-xl font-black text-black mb-3 group-hover:text-black">คุ้มค่าที่สุด</h3>
          <p class="text-gray-600 text-sm group-hover:text-black/70">
            ออกแบบโซลูชันให้เหมาะกับงบประมาณของคุณ เริ่มต้นง่าย ไม่ต้องลงทุนมาก
          </p>
        </div>
        
        <!-- Value 4 -->
        <div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
          <div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
            <svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          </div>
          <h3 class="text-xl font-black text-black mb-3 group-hover:text-black">ทำงานเร็ว</h3>
          <p class="text-gray-600 text-sm group-hover:text-black/70">
            เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวันประงัน
          </p>
        </div>
        
        <!-- Value 5 -->
        <div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
          <div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
            <svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </div>
          <h3 class="text-xl font-black text-black mb-3 group-hover:text-black">ดูแลต่อเนื่อง</h3>
          <p class="text-gray-600 text-sm group-hover:text-black/70">
            ไม่ทิ้งหลังขาย พร้อมสนับสนุนและปรับปรุงระบบให้ตลอดเวลา
          </p>
        </div>
        
        <!-- Value 6 -->
        <div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
          <div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
            <svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
          </div>
          <h3 class="text-xl font-black text-black mb-3 group-hover:text-black">โปร่งใส</h3>
          <p class="text-gray-600 text-sm group-hover:text-black/70">
            ราคาชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น รายงานผลตรง ชัดเจน
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Image Section - Full Width with Overlay -->
  <section class="relative py-0 bg-white">
    <div class="relative h-[50vh] md:h-[70vh] overflow-hidden">
      <img 
        src="/images/about.jpg" 
        alt="MoreminiMore Team - AI Technology Partner"
        class="w-full h-full object-cover"
      />
      <!-- Yellow gradient overlay -->
      <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent"></div>
      
      <!-- Content overlay -->
      <div class="absolute inset-0 flex items-center">
        <div class="container mx-auto px-4">
          <div class="max-w-xl ml-auto mr-8 md:mr-16">
            <div class="bg-[#fed400] p-8 md:p-12">
              <h3 class="text-2xl md:text-3xl font-black text-black mb-4">
                IT Partner for SMEs
              </h3>
              <p class="text-black/80 text-lg">
                พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Choose Us - Two Column Layout -->
  <section class="relative py-28 bg-[#e8e8e8] overflow-hidden">
    <!-- Decorative elements -->
    <div class="absolute top-0 right-0 w-64 h-64 bg-[#fed400] clip-corner-bl"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-black clip-corner-tr"></div>
    
    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-5xl mx-auto">
        <div class="text-center mb-16">
          <span class="inline-block text-sm font-bold text-black/50 tracking-widest uppercase mb-4">Why Choose Us</span>
          <h2 class="text-3xl md:text-5xl font-black text-black">
            ทำไมเลือกเรา?
          </h2>
        </div>
        
        <!-- 2x2 Grid -->
        <div class="grid md:grid-cols-2 gap-8">
          <div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
            <div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
              <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>
            <h3 class="text-xl font-black text-black mb-3">เน้นผลลัพธ์</h3>
            <p class="text-gray-600">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
          </div>
          
          <div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
            <div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
              <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h3 class="text-xl font-black text-black mb-3">ราคาเหมาะสม</h3>
            <p class="text-gray-600">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
          </div>
          
          <div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
            <div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
              <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            </div>
            <h3 class="text-xl font-black text-black mb-3">ดูแลต่อเนื่อง</h3>
            <p class="text-gray-600">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
          </div>
          
          <div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
            <div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
              <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>
            <h3 class="text-xl font-black text-black mb-3">ทำงานเร็ว</h3>
            <p class="text-gray-600">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact CTA - Yellow Background -->
  <section class="relative py-20 bg-[#fed400]">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl md:text-4xl font-black text-black mb-4">
        พร้อมร่วมงานกับคุณแล้วหรือยัง?
      </h2>
      <p class="text-black/70 mb-8 max-w-xl mx-auto">
        เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="tel:0809955945" class="bg-black text-[#fed400] px-8 py-4 font-bold text-lg hover:bg-black/80 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
          </svg>
          080-995-5945
        </a>
        <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.248l-6.32 6.307c-.195.195-.512.195-.707 0l-2.826-2.808c-.195-.195-.195-.512 0-.707l6.32-6.307c.195-.195.512-.195.707 0l2.826 2.808c.195.195.195.512 0 .707z"/>
          </svg>
          เพิ่ม Line
        </a>
      </div>
    </div>
  </section>
</Layout>

<style>
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slide-up {
    from { 
      opacity: 0;
      transform: translateY(30px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
  }
  
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  
  .animate-slide-up {
    opacity: 0;
    animation: slide-up 0.6s ease-out forwards;
  }
  
  .animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
  }
  
  .clip-corner-br {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  
  .clip-corner-bl {
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  
  .clip-corner-tr {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  
  .bg-repeating-diagonal {
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(255,255,255,0.1) 10px,
      rgba(255,255,255,0.1) 20px
    );
  }
</style>