/* ── BRAND WHITE LABEL ────────────────────────────────────────
   Agency-level white-label config. The single source of truth for
   client-facing proposal / email / portal branding.

   Surfaces:
   - Brand Profile → White Label tab (this file's <BrandWhiteLabelTab/>)
   - Estimator proposal preview (reads via window.useBrandProfile)
   - Proposal / Email Template (future rebuild)

   State: localStorage['wpsb-brand-profile']
   Hook:  window.useBrandProfile() → [profile, update, reset]
*/

const BRAND_KEY = 'wpsb-brand-profile-v1';

const DEFAULT_BRAND = {
  // Identity (read-only mirror from Brand Profile → Identity tab in future)
  agencyName:     'Your Agency Name',
  agencyTagline:  'Professional WordPress Solutions',
  agencyWebsite:  'https://youragency.com',

  // White label & branding
  logoUrl:        '',
  primaryColor:   'var(--beam)',
  hideWpsbFooter: false,       // Agency plan gate
  hideInternalPricing: true,
  bookingLink:    '',
  hourlyRate:     35,

  // Proposal cover & back page
  coverTheme:     'tech',       // tech | natural | simple | bold | wave | geometric | gradient | dark | light | civic
  accentOverride: '',           // '' = inherit from primaryColor
  coverHeadline:  'Your Vision. Our Expertise.',
  coverSubhead:   'Professional WordPress Solutions',
  backCTA:        "Let's build something great.",

  // Email template defaults
  emailFromName:  'Your Agency',
  emailReplyTo:   'hello@youragency.com',
  emailSignature: 'Best,\nYour Name\nYour Agency',
};

function loadBrandProfile() {
  try {
    const raw = localStorage.getItem(BRAND_KEY);
    if (!raw) return { ...DEFAULT_BRAND };
    return { ...DEFAULT_BRAND, ...JSON.parse(raw) };
  } catch (e) { return { ...DEFAULT_BRAND }; }
}
function saveBrandProfile(p) {
  try { localStorage.setItem(BRAND_KEY, JSON.stringify(p)); } catch (e) {}
}

let _brandState = loadBrandProfile();
const _brandSubs = new Set();
function _notifyBrand() { _brandSubs.forEach(fn => fn(_brandState)); }

window.useBrandProfile = function useBrandProfile() {
  const { useState, useEffect } = React;
  const [state, setState] = useState(_brandState);
  useEffect(() => {
    _brandSubs.add(setState);
    return () => _brandSubs.delete(setState);
  }, []);
  const update = (patch) => {
    _brandState = typeof patch === 'function' ? patch(_brandState) : { ..._brandState, ...patch };
    saveBrandProfile(_brandState);
    _notifyBrand();
    window.wpsbToast?.('Brand profile saved', 'ok');
  };
  const reset = () => {
    _brandState = { ...DEFAULT_BRAND };
    saveBrandProfile(_brandState);
    _notifyBrand();
    window.wpsbToast?.('Brand profile reset', 'ok');
  };
  return [state, update, reset];
};

/* ── THEME CATALOG (cover backgrounds) ───────────────────────── */
const COVER_THEMES = {
  tech:      { label: 'Tech',      icon: '🖥️', bg: 'linear-gradient(135deg, #0b1426 0%, #102043 55%, #0d3b5c 100%)', pattern: 'grid' },
  natural:   { label: 'Natural',   icon: '🌿', bg: 'linear-gradient(135deg, #1a2e1f 0%, #2d4a2d 55%, #3d5a3d 100%)', pattern: 'organic' },
  simple:    { label: 'Simple',    icon: '▫️',  bg: 'linear-gradient(135deg, #111214 0%, #1a1b1e 55%, #222326 100%)', pattern: 'none' },
  bold:      { label: 'Bold',      icon: '■',  bg: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)', pattern: 'stripe' },
  wave:      { label: 'Wave',      icon: '🌊', bg: 'linear-gradient(135deg, #0a1929 0%, #1e3a5f 55%, #4a7ba7 100%)', pattern: 'wave' },
  geometric: { label: 'Geometric', icon: '◆',  bg: 'linear-gradient(135deg, #0d0d1a 0%, #1a1a3a 55%, #2a2a5a 100%)', pattern: 'geo' },
  gradient:  { label: 'Gradient',  icon: '🎨', bg: 'linear-gradient(135deg, #4a148c 0%, #880e4f 55%, #bf360c 100%)', pattern: 'none' },
  dark:      { label: 'Dark',      icon: '🌙', bg: 'linear-gradient(135deg, #000 0%, #0a0a0f 100%)', pattern: 'stars' },
  light:     { label: 'Light',     icon: '☀️', bg: 'linear-gradient(135deg, #f8f9fb 0%, #eef2f7 100%)', pattern: 'none', inverted: true },
  civic:     { label: 'Civic',     icon: '🏛️', bg: 'linear-gradient(135deg, #14213d 0%, #1a365d 55%, #2c5282 100%)', pattern: 'seal' },
};

/* ── PROPOSAL COVER PREVIEW ──────────────────────────────────── */
function ProposalCoverPreview({ profile, mini }) {
  const theme = COVER_THEMES[profile.coverTheme] || COVER_THEMES.tech;
  const accent = profile.accentOverride || profile.primaryColor;
  const fgMain = theme.inverted ? '#0a0a0a' : '#fff';
  const fgDim  = theme.inverted ? '#666' : 'rgba(255,255,255,.6)';

  const patterns = {
    grid: (
      <svg width="100%" height="100%" style={{ position:'absolute', inset:0, opacity:.25 }}>
        <defs>
          <pattern id="p-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0L0 0 0 40" fill="none" stroke={accent} strokeWidth=".5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#p-grid)"/>
      </svg>
    ),
    stars: (
      <svg width="100%" height="100%" style={{ position:'absolute', inset:0, opacity:.6 }}>
        {Array.from({ length: 40 }).map((_, i) => (
          <circle key={i} cx={`${(i*13)%100}%`} cy={`${(i*37)%100}%`} r={Math.random()*1.5+0.5} fill="#fff" opacity={Math.random()*.6+.3}/>
        ))}
      </svg>
    ),
    wave: (
      <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position:'absolute', inset:0, opacity:.3 }}>
        <path d="M0 120 Q100 80 200 120 T400 120 L400 200 L0 200 Z" fill={accent}/>
        <path d="M0 140 Q100 100 200 140 T400 140 L400 200 L0 200 Z" fill={accent} opacity=".5"/>
      </svg>
    ),
    geo: (
      <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position:'absolute', inset:0, opacity:.15 }}>
        <polygon points="50,30 80,60 50,90 20,60" fill={accent}/>
        <polygon points="350,150 380,180 350,195 320,180" fill={accent}/>
        <polygon points="200,20 230,50 200,80 170,50" fill="none" stroke={accent} strokeWidth="1"/>
      </svg>
    ),
    seal: (
      <svg width="100%" height="100%" style={{ position:'absolute', right: 20, top: '50%', transform:'translateY(-50%)', opacity:.15, width: 120, height: 120 }}>
        <circle cx="60" cy="60" r="55" fill="none" stroke={accent} strokeWidth="2"/>
        <circle cx="60" cy="60" r="45" fill="none" stroke={accent} strokeWidth="1"/>
        <circle cx="60" cy="60" r="35" fill={accent} opacity=".2"/>
      </svg>
    ),
    stripe: (
      <div style={{ position:'absolute', inset:0, background:`repeating-linear-gradient(45deg, transparent, transparent 20px, ${accent}08 20px, ${accent}08 40px)` }}/>
    ),
    organic: (
      <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position:'absolute', inset:0, opacity:.25 }}>
        <ellipse cx="80" cy="180" rx="120" ry="40" fill={accent}/>
        <ellipse cx="320" cy="30" rx="80" ry="25" fill={accent} opacity=".6"/>
      </svg>
    ),
    none: null,
  };

  const h = mini ? 180 : 260;
  const fs = mini ? .7 : 1;

  return (
    <div style={{ display:'flex', flexDirection:'column', gap: mini ? 6 : 12 }}>
      {/* Cover */}
      <div style={{ height: h, borderRadius: 10, position:'relative', overflow:'hidden', background: theme.bg, border:'1px solid var(--border)' }}>
        {patterns[theme.pattern]}
        {/* Accent bottom line */}
        <div style={{ position:'absolute', left:0, right:0, bottom: 0, height: 2, background: accent }}/>
        {/* Content */}
        <div style={{ position:'absolute', inset:0, padding: mini ? '20px 24px' : '36px 44px', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', textAlign:'center', gap: mini ? 8 : 14 }}>
          <div style={{ fontSize: `${1.6*fs}rem`, fontWeight:800, color: accent, letterSpacing:'.01em' }}>{profile.agencyName}</div>
          <div style={{ fontSize: `${2.2*fs}rem`, fontWeight:800, color: fgMain, lineHeight:1.15, textWrap:'balance', maxWidth: '80%' }}>{profile.coverHeadline}</div>
          <div style={{ fontSize: `${.88*fs}rem`, color: fgDim, letterSpacing:'.02em' }}>{profile.coverSubhead}</div>
        </div>
      </div>
      {/* Back page */}
      <div style={{ height: h, borderRadius: 10, position:'relative', overflow:'hidden', background: theme.bg, border:'1px solid var(--border)' }}>
        {patterns[theme.pattern]}
        <div style={{ position:'absolute', left:0, right:0, top: 0, height: 2, background: accent }}/>
        <div style={{ position:'absolute', inset:0, padding: mini ? '20px 24px' : '36px 44px', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', textAlign:'center', gap: mini ? 10 : 18 }}>
          <div style={{ fontSize: `${1.5*fs}rem`, fontWeight:800, color: fgMain, maxWidth:'80%', textWrap:'balance' }}>{profile.backCTA}</div>
          <button style={{
            background: accent, color: theme.inverted ? '#fff' : '#0a0a0a',
            border:'none', borderRadius: 999, padding: `${mini ? 8 : 12}px ${mini ? 18 : 28}px`,
            fontSize: `${.95*fs}rem`, fontWeight:700, cursor:'pointer',
          }}>{profile.agencyName}</button>
        </div>
      </div>
      <div style={{ textAlign:'center', fontSize:'.7rem', color:'var(--dim)', marginTop: 4 }}>
        Cover (top) · Back page (bottom) · Theme: <strong style={{ color:'var(--text-2)' }}>{theme.label}</strong>
      </div>
    </div>
  );
}

/* ── MAIN TAB ────────────────────────────────────────────────── */
function BrandWhiteLabelTab() {
  const { useState } = React;
  const [profile, update, reset] = window.useBrandProfile();
  const [previewOpen, setPreviewOpen] = useState(true);

  const set = (k) => (e) => {
    const val = e && e.target ? (e.target.type === 'checkbox' ? e.target.checked : e.target.value) : e;
    update({ [k]: val });
  };

  return (
    <div style={{ marginTop:16, display:'flex', flexDirection:'column', gap:14 }}>
      {/* ── WHITE LABEL & BRANDING ───────────────────────────── */}
      <div className="card">
        <div className="card-head">
          <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
            <h2 className="card-title" style={{ fontSize:'.74rem', color:'var(--warn)', letterSpacing:1, fontFamily:'var(--font-mono)' }}>WHITE LABEL &amp; BRANDING</h2>
            <span className="tag beam">AGENCY PLAN+</span>
          </div>
        </div>
        <div className="card-body">
          <div className="box info" style={{ marginBottom:14, fontSize:'.8rem' }}>
            <Icon name="info" size={14}/>
            <div>White label settings apply to all proposals, emails, and client-facing outputs. Your logo and colors replace WPSiteBeam branding for your clients. <strong style={{ color:'var(--beam)' }}>WPSiteBeam branding is always hidden from client-facing documents.</strong></div>
          </div>

          <div className="grid grid-2">
            <Field label={<><span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>AGENCY LOGO URL</span></>}>
              <input type="url" placeholder="https://youragency.com/logo.png" value={profile.logoUrl} onChange={set('logoUrl')}/>
              <div style={{ fontSize:'.7rem', color:'var(--dim)', marginTop:4 }}>Used in proposals and email headers. Recommended: PNG, 300×80px max.</div>
            </Field>
            <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>BRAND PRIMARY COLOR</span>}>
              <div style={{ display:'flex', gap:8, alignItems:'center' }}>
                <input type="color" value={profile.primaryColor} onChange={set('primaryColor')} style={{ width:44, height:36, padding:2, borderRadius:6, border:'1px solid var(--border)', background:'var(--surface-3)' }}/>
                <input value={profile.primaryColor} onChange={set('primaryColor')} style={{ flex:1, fontFamily:'var(--font-mono)' }}/>
              </div>
              <div style={{ fontSize:'.7rem', color:'var(--dim)', marginTop:4 }}>Used in proposal headers &amp; accents.</div>
            </Field>

            <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>REMOVE WPSITEBEAM FOOTER CREDIT</span>}>
              <label style={{ display:'flex', gap:8, alignItems:'center', cursor:'pointer', fontSize:'.82rem' }}>
                <input type="checkbox" checked={profile.hideWpsbFooter} onChange={set('hideWpsbFooter')}/>
                <span>Hide "Powered by WPSiteBeam" from all client outputs</span>
              </label>
            </Field>
            <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>HIDE INTERNAL PRICING INFO</span>}>
              <label style={{ display:'flex', gap:8, alignItems:'center', cursor:'pointer', fontSize:'.82rem' }}>
                <input type="checkbox" checked={profile.hideInternalPricing} onChange={set('hideInternalPricing')}/>
                <span>Always hide margin%, profit, and internal cost data from client outputs</span>
              </label>
            </Field>

            <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>BOOKING / CALENDAR LINK</span>}>
              <input type="url" placeholder="https://booking.youragency.com/schedule" value={profile.bookingLink} onChange={set('bookingLink')}/>
              <div style={{ fontSize:'.7rem', color:'var(--dim)', marginTop:4 }}>Appears as "Schedule a Call" button in proposals and emails.</div>
            </Field>
            <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>AGENCY HOURLY RATE ($/HR)</span>}>
              <input type="number" value={profile.hourlyRate} onChange={e => update({ hourlyRate: parseInt(e.target.value) || 0 })}/>
              <div style={{ fontSize:'.7rem', color:'var(--dim)', marginTop:4 }}>Used to auto-calculate support block costs (15/30/60 min × rate).</div>
            </Field>
          </div>

          <div style={{ display:'flex', gap:8, marginTop:14 }}>
            <button className="btn btn-primary btn-sm" onClick={() => window.wpsbToast?.('Branding saved', 'ok')}>
              <Icon name="check" size={13}/>Save branding
            </button>
            <button className="btn btn-ghost btn-sm" onClick={() => setPreviewOpen(v => !v)}>
              <Icon name="search" size={13}/>{previewOpen ? 'Hide preview' : 'Preview proposal'}
            </button>
          </div>
        </div>
      </div>

      {/* ── PROPOSAL COVER & BACK PAGE ───────────────────────── */}
      <div className="card">
        <div className="card-head">
          <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
            <h2 className="card-title" style={{ fontSize:'.74rem', color:'var(--warn)', letterSpacing:1, fontFamily:'var(--font-mono)' }}>PROPOSAL COVER &amp; BACK PAGE</h2>
            <span className="tag beam">AGENCY PLAN+</span>
          </div>
          <span className="tag" style={{ fontSize:'.68rem' }}>{COVER_THEMES[profile.coverTheme]?.label || 'Tech'} / Digital</span>
        </div>
        <div className="card-body" style={{ padding:0 }}>
          <div style={{ display:'grid', gridTemplateColumns: previewOpen ? 'minmax(260px, 320px) 1fr' : '1fr', gap: 0 }}>
            {/* Left: controls */}
            <div style={{ padding:'16px 18px', borderRight: previewOpen ? '1px solid var(--border)' : 'none', display:'flex', flexDirection:'column', gap:14 }}>
              <div>
                <div style={{ fontSize:'.68rem', color:'var(--muted)', letterSpacing:1, fontFamily:'var(--font-mono)', marginBottom:6 }}>THEME</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:6 }}>
                  {Object.entries(COVER_THEMES).map(([id, t]) => (
                    <button key={id} onClick={() => update({ coverTheme: id })}
                      className={profile.coverTheme === id ? 'theme-btn active' : 'theme-btn'}
                      style={{
                        background: profile.coverTheme === id ? 'var(--beam-dim)' : 'var(--surface-3)',
                        border: profile.coverTheme === id ? '1px solid var(--beam)' : '1px solid var(--border)',
                        color: profile.coverTheme === id ? 'var(--beam)' : 'var(--text-2)',
                        padding:'6px 10px', borderRadius:6, fontSize:'.76rem', cursor:'pointer',
                        display:'flex', alignItems:'center', gap:6, justifyContent:'flex-start',
                      }}>
                      <span>{t.icon}</span><span>{t.label}</span>
                    </button>
                  ))}
                </div>
              </div>

              <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>ACCENT COLOR (OVERRIDES AGENCY COLOR)</span>}>
                <div style={{ display:'flex', gap:6, alignItems:'center' }}>
                  <input type="color" value={profile.accentOverride || profile.primaryColor} onChange={e => update({ accentOverride: e.target.value })} style={{ width:36, height:32, padding:2, borderRadius:6, border:'1px solid var(--border)', background:'var(--surface-3)' }}/>
                  <input placeholder="Use agency c" value={profile.accentOverride} onChange={set('accentOverride')} style={{ flex:1, fontFamily:'var(--font-mono)', fontSize:'.75rem' }}/>
                  <button className="btn btn-ghost btn-sm" onClick={() => update({ accentOverride: '' })} style={{ padding:'4px 10px' }}>Reset</button>
                </div>
              </Field>

              <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>COVER HEADLINE</span>}>
                <input placeholder="Your Vision. Our Expertise." value={profile.coverHeadline} onChange={set('coverHeadline')}/>
              </Field>
              <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>SUB-HEADLINE</span>}>
                <input placeholder="Professional WordPress Solutions" value={profile.coverSubhead} onChange={set('coverSubhead')}/>
              </Field>
              <Field label={<span style={{ fontFamily:'var(--font-mono)', fontSize:'.68rem', color:'var(--muted)', letterSpacing:1 }}>BACK PAGE CTA</span>}>
                <input placeholder="Let's build something great." value={profile.backCTA} onChange={set('backCTA')}/>
              </Field>

              <div style={{ display:'flex', gap:8, marginTop:6 }}>
                <button className="btn btn-primary btn-sm" onClick={() => window.wpsbToast?.('Saved', 'ok')}>
                  <Icon name="check" size={13}/>Save
                </button>
                <button className="btn btn-ghost btn-sm" onClick={() => {
                  const html = `<!DOCTYPE html><html><head><title>Proposal Cover</title></head><body style="margin:0;font-family:sans-serif">[Proposal preview export — full HTML export available in Proposal builder]</body></html>`;
                  const blob = new Blob([html], { type:'text/html' });
                  const url  = URL.createObjectURL(blob);
                  const a = document.createElement('a');
                  a.href = url; a.download = 'proposal-cover.html'; a.click();
                  URL.revokeObjectURL(url);
                }}><Icon name="download" size={13}/>Export HTML</button>
              </div>
            </div>

            {/* Right: live preview */}
            {previewOpen && (
              <div style={{ padding:'16px 20px', background:'var(--surface-3)', minHeight: 520 }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                  <div style={{ fontSize:'.72rem', color:'var(--muted)', fontFamily:'var(--font-mono)', letterSpacing:1 }}>LIVE PREVIEW — UPDATES AS YOU TYPE</div>
                  <div style={{ fontSize:'.72rem', color:'var(--beam)' }}>
                    {COVER_THEMES[profile.coverTheme]?.label} / Digital
                  </div>
                </div>
                <ProposalCoverPreview profile={profile}/>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* ── AGENCY PORTAL SYNC ──────────────────────────────── */}
      <div className="card">
        <div className="card-head">
          <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
            <h2 className="card-title" style={{ fontSize:'.74rem', color:'var(--beam)', letterSpacing:1, fontFamily:'var(--font-mono)' }}>📂 AGENCY PORTAL · APP.WPSITEBEAM.IO</h2>
            <span className="tag ok">SYNCS HERE AUTOMATICALLY</span>
          </div>
        </div>
        <div className="card-body">
          <div style={{ fontSize:'.8rem', color:'var(--muted)', marginBottom:14 }}>
            These features live in your Agency Admin Portal and are accessible here via sync. White Label &amp; Branding above is editable in both places.
          </div>
          <div className="grid grid-3" style={{ gap:10 }}>
            {[
              { icon:'👥', title:'Team &amp; Employee Costs', sub:'Staff profiles, hourly rates, tags' },
              { icon:'🔐', title:'User Roles &amp; Permissions', sub:'Per-role access control' },
              { icon:'📋', title:'Estimate Templates', sub:'Save, load, and share presets' },
              { icon:'💼', title:'Business Snapshot &amp; P&amp;L', sub:'Revenue, margins, AI insights' },
              { icon:'🔗', title:'GHL / CRM Integration', sub:'Proposal push, contact sync' },
              { icon:'🖥️', title:'Hosting Plan Library', sub:'Manage all plan tiers &amp; pricing' },
            ].map((item, i) => (
              <div key={i} style={{ padding:'10px 12px', border:'1px solid var(--border)', borderRadius:8, background:'var(--surface-2)', display:'flex', gap:10, alignItems:'flex-start' }}>
                <div style={{ fontSize:'1.2rem' }} dangerouslySetInnerHTML={{ __html: item.icon }}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontWeight:600, fontSize:'.82rem' }} dangerouslySetInnerHTML={{ __html: item.title }}/>
                  <div style={{ fontSize:'.7rem', color:'var(--dim)', marginTop:2 }} dangerouslySetInnerHTML={{ __html: item.sub }}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display:'flex', justifyContent:'flex-end', marginTop:14, gap:8 }}>
            <button className="btn btn-ghost btn-sm" onClick={reset}>Reset all branding</button>
            <button className="btn btn-ghost btn-sm" onClick={() => window.open('https://app.wpsitebeam.io', '_blank')}>
              Open Agency Portal <Icon name="external" size={12}/>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.BrandWhiteLabelTab = BrandWhiteLabelTab;
window.ProposalCoverPreview = ProposalCoverPreview;
window.COVER_THEMES = COVER_THEMES;