// Direction 7 — APOTHECARY × STAMP COLORWAYS
// D1's hanbang apothecary design language (italic Cormorant, ink-wash
// botanicals, paper texture, quote pull-out) — but each SKU is recolored
// to use the SEAL palette: Paper / Ink / Hanji / Warm. No bright herbal
// accents; the whole shelf reads as a single neutral family.

const aps = {
  paper:  '#efe6d4',
  paper2: '#e6dcc6',
  hanji:  '#e6d9bf',
  hanji2: '#dccfb1',
  warm:   '#7a5c3a',
  warm2:  '#5e4527',
  ink:    '#1f1610',
  ink2:   '#0e0a06',
  serif:  '"Cormorant Garamond", "Noto Serif KR", serif',
  mono:   '"JetBrains Mono", ui-monospace, monospace',
  han:    '"Noto Serif KR", serif',
};

// SKU → colorway (matches D5 pairing). bg = pouch color, fg = type/lineart
// color, ribbon = the bottom accent bar (a complementary neutral so the
// palette stays interlocked).
const APS_SKU = {
  hydrate: { bg: aps.paper,  fg: aps.ink,   ribbon: aps.warm,  shade: 'PAPER'   },
  recover: { bg: aps.warm,   fg: aps.paper, ribbon: aps.ink,   shade: 'WARM'    },
  sleep:   { bg: aps.ink,    fg: aps.paper, ribbon: aps.hanji, shade: 'INK'     },
  revive:  { bg: aps.hanji,  fg: aps.ink,   ribbon: aps.warm,  shade: 'HANJI'   },
  focus:   { bg: aps.ink2,   fg: aps.hanji, ribbon: aps.warm,  shade: 'INK·HANJI'},
};

// Little circular RG seal (lifted from D1 BrandSeal, simplified).
function ApsSeal({ size = 32, fg }) {
  return (
    <svg viewBox="0 0 60 60" style={{ width: size, height: size }}>
      <circle cx="30" cy="30" r="28" fill="none" stroke={fg} strokeWidth=".7" opacity=".8" />
      <circle cx="30" cy="30" r="24.5" fill="none" stroke={fg} strokeWidth=".4" opacity=".5" />
      <text x="30" y="37" textAnchor="middle" fontFamily={aps.serif} fontStyle="italic" fontSize="20" fill={fg} fontWeight="500">RG</text>
    </svg>
  );
}

// Botanical lineart per SKU. Color comes from the colorway's fg so the
// drawing always sits in the same ink as the type.
function ApsBotanical({ skuId, color, size = 100 }) {
  const c = color;
  const stroke = { stroke: c, strokeWidth: 1.1, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const wash   = { fill: c, opacity: .12 };
  const W = 120;
  if (skuId === 'hydrate') {
    return (
      <svg viewBox={`0 0 ${W} ${W}`} style={{ width: size, height: size }}>
        <path d="M60 25 c-2 6 -8 6 -10 16 -4 16 -16 22 -16 38 0 14 12 22 26 22 14 0 26 -8 26 -22 0 -14 -10 -22 -14 -38 -2 -10 -8 -10 -12 -16z" {...wash} />
        <path d="M60 25 c-2 6 -8 6 -10 16 -4 16 -16 22 -16 38 0 14 12 22 26 22 14 0 26 -8 26 -22 0 -14 -10 -22 -14 -38 -2 -10 -8 -10 -12 -16z" {...stroke} />
        <path d="M60 25 c0 -8 4 -14 12 -16 -2 8 -4 14 -12 16z" {...stroke} />
        <path d="M60 25 v-8" {...stroke} />
      </svg>
    );
  }
  if (skuId === 'recover') {
    return (
      <svg viewBox={`0 0 ${W} ${W}`} style={{ width: size, height: size }}>
        <path d="M60 18 c-3 4 -4 8 -3 12 -10 4 -12 16 -8 24 -8 6 -10 16 -2 24 -4 8 0 16 8 20 6 4 14 4 20 0 8 -4 12 -12 8 -20 8 -8 6 -18 -2 -24 4 -8 2 -20 -8 -24 1 -4 0 -8 -3 -12 -2 -2 -4 -4 -5 -4 -2 0 -3 2 -5 4z" {...wash} />
        <path d="M60 18 c-3 4 -4 8 -3 12 -10 4 -12 16 -8 24 -8 6 -10 16 -2 24 -4 8 0 16 8 20 6 4 14 4 20 0 8 -4 12 -12 8 -20 8 -8 6 -18 -2 -24 4 -8 2 -20 -8 -24 1 -4 0 -8 -3 -12" {...stroke} />
        <path d="M50 50 v18 M70 50 v18 M60 70 v14" {...stroke} />
      </svg>
    );
  }
  if (skuId === 'sleep') {
    return (
      <svg viewBox={`0 0 ${W} ${W}`} style={{ width: size, height: size }}>
        <path d="M85 60 a30 30 0 1 1 -28 -30 a22 22 0 0 0 28 30z" {...wash} />
        <path d="M85 60 a30 30 0 1 1 -28 -30 a22 22 0 0 0 28 30z" {...stroke} />
        <circle cx="36" cy="84" r="6" {...wash} />
        <circle cx="50" cy="92" r="5" {...wash} />
        <circle cx="36" cy="84" r="6" {...stroke} />
        <circle cx="50" cy="92" r="5" {...stroke} />
      </svg>
    );
  }
  if (skuId === 'revive') {
    return (
      <svg viewBox={`0 0 ${W} ${W}`} style={{ width: size, height: size }}>
        <circle cx="60" cy="62" r="30" {...wash} />
        <circle cx="60" cy="62" r="30" {...stroke} />
        <path d="M60 32 v60 M30 62 h60 M40 38 l40 48 M40 86 l40 -48" {...stroke} strokeWidth=".5" opacity=".7" />
        <path d="M58 32 c-2 -6 0 -10 4 -10 4 0 6 4 4 10" {...stroke} />
      </svg>
    );
  }
  return (
    <svg viewBox={`0 0 ${W} ${W}`} style={{ width: size, height: size }}>
      <path d="M30 90 c-4 -36 14 -64 60 -68 -2 38 -22 68 -60 68z" {...wash} />
      <path d="M30 90 c-4 -36 14 -64 60 -68 -2 38 -22 68 -60 68z" {...stroke} />
      <path d="M30 90 c12 -22 28 -38 60 -68" {...stroke} />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// SINGLE STICK
// ─────────────────────────────────────────────────────────────
function StickApoStamp({ skuId }) {
  const sku = SKU_BY_ID[skuId];
  const cw = APS_SKU[skuId];
  // notch fill mimics the pouch behind, in the pouch shade but a touch darker
  const notchBg = cw.bg === aps.paper ? aps.paper2
                 : cw.bg === aps.hanji ? aps.hanji2
                 : cw.bg === aps.warm  ? aps.warm2
                 : aps.ink;
  return (
    <div style={{
      width:'100%', height:'100%', background: cw.bg, color: cw.fg,
      fontFamily: aps.serif, position:'relative', overflow:'hidden',
      display:'flex', flexDirection:'column',
      backgroundImage:`radial-gradient(circle at 50% 0%, rgba(255,255,255,.32), transparent 65%)`,
    }}>
      {/* paper texture — adjusts opacity by colorway so dark sticks aren't muddied */}
      <div style={{position:'absolute', inset:0, opacity: cw.bg === aps.ink || cw.bg === aps.ink2 ? .05 : .07,
        backgroundImage:`repeating-linear-gradient(0deg, ${cw.fg} 0 .5px, transparent .5px 3px),
                         repeating-linear-gradient(90deg, ${cw.fg} 0 .5px, transparent .5px 3px)`}}></div>

      {/* tear notches */}
      <div style={{position:'absolute', top:'7%', right:-7, width:14, height:18, background: notchBg, borderRadius:'50%'}}></div>
      <div style={{position:'absolute', top:'7%', left:-7, width:14, height:18, background: notchBg, borderRadius:'50%'}}></div>

      {/* crimp */}
      <div style={{height:14, backgroundImage:`repeating-linear-gradient(90deg, ${cw.fg} 0 1px, transparent 1px 4px)`, opacity:.4, position:'relative'}}></div>

      <div style={{padding:'12px 12px 0', display:'flex', justifyContent:'space-between', position:'relative'}}>
        <span style={{fontFamily: aps.mono, fontSize:7, letterSpacing:'.26em', opacity:.75}}>R · G — {sku.no}</span>
        <span style={{fontFamily: aps.mono, fontSize:7, letterSpacing:'.26em', opacity:.75}}>SHADE · {cw.shade}</span>
      </div>

      {/* hero block — seal + brand + botanical, same as D1 */}
      <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', padding:'16px 14px 8px', textAlign:'center', position:'relative'}}>
        <ApsSeal size={30} fg={cw.fg} />
        <div style={{fontFamily: aps.serif, fontStyle:'italic', fontSize:13, marginTop:6, letterSpacing:'.04em'}}>Royal Goyal</div>
        <div style={{fontFamily: aps.han, fontSize:9, letterSpacing:'.3em', marginTop:2, opacity:.75}}>로얄 고얄</div>

        <div style={{height:1, width:'46%', background: cw.fg, opacity:.35, margin:'12px 0'}}></div>

        <div style={{fontFamily: aps.mono, fontSize:8, letterSpacing:'.32em', opacity:.8}}>NO. {sku.no}</div>
        <div style={{fontFamily: aps.serif, fontStyle:'italic', fontWeight:500, fontSize:34, lineHeight:1, marginTop:6}}>{sku.enLong}.</div>
        <div style={{fontFamily: aps.han, fontSize:14, letterSpacing:'.18em', marginTop:8, opacity:.85, fontWeight:500}}>{sku.kr}</div>

        <div style={{marginTop:14}}>
          <ApsBotanical skuId={skuId} color={cw.fg} size={92} />
        </div>

        <div style={{marginTop:10, fontFamily: aps.serif, fontStyle:'italic', fontSize:11, lineHeight:1.3, opacity:.85, maxWidth:'92%'}}>
          “{sku.fn}.”
        </div>
      </div>

      {/* spec footer */}
      <div style={{padding:'10px 12px 0', borderTop:`.5px solid ${cw.fg}`, opacity:.95, position:'relative'}}>
        <div style={{display:'flex', justifyContent:'space-between', fontFamily: aps.mono, fontSize:7, letterSpacing:'.22em', opacity:.78}}>
          <span>NET 20 G</span><span>{sku.cal} KCAL</span><span>{sku.timeOfDay.toUpperCase()}</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:6, marginTop:8, marginBottom:10}}>
          <div style={{flex:1, height:2, background: cw.fg, opacity:.5}}></div>
          <div style={{fontFamily: aps.mono, fontSize:7, letterSpacing:'.22em', opacity:.85}}>{sku.flavor.toUpperCase()}</div>
          <div style={{flex:1, height:2, background: cw.fg, opacity:.5}}></div>
        </div>
      </div>

      {/* complementary-neutral ribbon */}
      <div style={{height:5, background: cw.ribbon, position:'relative'}}></div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CARTON
// ─────────────────────────────────────────────────────────────
function CartonApoStamp({ skuId }) {
  const sku = SKU_BY_ID[skuId];
  const cw = APS_SKU[skuId];
  return (
    <div style={{
      width:'100%', height:'100%', background: cw.bg, color: cw.fg,
      fontFamily: aps.serif, padding:36, position:'relative', overflow:'hidden',
      display:'flex', flexDirection:'column',
    }}>
      <div style={{position:'absolute', inset:0, opacity: cw.bg === aps.ink || cw.bg === aps.ink2 ? .04 : .06,
        backgroundImage:`repeating-linear-gradient(0deg, ${cw.fg} 0 .5px, transparent .5px 4px),
                         repeating-linear-gradient(90deg, ${cw.fg} 0 .5px, transparent .5px 4px)`}}></div>
      <div style={{position:'absolute', inset:14, border:`.5px solid ${cw.fg}`, opacity:.4, pointerEvents:'none'}}></div>

      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', position:'relative'}}>
        <div>
          <div style={{fontFamily: aps.mono, fontSize:10, letterSpacing:'.28em', opacity:.7}}>R · G — {sku.no}</div>
          <div style={{fontFamily: aps.serif, fontStyle:'italic', fontWeight:500, fontSize:22, marginTop:8}}>Royal Goyal</div>
          <div style={{fontFamily: aps.han, fontSize:11, letterSpacing:'.3em', opacity:.78}}>로얄 고얄</div>
        </div>
        <div style={{textAlign:'right', display:'flex', flexDirection:'column', alignItems:'flex-end', gap:8}}>
          <ApsSeal size={42} fg={cw.fg} />
          <div style={{fontFamily: aps.mono, fontSize:9, letterSpacing:'.28em', opacity:.7}}>SHADE · {cw.shade}</div>
        </div>
      </div>

      <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'space-between', gap:28, marginTop:10, position:'relative'}}>
        <div style={{flex:1}}>
          <div style={{fontFamily: aps.mono, fontSize:10, letterSpacing:'.32em', opacity:.85}}>NO. {sku.no}  ·  {sku.role.toUpperCase()}</div>
          <div style={{fontFamily: aps.serif, fontStyle:'italic', fontWeight:500, fontSize:66, lineHeight:.94, letterSpacing:'-.01em', marginTop:10}}>{sku.enLong}.</div>
          <div style={{fontFamily: aps.han, fontSize:22, letterSpacing:'.22em', marginTop:8, opacity:.9}}>{sku.krFull}</div>
          <div style={{fontFamily: aps.serif, fontStyle:'italic', fontSize:15, marginTop:14, opacity:.85, maxWidth:'92%'}}>“{sku.fn}.”</div>
        </div>
        <div style={{flex:'0 0 auto'}}>
          <ApsBotanical skuId={skuId} color={cw.fg} size={170} />
        </div>
      </div>

      <div style={{position:'relative', borderTop:`.5px solid ${cw.fg}`, paddingTop:12, marginTop:6}}>
        <div style={{display:'flex', gap:18, fontFamily: aps.mono, fontSize:9, letterSpacing:'.22em', opacity:.85, flexWrap:'wrap'}}>
          {sku.keyIngredients.map((k,i)=>(<span key={i}>· {k.toUpperCase()}</span>))}
        </div>
        <div style={{display:'flex', justifyContent:'space-between', marginTop:10, fontFamily: aps.mono, fontSize:9, letterSpacing:'.2em', opacity:.7}}>
          <span>10 STICKS × 20 G  ·  NET 200 G</span>
          <span>FLAVOR · {sku.flavor.toUpperCase()}</span>
          <span>EST. 2026 · SEOUL</span>
        </div>
      </div>
      <div style={{height:5, background: cw.ribbon, position:'relative', marginTop:14}}></div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SHELF LINEUP
// ─────────────────────────────────────────────────────────────
function ShelfApoStamp() {
  return (
    <div style={{
      width:'100%', height:'100%',
      background:`linear-gradient(180deg, ${aps.paper} 0%, ${aps.paper2} 100%)`,
      color: aps.ink, fontFamily: aps.serif, padding:'44px 56px',
      display:'flex', flexDirection:'column', justifyContent:'space-between',
      position:'relative', overflow:'hidden',
    }}>
      <div style={{position:'absolute', inset:0, opacity:.05,
        backgroundImage:`repeating-linear-gradient(0deg, ${aps.ink} 0 .5px, transparent .5px 26px),
                         repeating-linear-gradient(90deg, ${aps.ink} 0 .5px, transparent .5px 26px)`}}></div>

      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', position:'relative'}}>
        <div>
          <div style={{fontFamily: aps.mono, fontSize:11, letterSpacing:'.32em', opacity:.6}}>THE APOTHECARY — STAMPED EDITION</div>
          <div style={{fontFamily: aps.serif, fontStyle:'italic', fontWeight:500, fontSize:54, lineHeight:1, marginTop:10}}>
            One ritual.<br/>Four shades.
          </div>
          <div style={{fontFamily: aps.han, fontSize:16, letterSpacing:'.18em', opacity:.65, marginTop:8}}>하나의 의식 · 네 가지 색</div>
        </div>
        <div style={{textAlign:'right', fontFamily: aps.mono, fontSize:10, letterSpacing:'.28em', opacity:.6}}>
          <div>R · G  /  SS 26</div>
          <div style={{marginTop:6}}>SHELF SET 01</div>
          <div style={{marginTop:6}}>SEOUL · REPUBLIC OF KOREA</div>
        </div>
      </div>

      <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'space-between', gap:28, position:'relative'}}>
        {SKUS.map((sku)=>(
          <div key={sku.id} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:14}}>
            <div style={{width:150, height:480, boxShadow:'0 22px 36px rgba(31,22,16,.25), 0 4px 8px rgba(31,22,16,.12)'}}>
              <StickApoStamp skuId={sku.id} />
            </div>
            <div style={{textAlign:'center'}}>
              <div style={{fontFamily: aps.mono, fontSize:9, letterSpacing:'.24em', opacity:.55}}>SHADE · {APS_SKU[sku.id].shade}</div>
              <div style={{fontFamily: aps.serif, fontStyle:'italic', fontWeight:500, fontSize:20, marginTop:4}}>{sku.enLong}</div>
              <div style={{fontFamily: aps.mono, fontSize:9, letterSpacing:'.24em', opacity:.55, marginTop:4}}>{sku.role.toUpperCase()}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{position:'relative', display:'flex', justifyContent:'space-between', fontFamily: aps.mono, fontSize:10, letterSpacing:'.28em', opacity:.55, borderTop:`.5px solid rgba(31,22,16,.2)`, paddingTop:14}}>
        <span>SHADES — PAPER · WARM · INK · HANJI</span>
        <span>NET 20 G PER STICK</span>
        <span>EST. 2026</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────
function HeroApoStamp() {
  return (
    <div style={{
      width:'100%', height:'100%', background: aps.paper, color: aps.ink,
      fontFamily: aps.serif, position:'relative', overflow:'hidden',
      display:'grid', gridTemplateColumns:'1.1fr 1fr',
    }}>
      <div style={{position:'absolute', inset:0, opacity:.05,
        backgroundImage:`repeating-linear-gradient(0deg, ${aps.ink} 0 .5px, transparent .5px 30px),
                         repeating-linear-gradient(90deg, ${aps.ink} 0 .5px, transparent .5px 30px)`}}></div>

      <div style={{padding:'56px 56px 48px', display:'flex', flexDirection:'column', justifyContent:'space-between', position:'relative'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <ApsSeal size={46} fg={aps.ink} />
          <div style={{fontFamily: aps.mono, fontSize:10, letterSpacing:'.32em', opacity:.65}}>ISSUE 007 · SS 26</div>
        </div>

        <div>
          <div style={{fontFamily: aps.mono, fontSize:11, letterSpacing:'.32em', color: aps.warm}}>A MODERN HANBANG · STAMPED EDITION</div>
          <div style={{fontFamily: aps.serif, fontStyle:'italic', fontWeight:500, fontSize:92, lineHeight:.92, marginTop:14, letterSpacing:'-.02em'}}>
            For the body<br/>that has work<br/>to do.
          </div>
          <div style={{fontFamily: aps.han, fontSize:18, marginTop:18, letterSpacing:'.14em', opacity:.78}}>해야 할 일이 있는 몸을 위해.</div>
          <div style={{maxWidth:480, marginTop:22, fontFamily: aps.serif, fontStyle:'italic', fontSize:18, lineHeight:1.45, opacity:.85}}>
            Twenty grams of focused intent — minerals, roots and adaptogens, measured the way a Seoul pharmacist measures them. Each formula printed onto a different shade of Korean paper, ink or earth.
          </div>
        </div>

        {/* shade swatches */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10}}>
          {[
            ['PAPER', aps.paper, aps.ink],
            ['WARM',  aps.warm,  aps.paper],
            ['INK',   aps.ink2,  aps.paper],
            ['HANJI', aps.hanji, aps.ink],
          ].map(([n,bg,fg])=>(
            <div key={n} style={{padding:10, border:`.5px solid rgba(31,22,16,.18)`, background: bg, color: fg}}>
              <div style={{height:30, marginBottom:8}}></div>
              <div style={{fontFamily: aps.mono, fontSize:9, letterSpacing:'.28em', opacity:.85}}>{n}</div>
            </div>
          ))}
        </div>
      </div>

      {/* RIGHT — fanned arrangement of the five sticks */}
      <div style={{position:'relative', background:`radial-gradient(circle at 50% 50%, ${aps.paper2} 0%, ${aps.paper} 70%, #d8cdb1 100%)`, overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
          {SKUS.map((sku,i)=>{
            const angles  = [-22,-11, 0, 11, 22];
            const offsets = [-160,-80, 0, 80,160];
            return (
              <div key={sku.id} style={{
                position:'absolute', width:170, height:540,
                transform:`translateX(${offsets[i]}px) translateY(${Math.abs(i-2)*22}px) rotate(${angles[i]}deg)`,
                boxShadow:'0 26px 44px rgba(31,22,16,.28), 0 6px 12px rgba(31,22,16,.16)',
                zIndex: 10 - Math.abs(i-2),
              }}>
                <StickApoStamp skuId={sku.id} />
              </div>
            );
          })}
        </div>
        <div style={{position:'absolute', bottom:24, right:28, fontFamily: aps.mono, fontSize:10, letterSpacing:'.32em', opacity:.55}}>
          ↳ 5 FORMULAS  ·  4 SHADES
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StickApoStamp, CartonApoStamp, ShelfApoStamp, HeroApoStamp, APS_SKU, ApsBotanical, ApsSeal });