(function () {
  const POLICY_VERSION = '2026-08-01';
  const CONSENT_DURATION_MS = 1000 * 60 * 60 * 24 * 182; // ~6 months, adjust here to change duration
  const STORAGE_KEY = 'acorn_cookie_consent';
  const listeners = [];

  function readConsent() {
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) return null;
      return JSON.parse(raw);
    } catch (e) { return null; }
  }

  function isValid(consent) {
    if (!consent) return false;
    if (consent.policyVersion !== POLICY_VERSION) return false;
    if (!consent.timestamp || Date.now() - consent.timestamp > CONSENT_DURATION_MS) return false;
    return true;
  }

  function writeConsent(partial) {
    const consent = { essential: true, analytics: false, preference: false, ...partial, timestamp: Date.now(), policyVersion: POLICY_VERSION };
    localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
    listeners.forEach((cb) => { try { cb(consent); } catch (e) {} });
    applyScripts(consent);
    return consent;
  }

  // Integration points: swap these for real script loaders once providers are chosen.
  function applyScripts(consent) {
    if (consent.analytics) { /* load analytics scripts here */ } else { /* stop/disable analytics scripts here */ }
    if (consent.preference) { /* load preference scripts here */ } else { /* stop/disable preference scripts here */ }
  }

  let openPanelFn = null;
  window.AcornConsent = {
    getConsent: readConsent,
    hasValidConsent: () => isValid(readConsent()),
    onChange: (cb) => { listeners.push(cb); },
    open: () => { if (openPanelFn) openPanelFn(); },
  };

  const { useState, useEffect, useRef } = React;

  function ToggleRow({ label, status, description, checked, onChange, locked }) {
    return (
      <div style={{ padding: '13px 0', borderTop: '1px solid var(--border-default)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, marginBottom: 4 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)' }}>{label}</div>
          {locked
            ? <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, color: 'var(--blue-600)', background: 'var(--blue-50)', padding: '3px 9px', borderRadius: 'var(--radius-pill)' }}>{status}</span>
            : <button role="switch" aria-checked={checked} aria-label={label} onClick={() => onChange(!checked)} style={{ width: 36, height: 20, borderRadius: 999, border: 'none', cursor: 'pointer', background: checked ? 'var(--blue-500)' : 'var(--warm-300)', position: 'relative', flexShrink: 0 }}><span aria-hidden="true" style={{ position: 'absolute', top: 2, left: checked ? 18 : 2, width: 16, height: 16, borderRadius: '50%', background: '#fff', boxShadow: 'var(--shadow-sm)', transition: 'left 150ms' }} /></button>}
        </div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.45, color: 'var(--text-body)', margin: 0 }}>{description}</p>
      </div>
    );
  }

  function PreferencesPanel({ onClose, onSave, initial, triggerRef }) {
    const [analytics, setAnalytics] = useState(initial.analytics);
    const [preference, setPreference] = useState(initial.preference);
    const panelRef = useRef(null);

    useEffect(() => {
      const el = panelRef.current;
      if (el) { const f = el.querySelector('button, [href], input, [tabindex]'); if (f) f.focus(); }
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      document.addEventListener('keydown', onKey);
      return () => {
        document.removeEventListener('keydown', onKey);
        if (triggerRef && triggerRef.current) triggerRef.current.focus();
      };
    }, []);

    return (
      <div role="dialog" aria-modal="true" aria-label="Cookie preferences" style={{ position: 'fixed', inset: 0, zIndex: 10001 }}>
        <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'transparent' }} />
        <div ref={panelRef} style={{ position: 'absolute', right: 20, bottom: 20, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', maxWidth: 380, width: 'calc(100vw - 40px)', boxSizing: 'border-box', maxHeight: '70vh', overflowY: 'auto', padding: '20px 22px 18px' }}>
          <button aria-label="Close cookie preferences" onClick={onClose} style={{ position: 'absolute', top: 16, right: 16, background: 'none', border: 'none', cursor: 'pointer', fontSize: 18, color: 'var(--text-muted)', lineHeight: 1 }}>×</button>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 18, color: 'var(--text-heading)', margin: '0 0 8px', paddingRight: 20 }}>Choose Your Cookie Preferences</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-body)', margin: '0 0 4px' }}>Essential cookies keep the website working and cannot be turned off. You can choose whether Acorn may also use analytics and preference cookies.</p>
          <ToggleRow label="Essential Cookies" status="Always Active" locked
            description="These cookies support website security, navigation, forms, consent preferences, and other core functions required for the Acorn website to operate. This category cannot be disabled." />
          <ToggleRow label="Analytics Cookies" checked={analytics} onChange={setAnalytics}
            description="These cookies help us understand how visitors use the website, which pages are useful, and where the experience can be improved." />
          <ToggleRow label="Preference Cookies" checked={preference} onChange={setPreference}
            description="These cookies remember optional choices that may make future visits more convenient, such as certain display or website preferences." />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 16, alignItems: 'center' }}>
            <button onClick={() => onSave({ analytics, preference })} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, padding: '9px 18px', borderRadius: 'var(--radius-pill)', background: 'var(--brand-primary)', color: '#fff', border: 'none', cursor: 'pointer' }}>Save My Choices</button>
            <button onClick={() => onSave({ analytics: true, preference: true })} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, padding: '9px 18px', borderRadius: 'var(--radius-pill)', background: 'transparent', color: 'var(--blue-600)', border: '1.5px solid var(--border-default)', cursor: 'pointer' }}>Accept All</button>
            <button onClick={() => onSave({ analytics: false, preference: false })} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, background: 'none', border: 'none', color: 'var(--text-muted)', textDecoration: 'underline', cursor: 'pointer', padding: '6px 4px' }}>Use Essential Only</button>
          </div>
        </div>
      </div>
    );
  }

  function Toast({ message }) {
    return (
      <div role="status" aria-live="polite" style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 10002, background: 'var(--surface-card)', border: '1px solid var(--border-default)', boxShadow: 'var(--shadow-md)', borderRadius: 'var(--radius-md)', padding: '12px 20px', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-heading)' }}>{message}</div>
    );
  }

  function CookieConsent() {
    const [showBanner, setShowBanner] = useState(false);
    const [showPanel, setShowPanel] = useState(false);
    const [toast, setToast] = useState(false);
    const bannerTriggerRef = useRef(null);

    useEffect(() => {
      setShowBanner(!isValid(readConsent()));
      window.AcornConsent.open = () => setShowPanel(true);
    }, []);

    const finish = (partial) => {
      writeConsent(partial);
      setShowBanner(false);
      setShowPanel(false);
      setToast(true);
      setTimeout(() => setToast(false), 1200);
    };

    return (
      <React.Fragment>
        {showBanner && (
          <div role="region" aria-label="Cookie notice" className="acorn-cookie-banner" style={{ position: 'fixed', right: 20, bottom: 20, zIndex: 10000, maxWidth: 380, width: 'calc(100vw - 40px)', background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: '18px 20px 16px' }}>
            <style>{'@media(max-width:480px){.acorn-cookie-banner{left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;max-width:none!important;padding:12px 14px 10px!important}.acorn-cookie-banner .cookie-banner-title{font-size:13.5px!important;margin:0 0 3px!important}.acorn-cookie-banner .cookie-banner-body{font-size:11.5px!important;line-height:1.35!important;margin:0 0 4px!important}.acorn-cookie-banner .cookie-banner-link{font-size:11px!important}.acorn-cookie-banner .cookie-banner-actions{margin-top:8px!important;gap:6px!important}.acorn-cookie-banner .cookie-banner-actions button{padding:6px 12px!important;font-size:11.5px!important}}'}</style>
            <div className="cookie-banner-title" style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15, color: 'var(--text-heading)', margin: '0 0 6px' }}>A Quick Note About Cookies</div>
            <p className="cookie-banner-body" style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.5, color: 'var(--text-body)', margin: '0 0 6px' }}>We use essential cookies to keep the site secure. With your permission, we'd also like to use analytics and preference cookies to improve your experience.</p>
            <a href="Cookie Policy.html" className="cookie-banner-link" style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--blue-600)', fontWeight: 600, textDecoration: 'underline' }}>Read our Cookie Policy</a>
            <div className="cookie-banner-actions" style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
              <button onClick={() => finish({ analytics: true, preference: true })} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, padding: '9px 18px', borderRadius: 'var(--radius-pill)', background: 'var(--brand-primary)', color: '#fff', border: 'none', cursor: 'pointer' }}>Accept All</button>
              <button onClick={() => finish({ analytics: false, preference: false })} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, padding: '9px 16px', borderRadius: 'var(--radius-pill)', background: 'transparent', color: 'var(--text-heading)', border: '1.5px solid var(--border-strong)', cursor: 'pointer' }}>Essential Only</button>
              <button ref={bannerTriggerRef} onClick={() => setShowPanel(true)} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, background: 'none', border: 'none', color: 'var(--blue-600)', textDecoration: 'underline', cursor: 'pointer', padding: '9px 2px' }}>Cookie Settings</button>
            </div>
          </div>
        )}
        {showPanel && <PreferencesPanel initial={readConsent() || { analytics: false, preference: false }} onClose={() => setShowPanel(false)} onSave={finish} triggerRef={bannerTriggerRef} />}
        {toast && <Toast message="Your cookie preferences have been saved." />}
      </React.Fragment>
    );
  }

  const mount = document.createElement('div');
  mount.id = 'acorn-cookie-consent-root';
  document.body.appendChild(mount);
  ReactDOM.createRoot(mount).render(<CookieConsent />);
})();