// Shared cover artwork for blog posts (used on index + article pages).

const TranscriptCover = ({tall}) => (
  <div style={{
    aspectRatio: tall ? '16/9' : '16/10',
    background: 'linear-gradient(140deg, #0d1530 0%, #1a2856 60%, #21346e 100%)',
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute',
      left: '14%', top: '14%', right: '20%', bottom: '14%',
      background: 'linear-gradient(180deg, #fdfaf3 0%, #f6efe1 100%)',
      borderRadius: 4,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.45), 0 4px 0 rgba(0,0,0,0.08)',
      transform: 'rotate(-3deg)',
      padding: '8% 9%',
      display: 'flex', flexDirection: 'column', gap: '5%',
      fontFamily: 'var(--font-mono, JetBrains Mono, monospace)',
      color: '#0d1530',
    }}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1.5px solid #0d1530', paddingBottom: '3%'}}>
        <span style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(11px, 2vw, 18px)', letterSpacing: '-0.01em'}}>TRANSCRIPT</span>
        <span style={{fontSize: 'clamp(8px, 1.3vw, 11px)', letterSpacing: '0.18em', opacity: 0.6}}>GRADE 11</span>
      </div>
      {[
        {course: 'AP CALCULUS BC', grade: 'A'},
        {course: 'IB CHEMISTRY HL', grade: 'A−'},
        {course: 'AP ENGLISH LIT', grade: 'B+'},
      ].map((r, i) => (
        <div key={i} style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 'clamp(9px, 1.5vw, 13px)', letterSpacing: '0.08em'}}>
          <span>{r.course}</span>
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(14px, 2.4vw, 22px)',
            color: '#a47129',
            fontStyle: 'italic', letterSpacing: '-0.02em',
          }}>{r.grade}</span>
        </div>
      ))}
    </div>
    <div style={{
      position: 'absolute', top: '8%', right: '8%',
      width: '14%', aspectRatio: '1',
      borderRadius: '50%',
      background: 'radial-gradient(circle at 30% 30%, #e6b96a, #a47129)',
      boxShadow: '0 8px 20px -6px rgba(217,162,74,0.6)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#0d1530', fontFamily: 'var(--font-display)', fontWeight: 700,
      fontSize: 'clamp(10px, 1.8vw, 16px)', letterSpacing: '-0.01em',
      transform: 'rotate(8deg)',
    }}>AP/IB</div>
  </div>
);

const BookletsCover = ({tall}) => (
  <div style={{
    aspectRatio: tall ? '16/9' : '16/10',
    background: 'linear-gradient(160deg, #f6efe1 0%, #ede4cf 100%)',
    position: 'relative', overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'repeating-linear-gradient(0deg, transparent 0 calc(11.111% - 1px), rgba(13,21,48,0.06) calc(11.111% - 1px) 11.111%)',
    }}/>
    <div style={{position: 'absolute', left: '8%', bottom: '12%', width: '52%'}}>
      {[
        {bg: '#0d1530', label: 'MATH 9'},
        {bg: '#21346e', label: 'SCIENCE 8'},
        {bg: '#a47129', label: 'ENGLISH 10'},
      ].map((b, i) => (
        <div key={i} style={{
          background: b.bg, color: '#f6efe1',
          padding: '7% 8%',
          marginTop: i === 0 ? 0 : '-4%',
          transform: `translateX(${i * 6}%) rotate(${-3 + i * 2}deg)`,
          borderRadius: 3,
          boxShadow: '0 8px 18px -8px rgba(0,0,0,0.35)',
          fontFamily: 'var(--font-display)', fontWeight: 700,
          letterSpacing: '-0.02em',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          position: 'relative', zIndex: 3 - i,
        }}>
          <span style={{fontSize: 'clamp(10px, 1.7vw, 16px)'}}>KEATS BOOKLET</span>
          <span style={{fontSize: 'clamp(10px, 1.7vw, 16px)', fontStyle: 'italic', opacity: 0.85}}>{b.label}</span>
        </div>
      ))}
    </div>
    <div style={{position: 'absolute', right: '9%', top: '14%', width: '30%', aspectRatio: '1'}}>
      <svg viewBox="0 0 100 100" style={{width: '100%', height: '100%', transform: 'rotate(-90deg)'}}>
        <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(13,21,48,0.12)" strokeWidth="6"/>
        <circle cx="50" cy="50" r="42" fill="none" stroke="#a47129" strokeWidth="6" strokeLinecap="round"
          strokeDasharray="263.9" strokeDashoffset="65.97"/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', textAlign: 'center',
        color: '#0d1530',
      }}>
        <div style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(20px, 4vw, 38px)', lineHeight: 1, letterSpacing: '-0.03em'}}>30</div>
        <div style={{fontFamily: 'var(--font-mono)', fontSize: 'clamp(8px, 1.2vw, 11px)', letterSpacing: '0.18em', opacity: 0.7, marginTop: 4}}>MIN / DAY</div>
      </div>
    </div>
  </div>
);

const RoadmapCover = ({tall}) => (
  <div style={{
    aspectRatio: tall ? '16/9' : '16/10',
    background: 'linear-gradient(140deg, #fdfaf3 0%, #f6efe1 60%, #ede4cf 100%)',
    position: 'relative', overflow: 'hidden',
    padding: '10% 8%',
    display: 'flex', flexDirection: 'column', justifyContent: 'center',
  }}>
    <div style={{
      fontFamily: 'var(--font-mono)', fontSize: 'clamp(8px, 1.2vw, 11px)',
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color: '#a47129', marginBottom: '4%',
    }}>BC Curriculum · K → 12</div>
    <div style={{position: 'relative', height: '40%', marginTop: '3%'}}>
      <div style={{position: 'absolute', left: 0, right: 0, top: '50%', height: 2, background: '#0d1530', opacity: 0.85}}/>
      {[
        {label: 'K', x: 0, mark: false},
        {label: '4', x: 25, mark: 'FSA'},
        {label: '7', x: 50, mark: 'FSA'},
        {label: '10', x: 75, mark: 'NUM/LIT'},
        {label: '12', x: 100, mark: 'GRAD'},
      ].map((n, i) => (
        <div key={i} style={{
          position: 'absolute', left: `${n.x}%`, top: '50%',
          transform: 'translate(-50%, -50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
        }}>
          <div style={{
            width: 'clamp(20px, 3vw, 28px)', aspectRatio: 1, borderRadius: '50%',
            background: n.mark ? '#a47129' : '#0d1530',
            color: '#fdfaf3',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.02em',
            fontSize: 'clamp(10px, 1.6vw, 14px)',
            boxShadow: n.mark ? '0 6px 14px -4px rgba(217,162,74,0.55)' : 'none',
          }}>{n.label}</div>
          {n.mark && (
            <div style={{
              position: 'absolute', top: 'calc(100% + 8px)',
              fontFamily: 'var(--font-mono)', fontSize: 'clamp(7px, 1vw, 10px)',
              letterSpacing: '0.15em', color: '#0d1530', opacity: 0.7, whiteSpace: 'nowrap',
            }}>{n.mark}</div>
          )}
        </div>
      ))}
    </div>
    <div style={{
      marginTop: '8%', display: 'flex', justifyContent: 'space-between',
      fontFamily: 'var(--font-mono)', fontSize: 'clamp(8px, 1.2vw, 11px)',
      letterSpacing: '0.18em', color: '#0d1530', opacity: 0.6,
    }}>
      <span>FSA · GR. 4 &amp; 7</span>
      <span>NUMERACY 10</span>
      <span>LITERACY 12</span>
    </div>
  </div>
);

const BlogCovers = { TranscriptCover, BookletsCover, RoadmapCover };
const Cover = ({name, tall}) => {
  const C = BlogCovers[name];
  return C ? <C tall={tall}/> : null;
};

window.BlogCovers = BlogCovers;
window.Cover = Cover;