// 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 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 }) {
  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' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <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ố</span>
          </div>
        </div>
        <div style={{ flex: 1 }}/>
        {!mobile && (
          <nav style={{ display: 'flex', gap: 28, fontSize: 14, fontWeight: 500 }}>
            <a href="#what" style={{ color: 'var(--text-default)' }}>Bạn sẽ biết gì</a>
            <a href="#how" style={{ color: 'var(--text-default)' }}>Cách hoạt động</a>
            <a href="#stories" style={{ color: 'var(--text-default)' }}>Cảm nhận</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 }) {
  const [name, setName] = React.useState('');
  const [dob, setDob] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  // Animated counter — cycles 1..9 then settles on 7
  const [heroNum, setHeroNum] = React.useState(1);
  const [counterDone, setCounterDone] = React.useState(false);
  React.useEffect(() => {
    if (counterDone) return;
    let n = 1;
    const id = setInterval(() => {
      n += 1;
      if (n > 9) { setHeroNum(7); setCounterDone(true); clearInterval(id); }
      else setHeroNum(n);
    }, 110);
    return () => clearInterval(id);
  }, [counterDone]);

  // User-tally counter (trust badge) — counts up to 50,000+
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const target = 50284;
    const start = performance.now();
    const dur = 1400;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setCount(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--hero-bg)',
      paddingTop: mobile ? 40 : 72,
      paddingBottom: mobile ? 48 : 88,
    }}>
      {/* Decorative grid pattern */}
      {!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',
        }}>
          {/* Copy + form */}
          <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 ? 36 : 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: mobile ? 28 : 32,
            }}>
              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 của bạn từ ngày sinh.
            </p>

            {/* Form card */}
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setLoading(true);
                setTimeout(() => {
                  setLoading(false);
                  if (onCta) onCta({ dob });
                }, 700);
              }}
              style={{
                background: 'var(--bg)',
                border: '1px solid var(--border-default)',
                borderRadius: 12,
                padding: mobile ? 16 : 8,
                boxShadow: 'var(--shadow-sm)',
                display: 'flex',
                flexDirection: mobile ? 'column' : 'row',
                alignItems: mobile ? 'stretch' : 'center',
                gap: mobile ? 12 : 8,
                maxWidth: mobile ? '100%' : 520,
              }}
            >
              <label style={{
                display: 'flex', alignItems: 'center', gap: 10,
                flex: 1,
                padding: mobile ? '10px 12px' : '8px 12px',
                border: mobile ? '1px solid var(--border-default)' : 'none',
                borderRadius: mobile ? 8 : 4,
              }}>
                <i className="ri-calendar-line" style={{ fontSize: 18, color: SG }}></i>
                <input
                  type="date"
                  value={dob}
                  onChange={(e) => setDob(e.target.value)}
                  placeholder="dd/mm/yyyy"
                  style={{
                    flex: 1, border: 'none', outline: 'none', background: 'transparent',
                    fontFamily: 'inherit', fontSize: 15, color: 'var(--text-default)',
                    minWidth: 0,
                  }}
                />
              </label>
              <button type="submit" disabled={loading} style={{
                background: SG, color: '#fff',
                padding: mobile ? '14px 18px' : '12px 20px',
                borderRadius: 4, border: 'none',
                fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                whiteSpace: 'nowrap',
                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 phân tích</>
                         : <>Tra cứu ngay <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>

            {/* Trust badge */}
            <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' }}>
                {['#C5FFCA','#BDEAF4','#FFF2A6','#FFDAD6'].map((c,i) => (
                  <div key={i} style={{
                    width: 36, height: 36, borderRadius: '50%', background: c,
                    marginLeft: i ? -10 : 0, border: '2px solid var(--bg)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
                    color: 'rgba(0,0,0,0.5)',
                  }}>{['A','M','T','L'][i]}</div>
                ))}
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)', color: 'var(--text-default)' }}>
                  Đã có <span style={{ color: SG }}>{count.toLocaleString('vi-VN')}+</span> người Việt tra cứu
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-support)', marginTop: 2 }}>kể từ tháng 1/2026</div>
              </div>
            </div>
          </div>

          {/* Hero visual: numerology preview card */}
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            {/* Background grid behind card on mobile */}
            {mobile && <GridPattern size={280} opacity={0.06} color={SG} style={{ position: 'absolute' }} />}

            <div style={{
              position: 'relative',
              width: mobile ? '100%' : '100%',
              maxWidth: 420,
              background: 'var(--bg)',
              borderRadius: 16,
              padding: mobile ? 20 : 28,
              boxShadow: '0 24px 48px -16px rgba(16,24,40,0.18), 0 8px 16px -4px rgba(16,24,40,0.06)',
              border: '1px solid var(--border-default)',
              transform: mobile ? 'none' : 'rotate(-1.5deg)',
            }}>
              {/* Header row */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px', background: 'var(--primary-95)', color: SG_DEEP,
                  borderRadius: 50, fontSize: 11, fontWeight: 600,
                }}>
                  <i className="ri-sparkling-fill" style={{ fontSize: 12 }}></i> Kết quả mẫu
                </span>
                <span style={{ fontSize: 11, color: 'var(--text-support)', fontFamily: 'var(--font-display)' }}>An · 12/03/1995</span>
              </div>

              {/* Big number */}
              <div style={{
                position: 'relative',
                aspectRatio: '1.4 / 1',
                background: 'linear-gradient(135deg, var(--hero-card-grad-from) 0%, var(--hero-card-grad-to) 100%)',
                borderRadius: 12,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
                border: '1px solid var(--primary-95)',
              }}>
                <GridPattern size={200} opacity={0.08} color={SN} style={{ position: 'absolute', right: -20, bottom: -20 }} />
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 900,
                  fontSize: mobile ? 140 : 168, lineHeight: 0.9,
                  color: SN, letterSpacing: '-0.05em',
                  textShadow: '0 4px 24px rgba(30,56,136,0.12)',
                  fontVariantNumeric: 'tabular-nums',
                }}>
                  {heroNum}
                </div>
                <span style={{
                  position: 'absolute', top: 14, left: 14,
                  fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: SN, opacity: 0.6,
                }}>Con số chủ đạo</span>
              </div>

              {/* Trait chips */}
              <div style={{ marginTop: 16 }}>
                <div style={{ fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-display)', color: 'var(--text-default)' }}>
                  Người tìm tòi · phân tích · trầm tĩnh
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
                  {['Trí tuệ', 'Độc lập', 'Trực giác', 'Cầu toàn'].map(t => (
                    <span key={t} style={{
                      fontSize: 11, padding: '4px 10px',
                      background: 'var(--bg-variant)', color: 'var(--text-support)',
                      borderRadius: 50, border: '1px solid var(--border-default)',
                    }}>{t}</span>
                  ))}
                </div>
              </div>

              {/* Mini chart */}
              <div style={{ marginTop: 16, padding: 12, background: 'var(--bg-variant)', borderRadius: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <span style={{ fontSize: 10, color: 'var(--text-support)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Năm cá nhân 2026</span>
                  <span style={{ fontSize: 11, color: SG, fontWeight: 600 }}>Năm tự nhìn lại</span>
                </div>
                <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end', height: 36 }}>
                  {[40, 55, 48, 70, 65, 88, 92, 78, 60, 52, 58, 50].map((h, i) => (
                    <div key={i} style={{
                      flex: 1, height: `${h}%`,
                      background: i === 6 ? SG : 'var(--bar-bg)',
                      borderRadius: 2,
                    }} />
                  ))}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 9, color: 'var(--text-support)' }}>
                  <span>T1</span><span>T7</span><span>T12</span>
                </div>
              </div>
            </div>

            {/* Floating callout */}
            {!mobile && (
              <div style={{
                position: 'absolute', bottom: -20, left: -28,
                background: 'var(--bg)', borderRadius: 12, padding: '10px 14px',
                boxShadow: '0 12px 24px -6px rgba(16,24,40,0.12)',
                border: '1px solid var(--border-default)',
                display: 'flex', alignItems: 'center', gap: 10,
                transform: 'rotate(2deg)',
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%', background: SG,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#fff',
                }}>7</div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-default)' }}>Phân tích hoàn tất</div>
                  <div style={{ fontSize: 10, color: 'var(--text-support)' }}>28 giây · 3 chỉ số</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION: BẠN SẼ BIẾT GÌ? — 3 cards
// ─────────────────────────────────────────────────────────────
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: 'linear-gradient(135deg,#FFDAD6,#FF897D)', 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: 'linear-gradient(135deg,#C5FFCA,#14C560)', 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: 'linear-gradient(135deg,#BDEAF4,#6C98A1)', 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ố.</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%', background: q.avatar,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#fff',
                }}>{q.initial}</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 }) {
  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>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <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>
            </div>
            <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' },
                { ic: 'ri-tiktok-fill', label: 'TikTok' },
                { ic: 'ri-instagram-fill', label: 'Instagram' },
              ].map(s => (
                <a key={s.ic} href="#" 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: ['Bạn sẽ biết gì', 'Cách hoạt động', 'Câu hỏi thường gặp', 'Phương pháp Pythagorean'] },
            { title: 'Saladin', links: ['Về Saladin', 'Bảo hiểm xe máy', 'Bảo hiểm sức khoẻ', 'Bảo hiểm du lịch'] },
            { title: 'Pháp lý', links: ['Chính sách bảo mật', 'Điều khoản sử dụng', 'Liên hệ', '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}><a href="#" style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', textDecoration: 'none' }}>{l}</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 });