// Share card preview — the viral primitive (1080x1920 conceptually)
// Renders 3 variants: clean / dramatic / receipt
const { useState: useStateSC, useEffect: useEffectSC } = React;

function ShareCardPreview({ score, brand, product, variant = 'clean' }) {
  const band = bandFor(score);
  const [snap, setSnap] = useStateSC(0);
  // re-snap whenever inputs change (mimics "satisfying snap when share renders")
  useEffectSC(() => { setSnap(n => n + 1); }, [score, brand, product, variant]);

  if (variant === 'receipt') {
    return (
      <div className="share-preview-wrap" key={'r-' + snap}>
        <div className="share-preview snap-in" style={{ background: 'var(--plassic-kraft-50)', color: 'var(--plassic-jungle-950)', border: '1.5px solid var(--plassic-jungle-950)' }}>
          <div className="inner">
            <div className="topline">
              <span>PLASSIC · RECEIPT NO. {String(score).padStart(4, '0')}-{(brand[0] || 'X').toUpperCase()}</span>
              <span>9:41 AM</span>
            </div>
            <div style={{ borderBottom: '1px dashed currentColor', margin: '16px 0 12px' }}></div>
            <div style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span>Item</span><span>{brand}</span>
            </div>
            <div style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span>Pack</span><span>{product}</span>
            </div>
            <div style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span>Verdict</span><span>{verdictFor(score)}</span>
            </div>
            <div style={{ borderTop: '1px dashed currentColor', margin: '12px 0', paddingTop: 12 }}>
              <div style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase' }}>Plastic score</div>
              <div style={{ fontFamily: 'var(--plassic-font-display)', fontSize: 96, lineHeight: .9, letterSpacing: -5, marginTop: 4 }}>{score}<span style={{ fontSize: 24, opacity: .55 }}>/100</span></div>
            </div>
            <div className="product-line" style={{ borderTop: '1px dashed currentColor' }}>
              <span>plassic.com/s/{(brand + score).toLowerCase().replace(/[^a-z0-9]/g, '').slice(0, 8)}</span>
              <span>SCAN ME →</span>
            </div>
            <div className="qr">
              <FauxQR fg="var(--plassic-kraft-50)" bg="var(--plassic-jungle-950)" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (variant === 'dramatic') {
    return (
      <div className="share-preview-wrap" key={'d-' + snap}>
        <div className={'share-preview snap-in ' + band}>
          <div className="inner">
            <div className="topline">
              <span>PLASSIC · {bandFor(score).toUpperCase()}</span>
              <span>POSTED · 9:41</span>
            </div>
            <div className="verdict-big" style={{ marginTop: 16, fontSize: 56 }}>
              {score < 40 ? 'STOP\u00A0EATING' : score < 70 ? 'WATCH\u00A0OUT' : 'KEEP\u00A0BUYING'}<br/>
              <span style={{ opacity: .8 }}>PLASTIC.</span>
            </div>
            <div style={{ marginTop: 'auto' }}>
              <div className="num-big">{score}<span className="of">/100</span></div>
              <div style={{ fontFamily: 'var(--plassic-font-display)', fontSize: 24, letterSpacing: -.5, textTransform: 'uppercase', lineHeight: 1, marginTop: 8 }}>
                {brand}
              </div>
              <div style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 4, opacity: .8 }}>
                {product}
              </div>
            </div>
            <div className="product-line">
              <span>plassic.com</span>
              <span>JUST SCANNED</span>
            </div>
            <div className="qr">
              <FauxQR fg="currentColor" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  // clean (default)
  return (
    <div className="share-preview-wrap" key={'c-' + snap}>
      <div className={'share-preview snap-in ' + band}>
        <div className="inner">
          <div className="topline">
            <span>PLASTIC SCORE</span>
            <span>PLASSIC.COM</span>
          </div>
          <div className="verdict-big">{verdictFor(score)}</div>
          <div className="num-big">{score}<span className="of">/100</span></div>
          <div className="product-line">
            <span>{brand}</span>
            <span>{product}</span>
          </div>
          <div className="qr">
            <FauxQR fg="currentColor" />
          </div>
        </div>
      </div>
    </div>
  );
}

window.ShareCardPreview = ShareCardPreview;