// Accessibility widget + Cookie banner — Salon Crème
const { useState: useStateAx, useEffect: useEffectAx } = React;

// ---------- Cookie banner ----------
window.CookieBanner = function CookieBanner() {
  const [open, setOpen] = useStateAx(false);

  useEffectAx(() => {
    try {
      const seen = localStorage.getItem('sc_cookies_v1');
      if (!seen) setTimeout(() => setOpen(true), 800);
    } catch (e) { setOpen(true); }
  }, []);

  const accept = (mode) => {
    try { localStorage.setItem('sc_cookies_v1', mode); } catch (e) {}
    setOpen(false);
  };

  if (!open) return null;
  return (
    <div className="cookie-banner" role="dialog" aria-live="polite" aria-label="הודעת עוגיות">
      <div className="cookie-inner">
        <div className="cookie-icon" aria-hidden="true">
          <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.3">
            <circle cx="16" cy="16" r="12" fill="#E8D4B8" stroke="#7A4F2A" />
            <circle cx="11" cy="13" r="1.4" fill="#5A3418" stroke="none" />
            <circle cx="20" cy="11" r="1.1" fill="#5A3418" stroke="none" />
            <circle cx="14" cy="20" r="1.6" fill="#5A3418" stroke="none" />
            <circle cx="22" cy="19" r="1.2" fill="#5A3418" stroke="none" />
            <circle cx="18" cy="16" r="0.9" fill="#5A3418" stroke="none" />
          </svg>
        </div>
        <div className="cookie-text">
          <h4>עוגיות בבית של Salon Crème</h4>
          <p>אנחנו משתמשים בעוגיות (לא מהמאפייה) כדי לשפר את חוויית הגלישה, לשמור את העגלה שלכם ולהבין איך השתמשתם באתר. אפשר לקבל הכל, או רק את החיוניות.</p>
        </div>
        <div className="cookie-actions">
          <button className="ck-btn outline" onClick={() => accept('essential')}>חיוניות בלבד</button>
          <button className="ck-btn solid" onClick={() => accept('all')}>אישור והמשך</button>
        </div>
        <button className="ck-close" aria-label="סגור" onClick={() => accept('essential')}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
      </div>
    </div>
  );
};

// ---------- Accessibility widget ----------
const A11Y_KEY = 'sc_a11y_v1';
const A11Y_DEFAULTS = {
  textScale: 1,
  contrast: false,
  grayscale: false,
  underlineLinks: false,
  pauseMotion: false,
  bigCursor: false,
};

window.A11yWidget = function A11yWidget() {
  const [open, setOpen] = useStateAx(false);
  const [s, setS] = useStateAx(A11Y_DEFAULTS);

  useEffectAx(() => {
    try {
      const raw = localStorage.getItem(A11Y_KEY);
      if (raw) setS({ ...A11Y_DEFAULTS, ...JSON.parse(raw) });
    } catch (e) {}
  }, []);

  useEffectAx(() => {
    try { localStorage.setItem(A11Y_KEY, JSON.stringify(s)); } catch (e) {}
    const root = document.documentElement;
    root.style.setProperty('--a11y-scale', s.textScale);
    root.classList.toggle('a11y-contrast', s.contrast);
    root.classList.toggle('a11y-grayscale', s.grayscale);
    root.classList.toggle('a11y-underline', s.underlineLinks);
    root.classList.toggle('a11y-pause', s.pauseMotion);
    root.classList.toggle('a11y-big-cursor', s.bigCursor);
  }, [s]);

  const set = (k, v) => setS(prev => ({ ...prev, [k]: v }));
  const reset = () => setS(A11Y_DEFAULTS);

  return (
    <>
      <button
        className={"a11y-fab " + (open ? "is-open" : "")}
        aria-label="פתח תפריט נגישות"
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="4.5" r="1.6" fill="currentColor" stroke="none"/>
          <path d="M5 8.5h14" />
          <path d="M9 8.5l1 12" />
          <path d="M15 8.5l-1 12" />
          <path d="M9 13h6" />
        </svg>
      </button>

      {open && (
        <div className="a11y-panel" role="dialog" aria-label="הגדרות נגישות">
          <div className="a11y-head">
            <div>
              <span className="eyebrow-en">ACCESSIBILITY</span>
              <h4>תפריט נגישות</h4>
            </div>
            <button className="a11y-x" aria-label="סגור" onClick={() => setOpen(false)}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
          </div>

          <div className="a11y-section">
            <span className="a11y-label">גודל טקסט</span>
            <div className="a11y-text-size">
              {[
                { v: 0.9, l: "א" },
                { v: 1.0, l: "א" },
                { v: 1.15, l: "א" },
                { v: 1.3, l: "א" },
                { v: 1.5, l: "א" },
              ].map((opt, i) => (
                <button
                  key={i}
                  className={Math.abs(s.textScale - opt.v) < 0.02 ? "active" : ""}
                  onClick={() => set('textScale', opt.v)}
                  style={{ fontSize: `${12 + i * 3}px` }}
                  aria-label={`גודל טקסט ${Math.round(opt.v * 100)} אחוז`}
                >{opt.l}</button>
              ))}
            </div>
          </div>

          <div className="a11y-toggles">
            {[
              { k: 'contrast',       l: 'ניגודיות גבוהה',     d: 'רקע לבן, טקסט שחור' },
              { k: 'grayscale',      l: 'גווני אפור',         d: 'הפחתת צבע למסך' },
              { k: 'underlineLinks', l: 'הדגשת קישורים',     d: 'קו תחתון לכל קישור' },
              { k: 'pauseMotion',    l: 'עצירת אנימציות',    d: 'הפחתת תנועה במסך' },
              { k: 'bigCursor',      l: 'סמן עכבר גדול',      d: 'סמן עם קונטור בולט' },
            ].map(t => (
              <button
                key={t.k}
                className={"a11y-toggle " + (s[t.k] ? "on" : "")}
                onClick={() => set(t.k, !s[t.k])}
                aria-pressed={s[t.k]}
              >
                <span className="a11y-toggle-text">
                  <span className="a11y-toggle-l">{t.l}</span>
                  <span className="a11y-toggle-d">{t.d}</span>
                </span>
                <span className="a11y-switch" aria-hidden="true"><span className="dot"></span></span>
              </button>
            ))}
          </div>

          <div className="a11y-foot">
            <button className="a11y-reset" onClick={reset}>איפוס הגדרות</button>
            <span className="eyebrow-en">תקן ישראלי 5568 · רמה AA</span>
          </div>
        </div>
      )}
    </>
  );
};