---
import PageShell from '../components/PageShell.astro';
import { portfolio, process, problems, services } from '../data/site.js';
---

<PageShell
  title="MoreminiMore | เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า"
  description="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด"
>
  <section id="home" class="hero scene scene-light" data-scene="light">
    <div class="hero-grid">
      <div class="hero-copy">
        <p class="eyebrow">พาร์ทเนอร์สำหรับ SME ที่อยากตัดสินใจให้คุ้มขึ้น</p>
        <h1 class="desktop-title">
          <span>เป้าหมายของเราคือ<br>การเพิ่ม<span class="text-highlight">กำไร</span>ให้ลูกค้า</span>
        </h1>
        <h1 class="mobile-title" aria-hidden="true">
          <span>เป้าหมาย</span>
          <span>ของเราคือ</span>
          <span>การเพิ่ม</span>
          <span><span class="text-highlight">กำไร</span></span>
          <span>ให้ลูกค้า</span>
        </h1>
        <p class="hero-lead">
          เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำอย่างมีประสิทธิภาพ และเหมาะกับธุรกิจของคุณ
        </p>
        <div class="hero-actions">
          <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
          <a class="button button-secondary" href="#portfolio">ดูผลงานก่อน</a>
        </div>
      </div>

      <div class="hero-neural" data-depth-card>
        <canvas class="neural-canvas" aria-hidden="true"></canvas>
        <div class="neural-scene">
          <div class="neural-node node-center" data-node="center">
            <span class="node-label">กำไร</span>
            <span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
          </div>
          <div class="neural-node neural-card node-marketing" data-node="marketing">
            <span class="card-tag">Marketing</span>
            <span class="card-desc">เพิ่มรายได้</span>
          </div>
          <div class="neural-node neural-card node-ai" data-node="ai">
            <span class="card-tag">AI</span>
            <span class="card-desc">ลดต้นทุนและเวลา</span>
          </div>
          <div class="neural-node neural-card node-biz" data-node="biz">
            <span class="card-tag">Business Knowledge</span>
            <span class="card-desc">ลดความเสี่ยง</span>
          </div>
        </div>
      </div>
      </div>
  </section>

  <section class="problem-strip">
    <div class="problem-strip-head">
      <p class="eyebrow">เริ่มจากปัญหา</p>
      <h2>คุณมีปัญหาเหล่านี้ไหม?</h2>
    </div>

    <div class="problem-sign-grid">
      <div class="problem-sign">
        <span class="problem-sign-num">01</span>
        <span class="problem-sign-text">เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</span>
      </div>
      <div class="problem-sign">
        <span class="problem-sign-num">02</span>
        <span class="problem-sign-text">ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</span>
      </div>
      <div class="problem-sign">
        <span class="problem-sign-num">03</span>
        <span class="problem-sign-text">ทีมงานทำงานช้า หรือผิดพลาดบ่อย</span>
      </div>
      <div class="problem-sign">
        <span class="problem-sign-num">04</span>
        <span class="problem-sign-text">พนักงานลาออก พร้อมกับความรู้เกี่ยวกับลูกค้า</span>
      </div>
    </div>

    <p class="problem-closing">
      ถ้าคุณมี 1 ใน 4 ปัญหานี้ — <strong>คุณคือคนที่เราอยากช่วย</strong>
    </p>
  </section>

  <section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
    <div class="section-heading">
      <p class="eyebrow">กรณีศึกษา</p>
      <div>
        <h2>Dataroot</h2>
        <p>บริษัทให้บริการ ERP Software และการปรับแต่ ERP Software สำหรับองค์กรขนาดใหญ่</p>
      </div>
    </div>

    <div class="case-grid">
      <article class="case-story glass-panel liquid-glass liquidGlass-wrapper">
        <div class="liquidGlass-effect" aria-hidden="true"></div>
        <div class="liquidGlass-tint" aria-hidden="true"></div>
        <div class="liquidGlass-shine" aria-hidden="true"></div>
        <p class="case-story-title">เราทำอะไรบ้าง กับลูกค้าเจ้านี้</p>
        <div class="story-step">
          <span>01</span>
          <h3>ปัญหา</h3>
          <p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูมีการใช้งบประมาณสูงมาก โดยลูกค้าที่ได้มาไม่คุ้มค่ากับงบประมาณที่จ่ายไป</p>
        </div>
        <div class="story-step">
          <span>02</span>
          <h3>สิ่งที่พบ</h3>
          <p>ตั้งค่าโฆษณากว้างมากเกินไป ทำให้เสียงบประมาณไปกับกลุ่มคนที่ไม่ใช้เป้าหมาย</p>
        </div>
        <div class="story-step">
          <span>03</span>
          <h3>สิ่งที่ปรับ</h3>
          <p>ปรับการตั้งค่าโดยโฟกัส กลุ่มเป้าหมาย เพื่อให้โฆษณาไปแสดงเฉพาะกลุ่มคนที่น่าจะเป็นลูกค้า</p>
        </div>
      </article>

      <div class="case-proof" data-depth-card>
        <img src="/images/portfolio/dataroot.png" alt="Dataroot website screenshot" loading="lazy" />
        <div class="metric-card">
          <strong>+373%</strong>
          <span>impression</span>
        </div>
        <div class="metric-card">
          <strong>+114.2%</strong>
          <span>click</span>
        </div>
        <div class="metric-card">
          <strong>-28.3%</strong>
          <span>ad spend</span>
        </div>
      </div>
    </div>
  </section>

  <section id="services" class="services-section scene scene-light" data-scene="light">
    <div class="section-heading">
      <p class="eyebrow">บริการของเรา</p>
      <h2>บริการเพื่อตอบโจทย์ปัญหาของคุณ</h2>
    </div>

    <div class="service-grid">
      {services.map((service) => (
        <article class="service-card liquid-glass liquidGlass-wrapper">
          <div class="liquidGlass-effect" aria-hidden="true"></div>
          <div class="liquidGlass-tint" aria-hidden="true"></div>
          <div class="liquidGlass-shine" aria-hidden="true"></div>
          <span>{service.name}</span>
          <h3>{service.headline}</h3>
          <p>{service.copy}</p>
          <ul>
            {service.approach.map((item) => <li>{item}</li>)}
          </ul>
        </article>
      ))}
    </div>
  </section>

  <section id="process" class="process-section">
    <div class="section-heading">
      <p class="eyebrow">วิธีการทำงาน</p>
      <h2>กลยุทธ์และระบบงานของเรา สำหรับลูกค้าแต่ละรายจะไม่เหมือนกัน</h2>
    </div>
    <div class="process-grid">
      {process.map(([title, copy], index) => (
        <article class="liquid-glass liquidGlass-wrapper">
          <div class="liquidGlass-effect" aria-hidden="true"></div>
          <div class="liquidGlass-tint" aria-hidden="true"></div>
          <div class="liquidGlass-shine" aria-hidden="true"></div>
          <span class="step-number">{String(index + 1).padStart(2, '0')}</span>
          <h3>{title}</h3>
          <p>{copy}</p>
        </article>
      ))}
    </div>
  </section>

  <section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
    <div class="section-heading">
      <p class="eyebrow">ผลงานของเรา</p>
      <h2>ผลงานและลูกค้าบางส่วนของเรา</h2>
    </div>

    <div class="portfolio-grid">
      {portfolio.filter(p => p.featured).map((item) => (
        <a class:list={['portfolio-card', item.featured && 'featured']} href={item.href} target="_blank" rel="noopener noreferrer">
          <img src={item.image} alt={`${item.name} website screenshot`} loading={item.featured ? 'eager' : 'lazy'} />
          <div>
            <span>{item.tag}</span>
            <h3>{item.name}</h3>
            <p>{item.description}</p>
          </div>
        </a>
      ))}
    </div>
    <div class="portfolio-more">
      <a class="button button-primary" href="/portfolio/">ไปหน้า ผลงาน</a>
    </div>
  </section>

  <section class="final-cta">
    <div class="glass-panel liquid-glass liquidGlass-wrapper">
      <div class="liquidGlass-effect" aria-hidden="true"></div>
      <div class="liquidGlass-tint" aria-hidden="true"></div>
      <div class="liquidGlass-shine" aria-hidden="true"></div>
      <p class="eyebrow">เริ่มต้นง่าย ๆ</p>
      <h2>ส่งโจทย์มาให้เราก่อนได้ คลิ๊กปุ่มด้านล่าง และกรอกแบบฟอร์ม</h2>
      <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
    </div>
  </section>
</PageShell>
