// Numerology landing — section components
// Exports to window: NumHeader, NumHero, NumWhat, NumHow, NumTestimonials, NumCrossSell, NumFooter, NumDisclaimer

const SG = '#14C560';     // Saladin green
const SN = '#1E3888';     // Saladin navy
const SG_DEEP = '#005323';
const SG_TINT = '#F6FFF2';

// ─────────────────────────────────────────────────────────────
// Layout primitives
// ─────────────────────────────────────────────────────────────
function Container({ children, style }) {
  return (
    <div className="num-container" style={{ width: '100%', maxWidth: 1200, margin: '0 auto', padding: '0 clamp(16px, 3.2vw, 32px)', boxSizing: 'border-box', ...(style || {}) }}>
      {children}
    </div>
  );
}

// Eyebrow label used above section headings
function Eyebrow({ children, color }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontSize: 12, fontWeight: 600, textTransform: 'uppercase',
      letterSpacing: '0.12em', color: color || SG,
    }}>
      <span style={{ width: 20, height: 1, background: 'currentColor', opacity: 0.5 }} />
      {children}
    </span>
  );
}

// Numerology grid pattern (Pythagorean 3x3) — subtle background ornament
function GridPattern({ size = 320, opacity = 0.04, color = SN, style }) {
  const cells = ['1','2','3','4','5','6','7','8','9'];
  return (
    <svg viewBox="0 0 300 300" width={size} height={size} style={{ opacity, position: 'absolute', pointerEvents: 'none', ...(style || {}) }} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1">
        <rect x="1" y="1" width="298" height="298" rx="6"/>
        <line x1="100" y1="1" x2="100" y2="299"/>
        <line x1="200" y1="1" x2="200" y2="299"/>
        <line x1="1" y1="100" x2="299" y2="100"/>
        <line x1="1" y1="200" x2="299" y2="200"/>
      </g>
      <g fill={color} fontFamily="var(--font-display)" fontWeight="700" fontSize="56" textAnchor="middle" dominantBaseline="central">
        {cells.map((n, i) => {
          const col = i % 3, row = Math.floor(i / 3);
          return <text key={n} x={50 + col * 100} y={50 + row * 100}>{n}</text>;
        })}
      </g>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// HEADER
// ─────────────────────────────────────────────────────────────
function NumHeader({ mobile }) {
  const goPath = (e, target) => {
    e.preventDefault();
    if (typeof window === 'undefined') return;
    const current = window.location.pathname + (window.location.search || '');
    const next = `${target || '/'}${window.location.search || ''}`;
    if (current !== next) history.pushState(null, '', next);
    window.dispatchEvent(new PopStateEvent('popstate'));
  };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'var(--header-bg)',
      backdropFilter: 'blur(16px) saturate(180%)',
      WebkitBackdropFilter: 'blur(16px) saturate(180%)',
      borderBottom: '1px solid var(--border-default)',
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', gap: 24, padding: mobile ? '12px 20px' : '14px 32px' }}>
        <a href="/" onClick={(e) => goPath(e, '/')} style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'inherit' }}>
          <img src="assets/saladin-symbol.svg" style={{ height: mobile ? 28 : 32 }} alt="Saladin"/>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 16 : 18, lineHeight: 1, letterSpacing: '-0.01em' }}>
            <span style={{ color: SG }}>Salad</span><span style={{ color: 'var(--brand-navy-text)' }}>in</span>
            <span style={{ color: 'var(--text-support)', fontWeight: 500, marginLeft: 8, fontSize: mobile ? 13 : 15 }}>/ Thần số học</span>
          </div>
        </a>
        <div style={{ flex: 1 }}/>
        {!mobile && (
          <nav style={{ display: 'flex', gap: 18, fontSize: 14, fontWeight: 500, alignItems: 'center' }}>
            <a href="/" onClick={(e) => goPath(e, '/')} style={{ color: 'var(--text-default)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><i className="ri-home-5-line"></i>Trang chủ</a>
            <a href="/form" onClick={(e) => goPath(e, '/form')} style={{ color: 'var(--text-default)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><i className="ri-search-line"></i>Tra cứu</a>
            <a href="/result" onClick={(e) => goPath(e, '/result')} style={{ color: 'var(--text-default)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><i className="ri-bar-chart-box-line"></i>Kết quả</a>
            <a href="/poster" onClick={(e) => goPath(e, '/poster')} style={{ color: 'var(--text-default)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><i className="ri-share-forward-line"></i>Chia sẻ</a>
          </nav>
        )}
        <a href="https://saladin.vn" style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 13, fontWeight: 500, color: 'var(--text-support)',
        }}>
          {!mobile && <span>Về Saladin</span>}
          <i className="ri-external-link-line" style={{ fontSize: 14 }}></i>
        </a>
      </Container>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────
function NumHero({ mobile, onCta, initialData, onDraftChange }) {
  const [name, setName] = React.useState(() => (initialData && initialData.name) || '');
  const [dob, setDob] = React.useState(() => (initialData && initialData.dob) || '');
  const [loading, setLoading] = React.useState(false);
  const [dobFocused, setDobFocused] = React.useState(false);
  const heroNum = 7;
  const count = 50284;
  const N = (typeof window !== 'undefined' && window.SaladinNumerology) || {};

  React.useEffect(() => {
    if (!onDraftChange) return;
    onDraftChange({ name, dob });
  }, [name, dob, onDraftChange]);

  const today = new Date();
  const todayIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  const todayLabel = `${String(today.getDate()).padStart(2, '0')}/${String(today.getMonth() + 1).padStart(2, '0')}/${today.getFullYear()}`;
  const universalDay = N.calcLifePath ? N.calcLifePath(todayIso) : 7;
  const dayHints = {
    1: 'Phù hợp khởi động việc mới, quyết đoán và dứt điểm.',
    2: 'Ưu tiên hợp tác, lắng nghe và tinh chỉnh chi tiết.',
    3: 'Thuận cho giao tiếp, sáng tạo và mở rộng kết nối.',
    4: 'Tập trung kỷ luật, hoàn thiện việc tồn đọng.',
    5: 'Nhiều biến động; linh hoạt nhưng giữ nguyên tắc.',
    6: 'Chăm sóc gia đình, trách nhiệm và cân bằng cảm xúc.',
    7: 'Đào sâu phân tích, phù hợp suy nghĩ chiến lược.',
    8: 'Thuận cho mục tiêu tài chính, hiệu suất và thực thi.',
    9: 'Dọn dẹp vòng cũ, hoàn tất và buông các việc kéo dài.',
    11: 'Trực giác mạnh, nên kết hợp dữ liệu trước quyết định.',
    22: 'Tốt cho kế hoạch dài hạn và cấu trúc bền vững.',
    33: 'Nuôi dưỡng cộng đồng, hành động bằng sự tử tế.',
  };
  const vietnameseAvatars = [
    { name: 'Suboi', src: 'assets/avatars/vn-avatar-1.jpg' },
    { name: "H'Hen Niê", src: 'assets/avatars/vn-avatar-2.png' },
    { name: 'Chi Pu', src: 'assets/avatars/vn-avatar-3.jpg' },
    { name: 'Hoàng Thùy Linh', src: 'assets/avatars/vn-avatar-4.jpg' },
  ];

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--hero-bg)',
      paddingTop: mobile ? 40 : 72,
      paddingBottom: mobile ? 48 : 88,
    }}>
      {!mobile && <GridPattern size={460} opacity={0.05} color="var(--grid-color)" style={{ position: 'absolute', right: -60, top: 60 }} />}

      <Container>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.05fr 0.95fr',
          gap: mobile ? 32 : 56,
          alignItems: 'center',
          position: 'relative',
        }}>
          <div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', background: 'var(--bg)', border: '1px solid var(--primary-95)',
              borderRadius: 50, fontSize: 12, fontWeight: 600, color: 'var(--badge-text)',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: SG }} />
              Miễn phí · Không cần đăng ký
            </span>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: mobile ? 32 : 60, lineHeight: 1.05, marginTop: 18, marginBottom: 18,
              letterSpacing: '-0.025em', textWrap: 'balance',
              color: 'var(--text-default)',
            }}>
              Khám phá <span style={{ color: SG }}>con số</span> của bạn trong <span style={{ whiteSpace: 'nowrap' }}>30 giây</span>
            </h1>
            <p style={{
              fontSize: mobile ? 16 : 18, lineHeight: 1.55, color: 'var(--text-support)',
              maxWidth: 520, margin: 0, marginBottom: 20,
            }}>
              Tra cứu thần số học miễn phí — phân tích con số chủ đạo, đường đời và năm cá nhân.
            </p>

            <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
              <img
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=120&q=80"
                alt="avatar"
                style={{ width: 36, height: 36, borderRadius: '50%', border: '2px solid #fff', boxShadow: 'var(--shadow-xs)', objectFit: 'cover' }}
              />
              <span style={{ fontSize: 12, color: 'var(--text-support)' }}>
                {name ? `Xin chào ${name.split(' ').slice(-1)[0]}` : 'Kết quả sẽ cá nhân hoá theo thông tin của bạn'}
              </span>
            </div>

            <form
              onSubmit={(e) => {
                e.preventDefault();
                setLoading(true);
                setTimeout(() => {
                  setLoading(false);
                  if (onCta) onCta({ name, dob });
                }, 450);
              }}
              style={{
                marginTop: 14,
                background: 'var(--bg)',
                border: '1px solid var(--border-default)',
                borderRadius: 12,
                padding: mobile ? 12 : 10,
                boxShadow: 'var(--shadow-sm)',
                display: 'grid',
                gridTemplateColumns: mobile ? '1fr' : '1fr auto',
                gap: 10,
                maxWidth: mobile ? '100%' : 560,
                overflowAnchor: 'none',
              }}
            >
              <div style={{
                height: 48,
                border: '1px solid var(--border-default)',
                borderRadius: 8,
                background: 'var(--bg)',
                padding: '0 12px',
                display: 'flex',
                alignItems: 'center',
                gap: 10,
                minWidth: 0,
              }}>
                <i className="ri-calendar-line" style={{ fontSize: 18, color: SG }}></i>
                <input
                  type="date"
                  required
                  value={dob}
                  onChange={(e) => setDob(e.target.value)}
                  onFocus={() => setDobFocused(true)}
                  onBlur={() => setDobFocused(false)}
                  style={{
                    width: '100%',
                    border: 'none',
                    outline: 'none',
                    background: 'transparent',
                    color: 'var(--text-default)',
                    fontFamily: 'inherit',
                    fontSize: 16,
                  }}
                />
              </div>
              <button type="submit" disabled={loading} style={{
                background: SG, color: '#fff',
                height: 48,
                padding: mobile ? '14px 18px' : '12px 22px',
                borderRadius: 4, border: 'none',
                fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                whiteSpace: 'nowrap', width: mobile ? '100%' : 'auto',
                opacity: loading ? 0.7 : 1,
                transition: 'opacity 150ms',
              }}>
                {loading ? <><i className="ri-loader-4-line" style={{ fontSize: 18, animation: 'spin 800ms linear infinite' }}></i> Đang chuyển</>
                         : <>Bắt đầu tra cứu <i className="ri-arrow-right-line" style={{ fontSize: 18 }}></i></>}
              </button>
            </form>

            <div style={{ fontSize: 12, color: 'var(--text-support)', marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
              <i className="ri-lock-2-line" style={{ fontSize: 14 }}></i>
              Saladin không lưu ngày sinh của bạn. Kết quả hiển thị tức thì.
            </div>

            <div style={{
              marginTop: 14,
              padding: '12px 14px',
              borderRadius: 10,
              background: 'var(--bg)',
              border: '1px solid var(--border-default)',
            }}>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, color: 'var(--text-support)', marginBottom: 6 }}>
                Năng lượng hôm nay · {todayLabel}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 8, background: 'var(--primary-95)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 700, color: '#005323',
                }}>{universalDay}</span>
                <div style={{ fontSize: 13, color: 'var(--text-default)', fontWeight: 600 }}>
                  Số ngày chung: {universalDay}
                </div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-support)', lineHeight: 1.55 }}>
                {dayHints[universalDay] || dayHints[7]}
              </div>
            </div>

            <div style={{
              display: 'flex', alignItems: 'center', gap: 16,
              marginTop: mobile ? 28 : 36,
              paddingTop: mobile ? 24 : 28,
              borderTop: '1px solid var(--border-default)',
              flexWrap: 'wrap',
            }}>
              <div style={{ display: 'flex' }}>
                {vietnameseAvatars.map((avatar, i) => (
                  <div key={i} style={{
                    width: 36, height: 36, borderRadius: '50%',
                    marginLeft: i ? -10 : 0, border: '2px solid var(--bg)',
                    overflow: 'hidden',
                    boxShadow: 'var(--shadow-xs)',
                  }}>
                    <img
                      src={avatar.src}
                      alt={avatar.name}
                      loading="lazy"
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </div>
                ))}
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-default)' }}>
                  Đã có {count.toLocaleString('vi-VN')}+ người Việt tra cứu
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-support)', marginTop: 2 }}>
                  từ tháng 1/2026
                </div>
              </div>
            </div>
          </div>

          <div style={{ position: 'relative', minHeight: mobile ? 520 : 620 }}>
            <HeroSampleCard mobile={mobile} heroNum={heroNum} paused={dobFocused} />

            <div style={{
              position: 'absolute',
              left: mobile ? 12 : -24,
              bottom: mobile ? -18 : -22,
              background: 'var(--bg)',
              border: '1px solid var(--border-default)',
              borderRadius: 14,
              boxShadow: '0 18px 28px -18px rgba(16,24,40,0.35)',
              padding: '10px 14px',
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              animation: dobFocused ? 'none' : 'floatCard 3200ms ease-in-out infinite',
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: '50%', background: SG, color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 700,
              }}>7</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-default)' }}>Phân tích hoàn tất</div>
                <div style={{ fontSize: 12, color: 'var(--text-support)' }}>28 giây · 3 chỉ số</div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function HeroSampleCard({ mobile, heroNum, paused }) {
  const numberTheme = React.useMemo(() => ({
    1: { accent: '#2563eb', soft: '#eaf2ff', border: '#bfd5ff', icon: 'ri-flag-2-line', sticker: 'Tiên phong', motif: 'ri-focus-2-line' },
    2: { accent: '#0f766e', soft: '#eafaf7', border: '#bdebe3', icon: 'ri-team-line', sticker: 'Kết nối', motif: 'ri-links-line' },
    3: { accent: '#c2410c', soft: '#fff3e8', border: '#ffd7bf', icon: 'ri-sparkling-2-line', sticker: 'Sáng tạo', motif: 'ri-magic-line' },
    4: { accent: '#334155', soft: '#f2f5f8', border: '#d7dee7', icon: 'ri-building-2-line', sticker: 'Nền tảng', motif: 'ri-layout-grid-line' },
    5: { accent: '#7c3aed', soft: '#f4efff', border: '#d9c9ff', icon: 'ri-compass-3-line', sticker: 'Linh hoạt', motif: 'ri-windy-line' },
    6: { accent: '#be185d', soft: '#fff1f7', border: '#ffd0e5', icon: 'ri-heart-3-line', sticker: 'Chăm sóc', motif: 'ri-hand-heart-line' },
    7: { accent: '#1e3a8a', soft: '#edf2ff', border: '#c9d7ff', icon: 'ri-brain-line', sticker: 'Chiêm nghiệm', motif: 'ri-moon-clear-line' },
    8: { accent: '#166534', soft: '#eaf9ef', border: '#c4ead1', icon: 'ri-bar-chart-box-line', sticker: 'Thực thi', motif: 'ri-line-chart-line' },
    9: { accent: '#0f766e', soft: '#ebfaf6', border: '#c4efe3', icon: 'ri-service-line', sticker: 'Bao dung', motif: 'ri-seedling-line' },
  }), []);
  const tagMeta = React.useMemo(() => ({
    'Lãnh đạo': { icon: 'ri-flag-2-line', bg: '#eaf2ff', border: '#b9d2ff', text: '#1e3f9a' },
    'Bản lĩnh': { icon: 'ri-shield-check-line', bg: '#eaf8f0', border: '#bde8cc', text: '#0c6b37' },
    'Tập trung': { icon: 'ri-focus-2-line', bg: '#f3f4f6', border: '#d9dce2', text: '#1f2937' },
    'Tiên phong': { icon: 'ri-rocket-line', bg: '#fff4e8', border: '#ffd8b0', text: '#9a531e' },
    'Hợp tác': { icon: 'ri-team-line', bg: '#edf7ff', border: '#bfe2ff', text: '#0f5c8a' },
    'Lắng nghe': { icon: 'ri-ear-line', bg: '#f3fffa', border: '#c9f3e0', text: '#0d6a48' },
    'Hòa hợp': { icon: 'ri-heart-3-line', bg: '#fff1f5', border: '#ffd0dd', text: '#a12f57' },
    'Bền bỉ': { icon: 'ri-timer-2-line', bg: '#f8f5ff', border: '#dfd2ff', text: '#5a3f9a' },
    'Sáng tạo': { icon: 'ri-palette-line', bg: '#fff3ea', border: '#ffd8bb', text: '#9a4a17' },
    'Giao tiếp': { icon: 'ri-chat-1-line', bg: '#ecf7ff', border: '#bde2ff', text: '#155e87' },
    'Lan tỏa': { icon: 'ri-broadcast-line', bg: '#eefcff', border: '#c5eef7', text: '#0f6777' },
    'Lạc quan': { icon: 'ri-sun-line', bg: '#fffbe9', border: '#f8ebb0', text: '#8a6a06' },
    'Kỷ luật': { icon: 'ri-checkbox-circle-line', bg: '#edf5ff', border: '#c7dbff', text: '#1b4f9f' },
    'Logic': { icon: 'ri-function-line', bg: '#f3f4f6', border: '#d9dce2', text: '#1f2937' },
    'Ổn định': { icon: 'ri-home-4-line', bg: '#eefbf3', border: '#c6ebd4', text: '#0f6a3c' },
    'Tỉ mỉ': { icon: 'ri-draft-line', bg: '#f7f8fa', border: '#dce0e6', text: '#374151' },
    'Tự do': { icon: 'ri-compass-3-line', bg: '#fff3e8', border: '#ffd3b2', text: '#a34f1f' },
    'Nhạy bén': { icon: 'ri-flashlight-line', bg: '#eef6ff', border: '#c6dcff', text: '#1e4f9e' },
    'Thử thách': { icon: 'ri-fire-line', bg: '#fff1ef', border: '#ffcfc8', text: '#a33a2a' },
    'Đổi mới': { icon: 'ri-refresh-line', bg: '#edfffb', border: '#c2f3e8', text: '#0d7461' },
    'Quan tâm': { icon: 'ri-hand-heart-line', bg: '#fff2f7', border: '#ffd2e4', text: '#a53866' },
    'Cam kết': { icon: 'ri-links-line', bg: '#eef5ff', border: '#c7dbff', text: '#1f4a93' },
    'Cân bằng': { icon: 'ri-scales-2-line', bg: '#f3fff7', border: '#c9eed7', text: '#136743' },
    'Tin cậy': { icon: 'ri-verified-badge-line', bg: '#f3f4f6', border: '#dadce1', text: '#334155' },
    'Trí tuệ': { icon: 'ri-brain-line', bg: '#eef5ff', border: '#c6dbff', text: '#1f4f9c' },
    'Độc lập': { icon: 'ri-user-star-line', bg: '#f4f8ff', border: '#cfddff', text: '#254b8f' },
    'Trực giác': { icon: 'ri-eye-line', bg: '#f7f2ff', border: '#ddd0ff', text: '#5c4298' },
    'Cầu toàn': { icon: 'ri-medal-line', bg: '#f3f5f7', border: '#d9dde3', text: '#374151' },
    'Kết quả': { icon: 'ri-bar-chart-box-line', bg: '#ecfff3', border: '#c3ecd3', text: '#106a3d' },
    'Quản trị': { icon: 'ri-briefcase-4-line', bg: '#edf3ff', border: '#c7d8ff', text: '#1d4898' },
    'Tài chính': { icon: 'ri-money-dollar-circle-line', bg: '#eefdf4', border: '#c8efd6', text: '#0f6b3d' },
    'Kỷ cương': { icon: 'ri-shield-star-line', bg: '#f3f4f6', border: '#d9dde2', text: '#374151' },
    'Phụng sự': { icon: 'ri-service-line', bg: '#eefcf8', border: '#c4f0df', text: '#0f6f4b' },
    'Thấu hiểu': { icon: 'ri-empathize-line', bg: '#fff2f9', border: '#ffd2ea', text: '#9f3d72' },
    'Khép vòng': { icon: 'ri-loop-right-line', bg: '#f2f5ff', border: '#d0daff', text: '#3f4f9a' },
    'Tử tế': { icon: 'ri-hand-heart-line', bg: '#fff7ef', border: '#ffe0c4', text: '#8c5322' },
  }), []);
  const sampleProfiles = React.useMemo(() => ([
    { n: 1, name: 'Minh', dob: '11/01/1993', title: 'Người dẫn dắt · quyết đoán · chủ động', tags: ['Lãnh đạo', 'Bản lĩnh', 'Tập trung', 'Tiên phong'], yearLabel: 'Năm tăng tốc', avatar: 'assets/avatars/vn-avatar-1.jpg' },
    { n: 2, name: 'Linh', dob: '21/02/1996', title: 'Người kết nối · tinh tế · kiên nhẫn', tags: ['Hợp tác', 'Lắng nghe', 'Hòa hợp', 'Bền bỉ'], yearLabel: 'Năm vun đắp', avatar: 'assets/avatars/vn-avatar-2.png' },
    { n: 3, name: 'Quân', dob: '13/03/1995', title: 'Người truyền cảm hứng · sáng tạo · cởi mở', tags: ['Sáng tạo', 'Giao tiếp', 'Lan tỏa', 'Lạc quan'], yearLabel: 'Năm mở rộng', avatar: 'assets/avatars/vn-avatar-3.jpg' },
    { n: 4, name: 'Huyền', dob: '04/04/1991', title: 'Người xây nền tảng · kỷ luật · thực tế', tags: ['Kỷ luật', 'Logic', 'Ổn định', 'Tỉ mỉ'], yearLabel: 'Năm củng cố', avatar: 'assets/avatars/vn-avatar-4.jpg' },
    { n: 5, name: 'Đức', dob: '25/05/1992', title: 'Người linh hoạt · trải nghiệm · thích nghi', tags: ['Tự do', 'Nhạy bén', 'Thử thách', 'Đổi mới'], yearLabel: 'Năm chuyển động', avatar: 'assets/avatars/vn-avatar-5.png' },
    { n: 6, name: 'Trang', dob: '06/06/1994', title: 'Người chăm sóc · trách nhiệm · ấm áp', tags: ['Quan tâm', 'Cam kết', 'Cân bằng', 'Tin cậy'], yearLabel: 'Năm trách nhiệm', avatar: 'assets/avatars/vn-avatar-6.jpg' },
    { n: 7, name: 'An', dob: '12/03/1995', title: 'Người tìm tòi · phân tích · trầm tĩnh', tags: ['Trí tuệ', 'Độc lập', 'Trực giác', 'Cầu toàn'], yearLabel: 'Năm tự nhìn lại', avatar: 'assets/avatars/vn-avatar-7.jpg' },
    { n: 8, name: 'Phúc', dob: '18/08/1989', title: 'Người thực thi · tham vọng · hiệu suất', tags: ['Kết quả', 'Quản trị', 'Tài chính', 'Kỷ cương'], yearLabel: 'Năm bứt phá', avatar: 'assets/avatars/vn-avatar-8.jpg' },
    { n: 9, name: 'Mai', dob: '09/09/1990', title: 'Người nhân văn · thấu cảm · bao dung', tags: ['Phụng sự', 'Thấu hiểu', 'Khép vòng', 'Tử tế'], yearLabel: 'Năm hoàn tất', avatar: 'assets/avatars/vn-avatar-9.png' },
  ]), []);
  const initialIndex = React.useMemo(() => {
    const found = sampleProfiles.findIndex((p) => p.n === heroNum);
    return found >= 0 ? found : 0;
  }, [heroNum, sampleProfiles]);
  const [profileIndex, setProfileIndex] = React.useState(initialIndex);
  const [activeMonth, setActiveMonth] = React.useState(6);

  const profile = sampleProfiles[profileIndex] || sampleProfiles[0];
  const tone = numberTheme[profile.n] || numberTheme[7];

  React.useEffect(() => {
    setProfileIndex(initialIndex);
  }, [initialIndex]);

  React.useEffect(() => {
    if (paused) return undefined;
    const profileTimer = setInterval(() => {
      setProfileIndex((prev) => (prev + 1) % sampleProfiles.length);
    }, 2600);
    const timer = setInterval(() => {
      setActiveMonth((prev) => (prev + 1) % 12);
    }, 1600);
    return () => {
      clearInterval(timer);
      clearInterval(profileTimer);
    };
  }, [paused, sampleProfiles.length]);

  return (
    <div style={{
      background: 'var(--bg)',
      border: '1px solid var(--border-default)',
      borderRadius: 20,
      boxShadow: '0 24px 48px -24px rgba(16,24,40,0.22)',
      padding: mobile ? 16 : 24,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: mobile ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 10, flexWrap: mobile ? 'wrap' : 'nowrap', marginBottom: 12 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          height: 32, padding: '0 12px', borderRadius: 999,
          background: tone.soft, color: tone.accent, fontWeight: 700, fontSize: 14, border: `1px solid ${tone.border}`,
        }}><i className={tone.icon}></i>Kết quả mẫu</span>
        <span style={{ fontSize: mobile ? 12 : 13, color: 'var(--text-support)', display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0, maxWidth: mobile ? '100%' : 'none', whiteSpace: mobile ? 'normal' : 'nowrap' }}>
          <img src={profile.avatar} alt={profile.name} style={{ width: 24, height: 24, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--border-default)' }} />
          <span style={{ overflowWrap: 'anywhere' }}>{profile.name} · {profile.dob}</span>
        </span>
      </div>

      <div style={{
        background: tone.soft,
        border: `1px solid ${tone.border}`,
        borderRadius: 14,
        padding: mobile ? 14 : 18,
        animation: paused ? 'none' : 'sampleSwap 420ms ease',
      }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#5674b3', marginBottom: 10 }}>
          Con số chủ đạo
        </div>
        <div style={{
          position: 'relative',
          height: mobile ? 180 : 260,
          borderRadius: 12,
          overflow: 'hidden',
          border: '1px solid rgba(30,56,136,0.10)',
          background: 'rgba(255,255,255,0.6)',
        }}>
          <div style={{
            position: 'absolute',
            left: 10,
            top: 10,
            zIndex: 2,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            padding: '5px 9px',
            borderRadius: 999,
            border: `1px solid ${tone.border}`,
            background: 'rgba(255,255,255,0.88)',
            color: tone.accent,
            fontSize: 11,
            fontWeight: 700,
            animation: paused ? 'none' : 'sampleSwap 520ms ease',
          }}>
            <i className={tone.icon} style={{ fontSize: 12 }}></i>{tone.sticker}
          </div>
          <div style={{
            position: 'absolute',
            left: 14,
            bottom: 12,
            zIndex: 2,
            width: 28,
            height: 28,
            borderRadius: 8,
            border: `1px solid ${tone.border}`,
            background: 'rgba(255,255,255,0.86)',
            color: tone.accent,
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            animation: paused ? 'none' : 'floatCard 4200ms ease-in-out infinite',
          }}>
            <i className={tone.motif} style={{ fontSize: 14 }}></i>
          </div>
          <div style={{
            position: 'absolute', right: 0, top: 0, bottom: 0, width: '56%',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)',
          }}>
            {[1,2,3,4,5,6,7,8,9].map((n) => (
              <div key={n} style={{ border: '1px solid rgba(30,56,136,0.07)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 24 : 42, color: n === profile.n ? tone.accent : 'rgba(30,56,136,0.12)', background: n === profile.n ? 'rgba(255,255,255,0.72)' : 'transparent' }}>
                {n}
              </div>
            ))}
          </div>
          <div style={{
            position: 'absolute', left: '12%', top: '48%', transform: 'translateY(-50%)',
            fontFamily: 'var(--font-ios), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
            fontWeight: 700, fontSize: mobile ? 108 : 170,
            lineHeight: 1, color: tone.accent,
            width: mobile ? 86 : 132,
            textAlign: 'center',
            fontVariantNumeric: 'tabular-nums lining-nums',
            fontFeatureSettings: '"tnum" 1, "lnum" 1',
            letterSpacing: 0,
            willChange: 'transform, opacity',
            animation: paused ? 'none' : 'numPulse 2400ms ease-in-out infinite',
          }}>
            <span
              key={profile.n}
              style={{
                display: 'inline-block',
                width: '100%',
                animation: paused ? 'none' : 'sampleDigitIn 420ms cubic-bezier(0.22, 1, 0.36, 1)',
              }}
            >
              {profile.n}
            </span>
          </div>
        </div>
      </div>

      <div key={`title-${profile.n}`} style={{ marginTop: 16, fontWeight: 700, color: 'var(--text-default)', fontSize: mobile ? 16 : 20, lineHeight: 1.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', animation: paused ? 'none' : 'sampleSwap 420ms ease' }}>{profile.title}</div>
      <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {profile.tags.map((tag) => (
          <span
            key={tag}
            style={{
              padding: '7px 11px',
              border: `1px solid ${(tagMeta[tag] && tagMeta[tag].border) || 'var(--border-default)'}`,
              borderRadius: 999,
              fontSize: 13,
              color: (tagMeta[tag] && tagMeta[tag].text) || 'var(--text-support)',
              background: (tagMeta[tag] && tagMeta[tag].bg) || 'var(--bg-soft)',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
              fontWeight: 600,
            }}
          >
            <i className={(tagMeta[tag] && tagMeta[tag].icon) || 'ri-price-tag-3-line'} style={{ fontSize: 14 }}></i>
            {tag}
          </span>
        ))}
      </div>

      <div style={{ marginTop: 16, borderRadius: 12, background: 'var(--bg-soft)', padding: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center', gap: 8, flexWrap: mobile ? 'wrap' : 'nowrap', marginBottom: 10 }}>
          <span style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-support)', fontWeight: 700 }}>Năm cá nhân 2026</span>
          <span style={{ fontSize: 13, color: tone.accent, fontWeight: 700 }}>{profile.yearLabel}</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', gap: 6, alignItems: 'end', height: 62 }}>
          {[24,30,28,42,46,58,62,54,46,44,48,42].map((h, idx) => (
            <div key={idx} style={{
              height: h,
              borderRadius: 4,
              background: idx === activeMonth ? SG : 'rgba(16,24,40,0.12)',
              transition: 'background 280ms ease',
            }} />
          ))}
        </div>
        <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-support)' }}>
          <span>T1</span>
          <span>T7</span>
          <span>T12</span>
        </div>
      </div>
    </div>
  );
}

function NumWhat({ mobile }) {
  const cards = [
    {
      n: '1', icon: 'ri-user-star-line',
      title: 'Con số chủ đạo',
      desc: 'Tính cách cốt lõi và bản chất bạn từ ngày sinh.',
      tag: 'Trí tuệ · cảm xúc · động lực',
    },
    {
      n: '7', icon: 'ri-route-line',
      title: 'Đường đời',
      desc: 'Hành trình sự nghiệp, các giai đoạn lớn và thử thách.',
      tag: 'Định hướng · giai đoạn · thử thách',
    },
    {
      n: '3', icon: 'ri-calendar-2-line',
      title: 'Năm cá nhân',
      desc: 'Dự báo chủ đề và năng lượng 12 tháng tới của bạn.',
      tag: 'Cơ hội · thời điểm · rủi ro',
    },
  ];

  return (
    <section id="what" data-reveal style={{
      padding: mobile ? '64px 0' : '96px 0',
      background: 'var(--bg)',
    }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: mobile ? 32 : 48 }}>
          <div style={{ maxWidth: 580 }}>
            <Eyebrow>Bạn sẽ biết gì?</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: mobile ? 28 : 40, lineHeight: 1.1,
              margin: '12px 0 0', letterSpacing: '-0.02em',
              color: 'var(--text-default)',
            }}>
              Ba chỉ số căn bản — viết lại từ ngày sinh của bạn.
            </h2>
          </div>
          <p style={{ fontSize: mobile ? 14 : 15, color: 'var(--text-support)', maxWidth: 360, margin: 0, lineHeight: 1.55 }}>
            Mỗi chỉ số được tính theo phương pháp Pythagorean và giải thích bằng ngôn ngữ thực tế — không huyền bí.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: mobile ? 16 : 20,
        }}>
          {cards.map((c, i) => (
            <article key={c.title} className="reveal-child" style={{
              background: 'var(--bg)',
              border: '1px solid var(--border-default)',
              borderRadius: 12,
              padding: mobile ? 20 : 28,
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative', overflow: 'hidden',
              transition: 'all 200ms cubic-bezier(0.4,0,0.2,1)',
              transitionDelay: `${i * 60}ms`,
            }}>
              {/* Big watermark number */}
              <div style={{
                position: 'absolute', right: -16, top: -28,
                fontFamily: 'var(--font-display)', fontWeight: 900,
                fontSize: 180, lineHeight: 1, color: 'var(--watermark)',
                letterSpacing: '-0.05em', pointerEvents: 'none',
                fontVariantNumeric: 'tabular-nums',
              }}>{c.n}</div>

              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: 'var(--primary-95)', color: SG_DEEP,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative',
              }}>
                <i className={c.icon} style={{ fontSize: 22 }}></i>
              </div>
              <div style={{ position: 'relative' }}>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 22, lineHeight: 1.2, margin: 0, color: 'var(--text-default)',
                }}>{c.title}</h3>
                <p style={{
                  fontSize: 14, lineHeight: 1.55, color: 'var(--text-support)',
                  margin: '8px 0 0',
                }}>{c.desc}</p>
              </div>
              <div style={{
                marginTop: 'auto', paddingTop: 14,
                borderTop: '1px dashed var(--border-default)',
                fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
                letterSpacing: '0.08em', color: 'var(--text-support)',
                position: 'relative',
              }}>{c.tag}</div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION: CÁCH HOẠT ĐỘNG — 3 steps with connector
// ─────────────────────────────────────────────────────────────
function NumHow({ mobile }) {
  const steps = [
    { n: '01', icon: 'ri-edit-2-line', title: 'Nhập tên & ngày sinh', desc: 'Mất khoảng 10 giây. Không cần email, không cần đăng ký.' },
    { n: '02', icon: 'ri-bar-chart-2-line', title: 'Xem kết quả tức thì', desc: 'Phân tích đầy đủ 3 chỉ số căn bản, hoàn toàn miễn phí.' },
    { n: '03', icon: 'ri-mail-line', title: 'Lưu báo cáo (tuỳ chọn)', desc: 'Nhận tip hàng tháng qua email — bỏ theo dõi bất kỳ lúc nào.' },
  ];
  return (
    <section id="how" data-reveal style={{
      padding: mobile ? '64px 0' : '96px 0',
      background: 'var(--bg-soft)',
    }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: mobile ? 36 : 56 }}>
          <Eyebrow>Cách hoạt động</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: mobile ? 28 : 40, lineHeight: 1.1,
            margin: '12px 0 0', letterSpacing: '-0.02em',
            color: 'var(--text-default)',
          }}>Ba bước. Không quá một phút.</h2>
        </div>

        <div style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: mobile ? 16 : 32,
        }}>
          {/* Connector line */}
          {!mobile && (
            <div aria-hidden="true" style={{
              position: 'absolute', top: 32, left: '16%', right: '16%',
              height: 2, background: 'transparent',
              backgroundImage: 'linear-gradient(to right, var(--border-strong) 50%, transparent 50%)',
              backgroundSize: '12px 2px', backgroundRepeat: 'repeat-x',
              zIndex: 0,
            }}/>
          )}
          {steps.map((s, i) => (
            <div key={s.n} className="reveal-child" style={{ position: 'relative', zIndex: 1, transitionDelay: `${i * 80}ms` }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                background: 'var(--bg)',
                border: `2px solid ${i === 0 ? SG : 'var(--border-default)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
                color: i === 0 ? SG : 'var(--text-default)',
                margin: mobile ? '0' : '0 auto',
                boxShadow: 'var(--shadow-xs)',
                position: 'relative',
              }}>
                {s.n}
                <span style={{
                  position: 'absolute', bottom: -6, right: -6,
                  width: 26, height: 26, borderRadius: '50%',
                  background: i === 0 ? SG : 'var(--bg-variant)',
                  color: i === 0 ? '#fff' : 'var(--text-support)',
                  border: '2px solid var(--bg-soft)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <i className={s.icon} style={{ fontSize: 13 }}></i>
                </span>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 20, lineHeight: 1.3,
                margin: mobile ? '14px 0 6px' : '24px 0 8px',
                textAlign: mobile ? 'left' : 'center',
                color: 'var(--text-default)',
              }}>{s.title}</h3>
              <p style={{
                fontSize: 14, lineHeight: 1.55, color: 'var(--text-support)',
                margin: 0, textAlign: mobile ? 'left' : 'center',
                maxWidth: mobile ? '100%' : 280,
                marginLeft: 'auto', marginRight: 'auto',
              }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION: TESTIMONIAL
// ─────────────────────────────────────────────────────────────
function NumTestimonials({ mobile }) {
  const quotes = [
    {
      name: 'Trần Hà Anh', role: 'Marketing Manager · Hà Nội',
      quote: 'Mình thấy mô tả về con số chủ đạo 3 đúng đến bất ngờ — nhất là phần về khả năng giao tiếp. Đọc xong thấy hiểu mình hơn.',
      avatar: 'https://randomuser.me/api/portraits/women/65.jpg', initial: 'T',
    },
    {
      name: 'Lê Quốc Việt', role: 'Software Engineer · TP.HCM',
      quote: 'Phần năm cá nhân 2026 gợi ý đây là năm để nhìn lại và đầu tư cho gia đình. Trùng với việc mình đang cân nhắc mua bảo hiểm.',
      avatar: 'https://randomuser.me/api/portraits/men/47.jpg', initial: 'V',
    },
    {
      name: 'Nguyễn Mai Linh', role: 'Mẹ 1 con · Đà Nẵng',
      quote: 'Giao diện sạch sẽ, không màu mè kiểu bói toán. Đọc xong yên tâm — không phải thầy phán "vận hạn" gì cả.',
      avatar: 'https://randomuser.me/api/portraits/women/33.jpg', initial: 'L',
    },
  ];
  return (
    <section id="stories" data-reveal style={{
      padding: mobile ? '64px 0' : '96px 0',
      background: 'var(--bg)',
    }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: mobile ? 36 : 56 }}>
          <Eyebrow>Cảm nhận</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: mobile ? 28 : 40, lineHeight: 1.1,
            margin: '12px 0 0', letterSpacing: '-0.02em',
            color: 'var(--text-default)',
          }}>Người Việt nói gì về Saladin Thần số học.</h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: mobile ? 16 : 20,
        }}>
          {quotes.map((q, i) => (
            <article key={q.name} className="reveal-child" style={{
              background: 'var(--bg)',
              border: '1px solid var(--border-default)',
              borderRadius: 12,
              padding: mobile ? 20 : 24,
              display: 'flex', flexDirection: 'column', gap: 16,
              transitionDelay: `${i * 60}ms`,
            }}>
              <div style={{ display: 'flex', gap: 2, color: '#F5A623' }}>
                {[0,1,2,3,4].map(s => <i key={s} className="ri-star-fill" style={{ fontSize: 14 }}></i>)}
              </div>
              <p style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 16, lineHeight: 1.55, color: 'var(--text-default)',
                margin: 0, flex: 1,
              }}>"{q.quote}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 8, borderTop: '1px solid var(--border-default)' }}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, overflow: 'hidden', background: '#E9EEF5',
                }}>
                  <img
                    src={q.avatar}
                    alt={q.name}
                    loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    onError={(e) => {
                      e.currentTarget.style.display = 'none';
                      const fb = e.currentTarget.nextSibling;
                      if (fb) fb.style.display = 'inline-flex';
                    }}
                  />
                  <span style={{
                    display: 'none', width: '100%', height: '100%',
                    alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#55708f',
                  }}>{q.initial}</span>
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-default)' }}>{q.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-support)' }}>{q.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION: CROSS-SELL (soft)
// ─────────────────────────────────────────────────────────────
function NumCrossSell({ mobile }) {
  return (
    <section data-reveal style={{
      padding: mobile ? '48px 0 64px' : '64px 0 96px',
      background: 'var(--bg)',
    }}>
      <Container>
        <div className="reveal-child" style={{
          background: 'var(--xsell-bg)',
          borderRadius: 16,
          padding: mobile ? '28px 24px' : '48px 56px',
          color: 'var(--xsell-fg)',
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr',
          alignItems: 'center', gap: mobile ? 24 : 40,
          position: 'relative', overflow: 'hidden',
          border: '1px solid var(--xsell-border)',
        }}>
          <GridPattern size={mobile ? 220 : 360} opacity={0.06} color="#fff" style={{ position: 'absolute', right: -40, bottom: -60 }} />

          <div style={{ position: 'relative' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', background: 'rgba(255,255,255,0.10)',
              border: '1px solid rgba(255,255,255,0.18)',
              borderRadius: 50, fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.92)',
              textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>
              <i className="ri-shield-check-line" style={{ fontSize: 13 }}></i> Một sản phẩm khác của Saladin
            </span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: mobile ? 24 : 34, lineHeight: 1.15,
              margin: '16px 0 12px', letterSpacing: '-0.015em', color: '#fff',
            }}>
              2026 là <span style={{ color: SG, fontWeight: 800 }}>Personal Year 7</span> — năm để nhìn lại.
            </h2>
            <p style={{
              fontSize: mobile ? 14 : 16, lineHeight: 1.6,
              margin: 0, marginBottom: 24,
              color: 'rgba(255,255,255,0.82)', maxWidth: 540,
            }}>
              Năm 7 thường dành cho việc tự nhìn lại và sắp xếp những điều quan trọng. Cũng là lúc tốt để xem lại bảo hiểm cho gia đình — phòng khi có chuyện không lường trước.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="https://saladin.vn" style={{
                background: 'transparent', color: '#fff',
                padding: '12px 20px', borderRadius: 4,
                border: '1px solid rgba(255,255,255,0.45)',
                fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                Xem các gói bảo hiểm Saladin <i className="ri-arrow-right-line" style={{ fontSize: 16 }}></i>
              </a>
              <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>Không cam kết · Không spam</span>
            </div>
          </div>

          {/* Side stat card */}
          {!mobile && (
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.14)',
                borderRadius: 12, padding: 20,
                backdropFilter: 'blur(8px)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Bảo hiểm sức khoẻ gia đình</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, color: '#fff' }}>Từ 65k</span>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>/tháng</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16 }}>
                  {['Cấp hợp đồng 60 giây', 'Outpatient · Inpatient · Dental', 'Đối tác hạng A+ (GIC, Med-On)'].map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(255,255,255,0.88)' }}>
                      <i className="ri-check-line" style={{ color: SG, fontSize: 16 }}></i> {f}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
function NumFooter({ mobile }) {
  const goHome = (e) => {
    if (typeof window === 'undefined') return;
    e.preventDefault();
    history.replaceState(null, '', '/');
    window.dispatchEvent(new PopStateEvent('popstate'));
  };
  return (
    <footer style={{
      background: 'var(--footer-bg)',
      color: 'rgba(255,255,255,0.85)',
      paddingTop: mobile ? 40 : 56,
      paddingBottom: mobile ? 24 : 32,
    }}>
      <Container>
        {/* Disclaimer banner — placed prominently */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.10)',
          borderRadius: 8,
          padding: mobile ? '14px 16px' : '16px 20px',
          display: 'flex', alignItems: 'flex-start', gap: 12,
          marginBottom: mobile ? 32 : 48,
        }}>
          <i className="ri-information-line" style={{ fontSize: 18, color: '#FFDAD6', flexShrink: 0, marginTop: 1 }}></i>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)' }}>
            <strong style={{ color: '#fff', fontWeight: 600 }}>Lưu ý:</strong> Thần số học mang tính tham khảo và giải trí. Không thay thế tư vấn chuyên môn về y tế, tài chính hay pháp lý. Saladin không chịu trách nhiệm cho các quyết định dựa hoàn toàn vào kết quả tra cứu.
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr 1fr 1fr',
          gap: mobile ? 28 : 40,
          marginBottom: mobile ? 32 : 40,
        }}>
          {/* Brand col */}
          <div>
            <a href="/" onClick={goHome} style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'inherit' }}>
              <img src="assets/saladin-symbol.svg" style={{ height: 32 }} alt="Saladin"/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20 }}>
                <span style={{ color: SG }}>Salad</span><span style={{ color: '#94ADEC' }}>in</span>
              </div>
            </a>
            <p style={{ fontSize: 13, lineHeight: 1.55, marginTop: 14, marginBottom: 0, color: 'rgba(255,255,255,0.65)', maxWidth: 320 }}>
              Một sản phẩm <strong style={{ color: '#fff', fontWeight: 600 }}>miễn phí</strong> của Saladin — công ty công nghệ bảo hiểm Việt Nam.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
              {[
                { ic: 'ri-facebook-fill', label: 'Facebook', href: 'https://www.facebook.com/saladinvn' },
                { ic: 'ri-tiktok-fill', label: 'TikTok', href: 'https://www.tiktok.com/@saladin.vn' },
                { ic: 'ri-instagram-fill', label: 'Instagram', href: 'https://www.instagram.com/saladin.vn/' },
              ].map(s => (
                <a key={s.ic} href={s.href} target="_blank" rel="noreferrer" aria-label={s.label} style={{
                  width: 34, height: 34, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.06)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff',
                }}><i className={s.ic} style={{ fontSize: 15 }}></i></a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {[
            { title: 'Thần số học', links: [
              { label: 'Trang chủ', href: '/' },
              { label: 'Tra cứu', href: '/form' },
              { label: 'Kết quả', href: '/result' },
              { label: 'Poster', href: '/poster' },
            ]},
            { title: 'Saladin', links: [
              { label: 'Về Saladin', href: 'https://saladin.vn' },
              { label: 'Bảo hiểm xe máy', href: 'https://saladin.vn/bao-hiem-xe-may' },
              { label: 'Bảo hiểm sức khoẻ', href: 'https://saladin.vn/bao-hiem-suc-khoe' },
              { label: 'Bảo hiểm du lịch', href: 'https://saladin.vn/bao-hiem-du-lich' },
            ]},
            { title: 'Pháp lý', links: [
              { label: 'Chính sách bảo mật', href: 'https://saladin.vn/chinh-sach-bao-mat' },
              { label: 'Điều khoản sử dụng', href: 'https://saladin.vn/dieu-khoan-su-dung' },
              { label: 'Liên hệ', href: 'https://saladin.vn/lien-he' },
              { label: 'cs@saladin.vn', href: 'mailto:cs@saladin.vn' },
            ]},
          ].map(c => (
            <div key={c.title}>
              <div style={{ fontWeight: 600, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#fff', marginBottom: 14 }}>
                {c.title}
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map(l => (
                  <li key={l.label}><a href={l.href} style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', textDecoration: 'none' }}>{l.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.08)',
          paddingTop: 20,
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', flexWrap: 'wrap', gap: 12,
        }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
            © 2026 Saladin Việt Nam · Một sản phẩm phụ miễn phí của Saladin.
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <i className="ri-map-pin-line" style={{ fontSize: 14 }}></i> Việt Nam
            </span>
            <span style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.2)' }}/>
            <span>v1.0 beta</span>
          </div>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { NumHeader, NumHero, NumWhat, NumHow, NumTestimonials, NumCrossSell, NumFooter });