// Full article body content for each article ID
// Each function returns the article body JSX

const S = {
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: '40px 0 14px', color: 'var(--fg1)', letterSpacing: '-.01em' },
  p: { margin: '0 0 24px', fontSize: 18, lineHeight: 1.85, color: 'var(--fg1)' },
  lead: { margin: '0 0 32px', fontSize: 18, lineHeight: 1.85, color: 'var(--fg2)', paddingBottom: 32, borderBottom: '1px solid var(--border)' },
  signCard: { background: 'var(--gray-50)', border: '1px solid var(--border)', borderRadius: 12, padding: '18px 20px', marginBottom: 12 },
  signNum: { fontSize: 10, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--blue-600)', marginBottom: 6 },
  signTitle: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--fg1)', marginBottom: 6 },
  signBody: { fontSize: 15, color: 'var(--fg2)', lineHeight: 1.7, margin: 0 },
  bq: { margin: '32px 0', padding: '20px 24px', borderLeft: '4px solid var(--blue-600)',
    background: 'var(--blue-50)', borderRadius: '0 12px 12px 0',
    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, lineHeight: 1.5, color: 'var(--dark-800)' },
  stepCard: { background: 'var(--gray-50)', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden', marginBottom: 10, display: 'grid', gridTemplateColumns: '56px 1fr' },
  stepNum: { background: '#FEF9C3', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: '#D97706' },
  stepBody: { padding: '18px 20px' },
  stepTitle: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--fg1)', marginBottom: 6 },
  stepText: { fontSize: 15, color: 'var(--fg2)', lineHeight: 1.7, margin: 0 },
  tip: { display: 'inline-block', marginTop: 8, fontSize: 13, color: '#D97706', background: '#FEF9C3', padding: '3px 10px', borderRadius: 6 },
  phaseGrid: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, margin: '20px 0 28px' },
  phaseCard: { background: 'var(--gray-50)', border: '1px solid var(--border)', borderRadius: 10, padding: 18 },
  phaseLabel: { fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--fg3)', marginBottom: 6 },
  chemGrid: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, margin: '20px 0 28px' },
  cycleGrid: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10, margin: '20px 0 28px' },
  listItem: { display: 'flex', alignItems: 'flex-start', gap: 10, padding: '13px 18px', background: 'var(--gray-50)', border: '1px solid var(--border)', borderRadius: 10, marginBottom: 8, fontSize: 15, color: 'var(--fg2)' },
  check: { color: 'var(--blue-600)', fontWeight: 700, minWidth: 16 },
};

// Cover SVGs
function CoverToxicSigns() {
  return (
    <svg viewBox="0 0 1200 480" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="1200" height="480" fill="#EEF3FD"/>
      <circle cx="960" cy="200" r="320" fill="rgba(2,76,218,0.04)"/>
      <g opacity="0.14" fill="#024CDA">
        <polygon points="80,80 116,148 44,148"/><polygon points="196,56 232,124 160,124"/>
        <polygon points="312,80 348,148 276,148"/><polygon points="428,64 464,132 392,132"/>
        <polygon points="80,220 116,288 44,288"/><polygon points="196,240 232,308 160,308"/>
        <polygon points="312,220 348,288 276,288"/><polygon points="80,370 116,438 44,438"/>
      </g>
      <text x="850" y="380" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="340" fill="rgba(2,76,218,0.06)" textAnchor="middle">10</text>
      <text x="850" y="240" fontFamily="Kanit,sans-serif" fontWeight="700" fontSize="44" fill="#024CDA" textAnchor="middle">สัญญาณเตือน</text>
      <text x="850" y="292" fontFamily="Kanit,sans-serif" fontWeight="400" fontSize="20" fill="rgba(2,76,218,0.45)" textAnchor="middle" letterSpacing="5">TOXIC RELATIONSHIP</text>
    </svg>
  );
}

function CoverWhyToxic() {
  return (
    <svg viewBox="0 0 1200 480" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="1200" height="480" fill="#F0F4FF"/>
      <circle cx="900" cy="200" r="320" fill="rgba(2,76,218,0.05)"/>
      <g stroke="#024CDA" strokeWidth="2" fill="none" opacity="0.22">
        <line x1="120" y1="140" x2="360" y2="140"/><line x1="360" y1="140" x2="360" y2="260"/>
        <line x1="360" y1="260" x2="600" y2="260"/><line x1="600" y1="260" x2="600" y2="140"/>
        <line x1="600" y1="140" x2="840" y2="140"/>
        <line x1="240" y1="140" x2="240" y2="72"/><line x1="480" y1="140" x2="480" y2="72"/><line x1="720" y1="140" x2="720" y2="72"/>
        <circle cx="240" cy="140" r="6" fill="#024CDA"/><circle cx="480" cy="140" r="6" fill="#024CDA"/><circle cx="720" cy="140" r="6" fill="#024CDA"/>
        <line x1="120" y1="360" x2="360" y2="360"/><line x1="360" y1="360" x2="360" y2="480"/>
        <circle cx="240" cy="360" r="6" fill="#4979E9"/><circle cx="480" cy="360" r="6" fill="#4979E9"/>
      </g>
      <text x="1000" y="280" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="40" fill="#024CDA" textAnchor="middle">ทำไมคนฉลาดถึงติด?</text>
      <text x="1000" y="330" fontFamily="Kanit,sans-serif" fontWeight="400" fontSize="18" fill="rgba(2,76,218,0.4)" textAnchor="middle" letterSpacing="4">THE SCIENCE OF TOXIC LOVE</text>
    </svg>
  );
}

function CoverLoveBombing() {
  return (
    <svg viewBox="0 0 1200 480" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="1200" height="480" fill="#FFF0F3"/>
      <circle cx="750" cy="240" r="280" fill="rgba(208,55,85,0.05)"/>
      <path d="M750 380 C750 380 540 260 540 155 C540 100 585 65 635 88 C665 100 750 155 750 155 C750 155 835 100 865 88 C915 65 960 100 960 155 C960 260 750 380 750 380Z" fill="rgba(208,55,85,0.1)" stroke="#D03755" strokeWidth="2"/>
      <g stroke="#F5C518" strokeWidth="3" opacity="0.6">
        <line x1="750" y1="54" x2="750" y2="24"/><line x1="820" y1="76" x2="848" y2="50"/>
        <line x1="680" y1="76" x2="652" y2="50"/><line x1="955" y1="165" x2="988" y2="148"/>
        <line x1="545" y1="165" x2="512" y2="148"/>
      </g>
      <text x="270" y="260" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="72" fill="#D03755" textAnchor="middle">LOVE</text>
      <text x="270" y="344" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="72" fill="#F5C518" textAnchor="middle">BOMBING</text>
      <text x="270" y="394" fontFamily="Kanit,sans-serif" fontWeight="400" fontSize="18" fill="rgba(208,55,85,0.5)" textAnchor="middle">7 สัญญาณที่ต้องระวัง</text>
    </svg>
  );
}

function CoverLeaveToxic() {
  return (
    <svg viewBox="0 0 1200 480" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="1200" height="480" fill="#FFFBEB"/>
      <g opacity="0.25">
        <rect x="80" y="390" width="100" height="60" rx="4" fill="#F5C518"/>
        <rect x="210" y="340" width="100" height="110" rx="4" fill="#F5C518"/>
        <rect x="340" y="276" width="100" height="174" rx="4" fill="#F5C518"/>
        <rect x="470" y="200" width="100" height="250" rx="4" fill="#F5C518"/>
        <rect x="600" y="114" width="100" height="336" rx="4" fill="#F5C518"/>
      </g>
      <defs><radialGradient id="dg" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="#F5C518" stopOpacity="0.5"/><stop offset="100%" stopColor="#F5C518" stopOpacity="0"/></radialGradient></defs>
      <ellipse cx="960" cy="240" rx="140" ry="200" fill="url(#dg)"/>
      <rect x="892" y="110" width="136" height="260" rx="8" fill="white" stroke="#E5E7EB" strokeWidth="2"/>
      <circle cx="1004" cy="240" r="8" fill="rgba(245,197,24,0.7)"/>
      <g stroke="#D97706" strokeWidth="4" fill="none">
        <line x1="1076" y1="240" x2="1160" y2="240"/>
        <polyline points="1140,220 1160,240 1140,260"/>
      </g>
      <text x="340" y="96" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="64" fill="#D97706" textAnchor="middle">5 ขั้นตอน</text>
      <text x="340" y="160" fontFamily="Kanit,sans-serif" fontWeight="400" fontSize="24" fill="rgba(217,119,6,0.6)" textAnchor="middle">ออกจาก Toxic อย่างถาวร</text>
    </svg>
  );
}

function CoverTraumaBond() {
  return (
    <svg viewBox="0 0 1200 480" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="1200" height="480" fill="#FFF5F5"/>
      <g fill="none" stroke="rgba(192,48,80,0.45)" strokeWidth="3.5">
        <ellipse cx="440" cy="240" rx="70" ry="44" transform="rotate(-30 440 240)"/>
        <ellipse cx="584" cy="240" rx="70" ry="44" transform="rotate(-30 584 240)"/>
        <ellipse cx="728" cy="240" rx="70" ry="44" transform="rotate(-30 728 240)"/>
        <ellipse cx="872" cy="240" rx="70" ry="44" transform="rotate(-30 872 240)"/>
        <ellipse cx="1016" cy="240" rx="70" ry="44" transform="rotate(-30 1016 240)"/>
      </g>
      <g fill="none" stroke="rgba(192,48,80,0.1)" strokeWidth="16">
        <ellipse cx="440" cy="240" rx="70" ry="44" transform="rotate(-30 440 240)"/>
        <ellipse cx="728" cy="240" rx="70" ry="44" transform="rotate(-30 728 240)"/>
        <ellipse cx="1016" cy="240" rx="70" ry="44" transform="rotate(-30 1016 240)"/>
      </g>
      <text x="220" y="196" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="64" fill="#C03050" textAnchor="middle">TRAUMA</text>
      <text x="220" y="272" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="64" fill="#C03050" textAnchor="middle">BOND</text>
      <text x="220" y="318" fontFamily="Kanit,sans-serif" fontWeight="400" fontSize="18" fill="rgba(192,48,80,0.45)" textAnchor="middle">ทำไมยิ่งเจ็บ ยิ่งรัก</text>
    </svg>
  );
}

// ---- ARTICLE BODIES ----

function ArticleBody4({ go }) {
  const signs = [
    ['01', 'ถูกควบคุมทุกอย่างในชีวิต', 'ตั้งแต่การแต่งตัว การเลือกเพื่อน ไปจนถึงการตัดสินใจส่วนตัว พาร์ทเนอร์ที่ healthy จะเคารพ autonomy ของคุณ ไม่ใช่ต้องการ control ทุกอย่าง'],
    ['02', 'รู้สึกผิดตลอดเวลา แม้ไม่ได้ทำผิด', 'การ "guilt-tripping" คือเครื่องมือที่ผู้ manipulate ใช้บ่อยที่สุด ถ้าคุณรู้สึกว่าต้องคอยขอโทษตลอดเวลา — นั่นคือสัญญาณ'],
    ['03', 'การสื่อสารเต็มไปด้วยการตำหนิและดูถูก', 'ความสัมพันธ์ที่ดีคุยกันด้วยเหตุผล แต่ใน Toxic Relationship การโต้เถียงมักจบด้วยการโจมตีตัวตน เช่น "คุณนี่โง่จริงๆ"'],
    ['04', 'ค่อยๆ ห่างเหินจากคนรอบข้าง', 'การ isolate คุณออกจากเพื่อนและครอบครัว ไม่ว่าจะเป็นการห้ามพบเพื่อน หรือทำให้คุณรู้สึกผิดทุกครั้งที่ไปพบคนอื่น'],
    ['05', 'อารมณ์ของเขา/เธอคาดเดาไม่ได้', 'วันนี้ดีมาก พรุ่งนี้ร้ายมาก — การต้อง "walking on eggshells" ระวังตัวตลอดเวลาเพราะไม่รู้ว่าแฟนจะ react ยังไง'],
    ['06', 'กลัวปฏิกิริยาเมื่อต้องบอกความจริง', 'ในความสัมพันธ์ที่ดี คุณควรพูดความจริงได้โดยไม่กลัว ถ้าคุณต้องคิดหนักก่อนบอกสิ่งง่ายๆ เพราะกลัวถูกโกรธ — นั่นไม่ดี'],
    ['07', 'ไม่มีความเป็นส่วนตัว (Privacy)', 'มือถือถูกเช็ก บัญชี social media ต้องแชร์ location ต้องแจ้งตลอดเวลา — การไม่มี privacy ไม่ใช่ความรัก มันคือการ surveillance'],
    ['08', 'ถูก Gaslight', 'Gaslighting คือการทำให้คุณสงสัยในความจำของตัวเอง เช่น "เธอไม่ได้จำถูกต้อง", "เธอ sensitive เกินไป" จนคุณเริ่มไม่เชื่อใจตัวเอง'],
    ['09', 'ความต้องการของคุณถูกมองข้าม', 'ในความสัมพันธ์ที่ balanced ทั้งสองฝ่ายดูแลความต้องการของกันและกัน แต่ความรู้สึกของคุณมักถูกบอกว่า "demanding เกินไป"'],
    ['10', 'รู้สึกเหนื่อยและหมดพลังทุกครั้งหลังพบกัน', 'ความรักที่ดีควรเติมพลังงานให้คุณ ไม่ใช่ดูดออกไป ถ้าคุณต้องการเวลาฟื้นฟูตัวเองทุกครั้งหลังอยู่กับแฟน — ลองถามตัวเองดู'],
  ];
  return (
    <div>
      <p style={S.p}>Toxic Relationship ไม่ได้หมายความว่าต้องมีการใช้ความรุนแรงทางร่างกายเสมอไป หลายครั้งมันแสดงออกในรูปแบบที่ subtle กว่านั้นมาก จนบางทีเราแยกไม่ออกว่ากำลังอยู่ในนั้น</p>
      <h2 style={S.h2}>10 สัญญาณที่ต้องสังเกต</h2>
      {signs.map(([n, t, b]) => (
        <div key={n} style={S.signCard}>
          <div style={S.signNum}>สัญญาณที่ {n}</div>
          <div style={S.signTitle}>{t}</div>
          <p style={S.signBody}>{b}</p>
        </div>
      ))}
      <h2 style={S.h2}>จะทำอย่างไรต่อไป?</h2>
      <p style={S.p}>ถ้าคุณเห็นตัวเองในสัญญาณ 3 ข้อขึ้นไป ขั้นแรกที่สำคัญที่สุดคือ <b>อย่าโทษตัวเอง</b> การอยู่ใน Toxic Relationship ไม่ใช่เพราะคุณอ่อนแอ มันเพราะความสัมพันธ์แบบนี้ถูกออกแบบมาให้ค่อยๆ ทำลายความมั่นใจของคุณ</p>
      <blockquote style={S.bq}>"คุณสมควรได้รับความรักที่ทำให้รู้สึกปลอดภัย ไม่ใช่ความรักที่ต้องหวาดกลัวตลอดเวลา"</blockquote>
    </div>
  );
}

function ArticleBody5({ go }) {
  const reasons = [
    ['01', 'Intermittent Reinforcement — สมองติดรางวัลที่ไม่แน่นอน', 'เหมือนเครื่องสล็อตแมชชีน คุณไม่รู้ว่าครั้งไหนจะได้รางวัล สมองจะ release dopamine มากกว่าการได้รับความรักอย่างสม่ำเสมอ นี่คือทำไมช่วง "ดี" ใน Toxic Relationship ถึงรู้สึก intense มากผิดปกติ'],
    ['02', 'Trauma Bond — ผูกพันกันผ่านความเจ็บปวด', 'เมื่อคุณผ่านทั้งความเจ็บปวดและความสุขกับคนเดียวกัน สมองสร้างความผูกพันพิเศษขึ้นมา ยิ่งวงจร hurt-forgive-reconcile หมุนซ้ำมากเท่าไหร่ Trauma Bond ก็ยิ่งแน่นขึ้น'],
    ['03', 'Sunk Cost Fallacy — ลงทุนไปเยอะแล้ว', '"เราอยู่ด้วยกันมา 3 ปีแล้ว ลงทุนไปเยอะมาก ถ้าเลิกตอนนี้มันก็เสียเปล่า" — นี่คือ Sunk Cost Fallacy ที่ทำให้คนฉลาดหลายคนยังอยู่ต่อ แม้รู้ว่าอนาคตไม่ดีขึ้น'],
    ['04', 'Cognitive Dissonance — รู้ว่าไม่ดี แต่ยัง justify ได้', 'เมื่อความเชื่อ ("ฉันรักเขา/เธอ") ขัดแย้งกับความจริง ("เขา/เธอทำร้ายฉัน") สมองจะพยายาม rationalize เพื่อลด discomfort เช่น "เขา/เธอไม่ได้ตั้งใจ"'],
    ['05', 'Fear of Loneliness — กลัวการอยู่คนเดียว', 'บางครั้งความกลัวที่จะอยู่คนเดียวมันน่ากลัวมากกว่าความเจ็บปวดที่กำลังเผชิญ โดยเฉพาะถ้าโตมาในสภาพแวดล้อมที่ไม่มั่นคงทางอารมณ์'],
  ];
  return (
    <div>
      <p style={S.p}>คุณเคยได้ยินใครพูดว่า "ก็เขา/เธอฉลาดขนาดนั้น ทำไมถึงยังอยู่กับคนแบบนั้น?" — นั่นเป็นคำถามที่ผิดโจทย์มาก เพราะความฉลาดไม่ได้ป้องกันคุณจาก Toxic Relationship เลย</p>
      <h2 style={S.h2}>5 เหตุผลที่วิทยาศาสตร์อธิบาย</h2>
      {reasons.map(([n, t, b]) => (
        <div key={n} style={{ ...S.signCard, display: 'grid', gridTemplateColumns: '48px 1fr', gap: 16, alignItems: 'start' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, color: 'rgba(2,76,218,0.25)', lineHeight: 1 }}>{n}</span>
          <div>
            <div style={S.signTitle}>{t}</div>
            <p style={S.signBody}>{b}</p>
          </div>
        </div>
      ))}
      <h2 style={S.h2}>แล้วจะทำอย่างไร?</h2>
      <p style={S.p}>การรู้ว่า <b>"ที่ฉันอยู่ไม่ใช่เพราะโง่ แต่เพราะสมองถูก wire ให้ติดแบบนี้"</b> คือจุดเริ่มต้นของการเปลี่ยนแปลง</p>
      <blockquote style={S.bq}>"ความฉลาดไม่ได้ป้องกันคุณจาก Toxic Love — แต่ความฉลาดสามารถช่วยให้คุณออกจากมันได้เมื่อคุณเข้าใจกลไกที่เกิดขึ้น"</blockquote>
    </div>
  );
}

function ArticleBody6({ go }) {
  const signs = [
    ['1', 'บอกรักเร็วมากผิดปกติ', 'ภายใน 1–2 สัปดาห์ก็บอกว่ารักแล้ว รู้สึกว่าคุณคือ "คนที่ใช่" ทั้งที่แทบไม่รู้จักกัน'],
    ['2', 'Contact ตลอด 24 ชั่วโมง รอ reply ทันที', 'ส่ง text ไม่หยุด โทรหาตลอด และรู้สึกไม่ดีถ้าคุณไม่ตอบเร็ว — นี่คือการสร้าง dependency ไม่ใช่ความห่วงใย'],
    ['3', 'ให้ label เร็วผิดปกติ', 'เรียกคุณว่า "แฟน" หรือ "คนรัก" ตั้งแต่เดือนแรก ทั้งที่คุณยังไม่ได้ตกลงอะไรกัน'],
    ['4', 'ของขวัญและ gesture ใหญ่โตเกินไป', 'ของขวัญแพง ทริปสุดหรู ดินเนอร์โรแมนติก ตั้งแต่ช่วงต้น — มันสร้าง sense of obligation ให้คุณรู้สึกต้องตอบแทน'],
    ['5', 'Future Faking — วางแผนอนาคตตั้งแต่ต้น', '"เราจะย้ายบ้านด้วยกัน", "อยากมีลูกกับเธอ" — ใน week ที่สองของความสัมพันธ์คือ red flag'],
    ['6', 'Isolation — แยกคุณออกจากคนอื่น', '"คนอื่นไม่เข้าใจเราหรอก มีแค่ฉันที่เข้าใจเธอ" — การตัดคุณออกจาก support system'],
    ['7', 'Mirroring — เหมือนเป็น perfect match ในทุกด้าน', 'ชอบทุกอย่างเหมือนคุณ เห็นด้วยกับทุกสิ่ง — ผู้ Love Bomb เก่งมากในการ mirror ตัวตนของคุณ'],
  ];
  return (
    <div>
      <p style={S.p}>ลองนึกภาพว่ามีคนมาในชีวิตคุณและทำให้รู้สึกว่าตัวเองเป็นคนที่พิเศษที่สุดในโลก ฟังดู romantic มาก ใช่ไหม? แต่นั่นอาจเป็นสัญญาณอันตรายที่เรียกว่า Love Bombing</p>
      <h2 style={S.h2}>Love Bombing คืออะไร?</h2>
      <p style={S.p}>Love Bombing คือการที่ใครบางคน <b>โจมตีคุณด้วยความรัก ความสนใจ คำชม และของขวัญอย่างล้นเกิน</b> ในช่วงแรกของความสัมพันธ์ เพื่อสร้าง attachment ที่รวดเร็วและทำให้คุณ depend on them</p>
      <h2 style={S.h2}>7 สัญญาณ Love Bombing ที่ต้องรู้</h2>
      {signs.map(([n, t, b]) => (
        <div key={n} style={{ ...S.listItem, gap: 14 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'rgba(208,55,85,0.3)', minWidth: 24 }}>{n}</span>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--fg1)', marginBottom: 4 }}>{t}</div><div style={{ fontSize: 14, color: 'var(--fg2)' }}>{b}</div></div>
        </div>
      ))}
      <h2 style={S.h2}>สิ่งที่เกิดขึ้นหลัง Love Bombing</h2>
      <div style={S.phaseGrid}>
        {[['Love Bombing','ทุกอย่างสมบูรณ์แบบ คุณคือคนพิเศษที่สุด','#D97706'],['Devaluation','ค่อยๆ ลดคุณค่าคุณ วิจารณ์ ควบคุม ตำหนิ','#D03755'],['Discard / Hoover','ทิ้งหรือวนกลับมาด้วย Love Bombing รอบใหม่','var(--fg3)']].map(([name,desc,color]) => (
          <div key={name} style={S.phaseCard}>
            <div style={{ ...S.phaseLabel }}>Phase</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color, marginBottom: 6 }}>{name}</div>
            <div style={{ fontSize: 13, color: 'var(--fg3)', lineHeight: 1.55 }}>{desc}</div>
          </div>
        ))}
      </div>
      <blockquote style={S.bq}>"ความรักที่แท้จริงสร้างได้ด้วยเวลา ไม่ใช่ความเร่งรีบ ถ้าใครรักคุณจริงๆ เขา/เธอจะรอให้คุณพร้อม"</blockquote>
    </div>
  );
}

function ArticleBody7({ go }) {
  const steps = [
    ['01', 'Acknowledge — ยอมรับความจริงกับตัวเอง', 'ขั้นตอนแรกและยากที่สุด คือยอมรับว่าความสัมพันธ์นี้ไม่ healthy และไม่ใช่แค่ "phase ชั่วคราว" หยุด rationalize หยุด make excuse หยุดบอกตัวเองว่า "เขา/เธอจะเปลี่ยน"', 'เขียนบันทึกสิ่งที่ทำให้คุณรู้สึกไม่ดีเป็น pattern'],
    ['02', 'Plan — วางแผนก่อนออก', 'อย่าตัดสินใจแบบ impulsive เพราะมักนำไปสู่การ "วนกลับ" วางแผนให้ชัดเจน ทั้งเรื่องที่อยู่ การเงิน และ support network ที่คุณจะพึ่งพา', 'มี plan B และ plan C เสมอ'],
    ['03', 'Tell Someone — อย่าทำคนเดียว', 'บอกเพื่อนสนิท ครอบครัว หรือนักจิตวิทยาที่คุณไว้วางใจ การพยายามออกคนเดียวทำให้ง่ายต่อการถูก manipulate ให้กลับไปมากกว่ามาก', 'เลือกคนที่จะบอกความจริงกับคุณ ไม่ใช่แค่บอกว่าคุณถูก'],
    ['04', 'Cut / Reduce Contact — ตัดหรือลด contact อย่างเด็ดขาด', 'No Contact (NC) คือการตัดทุกช่องทางการสื่อสาร block ทั้ง phone, social media, email การตัด contact ไม่ใช่ความโหดร้าย มันคือการปกป้องตัวเอง', 'ทุก "last message" จะทำให้กระบวนการยาวขึ้นอีก 2 สัปดาห์'],
    ['05', 'Heal — ดูแลตัวเองในระยะยาว', 'การออกมาได้คือจุดเริ่มต้น ไม่ใช่จุดจบ คุณอาจต้องการ therapy journaling การใช้เวลากับคนที่ดีต่อคุณ และความอดทนกับกระบวนการฟื้นฟู', 'การ heal ไม่ใช่เส้นตรง — มีวันดีและวันแย่ และนั่นคือเรื่องปกติ'],
  ];
  return (
    <div>
      <p style={S.p}>การรู้ว่าตัวเองอยู่ใน Toxic Relationship กับการออกมาได้จริง มันต่างกันมาก หลายคนรู้ว่าไม่ดีแต่ยังออกไม่ได้ — นี่ไม่ใช่เพราะคุณอ่อนแอ แต่เพราะความสัมพันธ์แบบนี้ถูกออกแบบมาให้ออกยาก</p>
      <div style={{ background: '#FFF5F5', border: '1px solid #FECACA', borderRadius: 12, padding: '14px 20px', marginBottom: 28 }}>
        <p style={{ margin: 0, fontSize: 15, color: '#7F1D1D' }}><b>⚠ หมายเหตุ:</b> ถ้ามีความรุนแรงทางร่างกาย โปรดติดต่อสายด่วนช่วยเหลือหรือบุคคลที่ไว้ใจก่อน ความปลอดภัยสำคัญที่สุด</p>
      </div>
      <h2 style={S.h2}>5 ขั้นตอนที่ได้ผลจริง</h2>
      {steps.map(([n, t, b, tip]) => (
        <div key={n} style={S.stepCard}>
          <div style={S.stepNum}>{n}</div>
          <div style={S.stepBody}>
            <div style={S.stepTitle}>{t}</div>
            <p style={S.stepText}>{b}</p>
            <span style={S.tip}>💡 {tip}</span>
          </div>
        </div>
      ))}
      <blockquote style={S.bq}>"คุณไม่ได้มีหน้าที่รับผิดชอบต่อความรู้สึกของคนที่ทำร้ายคุณ การดูแลตัวเองไม่ใช่เรื่องเห็นแก่ตัว มันคือความรับผิดชอบ"</blockquote>
    </div>
  );
}

function ArticleBody8({ go }) {
  return (
    <div>
      <p style={S.p}>ถ้าคุณรู้แน่ๆ ว่าความสัมพันธ์นี้ไม่ดีต่อคุณ แต่ยังรู้สึกว่าตัดใจไม่ได้ ยังรักอยู่ และถูก draw กลับมาหาเขา/เธอตลอดเวลา — นั่นไม่ใช่เพราะคุณโง่หรืออ่อนแอ นั่นคืออาการของ Trauma Bond</p>
      <h2 style={S.h2}>Trauma Bond คืออะไร?</h2>
      <p style={S.p}>Trauma Bond คือ <b>ความผูกพันทางอารมณ์ที่เกิดขึ้นระหว่างผู้ถูกกระทำและผู้กระทำ</b> ผ่านวัฏจักรของการทำร้ายและการปรองดอง Trauma Bond ไม่ใช่ความรักในแบบปกติ</p>
      <h2 style={S.h2}>วัฏจักร 4 ขั้นตอนที่สร้าง Trauma Bond</h2>
      <div style={S.cycleGrid}>
        {[['Tension Building','ความตึงเครียดค่อยๆ สะสม','var(--fg3)'],['Incident','เหตุการณ์ทำร้าย ทางร่างกาย อารมณ์ หรือจิตใจ','#C03050'],['Reconciliation','ขอโทษ ความอ่อนโยน ของขวัญ ความรักล้นเกิน','#D97706'],['Calm','ช่วงสงบสุข ก่อนวนกลับ','var(--blue-600)']].map(([name,desc,color]) => (
          <div key={name} style={{ ...S.phaseCard }}>
            <div style={S.phaseLabel}>Phase</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color, marginBottom: 6 }}>{name}</div>
            <div style={{ fontSize: 13, color: 'var(--fg3)', lineHeight: 1.5 }}>{desc}</div>
          </div>
        ))}
      </div>
      <h2 style={S.h2}>ทำไม Trauma Bond ถึงแข็งแกร่งมาก?</h2>
      <div style={S.chemGrid}>
        {[['Dopamine','ช่วง reconciliation ทำให้ dopamine spike สูงมาก สมองอยากได้ "รางวัล" นั้นซ้ำๆ'],['Cortisol & Adrenaline','ช่วง tension ปล่อย stress hormones ที่ทำให้ hyper-focused ต่ออีกฝ่ายตลอดเวลา'],['Oxytocin','Bonding hormone ที่ถูก release ในช่วงดีๆ ทำให้รู้สึก attachment ที่ลึกมาก']].map(([name,desc]) => (
          <div key={name} style={S.phaseCard}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--fg1)', marginBottom: 6 }}>{name}</div>
            <div style={{ fontSize: 13, color: 'var(--fg3)', lineHeight: 1.6 }}>{desc}</div>
          </div>
        ))}
      </div>
      <h2 style={S.h2}>วิธีออกจาก Trauma Bond</h2>
      {[['No Contact อย่างเด็ดขาด','ทุกการ contact คือการ reset cycle ใหม่'],['Trauma-focused Therapy','โดยเฉพาะ EMDR ซึ่งได้ผลดีมากกับ trauma bonding'],['Support Group','การพบคนที่ผ่านประสบการณ์เดียวกันช่วยได้มาก'],['Educate yourself','ยิ่งเข้าใจกลไก ยิ่งลด power ที่ Trauma Bond มีเหนือคุณ'],['ให้เวลาตัวเอง','การ heal จาก Trauma Bond ใช้เวลานานกว่าความสัมพันธ์ปกติ']].map(([t,b]) => (
        <div key={t} style={S.listItem}>
          <span style={S.check}>✓</span>
          <div><b>{t}</b> — {b}</div>
        </div>
      ))}
      <blockquote style={S.bq}>"การที่คุณยังรักอยู่แม้เจ็บปวด ไม่ได้พิสูจน์ว่าความสัมพันธ์นั้นดี มันพิสูจน์แค่ว่าสมองของคุณถูก wire ให้ผูกพัน และมันเป็นสิ่งที่รักษาได้"</blockquote>
    </div>
  );
}

const ARTICLE_DATA = {
  4: { title: '10 สัญญาณเตือนที่บอกว่าคุณกำลังอยู่ใน "Toxic Relationship" โดยไม่รู้ตัว', cat: 'จิตวิทยา', date: '1 มิ.ย. 2568', read: '5 นาที', lead: 'ความรักที่ดีควรทำให้คุณรู้สึกปลอดภัย มีพลังงาน และมีคุณค่าในตัวเอง แต่ถ้าคุณรู้สึกเหนื่อย หดหู่ และสงสัยในตัวเองตลอดเวลา — นั่นอาจเป็นสัญญาณที่ต้องรู้', Cover: CoverToxicSigns, Body: ArticleBody4, related: [5, 7] },
  5: { title: 'ทำไมคนฉลาด ฉลาด และมีการศึกษา ถึงยังติดอยู่ใน Toxic Love?', cat: 'จิตวิทยา', date: '2 มิ.ย. 2568', read: '6 นาที', lead: 'คุณเคยได้ยินใครพูดว่า "ก็เขา/เธอฉลาดขนาดนั้น ทำไมถึงยังอยู่กับคนแบบนั้น?" — นั่นเป็นคำถามที่ผิดโจทย์มาก เพราะความฉลาดไม่ได้ป้องกันคุณจาก Toxic Relationship', Cover: CoverWhyToxic, Body: ArticleBody5, related: [8, 7] },
  6: { title: 'Love Bombing คืออะไร? 7 สัญญาณที่บอกว่าคุณกำลังถูก "อัดรัก"', cat: 'จิตวิทยา', date: '3 มิ.ย. 2568', read: '5 นาที', lead: 'ลองนึกภาพว่ามีคนมาในชีวิตคุณและทำให้รู้สึกว่าตัวเองเป็นคนที่พิเศษที่สุดในโลก — ฟังดู romantic มาก ใช่ไหม? แต่นั่นอาจเป็นสัญญาณอันตรายที่เรียกว่า Love Bombing', Cover: CoverLoveBombing, Body: ArticleBody6, related: [4, 8] },
  7: { title: '5 ขั้นตอนออกจาก Toxic Relationship อย่างถาวร โดยไม่วนกลับ', cat: 'จิตวิทยา', date: '4 มิ.ย. 2568', read: '7 นาที', lead: 'การรู้ว่าตัวเองอยู่ใน Toxic Relationship กับการออกมาได้จริง มันต่างกันมาก หลายคนรู้ว่าไม่ดีแต่ยังออกไม่ได้ — และนี่คือ 5 ขั้นตอนที่ได้ผลจริง', Cover: CoverLeaveToxic, Body: ArticleBody7, related: [4, 8] },
  8: { title: 'Trauma Bond คืออะไร? ทำไมยิ่งเจ็บยิ่งรัก ยิ่งทำร้ายยิ่งไม่ยอมไป', cat: 'จิตวิทยา', date: '5 มิ.ย. 2568', read: '6 นาที', lead: 'ถ้าคุณรู้แน่ๆ ว่าความสัมพันธ์นี้ไม่ดีต่อคุณ แต่ยังรู้สึกว่าตัดใจไม่ได้ ยังรักอยู่ — นั่นไม่ใช่เพราะคุณโง่ นั่นคืออาการของ Trauma Bond', Cover: CoverTraumaBond, Body: ArticleBody8, related: [5, 7] },
};

window.ARTICLE_DATA = ARTICLE_DATA;
