---
import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import BentoGrid from '../components/BentoGrid.astro';
import BentoTile from '../components/BentoTile.astro';
import DecoOrb from '../components/DecoOrb.astro';
import { getEntry, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';

const about = await getEntry('pages', 'about') as CollectionEntry<'pages'>;
const { Content } = await render(about);
---

<Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
  <Navigation />

  <PageHero
    badge={about.data.hero_badge}
    title="เริ่มจากตรงนี้"
    subtitle="บริษัท มอร์มินิมอร์ จำกัด — นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น ไม่ใช่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง"
  />

  <!-- ABOUT CONTENT (BENTO) -->
  <section class="section section-bento">
    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', left: '-150px' }} opacity={0.25} blur="80px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '-100px' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <BentoGrid>
        <BentoTile span={12} surface="soft" eyebrow="นโยบายของเรา" title="เป้าหมายคือเพิ่มกำไรให้ลูกค้า">
          <p>เพราะถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็จะสามารถใช้บริการเราต่อไปได้</p>
          <p>ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: <strong>"ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม"</strong> — ไม่ใช่แค่ส่งงานตามสัญญา</p>
        </BentoTile>

        <BentoTile span={8} surface="yellow" eyebrow="วิธีทำงานของเรา" title="ไม่ได้ทำงานแบบเดียวกับทุกที่">
          <p>เพราะลูกค้าแต่ละคนมีบริบท งบประมาณ และทีมต่างกัน</p>
          <ul class="checklist">
            <li>✅ <strong>งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทาง</strong> — เราทำเอง เพราะถ้าไม่ทำเอง จะตอบคำถามลูกค้าไม่ได้</li>
            <li>✅ <strong>งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะ</strong> — เราใช้ bot หรือ outsource ให้คนเชี่ยวชาญ เพราะคนที่ทำเป็นอาชีพจะดีกว่า</li>
            <li>✅ <strong>งานที่ต้องตอบลูกค้าตลอด 24 ชั่วโมง</strong> — bot ช่วยคัดกรองเบื้องต้น แล้วเราตามด้วยคน</li>
          </ul>
          <p style="margin-top: 16px;"><strong>สรุป:</strong> ผลงานที่ออกมาขึ้นอยู่กับบริบทของลูกค้า ไม่ใช่วิธีทำงานของเรา — เราเลือกวิธีที่ทำให้ลูกค้าได้ผลลัพธ์ที่ดีที่สุด ไม่ใช่วิธีที่เราถนัดที่สุด</p>
        </BentoTile>

        <BentoTile span={4} surface="purple-soft" eyebrow="ปี 2020" title="ก่อตั้งจากประสบการณ์ตรง">
          <p>เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ "สวยแต่ไม่มีคนเข้า" และ AI tools "ว้าวแต่ใช้ไม่เป็น"</p>
        </BentoTile>

        <BentoTile span={6} surface="mint" eyebrow="เราเชื่ออะไร" title="หลักคิด 6 ข้อ">
          <ul>
            <li>เว็บสวยไม่ได้แปลว่าขายได้</li>
            <li>AI ไม่ได้แทนทุกอย่าง — แต่ถ้ารู้จักใช้...</li>
            <li>จ่ายแพงไม่ได้แปลว่าดี</li>
            <li>"สิ่งที่ถูกต้อง" ไม่ใช่ "สิ่งที่ลูกค้าต้องการ" เสมอไป</li>
            <li>ระบบที่คนใช้ไม่เป็น = เสียเงินเปล่า</li>
          </ul>
        </BentoTile>

        <BentoTile span={6} surface="teal" eyebrow="เบื้องหลัง" title="Marketing intelligence ที่ใช้">
          <p>นั่งทำงานที่บ้าน ใช้ MacBook ตัวเดียว แต่มีเครื่องมือที่ช่วยให้เข้าใจตลาดได้ลึกกว่าคนทั่วไป:</p>
          <ul>
            <li><strong>ระบบดูโฆษณาคู่แข่ง</strong> — ดูว่าคู่แข่งยิงโฆษณาอะไร คำไหน convert ดี</li>
            <li><strong>วิเคราะห์ keyword + SEO gap</strong> — หาโอกาสที่คู่แข่งยังไม่ได้ทำ</li>
            <li><strong>ติดตาม trend ตลาด</strong> — รู้ก่อนลูกค้าว่าตลาดกำลังไปทางไหน</li>
          </ul>
          <p style="margin-top: 12px;"><strong>Stack:</strong> JavaScript, Python, PHP, n8n, OpenAI API, Meta API, Google Analytics, Looker Studio</p>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  <!-- STORY SECTION -->
  <section class="section section-bento">
    <DecoOrb color="yellow" size="400px" speed={0.5} position={{ top: '10%', right: '-150px' }} opacity={0.3} blur="80px" />
    <DecoOrb color="mint" size="300px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.2} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <div class="story-grid">
        <div class="story-content">
          <span class="section-badge">นโยบายของเรา</span>
          <h2 class="section-title">
            เพิ่ม<span class="highlight">ยอดขาย</span> · ลด<span class="highlight">ต้นทุน</span> · ลด<span class="highlight">เวลา</span>
          </h2>

          <p class="story-text">
            <strong>นโยบายของเราชัดเจน</strong> — ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: "ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม" ไม่ใช่แค่ส่งงานตามสัญญา
          </p>

          <p class="story-text">
            <strong>ก่อตั้งปี 2020</strong> จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า" และ AI tools ที่ "ว้าวแต่ใช้ไม่เป็น" เราเลยตั้งใจว่าจะทำให้ต่าง
          </p>

          <p class="story-text">
            <strong>วิธีทำงานของเรา</strong> เราไม่ได้ทำงานแบบเดียวกับทุกที่ — งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทางเราทำเอง งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะเราใช้ bot หรือ outsource ให้คนเชี่ยวชาญ เพราะคนที่ทำเป็นอาชีพจะดีกว่า
          </p>

          <div class="story-actions">
            <a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a>
            <a href="tel:0809955945" class="btn btn-outline-dark">080-995-5945</a>
          </div>
        </div>

        <div class="story-stats stagger-children">
          <div class="stat-card">
            <span class="stat-number">—</span>
            <span class="stat-label">ลูกค้าที่กลับมาใช้บริการซ้ำ</span>
          </div>
          <div class="stat-card">
            <span class="stat-number">—</span>
            <span class="stat-label">โปรเจกต์ที่ส่งมอบ</span>
          </div>
          <div class="stat-card">
            <span class="stat-number counter" data-from="0">5+</span>
            <span class="stat-label">ปีของการทำงานหนัก (ก่อตั้งปี 2020)</span>
          </div>
          <div class="stat-card">
            <span class="stat-number">—</span>
            <span class="stat-label">อุตสาหกรรมที่รับ</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- VALUES SECTION (yellow accent cards on soft) -->
  <section class="section section-soft values-section">
    <DecoOrb color="purple" size="500px" speed={0.4} position={{ top: '-200px', left: '20%' }} opacity={0.2} blur="100px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '5%' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <div class="section-header reveal">
        <span class="section-badge">ค่านิยมของเรา</span>
        <h2 class="section-title">
          4 สิ่งที่เรา <span class="highlight">ไม่เคยเปลี่ยน</span>
        </h2>
      </div>

      <div class="values-grid stagger-children">
        <div class="value-card value-card-yellow">
          <div class="value-num">01</div>
          <h3 class="value-title">เข้าใจธุรกิจก่อนเขียนโค้ด</h3>
          <p class="value-desc">30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution</p>
        </div>
        <div class="value-card">
          <div class="value-num">02</div>
          <h3 class="value-title">เป็น Partner ไม่ใช่ Vendor</h3>
          <p class="value-desc">เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver</p>
        </div>
        <div class="value-card">
          <div class="value-num">03</div>
          <h3 class="value-title">Deliver ตรงเวลา หรือบอกล่วงหน้า</h3>
          <p class="value-desc">เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata</p>
        </div>
        <div class="value-card">
          <div class="value-num">04</div>
          <h3 class="value-title">ดูแลหลังส่งมอบ</h3>
          <p class="value-desc">ปรับเล็ก ๆ น้อย ๆ ฟรี — คิดค่าใช้จ่ายเฉพาะ feature ใหม่หรือปรับแต่งครั้งใหญ่เท่านั้น</p>
        </div>
      </div>
    </div>
  </section>

  <!-- PULL QUOTE — black band, mission statement -->
  <section class="section section-dark-quote reveal">
    <div class="container">
      <blockquote class="pull-quote">
        <p class="quote-text">
          "เป้าหมายของเราคือ <span class="highlight">กำไรที่มากขึ้นของลูกค้า</span>"
        </p>
        <cite class="quote-author">— มอร์มินิมอร์, ปณิธานการทำงาน</cite>
      </blockquote>
    </div>
  </section>

  <!-- PROCESS SECTION (4 steps, white) -->
  <section class="section process-section">
    <DecoOrb color="soft" size="600px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.5} blur="80px" />
    <DecoOrb color="yellow" size="300px" speed={0.3} position={{ bottom: '5%', left: '-100px' }} opacity={0.3} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <div class="section-header reveal">
        <span class="section-badge">กระบวนการทำงาน</span>
        <h2 class="section-title">
          วิธีที่เราทำงาน <span class="highlight">กับคุณ</span>
        </h2>
        <p class="section-desc">4 ขั้น โปร่งใสทุกข้อ</p>
      </div>

      <div class="process-grid stagger-children">
        <div class="process-step">
          <span class="step-num">01</span>
          <h3 class="step-title">ปรึกษาฟรี</h3>
          <p class="step-desc">30–60 นาทีคุยกับเจ้าของธุรกิจ ฟัง pain points, เป้าหมาย, budget ให้คำแนะนำเบื้องต้นฟรี ไม่ผูก commitment</p>
        </div>
        <div class="process-step">
          <span class="step-num">02</span>
          <h3 class="step-title">วางแผน</h3>
          <p class="step-desc">วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็น PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น</p>
        </div>
        <div class="process-step">
          <span class="step-num">03</span>
          <h3 class="step-title">ดำเนินการ</h3>
          <p class="step-desc">แจ้งความคืบหน้าเป็นช่วง ๆ ผ่าน LINE Group — demo เมื่อเราพร้อมส่งงานรอบใหญ่ ๆ ไม่ sprint ไม่ deadline ล็อก</p>
        </div>
        <div class="process-step process-step-yellow">
          <span class="step-num">04</span>
          <h3 class="step-title">ส่งมอบ + ดูแล</h3>
          <p class="step-desc">ส่งมอบงาน + อบรมทีม + มอบคู่มือ หลังส่งมอบปรับเล็ก ๆ น้อย ๆ ฟรี — คิดค่าใช้จ่ายเฉพาะ feature ใหม่หรือปรับแต่งครั้งใหญ่</p>
        </div>
      </div>
    </div>
  </section>

  <!-- FINAL CTA (yellow) -->
  <section class="section section-yellow cta-section">
    <div class="container">
      <div class="cta-content reveal">
        <h2 class="cta-title">อยากรู้ว่าธุรกิจคุณเหมาะกับอะไร?</h2>
        <p class="cta-desc">ปรึกษาฟรี 30 นาที ไม่มี script sales ไม่มี upsell จะบอกตรง ๆ ว่าทำได้หรือไม่ควรทำ</p>
        <div class="cta-actions">
          <a href="/contact" class="btn btn-dark btn-lg">นัดคุยตอนนี้ →</a>
          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</Base>

<style>
  .section-soft { background: var(--color-bg-alt); }
  .section-yellow { background: var(--color-primary); }
  .section-bento {
    position: relative;
    overflow: hidden;
  }

  /* VALUES (keep existing classes) */
  .values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
  }
  .value-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 32px;
    transition: all 0.3s ease;
  }
  .value-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .value-num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--color-black);
    width: 64px;
    height: 64px;
    border: 2px solid var(--color-black);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    letter-spacing: -1px;
  }
  .value-card-yellow { background: var(--color-primary); border-color: var(--color-primary); }
  .value-card-yellow .value-num { background: var(--color-black); color: var(--color-primary); border-color: var(--color-black); }
  .value-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 10px;
  }
  .value-desc {
    font-size: 14px;
    color: var(--color-gray-700);
    line-height: 1.6;
  }
  .value-card-yellow .value-desc { color: rgba(0, 0, 0, 0.85); }

  /* PROCESS — clean 4x1 grid */
  .process-section { background: var(--color-bg-alt); position: relative; overflow: hidden; }
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .process-step {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 280px;
  }
  .process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
  }
  .process-step-yellow {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  .process-step-yellow .step-num,
  .process-step-yellow .step-title { color: var(--color-black); }
  .process-step-yellow .step-desc { color: rgba(0, 0, 0, 0.85); }
  .process-step-yellow:hover { border-color: var(--color-black); }
  .step-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 16px;
  }
  .step-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 10px;
  }
  .step-desc {
    font-size: 14px;
    color: var(--color-gray-700);
    line-height: 1.6;
  }

  @media (max-width: 1024px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .process-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
  }

  /* STORY (keep existing) */
  .story-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 60px;
    align-items: center;
  }
  .story-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-700);
    margin-bottom: 20px;
  }
  .story-text strong { color: var(--color-black); }
  .story-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
  }
  .story-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .stat-card {
    padding: 24px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
  }
  .stat-card:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
  }
  .stat-card .stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 1;
  }
  .stat-card .stat-label {
    display: block;
    font-size: 14px;
    color: var(--color-gray-600);
    margin-top: 8px;
  }
  .section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-black);
    margin-bottom: 16px;
  }
  .section-title .highlight { color: var(--color-primary-dark); }
  .section-desc {
    font-size: 17px;
    color: var(--color-gray-600);
    line-height: 1.6;
  }
  .section-header { text-align: center; margin-bottom: 48px; }

  /* PULL QUOTE */
  .section-dark-quote {
    background: var(--color-black);
    padding: 100px 0;
  }
  .section-dark-quote .pull-quote {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
  }
  .section-dark-quote .quote-text {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-white);
    margin-bottom: 24px;
  }
  .section-dark-quote .quote-text .highlight {
    color: var(--color-primary);
  }
  .section-dark-quote .quote-author {
    font-style: normal;
    font-size: 14px;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  /* CTA */
  .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
  .cta-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 16px;
  }
  .cta-desc {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 32px;
  }
  .cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 1024px) {
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
  }
  @media (max-width: 640px) {
    .story-actions, .cta-actions { flex-direction: column; }
    .story-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
  }
</style>

<script>
  // Parallax orbs (use data-parallax-speed from DecoOrb)
  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
  function updateParallax() {
    const scrolled = window.scrollY;
    parallaxEls.forEach(el => {
      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
      const ty = scrolled * speed * -0.3;
      el.style.transform = `translate3d(0, ${ty}px, 0)`;
    });
  }
  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
</script>
