// Direction 3: Modern Mystic Grid
// Swiss-influenced grid. Dot pattern dominant. Mono labels.
// Numbered sections. Brutalist-tinted elegance. Lavender plays a bigger role here.

const D3_BG = '#0F1B3D';      // navy as base instead of void — different feel
const D3_VOID = '#0A0E27';
const D3_GOLD = '#D4A574';
const D3_IVORY = '#F8F4E3';
const D3_LAV = '#B8A8D9';

const monoLabel = {
  fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, letterSpacing: 2.5,
  textTransform: 'uppercase',
};

const D3_Header = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 10,
    padding: '14px 32px',
    display: 'grid', gridTemplateColumns: '180px 1fr auto', alignItems: 'center', gap: 32,
    background: 'rgba(15,27,61,0.7)', backdropFilter: 'blur(20px)',
    borderBottom: `1px solid rgba(248,244,227,0.1)`,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{ width: 22, height: 1, background: D3_GOLD }}/>
        <div style={{ width: 16, height: 1, background: D3_GOLD, opacity: 0.6 }}/>
        <div style={{ width: 10, height: 1, background: D3_GOLD, opacity: 0.3 }}/>
      </div>
      <span style={{ fontFamily: 'Fraunces, serif', fontSize: 18, fontWeight: 600, color: D3_IVORY, letterSpacing: -0.3 }}>
        SOITAROT
      </span>
    </div>
    <nav style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
      {[['01', 'Tarot'], ['02', 'Numerology'], ['03', 'Astro'], ['04', 'Bài viết']].map(([n, t]) => (
        <a key={n} style={{
          display: 'flex', alignItems: 'baseline', gap: 6, padding: '6px 12px',
          fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(248,244,227,0.85)',
        }}>
          <span style={{ ...monoLabel, fontSize: 9, color: D3_GOLD }}>{n}</span>
          {t}
        </a>
      ))}
    </nav>
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <span style={{ ...monoLabel, color: D3_LAV }}>◐ VN · GMT+7</span>
      <button style={{
        background: 'transparent', color: D3_IVORY, border: `1px solid ${D3_GOLD}`,
        padding: '8px 16px', fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500,
        cursor: 'pointer', borderRadius: 0,
      }}>RÚT BÀI →</button>
    </div>
  </header>
);

const D3_Hero = () => (
  <section style={{ position: 'relative', padding: '0', overflow: 'hidden' }}>
    <DotGrid color="rgba(248,244,227,0.05)" size={28} dot={1}/>
    {/* 12-column grid overlay illustration on the left side */}
    <div style={{
      position: 'absolute', left: 0, top: 0, bottom: 0, width: '50%',
      backgroundImage: `linear-gradient(90deg, rgba(212,165,116,0.04) 1px, transparent 1px)`,
      backgroundSize: 'calc(100% / 6) 100%',
      pointerEvents: 'none',
    }}/>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 720 }}>
      {/* Left content */}
      <div style={{ padding: '80px 32px 80px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', borderRight: `1px solid rgba(248,244,227,0.08)` }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 40 }}>
            <span style={{ ...monoLabel, color: D3_GOLD }}>// HỆ THỐNG / 001 / TÂN NGUYỆT</span>
            <div style={{ flex: 1, height: 1, background: 'rgba(212,165,116,0.3)' }}/>
          </div>

          <h1 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: 108, lineHeight: 0.94,
            color: D3_IVORY, margin: 0, letterSpacing: -3.5,
          }}>
            Soi mình
          </h1>
          <h1 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 108, lineHeight: 0.94,
            color: D3_GOLD, margin: 0, letterSpacing: -3.5, fontStyle: 'italic',
            paddingLeft: 80,
          }}>
            qua những
          </h1>
          <h1 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: 108, lineHeight: 0.94,
            color: D3_LAV, margin: 0, letterSpacing: -3.5,
            paddingLeft: 160,
          }}>
            lá bài
          </h1>

          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6,
            color: 'rgba(248,244,227,0.7)', maxWidth: 440, marginTop: 48, marginBottom: 0,
          }}>
            Không phải bói toán. Không phải mê tín. Một hệ thống <strong style={{ color: D3_IVORY, fontWeight: 600 }}>78 archetype</strong> để bạn nhìn rõ chính mình — qua góc nhìn của Gen Z.
          </p>
        </div>

        {/* Bottom indices */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 64, paddingTop: 32, borderTop: `1px solid rgba(248,244,227,0.08)` }}>
          {[
            ['01', 'TAROT', '78 lá'],
            ['02', 'NUMEROLOGY', '9 số'],
            ['03', 'ASTROLOGY', '12 cung'],
          ].map(([n, t, c]) => (
            <div key={n}>
              <div style={{ ...monoLabel, color: D3_GOLD, marginBottom: 6 }}>{n}</div>
              <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, color: D3_IVORY }}>{t}</div>
              <div style={{ ...monoLabel, color: 'rgba(248,244,227,0.45)', fontSize: 9.5, marginTop: 4 }}>{c}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Right card display */}
      <div style={{ position: 'relative', overflow: 'hidden', background: 'rgba(10,14,39,0.5)' }}>
        <Starfield density={60}/>

        {/* Card centered with measurement marks */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ position: 'relative' }}>
            {/* crosshair */}
            <div style={{ position: 'absolute', left: '50%', top: -40, bottom: -40, width: 1, background: 'rgba(212,165,116,0.2)' }}/>
            <div style={{ position: 'absolute', top: '50%', left: -40, right: -40, height: 1, background: 'rgba(212,165,116,0.2)' }}/>
            <TarotCard kind="star" name="Ngôi Sao" roman="XVII" width={240} glow/>
            {/* measurement labels */}
            <div style={{
              position: 'absolute', top: -28, left: 0, right: 0, ...monoLabel,
              fontSize: 9, color: D3_GOLD, display: 'flex', justifyContent: 'space-between',
            }}>
              <span>↔ 240</span>
              <span>XVII / 22</span>
            </div>
            <div style={{
              position: 'absolute', bottom: -28, left: 0, right: 0, ...monoLabel,
              fontSize: 9, color: 'rgba(248,244,227,0.5)', textAlign: 'center',
            }}>↑ LÁ BÀI CỦA HÔM NAY · 26.05.2026</div>
          </div>
        </div>

        {/* Corner labels */}
        <div style={{ position: 'absolute', top: 32, left: 32, ...monoLabel, color: 'rgba(248,244,227,0.5)' }}>
          ◇ N
        </div>
        <div style={{ position: 'absolute', top: 32, right: 32, ...monoLabel, color: 'rgba(248,244,227,0.5)' }}>
          PG. 001
        </div>
        <div style={{ position: 'absolute', bottom: 32, left: 32, ...monoLabel, color: 'rgba(248,244,227,0.5)' }}>
          MAJOR ARCANA / STAR
        </div>
        <div style={{ position: 'absolute', bottom: 32, right: 32, ...monoLabel, color: 'rgba(248,244,227,0.5)' }}>
          → READ FULL
        </div>
      </div>
    </div>

    {/* Bottom action band */}
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto auto',
      borderTop: `1px solid rgba(248,244,227,0.1)`,
      borderBottom: `1px solid rgba(248,244,227,0.1)`,
    }}>
      <div style={{ padding: '28px 56px', display: 'flex', alignItems: 'center', gap: 16 }}>
        <span style={{ ...monoLabel, color: D3_GOLD }}>NEXT ↓</span>
        <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(248,244,227,0.75)' }}>Rút bài online · Không đăng ký · Miễn phí</span>
      </div>
      <button style={{
        padding: '28px 36px', background: 'transparent', color: D3_IVORY,
        border: 'none', borderLeft: `1px solid rgba(248,244,227,0.1)`,
        fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, cursor: 'pointer',
        textAlign: 'left',
      }}>Soi cung của bạn →</button>
      <button style={{
        padding: '28px 36px', background: D3_GOLD, color: D3_VOID,
        border: 'none', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 700, cursor: 'pointer',
        textAlign: 'left', minWidth: 220,
      }}>RÚT MỘT LÁ BÀI →</button>
    </div>
  </section>
);

// Big number section header
const D3_SectionHead = ({ n, total, label, title, subtitle }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 200px', gap: 32, alignItems: 'flex-end', padding: '0 56px', marginBottom: 56 }}>
    <div style={{
      fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 100,
      color: D3_GOLD, lineHeight: 0.9, letterSpacing: -3,
    }}>{n}</div>
    <div>
      <div style={{ ...monoLabel, color: D3_LAV, marginBottom: 12 }}>{label}</div>
      <h2 style={{
        fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 56, lineHeight: 1,
        color: D3_IVORY, margin: 0, letterSpacing: -1.5,
      }}>{title}</h2>
    </div>
    <div style={{ textAlign: 'right' }}>
      <div style={{ ...monoLabel, color: 'rgba(248,244,227,0.45)' }}>SECTION · {n} / {total}</div>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(248,244,227,0.7)', marginTop: 8 }}>{subtitle}</div>
    </div>
  </div>
);

const D3_DrawSection = () => (
  <section style={{ padding: '100px 0 80px', position: 'relative' }}>
    <DotGrid color="rgba(248,244,227,0.04)" size={32}/>
    <D3_SectionHead n="01" total="04" label="// RÚT BÀI ONLINE" title="Hỏi bộ bài một câu." subtitle="Chọn spread — chọn câu hỏi — rút."/>

    <div style={{ padding: '0 56px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
      {/* Left: card backs in a grid */}
      <div style={{ position: 'relative', height: 380 }}>
        <div style={{
          position: 'absolute', inset: 0,
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridTemplateRows: 'repeat(2, 1fr)', gap: 10,
          padding: 8,
          border: `1px solid rgba(212,165,116,0.2)`,
        }}>
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transform: i === 4 ? 'translateY(-8px)' : '',
            }}>
              <TarotCard back width={80} glow={i === 4}/>
            </div>
          ))}
        </div>
        <div style={{
          position: 'absolute', top: -28, left: 0, right: 0, ...monoLabel, color: D3_GOLD,
          display: 'flex', justifyContent: 'space-between',
        }}>
          <span>BỘ BÀI · 78/78</span>
          <span>↓ TAP A CARD</span>
        </div>
      </div>

      {/* Right: spread picker */}
      <div>
        <div style={{ ...monoLabel, color: D3_GOLD, marginBottom: 24 }}>CHỌN KIỂU TRẢI</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {[
            ['01', 'Một lá', 'Hôm nay sẽ thế nào?', true],
            ['02', 'Ba lá', 'Quá khứ · Hiện tại · Tương lai', false],
            ['03', 'Chữ thập', 'Khi câu hỏi đã rõ ràng (5 lá)', false],
            ['04', 'Tình yêu', 'Hai phía một câu chuyện (6 lá)', false],
          ].map(([n, t, sub, active]) => (
            <div key={n} style={{
              display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 16,
              padding: '18px 16px', alignItems: 'center',
              borderTop: `1px solid rgba(248,244,227,0.1)`,
              borderBottom: n === '04' ? `1px solid rgba(248,244,227,0.1)` : 'none',
              background: active ? 'rgba(212,165,116,0.08)' : 'transparent',
              cursor: 'pointer',
            }}>
              <div style={{ ...monoLabel, color: active ? D3_GOLD : 'rgba(248,244,227,0.45)' }}>{n}</div>
              <div>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, color: D3_IVORY, marginBottom: 2 }}>{t}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: 'rgba(248,244,227,0.55)' }}>{sub}</div>
              </div>
              <div style={{ ...monoLabel, color: active ? D3_GOLD : 'rgba(248,244,227,0.4)' }}>
                {active ? '● ACTIVE' : '○'}
              </div>
            </div>
          ))}
        </div>
        <button style={{
          marginTop: 28, padding: '16px 28px', background: D3_GOLD, color: D3_VOID,
          border: 'none', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 700,
          letterSpacing: 0.3, cursor: 'pointer', width: '100%', borderRadius: 0,
        }}>BẮT ĐẦU TRẢI BÀI →</button>
      </div>
    </div>
  </section>
);

const D3_Pillars = () => {
  const pillars = [
    { tag: 'TAROT', n: '01', kind: 'priestess', title: 'Đọc 78 lá như đọc bản đồ', body: '22 lá Ẩn Chính + 56 lá Ẩn Phụ. Mỗi lá một archetype.', kw: ['archetype', 'symbol', 'mirror'] },
    { tag: 'NUMEROLOGY', n: '02', kind: 'wheel', title: 'Con số chủ đạo từ ngày sinh', body: 'Pythagorean — số 1 đến 9 + master numbers 11/22/33.', kw: ['life path', 'destiny', 'pattern'] },
    { tag: 'ASTRO', n: '03', kind: 'sun', title: '12 cung qua góc nhìn hiện đại', body: 'Sun · Moon · Rising. Không tử vi — chỉ archetype.', kw: ['12 signs', 'big three', 'modern'] },
  ];
  return (
    <section style={{ padding: '80px 0 80px' }}>
      <D3_SectionHead n="02" total="04" label="// HỆ THỐNG" title="Ba trụ. Một mục tiêu." subtitle="Mỗi trụ là một góc nhìn khác để soi cùng một bạn."/>
      <div style={{ padding: '0 56px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: `1px solid rgba(212,165,116,0.3)`, borderBottom: `1px solid rgba(212,165,116,0.3)` }}>
        {pillars.map((p, i) => (
          <div key={p.tag} style={{
            padding: '40px 32px', borderLeft: i > 0 ? `1px solid rgba(248,244,227,0.1)` : 'none',
            position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 36 }}>
              <span style={{ ...monoLabel, color: D3_GOLD }}>/ {p.n} · {p.tag}</span>
              <span style={{ ...monoLabel, color: 'rgba(248,244,227,0.4)' }}>↗</span>
            </div>
            <div style={{ marginBottom: 32 }}>
              <CardSymbol kind={p.kind} color={i === 0 ? D3_GOLD : i === 1 ? D3_LAV : D3_IVORY} size={56}/>
            </div>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: 28, color: D3_IVORY, margin: 0, letterSpacing: -0.5, lineHeight: 1.15 }}>{p.title}</h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(248,244,227,0.6)', lineHeight: 1.65, marginTop: 16, marginBottom: 24 }}>{p.body}</p>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 24 }}>
              {p.kw.map((k) => (
                <span key={k} style={{
                  ...monoLabel, padding: '4px 10px', border: `1px solid rgba(248,244,227,0.18)`,
                  color: 'rgba(248,244,227,0.7)',
                }}>{k}</span>
              ))}
            </div>
            <a style={{ ...monoLabel, color: D3_GOLD, borderBottom: `1px solid ${D3_GOLD}`, paddingBottom: 2 }}>KHÁM PHÁ {p.tag} →</a>
          </div>
        ))}
      </div>
    </section>
  );
};

const D3_CardIndex = () => {
  const cards = [
    { kind: 'fool', name: 'Gã Khờ', roman: '0' },
    { kind: 'magician', name: 'Pháp Sư', roman: 'I' },
    { kind: 'priestess', name: 'Nữ Tư Tế', roman: 'II' },
    { kind: 'empress', name: 'Hoàng Hậu', roman: 'III' },
    { kind: 'lovers', name: 'Người Yêu', roman: 'VI' },
    { kind: 'wheel', name: 'Bánh Xe', roman: 'X' },
    { kind: 'death', name: 'Tử Thần', roman: 'XIII' },
    { kind: 'tower', name: 'Toà Tháp', roman: 'XVI' },
    { kind: 'star', name: 'Ngôi Sao', roman: 'XVII' },
    { kind: 'moon', name: 'Mặt Trăng', roman: 'XVIII' },
    { kind: 'sun', name: 'Mặt Trời', roman: 'XIX' },
    { kind: 'world', name: 'Thế Giới', roman: 'XXI' },
  ];
  return (
    <section style={{ padding: '80px 0 80px', background: D3_VOID, position: 'relative' }}>
      <DotGrid color="rgba(212,165,116,0.04)" size={20}/>
      <D3_SectionHead n="03" total="04" label="// BỘ ẨN CHÍNH · INDEX" title="22 chiếc gương." subtitle="0 → XXI. Tap để đọc."/>

      <div style={{ padding: '0 56px' }}>
        {/* index list */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: `1px solid rgba(248,244,227,0.1)`,
        }}>
          {cards.map((c, i) => (
            <div key={c.name} style={{
              padding: 24,
              borderRight: (i % 4 !== 3) ? `1px solid rgba(248,244,227,0.1)` : 'none',
              borderBottom: i < cards.length - 4 ? `1px solid rgba(248,244,227,0.1)` : 'none',
              display: 'grid', gridTemplateColumns: '70px 1fr 80px', gap: 16, alignItems: 'center',
              background: i === 4 ? 'rgba(212,165,116,0.08)' : 'transparent',
              cursor: 'pointer',
            }}>
              <TarotCard kind={c.kind} name={c.name} roman={c.roman} width={56}/>
              <div>
                <div style={{ ...monoLabel, color: D3_GOLD, marginBottom: 4 }}>{c.roman}</div>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 19, color: D3_IVORY, letterSpacing: -0.3 }}>{c.name}</div>
              </div>
              <div style={{ textAlign: 'right', ...monoLabel, color: 'rgba(248,244,227,0.45)' }}>→</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', ...monoLabel, color: 'rgba(248,244,227,0.5)' }}>
          <span>HIỂN THỊ 12 / 78</span>
          <a style={{ color: D3_GOLD, borderBottom: `1px solid ${D3_GOLD}`, paddingBottom: 2 }}>XEM CẢ 78 LÁ →</a>
        </div>
      </div>
    </section>
  );
};

const D3_FinalCTA = () => (
  <section style={{
    padding: '120px 56px', position: 'relative',
    borderTop: `1px solid rgba(212,165,116,0.25)`,
  }}>
    <Starfield density={40}/>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', position: 'relative' }}>
      <div>
        <div style={{ ...monoLabel, color: D3_GOLD, marginBottom: 20 }}>// 04 · LET'S BEGIN</div>
        <h2 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 80, lineHeight: 1.02,
          color: D3_IVORY, margin: 0, letterSpacing: -2.4,
        }}>
          Bộ bài đã <span style={{ fontStyle: 'italic', color: D3_GOLD }}>xáo</span>.
          <br/>Bạn rút chưa?
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: 'rgba(248,244,227,0.7)', lineHeight: 1.65, marginTop: 24, maxWidth: 440 }}>
          Một lá thôi. Hai phút. Không hứa hẹn câu trả lời — chỉ hứa một câu hỏi hay.
        </p>
        <div style={{ display: 'flex', gap: 14, marginTop: 36 }}>
          <button style={{
            padding: '16px 28px', background: D3_GOLD, color: D3_VOID,
            border: 'none', fontFamily: 'Inter, sans-serif', fontSize: 14.5, fontWeight: 700,
            cursor: 'pointer', borderRadius: 0,
          }}>RÚT BÀI NGAY →</button>
          <button style={{
            padding: '15px 26px', background: 'transparent', color: D3_IVORY,
            border: `1px solid rgba(248,244,227,0.3)`, fontFamily: 'Inter, sans-serif', fontSize: 14.5,
            cursor: 'pointer', borderRadius: 0,
          }}>SOI CUNG ↗</button>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: -60, border: `0.5px dashed rgba(212,165,116,0.3)`, borderRadius: '50%' }}/>
        <div style={{ position: 'absolute', inset: -120, border: `0.5px solid rgba(212,165,116,0.15)`, borderRadius: '50%' }}/>
        <TarotCard kind="world" name="Thế Giới" roman="XXI" width={220} glow/>
      </div>
    </div>
  </section>
);

const D3_Footer = () => (
  <footer style={{ borderTop: `1px solid rgba(248,244,227,0.1)`, padding: '0' }}>
    {/* Big tagline strip */}
    <div style={{
      padding: '48px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      borderBottom: `1px solid rgba(248,244,227,0.08)`,
    }}>
      <div style={{
        fontFamily: 'Fraunces, serif', fontSize: 40, color: D3_IVORY, fontWeight: 300, letterSpacing: -1, lineHeight: 1,
      }}>
        Soi mình <span style={{ fontStyle: 'italic', color: D3_GOLD }}>qua những lá bài.</span>
      </div>
      <span style={{ ...monoLabel, color: 'rgba(248,244,227,0.45)' }}>SOITAROT.VN · 2026</span>
    </div>

    {/* Link grid */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderBottom: `1px solid rgba(248,244,227,0.08)` }}>
      {[
        ['01 / KHÁM PHÁ', ['Tarot', 'Thần số học', 'Chiêm tinh', 'Rút bài']],
        ['02 / TÀI NGUYÊN', ['Bộ Ẩn Chính', 'Bộ Ẩn Phụ', 'Spreads', 'Glossary']],
        ['03 / SOITAROT', ['Triết lý', 'About', 'Contact']],
        ['04 / THEO DÕI', ['Instagram', 'TikTok', 'Threads']],
      ].map(([t, items], i) => (
        <div key={t} style={{ padding: '32px 32px', borderLeft: i > 0 ? `1px solid rgba(248,244,227,0.08)` : 'none' }}>
          <div style={{ ...monoLabel, color: D3_GOLD, marginBottom: 20 }}>{t}</div>
          {items.map((x) => <div key={x} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(248,244,227,0.65)', marginBottom: 10 }}>{x}</div>)}
        </div>
      ))}
    </div>

    {/* Disclaimer */}
    <div style={{
      padding: '24px 56px', display: 'grid', gridTemplateColumns: '140px 1fr', gap: 32,
      borderBottom: `1px solid rgba(248,244,227,0.08)`,
    }}>
      <div style={{ ...monoLabel, color: D3_GOLD }}>// DISCLAIMER</div>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: 'rgba(248,244,227,0.6)', lineHeight: 1.6 }}>
        Nội dung trên SoiTarot mang tính tham khảo & giải trí. Đây không phải tư vấn y tế, tài chính hay pháp lý. Tarot là công cụ để soi chiếu bản thân — quyết định cuối cùng luôn là của bạn.
      </div>
    </div>
    <div style={{
      padding: '16px 56px', display: 'flex', justifyContent: 'space-between',
      ...monoLabel, color: 'rgba(248,244,227,0.4)',
    }}>
      <span>© 2026 SOITAROT.VN</span>
      <span>MADE WITH ✦ IN HÀ NỘI · FOR GEN Z VIỆT NAM</span>
    </div>
  </footer>
);

const Direction3 = () => (
  <div style={{ background: D3_BG, color: D3_IVORY, minHeight: '100%', fontFamily: 'Inter, sans-serif' }}>
    <D3_Header/>
    <D3_Hero/>
    <D3_DrawSection/>
    <D3_Pillars/>
    <D3_CardIndex/>
    <D3_FinalCTA/>
    <D3_Footer/>
  </div>
);

window.Direction3 = Direction3;