/* global React, ReactDOM, Icon, SunBurst, TarotArt, CelestialDivider, Particles, useReveal, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#C6A06A",
  "ctaTone": "Plum",
  "showParticles": true,
  "heroLayout": "Arch composition",
  "showCornerBursts": true
} /*EDITMODE-END*/;

// ===== Navbar =====
function Navbar({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
  { label: "Trang chủ", href: "#hero" },
  { label: "Về Holy Dan", href: "#about" },
  { label: "Dịch vụ", href: "#services" },
  { label: "Đồng hành", href: "#process" },
  { label: "Blog", href: "#blog" },
  { label: "Liên hệ", href: "#footer" }];


  return (
    <nav className={`navbar ${scrolled ? "navbar--scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#hero" className="logo">
          <Icon.Logo className="logo-mark" style={{ color: "var(--mystic-gold)" }} />
          <span className="logo-text">Holy Dan</span>
        </a>
        <ul className="nav-links">
          {links.map((l) =>
          <li key={l.href}><a href={l.href}>{l.label}</a></li>
          )}
        </ul>
        <div className="nav-cta">
          <button className="btn btn--primary btn--sm" onClick={onBook}>Đặt lịch xem bài</button>
          <button className="menu-toggle" aria-label="Menu"><span></span></button>
        </div>
      </div>
    </nav>);

}

// ===== Hero =====
function Hero({ onBook, showCornerBursts, showParticles }) {
  const ref = useReveal();
  return (
    <section className="hero" id="hero" data-screen-label="Hero">
      {showCornerBursts &&
      <>
          <SunBurst className="corner-burst--tl" />
          <SunBurst className="corner-burst--tr" />
        </>
      }
      {showParticles && <Particles count={18} />}

      <div className="container">
        <div className="hero-grid">
          <div ref={ref} className="fade-up in">
            <div className="eyebrow eyebrow--left hero-eyebrow">
              <Icon.Star4 width="10" height="10" /> Đồng hành · Thấu hiểu · Chữa lành
            </div>
            <h1>
              Nhìn thấu vấn đề.<br />
              Lắng nghe <em>cảm xúc</em><br />thật của bạn.
            </h1>
            <p className="hero-lede">Holy Dan là không gian đồng hành dịu dàng, nơi bạn được lắng nghe và thấu hiểu. Tarot là một trong nhiều công cụ Holy Dan sử dụng để cùng bạn nhìn rõ bản chất vấn đề và mở lối cho cảm xúc bên trong.
            </p>
            <div className="hero-ctas">
              <button className="btn btn--primary" onClick={onBook}>
                Đặt lịch xem bài
              </button>
              <a className="btn btn--outline" href="#services">
                Khám phá dịch vụ
              </a>
            </div>
            <div className="trust-row">
              <div className="trust-item">
                <Icon.Shield width="18" height="18" />
                Bảo mật thông tin tuyệt đối
              </div>
              <div className="trust-item">
                <Icon.Sparkle width="14" height="14" />
                Trải bài chuẩn xác & tận tâm
              </div>
              <div className="trust-item">
                <Icon.Heart width="16" height="16" />
                Không phán xét, chỉ đồng hành
              </div>
            </div>
          </div>

          <div className="hero-visual">
            <div className="hero-arch">
              <div className="hero-arch-frame">
                <div className="hero-arch-inner">
                  <div className="float-1">
                    <Icon.Sparkle width="22" height="22" style={{ color: "var(--mystic-gold)" }} className="glow-pulse" />
                  </div>
                  <div className="tarot-card float-2">
                    <div className="tarot-card-art">
                      <TarotArt />
                    </div>
                  </div>
                  <div className="float-3" style={{ display: "flex", gap: 16, alignItems: "center" }}>
                    <Icon.Moon width="22" height="22" style={{ color: "var(--mystic-gold)" }} />
                    <Icon.Star4 width="10" height="10" style={{ color: "var(--mystic-gold)" }} />
                    <Icon.Sparkle width="16" height="16" style={{ color: "var(--mystic-gold)", opacity: 0.7 }} />
                  </div>
                  <div className="hero-arch-placeholder-label">Tarot · Candle · Crystal · Sacred Composition</div>
                </div>
              </div>
            </div>
            <div className="floater floater--1 float-1">
              <Icon.Sparkle width="20" height="20" />
            </div>
            <div className="floater floater--2 float-2">
              <Icon.Star4 width="12" height="12" />
            </div>
            <div className="floater floater--3 float-3">
              <Icon.Star4 width="8" height="8" />
            </div>
            <div className="floater floater--4 float-4">
              <Icon.Sparkle width="16" height="16" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ===== About =====
function About() {
  const ref = useReveal();
  return (
    <section className="section about" id="about" data-screen-label="About">
      <div className="container">
        <div className="about-grid">
          <div ref={ref} className="fade-up about-image-wrap">
            <div className="about-image">
              <div className="about-image-label">Editorial composition · Soft warm imagery</div>
            </div>
          </div>
          <div>
            <div className="eyebrow eyebrow--left" style={{ marginBottom: 20 }}>
              <Icon.Sparkle width="10" height="10" /> Về Holy Dan
            </div>
            <h2>
              Tarot là một <em>chiếc gương</em><br />trong nhiều chiếc gương.
            </h2>
            <p className="about-quote">"Ở đây, bạn được lắng nghe, được thấu hiểu, và được là chính mình một cách trọn vẹn và dịu dàng nhất."

            </p>
            <p>
              Holy Dan không chỉ là một điểm đến tarot. Holy Dan là không gian đồng hành cảm xúc — nơi bạn được hỗ trợ nhìn thấu bản chất vấn đề, chia sẻ những điều khó nói và tìm lại sự bình yên.
            </p>
            <p style={{ marginBottom: 36 }}>Soi sáng những khúc mắc, và tìm lại sự bình yên bên trong  bạn không cần phải có sẵn câu trả lời. Chỉ cần bạn sẵn sàng, Holy Dan ở đây.


            </p>
            <a className="btn btn--outline" href="#services">
              Tìm hiểu thêm về Holy Dan
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// ===== Services =====
function Services({ onBook }) {
  const ref = useReveal();
  const services = [
  {
    icon: Icon.Heart,
    title: "Tình yêu",
    desc: "Đồng hành cùng bạn nhìn rõ những băn khoăn về tình cảm và kết nối — qua tarot và đối thoại dịu dàng, không phán xét.",
    duration: "60 phút",
    price: "590.000đ"
  },
  {
    icon: Icon.Briefcase,
    title: "Công việc",
    desc: "Tìm lại sự rõ ràng trong sự nghiệp và những lựa chọn phía trước — bằng tarot, lắng nghe và những câu hỏi đúng.",
    duration: "60 phút",
    price: "590.000đ"
  },
  {
    icon: Icon.Coin,
    title: "Tài chính",
    desc: "Khám phá năng lượng tài chính cá nhân và những bước đi cần thiết — kết hợp tarot và phản chiếu cảm xúc.",
    duration: "60 phút",
    price: "650.000đ"
  },
  {
    icon: Icon.Compass,
    title: "Định hướng cá nhân",
    desc: "Buổi đồng hành tổng quan cho bạn đang tìm con đường, ý nghĩa và sự bình yên bên trong.",
    duration: "75 phút",
    price: "750.000đ"
  }];


  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="container">
        <div className="section-head fade-up" ref={ref}>
          <div className="eyebrow">Dịch vụ đồng hành</div>
          <CelestialDivider size={28} />
          <h2>Bốn không gian, bốn <em>câu hỏi</em>.</h2>
          <p>Mỗi buổi trải bài 1:1 là một khoảng tĩnh lặng  nơi bạn được lắng nghe, được nhìn rõ hơn, và bước đi nhẹ hơn một chút.</p>
        </div>
        <div className="services-grid stagger in">
          {services.map((s) =>
          <div key={s.title} className="service-card">
              <div className="service-icon">
                <s.icon width="56" height="56" />
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-meta">
                <div className="service-meta-item">
                  <div className="service-meta-label">Thời lượng</div>
                  <div className="service-meta-value">{s.duration}</div>
                </div>
                <div className="service-meta-item">
                  <div className="service-meta-label">Phí</div>
                  <div className="service-meta-value">{s.price}</div>
                </div>
              </div>
              <button className="btn btn--ghost" onClick={onBook} style={{ position: "relative", zIndex: 1 }}>
                Đặt lịch
              </button>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Process =====
function Process() {
  const ref = useReveal();
  const steps = [
  { num: "I", title: "Chọn dịch vụ & thời gian", desc: "Lựa chọn buổi trải bài phù hợp và khung giờ thuận tiện cho bạn." },
  { num: "II", title: "Xác nhận & thanh toán", desc: "Hoàn tất thông tin, nhận xác nhận lịch hẹn và hướng dẫn chuẩn bị." },
  { num: "III", title: "Tham gia buổi đồng hành", desc: "Gặp gỡ trong không gian riêng tư — kết hợp tarot, đối thoại sâu và sự lắng nghe cùng Holy Dan." }];

  return (
    <section className="section process" id="process" data-screen-label="Process">
      <div className="container">
        <div className="section-head fade-up" ref={ref}>
          <div className="eyebrow">Hành trình đồng hành</div>
          <CelestialDivider size={28} />
          <h2>Ba bước, một <em>buổi tĩnh lặng</em>.</h2>
          <p>Đặt lịch nhẹ nhàng và rõ ràng không khoảng cách, không phức tạp.</p>
        </div>
        <div className="process-steps stagger in">
          {steps.map((s) =>
          <div className="process-step" key={s.num}>
              <div className="process-step-num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Why Choose =====
function WhyChoose() {
  const ref = useReveal();
  const items = [
  { icon: Icon.Shield, title: "Bảo mật", desc: "Thông tin của bạn được giữ kín tuyệt đối." },
  { icon: Icon.Hand, title: "Tận tâm", desc: "Đồng hành dịu dàng, không vội vã." },
  { icon: Icon.Sparkle, title: "Chuẩn xác", desc: "Trải bài chuyên sâu, có chiều sâu thực." },
  { icon: Icon.Eye, title: "Không phán xét", desc: "Lắng nghe trọn vẹn, an toàn cảm xúc." },
  { icon: Icon.Feather, title: "Linh hoạt", desc: "Online hoặc offline, phù hợp với bạn." }];

  return (
    <section className="section section--tight" id="why" data-screen-label="Why">
      <div className="container">
        <div className="section-head fade-up" ref={ref}>
          <div className="eyebrow">Vì sao chọn Holy Dan</div>
          <CelestialDivider size={28} />
          <h2>Một không gian đáng tin <em>cậy</em>.</h2>
        </div>
        <div className="why-grid stagger in">
          {items.map((it) =>
          <div className="why-item" key={it.title}>
              <div className="why-icon">
                <it.icon width="48" height="48" />
              </div>
              <h4>{it.title}</h4>
              <p>{it.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Testimonials =====
function Testimonials() {
  const ref = useReveal();
  const items = [
  {
    text: "Mình đã đến với Holy Dan trong giai đoạn rất mơ hồ. Buổi trải bài giúp mình nhìn thấy điều bản thân thật sự cần nhẹ nhàng mà sâu.",
    name: "An Nhiên",
    role: "Đồng hành Tình yêu",
    initials: "AN"
  },
  {
    text: "Cách Holy Dan dẫn dắt rất dịu, không hề có cảm giác bị 'phán'. Mình thấy được lắng nghe và an toàn để chia sẻ.",
    name: "Minh Châu",
    role: "Định hướng cá nhân",
    initials: "MC"
  },
  {
    text: "Một trải nghiệm rất premium và sâu sắc. Mình đã đặt lịch lần thứ ba và mỗi lần đều mang về một góc nhìn mới.",
    name: "Thảo Vy",
    role: "Đồng hành Công việc",
    initials: "TV"
  }];

  return (
    <section className="section testimonials" id="testimonials" data-screen-label="Testimonials">
      <div className="container">
        <div className="section-head fade-up" ref={ref}>
          <div className="eyebrow">Cảm nhận khách hàng</div>
          <CelestialDivider size={28} />
          <h2>Những lời nhắn <em>dịu dàng</em>.</h2>
        </div>
        <div className="testimonial-grid stagger in">
          {items.map((t, i) =>
          <div className="testimonial-card" key={i}>
              <Icon.Quote width="32" height="24" style={{ color: "var(--mystic-gold)", marginBottom: 18 }} />
              <p className="testimonial-text">{t.text}</p>
              <div className="testimonial-stars">★ ★ ★ ★ ★</div>
              <div className="testimonial-meta">
                <div className="testimonial-avatar">{t.initials}</div>
                <div>
                  <div className="testimonial-name">{t.name}</div>
                  <div className="testimonial-role">{t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Blog =====
function Blog() {
  const ref = useReveal();
  const posts = [
  {
    tag: "Tarot",
    title: "Ý nghĩa 3 lá bài về tình yêu bạn nên biết",
    excerpt: "Tình yêu trong Tarot không phải lời tiên đoán, đó là tấm gương soi sáng cảm xúc và lựa chọn của chính bạn.",
    date: "12.05.2026",
    read: "5 phút đọc",
    label: "Tarot reading · candlelight"
  },
  {
    tag: "Healing",
    title: "Năng lượng trăng tròn & nghi thức tự chữa lành",
    excerpt: "Cách tận dụng nguồn năng lượng dịu dàng của trăng để thiết lập lại sự cân bằng bên trong.",
    date: "28.04.2026",
    read: "7 phút đọc",
    label: "Moon ritual · soft imagery"
  },
  {
    tag: "Trực giác",
    title: "Ý nghĩa 3 lá bài về tình yêu bạn nên biết",
    excerpt: "Trực giác không phải điều thần bí. Đó là tiếng nói của bạn, chỉ cần một chút yên tĩnh để được lắng nghe.",
    date: "10.04.2026",
    read: "6 phút đọc",
    label: "Inner listening · journal"
  }];

  return (
    <section className="section" id="blog" data-screen-label="Blog">
      <div className="container">
        <div className="section-head fade-up" ref={ref}>
          <div className="eyebrow">Blog & Insights</div>
          <CelestialDivider size={28} />
          <h2>Câu chuyện về <em>trực giác</em>.</h2>
          <p>Những bài viết nhỏ về tarot, chữa lành và sự thấu hiểu chính mình.</p>
        </div>
        <div className="blog-grid stagger in">
          {posts.map((p, i) =>
          <article className="blog-card" key={i}>
              <div className="blog-image">
                <div className="blog-image-inner"></div>
                <div className="blog-image-label">{p.label}</div>
              </div>
              <span className="blog-tag">{p.tag}</span>
              <h3>{p.title}</h3>
              <p>{p.excerpt}</p>
              <div className="blog-meta">
                <span>{p.date}</span>
                <span>{p.read}</span>
              </div>
            </article>
          )}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a className="btn btn--outline" href="#">Xem tất cả bài viết</a>
        </div>
      </div>
    </section>);

}

// ===== FAQ =====
function FAQ() {
  const [open, setOpen] = useState(0);
  const ref = useReveal();
  const items = [
  { q: "Trải bài Tarot có phải bói toán không?", a: "Không. Tại Holy Dan, tarot là một trong nhiều công cụ — bên cạnh trò chuyện sâu, thiền dẫn và các trải nghiệm chữa lành — giúp bạn nhìn rõ bản chất vấn đề và lắng nghe cảm xúc của chính mình." },
  { q: "Thông tin cá nhân của tôi có được bảo mật không?", a: "Tuyệt đối. Mọi thông tin và nội dung trao đổi trong buổi trải bài đều được giữ kín. Holy Dan tôn trọng sự riêng tư của bạn như một nguyên tắc cốt lõi." },
  { q: "Tôi nên chọn gói trải bài nào?", a: "Nếu bạn có một câu hỏi cụ thể, hãy chọn gói chuyên đề (Tình yêu / Công việc / Tài chính). Nếu bạn cần một bức tranh tổng quan và đồng hành sâu hơn, gói Định hướng cá nhân sẽ phù hợp." },
  { q: "Hình thức trải bài diễn ra như thế nào?", a: "Bạn có thể chọn online qua Google Meet hoặc trực tiếp tại không gian Holy Dan. Mỗi buổi kéo dài 60–75 phút, kết hợp tarot và đối thoại trong môi trường riêng tư, an toàn cảm xúc." },
  { q: "Tôi có thể hủy hoặc đổi lịch hẹn không?", a: "Hoàn toàn được. Bạn có thể đổi hoặc hủy lịch trước 12 tiếng so với giờ hẹn. Vui lòng nhắn cho Holy Dan để được hỗ trợ nhanh nhất." },
  { q: "Tôi có thể đặt lịch gấp trong ngày không?", a: "Có. Holy Dan có một số khung giờ linh hoạt cho lịch gấp. Vui lòng liên hệ trực tiếp để kiểm tra tình trạng và đặt lịch trong ngày." }];

  return (
    <section className="section faq" id="faq" data-screen-label="FAQ">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-side fade-up" ref={ref}>
            <div className="eyebrow eyebrow--left" style={{ marginBottom: 20 }}>FAQ · Câu hỏi thường gặp</div>
            <h2>Bạn còn <em>điều gì</em><br />muốn hỏi?</h2>
            <p>Holy Dan ở đây để trả lời tất cả những điều bạn còn băn khoăn, một cách rõ ràng, dịu dàng và thẳng thắn.</p>
            <CelestialDivider size={32} />
          </div>
          <div className="faq-list">
            {items.map((it, i) =>
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq-q-icon"></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">
                    <p>{it.a}</p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ===== Booking modal =====
function BookingModal({ open, onClose }) {
  const [step, setStep] = useState({ service: "", date: "", time: "", name: "", email: "", phone: "", note: "" });
  const slots = ["09:00", "09:30", "10:00", "10:30", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00"];

  useEffect(() => {
    if (open) document.body.style.overflow = "hidden";else
    document.body.style.overflow = "";
    return () => {document.body.style.overflow = "";};
  }, [open]);

  return (
    <div className={`modal-backdrop ${open ? "open" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Đóng">
          <Icon.Close width="14" height="14" />
        </button>
        <div className="modal-header">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Đặt lịch đồng hành</div>
          <h3>Một khoảng tĩnh dành riêng cho bạn</h3>
          <p>Vui lòng điền thông tin, Holy Dan sẽ xác nhận trong vòng 24 giờ.</p>
        </div>
        <div className="modal-body">
          <div className="form-row">
            <div className="field">
              <label>Dịch vụ</label>
              <select value={step.service} onChange={(e) => setStep({ ...step, service: e.target.value })}>
                <option value="">Chọn dịch vụ tarot</option>
                <option>Đồng hành Tình yêu (60p)</option>
                <option>Đồng hành Công việc (60p)</option>
                <option>Đồng hành Tài chính (60p)</option>
                <option>Định hướng cá nhân (75p)</option>
              </select>
            </div>
            <div className="field">
              <label>Ngày hẹn</label>
              <input type="date" value={step.date} onChange={(e) => setStep({ ...step, date: e.target.value })} />
            </div>
          </div>

          <div className="form-row form-row--single">
            <div className="field">
              <label>Khung giờ</label>
              <div className="timeslots">
                {slots.map((s) =>
                <button
                  key={s}
                  type="button"
                  className={`timeslot ${step.time === s ? "selected" : ""}`}
                  onClick={() => setStep({ ...step, time: s })}>
                  
                    {s}
                  </button>
                )}
              </div>
            </div>
          </div>

          <div className="form-row">
            <div className="field">
              <label>Họ và tên</label>
              <input type="text" placeholder="Nguyễn Hoàng An" value={step.name} onChange={(e) => setStep({ ...step, name: e.target.value })} />
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="ban@email.com" value={step.email} onChange={(e) => setStep({ ...step, email: e.target.value })} />
            </div>
          </div>

          <div className="form-row">
            <div className="field">
              <label>Số điện thoại</label>
              <input type="tel" placeholder="0xxx xxx xxx" value={step.phone} onChange={(e) => setStep({ ...step, phone: e.target.value })} />
            </div>
            <div className="field">
              <label>Hình thức</label>
              <select>
                <option>Online (Google Meet)</option>
                <option>Trực tiếp tại Holy Dan Studio</option>
              </select>
            </div>
          </div>

          <div className="form-row form-row--single">
            <div className="field">
              <label>Ghi chú (không bắt buộc)</label>
              <textarea placeholder="Chia sẻ thêm điều bạn đang băn khoăn..." value={step.note} onChange={(e) => setStep({ ...step, note: e.target.value })}></textarea>
            </div>
          </div>

          <div className="modal-footer">
            <button className="btn btn--primary">Xác nhận đặt lịch</button>
            <p className="modal-footer-note">Bằng việc xác nhận, bạn đồng ý với chính sách bảo mật của Holy Dan.</p>
          </div>
        </div>
      </div>
    </div>);

}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="logo">
              <Icon.Logo className="logo-mark" style={{ color: "var(--mystic-gold)" }} />
              <span className="logo-text">Holy Dan</span>
            </div>
            <p>Một không gian dịu dàng cho hành trình thấu hiểu bản thân qua tarot, trực giác và sự chữa lành.</p>
            <div className="socials">
              <a href="#" aria-label="Instagram"><Icon.Instagram width="18" height="18" /></a>
              <a href="#" aria-label="Facebook"><Icon.Facebook width="18" height="18" /></a>
              <a href="#" aria-label="TikTok"><Icon.TikTok width="18" height="18" /></a>
              <a href="#" aria-label="YouTube"><Icon.YouTube width="18" height="18" /></a>
            </div>
          </div>
          <div>
            <h5>Khám phá</h5>
            <ul className="footer-list">
              <li><a href="#about">Về Holy Dan</a></li>
              <li><a href="#services">Dịch vụ</a></li>
              <li><a href="#blog">Blog & Insights</a></li>
              <li><a href="#faq">Câu hỏi thường gặp</a></li>
            </ul>
          </div>
          <div>
            <h5>Liên hệ</h5>
            <ul className="footer-list">
              <li>hello@holydan.vn</li>
              <li>+84 90 123 4567</li>
              <li>Quận 1, TP.HCM</li>
              <li>9:00 — 21:00, T2 — CN</li>
            </ul>
          </div>
          <div>
            <h5>Newsletter</h5>
            <p style={{ fontSize: 13, marginBottom: 16, color: "rgba(245,240,235,0.6)", lineHeight: 1.6 }}>
              Nhận những lời nhắn dịu dàng và bài viết mới hàng tháng.
            </p>
            <div className="newsletter">
              <div className="newsletter-input">
                <input type="email" placeholder="Email của bạn" />
                <button>Đăng ký</button>
              </div>
            </div>
          </div>
        </div>

        <div className="footer-divider-celestial">
          <CelestialDivider size={32} />
        </div>

        <div className="footer-bottom">
          <span>© 2026 Holy Dan — Tarot & Guidance</span>
          <span>Crafted with intuition · Ho Chi Minh City</span>
        </div>
      </div>
    </footer>);

}

// ===== App =====
function App() {
  const [bookingOpen, setBookingOpen] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent color
  useEffect(() => {
    document.documentElement.style.setProperty("--mystic-gold", tweaks.accentColor);
  }, [tweaks.accentColor]);

  const ctaTones = ["Plum", "Gold", "Taupe"];
  const heroLayouts = ["Arch composition", "Minimal centered"];

  return (
    <>
      <CandleCursor />
      <ScrollProgress />
      <AudioToggle />
      <SceneBreath />
      <SceneDoor />
      <SceneOpening />
      <SceneGarden />
      <Navbar onBook={() => setBookingOpen(true)} />
      <Hero
        onBook={() => setBookingOpen(true)}
        showCornerBursts={tweaks.showCornerBursts}
        showParticles={tweaks.showParticles} />
      
      <About />
      <Services onBook={() => setBookingOpen(true)} />
      <Process />
      <WhyChoose />
      <Testimonials />
      <Blog />
      <FAQ />
      <Footer />
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Color">
          <TweakColor label="Mystic gold accent" value={tweaks.accentColor} onChange={(v) => setTweak("accentColor", v)} />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakToggle label="Show corner bursts" value={tweaks.showCornerBursts} onChange={(v) => setTweak("showCornerBursts", v)} />
          <TweakToggle label="Show floating particles" value={tweaks.showParticles} onChange={(v) => setTweak("showParticles", v)} />
        </TweakSection>
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);