// Direction 2: Interactive Deck
// Tương tác là trọng tâm. Deck fanned in hero, glow mạnh hơn, gradient nhẹ.
// Tone: chữ vừa phải, ưu tiên motion + tương tác.

const D2_BG = '#0A0E27';
const D2_GOLD = '#D4A574';
const D2_IVORY = '#F8F4E3';
const D2_LAV = '#B8A8D9';

const D2_Header = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 10,
    margin: '16px 24px 0', padding: '14px 24px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: 'rgba(15,27,61,0.55)', backdropFilter: 'blur(24px)',
    border: '1px solid rgba(212,165,116,0.15)', borderRadius: 999,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: `linear-gradient(135deg, ${D2_GOLD}, ${D2_LAV})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={D2_BG} strokeWidth="1.4">
          <circle cx="8" cy="8" r="5"/><circle cx="8" cy="8" r="2" fill={D2_BG}/>
        </svg>
      </div>
      <span style={{ fontFamily: 'Fraunces, serif', fontSize: 19, fontWeight: 500, color: D2_IVORY }}>
        soi<span style={{ fontStyle: 'italic', color: D2_GOLD }}>tarot</span>
      </span>
      <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5, letterSpacing: 1.5, color: 'rgba(248,244,227,0.4)', marginLeft: 6, padding: '3px 7px', border: '1px solid rgba(248,244,227,0.15)', borderRadius: 4 }}>BETA</span>
    </div>
    <nav style={{ display: 'flex', gap: 28, fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'rgba(248,244,227,0.8)' }}>
      <a>Rút bài</a>
      <a>78 lá</a>
      <a>Cung của bạn</a>
      <a>Thần số</a>
      <a>Bài viết</a>
    </nav>
    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
      <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, color: D2_LAV, letterSpacing: 1.5 }}>◐ 24°·HÀ NỘI</span>
      <button style={{
        background: D2_GOLD, color: D2_BG, border: 'none', padding: '9px 18px', borderRadius: 999,
        fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600, cursor: 'pointer',
      }}>Rút ngay</button>
    </div>
  </header>
);

// Big fanned deck hero
const D2_Hero = () => {
  const fanCards = [
    { kind: 'moon', name: 'Mặt Trăng', roman: 'XVIII', rotate: -28, x: -260, y: 60 },
    { kind: 'fool', name: 'Gã Khờ', roman: '0', rotate: -16, x: -135, y: 18 },
    { kind: 'star', name: 'Ngôi Sao', roman: 'XVII', rotate: -4, x: -25, y: -8, highlighted: true },
    { kind: 'sun', name: 'Mặt Trời', roman: 'XIX', rotate: 10, x: 100, y: 0 },
    { kind: 'magician', name: 'Pháp Sư', roman: 'I', rotate: 22, x: 220, y: 50 },
  ];
  return (
    <section style={{ position: 'relative', padding: '64px 24px 100px', overflow: 'hidden' }}>
      {/* Radial glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(circle at 50% 60%, rgba(212,165,116,0.12) 0%, transparent 50%), radial-gradient(circle at 30% 80%, rgba(184,168,217,0.08) 0%, transparent 50%)',
      }}/>
      <Starfield density={90}/>

      {/* Pill tag */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 36 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 16px', borderRadius: 999,
          border: '1px solid rgba(212,165,116,0.3)',
          background: 'rgba(212,165,116,0.06)',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.5,
          color: D2_GOLD,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: D2_GOLD, boxShadow: `0 0 8px ${D2_GOLD}` }}/>
          MIỄN PHÍ · KHÔNG CẦN ĐĂNG KÝ
        </div>
      </div>

      {/* Headline */}
      <div style={{ textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <h1 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 96, lineHeight: 1.02,
          color: D2_IVORY, margin: 0, letterSpacing: -2.6,
        }}>
          Hôm nay bộ bài muốn<br/>
          nói gì với <span style={{ fontStyle: 'italic', color: D2_GOLD }}>bạn</span>?
        </h1>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.55,
          color: 'rgba(248,244,227,0.7)', maxWidth: 560, margin: '24px auto 0',
        }}>
          Chọn một lá. Nó không cho bạn câu trả lời — nó đặt bạn một câu hỏi.
        </p>
      </div>

      {/* Fanned deck */}
      <div style={{
        position: 'relative', height: 440, margin: '64px auto 0',
        display: 'flex', justifyContent: 'center', alignItems: 'flex-start',
      }}>
        {/* Center anchor */}
        <div style={{ position: 'relative', width: 0, height: 0 }}>
          {fanCards.map((c) => (
            <div key={c.name} style={{
              position: 'absolute', left: c.x - 90, top: c.y,
              transition: 'transform .3s',
            }}>
              <TarotCard kind={c.kind} name={c.name} roman={c.roman}
                width={c.highlighted ? 200 : 180}
                rotate={c.rotate}
                glow={c.highlighted}
                variant={c.highlighted ? 'navy' : 'navy'}
                style={c.highlighted ? { boxShadow: `0 0 60px rgba(212,165,116,0.5), 0 24px 60px rgba(0,0,0,0.6)` } : {}}
              />
              {c.highlighted && (
                <div style={{
                  position: 'absolute', top: -36, left: '50%', transform: 'translateX(-50%) rotate(0deg)',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2,
                  color: D2_GOLD, whiteSpace: 'nowrap',
                }}>↓ TAP TO REVEAL ↓</div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* CTAs */}
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 48 }}>
        <button style={{
          background: D2_GOLD, color: D2_BG, border: 'none',
          padding: '16px 32px', borderRadius: 999,
          fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700,
          cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
          boxShadow: `0 0 30px rgba(212,165,116,0.35)`,
        }}>
          <span style={{
            width: 22, height: 22, borderRadius: 11, background: D2_BG,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: D2_GOLD, fontSize: 12, fontFamily: 'Fraunces, serif',
          }}>✦</span>
          Rút một lá bài
        </button>
        <button style={{
          background: 'transparent', color: D2_IVORY,
          border: '1px solid rgba(248,244,227,0.25)',
          padding: '15px 28px', borderRadius: 999,
          fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 500, cursor: 'pointer',
        }}>
          Soi cung của bạn
        </button>
      </div>

      {/* Trust row */}
      <div style={{
        marginTop: 64, display: 'flex', justifyContent: 'center', gap: 48,
        fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: 'rgba(248,244,227,0.5)',
      }}>
        {[
          ['78', 'lá bài đã việt hoá'],
          ['12', 'spread phổ biến'],
          ['24K+', 'lượt rút mỗi tháng'],
          ['0đ', 'mãi mãi miễn phí'],
        ].map(([n, l]) => (
          <div key={l} style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, color: D2_IVORY, lineHeight: 1, marginBottom: 6 }}>{n}</div>
            <div>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// Interactive draw section: spread picker
const D2_Draw = () => {
  const spreads = [
    { n: '01', title: 'Một Lá', sub: 'Hôm nay sẽ thế nào?', count: 1, big: true },
    { n: '02', title: 'Ba Lá', sub: 'Quá khứ · Hiện tại · Tương lai', count: 3 },
    { n: '03', title: 'Chữ Thập', sub: 'Khi câu hỏi đã rõ ràng', count: 5 },
    { n: '04', title: 'Tình Yêu', sub: 'Hai phía một câu chuyện', count: 6 },
  ];
  return (
    <section style={{
      margin: '0 24px', padding: '80px 56px',
      background: 'linear-gradient(135deg, rgba(212,165,116,0.06), rgba(184,168,217,0.04))',
      border: '1px solid rgba(212,165,116,0.18)', borderRadius: 32,
      position: 'relative', overflow: 'hidden',
    }}>
      <DotGrid color="rgba(212,165,116,0.06)" size={30}/>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 48, position: 'relative' }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 2.5, color: D2_GOLD, marginBottom: 12 }}>
            ◐ RÚT BÀI ONLINE
          </div>
          <h2 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 56,
            color: D2_IVORY, margin: 0, letterSpacing: -1.5, lineHeight: 1,
          }}>Chọn kiểu trải bài.</h2>
        </div>
        <a style={{
          fontFamily: 'Inter, sans-serif', fontSize: 13, color: D2_IVORY, opacity: 0.7,
        }}>Tất cả 12 kiểu →</a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, position: 'relative' }}>
        {spreads.map((s, i) => (
          <div key={s.n} style={{
            padding: '28px 24px', borderRadius: 20,
            background: i === 0 ? 'rgba(212,165,116,0.12)' : 'rgba(15,27,61,0.45)',
            border: `1px solid ${i === 0 ? 'rgba(212,165,116,0.45)' : 'rgba(248,244,227,0.08)'}`,
            backdropFilter: 'blur(8px)',
            position: 'relative', cursor: 'pointer',
            boxShadow: i === 0 ? `0 0 40px rgba(212,165,116,0.2)` : 'none',
          }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2, color: i === 0 ? D2_GOLD : 'rgba(248,244,227,0.4)', marginBottom: 24 }}>
              / {s.n}
            </div>
            {/* Mini deck preview */}
            <div style={{ height: 80, display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: 20, position: 'relative' }}>
              {Array.from({ length: s.count }).map((_, j) => (
                <div key={j} style={{
                  position: 'absolute',
                  width: 36, height: 56, borderRadius: 4,
                  border: `1px solid ${i === 0 ? D2_GOLD : 'rgba(212,165,116,0.5)'}`,
                  background: i === 0 ? 'rgba(212,165,116,0.15)' : 'rgba(15,27,61,0.8)',
                  transform: `translateX(${(j - (s.count - 1) / 2) * 14}px) rotate(${(j - (s.count - 1) / 2) * 4}deg)`,
                }}/>
              ))}
            </div>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: 24, color: D2_IVORY, margin: 0, letterSpacing: -0.4 }}>{s.title}</h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: 'rgba(248,244,227,0.6)', marginTop: 8, marginBottom: 0, lineHeight: 1.5 }}>{s.sub}</p>
            {i === 0 && (
              <div style={{
                marginTop: 20, padding: '8px 14px', borderRadius: 999, background: D2_GOLD, color: D2_BG,
                fontFamily: 'Inter, sans-serif', fontSize: 12.5, fontWeight: 600, textAlign: 'center',
              }}>Rút ngay →</div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
};

const D2_Pillars = () => {
  const pillars = [
    { tag: 'TAROT', title: 'Đọc 78 lá bài như đọc bản đồ', body: '78 lá bài chia 22 Ẩn Chính + 56 Ẩn Phụ. Mỗi lá là một archetype — không phải lời tiên tri.', kind: 'priestess', stat: '78 LÁ' },
    { tag: 'NUMEROLOGY', title: 'Con số chủ đạo từ ngày sinh', body: 'Tính theo Pythagore — số 1 đến 9 + master numbers. Hiểu vì sao bạn lặp pattern.', kind: 'wheel', stat: '9 SỐ' },
    { tag: 'ASTRO', title: '12 cung qua góc nhìn hiện đại', body: 'Sun · Moon · Rising. Không tử vi, chỉ archetype để hiểu chính mình.', kind: 'sun', stat: '12 CUNG' },
  ];
  return (
    <section style={{ padding: '120px 56px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 2.5, color: D2_GOLD, marginBottom: 14 }}>◇ BA TRỤ ◇</div>
        <h2 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 64, lineHeight: 1,
          color: D2_IVORY, margin: 0, letterSpacing: -1.6,
        }}>Ba cách <span style={{ fontStyle: 'italic', color: D2_GOLD }}>soi mình</span>.</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {pillars.map((p, i) => (
          <div key={p.tag} style={{
            padding: 36, borderRadius: 24,
            background: 'rgba(15,27,61,0.45)',
            border: '1px solid rgba(248,244,227,0.08)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%',
              background: `radial-gradient(circle, rgba(212,165,116,0.12), transparent 70%)`,
            }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2, color: D2_GOLD, padding: '5px 10px', border: `1px solid ${D2_GOLD}`, borderRadius: 4 }}>{p.tag}</div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2, color: 'rgba(248,244,227,0.45)' }}>{p.stat}</div>
            </div>
            <div style={{ marginBottom: 28, position: 'relative' }}>
              <CardSymbol kind={p.kind} color={D2_GOLD} size={64}/>
            </div>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: 28, color: D2_IVORY, margin: 0, letterSpacing: -0.6, lineHeight: 1.15 }}>{p.title}</h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(248,244,227,0.65)', lineHeight: 1.65, marginTop: 16, marginBottom: 28 }}>{p.body}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: D2_GOLD, fontFamily: 'Inter, sans-serif', fontSize: 13.5, fontWeight: 500 }}>
              Khám phá <span style={{ display: 'inline-block', width: 24, height: 1, background: D2_GOLD }}/>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const D2_CardCarousel = () => {
  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: 'star', name: 'Ngôi Sao', roman: 'XVII', kw: 'HY VỌNG' },
  ];
  return (
    <section style={{ padding: '80px 0 100px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 56px', marginBottom: 48 }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 2.5, color: D2_GOLD, marginBottom: 12 }}>◐ BỘ ẨN CHÍNH</div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 52, color: D2_IVORY, margin: 0, letterSpacing: -1.4, lineHeight: 1 }}>
            22 chiếc <span style={{ fontStyle: 'italic', color: D2_GOLD }}>gương</span>.
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          {['←', '→'].map((c) => (
            <button key={c} style={{
              width: 44, height: 44, borderRadius: 22, border: '1px solid rgba(248,244,227,0.18)',
              background: 'transparent', color: D2_IVORY, fontSize: 16, cursor: 'pointer',
            }}>{c}</button>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 24, padding: '0 56px', overflow: 'visible' }}>
        {cards.map((c, i) => (
          <div key={c.name} style={{ flex: '0 0 auto', position: 'relative' }}>
            <TarotCard kind={c.kind} name={c.name} roman={c.roman} width={180} glow={i === 2}/>
            <div style={{
              marginTop: 16, textAlign: 'center',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2, color: D2_GOLD,
            }}>{c.kw}</div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(248,244,227,0.55)',
              textAlign: 'center', marginTop: 4,
            }}>Xem chi tiết →</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const D2_FinalCTA = () => (
  <section style={{
    margin: '0 24px 24px', padding: '100px 56px',
    background: `radial-gradient(ellipse at 50% 50%, rgba(212,165,116,0.18) 0%, transparent 60%), linear-gradient(180deg, rgba(15,27,61,0.6), rgba(10,14,39,0.9))`,
    border: '1px solid rgba(212,165,116,0.25)', borderRadius: 32,
    position: 'relative', overflow: 'hidden', textAlign: 'center',
  }}>
    <Starfield density={50}/>
    <div style={{ position: 'relative' }}>
      {/* Floating big card */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
        <TarotCard kind="world" name="Thế Giới" roman="XXI" width={180} glow rotate={-3}/>
      </div>
      <h2 style={{
        fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 68, lineHeight: 1.05,
        color: D2_IVORY, margin: 0, letterSpacing: -1.8,
      }}>
        Bộ bài đã <span style={{ fontStyle: 'italic', color: D2_GOLD }}>xáo</span>.<br/>
        Sẵn sàng rút chưa?
      </h2>
      <p style={{
        fontFamily: 'Inter, sans-serif', fontSize: 17, color: 'rgba(248,244,227,0.7)',
        maxWidth: 480, margin: '24px auto 0',
      }}>
        Không cần đăng ký. Không lưu data. Chỉ bạn và bộ bài.
      </p>
      <button style={{
        marginTop: 40, background: D2_GOLD, color: D2_BG, border: 'none',
        padding: '20px 48px', borderRadius: 999,
        fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 700,
        cursor: 'pointer', boxShadow: `0 0 50px rgba(212,165,116,0.4)`,
      }}>Rút lá đầu tiên ✦</button>
    </div>
  </section>
);

const D2_Footer = () => (
  <footer style={{ padding: '40px 56px 32px' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32, paddingBottom: 32, borderBottom: '1px solid rgba(248,244,227,0.08)' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{ width: 26, height: 26, borderRadius: 7, background: `linear-gradient(135deg, ${D2_GOLD}, ${D2_LAV})` }}/>
          <span style={{ fontFamily: 'Fraunces, serif', fontSize: 18, color: D2_IVORY }}>
            soi<span style={{ fontStyle: 'italic', color: D2_GOLD }}>tarot</span>
          </span>
        </div>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(248,244,227,0.5)', maxWidth: 320, lineHeight: 1.6, margin: 0 }}>
          Self-discovery qua tarot · Cho Gen Z Việt Nam
        </p>
      </div>
      <div style={{ display: 'flex', gap: 56, fontFamily: 'Inter, sans-serif', fontSize: 13 }}>
        {[
          ['Khám phá', ['Tarot', 'Numerology', 'Astro', 'Articles']],
          ['SoiTarot', ['About', 'Contact', 'Privacy']],
          ['Theo dõi', ['Instagram', 'TikTok', 'Threads']],
        ].map(([t, items]) => (
          <div key={t}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2, color: D2_GOLD, marginBottom: 14 }}>{t}</div>
            {items.map((x) => <div key={x} style={{ color: 'rgba(248,244,227,0.65)', marginBottom: 8 }}>{x}</div>)}
          </div>
        ))}
      </div>
    </div>
    <div style={{
      padding: 16, borderRadius: 10, background: 'rgba(212,165,116,0.05)',
      border: '1px solid rgba(212,165,116,0.15)',
      fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(248,244,227,0.55)', lineHeight: 1.6,
    }}>
      ✦ <strong style={{ color: D2_GOLD }}>Disclaimer</strong> · Nội dung mang tính tham khảo & giải trí. Tarot là gương soi — không phải lời tiên tri. Quyết định cuối cùng luôn là của bạn.
    </div>
    <div style={{ marginTop: 20, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2, color: 'rgba(248,244,227,0.3)', textAlign: 'center' }}>
      © 2026 SOITAROT.VN — MADE WITH ✦ IN HÀ NỘI
    </div>
  </footer>
);

const Direction2 = () => (
  <div style={{ background: D2_BG, color: D2_IVORY, minHeight: '100%', fontFamily: 'Inter, sans-serif' }}>
    <D2_Header/>
    <D2_Hero/>
    <D2_Draw/>
    <D2_Pillars/>
    <D2_CardCarousel/>
    <D2_FinalCTA/>
    <D2_Footer/>
  </div>
);

window.Direction2 = Direction2;