---
import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import Hero from '../components/Hero.astro';
import BentoGrid from '../components/BentoGrid.astro';
import BentoTile from '../components/BentoTile.astro';
import DecoOrb from '../components/DecoOrb.astro';
import { getCollection } from 'astro:content';
import PortfolioCard from '../components/PortfolioCard.astro';

// 4 problem cards (down from 12) — each has symptom + cause + how we fix it
const problemCards = [
  {
    icon: 'trendingDown',
    title: 'ลงโฆษณาแล้วยอดไม่ขยับ',
    symptom: 'คลิกเยอะ ยอดขายเท่าเดิม แต่คนที่ไม่ซื้อ',
    cause: 'เลือกกลุ่มเป้าหมายผิด หรือยิงทุก Platform โดยไม่ดูว่าอันไหนคุ้ม',
    fix: 'ดูสถิติ 3 เดือนย้อนหลัง แยกว่า Platform ไหน Convert ดี ตัดอันที่เสียเงินเปล่า? หรือ ถ้ายังไม่มีการวางระบบเก็บข้อมูล ก็จะวางระบบให้ ดังนั้นระยะยาวจะเห็นความแตกต่างแน่นอน',
    example: 'เคส Dataroot: เพิ่ม Impression 373%, Click 114% โดยใช้งบน้อยลง 28% — ดูเคสเต็มใน Portfolio',
  },
  {
    icon: 'shoppingCart',
    title: 'เว็บมีคนเข้า แต่ไม่มีคนซื้อ',
    symptom: 'Traffic เข้าพอสมควร แต่ไม่มีใครทัก ไม่มีใครโทร',
    cause: 'เว็บสวยแต่ไม่ได้ออกแบบมาให้คนซื้อ หรือมีจุดติดขัดที่ทำให้คนออกก่อน',
    fix: 'กรณีที่เว็บไม่มีการวางโค้ดเก็บสถิติ ก็จะวางระบบให้ ในกรณีที่มีระบบเก็บสถิติแล้ว ก็จะศึกษาสถิติ และดู Heatmap ว่าคนเข้ามาแล้วทำอะไร และปรับเว็บทีละจุด',
    example: 'ลองคุยกัน เราจะดูให้ว่าเว็บคุณติดปัญหาตรงไหน',
  },
  {
    icon: 'clipboard',
    title: 'งานซ้ำ ๆ เสียเวลาเป็นชั่วโมงทุกวัน',
    symptom: 'ทีมต้องคีย์ข้อมูล ทำรายงาน ตอบแชตเดิม ๆ จนไม่มีเวลาทำงานหลัก',
    cause: 'ระบบไม่มีการเชื่อมกัน หรือยังทำ Manual อยู่',
    fix: 'ดู Workflow ก่อน แล้วเลือกเครื่องมือที่เหมาะสม เช่น n8n, Script, หรือ AI ซึ่งจะช่วยลดเวลาจากชั่วโมงเป็นนาที หรือ อาจจะไม่ต้องให้พนักงานเสียเวลาอีกเลย เพราะระบบทำให้เองอัตโนมัติ',
    example: 'ลองคุยกัน เราจะดู Workflow ให้ฟรี',
  },
  {
    icon: 'brain',
    title: 'ให้พนักงานใช้ AI แต่ไม่เห็นผลลัพธ์อย่างที่ต้องการ และยังมีค่าใช้จ่ายที่สูงเพิ่มแทน',
    symptom: 'จ่ายแพง ใช้ AI ระดับ Frontier กับทุกงาน แต่ผลลัพธ์ไม่คุ้มเงิน',
    cause: 'ใช้ AI ผิดแบบ — งานหลายอย่างใช้ Model ราคาถูกก็ได้ผลเท่า ๆ กัน หรือ พนักงานไม่เข้าใจสิ่งที่ AI จะช่วยงานจริง ทำให้ใช้งานผิดรูปแบบ',
    fix: 'เลือกใช้ AI ให้ถูกกับงาน เพื่อประหยัดค่าใช้จ่าย รวมถึงให้ความรู้ หรือ วางระบบ AI Agent ให้มี skill เฉพาะทาง เพื่อช่วยพนักงาน ไม่ใช้ให้พนักงานใช้ AI โดยไม่มี skill พิเศษ',
    example: 'AI Audit ฟรี — บอกได้ว่าควรใช้ AI ตัวไหน',
  },
];

// Surface color rotation for the 4 problem cards — keep variety
const problemSurfaces = ['yellow', 'purple-soft', 'mint', 'soft'] as const;

const services = await getCollection('services');

// De-duplicate services: keep only the `-new` version when both old and new exist
// for the same base slug. Falls back to the old one if no `-new` exists.
// Group by base slug (strip trailing `-new` if present).
const dedupedServices = (() => {
  const byBase = new Map<string, typeof services[number]>();
  for (const s of services) {
    const base = s.id.endsWith('-new') ? s.id.slice(0, -4) : s.id;
    const existing = byBase.get(base);
    if (!existing) {
      byBase.set(base, s);
    } else if (s.id.endsWith('-new') && !existing.id.endsWith('-new')) {
      // Prefer the -new version
      byBase.set(base, s);
    }
  }
  return Array.from(byBase.values());
})();

const portfolio = await getCollection('portfolio');
const featuredPortfolio = portfolio.filter(p =>
  ['dataroot', 'jet-industries', 'tuanthong', 'lawyernoom'].includes(p.id)
).sort((a, b) => {
  const order = ['dataroot', 'jet-industries', 'tuanthong', 'lawyernoom'];
  return order.indexOf(a.id) - order.indexOf(b.id);
});
---

<Base title="MoreminiMore - ที่ปรึกษาเว็บ การตลาด และ AI สำหรับ SME ไทย">
  <Navigation />

  <Hero
    badge="Moreminimore"
    title="เราจะช่วยคุณเพิ่มกำไร"
    subtitle="เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด"
  >
    <a slot="hero-cta-secondary" href="/portfolio" class="btn btn-outline-dark">
      ดูผลงานจริง
    </a>
  </Hero>

  <!-- PROBLEM SECTION — Bento layout (4 cards, varied spans) -->
  <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;">
      <div class="section-header reveal">
        <span class="section-badge">4 ปัญหาที่เจอบ่อยที่สุด</span>
        <h2 class="section-title">
          แต่ละปัญหา<span class="highlight">มีวิธีแก้ที่ต่างกัน</span>
        </h2>
        <p class="section-desc">เราไม่ได้บอกว่า "เราทำได้หมด" แต่บอกว่า "ถ้าเป็นแบบนี้ ทำแบบนี้"</p>
      </div>

      <BentoGrid>
        {problemCards.map((card, i) => (
          <BentoTile span={6} surface={problemSurfaces[i]} eyebrow={`ปัญหา ${String(i + 1).padStart(2, '0')}`} title={card.title}>
            <div class="problem-section">
              <span class="problem-label">อาการ</span>
              <p class="problem-text">{card.symptom}</p>
            </div>

            <div class="problem-section">
              <span class="problem-label">สาเหตุส่วนใหญ่</span>
              <p class="problem-text">{card.cause}</p>
            </div>

            <div class="problem-fix">
              <span class="problem-label problem-label-fix">เราแก้ยังไง</span>
              <p class="problem-text">{card.fix}</p>
            </div>

            <div class="problem-example">
              <span class="problem-example-icon">▸</span> {card.example}
            </div>
          </BentoTile>
        ))}
      </BentoGrid>

      <p class="problem-closing reveal">
        ไม่แน่ใจว่าตรงกับข้อไหน — <a href="/contact" class="closing-link">นัดคุย 30 นาทีฟรี</a> เราจะช่วยดู
      </p>
    </div>
  </section>

  <!-- SERVICES SECTION — Bento layout (4 services, asymmetric) -->
  <section class="section section-bento">
    <DecoOrb color="purple" size="500px" speed={0.4} position={{ top: '-200px', right: '-150px' }} opacity={0.2} blur="100px" />
    <DecoOrb color="yellow" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.25} 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">ไม่จำเป็นต้องทำทุกอย่างพร้อมกัน</p>
      </div>

      <BentoGrid>
        {dedupedServices.slice(0, 4).map((s, i) => {
          // Tile-specific copy overrides (per user spec)
          const tileCopy = [
            {
              eyebrow: 'ที่ปรึกษาด้าน AI',
              surface: 'mint',
              subtitle: 'การนำ AI มาปรับใช้ในองค์กร เพื่อลดต้นทุนและเวลา รวมถึงการรักษาความรู้จากพนักงานที่เชี่ยวชาญ',
              objective: 'รักษาความรู้ขององค์กร ลดต้นทุนและเวลาการทำงาน',
              bullets: [
                'วิเคราะห์ workflow ที่เหมาะกับ AI ก่อนลงทุน',
                'เลือก AI Model ที่คุ้มค่า ไม่ใช่แพงสุด',
                'วางระบบ AI Agent ที่พนักงานใช้จริง',
              ],
            },
            {
              eyebrow: 'วางระบบ Automation',
              surface: 'yellow',
              subtitle: 'การออกแบบระบบ Automation สำหรับธุรกิจคุณโดยเฉพาะ',
              objective: 'ลดต้นทุนและเวลา',
              bullets: [
                'ดู Workflow ก่อน เลือกเครื่องมือที่เหมาะสม',
                'ลดเวลางานซ้ำจากชั่วโมงเป็นนาที',
                'ระบบทำงานอัตโนมัติ พนักงานไม่เสียเวลาทำ Manual',
              ],
            },
            {
              eyebrow: 'ที่ปรึกษาการตลาดออนไลน์',
              surface: 'purple-soft',
              subtitle: 'ออกแบบและวางกลยุทธ์ตามสถิติ กลุ่มเป้าหมาย และการทำงานขององค์กรคุณ',
              objective: 'เพิ่มยอดขาย',
              bullets: [
                'วางกลยุทธ์จากสถิติกลุ่มเป้าหมาย ไม่ใช่เดา',
                'ดู Platform ที่ Convert ดี ตัดอันที่เสียเงินเปล่า',
                'ระบบเก็บข้อมูล + วิเคราะห์ผล ค่อย ๆ ปรับ',
              ],
            },
            {
              eyebrow: 'พัฒนาเว็บไซต์',
              surface: 'teal-soft',
              subtitle: 'พัฒนาเว็บไซต์ที่สร้างผลลัพธ์ได้จริง สวยงาม และลูกค้าสามารถดูแลได้เอง',
              objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ',
              bullets: [
                'เว็บที่ขายได้ + ลูกค้าดูแลเอง ไม่ต้องพึ่งเราทุกครั้ง',
                'ออกแบบ SEO + GEO ให้ติดทั้ง Google และ AI Search',
                'เลือก Tech Stack ที่เหมาะกับธุรกิจ ไม่ใช่ของถูกแต่พังบ่อย',
              ],
            },
          ];
          // 2x2 layout — each tile span 6 (6+6 per row, 2 rows)
          const span = 6;
          const copy = tileCopy[i];
          const surface = copy.surface;
          return (
            <BentoTile span={span} surface={surface} eyebrow={copy.eyebrow} title={s.data.title}>
              <p class="mega-subtitle">{copy.subtitle}</p>
              <ul class="mega-bullets">
                {copy.bullets.map(b => <li>{b}</li>)}
              </ul>
              <div class="mega-objective">
                <span class="objective-label">เป้าหมาย:</span>
                <span class="objective-value">{copy.objective}</span>
              </div>
              <span class="mega-cta">ดูรายละเอียด →</span>
              <a href={`/services/${s.id}`} class="tile-link-overlay" aria-label={`ดูรายละเอียด ${s.data.title}`}></a>
            </BentoTile>
          );
        })}
      </BentoGrid>

      <div class="section-cta">
        <a href="/services" class="btn btn-dark btn-lg">ดูบริการทั้งหมด →</a>
      </div>
    </div>
  </section>

  <!-- PULL QUOTE -->
  <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>

  <!-- PORTFOLIO PREVIEW — featured real cases (filtered: must have url) -->
  <section class="section section-soft">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge">ผลงานจริง ไม่ใช่ Mockup</span>
        <h2 class="section-title">
          ลูกค้าจริง <span class="highlight">เว็บจริง</span>
        </h2>
        <p class="section-desc">คลิกเข้าไปดูเว็บจริงที่ใช้งานอยู่ทุกวันนี้</p>
      </div>

      <div class="portfolio-preview-grid stagger-children">
        {featuredPortfolio.filter(p => p.data.url).slice(0, 4).map((item) => (
          <PortfolioCard
            name={item.data.name}
            url={item.data.url}
            category={item.data.category}
            category_label={item.data.category_label}
            industry={item.data.industry}
            thumbnail={item.data.thumbnail}
            description={item.data.description}
            what_we_did={item.data.what_we_did}
            result={item.data.result}
          />
        ))}
      </div>

      <div class="section-cta">
        <a href="/portfolio" class="btn btn-dark btn-lg">ดูผลงานทั้งหมด →</a>
      </div>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="section section-yellow cta-section">
    <div class="container">
      <div class="cta-content reveal">
        <h2 class="cta-title">คุยกันก่อน 30 นาที ฟรี</h2>
        <p class="cta-desc">เราจะแนะนำแนวทางเบื้องต้นให้คุณว่าควรเริ่มจากตรงไหน — จะบอกตรง ๆ ว่าอะไรควรทำหรือไม่ควรทำ</p>
        <div class="cta-actions">
          <a href="/contact" class="btn btn-dark btn-lg">
            นัดคุย 30 นาที
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </a>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">
            ทัก LINE: @moreminimore
          </a>
        </div>
        <p class="cta-reassurance">ไม่มี commitment · ไม่มี script sales · พูดตรง ๆ</p>
      </div>
    </div>
  </section>

  <Footer />
</Base>

<style>
  .section-bento {
    position: relative;
    overflow: hidden;
  }

  /* ============================================
     PROBLEM TILES (inside BentoTile)
     ============================================ */
  .problem-section {
    margin-bottom: 14px;
  }
  .problem-fix {
    background: rgba(255, 220, 0, 0.25);
    border-left: 3px solid var(--color-black);
    padding: 12px 14px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 14px -14px;
  }
  .surface-purple-soft .problem-fix,
  .surface-mint .problem-fix,
  .surface-soft .problem-fix {
    background: rgba(0, 0, 0, 0.05);
    border-left-color: var(--color-black);
  }
  .problem-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    opacity: 0.7;
  }
  .surface-yellow .problem-label { color: var(--color-black); opacity: 0.7; }
  .problem-label-fix { color: var(--color-black); opacity: 1; }
  .problem-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }
  .surface-yellow .problem-text { color: var(--color-black); }
  .surface-purple-soft .problem-text,
  .surface-mint .problem-text,
  .surface-soft .problem-text { color: var(--color-gray-700); }
  .problem-example {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed currentColor;
    opacity: 0.7;
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
  }
  .problem-example-icon {
    font-style: normal;
    font-weight: 700;
    margin-right: 4px;
  }
  .problem-closing {
    text-align: center;
    margin-top: 48px;
    font-size: 17px;
    color: var(--color-gray-700);
  }
  .closing-link {
    color: var(--color-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ============================================
     SERVICES TILES (inside BentoTile)
     ============================================ */
  .mega-subtitle {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .surface-yellow .mega-subtitle { color: var(--color-black); opacity: 0.85; }
  .surface-purple-soft .mega-subtitle { color: var(--color-black); }
  .surface-soft .mega-subtitle { color: var(--color-gray-700); }

  /* Bullet list for service tiles */
  .mega-bullets {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
  }
  .mega-bullets li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
  }
  .mega-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
  }

  /* Light text on dark service tiles — currently none used (teal-soft is light) */
  .surface-soft .mega-subtitle { color: var(--color-gray-700); }
  .mega-objective {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
  }
  .surface-yellow .mega-objective { background: rgba(0, 0, 0, 0.1); }
  .objective-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
  }
  .objective-value {
    font-size: 13px;
    font-weight: 700;
  }
  .surface-yellow .objective-value { color: var(--color-black); }
  .mega-cta {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  .bento-tile:hover .mega-cta { transform: translateX(4px); }

  /* ============================================
     PORTFOLIO PREVIEW
     ============================================ */
  .portfolio-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
  }

  /* ============================================
     SECTION UTILITIES
     ============================================ */
  .section-header { margin-bottom: 40px; }
  .section-cta {
    text-align: center;
    margin-top: 48px;
  }

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

  /* ============================================
     FINAL CTA — yellow section
     ============================================ */
  .cta-section {
    background: var(--color-primary);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: var(--color-primary-dark);
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
  }
  .cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: var(--color-primary-dark);
    border-radius: 50%;
    opacity: 0.3;
    z-index: 0;
  }
  .cta-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .cta-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 20px;
    line-height: 1.15;
  }
  .cta-desc {
    font-size: 18px;
    color: var(--color-black);
    opacity: 0.8;
    margin-bottom: 36px;
    line-height: 1.6;
  }
  .cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .cta-actions .btn svg {
    width: 18px;
    height: 18px;
    margin-left: 4px;
  }
  .cta-reassurance {
    font-size: 14px;
    color: var(--color-black);
    opacity: 0.7;
    font-weight: 500;
  }

  /* ============================================
     RESPONSIVE
     ============================================ */
  @media (max-width: 1024px) {
    .portfolio-preview-grid { grid-template-columns: 1fr; max-width: 500px; }
  }
  @media (max-width: 640px) {
    .cta-actions { flex-direction: column; }
    .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>
