// CrateStamp.jsx — stencilled three-line block on raw wood.

const CrateStamp = ({ width = 420, address = 'WITHYDITCH · BA12 7QF', line = 'CASE OF SIX' }) => (
  <div style={{
    width, padding: 22, position: 'relative',
    background: '#3A2818',
    backgroundImage: "url('../../assets/texture-paper.svg')",
    backgroundBlendMode: 'multiply',
    backgroundSize: 'cover',
    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.4)',
  }}>
    {/* Wood grain stripes (approximate) */}
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: 'repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 28px)',
    }}/>

    {/* Stencil — gold ink */}
    <div style={{
      position: 'relative', color: 'var(--wax)',
      border: '2px solid var(--wax)', padding: '20px 18px',
      filter: 'contrast(1.1) brightness(0.95)',
    }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '0.34em',
        textAlign: 'center', color: 'var(--wax)', textTransform: 'uppercase',
      }}>HEXQUEEN</div>

      <hr style={{ border: 0, borderTop: '1px solid var(--wax)', opacity: 0.55, margin: '10px 0' }} />

      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.22em',
        textAlign: 'center', color: 'var(--wax)', textTransform: 'uppercase',
        whiteSpace: 'nowrap',
      }}>SOMERSET HONEY HOUSE · COPPER APIARY</div>

      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.32em',
        textAlign: 'center', color: 'var(--wax)', textTransform: 'uppercase', marginTop: 4,
        whiteSpace: 'nowrap',
      }}>{address}</div>

      <hr style={{ border: 0, borderTop: '1px solid var(--wax)', opacity: 0.55, margin: '10px 0' }} />

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: '0.32em',
        color: 'var(--wax)', textTransform: 'uppercase',
      }}>
        <span>{line}</span>
        <img src="../../assets/mark-hive.svg" alt="" style={{ width: 36, height: 36, color: 'var(--wax)' }} />
        <span>HANDLE WITH CARE</span>
      </div>
    </div>
  </div>
);

window.CrateStamp = CrateStamp;