// Additional cover styles: Sticker, Blueprint, Magazine
// All read globals exported by covers.jsx.

const tierKeysX = window.tierKeys;
const featureLabelsX = window.featureLabels;
const themeStyleX = window.themeStyle;
const renderMultilineX = window.renderMultiline;
const visClassX = window.visClass;
const BgPatternX = window.BgPattern;
const bgClassX = window.bgClass;
const tierLabelX = window.tierLabel;
const tierNumberX = window.tierNumber;
const tierTotalX = window.tierTotal;
const tierPartVisibleX = window.tierPartVisible;
const tierPriceTagX = window.tierPriceTag;
const PriceTagX = window.PriceTag;

// ============================================================
// STYLE 4 — STICKER
// ============================================================
function StickerCover({ tier, data, platform, combined }) {
  const t = data.tiers[tier];
  const price = data.launchPricing ? t.launchPrice : t.price;
  const priceTag = tierPriceTagX(data, tier, data.launchPricing ? 'Launch' : '');
  const theme = data.theme;

  if (combined) return <StickerCombined data={data} platform={platform} />;

  return (
    <div className={`cover cover-sticker ${bgClassX(theme)} ${visClassX(theme)}`} data-platform={platform} style={themeStyleX(theme)}>
      <BgPatternX theme={theme} style="sticker" />
      <div className="c-grid sk-dots" />

      <div className="c-chrome sk-chrome">
        <div className="c-brand sk-brand-pill">
          <span className="sk-brand-dot" />
          <span>{data.brand}</span>
        </div>
        {tierPartVisibleX(data, tier, 'showTierStamp') && <div className="c-tier-stamp sk-tier-pill">{tierLabelX(data, tier)}</div>}
      </div>

      <div className="sk-body">
        <div className="sk-hero">
          {tierPartVisibleX(data, tier, 'showTierNumber') && <div className="c-tier-number sk-num-blob">
            <span className="sk-num">{tierNumberX(data, tier)}</span>
            <span className="sk-num-of">/{tierTotalX(data)}</span>
          </div>}
          <h1 className="sk-title">{t.title}</h1>
          <p className="c-description sk-desc">{t.desc}</p>
        </div>

        <div className="sk-stickers">
          <div className="c-price sk-sticker sk-price">
            <div className="sk-sticker-lbl">PRICE</div>
            <div className="sk-sticker-val">${price.toLocaleString()}</div>
            <PriceTagX data={data} tier={tier} text={priceTag} className="sk-sticker-note" />
          </div>
          <div className="c-days sk-sticker sk-days">
            <div className="sk-sticker-val sk-sticker-val--big">{t.days}</div>
            <div className="sk-sticker-lbl">days</div>
          </div>
          <div className="c-revisions sk-sticker sk-rev">
            <div className="sk-sticker-val sk-sticker-val--big">{t.revisions}</div>
            <div className="sk-sticker-lbl">revisions</div>
          </div>
        </div>

        <div className="c-features sk-feats">
          {Object.entries(featureLabelsX(data)).map(([k, label]) => (
            <div key={k} className={`sk-feat ${t.features[k] ? 'on' : 'off'}`}>
              <span className="sk-feat-mark">{t.features[k] ? '✓' : '✗'}</span>
              <span>{label}</span>
            </div>
          ))}
        </div>

        <div className="sk-footer">
          <div className="c-tagline sk-tagline">★ {data.tagline} ★</div>
        </div>
      </div>
    </div>
  );
}

function StickerCombined({ data, platform }) {
  const theme = data.theme;
  return (
    <div className={`cover cover-sticker cover-sticker--combined ${bgClassX(theme)} ${visClassX(theme)}`} data-platform={platform} style={themeStyleX(theme)}>
      <BgPatternX theme={theme} style="sticker" />
      <div className="c-grid sk-dots" />
      <div className="c-chrome sk-chrome">
        <div className="c-brand sk-brand-pill">
          <span className="sk-brand-dot" />
          <span>{data.brand}</span>
        </div>
        <div className="sk-tier-pill">COMPARE ★</div>
      </div>

      <div className="sk-comb-head">
        <h1 className="sk-comb-title">{renderMultilineX(data.combineHeadlines && data.combineHeadlines.sticker || 'Pick\nyour\nvibe.')}</h1>
        <p className="c-tagline sk-comb-sub">{data.tagline}</p>
      </div>

      <div className="sk-comb-grid">
        {tierKeysX(data).map(k => {
          const t = data.tiers[k];
          const price = data.launchPricing ? t.launchPrice : t.price;
          const isFocus = data.focusTier === k;
          const priceTag = tierPriceTagX(data, k, isFocus ? 'Top pick' : '');
          return (
            <div key={k} className={`sk-comb-tier ${isFocus ? 'is-focus' : ''}`}>
              <PriceTagX data={data} tier={k} text={priceTag} className="sk-comb-tag" />
              {tierPartVisibleX(data, k, 'showTierNumber') && <div className="c-tier-number sk-comb-num">{tierNumberX(data, k)}</div>}
              {tierPartVisibleX(data, k, 'showTierStamp') && <div className="c-tier-stamp sk-comb-name">{tierLabelX(data, k)}</div>}
              <div className="sk-comb-tt">{t.title}</div>
              <p className="c-description sk-comb-desc">{t.desc}</p>
              <div className="c-price sk-comb-price">${price.toLocaleString()}</div>
              <div className="sk-comb-meta">
                <span className="c-days">{t.days}d</span>
                <span className="dot">●</span>
                <span className="c-revisions">{t.revisions} rev</span>
              </div>
              <div className="c-features sk-comb-feats">
                {Object.entries(featureLabelsX(data)).map(([fk, label]) => (
                  <div key={fk} className={`sk-comb-feat ${t.features[fk] ? 'on' : 'off'}`}>
                    <span>{t.features[fk] ? '✓' : '·'}</span>
                    <span>{label}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// STYLE 5 — BLUEPRINT
// ============================================================
function BlueprintCover({ tier, data, platform, combined }) {
  const t = data.tiers[tier];
  const price = data.launchPricing ? t.launchPrice : t.price;
  const priceTag = tierPriceTagX(data, tier, data.launchPricing ? 'Launch' : '');
  const theme = data.theme;

  if (combined) return <BlueprintCombined data={data} platform={platform} />;

  return (
    <div className={`cover cover-blueprint ${bgClassX(theme)} ${visClassX(theme)}`} data-platform={platform} style={themeStyleX(theme)}>
      <BgPatternX theme={theme} style="blueprint" />
      <div className="c-grid bp-grid" />
      <div className="c-grid bp-grid bp-grid--minor" />

      <div className="bp-corner bp-corner--tl">+</div>
      <div className="bp-corner bp-corner--tr">+</div>
      <div className="bp-corner bp-corner--bl">+</div>
      <div className="bp-corner bp-corner--br">+</div>

      <div className="c-chrome bp-titleblock">
        <div className="bp-tb-row">
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">DRAWING</div>
            <div className="c-brand bp-tb-val">{data.brand.toUpperCase()}</div>
          </div>
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">SHEET</div>
            {tierPartVisibleX(data, tier, 'showTierNumber') && <div className="c-tier-number bp-tb-val">{tierNumberX(data, tier)}/{tierTotalX(data)}</div>}
          </div>
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">CLASS</div>
            {tierPartVisibleX(data, tier, 'showTierStamp') && <div className="c-tier-stamp bp-tb-val">{tierLabelX(data, tier)}</div>}
          </div>
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">REV.</div>
            <div className="bp-tb-val">01</div>
          </div>
        </div>
      </div>

      <div className="bp-body">
        <div className="bp-spec">
          {tierPartVisibleX(data, tier, 'showTierNumber') && <div className="c-tier-number bp-spec-num">SPEC.{tierNumberX(data, tier)}</div>}
          <h1 className="bp-title">{t.title}</h1>
          <div className="bp-dim-line">
            <span className="bp-dim-tick">|</span>
            <span className="bp-dim-bar" />
            <span className="bp-dim-tick">|</span>
          </div>
          <p className="c-description bp-desc">{t.desc}</p>
        </div>

        <div className="bp-spec-grid">
          <div className="c-days bp-spec-cell">
            <div className="bp-spec-lbl">∇ DELIVERY</div>
            <div className="bp-spec-val">{t.days}<span className="bp-spec-unit">DAYS</span></div>
          </div>
          <div className="c-revisions bp-spec-cell">
            <div className="bp-spec-lbl">↻ REVISIONS</div>
            <div className="bp-spec-val">{t.revisions}<span className="bp-spec-unit">CYCLES</span></div>
          </div>
          <div className="c-price bp-spec-cell bp-spec-cell--price">
            <div className="bp-spec-lbl">$ PRICE</div>
            <div className="bp-spec-val">{price.toLocaleString()}<span className="bp-spec-unit">USD</span></div>
            <PriceTagX data={data} tier={tier} text={priceTag} className="bp-price-tag" />
          </div>
        </div>

        <div className="c-features bp-feats">
          <div className="bp-feats-lbl">— INCLUDED COMPONENTS —</div>
          {Object.entries(featureLabelsX(data)).map(([k, label], i) => (
            <div key={k} className={`bp-feat ${t.features[k] ? 'on' : 'off'}`}>
              <span className="bp-feat-id">[{String(i + 1).padStart(2, '0')}]</span>
              <span className="bp-feat-mark">{t.features[k] ? '◼' : '◻'}</span>
              <span className="bp-feat-label">{label}</span>
              <span className="bp-feat-line" />
              <span className="bp-feat-status">{t.features[k] ? 'YES' : 'N/A'}</span>
            </div>
          ))}
        </div>

        <div className="bp-footer">
          <div className="c-tagline bp-tagline">— {data.tagline} —</div>
          <div className="bp-rev">REV.A · {new Date().getFullYear()}</div>
        </div>
      </div>
    </div>
  );
}

function BlueprintCombined({ data, platform }) {
  const theme = data.theme;
  return (
    <div className={`cover cover-blueprint cover-blueprint--combined ${bgClassX(theme)} ${visClassX(theme)}`} data-platform={platform} style={themeStyleX(theme)}>
      <BgPatternX theme={theme} style="blueprint" />
      <div className="c-grid bp-grid" />
      <div className="c-grid bp-grid bp-grid--minor" />
      <div className="bp-corner bp-corner--tl">+</div>
      <div className="bp-corner bp-corner--tr">+</div>
      <div className="bp-corner bp-corner--bl">+</div>
      <div className="bp-corner bp-corner--br">+</div>

      <div className="c-chrome bp-titleblock">
        <div className="bp-tb-row">
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">DRAWING</div>
            <div className="c-brand bp-tb-val">{data.brand.toUpperCase()}</div>
          </div>
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">SHEET</div>
            <div className="bp-tb-val">COMPARE</div>
          </div>
          <div className="bp-tb-cell">
            <div className="bp-tb-lbl">SHEETS</div>
            <div className="bp-tb-val">{tierTotalX(data)}</div>
          </div>
        </div>
      </div>

      <div className="bp-comb-head">
        <div className="bp-spec-num">PROJECT.SPEC</div>
        <h1 className="bp-comb-title">{renderMultilineX(data.combineHeadlines && data.combineHeadlines.blueprint || 'Three configurations.\nOne ship date.')}</h1>
        <p className="c-tagline bp-comb-sub">— {data.tagline} —</p>
      </div>

      <div className="bp-comb-grid">
        {tierKeysX(data).map(k => {
          const t = data.tiers[k];
          const price = data.launchPricing ? t.launchPrice : t.price;
          const isFocus = data.focusTier === k;
          const priceTag = tierPriceTagX(data, k, isFocus ? 'Specified' : '');
          return (
            <div key={k} className={`bp-comb-tier ${isFocus ? 'is-focus' : ''}`}>
              <PriceTagX data={data} tier={k} text={priceTag} className="bp-comb-tag" />
              {tierPartVisibleX(data, k, 'showTierNumber') && <div className="c-tier-number bp-comb-num">CONF.{tierNumberX(data, k)}</div>}
              {tierPartVisibleX(data, k, 'showTierStamp') && <div className="c-tier-stamp bp-comb-name">{tierLabelX(data, k)}</div>}
              <div className="bp-comb-tt">{t.title}</div>
              <div className="bp-dim-line">
                <span className="bp-dim-tick">|</span>
                <span className="bp-dim-bar" />
                <span className="bp-dim-tick">|</span>
              </div>
              <p className="c-description bp-comb-desc">{t.desc}</p>
              <div className="c-price bp-comb-price">${price.toLocaleString()}<span className="bp-spec-unit">USD</span></div>
              <div className="bp-comb-meta">
                <div className="c-days"><span className="lbl">∇ DELIV.</span><span className="val">{t.days}D</span></div>
                <div className="c-revisions"><span className="lbl">↻ REV.</span><span className="val">{t.revisions}</span></div>
              </div>
              <div className="c-features bp-comb-feats">
                {Object.entries(featureLabelsX(data)).map(([fk, label], i) => (
                  <div key={fk} className={`bp-comb-feat ${t.features[fk] ? 'on' : 'off'}`}>
                    <span>[{String(i + 1).padStart(2, '0')}]</span>
                    <span>{t.features[fk] ? '◼' : '◻'}</span>
                    <span>{label}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// STYLE 6 — MAGAZINE
// ============================================================
function MagazineCover({ tier, data, platform, combined }) {
  const t = data.tiers[tier];
  const price = data.launchPricing ? t.launchPrice : t.price;
  const priceTag = tierPriceTagX(data, tier, data.launchPricing ? 'Launch ltd' : '');
  const theme = data.theme;

  if (combined) return <MagazineCombined data={data} platform={platform} />;

  return (
    <div className={`cover cover-magazine ${bgClassX(theme)} ${visClassX(theme)}`} data-platform={platform} style={themeStyleX(theme)}>
      <BgPatternX theme={theme} style="magazine" />
      <div className="c-chrome mg-mast">
        <div className="c-brand mg-mast-name">{data.brand.toUpperCase()}</div>
        <div className="mg-mast-rule" />
        <div className="mg-mast-meta">
          {tierPartVisibleX(data, tier, 'showTierNumber') && <span className="c-tier-number">VOL.{tierNumberX(data, tier)}</span>}
          {tierPartVisibleX(data, tier, 'showTierNumber') && tierPartVisibleX(data, tier, 'showTierStamp') && <span className="mg-bullet">●</span>}
          {tierPartVisibleX(data, tier, 'showTierStamp') && <span className="c-tier-stamp">{tierLabelX(data, tier)}</span>}
        </div>
      </div>

      <div className="mg-body">
        <div className="mg-left">
          {tierPartVisibleX(data, tier, 'showTierNumber') && <div className="c-tier-number mg-issue">ISSUE №{tierNumberX(data, tier)}</div>}
          <h1 className="mg-title">{t.title}</h1>
          <div className="mg-byline">— A package for makers —</div>
          <p className="c-description mg-desc">{t.desc}</p>

          <div className="c-features mg-feats">
            {Object.entries(featureLabelsX(data)).map(([k, label]) => (
              <div key={k} className={`mg-feat ${t.features[k] ? 'on' : 'off'}`}>
                <span className="mg-feat-mark">{t.features[k] ? '✦' : '○'}</span>
                <span>{label}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="mg-right">
          <div className="mg-block">
            <div className="c-price mg-price-block">
              <div className="mg-price-lbl">— PRICE —</div>
              <div className="mg-price">
                <span className="mg-price-curr">$</span>
                <span className="mg-price-amt">{price.toLocaleString()}</span>
              </div>
              <PriceTagX data={data} tier={tier} text={priceTag} className="mg-price-note" />
            </div>
            <div className="mg-divider" />
            <div className="mg-stats">
              <div className="c-days mg-stat">
                <div className="mg-stat-num">{t.days}</div>
                <div className="mg-stat-lbl">days to ship</div>
              </div>
              <div className="mg-stat-rule" />
              <div className="c-revisions mg-stat">
                <div className="mg-stat-num">{t.revisions}</div>
                <div className="mg-stat-lbl">revisions</div>
              </div>
            </div>
            <div className="mg-divider" />
            <div className="c-tagline mg-pull">"{data.tagline}"</div>
          </div>
        </div>
      </div>

      <div className="mg-foot">
        {tierPartVisibleX(data, tier, 'showTierNumber') && <span className="c-tier-number">{tierNumberX(data, tier)} · {tierTotalX(data)}</span>}
        <span className="mg-foot-rule" />
        <span>{data.brand}</span>
      </div>
    </div>
  );
}

function MagazineCombined({ data, platform }) {
  const theme = data.theme;
  return (
    <div className={`cover cover-magazine cover-magazine--combined ${bgClassX(theme)} ${visClassX(theme)}`} data-platform={platform} style={themeStyleX(theme)}>
      <BgPatternX theme={theme} style="magazine" />
      <div className="c-chrome mg-mast">
        <div className="c-brand mg-mast-name">{data.brand.toUpperCase()}</div>
        <div className="mg-mast-rule" />
        <div className="mg-mast-meta">
          <span>THE COLLECTION</span>
        </div>
      </div>

      <div className="mg-comb-head">
        <div className="mg-issue">— THE COLLECTION —</div>
        <h1 className="mg-comb-title">{renderMultilineX(data.combineHeadlines && data.combineHeadlines.magazine || 'Three\nvolumes.')}</h1>
        <p className="c-tagline mg-comb-sub">"{data.tagline}"</p>
      </div>

      <div className="mg-comb-grid">
        {tierKeysX(data).map(k => {
          const t = data.tiers[k];
          const price = data.launchPricing ? t.launchPrice : t.price;
          const isFocus = data.focusTier === k;
          const priceTag = tierPriceTagX(data, k, isFocus ? 'Featured' : '');
          return (
            <div key={k} className={`mg-comb-tier ${isFocus ? 'is-focus' : ''}`}>
              {tierPartVisibleX(data, k, 'showTierNumber') && <div className="c-tier-number mg-comb-num">VOL. {tierNumberX(data, k)}</div>}
              {tierPartVisibleX(data, k, 'showTierStamp') && <div className="c-tier-stamp mg-comb-name">{tierLabelX(data, k)}</div>}
              <PriceTagX data={data} tier={k} text={priceTag} className="mg-comb-tag" />
              <div className="mg-comb-tt">{t.title}</div>
              <div className="mg-comb-divider" />
              <p className="c-description mg-comb-desc">{t.desc}</p>
              <div className="c-price mg-comb-price">
                <span className="cur">$</span>{price.toLocaleString()}
              </div>
              <div className="mg-comb-meta">
                <div className="c-days"><span className="num">{t.days}</span><span className="lbl">days</span></div>
                <div className="mg-stat-rule" />
                <div className="c-revisions"><span className="num">{t.revisions}</span><span className="lbl">rev</span></div>
              </div>
              <div className="c-features mg-comb-feats">
                {Object.entries(featureLabelsX(data)).map(([fk, label]) => (
                  <div key={fk} className={`mg-comb-feat ${t.features[fk] ? 'on' : 'off'}`}>
                    <span>{t.features[fk] ? '✦' : '○'}</span>
                    <span>{label}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      <div className="mg-foot">
        <span>{data.brand}</span>
      </div>
    </div>
  );
}

Object.assign(window, { StickerCover, BlueprintCover, MagazineCover });