---
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 Icon from '../components/Icon.astro';
import BentoGrid from '../components/BentoGrid.astro';
import BentoTile from '../components/BentoTile.astro';
import DecoOrb from '../components/DecoOrb.astro';

// Service options for the form — with lucide icon names
const serviceOptions = [
  { value: 'webdev', label: 'AI-Enhanced Website (เว็บ + Chatbot + SEO)', icon: 'globe' },
  { value: 'automation', label: 'AI Automation (Workflow + Chatbot)', icon: 'cog' },
  { value: 'marketing', label: 'Online Marketing Automation (Email + LINE + Facebook)', icon: 'megaphone' },
  { value: 'seo', label: 'SEO + AI Content System', icon: 'search' },
  { value: 'consult', label: 'Tech Consult (Server / Data Pipeline)', icon: 'server' },
  { value: 'audit', label: 'Audit เว็บไซต์เดิมฟรี 30 นาที', icon: 'briefcase' },
  { value: 'unsure', label: 'ยังไม่แน่ใจ — ช่วยแนะนำ', icon: 'help' },
];
---

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

  <PageHero
    badge="30 นาที · ไม่มีค่าใช้จ่าย · ไม่มี commitment"
    title="คุยกับ คนจริง ๆ ไม่ใช่ Bot"
    subtitle="ตอบกลับภายใน 2 ชั่วโมง · เลือกช่องทางที่คุณสะดวก — LINE, โทร, Email หรือฟอร์ม"
  />

  <!-- QUICK CHANNEL PICKER (BENTO) -->
  <section class="section section-bento">
    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <BentoGrid>
        <BentoTile span={4} surface="yellow" eyebrow="LINE Official" title="@moreminimore">
          <div class="channel-icon"><Icon name="message" size={32} /></div>
          <p>คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
          <p class="meta">ตอบใน 30 นาที (เวลาทำการ)</p>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-dark" style="margin-top: 16px;">ทักเลย →</a>
        </BentoTile>
        <BentoTile span={4} surface="soft" eyebrow="โทรศัพท์" title="080-995-5945">
          <div class="channel-icon"><Icon name="phone" size={32} /></div>
          <p>คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
          <p class="meta">รับสายทันที หรือโทรกลับภายใน 2 ชม.</p>
          <a href="tel:0809955945" class="btn btn-dark" style="margin-top: 16px;">โทรเลย →</a>
        </BentoTile>
        <BentoTile span={4} surface="purple-soft" eyebrow="Email" title="contact@moreminimore.com">
          <div class="channel-icon"><Icon name="mail" size={32} /></div>
          <p>คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
          <p class="meta">ตอบภายใน 1 วันทำการ</p>
          <a href="mailto:contact@moreminimore.com" class="btn btn-dark" style="margin-top: 16px;">ส่งอีเมล →</a>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  <!-- CONTACT FORM + INFO (BENTO) -->
  <section class="section form-section section-bento">
    <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '10%', right: '-100px' }} opacity={0.25} blur="80px" />
    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '5%', left: '-100px' }} opacity={0.2} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <BentoGrid>
        <!-- FORM — big tile on the left -->
        <BentoTile span={8} surface="white" eyebrow="ส่งข้อความ" title="กรอก 4 ช่อง ใช้เวลา 60 วินาที">
          <p class="form-subtitle">เราจะตอบกลับภายใน 2 ชั่วโมง (เวลาทำการ)</p>

          <form class="contact-form" id="contact-form">
            <div class="form-row">
              <div class="form-group">
                <label for="name" class="form-label">ชื่อ-นามสกุล *</label>
                <input type="text" id="name" name="name" required class="form-input" placeholder="สมชาย ใจดี" />
              </div>
              <div class="form-group">
                <label for="email" class="form-label">อีเมล *</label>
                <input type="email" id="email" name="email" required class="form-input" placeholder="example@yourcompany.com" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="phone" class="form-label">เบอร์โทรศัพท์ <span class="optional">(ใส่ถ้าอยากให้โทรกลับ)</span></label>
                <input type="tel" id="phone" name="phone" class="form-input" placeholder="080-xxx-xxxx" />
              </div>
              <div class="form-group">
                <label for="budget" class="form-label">งบประมาณโดยประมาณ</label>
                <select id="budget" name="budget" class="form-input">
                  <option value="">เลือกช่วงงบ</option>
                  <option value="under-20k">ต่ำกว่า 20,000 บาท</option>
                  <option value="20k-50k">20,000–50,000 บาท</option>
                  <option value="50k-150k">50,000–150,000 บาท</option>
                  <option value="150k-500k">150,000–500,000 บาท</option>
                  <option value="over-500k">500,000 บาทขึ้นไป</option>
                  <option value="unsure">ยังไม่ได้กำหนด</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="service" class="form-label">บริการที่สนใจ</label>
              <select id="service" name="service" class="form-input">
                <option value="">เลือกบริการ (ไม่บังคับ)</option>
                {serviceOptions.map(opt => (
                  <option value={opt.value}>{opt.label}</option>
                ))}
              </select>
            </div>

            <div class="form-group">
              <label for="message" class="form-label">รายละเอียดโปรเจกต์ *</label>
              <textarea id="message" name="message" rows="5" required class="form-input" placeholder="เล่าสั้น ๆ ว่าธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร อยากได้ผลลัพธ์แบบไหน (1–3 บรรทัดพอ)"></textarea>
            </div>

            <button type="submit" class="btn btn-primary btn-submit">
              <span class="btn-text">ส่งข้อความ</span>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </button>
            <p class="form-helper">ไม่มี spam · ไม่มีขายของ · เข้า inbox เราโดยตรง</p>
          </form>

          <!-- Success message (hidden by default) -->
          <div class="form-success" id="form-success" hidden>
            <div class="success-icon">
              <Icon name="checkCircle" size={44} />
            </div>
            <h3>ส่งแล้ว!</h3>
            <p>เราจะตอบกลับภายใน 2 ชั่วโมง (ในเวลาทำการ) ถ้าเร่งด่วน ทัก LINE @moreminimore ครับ</p>
          </div>
        </BentoTile>

        <!-- INFO TILES — phone, email, line, hours as separate BentoTiles -->
        <BentoTile span={4} surface="yellow" eyebrow="โทรศัพท์" title="080-995-5945">
          <div class="info-icon"><Icon name="phone" size={24} /></div>
          <p>โทรคุยสดได้เลย</p>
          <p class="meta">จ-ศ 09:00-18:00</p>
          <a href="tel:0809955945" class="btn btn-dark" style="margin-top: 12px;">โทรเลย →</a>
        </BentoTile>

        <BentoTile span={4} surface="purple-soft" eyebrow="อีเมล" title="contact@moreminimore.com">
          <div class="info-icon"><Icon name="mail" size={24} /></div>
          <p>เหมาะกับส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
          <p class="meta">ตอบภายใน 1 วันทำการ</p>
          <a href="mailto:contact@moreminimore.com" class="btn btn-dark" style="margin-top: 12px;">ส่งอีเมล →</a>
        </BentoTile>

        <BentoTile span={4} surface="mint" eyebrow="LINE Official" title="@moreminimore">
          <div class="info-icon"><Icon name="message" size={24} /></div>
          <p>เร็วที่สุด ตอบใน 30 นาที (เวลาทำการ)</p>
          <p class="meta">นอกเวลา? ทักทิ้งไว้ได้</p>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-dark" style="margin-top: 12px;">ทักเลย →</a>
        </BentoTile>

        <BentoTile span={12} surface="dark" eyebrow="เวลาทำการ" title="จันทร์ - ศุกร์ 09:00 - 18:00 น.">
          <div class="info-icon"><Icon name="clock" size={24} /></div>
          <p>นอกเวลาทำการ? ทัก LINE ทิ้งไว้ได้ ตอบเช้าวันถัดไป</p>
          <p class="meta" style="color: rgba(255,255,255,0.7);">53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120 · นัดเจอล่วงหน้า</p>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  <!-- WHAT HAPPENS NEXT (BENTO) -->
  <section class="section section-soft section-bento">
    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} 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">3 ขั้นตอนถัดไป — <span class="highlight">ไม่มีอะไรซับซ้อน</span></h2>
      </div>
      <BentoGrid>
        <BentoTile span={4} surface="yellow" eyebrow="ขั้นที่ 1" title="ตอบกลับภายใน 2 ชั่วโมง">
          <p>คนจริง (ไม่ใช่ Bot) จะตอบ — ถามคำถามเพิ่ม 2–3 ข้อ เพื่อเข้าใจปัญหาคุณ</p>
        </BentoTile>
        <BentoTile span={4} surface="soft" eyebrow="ขั้นที่ 2" title="นัดปรึกษาฟรี 30 นาที">
          <p>คุยผ่าน Zoom / โทร / นัดเจอที่ออฟฟิศ (กรุงเทพ / สมุทรสาคร) — ไม่มี script sales</p>
        </BentoTile>
        <BentoTile span={4} surface="purple-soft" eyebrow="ขั้นที่ 3" title="ส่ง Proposal (3–5 วัน)">
          <p>เอกสาร PDF ที่ระบุ scope, timeline, ราคา — ไม่ชอบตรงไหนคุยกันแก้ได้</p>
        </BentoTile>
      </BentoGrid>
      <p class="next-closing">ถ้าไม่ตรง → เราจะบอกตรง ๆ ว่า "ไม่เหมาะ" และแนะนำทางเลือกอื่น</p>
    </div>
  </section>

  <!-- PRE-SUBMIT FAQ (BENTO) -->
  <section class="section section-bento">
    <DecoOrb color="teal" size="400px" speed={0.3} position={{ top: '-100px', right: '-100px' }} opacity={0.2} blur="80px" />
    <DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-50px' }} opacity={0.35} 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>
      <BentoGrid>
        <BentoTile span={6} surface="soft" eyebrow="01" title="คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?">
          <p>ไม่ คุยแล้วคุณไม่ชอบก็ไม่เป็นไร ไม่มี follow-up ไม่มีขายของเพิ่ม</p>
        </BentoTile>
        <BentoTile span={6} surface="soft" eyebrow="02" title="ถ้าส่งฟอร์มไปแล้วเงียบ ทำยังไง?">
          <p>ทัก LINE @moreminimore ตรง ๆ จะเร็วกว่า — หรือโทร 080-995-5945</p>
        </BentoTile>
        <BentoTile span={6} surface="yellow" eyebrow="03" title="คุยช่วงไหนได้บ้าง?">
          <p>จันทร์-ศุกร์ 09:00-18:00 ปกติ ถ้าคุณต่างจังหวัด/ต่างประเทศ นัดนอกเวลาได้ บอกล่วงหน้า 1–2 วัน</p>
        </BentoTile>
        <BentoTile span={6} surface="purple-soft" eyebrow="04" title="ต้องเตรียมอะไรไปคุยไหม?">
          <p>ไม่ต้องเตรียมอะไรเลย แค่บอกธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร งบประมาณเท่าไหร่ ที่เหลือเราถามเอง</p>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  <section class="section section-yellow cta-section">
    <div class="container">
      <div class="cta-content reveal">
        <h2 class="cta-title">หรือจะ <span class="highlight">อ่านก่อน</span> ก็ได้</h2>
        <p class="cta-desc">ไม่มี commitment ไม่มี pressure ไม่มีใครตาม</p>
        <div class="cta-actions">
          <a href="/services" class="btn btn-dark btn-lg">ดูบริการทั้งหมด</a>
          <a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a>
          <a href="/faq" class="btn btn-outline-dark btn-lg">ดู FAQ</a>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</Base>

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

  /* Channel tiles */
  .channel-icon { font-size: 40px; margin-bottom: 12px; color: var(--color-black); }
  .meta {
    font-size: 13px;
    color: var(--color-gray-600);
    margin-top: 4px;
  }
  .surface-yellow .meta { color: rgba(0, 0, 0, 0.7); }
  .surface-purple-soft .meta { color: var(--color-gray-700); }
  .surface-mint .meta { color: var(--color-gray-700); }
  .surface-dark .meta { color: rgba(255, 255, 255, 0.75); }

  /* Section header */
  .section-header { text-align: center; margin-bottom: 48px; }
  .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); }

  /* Info icon (used inside separate info tiles) */
  .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    color: var(--color-black);
  }
  .surface-dark .info-icon {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-primary);
  }
  .surface-yellow .info-icon {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-primary);
  }

  /* Form styles (kept, just slightly tightened) */
  .form-subtitle {
    font-size: 15px;
    color: var(--color-gray-600);
    margin-bottom: 24px;
    line-height: 1.5;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gray-700);
    margin-bottom: 8px;
  }
  .form-label .optional {
    text-transform: none;
    font-weight: 400;
    color: var(--color-gray-500);
  }
  .form-input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-black);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
  }
  .form-input::placeholder { color: var(--color-gray-400); }
  .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(254, 212, 0, 0.15);
  }
  textarea.form-input { resize: vertical; min-height: 120px; }

  .btn-submit {
    width: 100%;
    margin-top: 8px;
  }
  .form-helper {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-gray-500);
  }

  .form-success {
    text-align: center;
    padding: 60px 20px;
  }
  .success-icon {
    font-size: 64px;
    margin-bottom: 16px;
    color: var(--color-primary-dark);
  }
  .form-success h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 12px;
  }
  .form-success p {
    font-size: 16px;
    color: var(--color-gray-600);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Next step closing line */
  .next-closing {
    text-align: center;
    margin-top: 32px;
    font-size: 15px;
    color: var(--color-gray-700);
  }

  /* 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-title .highlight { color: var(--color-black); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 4px; }
  .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) {
    .form-row { grid-template-columns: 1fr; }
  }
  @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 });

  // Form submission
  const form = document.getElementById('contact-form') as HTMLFormElement;
  const success = document.getElementById('form-success');

  form?.addEventListener('submit', (e) => {
    e.preventDefault();
    const btn = form.querySelector('.btn-submit') as HTMLButtonElement;
    const btnText = btn.querySelector('.btn-text');
    const originalText = btnText?.textContent;
    if (btnText) btnText.textContent = 'กำลังส่ง...';
    btn.disabled = true;

    // Simulate submission (replace with real endpoint)
    setTimeout(() => {
      form.hidden = true;
      if (success) success.hidden = false;
      if (btnText) btnText.textContent = originalText;
      btn.disabled = false;
      // Scroll to success
      success?.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 800);
  });
</script>
