/* global React, ReactDOM, useReveal, Hero, Nav, Marquee, PainPoints, Speaker, Benefits, Schedule, SocialProof, Audience, EventInfo, Countdown, Icon, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakSlider, TweakToggle */
const { useState, useEffect, useRef } = React;

/* ----------------------------------------------
   FINAL CTA + FORM
   ---------------------------------------------- */
function FinalCTA({ formRef, seatsLeft }) {
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({ name: "", phone: "", email: "", school: "", year: "" });
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  const update = (k) => (e) => setData(d => ({ ...d, [k]: e.target.value }));

  return (
    <section className="final-cta" ref={formRef} data-screen-label="09 Final CTA">
      <div className="bg"></div>
      <div className="bg-shade"></div>
      <div className="wrap">
        <div className="final-cta-text">
          <div className="eyebrow reveal">— Đêm 31.05</div>
          <h2 className="reveal reveal-delay-1">
            Bạn sẽ ở<br/>
            <span className="italic">đâu?</span>
          </h2>
          <p className="big reveal reveal-delay-2">
            Còn <b style={{color:"var(--lime)",fontStyle:"normal"}}>{seatsLeft} suất</b> cho chương trình giới hạn này.
          </p>
          <p className="reveal reveal-delay-2">
            Một đêm — có thể thay đổi cách bạn nhìn vào gương mỗi sáng.
          </p>
          <div className="reveal reveal-delay-3" style={{marginTop:28}}>
            <Countdown dark={true} />
            <div style={{fontFamily:"var(--f-mono)", fontSize:11, letterSpacing:"0.16em", color:"rgba(250,248,243,0.55)", textTransform:"uppercase"}}>
              — Đếm ngược đến 19:30 ngày 31.05.2026 (GMT+7)
            </div>
          </div>
        </div>

        <div className="reg-form reveal reveal-delay-2" id="register">
          {!submitted ? (
            <form onSubmit={onSubmit}>
              <div className="form-eyebrow">— Đơn đăng ký · Miễn phí</div>
              <h3>Giữ chỗ của bạn<br/><span className="italic">ngay bây giờ.</span></h3>

              <div className="field">
                <label htmlFor="name">Họ &amp; tên</label>
                <input id="name" required value={data.name} onChange={update("name")} placeholder="Nguyễn Anh Đào" autoComplete="name" />
              </div>

              <div className="field-row">
                <div className="field">
                  <label htmlFor="phone">Số điện thoại</label>
                  <input id="phone" required type="tel" value={data.phone} onChange={update("phone")} placeholder="09xx xxx xxx" autoComplete="tel" />
                </div>
                <div className="field">
                  <label htmlFor="email">Email</label>
                  <input id="email" required type="email" value={data.email} onChange={update("email")} placeholder="ban@example.com" autoComplete="email" />
                </div>
              </div>

              <div className="field-row">
                <div className="field">
                  <label htmlFor="school">Trường đại học</label>
                  <input id="school" value={data.school} onChange={update("school")} placeholder="ĐH Ngoại thương" />
                </div>
                <div className="field">
                  <label htmlFor="year">Năm học</label>
                  <select id="year" value={data.year} onChange={update("year")}>
                    <option value="">Chọn —</option>
                    <option>Năm nhất</option>
                    <option>Năm hai</option>
                    <option>Năm ba</option>
                    <option>Năm cuối</option>
                    <option>Khác</option>
                  </select>
                </div>
              </div>

              <button type="submit" className="btn-submit">
                Giữ chỗ ngay
                <Icon.Arrow className="arrow" size={18} />
              </button>

              <div className="form-micro">
                Bạn sẽ nhận email xác nhận trong vòng 5 phút sau khi đăng ký.
              </div>
            </form>
          ) : (
            <div className="form-success">
              <div className="check"><Icon.Check size={26} /></div>
              <h4>Đã giữ chỗ thành công!</h4>
              <p>Một email xác nhận đã được gửi tới <b>{data.email || "bạn"}</b>.<br/>
                 Hẹn gặp tại Biblio đêm 31.05 nhé.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------
   FOOTER
   ---------------------------------------------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="10 Footer">
      <div className="wrap">
        <div className="footer-brand">
          <div className="name">Định Vị Hình Ảnh <em style={{color:"var(--gold)",fontStyle:"normal"}}>’26</em></div>
          <p>Định vị hình ảnh — mở lối tương lai. Một đêm cùng Stylist Anh Đào — dành cho sinh viên Hà Nội.</p>
        </div>
        <div className="footer-col">
          <h5>Sự kiện</h5>
          <ul>
            <li><a href="#schedule">Lịch trình</a></li>
            <li><a href="#speaker">Diễn giả</a></li>
            <li><a href="#benefits">Bạn nhận được gì</a></li>
            <li><a href="#register">Đăng ký</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Liên hệ</h5>
          <ul>
            <li><a href="mailto:hello@dinhvihinhanh.vn">hello@dinhvihinhanh.vn</a></li>
            <li><a href="#">Hotline: 09xx xxx xxx</a></li>
            <li><a href="#">Facebook · Instagram</a></li>
            <li><a href="#">Zalo broadcast</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 — Chương trình SO · All rights reserved</span>
        <span>Stylist Anh Đào × Biblio Hà Nội</span>
      </div>
    </footer>
  );
}

/* ----------------------------------------------
   MOBILE STICKY CTA
   ---------------------------------------------- */
function MobileCTA({ onCta, seatsLeft }) {
  return (
    <div className="mobile-cta">
      <div className="info">Còn <b>{seatsLeft}</b> suất · 31.05 · 19:30</div>
      <button onClick={onCta}>Giữ chỗ</button>
    </div>
  );
}

/* ----------------------------------------------
   TWEAKS PANEL
   ---------------------------------------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9A961",
  "lime": "#B5E853",
  "cream": "#FAF8F3",
  "ink": "#1A1A1A",
  "seats": 37,
  "showCountdownHero": true,
  "headlineVariant": "Một đêm"
}/*EDITMODE-END*/;

function Tweaks({ onSeatsChange }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--gold", t.accent);
    root.style.setProperty("--lime", t.lime);
    root.style.setProperty("--cream", t.cream);
    root.style.setProperty("--ink", t.ink);
    // recompute deep gold (~15% darker)
    root.style.setProperty("--gold-deep", t.accent);
  }, [t.accent, t.lime, t.cream, t.ink]);

  useEffect(() => { onSeatsChange?.(t.seats); }, [t.seats]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakColor
          label="Gold accent"
          value={t.accent}
          onChange={(v)=>setTweak("accent", v)}
          options={["#C9A961", "#A68842", "#D9B872", "#B5985A"]}
        />
        <TweakColor
          label="Neon accent"
          value={t.lime}
          onChange={(v)=>setTweak("lime", v)}
          options={["#B5E853", "#E8FF6B", "#9DD831", "#7BC6A0"]}
        />
        <TweakColor
          label="Background"
          value={t.cream}
          onChange={(v)=>setTweak("cream", v)}
          options={["#FAF8F3", "#F5F0E6", "#FFFFFF", "#EDE7D9"]}
        />
        <TweakColor
          label="Ink"
          value={t.ink}
          onChange={(v)=>setTweak("ink", v)}
          options={["#1A1A1A", "#0F0F0F", "#2B2520", "#1B2530"]}
        />
      </TweakSection>

      <TweakSection label="Urgency">
        <TweakSlider
          label="Seats remaining"
          value={t.seats}
          min={1} max={100} step={1}
          unit="/100"
          onChange={(v)=>setTweak("seats", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ----------------------------------------------
   APP
   ---------------------------------------------- */
function App() {
  const [seatsLeft, setSeatsLeft] = useState(TWEAK_DEFAULTS.seats);
  const formRef = useRef(null);
  useReveal();

  const scrollToForm = () => {
    if (!formRef.current) return;
    const top = formRef.current.getBoundingClientRect().top + window.scrollY - 12;
    window.scrollTo({ top, behavior: "smooth" });
  };

  // count up effect on initial load — subtle "fresh" feel
  useEffect(() => {
    // no-op for now; seatsLeft is controlled via Tweaks
  }, []);

  return (
    <>
      <Nav onCta={scrollToForm} />
      <Hero onCta={scrollToForm} seatsLeft={seatsLeft} />
      <Marquee />
      <PainPoints />
      <Speaker />
      <Benefits />
      <Schedule />
      <SocialProof />
      <Audience />
      <EventInfo />
      <FinalCTA formRef={formRef} seatsLeft={seatsLeft} />
      <Footer />
      <MobileCTA onCta={scrollToForm} seatsLeft={seatsLeft} />
      <Tweaks onSeatsChange={setSeatsLeft} />
    </>
  );
}

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