// Detail screen — Chi tiết 1 con số (vd: Life Path 7)
// Exports to window: DetailScreen

const DET_SG = '#14C560';
const DET_SN = '#1E3888';
const DET_SG_DEEP = '#005323';

// ─────────────────────────────────────────────────────────────
// Data — full detail content for each number we expose
// (For prototype: full content for 7, lighter for others)
// ─────────────────────────────────────────────────────────────
const DETAIL_DATA = {
  7: {
    label: 'Life Path',
    vi: 'Con số chủ đạo',
    title: 'Người tìm tòi',
    tagline: 'Trí tuệ phân tích · trầm tĩnh · độc lập · luôn đặt câu hỏi sâu.',
    oneLine: 'Số 7 đại diện cho người tìm sự thật — yêu thầm lặng việc khám phá, suy ngẫm và hiểu tận gốc.',
    core: {
      text: 'Số 7 là một trong những con số có tính chất nội tâm sâu nhất. Bạn được dẫn dắt bởi mong muốn hiểu — không chỉ "biết cái gì" mà "vì sao". Tâm trí bạn vận hành như một phòng thí nghiệm: quan sát, phân tích, so sánh, đặt giả thuyết. Bạn không hài lòng với câu trả lời sẵn có, và sẽ tự kiểm chứng trước khi tin.\n\nKhác với số 1 thích dẫn đầu hay số 3 thích biểu đạt, số 7 cần không gian riêng. Bạn nạp năng lượng từ sự yên tĩnh — đọc sách, đi dạo một mình, thiền, làm việc với dữ liệu. Người khác có thể hiểu lầm sự trầm tĩnh là lạnh lùng, nhưng thực ra đó là cách bạn xử lý thế giới.',
      traits: [
        { name: 'Tư duy phân tích', val: 92 },
        { name: 'Trực giác', val: 84 },
        { name: 'Độc lập', val: 88 },
        { name: 'Cầu toàn', val: 76 },
        { name: 'Hướng nội', val: 80 },
      ],
    },
    career: {
      text: 'Sự nghiệp lý tưởng cho số 7 nằm ở các lĩnh vực đòi hỏi chiều sâu hơn bề rộng. Bạn phát triển tốt trong vai trò có không gian suy nghĩ độc lập, tránh môi trường đòi hỏi xã giao liên tục.\n\nCác ngành phù hợp: nghiên cứu khoa học, kỹ sư phần mềm, luật, kế toán/kiểm toán, nhà phân tích dữ liệu, bác sĩ chuyên khoa, nhà văn, nhà tâm lý học. Tránh các vai trò sales/PR thuần tuý — không phải bạn không làm được, mà sẽ nhanh kiệt sức.',
      jobs: [
        { icon: 'ri-microscope-line', name: 'Nghiên cứu' },
        { icon: 'ri-code-s-slash-line', name: 'Kỹ sư phần mềm' },
        { icon: 'ri-scales-3-line', name: 'Luật sư' },
        { icon: 'ri-calculator-line', name: 'Kế toán' },
        { icon: 'ri-bar-chart-box-line', name: 'Phân tích dữ liệu' },
        { icon: 'ri-stethoscope-line', name: 'Bác sĩ' },
        { icon: 'ri-quill-pen-line', name: 'Viết lách' },
        { icon: 'ri-mental-health-line', name: 'Tâm lý học' },
      ],
    },
    love: {
      text: 'Trong tình cảm, số 7 cần một người hiểu nhu cầu không gian riêng của bạn. Bạn không phải mẫu người nói "anh yêu em" mỗi sáng — bạn thể hiện qua hành động: chu cấp, lắng nghe sâu, ghi nhớ chi tiết nhỏ.\n\nĐiểm yếu: dễ "rút" vào trong khi căng thẳng thay vì chia sẻ. Hãy chủ động đặt ra các "khoảng giao tiếp" — ví dụ: 15 phút mỗi tối để nói về cảm xúc, ngay cả khi bạn không cảm thấy cần thiết.',
      compat: [
        { n: 1, score: 60, label: 'OK' },
        { n: 2, score: 78, label: 'Tốt' },
        { n: 3, score: 50, label: 'Cần điều chỉnh' },
        { n: 4, score: 88, label: 'Rất hợp' },
        { n: 5, score: 65, label: 'OK' },
        { n: 6, score: 80, label: 'Tốt' },
        { n: 7, score: 92, label: 'Tri kỷ' },
        { n: 8, score: 70, label: 'OK' },
        { n: 9, score: 75, label: 'Tốt' },
      ],
    },
    money: {
      text: 'Số 7 thận trọng với tiền — không phải keo kiệt, mà cân nhắc. Bạn thường nghiên cứu kỹ trước khi mua món lớn và ít bị cuốn theo trend tiêu dùng. Tiền không phải mục tiêu cuối cùng, mà là phương tiện để mua thời gian và tự do.\n\n2026 là Personal Year 7 của bạn — chu kỳ "đào sâu". Đây không phải năm khởi sự kinh doanh mạo hiểm; là năm sắp xếp lại các khoản đầu tư dài hạn, mua bảo hiểm phù hợp, lập quỹ dự phòng. Tránh các quyết định tài chính bốc đồng đặc biệt từ tháng 3 đến tháng 6.',
      months: [
        { m: 'T1', v: 55, hot: false },
        { m: 'T2', v: 62, hot: false },
        { m: 'T3', v: 40, hot: false },
        { m: 'T4', v: 35, hot: false },
        { m: 'T5', v: 48, hot: false },
        { m: 'T6', v: 52, hot: false },
        { m: 'T7', v: 78, hot: true },
        { m: 'T8', v: 85, hot: true },
        { m: 'T9', v: 92, hot: true },
        { m: 'T10', v: 80, hot: false },
        { m: 'T11', v: 70, hot: false },
        { m: 'T12', v: 65, hot: false },
      ],
    },
    famous: [
      { name: 'Nikola Tesla', role: 'Nhà phát minh', color: '#FFDAD6', initial: 'NT' },
      { name: 'Marie Curie', role: 'Nhà khoa học', color: '#BDEAF4', initial: 'MC' },
      { name: 'Stephen Hawking', role: 'Vật lý lý thuyết', color: '#C5FFCA', initial: 'SH' },
      { name: 'Princess Diana', role: 'Nhà từ thiện', color: '#FFF2A6', initial: 'PD' },
      { name: 'Leonardo DiCaprio', role: 'Diễn viên', color: '#DDE5DA', initial: 'LD' },
      { name: 'Julia Roberts', role: 'Diễn viên', color: '#FFB4AB', initial: 'JR' },
    ],
  },
};


// ─────────────────────────────────────────────────────────────
// Generate detail data for any number (1-9, 11, 22, 33) from content DB
// Falls back to DETAIL_DATA[n] if explicitly defined (n=7 has hand-crafted rich data)
// ─────────────────────────────────────────────────────────────
function getDetailData(n) {
  if (DETAIL_DATA[n]) return DETAIL_DATA[n];
  const Content = (typeof window !== 'undefined' && window.SaladinContent) || {};
  const c = (Content.NUMBER_CONTENT && Content.NUMBER_CONTENT[n]) || null;
  if (!c) return DETAIL_DATA[7];

  // Generate traits from generic profile per number (semantically sensible defaults)
  const TRAIT_BY_NUMBER = {
    1: [{ name: 'Lãnh đạo', val: 92 }, { name: 'Độc lập', val: 88 }, { name: 'Quyết đoán', val: 84 }, { name: 'Sáng tạo', val: 72 }, { name: 'Kiên trì', val: 78 }],
    2: [{ name: 'Đồng cảm', val: 90 }, { name: 'Ngoại giao', val: 86 }, { name: 'Trực giác', val: 88 }, { name: 'Hợp tác', val: 84 }, { name: 'Nhạy cảm', val: 80 }],
    3: [{ name: 'Sáng tạo', val: 92 }, { name: 'Giao tiếp', val: 90 }, { name: 'Lạc quan', val: 88 }, { name: 'Hài hước', val: 84 }, { name: 'Năng lượng', val: 82 }],
    4: [{ name: 'Kỷ luật', val: 92 }, { name: 'Đáng tin', val: 90 }, { name: 'Tổ chức', val: 88 }, { name: 'Kiên trì', val: 86 }, { name: 'Thực tế', val: 84 }],
    5: [{ name: 'Phiêu lưu', val: 92 }, { name: 'Đa tài', val: 88 }, { name: 'Thông minh', val: 84 }, { name: 'Linh hoạt', val: 86 }, { name: 'Tự do', val: 90 }],
    6: [{ name: 'Trách nhiệm', val: 92 }, { name: 'Yêu thương', val: 90 }, { name: 'Hàn gắn', val: 88 }, { name: 'Trung thành', val: 86 }, { name: 'Chăm sóc', val: 84 }],
    7: [{ name: 'Tư duy phân tích', val: 92 }, { name: 'Trực giác', val: 84 }, { name: 'Độc lập', val: 88 }, { name: 'Cầu toàn', val: 76 }, { name: 'Hướng nội', val: 80 }],
    8: [{ name: 'Tham vọng', val: 92 }, { name: 'Lãnh đạo', val: 88 }, { name: 'Thực thi', val: 90 }, { name: 'Tài chính', val: 86 }, { name: 'Quyền uy', val: 84 }],
    9: [{ name: 'Nhân ái', val: 92 }, { name: 'Tầm nhìn', val: 88 }, { name: 'Lý tưởng', val: 86 }, { name: 'Sáng tạo', val: 80 }, { name: 'Hy sinh', val: 82 }],
    11:[{ name: 'Trực giác cao', val: 96 }, { name: 'Truyền cảm hứng', val: 90 }, { name: 'Nhạy bén', val: 92 }, { name: 'Sáng tạo', val: 84 }, { name: 'Tâm linh', val: 88 }],
    22:[{ name: 'Tầm nhìn lớn', val: 96 }, { name: 'Thực thi', val: 92 }, { name: 'Lãnh đạo', val: 90 }, { name: 'Kiến tạo', val: 94 }, { name: 'Cộng đồng', val: 86 }],
    33:[{ name: 'Tình yêu vô điều kiện', val: 96 }, { name: 'Chữa lành', val: 92 }, { name: 'Dạy dỗ', val: 90 }, { name: 'Hy sinh', val: 88 }, { name: 'Tâm linh', val: 94 }],
  };

  const JOBS_BY_COLOR = {
    navy:    [{ icon: 'ri-flag-line', name: 'Lãnh đạo' }, { icon: 'ri-rocket-line', name: 'Founder' }, { icon: 'ri-code-s-slash-line', name: 'Kỹ sư' }, { icon: 'ri-microscope-line', name: 'Nghiên cứu' }, { icon: 'ri-bar-chart-box-line', name: 'Phân tích' }, { icon: 'ri-quill-pen-line', name: 'Viết lách' }, { icon: 'ri-stethoscope-line', name: 'Bác sĩ' }, { icon: 'ri-scales-3-line', name: 'Luật sư' }],
    sage:    [{ icon: 'ri-customer-service-2-line', name: 'HR' }, { icon: 'ri-team-line', name: 'Partnership' }, { icon: 'ri-mental-health-line', name: 'Tâm lý' }, { icon: 'ri-presentation-line', name: 'Diễn giả' }, { icon: 'ri-heart-line', name: 'Y tá/Bác sĩ' }, { icon: 'ri-school-line', name: 'Giáo viên' }, { icon: 'ri-community-line', name: 'NGO' }, { icon: 'ri-restaurant-line', name: 'Đầu bếp' }],
    warning: [{ icon: 'ri-megaphone-line', name: 'Marketing' }, { icon: 'ri-pencil-ruler-2-line', name: 'Designer' }, { icon: 'ri-mic-line', name: 'MC/Host' }, { icon: 'ri-camera-line', name: 'Sáng tạo nội dung' }, { icon: 'ri-music-2-line', name: 'Âm nhạc' }, { icon: 'ri-palette-line', name: 'Nghệ sĩ' }, { icon: 'ri-broadcast-line', name: 'Truyền thông' }, { icon: 'ri-store-2-line', name: 'Sales B2C' }],
    teal:    [{ icon: 'ri-calculator-line', name: 'Kế toán' }, { icon: 'ri-government-line', name: 'CFO/COO' }, { icon: 'ri-building-line', name: 'Xây dựng' }, { icon: 'ri-truck-line', name: 'Logistics' }, { icon: 'ri-line-chart-line', name: 'Tài chính' }, { icon: 'ri-bank-line', name: 'Ngân hàng' }, { icon: 'ri-building-2-line', name: 'Bất động sản' }, { icon: 'ri-shield-check-line', name: 'Bảo hiểm' }],
    master:  [{ icon: 'ri-lightbulb-flash-line', name: 'Coach/Mentor' }, { icon: 'ri-rocket-2-line', name: 'Founder vĩ mô' }, { icon: 'ri-presentation-line', name: 'Speaker' }, { icon: 'ri-school-line', name: 'Giáo dục' }, { icon: 'ri-leaf-line', name: 'Sustainability' }, { icon: 'ri-mental-health-line', name: 'Healing' }, { icon: 'ri-heart-3-line', name: 'NGO toàn cầu' }, { icon: 'ri-government-line', name: 'Chính sách công' }],
  };

  const colorKey = c.color || 'navy';

  // Compute compatibility scores — best matches per number based on standard numerology compat
  const COMPAT_BY_NUMBER = {
    1: { 1: 70, 2: 65, 3: 88, 4: 60, 5: 90, 6: 78, 7: 65, 8: 72, 9: 82 },
    2: { 1: 65, 2: 80, 3: 72, 4: 86, 5: 60, 6: 92, 7: 78, 8: 88, 9: 84 },
    3: { 1: 88, 2: 72, 3: 82, 4: 55, 5: 90, 6: 86, 7: 58, 8: 68, 9: 84 },
    4: { 1: 60, 2: 86, 3: 55, 4: 80, 5: 50, 6: 88, 7: 78, 8: 92, 9: 65 },
    5: { 1: 90, 2: 60, 3: 90, 4: 50, 5: 78, 6: 65, 7: 70, 8: 72, 9: 80 },
    6: { 1: 78, 2: 92, 3: 86, 4: 88, 5: 65, 6: 84, 7: 72, 8: 86, 9: 94 },
    7: { 1: 65, 2: 78, 3: 58, 4: 78, 5: 70, 6: 72, 7: 92, 8: 68, 9: 84 },
    8: { 1: 72, 2: 88, 3: 68, 4: 92, 5: 72, 6: 86, 7: 68, 8: 82, 9: 70 },
    9: { 1: 82, 2: 84, 3: 84, 4: 65, 5: 80, 6: 94, 7: 84, 8: 70, 9: 88 },
    11:{ 1: 78, 2: 92, 3: 80, 4: 82, 5: 72, 6: 88, 7: 90, 8: 80, 9: 86 },
    22:{ 1: 80, 2: 86, 3: 70, 4: 94, 5: 65, 6: 90, 7: 82, 8: 92, 9: 84 },
    33:{ 1: 76, 2: 88, 3: 84, 4: 82, 5: 70, 6: 94, 7: 86, 8: 80, 9: 92 },
  };
  const compatMap = COMPAT_BY_NUMBER[n] || COMPAT_BY_NUMBER[7];
  const compatLabel = (s) => s >= 90 ? 'Tri kỷ' : s >= 80 ? 'Rất hợp' : s >= 70 ? 'Tốt' : s >= 60 ? 'OK' : 'Cần điều chỉnh';
  const compat = Object.keys(compatMap).map(k => ({ n: parseInt(k,10), score: compatMap[k], label: compatLabel(compatMap[k]) }));

  // Monthly financial energy — flat default with current month highlighted
  const currentMonth = new Date().getMonth(); // 0-11
  const months = ['T1','T2','T3','T4','T5','T6','T7','T8','T9','T10','T11','T12'].map((m, idx) => {
    const baseValue = 50 + Math.sin((idx + n) * 0.7) * 25 + 15;
    const v = Math.max(30, Math.min(95, Math.round(baseValue)));
    return { m, v, hot: idx >= currentMonth && idx <= currentMonth + 2 && v > 65 };
  });

  // Famous figures from content DB (string) → split by comma + assign colors/initials
  const famousNames = (c.famous || '').split(',').map(s => s.trim()).filter(Boolean);
  const famousColors = ['#FFDAD6','#BDEAF4','#C5FFCA','#FFF2A6','#DDE5DA','#FFB4AB'];
  const famous = famousNames.slice(0, 6).map((name, i) => {
    const parts = name.split(' ');
    const initial = (parts[0][0] + (parts[parts.length-1][0] || '')).toUpperCase();
    return { name, role: '', color: famousColors[i % famousColors.length], initial };
  });

  return {
    label: 'Life Path',
    vi: 'Con số chủ đạo',
    title: c.name || 'Người Tìm Tòi',
    tagline: c.tagline || '',
    oneLine: c.tagline || '',
    core: {
      text: (c.sections && c.sections['Tính cách cốt lõi']) || c.tagline || '',
      traits: TRAIT_BY_NUMBER[n] || TRAIT_BY_NUMBER[7],
    },
    career: {
      text: (c.sections && c.sections['Sự nghiệp']) || '',
      jobs: JOBS_BY_COLOR[colorKey] || JOBS_BY_COLOR.navy,
    },
    love: {
      text: (c.sections && c.sections['Tình cảm']) || '',
      compat,
    },
    money: {
      text: (c.sections && c.sections['Tài chính']) || '',
      months,
    },
    famous,
  };
}

// ─────────────────────────────────────────────────────────────
// Section: Tính cách cốt lõi
// ─────────────────────────────────────────────────────────────
function CoreSection({ data, mobile }) {
  return (
    <DetailSection
      n="01"
      title="Tính cách cốt lõi"
      subtitle="Bản chất bạn từ ngày sinh"
      mobile={mobile}
    >
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
        gap: mobile ? 24 : 40,
        alignItems: 'flex-start',
      }}>
        <div>
          {data.core.text.split('\n\n').map((p, i) => (
            <p key={i} style={{
              fontSize: 15, lineHeight: 1.7,
              color: 'var(--text-default)',
              margin: '0 0 14px', textWrap: 'pretty',
            }}>{p}</p>
          ))}
        </div>
        <div style={{
          background: 'var(--bg)',
          border: '1px solid var(--border-default)',
          borderRadius: 12, padding: 20,
          boxShadow: 'var(--shadow-xs)',
        }}>
          <div style={{
            fontSize: 11, fontWeight: 700, textTransform: 'uppercase',
            letterSpacing: '0.1em', color: 'var(--text-support)', marginBottom: 14,
          }}>Hồ sơ tính cách</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {data.core.traits.map(t => (
              <div key={t.name}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-default)' }}>{t.name}</span>
                  <span style={{ fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-display)', color: DET_SG_DEEP }}>{t.val}%</span>
                </div>
                <div style={{ height: 6, background: 'var(--bg-variant)', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{
                    height: '100%', width: `${t.val}%`,
                    background: `linear-gradient(90deg, ${DET_SG} 0%, #44E178 100%)`,
                    borderRadius: 3,
                    transition: 'width 800ms cubic-bezier(0.4,0,0.2,1)',
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </DetailSection>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Sự nghiệp
// ─────────────────────────────────────────────────────────────
function CareerSection({ data, mobile }) {
  return (
    <DetailSection
      n="02" title="Sự nghiệp" subtitle="Ngành nghề và môi trường phù hợp" mobile={mobile}
    >
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1.2fr',
        gap: mobile ? 24 : 40,
        alignItems: 'flex-start',
      }}>
        <div style={{ order: mobile ? 2 : 1 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 10,
          }}>
            {data.career.jobs.map(j => (
              <div key={j.name} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px',
                background: 'var(--bg)',
                border: '1px solid var(--border-default)',
                borderRadius: 10,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: 'var(--primary-95)', color: DET_SG_DEEP,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <i className={j.icon} style={{ fontSize: 18 }}></i>
                </div>
                <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-default)' }}>{j.name}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ order: mobile ? 1 : 2 }}>
          {data.career.text.split('\n\n').map((p, i) => (
            <p key={i} style={{
              fontSize: 15, lineHeight: 1.7,
              color: 'var(--text-default)',
              margin: '0 0 14px', textWrap: 'pretty',
            }}>{p}</p>
          ))}
        </div>
      </div>
    </DetailSection>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Tình cảm
// ─────────────────────────────────────────────────────────────
function LoveSection({ data, mobile, currentN = 7 }) {
  return (
    <DetailSection
      n="03" title="Tình cảm" subtitle="Phong cách yêu và mức tương hợp 1–9" mobile={mobile}
    >
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
        gap: mobile ? 24 : 40,
        alignItems: 'flex-start',
      }}>
        <div>
          {data.love.text.split('\n\n').map((p, i) => (
            <p key={i} style={{
              fontSize: 15, lineHeight: 1.7,
              color: 'var(--text-default)',
              margin: '0 0 14px', textWrap: 'pretty',
            }}>{p}</p>
          ))}
        </div>
        {/* Compatibility 3x3 grid */}
        <div style={{
          background: 'var(--bg)',
          border: '1px solid var(--border-default)',
          borderRadius: 12, padding: 20,
          boxShadow: 'var(--shadow-xs)',
        }}>
          <div style={{
            fontSize: 11, fontWeight: 700, textTransform: 'uppercase',
            letterSpacing: '0.1em', color: 'var(--text-support)', marginBottom: 14,
          }}>Số {currentN} ghép với...</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {data.love.compat.map(c => {
              const tier = c.score >= 85 ? 'high' : c.score >= 70 ? 'mid' : c.score >= 55 ? 'low' : 'verylow';
              const bgs = {
                high:    DET_SG,
                mid:     '#86DC46',
                low:     'var(--bg-variant)',
                verylow: 'var(--bg-variant)',
              };
              const fgs = {
                high:    '#fff',
                mid:     '#1B1D20',
                low:     'var(--text-default)',
                verylow: 'var(--text-support)',
              };
              const isSelf = c.n === currentN;
              return (
                <div key={c.n} style={{
                  padding: 10, borderRadius: 8,
                  background: bgs[tier], color: fgs[tier],
                  border: isSelf ? `2px solid ${DET_SN}` : '1px solid transparent',
                  textAlign: 'center', position: 'relative',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, lineHeight: 1,
                  }}>{c.n}</div>
                  <div style={{ fontSize: 9, marginTop: 4, opacity: 0.85, letterSpacing: '0.02em' }}>{c.label}</div>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', gap: 12, marginTop: 14, fontSize: 11, color: 'var(--text-support)', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: DET_SG }}/> Rất hợp
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: '#86DC46' }}/> Tốt
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--bg-variant)', border: '1px solid var(--border-default)' }}/> Cần điều chỉnh
            </span>
          </div>
        </div>
      </div>
    </DetailSection>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Tài chính
// ─────────────────────────────────────────────────────────────
function MoneySection({ data, mobile }) {
  return (
    <DetailSection
      n="04" title="Tài chính" subtitle="Cách bạn xử lý tiền · dự báo 12 tháng" mobile={mobile}
    >
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1.3fr',
        gap: mobile ? 24 : 40,
        alignItems: 'flex-start',
      }}>
        <div style={{ order: mobile ? 2 : 1 }}>
          {/* 12-month forecast */}
          <div style={{
            background: 'var(--bg)',
            border: '1px solid var(--border-default)',
            borderRadius: 12, padding: 20,
            boxShadow: 'var(--shadow-xs)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
              <div style={{
                fontSize: 11, fontWeight: 700, textTransform: 'uppercase',
                letterSpacing: '0.1em', color: 'var(--text-support)',
              }}>Năng lượng tài chính 2026</div>
              <div style={{ fontSize: 11, color: DET_SG, fontWeight: 600 }}>Đỉnh: T7-T9</div>
            </div>
            <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end', height: 100, marginBottom: 8 }}>
              {data.money.months.map((m, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{
                    width: '100%', height: `${m.v}%`,
                    background: m.hot ? DET_SG : 'var(--bar-bg)',
                    borderRadius: '3px 3px 0 0',
                    transition: 'background 200ms',
                  }}/>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {data.money.months.map((m, i) => (
                <div key={i} style={{ flex: 1, textAlign: 'center', fontSize: 9, color: 'var(--text-support)', fontWeight: m.hot ? 700 : 400 }}>{m.m}</div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-default)' }}>
              <div style={{ flex: 1, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: DET_SG_DEEP }}>T3-T6</div>
                <div style={{ fontSize: 10, color: 'var(--text-support)', marginTop: 2 }}>Tránh quyết định lớn</div>
              </div>
              <div style={{ width: 1, background: 'var(--border-default)' }}/>
              <div style={{ flex: 1, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: DET_SG }}>T7-T9</div>
                <div style={{ fontSize: 10, color: 'var(--text-support)', marginTop: 2 }}>Thời điểm tốt</div>
              </div>
            </div>
          </div>
        </div>
        <div style={{ order: mobile ? 1 : 2 }}>
          {data.money.text.split('\n\n').map((p, i) => (
            <p key={i} style={{
              fontSize: 15, lineHeight: 1.7,
              color: 'var(--text-default)',
              margin: '0 0 14px', textWrap: 'pretty',
            }}>{p}</p>
          ))}
        </div>
      </div>
    </DetailSection>
  );
}

// ─────────────────────────────────────────────────────────────
// Famous people
// ─────────────────────────────────────────────────────────────
function FamousSection({ data, n, mobile }) {
  return (
    <DetailSection n="" title={`Người nổi tiếng có Life Path ${n}`} subtitle="Cùng chia sẻ con số chủ đạo với bạn" mobile={mobile}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
        gap: 12,
      }}>
        {data.famous.map(p => (
          <div key={p.name} style={{
            background: 'var(--bg)',
            border: '1px solid var(--border-default)',
            borderRadius: 12,
            padding: 16,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 48, height: 48, borderRadius: '50%',
              background: p.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
              color: 'rgba(0,0,0,0.55)',
              flexShrink: 0,
            }}>{p.initial}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-default)', lineHeight: 1.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
              <div style={{ fontSize: 12, color: 'var(--text-support)', marginTop: 2 }}>{p.role}</div>
            </div>
          </div>
        ))}
      </div>
    </DetailSection>
  );
}

// ─────────────────────────────────────────────────────────────
// Section wrapper
// ─────────────────────────────────────────────────────────────
function DetailSection({ n, title, subtitle, children, mobile }) {
  return (
    <section style={{ paddingTop: mobile ? 36 : 56, paddingBottom: mobile ? 36 : 56 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: mobile ? 20 : 28 }}>
        {n && (
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
            color: DET_SG, letterSpacing: '0.05em',
            paddingTop: 2,
          }}>{n}</span>
        )}
        <div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: mobile ? 24 : 32, lineHeight: 1.15,
            margin: 0, letterSpacing: '-0.02em', color: 'var(--text-default)',
          }}>{title}</h2>
          {subtitle && (
            <div style={{ fontSize: mobile ? 13 : 14, color: 'var(--text-support)', marginTop: 4 }}>{subtitle}</div>
          )}
        </div>
      </div>
      {children}
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Sticky bottom action bar (mobile) / inline bar (desktop)
// ─────────────────────────────────────────────────────────────
function DetailActionBar({ mobile, onBack, onShare }) {
  return (
    <div style={{
      position: mobile ? 'sticky' : 'static',
      bottom: 0,
      background: mobile ? 'var(--bg-overlay-light)' : 'transparent',
      backdropFilter: mobile ? 'blur(16px) saturate(180%)' : 'none',
      WebkitBackdropFilter: mobile ? 'blur(16px) saturate(180%)' : 'none',
      borderTop: mobile ? '1px solid var(--border-default)' : 'none',
      padding: mobile ? '12px 20px' : '32px 0 0',
      display: 'flex', gap: 12, alignItems: 'center',
      zIndex: 30,
    }}>
      <button onClick={onBack} style={{
        background: 'var(--bg)', color: 'var(--text-default)',
        padding: '12px 18px', borderRadius: 4,
        border: '1px solid var(--border-default)',
        fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
        cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
        flex: mobile ? 1 : '0 0 auto',
        justifyContent: 'center',
      }}>
        <i className="ri-arrow-left-line" style={{ fontSize: 16 }}></i>
        Quay lại tổng quan
      </button>
      <button onClick={onShare} style={{
        background: DET_SG, color: '#fff',
        padding: '12px 18px', borderRadius: 4, border: 'none',
        fontFamily: 'inherit', fontSize: 14, fontWeight: 600, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        flex: mobile ? 1 : '0 0 auto',
        justifyContent: 'center',
        boxShadow: '0 4px 12px -2px rgba(20,197,96,0.35)',
      }}>
        <i className="ri-share-line" style={{ fontSize: 16 }}></i>
        Chia sẻ kết quả
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero — big number + name + tagline
// ─────────────────────────────────────────────────────────────
function DetailHero({ n, data, user, mobile, onBack }) {
  return (
    <section style={{
      background: 'var(--hero-bg)',
      paddingTop: mobile ? 28 : 56,
      paddingBottom: mobile ? 36 : 64,
      position: 'relative',
      overflow: 'hidden',
      borderBottom: '1px solid var(--border-default)',
    }}>
      <GridPattern size={mobile ? 280 : 520} opacity={0.05} color="var(--grid-color)" style={{ right: mobile ? -100 : -80, top: mobile ? -40 : -60 }} />

      <Container style={{ position: 'relative' }}>
        {/* Breadcrumb */}
        <nav style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-support)', marginBottom: mobile ? 16 : 24 }}>
          <button onClick={onBack} style={{
            background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
            fontSize: 12, color: 'var(--text-support)', fontFamily: 'inherit',
          }}>Kết quả</button>
          <i className="ri-arrow-right-s-line" style={{ fontSize: 14 }}></i>
          <span style={{ color: 'var(--text-default)', fontWeight: 500 }}>{data.label} {n}</span>
        </nav>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr auto',
          gap: mobile ? 24 : 40,
          alignItems: 'center',
        }}>
          <div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px',
              background: 'var(--bg)',
              border: '1px solid var(--primary-95)',
              borderRadius: 50, fontSize: 11, fontWeight: 700,
              color: 'var(--badge-text)', textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: DET_SG }}/>
              {data.label} · Con số chủ đạo
            </span>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: mobile ? 32 : 52, lineHeight: 1.05,
              margin: '16px 0 12px', letterSpacing: '-0.025em',
              color: 'var(--text-default)', textWrap: 'balance',
            }}>
              Số {n} — <span style={{ color: DET_SG }}>{data.title}</span>
            </h1>
            <p style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: mobile ? 16 : 19, lineHeight: 1.5,
              margin: 0, color: 'var(--text-support)', maxWidth: 580,
              textWrap: 'pretty',
            }}>{data.oneLine}</p>
            {/* Meta row */}
            <div style={{ display: 'flex', gap: 14, marginTop: mobile ? 20 : 28, flexWrap: 'wrap', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: 'linear-gradient(135deg,#FFDAD6,#FF897D)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, color: '#fff',
                }}>{(user.name || 'A').charAt(0)}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-default)' }}>{user.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-support)' }}>{formatVNDate(user.dob)}</div>
                </div>
              </div>
              <span style={{ width: 1, height: 24, background: 'var(--border-default)' }}/>
              <div style={{ fontSize: 12, color: 'var(--text-support)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <i className="ri-time-line" style={{ fontSize: 14 }}></i>
                Đọc ~ 5 phút
              </div>
            </div>
          </div>
          {/* Giant number medallion */}
          {!mobile && (
            <div style={{
              width: 240, height: 240, borderRadius: 24,
              background: `linear-gradient(135deg, var(--hero-card-grad-from) 0%, ${DET_SG} 220%)`,
              border: '1px solid var(--primary-95)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative', overflow: 'hidden',
              boxShadow: '0 24px 48px -16px rgba(20,197,96,0.25), 0 8px 16px -4px rgba(16,24,40,0.06)',
            }}>
              <GridPattern size={200} opacity={0.08} color={DET_SN} style={{ right: -20, bottom: -20 }} />
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 900,
                fontSize: 200, lineHeight: 0.9, color: DET_SN,
                letterSpacing: '-0.05em', fontVariantNumeric: 'tabular-nums',
                textShadow: '0 8px 32px rgba(30,56,136,0.15)',
                position: 'relative',
              }}>{n}</div>
            </div>
          )}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Main DetailScreen
// ─────────────────────────────────────────────────────────────
function DetailScreen({ mobile, n = 7, user, onBack, onShare }) {
  const data = getDetailData(n);
  const u = user || { name: 'Nguyễn Hoài An', dob: '1993-05-16' };
  return (
    <div style={{ background: 'var(--bg)', minHeight: '100%' }}>
      <DetailHero n={n} data={data} user={u} mobile={mobile} onBack={onBack} />
      <Container>
        <CoreSection data={data} mobile={mobile} />
        <SectionDivider />
        <CareerSection data={data} mobile={mobile} />
        <SectionDivider />
        <LoveSection data={data} mobile={mobile} currentN={n} />
        <SectionDivider />
        <MoneySection data={data} mobile={mobile} />
        <SectionDivider />
        <FamousSection data={data} n={n} mobile={mobile} />
        <div style={{ paddingBottom: mobile ? 16 : 48 }}>
          <DetailActionBar mobile={mobile} onBack={onBack} onShare={onShare} />
        </div>
      </Container>
    </div>
  );
}

function SectionDivider() {
  return <div style={{ height: 1, background: 'var(--border-default)', opacity: 0.6 }} />;
}

Object.assign(window, { DetailScreen });