// Tweaks panel for Yünfēng site
const { useEffect } = React;

const YUNFENG_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A88955",
  "background": "#F4ECDE",
  "headingFont": "'Cormorant Garamond', serif",
  "bodyFont": "'Inter', sans-serif",
  "showCnGlyph": true,
  "ctaStyle": "solid"
}/*EDITMODE-END*/;

const ACCENTS = [
  '#A88955', // gold (current)
  '#8B6F47', // bronze
  '#5C7A6B', // sage
  '#9B6B5A'  // terracotta
];

const BG_OPTIONS = [
  '#F4ECDE', // cream (current)
  '#E8DDC9', // sand
  '#F7F2E8', // off-white
  '#EDE4D2'  // beige
];

const HEADING_FONTS = [
  "'Cormorant Garamond', serif",
  "'Playfair Display', serif",
  "'DM Serif Display', serif",
  "'Libre Caslon Text', serif"
];

const BODY_FONTS = [
  "'Inter', sans-serif",
  "'Outfit', sans-serif",
  "'Manrope', sans-serif",
  "'DM Sans', sans-serif"
];

function YunfengTweaks() {
  const [t, setTweak] = window.useTweaks(YUNFENG_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--gold', t.accent);
    r.style.setProperty('--cream', t.background);
  }, [t.accent, t.background]);

  useEffect(() => {
    // load any needed Google fonts on demand
    const families = new Set();
    [t.headingFont, t.bodyFont].forEach(f => {
      const m = f.match(/'([^']+)'/);
      if (m) families.add(m[1].replace(/ /g, '+'));
    });
    const id = '__tweak-fonts';
    let link = document.getElementById(id);
    const href = `https://fonts.googleapis.com/css2?${[...families].map(f => `family=${f}:ital,wght@0,300;0,400;0,500;0,600;1,400`).join('&')}&display=swap`;
    if (!link) {
      link = document.createElement('link');
      link.id = id;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }
    link.href = href;

    // Apply fonts via inline style override
    const styleId = '__tweak-font-overrides';
    let s = document.getElementById(styleId);
    if (!s) {
      s = document.createElement('style');
      s.id = styleId;
      document.head.appendChild(s);
    }
    s.textContent = `
      h1, h2, h3, h4, .serif, .brand-mark .name, .ft-brand .name,
      .quote, .hero-tag .num, .ai-stats .stat .v, .rit-name,
      .ig-follow .handle, .test-card .q, .cal-head .m, .ub-info h2,
      .ft-brand .tagline {
        font-family: ${t.headingFont} !important;
      }
      body, p, button, input, .nav-links a, .eyebrow, .step-lbl,
      .ft-col, .ub-line .lbl, .rit-desc, .rit-meta {
        font-family: ${t.bodyFont} !important;
      }
    `;
  }, [t.headingFont, t.bodyFont]);

  useEffect(() => {
    document.documentElement.style.setProperty('--show-cn', t.showCnGlyph ? 'block' : 'none');
    document.querySelectorAll('.cn').forEach(el => {
      el.style.display = t.showCnGlyph ? '' : 'none';
    });
    // Hero background glyph
    const heroStyle = document.getElementById('__cn-glyph-style') || (() => {
      const s = document.createElement('style');
      s.id = '__cn-glyph-style';
      document.head.appendChild(s);
      return s;
    })();
    heroStyle.textContent = t.showCnGlyph ? '' : `.hero::before, .res-left::before { display: none !important; }`;
  }, [t.showCnGlyph]);

  useEffect(() => {
    const styleId = '__cta-style';
    let s = document.getElementById(styleId);
    if (!s) {
      s = document.createElement('style');
      s.id = styleId;
      document.head.appendChild(s);
    }
    if (t.ctaStyle === 'outline') {
      s.textContent = `
        .btn-primary { background: transparent !important; color: var(--bark) !important; border: 1px solid var(--bark) !important; }
        .btn-primary::before { background: var(--bark) !important; }
        .btn-primary:hover { color: var(--cream) !important; }
        .nav-cta { background: transparent !important; color: var(--bark) !important; border: 1px solid var(--bark) !important; }
        .nav-cta:hover { background: var(--bark) !important; color: var(--cream) !important; }
      `;
    } else if (t.ctaStyle === 'gold') {
      s.textContent = `
        .btn-primary { background: var(--gold) !important; }
        .nav-cta { background: var(--gold) !important; }
      `;
    } else {
      s.textContent = '';
    }
  }, [t.ctaStyle]);

  return (
    <window.TweaksPanel title="Tweaks · Yünfēng">
      <window.TweakSection title="Color">
        <window.TweakColor
          label="Acento"
          value={t.accent}
          options={ACCENTS}
          onChange={(v) => setTweak('accent', v)}
        />
        <window.TweakColor
          label="Fondo crema"
          value={t.background}
          options={BG_OPTIONS}
          onChange={(v) => setTweak('background', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Tipografía">
        <window.TweakSelect
          label="Títulos (serif)"
          value={t.headingFont}
          options={HEADING_FONTS.map(f => ({ value: f, label: f.match(/'([^']+)'/)[1] }))}
          onChange={(v) => setTweak('headingFont', v)}
        />
        <window.TweakSelect
          label="Cuerpo (sans)"
          value={t.bodyFont}
          options={BODY_FONTS.map(f => ({ value: f, label: f.match(/'([^']+)'/)[1] }))}
          onChange={(v) => setTweak('bodyFont', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Estilo">
        <window.TweakRadio
          label="Estilo de botón"
          value={t.ctaStyle}
          options={[
            { value: 'solid', label: 'Sólido' },
            { value: 'gold', label: 'Dorado' },
            { value: 'outline', label: 'Outline' }
          ]}
          onChange={(v) => setTweak('ctaStyle', v)}
        />
        <window.TweakToggle
          label="Mostrar glifos chinos (云)"
          value={t.showCnGlyph}
          onChange={(v) => setTweak('showCnGlyph', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<YunfengTweaks />);