// MeadLabel.jsx — tall mead bottle label. Numbered, casked, signed in wax.

const MeadLabel = ({
  name = 'Smoke Black',
  bottle = '12',
  edition = '84',
  caskAge = 'Eighteen months in oak',
  volume = '500 ml',
  abv = '12.4% ABV',
  notes = 'OAK · SMOKE · DARK HONEY',
}) => (
  <div style={mlStyles.shell}>
    <div style={mlStyles.frame}>
      {/* Top mark */}
      <div style={mlStyles.head}>
        <img src="../../assets/mark-mead-queen.svg" alt="" style={mlStyles.mark} />
        <div style={mlStyles.eyebrow}>MEAD QUEEN</div>
        <div style={mlStyles.tagline}>· A PARLIAMENT OF WINGS ·</div>
      </div>

      <div style={mlStyles.rulePair}>
        <hr style={mlStyles.divA} />
        <hr style={mlStyles.divB} />
      </div>

      {/* Main name */}
      <div style={mlStyles.nameBlock}>
        <div style={mlStyles.name}>{name}</div>
        <div style={mlStyles.italicLine}>{caskAge}</div>
      </div>

      {/* Bottle number */}
      <div style={mlStyles.bottleBlock}>
        <div style={mlStyles.bottleLine}>
          <span style={mlStyles.bottleNum}>{bottle}</span>
          <span style={mlStyles.bottleSlash}>/</span>
          <span style={mlStyles.bottleEd}>{edition}</span>
        </div>
        <div style={mlStyles.bottleLabel}>BOTTLE · EDITION</div>
      </div>

      <div style={mlStyles.rulePair}>
        <hr style={mlStyles.divB} />
        <hr style={mlStyles.divA} />
      </div>

      {/* Notes */}
      <div style={mlStyles.notesRow}>{notes}</div>

      <hr style={mlStyles.divA} />

      {/* Facts */}
      <div style={mlStyles.facts}>
        <div style={mlStyles.factCell}>
          <div style={mlStyles.factLbl}>VOL</div>
          <div style={mlStyles.factVal}>{volume}</div>
        </div>
        <div style={mlStyles.factDivider} />
        <div style={mlStyles.factCell}>
          <div style={mlStyles.factLbl}>STRENGTH</div>
          <div style={mlStyles.factVal}>{abv}</div>
        </div>
        <div style={mlStyles.factDivider} />
        <div style={mlStyles.factCell}>
          <div style={mlStyles.factLbl}>SOMERSET</div>
          <div style={mlStyles.factVal}>BA12 7QF</div>
        </div>
      </div>

      {/* Footer */}
      <div style={mlStyles.foot}>
        <div style={mlStyles.signature}>Signed in wax — J. Harris</div>
        <div style={mlStyles.estLine}>EST · MMXIX</div>
      </div>
    </div>
  </div>
);

const mlStyles = {
  shell: { width: 280, height: 520, position: 'relative' },
  frame: {
    position: 'absolute', inset: 0,
    background: 'var(--ink)',
    border: '1px solid var(--gold)',
    padding: '18px 16px 14px',
    display: 'flex', flexDirection: 'column',
    color: 'var(--wax)',
    backgroundImage: "url('../../assets/texture-wax.svg')",
    backgroundBlendMode: 'multiply',
    backgroundSize: 'cover',
  },
  head: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 },
  mark: { width: 38, height: 38, color: 'var(--mead)', marginBottom: 4 },
  eyebrow: {
    fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.32em',
    color: 'var(--mead)', textTransform: 'uppercase',
  },
  tagline: {
    fontFamily: 'var(--font-display)', fontSize: 7, letterSpacing: '0.32em',
    color: 'var(--gold-pale)', textTransform: 'uppercase',
  },

  rulePair: { padding: '12px 0 0' },
  divA: { border: 0, borderTop: '1px solid var(--gold)', margin: 0 },
  divB: { border: 0, borderTop: '0.5px solid var(--gold)', margin: '2px 0 0', opacity: 0.55 },

  nameBlock: {
    padding: '18px 0 14px', display: 'flex', flexDirection: 'column',
    alignItems: 'center', gap: 8, textAlign: 'center',
  },
  name: {
    fontFamily: 'var(--font-editorial)', fontWeight: 500, fontSize: 32,
    lineHeight: 1, color: 'var(--gold-pale)',
    letterSpacing: '-0.01em', whiteSpace: 'nowrap',
  },
  italicLine: {
    fontFamily: 'var(--font-italic)', fontStyle: 'italic', fontSize: 13,
    lineHeight: 1.3, color: 'var(--smoke-pale)',
    fontVariantNumeric: 'oldstyle-nums',
  },

  bottleBlock: {
    padding: '6px 0 14px', display: 'flex', flexDirection: 'column',
    alignItems: 'center', gap: 4,
  },
  bottleLine: {
    fontFamily: 'var(--font-editorial)',
    color: 'var(--mead)', display: 'flex', alignItems: 'baseline',
    gap: 6, fontVariantNumeric: 'oldstyle-nums tabular-nums',
    lineHeight: 1,
  },
  bottleNum:   { fontSize: 36, lineHeight: 1, color: 'var(--mead)' },
  bottleSlash: { fontSize: 28, lineHeight: 1, color: 'var(--gold-pale)', opacity: 0.7 },
  bottleEd:    { fontSize: 22, lineHeight: 1, color: 'var(--gold-pale)' },
  bottleLabel: {
    fontFamily: 'var(--font-display)', fontSize: 7.5, letterSpacing: '0.32em',
    color: 'var(--gold)', textTransform: 'uppercase',
  },

  notesRow: {
    fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.28em',
    color: 'var(--gold-pale)', textAlign: 'center',
    padding: '12px 0', textTransform: 'uppercase',
  },

  facts: { display: 'flex', justifyContent: 'space-between', padding: '12px 0', gap: 6 },
  factCell: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flex: 1 },
  factDivider: { width: 1, alignSelf: 'stretch', background: 'var(--rule)', opacity: 0.5 },
  factLbl: {
    fontFamily: 'var(--font-display)', fontSize: 7, letterSpacing: '0.28em',
    color: 'var(--gold)', textTransform: 'uppercase',
  },
  factVal: {
    fontFamily: 'var(--font-editorial)', fontSize: 12, color: 'var(--wax)',
    fontVariantNumeric: 'oldstyle-nums', lineHeight: 1.2,
  },

  foot: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    borderTop: '1px solid var(--rule)', paddingTop: 10, marginTop: 'auto',
  },
  signature: {
    fontFamily: 'var(--font-italic)', fontStyle: 'italic', fontSize: 11,
    color: 'var(--gold-pale)',
  },
  estLine: {
    fontFamily: 'var(--font-display)', fontSize: 8, letterSpacing: '0.24em',
    color: 'var(--gold)', textTransform: 'uppercase',
  },
};

window.MeadLabel = MeadLabel;