// rsvp-page.jsx — standalone RSVP page (form-only)
// Shares: window.TRANSLATIONS, window.RSVPForm, window.useTweaks, window.TweaksPanel...

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1f3a2e", "#b89968", "#f5efe4", "#faf6ee", "#2c4a3c", "#d6b98a", "#ebe2d0"],
  "fontPair": "cormorant",
  "formVariant": "single",
  "language": "zh"
}/*EDITMODE-END*/;

const PALETTES = [
  ["#1f3a2e", "#b89968", "#f5efe4", "#faf6ee", "#2c4a3c", "#d6b98a", "#ebe2d0"],
  ["#4a1f28", "#c2a679", "#f3ede2", "#fbf6ed", "#5d2b34", "#d8c096", "#e9dec9"],
  ["#1c2840", "#b08070", "#f1ece4", "#f9f5ec", "#2c3955", "#cea394", "#e6dccc"],
  ["#4a574b", "#9c7a4f", "#efe9dc", "#f8f4e9", "#5c6a5d", "#bb9b73", "#ddd2bd"],
];

const FONT_PAIRS = {
  cormorant: { display: "'Cormorant Garamond', 'Noto Serif TC', serif", han: "'Noto Serif TC', serif", body: "'Inter', 'Noto Serif TC', system-ui, sans-serif" },
  playfair: { display: "'Playfair Display', 'Noto Serif TC', serif", han: "'Noto Serif TC', serif", body: "'Inter', 'Noto Serif TC', system-ui, sans-serif" },
  ebgaramond: { display: "'EB Garamond', 'Noto Serif TC', serif", han: "'Noto Serif TC', serif", body: "'Inter', 'Noto Serif TC', system-ui, sans-serif" },
  italiana: { display: "'Italiana', 'Noto Serif TC', serif", han: "'Noto Serif TC', serif", body: "'Inter', 'Noto Serif TC', system-ui, sans-serif" },
};

const INTRO = {
  zh: {
    title: '邀請函',
    han: '誠摯邀請您共享喜悅',
    intro: '為了讓我們能更貼心地為您安排當天座位與餐點，請填寫以下表單。',
    comingSoon: '完整網站即將於 2026 年 11 月上線',
  },
  en: {
    title: 'You are invited',
    han: '誠摯邀請您',
    intro: 'So we can prepare seating and meals just the way you like, please fill out the form below.',
    comingSoon: 'Full site launching November 2026',
  },
};

function RSVPPage() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(t.language || 'zh');

  useEffect(() => {
    const p = t.palette;
    if (!p) return;
    const root = document.documentElement;
    root.style.setProperty('--c-ink', p[0]);
    root.style.setProperty('--c-gold', p[1]);
    root.style.setProperty('--c-cream', p[2]);
    root.style.setProperty('--c-paper', p[3]);
    root.style.setProperty('--c-ink-soft', p[4]);
    root.style.setProperty('--c-gold-soft', p[5]);
    root.style.setProperty('--c-cream-deep', p[6]);
    root.style.setProperty('--c-rule', `${p[0]}2e`);
  }, [t.palette]);

  useEffect(() => {
    const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS.cormorant;
    const root = document.documentElement;
    root.style.setProperty('--f-display', pair.display);
    root.style.setProperty('--f-han', pair.han);
    root.style.setProperty('--f-body', pair.body);
  }, [t.fontPair]);

  useEffect(() => {
    if (t.language !== lang) setTweak('language', lang);
    document.documentElement.lang = lang === 'zh' ? 'zh-Hant' : 'en';
  }, [lang]);

  // Reveal
  useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);

  const tr = window.TRANSLATIONS[lang] || window.TRANSLATIONS.zh;
  const intro = INTRO[lang];

  const RSVPFormComp = window.RSVPForm;
  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect } = window;

  return (
    <React.Fragment>
      <div className="page">
        {/* Left — branded panel */}
        <aside className="brand">
          <div className="brand-inner">
            <div className="brand-head">
              <div className="brand-mono">YLC &amp; Heidi</div>
              <div className="lang-toggle">
                <button className={lang === 'zh' ? 'active' : ''} onClick={() => setLang('zh')}>中</button>
                <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
              </div>
            </div>

            <div className="brand-hero">
              <div className="brand-eyebrow">{lang === 'zh' ? '我 們 結 婚 了' : 'We are getting married'}</div>
              <div className="brand-names">
                <span>YLC</span>
                <span className="amp">&amp;</span>
                <span>Heidi</span>
              </div>
              <div className="brand-han">詠 嵐 · 婉 頤</div>

              <div className="ornament">
                <span className="line"></span>
                <span className="diamond"></span>
                <span className="line"></span>
              </div>

              <div className="brand-meta">
                <div className="meta-row">
                  <div className="meta-lbl">{lang === 'zh' ? '日期' : 'Date'}</div>
                  <div className="meta-val">12 · 25 · 2026</div>
                  <div className="meta-han">{lang === 'zh' ? '星期五 · 中午 12:00' : 'Friday · 12:00 noon'}</div>
                </div>
                <div className="meta-row">
                  <div className="meta-lbl">{lang === 'zh' ? '地點' : 'Venue'}</div>
                  <div className="meta-val">
                    Sheraton Hsinchu
                    <a
                      href="https://maps.app.goo.gl/yQrzidf4qjGsJHfQ7"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="map-pin"
                      aria-label="Open in Google Maps"
                      title={lang === 'zh' ? '在 Google 地圖中開啟' : 'Open in Google Maps'}
                    >
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M12 22s-7-7.5-7-13a7 7 0 0114 0c0 5.5-7 13-7 13z" />
                        <circle cx="12" cy="9" r="2.5" />
                      </svg>
                    </a>
                  </div>
                  <div className="meta-han">新竹喜來登 · 宴會廳</div>
                </div>
              </div>
            </div>
          </div>
        </aside>

        {/* Right — form */}
        <main className="form-side">
          <div className="form-shell">
            <div className="form-head reveal">
              <span className="form-eyebrow">— {lang === 'zh' ? '線上報名' : 'Kindly reply'} —</span>
              <h1 className="form-title">
                {intro.title}
                <span className="han">{intro.han}</span>
              </h1>
              <p className={`form-intro ${lang === 'zh' ? 'han' : ''}`}>{intro.intro}</p>
            </div>

            <div className="reveal">
              <RSVPFormComp tr={tr.rsvp} variant={t.formVariant} lang={lang} />
            </div>
            <div className="form-accent reveal">
              <div className="accent-frame">
                <img src="assets/photo-08.jpg" alt="" />
              </div>
              <div className="accent-rule"></div>
              <div className="accent-note">{lang === 'zh' ? '誠摯期待當天與您相見' : 'We can\'t wait to see you on the day'}</div>
            </div>
          </div>
        </main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor
          label="Palette"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSelect
          label="Font pairing"
          value={t.fontPair}
          options={[
            { value: 'cormorant', label: 'Cormorant + Noto Serif TC' },
            { value: 'playfair', label: 'Playfair + Noto Serif TC' },
            { value: 'ebgaramond', label: 'EB Garamond + Noto Serif TC' },
            { value: 'italiana', label: 'Italiana + Noto Serif TC' },
          ]}
          onChange={(v) => setTweak('fontPair', v)}
        />

        <TweakSection label="Form" />
        <TweakRadio
          label="Layout"
          value={t.formVariant}
          options={['single', 'multi']}
          onChange={(v) => setTweak('formVariant', v)}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Site language"
          value={lang}
          options={['zh', 'en']}
          onChange={(v) => setLang(v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<RSVPPage />);