/* global React */
// Custom Atwood jar — replaces product photography. Styled after the Seed reference:
// dark matte cedar, minimal white typography, amber ambient light. Scales to its container.

function AtwoodJar({ product, scene = 'studio', size = 1 }) {
  // product: { name, color, label, subl }
  const jarColor = product.color || '#2F4A3C';
  const sceneBg = {
    studio:   'radial-gradient(ellipse at 55% 35%, #D9C8A8 0%, #A58F6A 60%, #7A6949 100%)',
    shelf:    'linear-gradient(170deg, #EDE1C7 0%, #C9B593 55%, #8E7A57 100%)',
    morning:  'radial-gradient(ellipse at 70% 30%, #F2D9AD 0%, #C69C68 55%, #6E4E28 100%)',
  }[scene];

  return (
    <div style={{
      position:'relative', width:'100%', height:'100%', overflow:'hidden',
      background: sceneBg,
    }}>
      {/* soft light wash */}
      <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at 72% 20%, rgba(255,230,180,0.45) 0%, transparent 55%)'}}/>
      {/* long shadow under jar */}
      <div style={{
        position:'absolute', left:'50%', top:'72%',
        transform:'translate(-50%,0) rotate(-3deg)',
        width:`${42*size}%`, height:'6%',
        background:'radial-gradient(ellipse, rgba(30,20,10,0.35) 0%, transparent 70%)',
        filter:'blur(6px)',
      }}/>
      {/* jar */}
      <div style={{
        position:'absolute', left:'50%', top:'50%',
        transform:'translate(-50%,-50%)',
        width:`${44*size}%`, aspectRatio:'0.82/1',
        borderRadius:'10% 10% 14% 14% / 6% 6% 10% 10%',
        background:`linear-gradient(165deg, ${jarColor} 0%, ${jarColor} 40%, #15211A 100%)`,
        boxShadow:'inset 0 2px 0 rgba(255,255,255,0.09), inset -14px 0 30px rgba(0,0,0,0.35), 0 30px 60px -20px rgba(30,20,10,0.5)',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        color:'#F4EFE6', padding:'6% 8%',
      }}>
        {/* top cap line */}
        <div style={{position:'absolute', top:'9%', left:'6%', right:'6%', height:1, background:'rgba(255,255,255,0.08)'}}/>
        {/* wordmark */}
        <div style={{fontFamily:'var(--font-display)', fontWeight:500, fontSize:'22%', letterSpacing:'-0.03em', lineHeight:1, marginTop:'-14%'}}>atwood</div>
        {/* dot */}
        <div style={{width:'4%', aspectRatio:'1/1', borderRadius:999, background:'#F4EFE6', margin:'14% 0 12%'}}/>
        {/* label */}
        <div style={{fontFamily:'var(--font-mono)', fontSize:'7%', letterSpacing:'0.06em', opacity:0.95, textAlign:'center', lineHeight:1.3}}>{product.label}</div>
        <div style={{fontFamily:'var(--font-mono)', fontSize:'5.2%', letterSpacing:'0.15em', opacity:0.55, textAlign:'center', marginTop:'4%', lineHeight:1.4, padding:'0 4%'}}>{product.subl}</div>
        {/* bottom detail */}
        <div style={{position:'absolute', bottom:'8%', left:0, right:0, textAlign:'center', fontFamily:'var(--font-mono)', fontSize:'4.5%', letterSpacing:'0.2em', opacity:0.4}}>60 GUMMIES · 30 DAYS</div>
      </div>
      {/* highlight */}
      <div style={{
        position:'absolute', left:'33%', top:'24%',
        width:`${6*size}%`, height:`${38*size}%`,
        background:'linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%)',
        filter:'blur(8px)', borderRadius:999,
      }}/>
    </div>
  );
}
window.AtwoodJar = AtwoodJar;