/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ----------------------------------------------
   Inline SVG icons (minimal, line-style)
   ---------------------------------------------- */
const Icon = {
  Arrow: ({ size = 16, className = "arrow" }) => (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter">
      <path d="M4 12h16M14 6l6 6-6 6" />
    </svg>
  ),
  Scissor: ({ size = 26 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>
      <line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/>
      <line x1="8.12" y1="8.12" x2="12" y2="12"/>
    </svg>
  ),
  Check: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7"/>
    </svg>
  ),
  Calendar: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>,
  Pin: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  Users: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="9" cy="8" r="3.4"/><path d="M2 21c.6-3.6 3.5-6 7-6s6.4 2.4 7 6"/><circle cx="17" cy="6.5" r="2.6"/><path d="M16 13c2.6.3 4.6 2 5.2 4.6"/></svg>,
  Tag:  () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 12V4h8l10 10-8 8L3 12z"/><circle cx="7.5" cy="7.5" r="1.4"/></svg>,
  Mic:  () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></svg>,
  Gift: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="8" width="18" height="13" rx="1"/><path d="M3 12h18M12 8v13M7 8c-2 0-2-5 2-5s3 5 3 5M17 8c2 0 2-5-2-5s-3 5-3 5"/></svg>,
};

/* ----------------------------------------------
   Reveal-on-scroll hook
   ---------------------------------------------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ----------------------------------------------
   Countdown to 19:30 31/05/2026
   ---------------------------------------------- */
function useCountdown(target) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff / 3600000) % 24);
  const m = Math.floor((diff / 60000) % 60);
  const s = Math.floor((diff / 1000) % 60);
  return { d, h, m, s, total: diff };
}

const EVENT_TS = new Date("2026-05-31T19:30:00+07:00").getTime();

function Countdown({ dark = true }) {
  const t = useCountdown(EVENT_TS);
  const pad = (n) => String(n).padStart(2, "0");
  const cls = dark ? "unit" : "unit dark";
  return (
    <div className="countdown">
      <div className={cls}><div className="v">{pad(t.d)}</div><div className="l">Ngày</div></div>
      <div className="sep">:</div>
      <div className={cls}><div className="v">{pad(t.h)}</div><div className="l">Giờ</div></div>
      <div className="sep">:</div>
      <div className={cls}><div className="v">{pad(t.m)}</div><div className="l">Phút</div></div>
      <div className="sep">:</div>
      <div className={cls}><div className="v">{pad(t.s)}</div><div className="l">Giây</div></div>
    </div>
  );
}

/* ----------------------------------------------
   NAV
   ---------------------------------------------- */
function Nav({ onCta }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-brand">
        <span className="dot"></span>
        <span>Định Vị Hình Ảnh <em style={{fontStyle:"normal",color:"var(--gold-deep)"}}>’26</em></span>
      </div>
      <div className="nav-meta">
        <span>31.05.2026</span>
        <span className="dim">·</span>
        <span>Biblio, Hà Nội</span>
        <span className="dim">·</span>
        <span>19:30 — 22:30</span>
      </div>
      <button className="nav-cta" onClick={onCta}>Giữ chỗ miễn phí</button>
    </nav>
  );
}

/* ----------------------------------------------
   HERO
   ---------------------------------------------- */
function Hero({ onCta, seatsLeft }) {
  return (
    <header className="hero" data-screen-label="01 Hero">
      <div>
        <div className="hero-pre reveal">
          <span className="pill">Đêm 31.05.2026</span>
          <span className="sep"></span>
          <span>Biblio Hà Nội · 19:30 – 22:30</span>
        </div>

        <h1 className="h-display reveal reveal-delay-1">
          Một <span className="italic">đêm.</span><br/>
          Một cây <span className="underline">kéo vàng.</span><br/>
          <span className="italic">Một phiên bản</span><br/>
          mới <span className="gold">của bạn.</span>
        </h1>

        <p className="hero-sub reveal reveal-delay-2">
          Định vị hình ảnh — mở lối tương lai. Một đêm cùng Stylist Anh Đào,
          26 năm sau cây kéo đầu tiên.
        </p>

        <p className="hero-desc reveal reveal-delay-3">
          Bạn đã bao giờ tự hỏi vì sao có người mặc đơn giản vẫn cuốn hút,
          còn mình diện đồ chỉn chu vẫn thấy “thiếu thiếu gì đó”? Câu trả lời nằm
          ở <b>hình ảnh cá nhân</b> — thứ quyết định 7 giây đầu tiên người khác nhìn bạn.
        </p>

        <div className="cta-row reveal reveal-delay-3">
          <button className="btn-primary" onClick={onCta}>
            Đăng ký miễn phí
            <Icon.Arrow />
          </button>
          <div className="seats-counter">
            <span className="pulse"></span>
            <span>Còn <b>{seatsLeft}/100</b> suất</span>
          </div>
        </div>

        <div className="trust-row reveal reveal-delay-4">
          <div className="tg"><span className="ico">✦</span><span>Cây Kéo Vàng Đất Việt</span></div>
          <div className="tg"><span className="ico">26</span><span>Năm kinh nghiệm</span></div>
          <div className="tg"><span className="ico">✂</span><span>Live makeover trực tiếp</span></div>
        </div>
      </div>

      <div className="hero-portrait reveal reveal-delay-2">
        <div className="scissor-float"><Icon.Scissor /></div>
        <span className="tag">Live makeover 31.05</span>
        <img src="assets/hero-portrait.jpg" alt="Stylist Anh Đào" />
        <div className="caption">
          <div>
            <div className="name">Anh Đào</div>
            <div style={{marginTop:6}}>Master Stylist · Hà Nội</div>
          </div>
          <div style={{textAlign:"right"}}>
            <div>26 năm</div>
            <div>1 cây kéo</div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ----------------------------------------------
   MARQUEE
   ---------------------------------------------- */
function Marquee() {
  const items = [
    "Định vị hình ảnh — mở lối tương lai",
    "Đêm 31.05.2026",
    "Live makeover trực tiếp",
    "Biblio · Hà Nội",
    "Stylist Anh Đào",
    "Miễn phí · Giới hạn 100 suất",
  ];
  const Run = () => (
    <span>{items.map((t,i)=>(<React.Fragment key={i}>{t}<span className="dot"> ✦ </span></React.Fragment>))}</span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        <Run /><Run />
      </div>
    </div>
  );
}

/* ----------------------------------------------
   PAIN POINTS
   ---------------------------------------------- */
function PainPoints() {
  const cards = [
    { n: "01", b: <>Đứng trước gương <b>30 phút mỗi sáng</b> mà vẫn không biết kiểu tóc nào hợp với khuôn mặt mình?</>, tag: "Buổi sáng quen thuộc" },
    { n: "02", b: <>Mặc bộ đồ <b>“tử tế nhất”</b> đi phỏng vấn mà vẫn cảm thấy thiếu tự tin, không “ra dáng”?</>, tag: "Trước cánh cửa phỏng vấn" },
    { n: "03", b: <>Nhìn bạn bè <b>“lột xác”</b> sau mỗi lần đổi tóc, còn mình cắt xong lại thấy không hợp?</>, tag: "Sau khi rời tiệm tóc" },
  ];
  return (
    <section className="section" data-screen-label="02 Pain points">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">02 — Vấn đề thật sự</div>
            <h2 className="h-section" style={{marginTop:18}}>
              Có phải bạn <span className="serif" style={{fontStyle:"italic"}}>từng…</span>
            </h2>
          </div>
          <div className="section-num">— Ba khoảnh khắc bạn sẽ nhận ra mình</div>
        </div>

        <div className="pain-grid reveal reveal-delay-1">
          {cards.map((c,i) => (
            <article className="pain-card" key={i}>
              <div className="num">{c.n}</div>
              <p className="body">{c.b}</p>
              <div className="tag">— {c.tag}</div>
            </article>
          ))}
        </div>

        <p className="pain-close reveal reveal-delay-2">
          Đây là chương trình duy nhất tại Hà Nội tháng 5 này có <b>live makeover trực tiếp trên sân khấu</b>
          — bạn không chỉ nghe lý thuyết, bạn nhìn thấy sự thay đổi ngay trước mắt.
        </p>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   SPEAKER
   ---------------------------------------------- */
function Speaker() {
  const ach = [
    { n: "I", t: "Cây Kéo Vàng Đất Việt", s: "Giải thưởng cao quý nhất" },
    { n: "II", t: "Kéo Vàng Nghệ Thuật Oscar For Hair", s: "Vinh danh nghệ thuật tạo mẫu" },
    { n: "III", t: "Trưởng ban Đối ngoại", s: "Câu lạc bộ Tóc Đẹp Việt Nam" },
    { n: "IV", t: "Hàng nghìn khách hàng", s: "Trong suốt 26 năm tạo mẫu" },
  ];
  return (
    <section className="speaker" data-screen-label="03 Speaker">
      <div className="wrap">
        <div className="speaker-photo reveal">
          <span className="vbar"></span>
          <img src="assets/speaker-cafe.jpg" alt="Stylist Anh Đào" />
          <span className="label">Hà Nội · 2026</span>
        </div>

        <div className="speaker-text">
          <div className="eyebrow reveal">— Người phụ nữ của cây kéo vàng</div>
          <h2 className="reveal reveal-delay-1">Stylist<br/><span className="italic">Anh Đào</span></h2>

          <p className="lede reveal reveal-delay-2">
            26 năm trước, chị Anh Đào bắt đầu sự nghiệp với một cây kéo.
            Hôm nay, chị là chủ nhân của những danh hiệu mà nhiều stylist
            mơ ước cả đời.
          </p>

          <ul className="achievement-list reveal reveal-delay-2">
            {ach.map((a,i) => (
              <li key={i}>
                <span className="num">{a.n}</span>
                <span>
                  <b>{a.t}</b>
                  <em>{a.s}</em>
                </span>
              </li>
            ))}
          </ul>

          <blockquote className="quote-block reveal reveal-delay-3">
            <span className="mark">“</span>
            <p>Một kiểu tóc đẹp không phải kiểu đang hot.<br/>Đó là kiểu khiến <i>bạn</i> tỏa sáng khi nhìn vào gương.</p>
            <cite>— Stylist Anh Đào</cite>
          </blockquote>

          <div className="speaker-close reveal reveal-delay-3">
            Và lần này, chị mang tất cả <span className="accent">26 năm kinh nghiệm</span> ấy đến Biblio
            — <i>chỉ trong một đêm.</i>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   BENEFITS — what you'll get
   ---------------------------------------------- */
function Benefits() {
  const items = [
    { n: "01", t: "Hiểu khuôn mặt của mình", b: "Biết chính xác khuôn mặt bạn thuộc dạng nào trong 5 dạng phổ biến, và những kiểu tóc nào tuyệt đối nên tránh." },
    { n: "02", t: "Có “bản đồ phối đồ” riêng", b: "Từ outfit đi học, đi làm thêm, đến đi phỏng vấn xin việc — bạn biết mình nên mặc gì, không nên mặc gì." },
    { n: "03", t: "Tránh 5 lỗi sinh viên hay mắc", b: "Những lỗi mà không ai dám nói thẳng cho bạn nghe — nhưng người tuyển dụng và đồng nghiệp lại nhìn thấy ngay." },
    { n: "04", t: "Tự tin gấp 3 lần", b: "Vì khi bước vào một căn phòng, bạn biết mình đang thể hiện điều gì — và người khác sẽ nhìn thấy điều gì." },
    { n: "05", t: "Quà tặng giá trị", b: "Voucher cắt tóc miễn phí, combo chăm sóc tóc cao cấp, quà từ nhà tài trợ — qua bốc thăm may mắn." },
  ];
  return (
    <section className="section" data-screen-label="04 Benefits">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">04 — Bạn sẽ nhận được</div>
            <h2 className="h-section" style={{marginTop:18}}>
              Sau ba giờ tại Biblio,<br/>
              <span style={{fontStyle:"italic"}}>bạn sẽ…</span>
            </h2>
          </div>
          <div className="section-num">— Năm bài học, một đêm</div>
        </div>

        <div className="benefits-grid reveal reveal-delay-1">
          {items.map((it,i) => (
            <article className="benefit-card" key={i}>
              <div className="num">{it.n}</div>
              <h3>{it.t}</h3>
              <p>{it.b}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   SCHEDULE
   ---------------------------------------------- */
function Schedule() {
  const faces = [
    ["Mặt tròn", "Đừng để tóc làm bạn “tròn” thêm"],
    ["Mặt dài", "Bí quyết “rút ngắn” khuôn mặt bằng kiểu tóc"],
    ["Mặt vuông", "Cân bằng đường nét bằng đúng độ dài"],
    ["Mặt gầy", "Tạo cảm giác đầy đặn, có hồn"],
    ["Mặt góc cạnh", "Mềm mại hóa nhưng vẫn giữ cá tính"],
  ];
  return (
    <section className="section schedule" data-screen-label="05 Schedule">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">05 — Lịch trình đêm 31.05</div>
            <h2 className="h-section" style={{marginTop:18}}>
              Đêm 31.05<br/>
              <span style={{fontStyle:"italic"}}>sẽ diễn ra thế nào?</span>
            </h2>
          </div>
          <div className="section-num">— Ba khung giờ · Một đêm</div>
        </div>

        <div className="schedule-list reveal reveal-delay-1">
          {/* item 1 */}
          <div className="schedule-item">
            <div>
              <div className="time">19:30</div>
              <div className="end">— 20:30</div>
            </div>
            <div className="content">
              <div className="kind"><Icon.Mic /> Talkshow</div>
              <h3>“Khuôn mặt bạn <span className="italic">đang kể chuyện gì?</span>”</h3>
              <p className="body">
                Stylist Anh Đào phân tích trực tiếp 5 dạng khuôn mặt — kèm phân tích
                <b> màu tóc – trang phục – phong cách</b> đi cùng.
              </p>
              <ul className="face-list">
                {faces.map(([k,v],i) => (
                  <li key={i}><b>{k}</b><span style={{color:"var(--muted)"}}>{v}</span></li>
                ))}
              </ul>
            </div>
          </div>

          {/* item 2 */}
          <div className="schedule-item">
            <div>
              <div className="time">20:30</div>
              <div className="end">— 21:30</div>
            </div>
            <div className="content">
              <div className="kind"><Icon.Scissor size={18} /> Live makeover</div>
              <h3>“Cắt một mái tóc, <span className="italic">đổi một phong cách</span>”</h3>
              <p className="body">
                <b>Một sinh viên may mắn</b> được chọn lên sân khấu. Anh Đào sẽ:
              </p>
              <ul className="q-list">
                <li><span className="mark">→</span> Phân tích khuôn mặt – chất tóc – phong cách</li>
                <li><span className="mark">→</span> Cắt và tạo kiểu trực tiếp ngay tại chỗ</li>
                <li><span className="mark">→</span> Giải thích từng quyết định: <i>“Tại sao cắt thế này? Tại sao không thế kia?”</i></li>
              </ul>
              <div className="callout-makeover">
                Đây là phần <b>không có chương trình sinh viên nào khác</b> làm được — bạn sẽ thấy một người thay đổi ngay trước mắt mình.
              </div>
            </div>
          </div>

          {/* item 3 */}
          <div className="schedule-item">
            <div>
              <div className="time">21:30</div>
              <div className="end">— 22:30</div>
            </div>
            <div className="content">
              <div className="kind"><Icon.Gift /> Giao lưu &amp; bốc thăm</div>
              <h3>“Cơ hội nhận quà — <span className="italic">và những câu chuyện chưa kể</span>”</h3>
              <ul className="q-list">
                <li><span className="mark">→</span> Q&amp;A tự do với Stylist Anh Đào về nghề, cuộc sống, xây dựng hình ảnh</li>
                <li><span className="mark">→</span> Bốc thăm trúng thưởng: voucher cắt tóc, combo chăm sóc tóc, quà tài trợ</li>
                <li><span className="mark">→</span> Chụp ảnh kỷ niệm &amp; networking với các bạn sinh viên khác</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   SOCIAL PROOF
   ---------------------------------------------- */
function SocialProof() {
  return (
    <section className="section social-proof" data-screen-label="06 Social proof">
      <div className="wrap">
        <div className="social-proof-img reveal">
          <img src="assets/denim-models.jpg" alt="Stylist Anh Đào cùng các mẫu trẻ" />
          <span className="badge">Backstage · 2025</span>
        </div>

        <div className="social-proof-text">
          <div className="eyebrow reveal">— Đã tạo phong cách cho</div>
          <h2 className="h-section reveal reveal-delay-1" style={{marginTop:18}}>
            Hàng nghìn bạn trẻ.<br/>
            <span className="italic">Một thế hệ tự tin.</span>
          </h2>
          <p className="reveal reveal-delay-2">
            Từ runway đến phòng phỏng vấn, Stylist Anh Đào đã thiết kế hình ảnh cho
            hàng nghìn bạn trẻ Việt Nam — bằng đôi mắt nhìn ra <i>cái “khác”</i> của mỗi người.
          </p>

          <div className="proof-stats reveal reveal-delay-3">
            <div className="stat"><div className="v">26</div><div className="l">Năm trong nghề</div></div>
            <div className="stat"><div className="v">1000+</div><div className="l">Khách hàng tạo kiểu</div></div>
            <div className="stat"><div className="v">02</div><div className="l">Giải thưởng quốc gia</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   AUDIENCE
   ---------------------------------------------- */
function Audience() {
  const items = [
    <><b>Sinh viên năm cuối</b> chuẩn bị đi phỏng vấn, thực tập</>,
    <><b>Sinh viên năm nhất, năm hai</b> muốn “lột xác” từ sớm</>,
    <>Bạn nào đang <b>phân vân kiểu tóc nào hợp với mình</b></>,
    <>Người yêu thích <b>thời trang, làm đẹp, phát triển bản thân</b></>,
    <>Ai muốn <b>nâng cấp sự tự tin</b> trước khi bước vào giai đoạn mới</>,
  ];
  return (
    <section className="section audience" data-screen-label="07 Audience">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">07 — Ai nên tham gia?</div>
            <h2 className="h-section" style={{marginTop:18}}>
              Chương trình này<br/>
              <span style={{fontStyle:"italic"}}>dành cho…</span>
            </h2>
          </div>
        </div>

        <div className="audience-list reveal reveal-delay-1">
          {items.map((it,i) => (
            <div className="audience-card" key={i}>
              <span className="check"><Icon.Check /></span>
              <div className="label">{it}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   EVENT INFO (dark)
   ---------------------------------------------- */
function EventInfo() {
  return (
    <section className="event-info" data-screen-label="08 Event info">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">08 — Thông tin sự kiện</div>
            <h2 className="h-section" style={{marginTop:18,color:"var(--cream)"}}>
              Đêm cuối tháng năm,<br/>
              <span style={{fontStyle:"italic",color:"var(--gold)"}}>tại trung tâm Hà Nội.</span>
            </h2>
          </div>
        </div>

        <div className="event-grid reveal reveal-delay-1">
          <div className="event-cell">
            <span className="ico"><Icon.Calendar /></span>
            <span className="label">Thời gian</span>
            <span className="value">19:30 – 22:30<br/><span className="italic" style={{fontSize:18,color:"rgba(250,248,243,0.6)"}}>Chủ nhật 31.05.2026</span></span>
          </div>
          <div className="event-cell">
            <span className="ico"><Icon.Pin /></span>
            <span className="label">Địa điểm</span>
            <span className="value">Biblio<br/><span className="italic" style={{fontSize:18,color:"rgba(250,248,243,0.6)"}}>Hà Nội · địa chỉ cập nhật sau</span></span>
          </div>
          <div className="event-cell">
            <span className="ico"><Icon.Users /></span>
            <span className="label">Số lượng</span>
            <span className="value">Giới hạn 100<br/><span className="italic" style={{fontSize:18,color:"rgba(250,248,243,0.6)"}}>Sinh viên Hà Nội</span></span>
          </div>
          <div className="event-cell free">
            <span className="ico" style={{borderColor:"rgba(181,232,83,0.5)",color:"var(--lime)"}}><Icon.Tag /></span>
            <span className="label">Phí tham dự</span>
            <span className="value">Miễn phí<br/><span className="italic" style={{fontSize:18,color:"rgba(250,248,243,0.6)"}}>Hoàn toàn — không phí ẩn</span></span>
          </div>
        </div>

        <div className="map-pin reveal reveal-delay-2">
          <div>
            <span style={{color:"var(--gold)"}}>◆</span>{"  "}
            <span className="addr">Biblio Café &amp; Library — Hà Nội</span>
          </div>
          <div>Đếm ngược đến giờ G — tham dự cùng 100 bạn trẻ</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Icon, useReveal, useCountdown, Countdown, Nav, Hero, Marquee,
  PainPoints, Speaker, Benefits, Schedule, SocialProof, Audience, EventInfo
});