// Direction 1: Editorial Celestial
// Magazine-style. Big serif. Asymmetric. Sparse constellation. Premium & quiet.

const D1_BG = '#0A0E27';
const D1_GOLD = '#D4A574';
const D1_IVORY = '#F8F4E3';
const D1_LAV = '#B8A8D9';
const D1_NAVY = '#0F1B3D';

const D1_Header = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 10,
    padding: '20px 56px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: 'rgba(10,14,39,0.6)',
    backdropFilter: 'blur(20px)',
    borderBottom: '1px solid rgba(212,165,116,0.12)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="11" r="9" stroke={D1_GOLD} strokeWidth="0.8"/>
        <circle cx="11" cy="11" r="4" fill={D1_GOLD} fillOpacity="0.2"/>
        <circle cx="11" cy="11" r="1.5" fill={D1_GOLD}/>
      </svg>
      <span style={{ fontFamily: 'Fraunces, serif', fontSize: 19, fontWeight: 500, color: D1_IVORY, letterSpacing: -0.2 }}>
        Soi<span style={{ fontStyle: 'italic', color: D1_GOLD }}>Tarot</span>
      </span>
    </div>
    <nav style={{ display: 'flex', gap: 36, fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(248,244,227,0.75)' }}>
      <a style={{ color: 'inherit' }}>Tarot</a>
      <a style={{ color: 'inherit' }}>Thần số học</a>
      <a style={{ color: 'inherit' }}>Chiêm tinh</a>
      <a style={{ color: 'inherit' }}>Bài viết</a>
    </nav>
    <button style={{
      fontFamily: 'Inter, sans-serif', fontSize: 13, color: D1_BG, fontWeight: 600,
      background: D1_GOLD, border: 'none', padding: '10px 18px', borderRadius: 999,
      letterSpacing: 0.2, cursor: 'pointer',
    }}>Rút bài ngay →</button>
  </header>
);

const D1_Hero = () => (
  <section style={{ position: 'relative', padding: '96px 56px 120px', overflow: 'hidden' }}>
    <Starfield density={70}/>
    {/* Decorative circle */}
    <div style={{
      position: 'absolute', right: -180, top: -120, width: 540, height: 540, borderRadius: '50%',
      border: `0.5px solid rgba(212,165,116,0.18)`, pointerEvents: 'none',
    }}/>
    <div style={{
      position: 'absolute', right: -80, top: -20, width: 360, height: 360, borderRadius: '50%',
      border: `0.5px dashed rgba(184,168,217,0.18)`, pointerEvents: 'none',
    }}/>

    {/* Top meta row */}
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 2.5,
      color: 'rgba(248,244,227,0.55)', textTransform: 'uppercase',
      marginBottom: 64,
    }}>
      <span>EST · 2026 · HÀ NỘI</span>
      <span>NO. 001 — TÂN NGUYỆT</span>
    </div>

    {/* The big editorial headline */}
    <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 64, alignItems: 'end', position: 'relative', zIndex: 2 }}>
      <div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 3,
          color: D1_GOLD, marginBottom: 20, textTransform: 'uppercase',
        }}>— Self-discovery qua 78 lá bài</div>
        <h1 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 300,
          fontSize: 124, lineHeight: 0.92, letterSpacing: -3.5,
          color: D1_IVORY, margin: 0,
        }}>
          Soi mình<br/>
          <span style={{ fontStyle: 'italic', color: D1_GOLD, fontWeight: 300 }}>qua những</span><br/>
          lá bài.
        </h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 48 }}>
          <button style={{
            background: D1_GOLD, color: D1_BG, border: 'none', padding: '16px 28px',
            borderRadius: 999, fontFamily: 'Inter, sans-serif', fontSize: 14.5, fontWeight: 600,
            letterSpacing: 0.2, cursor: 'pointer',
          }}>Rút một lá bài →</button>
          <button style={{
            background: 'transparent', color: D1_IVORY, border: `1px solid rgba(248,244,227,0.3)`,
            padding: '15px 26px', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontSize: 14.5,
            fontWeight: 500, cursor: 'pointer',
          }}>Soi cung của bạn</button>
        </div>
      </div>

      {/* Floating card on right */}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'flex-end', paddingBottom: 20 }}>
        <div style={{ position: 'relative' }}>
          <TarotCard kind="star" name="Ngôi Sao" roman="XVII" width={200} glow rotate={4}/>
          <div style={{
            position: 'absolute', bottom: -34, left: -16, right: -16,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2,
            color: 'rgba(248,244,227,0.5)', textAlign: 'center',
          }}>↑ LÁ BÀI CỦA HÔM NAY</div>
        </div>
      </div>
    </div>

    {/* Bottom intro paragraph */}
    <div style={{
      marginTop: 96, maxWidth: 520,
      fontFamily: 'Fraunces, serif', fontSize: 19, lineHeight: 1.55,
      color: 'rgba(248,244,227,0.75)', fontWeight: 300,
    }}>
      Mình không tin vào bói toán. <span style={{ color: D1_IVORY }}>Mình tin rằng 78 lá bài là 78 chiếc gương</span> — và bạn xứng đáng có một chỗ tĩnh lặng để nhìn thấy chính mình.
    </div>
  </section>
);

const D1_DrawCTA = () => (
  <section style={{
    margin: '0 56px', padding: '64px 56px',
    border: `0.5px solid rgba(212,165,116,0.25)`,
    borderRadius: 28, position: 'relative', overflow: 'hidden',
    background: 'linear-gradient(135deg, rgba(15,27,61,0.6), rgba(10,14,39,0.4))',
  }}>
    <DotGrid color="rgba(212,165,116,0.05)" size={28} dot={0.8}/>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 80, alignItems: 'center', position: 'relative' }}>
      <div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 3, color: D1_GOLD, marginBottom: 16 }}>
          / RÚT BÀI TRỰC TUYẾN
        </div>
        <h2 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 56, lineHeight: 1.02,
          color: D1_IVORY, margin: 0, letterSpacing: -1.5,
        }}>
          Có chuyện gì đang trong đầu?<br/>
          <span style={{ fontStyle: 'italic', color: D1_GOLD }}>Hỏi bộ bài một câu.</span>
        </h2>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
          color: 'rgba(248,244,227,0.65)', marginTop: 24, maxWidth: 480,
        }}>
          Chọn 1 lá, 3 lá hoặc trải bài chữ thập. Mình kể bạn nghe — không phán xét, không doạ nạt.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          {['1 lá · Hôm nay', '3 lá · Quá khứ · Hiện tại · Tương lai', 'Chữ thập · Câu hỏi cụ thể'].map((t, i) => (
            <div key={i} style={{
              padding: '10px 16px', borderRadius: 999, fontSize: 12.5,
              fontFamily: 'Inter, sans-serif', color: i === 0 ? D1_BG : 'rgba(248,244,227,0.85)',
              background: i === 0 ? D1_GOLD : 'transparent',
              border: i === 0 ? 'none' : `1px solid rgba(248,244,227,0.18)`,
              cursor: 'pointer',
            }}>{t}</div>
          ))}
        </div>
      </div>

      {/* Three card backs fanned */}
      <div style={{ position: 'relative', width: 280, height: 280, display: 'flex', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', left: 0, top: 14 }}>
          <TarotCard back width={150} rotate={-12}/>
        </div>
        <div style={{ position: 'absolute', left: 60, top: 0 }}>
          <TarotCard back width={150} rotate={0} glow/>
        </div>
        <div style={{ position: 'absolute', left: 120, top: 14 }}>
          <TarotCard back width={150} rotate={12}/>
        </div>
      </div>
    </div>
  </section>
);

const D1_Pillars = () => {
  const pillars = [
    { roman: 'I', label: 'Tarot', body: '78 lá bài, mỗi lá một câu chuyện. Bộ chính 22 lá, bộ phụ 56 lá — tra cứu sạch, dễ đọc.', n: 'fool' },
    { roman: 'II', label: 'Thần số học', body: 'Tính con số chủ đạo từ ngày sinh. Hiểu vì sao bạn cứ lặp lại một kiểu pattern.', n: 'wheel' },
    { roman: 'III', label: 'Chiêm tinh', body: '12 cung hoàng đạo qua góc nhìn hiện đại — không tử vi, chỉ archetype.', n: 'sun' },
  ];
  return (
    <section style={{ padding: '120px 56px 80px' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 64, borderBottom: `0.5px solid rgba(212,165,116,0.18)`, paddingBottom: 24,
      }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 3, color: D1_GOLD, marginBottom: 12 }}>
            — BA TRỤ
          </div>
          <h2 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 64,
            color: D1_IVORY, margin: 0, letterSpacing: -1.5, lineHeight: 1,
          }}>Ba <span style={{ fontStyle: 'italic', color: D1_GOLD }}>cánh cửa</span> để soi mình.</h2>
        </div>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 2, color: 'rgba(248,244,227,0.4)' }}>03 / 03</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
        {pillars.map((p) => (
          <div key={p.label} style={{ position: 'relative', paddingTop: 28 }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 0.5, background: 'rgba(212,165,116,0.3)' }}/>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 3,
              color: D1_GOLD, marginBottom: 24,
            }}>{p.roman} ──</div>
            <div style={{ marginBottom: 28 }}>
              <CardSymbol kind={p.n} color={D1_LAV} size={48}/>
            </div>
            <h3 style={{
              fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: 34,
              color: D1_IVORY, margin: 0, letterSpacing: -0.6,
            }}>{p.label}</h3>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.65,
              color: 'rgba(248,244,227,0.6)', marginTop: 16, marginBottom: 24,
            }}>{p.body}</p>
            <span style={{
              fontFamily: 'Inter, sans-serif', fontSize: 13, color: D1_GOLD,
              borderBottom: `0.5px solid ${D1_GOLD}`, paddingBottom: 2,
            }}>Khám phá →</span>
          </div>
        ))}
      </div>
    </section>
  );
};

const D1_CardGrid = () => {
  const cards = [
    { kind: 'fool', name: 'Gã Khờ', roman: '0', kw: 'khởi đầu' },
    { kind: 'magician', name: 'Pháp Sư', roman: 'I', kw: 'sáng tạo' },
    { kind: 'priestess', name: 'Nữ Tư Tế', roman: 'II', kw: 'trực giác' },
    { kind: 'empress', name: 'Hoàng Hậu', roman: 'III', kw: 'nuôi dưỡng' },
    { kind: 'lovers', name: 'Người Yêu', roman: 'VI', kw: 'lựa chọn' },
    { kind: 'wheel', name: 'Bánh Xe', roman: 'X', kw: 'vận mệnh' },
    { kind: 'death', name: 'Tử Thần', roman: 'XIII', kw: 'chuyển hoá' },
    { kind: 'tower', name: 'Toà Tháp', roman: 'XVI', kw: 'tan vỡ' },
    { kind: 'star', name: 'Ngôi Sao', roman: 'XVII', kw: 'hy vọng' },
    { kind: 'moon', name: 'Mặt Trăng', roman: 'XVIII', kw: 'mơ hồ' },
    { kind: 'sun', name: 'Mặt Trời', roman: 'XIX', kw: 'rạng rỡ' },
    { kind: 'world', name: 'Thế Giới', roman: 'XXI', kw: 'trọn vẹn' },
  ];
  return (
    <section style={{ padding: '80px 56px 120px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
        <h2 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 56,
          color: D1_IVORY, margin: 0, letterSpacing: -1.4, lineHeight: 1,
        }}>Bộ Ẩn Chính<br/><span style={{ fontStyle: 'italic', color: D1_GOLD, fontSize: 40 }}>— 22 chiếc gương</span></h2>
        <a style={{
          fontFamily: 'Inter, sans-serif', fontSize: 13, color: D1_IVORY,
          borderBottom: `0.5px solid rgba(248,244,227,0.4)`, paddingBottom: 2,
        }}>Xem cả 78 lá →</a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 24 }}>
        {cards.map((c, i) => (
          <div key={c.name} style={{ position: 'relative' }}>
            <TarotCard kind={c.kind} name={c.name} roman={c.roman} width={170} variant={i === 2 ? 'ivory' : 'navy'} glow={i === 2}/>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2,
              color: 'rgba(248,244,227,0.5)', marginTop: 14, textAlign: 'center',
              textTransform: 'uppercase',
            }}>{c.kw}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const D1_QuoteCTA = () => (
  <section style={{
    padding: '140px 56px', position: 'relative', overflow: 'hidden',
    borderTop: `0.5px solid rgba(212,165,116,0.18)`,
  }}>
    <Starfield density={40}/>
    <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
      <div style={{ fontFamily: 'Fraunces, serif', fontSize: 60, color: D1_GOLD, opacity: 0.4, lineHeight: 1, marginBottom: 8 }}>“</div>
      <p style={{
        fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 44, lineHeight: 1.2,
        color: D1_IVORY, margin: 0, letterSpacing: -0.8, fontStyle: 'italic',
      }}>
        Bạn không cần ai đó nói cho bạn nghe câu trả lời. Bạn chỉ cần một chỗ <span style={{ color: D1_GOLD }}>đủ tĩnh</span> để nghe chính mình.
      </p>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 3,
        color: 'rgba(248,244,227,0.45)', marginTop: 36, textTransform: 'uppercase',
      }}>— SOI MÌNH QUA NHỮNG LÁ BÀI</div>
      <button style={{
        marginTop: 48, background: D1_GOLD, color: D1_BG, border: 'none', padding: '18px 36px',
        borderRadius: 999, fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
        letterSpacing: 0.2, cursor: 'pointer',
      }}>Bắt đầu rút bài →</button>
    </div>
  </section>
);

const D1_Footer = () => (
  <footer style={{
    padding: '56px 56px 40px', borderTop: `0.5px solid rgba(212,165,116,0.18)`,
  }}>
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
            <circle cx="11" cy="11" r="9" stroke={D1_GOLD} strokeWidth="0.8"/>
            <circle cx="11" cy="11" r="1.5" fill={D1_GOLD}/>
          </svg>
          <span style={{ fontFamily: 'Fraunces, serif', fontSize: 17, color: D1_IVORY }}>
            Soi<span style={{ fontStyle: 'italic', color: D1_GOLD }}>Tarot</span>
          </span>
        </div>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(248,244,227,0.5)', lineHeight: 1.6, maxWidth: 340, margin: 0 }}>
          Self-discovery qua tarot. Soi mình qua những lá bài. Made with ✦ in Hà Nội.
        </p>
      </div>
      {[
        ['Khám phá', ['Tarot', 'Thần số học', 'Chiêm tinh', 'Rút bài online']],
        ['Tài nguyên', ['Bộ Ẩn Chính', 'Bộ Ẩn Phụ', 'Spread phổ biến', 'Bài viết']],
        ['Khác', ['Về SoiTarot', 'Liên hệ', 'Chính sách', 'Disclaimer']],
      ].map(([t, items]) => (
        <div key={t}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2.5, color: D1_GOLD, marginBottom: 18, textTransform: 'uppercase' }}>{t}</div>
          {items.map((x) => (
            <div key={x} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(248,244,227,0.65)', marginBottom: 10 }}>{x}</div>
          ))}
        </div>
      ))}
    </div>
    <div style={{
      padding: 20, border: `0.5px solid rgba(212,165,116,0.2)`, borderRadius: 12,
      fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(248,244,227,0.55)', lineHeight: 1.6,
    }}>
      <strong style={{ color: D1_GOLD, fontWeight: 600 }}>Disclaimer.</strong> 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ụ để bạn soi chiếu bản thân — quyết định cuối cùng luôn là của bạn.
    </div>
    <div style={{
      marginTop: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, letterSpacing: 2,
      color: 'rgba(248,244,227,0.35)', display: 'flex', justifyContent: 'space-between',
    }}>
      <span>© 2026 SOITAROT.VN</span>
      <span>BUILT WITH ✦ FOR GEN Z VIỆT NAM</span>
    </div>
  </footer>
);

const Direction1 = () => (
  <div style={{ background: D1_BG, color: D1_IVORY, minHeight: '100%', fontFamily: 'Inter, sans-serif' }}>
    <D1_Header/>
    <D1_Hero/>
    <D1_DrawCTA/>
    <D1_Pillars/>
    <D1_CardGrid/>
    <D1_QuoteCTA/>
    <D1_Footer/>
  </div>
);

window.Direction1 = Direction1;