/* Main App for เฮียบัญชีบอต landing */

const { useState, useEffect, useRef } = React;

const LINE_URL = "https://lin.ee/rfLZEuE";
const LINE_ID = "@hiabuncheebot";

const TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "#FFC72C",
  "showAnnouncementBar": true,
  "ctaLabel": "เพิ่มเพื่อนใน LINE",
  "heroBg": "soft"
}/*EDITMODE-END*/;

// ---------- NAV ----------
function Nav({ ctaLabel }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <img src="assets/logo.png" alt="เฮียบัญชีบอต" />
          <div className="brand">
            เฮียบัญชี<span style={{color:'var(--green-600)'}}>Bot</span>
            <small>บัญชีง่ายๆ ในแชท LINE</small>
          </div>
        </a>
        <div className="nav-links">
          <a href="#features">ฟีเจอร์</a>
          <a href="#how">วิธีใช้</a>
          <a href="#pricing">ราคา</a>
          <a href="#review">รีวิว</a>
          <a href="#faq">คำถาม</a>
        </div>
        <a href={LINE_URL} target="_blank" rel="noopener" className="nav-cta">
          <Icon name="line" size={18} />
          {ctaLabel}
        </a>
      </div>
    </nav>
  );
}

// ---------- TOPBAR ----------
function TopBar() {
  return (
    <div className="topbar">
      <span>🎉 โปรเปิดตัว! ใช้ฟรี 30 วัน ไม่ต้องผูกบัตร</span>
      <span className="dot"></span>
      <span>ใช้ <strong>HIA30</strong> ลดเพิ่ม 30% เมื่ออัปเกรด</span>
    </div>
  );
}

// ---------- HERO ----------
function Hero() {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="badge">ใหม่</span>
            ใช้งานผ่าน LINE — ไม่ต้องโหลดแอปเพิ่ม
          </div>
          <h1>
            จดบัญชีง่ายๆ<br/>
            <span className="hl">แค่แชทใน LINE</span><br/>
            ไม่ต้องโหลดแอปเพิ่ม
            </h1>
          <p className="lede">
            ผู้ช่วยจดรายรับ-รายจ่ายอัตโนมัติ สำหรับร้านค้า พ่อค้าแม่ค้าออนไลน์
            และฟรีแลนซ์ พิมพ์ครั้งเดียวจบ สรุปยอดให้ทุกวัน ส่งออก Excel ได้
          </p>
          <div className="hero-ctas">
            <a href={LINE_URL} target="_blank" rel="noopener" className="btn btn-primary">
              <Icon name="line" size={20} />
              เพิ่มเพื่อนใช้ฟรี
            </a>
            <a href="#demo" className="btn btn-secondary">
              ดูตัวอย่างการใช้งาน <Icon name="arrow" size={16} />
            </a>
          </div>
          <div className="hero-trust">
            <div className="avatars">
              <span></span><span></span><span></span>
              <span>50K+</span>
            </div>
            <div className="trust-text">
              <b>ผู้ใช้งานกว่า 50,000+ ร้านค้า</b>
              <span className="stars">★★★★★</span>
              <div style={{fontSize:12, color:'var(--ink-500)', marginTop:2}}>คะแนนเฉลี่ย 4.9 จากผู้ใช้จริง</div>
            </div>
          </div>
        </div>

        <div className="phone-wrap">
          <FloatCard
            className="fc-1"
            icon={<Icon name="wallet" size={20}/>}
            t="ยอดวันนี้"
            v="฿ 4,820"
            iconBg="var(--green-100)"
            iconColor="var(--green-700)"
          />
          <FloatCard
            className="fc-2"
            icon={<Icon name="receipt" size={20}/>}
            t="รายการ"
            v="23 บิล"
            iconBg="var(--yellow-100)"
            iconColor="#C58A00"
          />
          <div className="phone">
            <div className="phone-notch"></div>
            <div className="phone-screen">
              <div className="line-header">
                <span className="back">‹</span>
                <div className="avatar">
                  <img src="assets/logo.png" alt="" />
                </div>
                <div>
                  <div className="name">เฮียบัญชี Bot</div>
                  <div className="status">ออนไลน์</div>
                </div>
              </div>
              <div className="chat-body">
                <div className="time-stamp">วันนี้ • 14:32</div>
                <Bubble from="me">ขายข้าวมันไก่ 50 บาท</Bubble>
                <Bubble from="bot">รับทราบเฮีย! บันทึกแล้ว ✅<br/>💰 รายรับ: ฿50</Bubble>
                <Bubble from="me">ซื้อไข่ไก่ 120</Bubble>
                <Bubble from="bot">บันทึกรายจ่าย ฿120 (หมวด: วัตถุดิบ) 🥚</Bubble>
                <Bubble from="me">สรุปวันนี้</Bubble>
                <div className="bubble from-bot card">
                  <div className="card-head">
                    <span>📊 สรุปวันนี้</span>
                    <span style={{opacity:0.8, fontWeight:400, fontSize:11}}>23 พ.ค.</span>
                  </div>
                  <div className="card-row">
                    <span className="label">รายรับ</span>
                    <span className="val income">+฿4,820</span>
                  </div>
                  <div className="card-row">
                    <span className="label">รายจ่าย</span>
                    <span className="val expense">−฿1,340</span>
                  </div>
                  <div className="card-row">
                    <span className="label">กำไรสุทธิ</span>
                    <span className="val">฿3,480</span>
                  </div>
                </div>
                <div className="typing"><span></span><span></span><span></span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- LOGO STRIP ----------
function LogoStrip() {
  return (
    <section className="logo-strip">
      <div className="container">
        <div className="logo-strip-title">ร้านค้าที่ไว้วางใจ</div>
        <div className="logo-strip-row">
          <div className="item">ร้านส้มตำเจ๊แดง</div>
          <div className="item">Cafe หอมกรุ่น</div>
          <div className="item">บ้านขนมโบราณ</div>
          <div className="item">Studio.Bkk</div>
          <div className="item">ออร่าฟาร์ม</div>
          <div className="item">เซรั่มคุณนาย</div>
        </div>
      </div>
    </section>
  );
}

// ---------- FEATURES ----------
const FEATURES = [
  { icon: "chat", title: "พิมพ์ครั้งเดียวจบ", desc: "พิมพ์เป็นภาษาธรรมชาติ บอทเข้าใจทันที ไม่ต้องเปิดแอป ไม่ต้องกดเมนู" },
  { icon: "tag", title: "แยกหมวดอัตโนมัติ", desc: "AI แยกหมวดรายรับ-รายจ่ายให้เอง ทั้งวัตถุดิบ ค่าขนส่ง ค่าน้ำค่าไฟ" },
  { icon: "chart", title: "สรุปยอดทุกวัน", desc: "รายงานสรุปประจำวัน รายสัปดาห์ รายเดือน พร้อมกราฟดูง่าย", featured: true },
  { icon: "bell", title: "แจ้งเตือนอัจฉริยะ", desc: "เตือนเก็บเงินลูกค้า เตือนจ่ายบิล แจ้งยอดผิดปกติให้รู้ทันที" },
  { icon: "download", title: "ส่งออก Excel / PDF", desc: "ดาวน์โหลดรายงานเพื่อยื่นภาษี ส่งบัญชี หรือเก็บเป็นหลักฐาน" },
  { icon: "shield", title: "ปลอดภัยมาตรฐานธนาคาร", desc: "เข้ารหัสข้อมูลแบบ AES-256 เก็บข้อมูลในเซิร์ฟเวอร์ไทย ไม่ขายต่อ" },
];

function Features() {
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">ทำไมต้องเฮียบัญชี</div>
          <h2>ฟีเจอร์ที่ทำให้บัญชี <em>ง่ายเหมือนคุยกับเพื่อน</em></h2>
          <p className="sub">เราออกแบบให้ใช้ง่ายที่สุด ไม่ต้องเรียนรู้ ไม่ต้องโหลดแอป<br/>เปิด LINE ก็จดบัญชีได้เลย</p>
        </div>
        <div className="features">
          {FEATURES.map((f, i) => (
            <div key={i} className={`feature ${f.featured ? 'featured' : ''}`}>
              <div className="ficon"><Icon name={f.icon} size={28}/></div>
              <h3>{f.title}</h3>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- HOW IT WORKS ----------
function HowItWorks() {
  return (
    <section className="section alt" id="how">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">เริ่มใช้ได้ใน 30 วินาที</div>
          <h2>ง่าย <em>3 ขั้นตอน</em> เริ่มจดบัญชีเลย</h2>
        </div>
        <div className="steps">
          <div className="step">
            <div className="step-num">1</div>
            <h3>เพิ่มเฮียเป็นเพื่อน</h3>
            <p>สแกน QR หรือกดปุ่ม Add LINE — ไม่ต้องสมัครเว็บใหม่ ไม่ต้องโหลดแอป</p>
          </div>
          <div className="step">
            <div className="step-num">2</div>
            <h3>พิมพ์บอกเฮีย</h3>
            <p>พิมพ์รายการเหมือนคุยกับเพื่อน เช่น "ขายเสื้อ 350" หรือ "ค่าน้ำมัน 500"</p>
          </div>
          <div className="step">
            <div className="step-num">3</div>
            <h3>เฮียสรุปให้</h3>
            <p>พิมพ์ "สรุปวันนี้" หรือ "เดือนนี้กำไรเท่าไหร่" เฮียตอบให้ทันที พร้อมกราฟ</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- DEMO ----------
function Demo() {
  const demoBubbles = [
    { who: "me", text: "ขายของออนไลน์ได้ 1,250 ตอนเช้า" },
    { who: "bot", text: "บันทึกรายรับ ฿1,250 (หมวด: ขายออนไลน์) ✅" },
    { who: "me", text: "แพ็คของส่ง flash 85 บาท" },
    { who: "bot", text: "บันทึกค่าขนส่ง ฿85 📦" },
    { who: "me", text: "ค่ากาแฟ 65" },
    { who: "bot", text: "บันทึกค่าใช้จ่ายส่วนตัว ฿65 ☕" },
    { who: "me", text: "เดือนนี้กำไรเท่าไหร่" },
    { who: "bot-card", text: null },
  ];

  return (
    <section className="section" id="demo">
      <div className="container demo-grid">
        <div className="demo-text">
          <div className="section-header">
            <div className="section-eyebrow">ตัวอย่างการใช้งานจริง</div>
            <h2>คุย<em>ภาษาคน</em> กับเฮีย<br/>เฮียเข้าใจหมด</h2>
            <p className="sub">ไม่ต้องใส่รหัสบัญชี ไม่ต้องเลือกหมวดเอง บอทจัดการให้</p>
          </div>
          <ul className="demo-list">
            <li>
              <div className="check"><Icon name="check" size={16}/></div>
              <div className="ct">
                <div className="t">เข้าใจภาษาไทยธรรมชาติ</div>
                <div className="d">"ขายข้าวมันไก่ 50" หรือ "ได้ตังมา 50 บาทค่าข้าว" บอทเข้าใจทั้งคู่</div>
              </div>
            </li>
            <li>
              <div className="check"><Icon name="check" size={16}/></div>
              <div className="ct">
                <div className="t">รองรับการส่งรูปสลิป</div>
                <div className="d">ส่งสลิปโอนเงินมา บอทอ่านยอดและบันทึกให้อัตโนมัติ</div>
              </div>
            </li>
            <li>
              <div className="check"><Icon name="check" size={16}/></div>
              <div className="ct">
                <div className="t">ถามอะไรก็ได้</div>
                <div className="d">"สัปดาห์นี้กำไรเท่าไหร่" "เดือนที่แล้วจ่ายค่าน้ำมันรวมเท่าไหร่"</div>
              </div>
            </li>
            <li>
              <div className="check"><Icon name="check" size={16}/></div>
              <div className="ct">
                <div className="t">ทีมงานหลายคนใช้ร่วมกันได้</div>
                <div className="d">เชิญลูกน้องเข้ากลุ่ม LINE บอทแยกข้อมูลตามผู้ใช้</div>
              </div>
            </li>
          </ul>
        </div>
        <div className="demo-chat">
          <div className="demo-bubbles">
            <div className="time-stamp">การสนทนาตัวอย่าง</div>
            {demoBubbles.map((b, i) => {
              if (b.who === "bot-card") {
                return (
                  <div key={i} className="bubble from-bot card" style={{width:'85%'}}>
                    <div className="card-head">
                      <span>📊 สรุปเดือน พ.ค.</span>
                      <span style={{opacity:0.8, fontWeight:400, fontSize:11}}>1–23 พ.ค.</span>
                    </div>
                    <div className="card-row"><span className="label">รายรับรวม</span><span className="val income">+฿89,450</span></div>
                    <div className="card-row"><span className="label">รายจ่ายรวม</span><span className="val expense">−฿32,180</span></div>
                    <div className="card-row"><span className="label">กำไรสุทธิ</span><span className="val">฿57,270</span></div>
                    <div className="card-row"><span className="label">เทียบเดือนก่อน</span><span className="val income">+18.2% ↑</span></div>
                  </div>
                );
              }
              return <Bubble key={i} from={b.who}>{b.text}</Bubble>;
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- STATS ----------
function Stats() {
  return (
    <section className="section dark">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">ตัวเลขที่พิสูจน์แล้ว</div>
          <h2>เฮียดูแลบัญชีให้ <em style={{color:'var(--yellow-400)'}}>กว่า 50,000 ร้านค้า</em></h2>
        </div>
        <div className="stats">
          <div className="stat"><div className="num">50K+</div><div className="lbl">ร้านค้าที่ใช้งาน</div></div>
          <div className="stat"><div className="num">2.4M</div><div className="lbl">รายการต่อเดือน</div></div>
          <div className="stat"><div className="num">99.9%</div><div className="lbl">ความแม่นยำของ AI</div></div>
          <div className="stat"><div className="num">4.9★</div><div className="lbl">รีวิวจากผู้ใช้</div></div>
        </div>
      </div>
    </section>
  );
}

// ---------- PRICING ----------
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">แพ็กเกจที่เหมาะกับคุณ</div>
          <h2>เริ่มต้น<em>ฟรี</em> ใช้จริงค่อยจ่าย</h2>
          <p className="sub">ไม่มีค่าสมัคร ไม่มีสัญญาผูกมัด ยกเลิกได้ทุกเมื่อ</p>
        </div>
        <div className="pricing">
          <div className="price-card">
            <div className="price-tier">เริ่มต้น</div>
            <div className="price-name">ฟรี</div>
            <div className="price-tag">เหมาะกับร้านค้าเล็กๆ พ่อค้าแม่ค้ามือใหม่</div>
            <div className="price-amount">
              <span className="currency">฿</span>0
              <span className="period">/เดือน</span>
            </div>
            <hr/>
            <ul>
              <li>บันทึกรายการ 100 รายการ/เดือน</li>
              <li>สรุปยอดรายวัน / รายเดือน</li>
              <li>หมวดหมู่อัตโนมัติ 5 หมวด</li>
              <li className="muted">ส่งออก Excel / PDF</li>
              <li className="muted">รายงานเปรียบเทียบ</li>
              <li className="muted">ใช้ในกลุ่มได้</li>
            </ul>
            <a href={LINE_URL} target="_blank" rel="noopener" className="btn btn-secondary price-cta">เริ่มใช้ฟรี</a>
          </div>

          <div className="price-card popular">
            <div className="popular-badge">⭐ ยอดนิยม</div>
            <div className="price-tier">โปร</div>
            <div className="price-name">เฮียมือโปร</div>
            <div className="price-tag">สำหรับร้านค้าที่อยากเติบโต</div>
            <div className="price-amount">
              <span className="currency">฿</span>199
              <span className="period">/เดือน</span>
            </div>
            <hr/>
            <ul>
              <li>บันทึกรายการ <b>ไม่จำกัด</b></li>
              <li>สรุปยอดทุกระดับ + กราฟ</li>
              <li>หมวดหมู่ไม่จำกัด + กำหนดเอง</li>
              <li>ส่งออก Excel / PDF ไม่จำกัด</li>
              <li>รายงานเปรียบเทียบ ย้อนหลัง 12 เดือน</li>
              <li>อ่านสลิปอัตโนมัติด้วย AI</li>
            </ul>
            <a href={LINE_URL} target="_blank" rel="noopener" className="btn btn-primary price-cta">ทดลองฟรี 30 วัน</a>
          </div>

          <div className="price-card">
            <div className="price-tier">ธุรกิจ</div>
            <div className="price-name">เฮียทีม</div>
            <div className="price-tag">สำหรับร้านค้าหลายสาขา / มีพนักงาน</div>
            <div className="price-amount">
              <span className="currency">฿</span>499
              <span className="period">/เดือน</span>
            </div>
            <hr/>
            <ul>
              <li>ทุกอย่างในแพ็ก โปร +</li>
              <li>ผู้ใช้ในกลุ่ม <b>ไม่จำกัด</b></li>
              <li>แยกข้อมูลตามสาขา</li>
              <li>กำหนดสิทธิ์การใช้งาน</li>
              <li>API เชื่อมต่อระบบอื่น</li>
              <li>ทีมซัพพอร์ตเฉพาะ</li>
            </ul>
            <a href={LINE_URL} target="_blank" rel="noopener" className="btn btn-dark price-cta">ติดต่อทีมขาย</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- TESTIMONIALS ----------
const TESTIS = [
  { name: "พี่แดง", role: "เจ้าของร้านส้มตำ • กรุงเทพ", q: "เมื่อก่อนต้องจดในสมุดทีหลังลืมหมด พอใช้เฮียจดในไลน์เลย ปิดร้านเสร็จเห็นยอดเลย ดีมาก แม่ค้าวัย 50 ยังใช้ได้สบาย", a: "ด" },
  { name: "คุณนาย", role: "ขายเครื่องสำอางออนไลน์ • ชลบุรี", q: "ส่งสลิปลูกค้าเข้าไปเฮียอ่านยอดให้เลย ไม่ต้องพิมพ์เอง สรุปเดือนละครั้งส่งเข้าบัญชีก็ง่ายมาก ประหยัดเวลาวันละชั่วโมง", a: "ค" },
  { name: "เฮียโจ้", role: "เจ้าของคาเฟ่ 3 สาขา • เชียงใหม่", q: "ใช้แพ็กธุรกิจ พนักงานทุกคนช่วยกันจดได้ ผมดูภาพรวมทั้ง 3 สาขาในที่เดียว ไม่ต้องโทรถามทุกวันแล้ว", a: "จ" },
];

function Testimonials() {
  return (
    <section className="section alt" id="review">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">รีวิวจากผู้ใช้จริง</div>
          <h2>ฟัง<em>คนที่ใช้จริง</em>เล่า</h2>
        </div>
        <div className="testi">
          {TESTIS.map((t, i) => (
            <div key={i} className="testi-card">
              <div className="stars">★★★★★</div>
              <div className="q">"{t.q}"</div>
              <div className="person">
                <div className="avatar">{t.a}</div>
                <div className="who">
                  <div className="n">{t.name}</div>
                  <div className="r">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- SEO ARTICLE ----------
const SEO_GROUPS = [
  {
    icon: "chat",
    eyebrow: "สำหรับร้านค้าออนไลน์",
    title: "จดบัญชีร้านค้าออนไลน์ ไม่ต้องโหลดแอป",
    body: "ไม่ว่าจะไลฟ์สด รับออเดอร์ผ่าน LINE หรือขายบน Shopee/Lazada — เฮียบัญชีบอตช่วยให้คุณบันทึกยอดขายได้ทันทีในแชทเดิม ไม่ต้องสลับแอป ไม่ต้องจดบนกระดาษ บัญชีพ่อค้าแม่ค้าออนไลน์ที่ง่ายที่สุดที่เคยมีมา",
    tags: ["บัญชีร้านค้าไลฟ์สด", "จดออเดอร์ LINE บอท", "บัญชีพ่อค้าแม่ค้าออนไลน์"],
  },
  {
    icon: "tag",
    eyebrow: "สำหรับฟรีแลนซ์",
    title: "จดรายได้ฟรีแลนซ์ง่ายๆ ใน LINE",
    body: "รายได้ไม่สม่ำเสมอ หลายแหล่ง หลายโปรเจกต์ — เฮียช่วยให้คุณบันทึกทุกครั้งที่รับงาน ดูยอดรวมรายเดือน และรู้ว่าเดือนนี้กำไรหรือขาดทุน โดยไม่ต้องพึ่งโปรแกรมบัญชีฟรีแลนซ์ที่ซับซ้อน",
    tags: ["จดรายได้ฟรีแลนซ์ LINE", "บันทึกรายรับฟรีแลนซ์ง่ายๆ", "โปรแกรมบัญชีฟรีแลนซ์ฟรี"],
  },
  {
    icon: "chart",
    eyebrow: "บอท LINE จดบัญชี",
    title: "LINE OA จดรายรับรายจ่าย สรุปอัตโนมัติ",
    body: "เฮียบัญชีบอตคือ LINE OA บอทที่สรุปรายรับรายจ่ายอัตโนมัติ ทุกวัน ทุกสัปดาห์ ทุกเดือน ไม่ต้องนั่งบวกลบเลขเอง ใช้ผ่าน LINE ที่มีอยู่แล้ว — จดบัญชีผ่าน LINE ไม่ต้องโหลดแอปเพิ่มอีกต่อไป",
    tags: ["บอท LINE สรุปรายรับรายจ่ายอัตโนมัติ", "LINE OA จดรายรับรายจ่าย", "ผู้ช่วยจดบัญชี LINE ฟรี"],
  },
];

function ArticleSEO() {
  return (
    <section className="section alt" id="article-seo" style={{paddingTop:56, paddingBottom:72}}>
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">เหมาะกับใครบ้าง?</div>
          <h2>บอทที่ออกแบบมา<em>เพื่อคนไทย</em>โดยเฉพาะ</h2>
          <p className="sub">ไม่ว่าคุณจะเป็นพ่อค้าแม่ค้า ฟรีแลนซ์ หรือเจ้าของธุรกิจขนาดเล็ก<br/>เฮียบัญชีบอตพร้อมดูแลบัญชีให้คุณใน LINE ที่ใช้อยู่ทุกวัน</p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:24, marginTop:40}}>
          {SEO_GROUPS.map((g, i) => (
            <article key={i} style={{
              background:'#fff',
              borderRadius:16,
              border:'1.5px solid var(--ink-100)',
              padding:'28px 24px 24px',
              display:'flex',
              flexDirection:'column',
              gap:12,
              boxShadow:'0 2px 12px rgba(0,0,0,0.05)',
              transition:'box-shadow .2s, transform .2s',
            }}
            onMouseEnter={e=>{e.currentTarget.style.boxShadow='0 8px 32px rgba(0,0,0,0.10)';e.currentTarget.style.transform='translateY(-2px)'}}
            onMouseLeave={e=>{e.currentTarget.style.boxShadow='0 2px 12px rgba(0,0,0,0.05)';e.currentTarget.style.transform='translateY(0)'}}
            >
              <div style={{
                width:44, height:44, borderRadius:12,
                background:'var(--green-100)',
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'var(--green-700)',
                flexShrink:0,
              }}>
                <Icon name={g.icon} size={22}/>
              </div>

              <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--green-600)'}}>
                {g.eyebrow}
              </div>

              <h3 style={{fontSize:17, fontWeight:700, lineHeight:1.35, color:'var(--ink-900)', margin:0}}>
                {g.title}
              </h3>

              <p style={{fontSize:14, lineHeight:1.7, color:'var(--ink-600)', margin:0, flexGrow:1}}>
                {g.body}
              </p>

              <div style={{display:'flex', flexWrap:'wrap', gap:6, marginTop:4}}>
                {g.tags.map((tag, j) => (
                  <span key={j} style={{
                    fontSize:11, fontWeight:500,
                    background:'var(--green-50)',
                    color:'var(--green-700)',
                    border:'1px solid var(--green-200)',
                    borderRadius:999,
                    padding:'3px 10px',
                    whiteSpace:'nowrap',
                  }}>#{tag}</span>
                ))}
              </div>
            </article>
          ))}
        </div>

        {/* Long-form paragraph block */}
        <div style={{
          marginTop:48,
          background:'linear-gradient(135deg, var(--green-50) 0%, #FFFBF0 100%)',
          borderRadius:20,
          border:'1.5px solid var(--green-100)',
          padding:'36px 40px',
          display:'grid',
          gridTemplateColumns:'1fr 1fr',
          gap:40,
        }}>
          <div>
            <h3 style={{fontSize:18, fontWeight:700, color:'var(--ink-900)', marginTop:0, marginBottom:12}}>
              เครื่องมือจดบัญชีร้านค้าใน LINE chat
            </h3>
            <p style={{fontSize:14, lineHeight:1.8, color:'var(--ink-600)', margin:0}}>
              เฮียบัญชีบอตทำงานตรงใน LINE chat ของคุณ พิมพ์รายการเหมือนส่งข้อความหาเพื่อน บอทบันทึก จัดหมวด และสรุปให้ทันที ไม่ต้องโหลดแอป ไม่ต้องสมัครเว็บใหม่ ไม่ต้องจำรหัสผ่านอีกอัน เพิ่มเฮียเป็นเพื่อนแล้วเริ่มได้เลย
            </p>
          </div>
          <div>
            <h3 style={{fontSize:18, fontWeight:700, color:'var(--ink-900)', marginTop:0, marginBottom:12}}>
              LINE OA บัญชีร้านค้า ฟรี — ไม่มีค่าซ่อน
            </h3>
            <p style={{fontSize:14, lineHeight:1.8, color:'var(--ink-600)', margin:0}}>
              แพ็กฟรีใช้ได้ไม่จำกัดเวลา บันทึกได้ 100 รายการต่อเดือน สรุปยอดรายวันและรายเดือน เหมาะสำหรับร้านค้าขนาดเล็กและฟรีแลนซ์ที่ต้องการ <strong>โปรแกรมบัญชีร้านออนไลน์ฟรี</strong> ที่ใช้งานได้จริงโดยไม่ยุ่งยาก
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
const FAQS = [
  { q: "ต้องโหลดแอปเพิ่มไหม?", a: "ไม่ต้องครับ ใช้ผ่าน LINE ที่ทุกคนมีอยู่แล้ว แค่เพิ่มเฮียเป็นเพื่อนก็ใช้ได้เลย ไม่กินพื้นที่เครื่อง" },
  { q: "ข้อมูลบัญชีของผมปลอดภัยไหม?", a: "ปลอดภัยมาตรฐานธนาคารครับ เข้ารหัสข้อมูลด้วย AES-256 เก็บข้อมูลในเซิร์ฟเวอร์ที่ตั้งอยู่ในประเทศไทย เป็นไปตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล (PDPA) และไม่ขายต่อหรือนำไปใช้ในวัตถุประสงค์อื่น" },
  { q: "ถ้ายกเลิกแพ็กเกจ ข้อมูลจะหายไหม?", a: "ไม่หายครับ ข้อมูลของคุณยังอยู่ในระบบ แค่กลับไปใช้ฟีเจอร์แบบฟรี ถ้าอยากดาวน์โหลดข้อมูลเก็บไว้ก่อนยกเลิก เฮียส่งไฟล์ Excel ให้ฟรี" },
  { q: "ใช้สำหรับธุรกิจหลายสาขาได้ไหม?", a: "ได้ครับ แพ็ก 'เฮียทีม' รองรับการแยกข้อมูลตามสาขา กำหนดสิทธิ์พนักงานแต่ละคน และดูภาพรวมทุกสาขาได้ในที่เดียว" },
  { q: "บอทอ่านสลิปจากธนาคารไหนได้บ้าง?", a: "รองรับสลิปจากทุกธนาคารหลักในไทย ได้แก่ KBank, SCB, BBL, KTB, BAY, TTB, GSB และ PromptPay รวมถึงสลิปจาก TrueMoney, Rabbit LINE Pay" },
  { q: "ถ้าใช้แล้วบอทเข้าใจผิด ต้องทำยังไง?", a: "พิมพ์ 'แก้ไข' หรือ 'ลบรายการล่าสุด' เฮียจะให้คุณแก้ไขได้ทันที หรือเข้าไปแก้ใน Web Dashboard ก็ได้ครับ" },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">คำถามที่พบบ่อย</div>
          <h2>มีอะไรอยากถาม<em>เฮีย</em>?</h2>
        </div>
        <div className="faq-wrap">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {f.q}
                <span className="plus">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FINAL CTA ----------
function FinalCTA() {
  return (
    <section className="section" id="cta">
      <div className="container">
        <div className="cta-final">
          <h2>พร้อมให้เฮียดูแลบัญชีให้คุณหรือยัง?</h2>
          <p>เพิ่มเฮียเป็นเพื่อนใน LINE ใช้ฟรี 30 วัน ไม่ต้องผูกบัตรเครดิต<br/>ยกเลิกได้ทุกเมื่อ</p>
          <div className="cta-row">
            <a href={LINE_URL} target="_blank" rel="noopener" className="btn btn-primary">
              <Icon name="line" size={20}/>
              เพิ่มเพื่อนใน LINE
            </a>
            <a href={LINE_URL} target="_blank" rel="noopener" className="btn" style={{background:'rgba(255,255,255,0.1)', color:'#fff', border:'1.5px solid rgba(255,255,255,0.2)'}}>
              ดูเดโม่กับทีมขาย
            </a>
          </div>
          <div className="qr-box">
            <div className="qr">
              <img src="assets/line-qr.png" alt="LINE QR Code เฮียบัญชีบอต" />
            </div>
            <div className="qt">
              <b>สแกน QR เพื่อเพิ่มเพื่อน</b>
              หรือค้นหา LINE ID:<br/>
              <span className="id">{LINE_ID}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="brand-block">
            <div className="brand">
              <img src="assets/logo.png" alt="" />
              เฮียบัญชีบอต
            </div>
            <p>ผู้ช่วยจดบัญชีในแชท LINE สำหรับร้านค้าและฟรีแลนซ์ไทย ใช้งานง่าย เข้าใจภาษาคน</p>
          </div>
          <div>
            <h4>ผลิตภัณฑ์</h4>
            <ul>
              <li><a href="#features">ฟีเจอร์</a></li>
              <li><a href="#pricing">ราคา</a></li>
              <li><a href="#how">วิธีใช้งาน</a></li>
              <li><a href="#">อัพเดทใหม่</a></li>
            </ul>
          </div>
          <div>
            <h4>บริษัท</h4>
            <ul>
              <li><a href="#">เกี่ยวกับเรา</a></li>
              <li><a href="#">บล็อก</a></li>
              <li><a href="#">ติดต่อ</a></li>
              <li><a href="#">ร่วมงานกับเรา</a></li>
            </ul>
          </div>
          <div>
            <h4>ช่วยเหลือ</h4>
            <ul>
              <li><a href="#faq">คำถามที่พบบ่อย</a></li>
              <li><a href="#">คู่มือการใช้งาน</a></li>
              <li><a href="#">นโยบายความเป็นส่วนตัว</a></li>
              <li><a href="#">เงื่อนไขการให้บริการ</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 hiabuncheebot.com — สงวนลิขสิทธิ์</div>
          <div className="social">
            <a href={LINE_URL} target="_blank" rel="noopener" aria-label="LINE"><Icon name="line" size={16}/></a>
            <a href="#" aria-label="Facebook"><Icon name="fb" size={16}/></a>
            <a href="#" aria-label="Instagram"><Icon name="ig" size={16}/></a>
            <a href="#" aria-label="TikTok"><Icon name="tt" size={16}/></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- ACCENT MAPPING ----------
// Generates harmonious accent shades (400 lighter, 100 very light) from a hex.
function deriveAccent(hex) {
  const h = hex.replace('#','');
  const x = h.length === 3 ? h.replace(/./g,c=>c+c) : h;
  const r = parseInt(x.slice(0,2),16), g = parseInt(x.slice(2,4),16), b = parseInt(x.slice(4,6),16);
  const lighten = (c, p) => Math.round(c + (255 - c) * p);
  const to = (r,g,b)=>'#'+[r,g,b].map(n=>n.toString(16).padStart(2,'0')).join('');
  return {
    y500: hex,
    y400: to(lighten(r,0.25), lighten(g,0.25), lighten(b,0.25)),
    y100: to(lighten(r,0.75), lighten(g,0.75), lighten(b,0.75)),
  };
}

// ---------- TWEAKS ----------
function Tweaks({ tweaks: t, setTweak }) {
  return (
    <TweaksPanel title="ปรับแต่งดีไซน์">
      <TweakSection label="โทนสี">
        <TweakColor
          label="สีรอง (Accent)"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={["#FFC72C", "#FF9F1C", "#D4AF37", "#FF6B9D", "#06C755"]}
        />
        <TweakRadio
          label="พื้นหลัง Hero"
          value={t.heroBg}
          onChange={(v) => setTweak('heroBg', v)}
          options={[
            { value: 'soft', label: 'อ่อน' },
            { value: 'mint', label: 'มินต์' },
            { value: 'white', label: 'ขาว' },
          ]}
        />
      </TweakSection>
      <TweakSection label="หัวเว็บ">
        <TweakToggle
          label="แสดงแถบประกาศ"
          value={t.showAnnouncementBar}
          onChange={(v) => setTweak('showAnnouncementBar', v)}
        />
        <TweakText
          label="ข้อความปุ่ม CTA"
          value={t.ctaLabel}
          onChange={(v) => setTweak('ctaLabel', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- APP ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAKS);

  useEffect(() => {
    const c = deriveAccent(t.accent || "#FFC72C");
    document.documentElement.style.setProperty('--yellow-500', c.y500);
    document.documentElement.style.setProperty('--yellow-400', c.y400);
    document.documentElement.style.setProperty('--yellow-100', c.y100);
  }, [t.accent]);

  useEffect(() => {
    const bgs = {
      soft:  'linear-gradient(180deg, var(--green-50) 0%, #FFFFFF 100%)',
      mint:  'linear-gradient(180deg, #DCF1D8 0%, #FFFFFF 100%)',
      white: '#FFFFFF',
    };
    document.documentElement.style.setProperty('--hero-bg', bgs[t.heroBg] || bgs.soft);
  }, [t.heroBg]);

  return (
    <>
      {t.showAnnouncementBar && <TopBar/>}
      <Nav ctaLabel={t.ctaLabel}/>
      <Hero/>
      <LogoStrip/>
      <Features/>
      <HowItWorks/>
      <Demo/>
      <Stats/>
      <Pricing/>
      <Testimonials/>
      <ArticleSEO/>
      <FAQ/>
      <FinalCTA/>
      <Footer/>
      <Tweaks tweaks={t} setTweak={setTweak}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);