import React, { useState, useEffect } from 'react';
import { 
  Brain, Sparkles, Map, Target, ShieldAlert, Key, Zap, 
  Youtube, Activity, Compass, Lightbulb, Lock, ArrowRight, 
  BookOpen, Quote, AlertTriangle, ArrowUpRight, PlayCircle, CheckCircle2 
} from 'lucide-react';

/* =========================================
   MERMAID MINDMAP COMPONENT (ZOOMABLE)
   ========================================= */
const Mindmap = ({ chart }) => {
  const [svgContent, setSvgContent] = useState('');
  const [isZoomed, setIsZoomed] = useState(false);
  const id = `mermaid-svg-${Math.random().toString(36).substr(2, 9)}`;

  useEffect(() => {
    let isMounted = true;
    const renderChart = async () => {
      try {
        if (!window.mermaid) {
          const script = document.createElement('script');
          script.src = 'https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js';
          script.async = true;
          document.body.appendChild(script);
          await new Promise(resolve => script.onload = resolve);
          window.mermaid.initialize({ 
            startOnLoad: false, 
            theme: 'base',
            themeVariables: {
              primaryColor: '#ecfdf5',
              primaryBorderColor: '#059669',
              primaryTextColor: '#064e3b',
              lineColor: '#10b981',
              fontFamily: 'Inter, sans-serif'
            }
          });
        }
        const { svg } = await window.mermaid.render(id, chart);
        if (isMounted) setSvgContent(svg);
      } catch (err) {
        console.error("Mermaid error", err);
      }
    };
    renderChart();
    return () => { isMounted = false; };
  }, [chart]);

  return (
    <div className="w-full flex flex-col items-center my-10 relative">
      <div className="absolute -inset-4 bg-gradient-to-r from-emerald-100 to-teal-50 blur-xl opacity-50 -z-10 rounded-3xl"></div>
      
      {svgContent ? (
        <div 
          className="cursor-zoom-in w-full overflow-x-auto bg-white/80 backdrop-blur-md p-6 rounded-[2rem] border border-emerald-100 shadow-sm transition-all hover:shadow-lg flex justify-center group relative"
          onClick={() => setIsZoomed(true)}
        >
          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-white/20 backdrop-blur-[2px] rounded-[2rem]">
            <div className="bg-emerald-800 text-white px-6 py-3 rounded-full flex items-center gap-2 font-medium shadow-xl">
              <Sparkles size={18} /> Nhấp để Phóng to Toàn cảnh
            </div>
          </div>
          <div dangerouslySetInnerHTML={{ __html: svgContent }} className="min-w-[600px] transition-transform duration-500 group-hover:scale-[1.02]" />
        </div>
      ) : (
        <div className="w-full h-80 flex flex-col items-center justify-center bg-emerald-50/50 backdrop-blur-md rounded-[2rem] border border-emerald-100 text-emerald-600 animate-pulse">
          <Brain size={48} className="mb-4 opacity-50" />
          <p className="font-medium">Đang kết nối các nơ-ron tư duy...</p>
        </div>
      )}

      {/* Nút xem Youtube */}
      <a 
        href="https://www.youtube.com/watch?v=LZ5C11mlTH4" 
        target="_blank" 
        rel="noopener noreferrer" 
        className="mt-6 flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full text-sm md:text-base font-semibold transition-all hover:scale-105 shadow-xl hover:shadow-red-500/30"
      >
        <PlayCircle size={20} />
        Bộ Não Của Bạn Có 2 Người Thầy — Và Một Người Đang Dẫn Lạc Lối | Dr. Iain McGilchrist
      </a>

      {/* Modal phóng to */}
      {isZoomed && (
        <div 
          className="fixed inset-0 z-[100] bg-slate-900/95 backdrop-blur-sm flex items-center justify-center p-4 md:p-8 cursor-zoom-out" 
          onClick={() => setIsZoomed(false)}
        >
          <div 
            className="bg-white p-6 rounded-3xl w-full h-full max-w-7xl max-h-[90vh] overflow-auto relative flex flex-col shadow-2xl cursor-default" 
            onClick={e => e.stopPropagation()}
          >
            <div className="flex justify-between items-center mb-6 border-b border-emerald-50 pb-4">
              <h3 className="text-xl font-bold text-emerald-900 flex items-center gap-2">
                <Compass className="text-emerald-500" /> Bản đồ Tư duy Tổng quan
              </h3>
              <button 
                className="bg-emerald-100 text-emerald-800 w-12 h-12 rounded-full flex items-center justify-center font-bold hover:bg-emerald-200 transition text-xl" 
                onClick={() => setIsZoomed(false)}
              >
                &times;
              </button>
            </div>
            <div className="flex-1 w-full overflow-auto flex items-start justify-center pt-10">
              <div 
                dangerouslySetInnerHTML={{ __html: svgContent }} 
                className="min-w-[800px] w-full max-w-5xl transform scale-125 origin-top" 
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/* =========================================
   CSS ABSTRACT ART BLOB COMPONENT
   ========================================= */
const AbstractBlob = ({ className }) => (
  <div className={`absolute rounded-[40%_60%_70%_30%/40%_50%_60%_50%] mix-blend-multiply filter blur-[40px] opacity-40 animate-[spin_10s_linear_infinite] ${className}`}></div>
);

/* =========================================
   MAIN APPLICATION COMPONENT
   ========================================= */
export default function App() {
  const mindmapMarkup = `
    graph TD
      classDef main fill:#064e3b,stroke:#047857,stroke-width:0px,color:#fff,font-weight:bold,font-size:18px,rx:15,ry:15;
      classDef leftH fill:#fef2f2,stroke:#ef4444,stroke-width:2px,color:#991b1b,font-weight:bold,rx:10,ry:10;
      classDef rightH fill:#ecfdf5,stroke:#10b981,stroke-width:2px,color:#064e3b,font-weight:bold,rx:10,ry:10;
      classDef detail fill:#ffffff,stroke:#e2e8f0,stroke-width:1px,color:#334155,rx:5,ry:5;

      ROOT[Não Bộ: 2 Thế Giới, 1 Thực Tại]:::main
      ROOT --> L[BÁN CẦU TRÁI<br/>'Kẻ Phái Viên']:::leftH
      ROOT --> R[BÁN CẦU PHẢI<br/>'Vị Minh Sư']:::rightH
      
      L --> L1[Kiểm soát & Chia nhỏ]:::detail
      L --> L2[Ám ảnh về Đo lường]:::detail
      L --> L3[Góc nhìn khô khan/Lý trí]:::detail

      R --> R1[Toàn cảnh & Bối cảnh]:::detail
      R --> R2[Kết nối & Ý nghĩa]:::detail
      R --> R3[Trực giác & Sự sống]:::detail

      L -. Lấn át .-> X[Khủng hoảng Hiện đại:<br/>Sống trong Bản đồ, Đánh mất Thực tại]:::leftH
      R -. Kêu gọi .-> Y[Giải pháp Chữa lành:<br/>Chậm lại, Chấp nhận Nghịch lý, Tin vào Trực giác]:::rightH
  `;

  const deepInsights = [
    {
      title: "1. Sự Khác Biệt Nằm Ở Sự Chú Ý",
      core: "Hai bán cầu não không chia nhau 'công việc' (như toán học hay hội họa) như ta vẫn lầm tưởng. Chúng chia nhau CÁCH chú ý vào thế giới.",
      mechanism: "Sự tiến hóa đòi hỏi sinh vật 2 kỹ năng cùng lúc: Phải tập trung cực kỳ hẹp để chộp lấy thức ăn (Bán cầu trái), nhưng phải mở rộng tầm nhìn, cảnh giác xung quanh để không bị ăn thịt (Bán cầu phải).",
      example: "Hãy tưởng tượng một chú chim. Khi nó mổ hạt thóc, nó dùng sự tập trung sắc lẹm của não trái. Nhưng cùng lúc đó, não phải của nó đang quét toàn bộ bầu trời xem có bóng diều hâu nào không.",
      colors: "bg-rose-200,bg-orange-200"
    },
    {
      title: "2. Bi kịch của Vị Minh Sư & Kẻ Phái Viên",
      core: "Não phải sinh ra để làm chủ (Minh Sư - bao quát bức tranh lớn), não trái sinh ra để làm đầy tớ thực thi (Phái Viên). Nhưng Kẻ Phái Viên đang âm mưu cướp ngôi.",
      mechanism: "Não trái làm việc với các quy trình, con số, nên nó luôn tự mãn tưởng mình biết tất cả (Hiệu ứng Dunning-Kruger). Trong khi đó não phải thấu hiểu sự phức tạp nên khiêm nhường hơn.",
      example: "Giống như gã trợ lý kiêu ngạo lật đổ vị sếp thông thái. Hắn cai trị công ty bằng Excel, quy trình cứng nhắc, KPI, khiến tổ chức đó tuy hoạt động hiệu quả như một cỗ máy nhưng đánh mất hoàn toàn linh hồn.",
      colors: "bg-blue-200,bg-indigo-200"
    },
    {
      title: "3. Ảo tưởng của việc 'Tách Rời' (Reductionism)",
      core: "Phân tách một hệ thống thành những mảnh nhỏ sẽ không giúp bạn hiểu bản chất của hệ thống đó. Ý nghĩa nằm ở sự KẾT NỐI.",
      mechanism: "Não trái tin rằng mọi thứ đều là cơ học. Muốn hiểu cái gì, cứ đập vỡ nó ra thành 100 mảnh. Nhưng bằng việc bẻ gãy các liên kết vô hình, nó giết chết sự sống.",
      example: "Nếu bạn tách một bản nhạc của Mozart thành 30.000 nốt nhạc đơn lẻ, mỗi nốt không có ý nghĩa gì cả. Bản nhạc không nằm ở các nốt, nó nằm ở khoảng trống và sự liên kết giữa các nốt.",
      colors: "bg-emerald-200,bg-teal-200"
    },
    {
      title: "4. Căn Bệnh Sống Trong Tấm Bản Đồ",
      core: "Chúng ta đang nhầm lẫn 'mô hình thực tại' (Bản đồ) với chính Thực tại (Thế giới thật).",
      mechanism: "Tâm trí lý trí không chịu được sự mơ hồ của cuộc sống thực, nên nó tạo ra các sơ đồ, danh mục, luật lệ để dễ kiểm soát. Lâu dần, ta mắc kẹt trong mớ luật lệ đó.",
      example: "Giống như việc bạn cố học bơi bằng cách ngồi trên bờ đọc sách hướng dẫn, và thề sẽ không bước xuống nước cho đến khi thuộc lòng lý thuyết. Bạn đang bơi trên bản đồ, không phải dưới dòng sông.",
      colors: "bg-amber-200,bg-yellow-200"
    },
    {
      title: "5. Góc Nhìn Quyết Định Thực Tại",
      core: "Thực tại không phải một khối đá cố định. Cách bạn chọn CHÚ Ý đến một vật sẽ quyết định vật đó là gì.",
      mechanism: "Chú ý không chỉ là nhìn, nó là một hành vi đạo đức. Nếu nhìn bằng tâm thế kiểm soát, mọi thứ là cỗ máy vô cảm. Nếu nhìn bằng sự rộng mở, sự sống sẽ hiển lộ.",
      example: "Cùng một ngọn núi: Với người Viking là cột mốc báo hiệu bão, với nhà địa chất là mỏ quặng để khai thác kiếm tiền, nhưng với người Kelt cổ đại, đó là thánh địa của các vị thần. Ngọn núi là thứ bạn chọn chú ý.",
      colors: "bg-purple-200,bg-fuchsia-200"
    },
    {
      title: "6. Trực Giác Lên Ngôi",
      core: "Trực giác không phải trò đoán mò tâm linh. Nó là một siêu cỗ máy trí tuệ xử lý song song hàng vạn dữ liệu vô thức cùng lúc.",
      mechanism: "Lý trí đi từng bước (A -> B -> C), rất chậm. Trực giác kết nối hàng chục dải băng kinh nghiệm quá khứ, cảm giác cơ thể và bối cảnh hiện tại trong tích tắc.",
      example: "Một chuyên gia cá cược đua ngựa kiếm hàng tỷ đồng chỉ bằng cách ra sân ngắm đàn ngựa đi bộ trong 5 phút. Khi ông cố gắng giải thích logic bằng lý trí cho con trai hiểu, ông lập tức phán đoán sai và thua cuộc.",
      colors: "bg-sky-200,bg-cyan-200"
    },
    {
      title: "7. Sự Hợp Nhất Của Nghịch Lý",
      core: "Sự thật tối thượng không bao giờ trắng hay đen. Nó ôm trọn cả hai mặt đối lập.",
      mechanism: "Não trái cực đoan chỉ thích chọn A hoặc B. Nhưng vũ trụ vận hành dựa trên sự căng thẳng và hòa hợp của cả hai mặt. Mất đi sức căng đó, không gì có thể tồn tại.",
      example: "Một thanh nam châm bắt buộc phải có cực Bắc và cực Nam. Một cây cung bắt buộc phải bị kéo căng về hai hướng trái ngược nhau thì mũi tên mới có thể vút bay.",
      colors: "bg-pink-200,bg-rose-200"
    },
    {
      title: "8. Sự Thật Nằm Trong Những Khoảng Trống",
      core: "Ý nghĩa thiêng liêng và sâu sắc nhất thường nằm ở những gì KHÔNG được nói ra.",
      mechanism: "Khi bạn cố dùng ngôn ngữ khô khan để giải thích cái Đẹp, bạn đang cưỡng ép nó. Không gian trống rỗng mới là nơi chứa đựng những tiềm năng vô hạn.",
      example: "Giải thích một trò đùa giống như mổ xẻ một con ếch: Bạn hiểu được cách nó hoạt động, nhưng con ếch đã chết. Giải thích một bài thơ bằng văn xuôi trần trụi cũng vậy.",
      colors: "bg-lime-200,bg-green-200"
    },
    {
      title: "9. Chức năng Cứu rỗi của Đau Khổ",
      core: "Chạy trốn nỗi đau bằng sự hưởng thụ hời hợt (Hedonism) là đánh mất cốt lõi của sự trưởng thành.",
      mechanism: "Không có sự đau khổ thì sự tồn tại không có độ sâu, niềm vui cũng trở nên rỗng tuếch. Nỗi đau khoét những khoảng trống trong tim để ta có thể chứa thêm sự thấu cảm.",
      example: "Bác sĩ Victor Frankl đã sống sót qua trại tập trung Đức Quốc Xã và nhận ra: Đời người chỉ có ý nghĩa khi ta kết nối với người khác, cống hiến tạo ra giá trị, và dũng cảm đối mặt với sự đau khổ không thể tránh khỏi.",
      colors: "bg-slate-300,bg-gray-200"
    }
  ];

  const playbooks = [
    {
      if: "Nếu bạn cảm thấy mệt mỏi, cạn kiệt vì bị kẹt trong đống báo cáo, số liệu KPI...",
      then: "Hãy đứng lên đi ra ngoài thiên nhiên 15 phút, tuyệt đối KHÔNG đem theo điện thoại. Mục đích: Tắt hệ thống 'Kẻ Phái Viên' (lý trí tính toán), đánh thức 'Vị Minh Sư' (não phải) để kết nối lại với không gian sống động xung quanh.",
      icon: <Activity className="text-emerald-500" size={32} />
    },
    {
      if: "Nếu bạn phải đưa ra một quyết định hệ trọng nhưng não đang 'kẹt số' vì có quá nhiều dữ kiện logic...",
      then: "Dừng phân tích. Hãy chợp mắt 10 phút, đi tắm hoặc rửa bát. Khi lý trí lùi lại, trực giác siêu tốc sẽ có không gian để ghép nối các mảnh dữ liệu vô thức và đưa cho bạn câu trả lời.",
      icon: <Lightbulb className="text-amber-500" size={32} />
    }
  ];

  const flashcards = [
    { q: "Sự khác biệt cốt lõi giữa hai bán cầu não là gì?", a: "Không phải ở CHỨC NĂNG, mà là CÁCH CHÚ Ý (Trái: hẹp/tập trung/kiểm soát - Phải: rộng/kết nối/linh hoạt)." },
    { q: "Kẻ Phái Viên (Não trái) bị mắc kẹt trong ảo tưởng gì?", a: "Hiệu ứng Dunning-Kruger: Biết rất ít về bức tranh tổng thể nhưng ngạo mạn nghĩ mình biết tất cả." },
    { q: "Vị Minh Sư (Não phải) nhìn thế giới như thế nào?", a: "Nhìn vạn vật như một mạng lưới sống động, liên tục thay đổi và đan xen ý nghĩa vào nhau." },
    { q: "Phân tích thái quá (Reductionism) dẫn đến hậu quả gì?", a: "Chia nhỏ mọi thứ làm bẻ gãy các liên kết, đánh mất Ý NGHĨA (giống như đập vụn một bản nhạc thành các nốt vô tri)." },
    { q: "Sống trong tấm bản đồ nghĩa là gì?", a: "Là nhầm lẫn các khái niệm, quy trình, mô hình (bản đồ) với trải nghiệm của thực tại sống động." },
    { q: "Bản chất thật sự của Trực giác là gì?", a: "Là trí tuệ siêu tốc của não phải, có thể xử lý song song hàng chục dữ liệu phức tạp mà lý trí không theo kịp." },
    { q: "Tại sao giải thích quá rõ ràng lại giết chết một bài thơ/trò đùa?", a: "Vì ý nghĩa của chúng nằm ở sự ngầm hiểu và khoảng trống. Biến cái ẩn dụ thành văn trần trụi sẽ làm mất đi cái Đẹp." },
    { q: "Nghịch lý đóng vai trò gì trong sự tồn tại?", a: "Vạn vật cần sự căng thẳng của hai mặt đối lập để vận hành (như nam châm cần cực Bắc - Nam, cây cung cần kéo ngược về 2 phía)." },
    { q: "Knowledge (Kiến thức) khác gì Wisdom (Sự thông thái)?", a: "Kiến thức là biết các con số và sự kiện khô khan. Thông thái là sự thấu hiểu từ trải nghiệm sống sâu sắc." },
    { q: "Lưới Indra là phép ẩn dụ cho điều gì?", a: "Sự tương tức: Không có cái tôi độc lập. Mọi cá thể tồn tại qua sự phản chiếu và kết nối với vạn vật xung quanh." },
    { q: "Chức năng của sự Đau Khổ là gì?", a: "Mang lại độ sâu cho sự tồn tại. Thiếu vắng nó, niềm vui chỉ là trò tiêu khiển vô nghĩa trên một cỗ máy chạy bộ (hedonic treadmill)." },
    { q: "Dấu hiệu 'Red Flag' của việc não trái thao túng?", a: "Muốn kiểm soát mọi thứ, đo lường mọi thứ bằng con số, thiếu kiên nhẫn, và đánh giá con người như những cỗ máy." },
    { q: "Làm thế nào để khởi động lại não phải?", a: "Chậm lại, tiếp xúc với nghệ thuật, hòa mình vào thiên nhiên, và chấp nhận sự bí ẩn không thể giải thích bằng lời." },
    { q: "Tại sao giáo dục hiện đại đang đi lầm đường?", a: "Cố 'nhồi nhét' thông tin (não trái) thay vì 'khơi gợi' tiềm năng, trực giác và sự thấu cảm từ bên trong (não phải)." },
    { q: "Quy tắc cốt lõi khi tương tác với thực tại?", a: "Cách bạn chọn CHÚ Ý sẽ quyết định vũ trụ mà bạn SỐNG. Chú ý bằng lòng trắc ẩn, thế giới sẽ dịu dàng hơn." }
  ];

  return (
    <div className="min-h-screen bg-[#FAFAFA] text-slate-800 font-sans selection:bg-emerald-200">
      
      {/* ================= HERO SECTION ================= */}
      <header className="relative overflow-hidden pt-20 pb-16 px-6 lg:px-10 border-b border-emerald-100 bg-white">
        <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/3 w-[800px] h-[800px] bg-gradient-to-br from-emerald-50 to-teal-50 rounded-full blur-3xl opacity-60"></div>
        
        <div className="max-w-5xl mx-auto relative z-10 flex flex-col items-center text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-100 text-emerald-800 font-medium text-sm mb-6 border border-emerald-200 shadow-sm">
            <Brain size={16} /> Triết học Nhận thức & Tâm lý học Hiện đại
          </div>
          
          <h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 leading-tight tracking-tight mb-6">
            Bức Tranh Toàn Cảnh: <br className="hidden md:block"/> 
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">
              Não Bộ Đang Dẫn Ta Đi Lạc
            </span>
          </h1>
          
          <p className="text-lg md:text-xl text-slate-600 max-w-3xl leading-relaxed mb-10">
            Chào bạn, tôi ở đây để đồng hành cùng bạn giải mã một trong những sự chuyển dịch tư duy (Paradigm shift) vĩ đại nhất. Mọi thứ bạn nghĩ mình biết về não bộ — trái logic, phải sáng tạo — là những lầm tưởng cũ kỹ. Sự thật uyên thâm hơn nhiều, và nó liên quan trực tiếp đến cuộc sống hiện tại của bạn.
          </p>

          <Mindmap chart={mindmapMarkup} />
        </div>
      </header>

      {/* ================= DEEP INSIGHTS ================= */}
      <section className="py-24 px-6 lg:px-10 max-w-6xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4 flex items-center justify-center gap-3">
            <Key className="text-emerald-600" /> Các Trụ Cột Tri Thức
          </h2>
          <p className="text-slate-500 max-w-2xl mx-auto">Vượt qua những lý thuyết hàn lâm khô khan, đây là 9 bài học sâu sắc nhất bóc tách cơ chế vận hành tư duy của bạn.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {deepInsights.map((insight, idx) => (
            <div key={idx} className="relative group rounded-[2rem] bg-white p-8 shadow-sm hover:shadow-xl transition-all duration-500 border border-slate-100 overflow-hidden flex flex-col h-full z-10 hover:-translate-y-1">
              {/* CSS Abstract Art Background */}
              <AbstractBlob className={`top-0 left-0 w-48 h-48 ${insight.colors.split(',')[0]} -translate-x-1/2 -translate-y-1/2 transition-transform duration-700 group-hover:scale-150`} />
              <AbstractBlob className={`bottom-0 right-0 w-32 h-32 ${insight.colors.split(',')[1]} translate-x-1/2 translate-y-1/2 transition-transform duration-700 group-hover:scale-150`} />
              
              <div className="relative z-20 flex-1 flex flex-col">
                <h3 className="text-xl font-bold text-slate-900 mb-4 leading-snug">{insight.title}</h3>
                
                <div className="mb-4">
                  <span className="text-xs font-bold uppercase tracking-wider text-emerald-600 mb-1 block">Bản chất</span>
                  <p className="text-slate-700 text-sm leading-relaxed font-medium">{insight.core}</p>
                </div>
                
                <div className="mb-4">
                  <span className="text-xs font-bold uppercase tracking-wider text-indigo-600 mb-1 block">Cơ chế</span>
                  <p className="text-slate-600 text-sm leading-relaxed">{insight.mechanism}</p>
                </div>
                
                <div className="mt-auto pt-4 border-t border-slate-100">
                  <span className="text-xs font-bold uppercase tracking-wider text-amber-600 mb-2 flex items-center gap-1">
                    <Lightbulb size={12} /> Ẩn dụ thực tế
                  </span>
                  <p className="text-slate-600 text-sm italic">"{insight.example}"</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ================= ACTION PLAYBOOK ================= */}
      <section className="py-24 bg-slate-900 text-white relative overflow-hidden">
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-600 rounded-full blur-[100px] opacity-20 pointer-events-none"></div>
        <div className="max-w-5xl mx-auto px-6 lg:px-10 relative z-10">
          
          <div className="mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 flex items-center gap-3">
              <Zap className="text-amber-400" /> Sổ Tay Thực Chiến
            </h2>
            <p className="text-slate-400">Cách đưa các triết lý uyên thâm vào hiện thực cuộc sống hằng ngày.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
            {playbooks.map((pb, idx) => (
              <div key={idx} className="bg-slate-800/50 backdrop-blur-md border border-slate-700 p-8 rounded-[2rem] hover:bg-slate-800 transition">
                <div className="mb-6 bg-slate-900 w-16 h-16 rounded-2xl flex items-center justify-center shadow-inner">
                  {pb.icon}
                </div>
                <h4 className="text-lg font-bold text-slate-200 mb-3">{pb.if}</h4>
                <div className="flex gap-3 text-emerald-400">
                  <ArrowRight className="flex-shrink-0 mt-1" size={20} />
                  <p className="text-slate-300 leading-relaxed">{pb.then}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="bg-gradient-to-r from-emerald-900 to-teal-900 p-8 rounded-[2rem] border border-emerald-700/50 flex flex-col md:flex-row items-center gap-8 shadow-2xl">
            <div className="bg-emerald-500 text-emerald-950 w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0 font-bold">
              24H
            </div>
            <div>
              <h3 className="text-xl font-bold text-white mb-2">Micro-Action: Bắt đầu ngay ngày mai</h3>
              <p className="text-emerald-100/80">Tắt hoàn toàn thông báo điện thoại trong 1 giờ đầu tiên sau khi thức dậy. Chỉ uống nước, nhìn ra cửa sổ và hít thở. Hãy để "Minh Sư" (Não phải) khởi động trước khi để "Kẻ Phái Viên" (Não trái) xông vào với hàng chục email đo lường hiệu suất.</p>
            </div>
          </div>

        </div>
      </section>

      {/* ================= REALITY CHECK ================= */}
      <section className="py-24 px-6 lg:px-10 max-w-5xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-12 text-center flex items-center justify-center gap-3">
          <ShieldAlert className="text-rose-500" /> Nhận Diện Cạm Bẫy
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Cạm bẫy */}
          <div className="bg-rose-50/50 border border-rose-100 p-8 rounded-[2rem] relative overflow-hidden">
            <div className="absolute top-4 right-4 text-rose-200"><AlertTriangle size={64} /></div>
            <h3 className="text-xl font-bold text-rose-800 mb-4 relative z-10 flex items-center gap-2">
              <span className="text-2xl">🚩</span> Bẫy Vô Hình
            </h3>
            <p className="text-slate-700 mb-4 relative z-10">
              <strong>Ảo tưởng mổ xẻ:</strong> Chúng ta thường tin rằng "Muốn hiểu sâu thì phải mổ xẻ phân tích mọi chi tiết". Khi bạn cố phân tích rạch ròi lý do tại sao bạn yêu một người, hoặc cố giải thích logic của một bài thơ, bạn đang dùng nhầm công cụ.
            </p>
            <p className="text-rose-700/80 text-sm italic relative z-10 border-l-4 border-rose-300 pl-3">
              Thất bại: Mọi thứ trở nên trần trụi, mất hết cảm xúc, biến tình yêu thiêng liêng thành một bản CV đánh giá lợi ích.
            </p>
          </div>

          {/* Kỷ luật */}
          <div className="bg-emerald-50/50 border border-emerald-100 p-8 rounded-[2rem] relative overflow-hidden">
            <div className="absolute top-4 right-4 text-emerald-200"><Lock size={64} /></div>
            <h3 className="text-xl font-bold text-emerald-800 mb-4 relative z-10 flex items-center gap-2">
              <span className="text-2xl">🛡️</span> Chốt Chặn Kỷ Luật
            </h3>
            <p className="text-slate-700 mb-4 relative z-10">
              <strong>Luật 24H Không Định Lượng:</strong> Bản tính não trái rất lì lợm. Đừng dặn mình "phải thư giãn đi", nó sẽ biến thư giãn thành 1 task có KPI. Hãy tạo chốt chặn vật lý.
            </p>
            <ul className="space-y-2 relative z-10">
              <li className="flex items-start gap-2 text-emerald-700/80 text-sm">
                <CheckCircle2 size={18} className="flex-shrink-0 mt-0.5 text-emerald-500" /> 
                Dành 1 ngày Chủ Nhật tháo đồng hồ đeo tay.
              </li>
              <li className="flex items-start gap-2 text-emerald-700/80 text-sm">
                <CheckCircle2 size={18} className="flex-shrink-0 mt-0.5 text-emerald-500" /> 
                Gỡ các app đo lường (đếm calo, đếm bước chân) trong đúng 24h.
              </li>
            </ul>
          </div>
        </div>
      </section>

      {/* ================= ACTIVE RECALL ================= */}
      <section className="py-24 bg-white border-t border-slate-100">
        <div className="max-w-6xl mx-auto px-6 lg:px-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4 flex items-center justify-center gap-3">
              <Brain className="text-purple-600" /> Trạm Ôn Tập (Flashcards)
            </h2>
            <p className="text-slate-500">Đọc lại nhanh 15 luận điểm xương sống để ghim chặt kiến thức vào trí nhớ dài hạn.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {flashcards.map((fc, idx) => (
              <div key={idx} className="bg-slate-50 p-6 rounded-[1.5rem] hover:bg-white hover:shadow-xl hover:shadow-emerald-900/5 transition-all duration-300 border border-slate-200 hover:border-emerald-200 group">
                <div className="flex gap-3 mb-3">
                  <div className="font-black text-slate-300 group-hover:text-emerald-200 text-3xl leading-none">Q.</div>
                  <h4 className="font-bold text-slate-800 text-sm md:text-base leading-snug pt-1">{fc.q}</h4>
                </div>
                <div className="flex gap-3 mt-4 pt-4 border-t border-slate-100">
                  <div className="font-black text-slate-200 group-hover:text-amber-200 text-3xl leading-none">A.</div>
                  <p className="text-slate-600 text-sm leading-relaxed pt-1">{fc.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ================= FOOTER ================= */}
      <footer className="bg-slate-950 text-slate-400 py-10 border-t border-slate-900 flex flex-col justify-center min-h-[128px]">
        <div className="max-w-5xl mx-auto px-6 w-full flex flex-col md:flex-row items-center justify-between gap-6">
          
          <div className="text-center md:text-left max-w-lg">
            <h3 className="text-white font-bold text-lg mb-2 flex items-center gap-2 justify-center md:justify-start">
              <Sparkles size={18} className="text-emerald-400" /> Các kênh hiện tại
            </h3>
            <p className="text-xs md:text-sm leading-relaxed text-slate-500">
              Cập nhật kiến thức thực chiến nhất về Kỹ năng Quay Dựng, Xây kênh Niche và Tư duy phân tích Thuật toán Mạng xã hội kỷ nguyên mới.
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
            <a href="https://youtube.com/@vietndonline" target="_blank" rel="noreferrer" className="flex items-center justify-center gap-2 px-4 py-2 bg-slate-900 hover:bg-slate-800 rounded-xl border border-slate-800 transition hover:text-white">
              <Youtube size={18} className="text-red-500" /> <span className="text-sm font-medium">YouTube</span>
            </a>
            <a href="https://www.tiktok.com/@nguyenducviet.viral" target="_blank" rel="noreferrer" className="flex items-center justify-center gap-2 px-4 py-2 bg-slate-900 hover:bg-slate-800 rounded-xl border border-slate-800 transition hover:text-white">
              <PlayCircle size={18} className="text-cyan-500" /> <span className="text-sm font-medium">TikTok</span>
            </a>
            <a href="https://web.facebook.com/profile.php?id=61580450902746" target="_blank" rel="noreferrer" className="flex items-center justify-center gap-2 px-4 py-2 bg-slate-900 hover:bg-slate-800 rounded-xl border border-slate-800 transition hover:text-white">
              <ArrowUpRight size={18} className="text-blue-500" /> <span className="text-sm font-medium">Facebook</span>
            </a>
          </div>
          
        </div>
      </footer>
      
    </div>
  );
}
<script id="cms-pin-widget">if(localStorage.getItem("cms_auth")==="granted"){const p=window.location.pathname.split("/").filter(Boolean);let r="vietndj.github.io",f="index.html";if(p.length>1){r=p[0];f=p.pop()}else if(p.length===1){if(p[0].endsWith(".html"))f=p[0];else r=p[0]}const k=r+"/"+decodeURIComponent(f);let isP=false;try{const d=JSON.parse(localStorage.getItem("cms_repo_data"));if(d&&d.pinned&&d.pinned.includes(k))isP=true;}catch(e){}const b=document.createElement("a");b.href="https://vietndj.github.io/?"+(isP?"unpin=":"pin=")+encodeURIComponent(k);b.innerHTML=isP?"❌ Bỏ ghim":"📌 Ghim bài";b.style.cssText="position:fixed;top:15px;right:15px;background:"+(isP?"#FF3B30":"#FF9500")+";color:white;padding:8px 16px;border-radius:20px;font-weight:bold;font-size:12px;z-index:99999;text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,0.15);transition:all 0.2s ease;cursor:pointer;";b.onclick=function(e){e.preventDefault();window.open(this.href,"_blank");isP=!isP;this.innerHTML=isP?"❌ Bỏ ghim":"📌 Ghim bài";this.style.background=isP?"#FF3B30":"#FF9500";this.href="https://vietndj.github.io/?"+(isP?"unpin=":"pin=")+encodeURIComponent(k)};document.body.appendChild(b);}</script>