// Product Detail Page

function PagePDP({ skuId, setPage, addToCart }) {
  const sku = SKU_BY_ID[skuId];
  const cw = APS_SKU[skuId];
  const [qty, setQty] = React.useState(1);
  const [mode, setMode] = React.useState('subscribe'); // 'subscribe' | 'once'
  const [openFaq, setOpenFaq] = React.useState(0);
  const drop = useDrop();
  const vp = useViewport();

  const sub = mode === 'subscribe';
  const unitPrice = PRICE[skuId];
  const subPrice  = Math.round(unitPrice * .85);

  const others = SKUS.filter((s) => s.id !== skuId);

  return (
    <div style={{background: site.paper, color: site.ink}}>

      {/* breadcrumb */}
      <div style={{maxWidth:1400, margin:'0 auto', padding:'24px 32px 0', fontFamily: site.mono, fontSize:10, letterSpacing:'.28em', opacity:.55}}>
        <span style={{cursor:'pointer'}} onClick={() => setPage({page:'home'})}>HOME</span>
        <span style={{margin:'0 10px'}}>/</span>
        <span style={{cursor:'pointer'}} onClick={() => setPage({page:'shop'})}>SHOP</span>
        <span style={{margin:'0 10px'}}>/</span>
        <span>NO. {sku.no} · {sku.en}</span>
      </div>

      {/* HERO PRODUCT */}
      <section style={{maxWidth:1400, margin:'0 auto', padding: vp.isMobile ? '20px 18px 56px' : '40px 32px 80px', display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1.2fr 1fr', gap: vp.isMobile ? 32 : 64, alignItems:'start'}}>

        {/* LEFT — visual stack of imagery */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'auto auto', gap:18}}>
          {/* big pouch shot */}
          <div style={{
            gridColumn:'span 2', aspectRatio:'4 / 3', background: cw.bg, position:'relative', overflow:'hidden',
            display:'flex', alignItems:'center', justifyContent:'center', border:`.5px solid ${site.rule}`,
          }}>
            <div style={{position:'absolute', inset:0, opacity:.06,
              backgroundImage:`repeating-linear-gradient(0deg, ${cw.fg} 0 .5px, transparent .5px 28px),
                               repeating-linear-gradient(90deg, ${cw.fg} 0 .5px, transparent .5px 28px)`}}></div>
            <div style={{position:'absolute', top:18, left:18, color: cw.fg, fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.75}}>
              NO. {sku.no}  ·  {sku.role.toUpperCase()}
            </div>
            <div style={{position:'absolute', top:18, right:18, color: cw.fg, fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.75}}>
              SHADE · {cw.shade}
            </div>
            <div style={{width:170, height:560, boxShadow:'0 30px 50px rgba(31,22,16,.3), 0 6px 12px rgba(31,22,16,.18)'}}>
              <StickApoStamp skuId={skuId} />
            </div>
            <div style={{position:'absolute', bottom:18, left:18, right:18, color: cw.fg, fontFamily: site.serif, fontStyle:'italic', fontSize:22, opacity:.92}}>
              “{sku.fn}.”
            </div>
          </div>

          {/* ingredient detail tile */}
          <div style={{aspectRatio:'1', background: site.paper2, padding:24, display:'flex', flexDirection:'column', justifyContent:'space-between', border:`.5px solid ${site.rule}`}}>
            <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.6}}>BOTANICAL</div>
            <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <ApsBotanical skuId={skuId} color={site.ink} size={130} />
            </div>
            <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:20, lineHeight:1.2}}>
              {sku.keyIngredients[0]}
            </div>
          </div>

          {/* lab spec tile */}
          <div style={{aspectRatio:'1', background: site.ink, color: site.paper, padding:24, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
            <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.55}}>LAB SPEC</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {[
                ['DOSE','20 g per stick'],
                ['KCAL', sku.cal],
                ['USE',  sku.timeOfDay],
                ['SUGAR','None added'],
                ['PECTIN','Vegan'],
              ].map(([k,v])=>(
                <div key={k} style={{display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'baseline', gap:8, fontFamily: site.mono, fontSize:10, letterSpacing:'.2em'}}>
                  <span style={{opacity:.55}}>{k}</span>
                  <span style={{height:0, borderTop:'.5px dashed rgba(239,230,212,.35)', transform:'translateY(-2px)'}}></span>
                  <span>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — buy box */}
        <div style={{position: vp.isMobile ? 'static' : 'sticky', top:120}}>
          <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', color: site.warm}}>NO. {sku.no}  ·  {sku.role.toUpperCase()}</div>
          <h1 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 56 : 80, lineHeight:.9, letterSpacing:'-.02em', margin:'14px 0 0'}}>{sku.enLong}.</h1>
          <div style={{fontFamily: site.han, fontSize:22, letterSpacing:'.18em', marginTop:10, opacity:.78}}>{sku.krFull}</div>
          <p style={{fontFamily: site.serif, fontStyle:'italic', fontSize:20, lineHeight:1.4, marginTop:18, opacity:.85}}>
            {sku.fn}. A twenty-gram stick of {sku.flavor.toLowerCase()} jelly, dosed with {sku.keyIngredients.slice(0,3).join(', ').toLowerCase()} and the patience of a Seoul pharmacist.
          </p>

          {/* rating */}
          <div style={{display:'flex', alignItems:'center', gap:10, marginTop:20, fontFamily: site.mono, fontSize:11, letterSpacing:'.22em', opacity:.75}}>
            <span style={{letterSpacing:'.2em'}}>★★★★★</span>
            <span>4.9 · 1,284 RITUALS</span>
          </div>

          {/* mode toggle */}
          <div style={{marginTop:28, border:`1px solid ${site.ink}`, padding:6, display:'grid', gridTemplateColumns:'1fr 1fr', gap:4}}>
            {['subscribe','once'].map((m)=>(
              <div key={m} onClick={() => setMode(m)} style={{
                cursor:'pointer', padding:'14px 16px',
                background: mode === m ? site.ink : 'transparent', color: mode === m ? site.paper : site.ink,
                fontFamily: site.mono, fontSize:11, letterSpacing:'.26em', textAlign:'center', textTransform:'uppercase',
                transition:'all .15s ease',
              }}>
                {m === 'subscribe' ? 'Subscribe · −15%' : 'One-time'}
              </div>
            ))}
          </div>

          {sub && (
            <div style={{marginTop:14, padding:'14px 16px', background: site.paper2, fontFamily: site.serif, fontStyle:'italic', fontSize:15, lineHeight:1.35, opacity:.85, border:`.5px solid ${site.rule}`}}>
              Ships every <strong style={{fontStyle:'normal', fontFamily: site.mono, fontSize:12, letterSpacing:'.22em'}}>4 WEEKS</strong>. Cancel any time. First box ships in 2 days.
            </div>
          )}

          {/* qty */}
          <div style={{marginTop:24, display:'flex', alignItems:'center', justifyContent:'space-between', gap:16}}>
            <div style={{display:'flex', alignItems:'center', border:`1px solid ${site.ink}`}}>
              <button onClick={() => setQty(Math.max(1, qty-1))} style={{padding:'14px 18px', background:'transparent', border:'none', cursor:'pointer', fontFamily: site.mono, fontSize:13}}>−</button>
              <span style={{padding:'14px 22px', fontFamily: site.mono, fontSize:13, letterSpacing:'.2em', borderInline:`1px solid ${site.ink}`}}>{String(qty).padStart(2,'0')}</span>
              <button onClick={() => setQty(qty+1)} style={{padding:'14px 18px', background:'transparent', border:'none', cursor:'pointer', fontFamily: site.mono, fontSize:13}}>+</button>
            </div>
            <div style={{flex:1, display:'flex', justifyContent:'flex-end', alignItems:'baseline', gap:12, fontFamily: site.mono, fontSize:11, letterSpacing:'.22em'}}>
              {sub && <span style={{textDecoration:'line-through', opacity:.4}}>${unitPrice}</span>}
              <span style={{fontFamily: site.serif, fontStyle:'italic', fontSize:36, letterSpacing:'-.01em'}}>${sub ? subPrice : unitPrice}</span>
              <span style={{opacity:.6}}>/ BOX</span>
            </div>
          </div>

          <button
            className="rg-btn"
            onClick={() => drop.open(sku.id)}
            style={{
              width:'100%', marginTop:20, padding:'18px 22px',
              background: site.ink, color: site.paper, border:`1px solid ${site.ink}`,
              fontFamily: site.mono, fontSize:11, letterSpacing:'.28em', textTransform:'uppercase',
              cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'space-between', gap:10,
            }}>
            <span>Sign up for drop release</span>
            <span style={{display:'flex', alignItems:'center', gap:10}}>
              <span style={{opacity:.55, fontSize:10}}>EST. ${sub ? subPrice : unitPrice} × {qty}</span>
              <AnimatedArrow />
            </span>
          </button>

          <div style={{marginTop:12, fontFamily: site.mono, fontSize:9, letterSpacing:'.26em', opacity:.55, textAlign:'center'}}>
            PRE-LAUNCH · ESTIMATED PRICE · FIRST 500 SIGNUPS GET 20% OFF
          </div>

          <div style={{marginTop:16, display:'flex', gap:18, fontFamily: site.mono, fontSize:9, letterSpacing:'.28em', opacity:.6}}>
            <span>FREE SHIP OVER $80</span>
            <span>SHIPS IN 2 DAYS</span>
            <span>30-DAY RETURNS</span>
          </div>

          {/* ingredient strip */}
          <div style={{marginTop:32, borderTop:`.5px solid ${site.rule}`, paddingTop:18}}>
            <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.55}}>WHAT'S INSIDE</div>
            <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px 18px'}}>
              {sku.keyIngredients.map((k)=>(
                <div key={k} style={{display:'flex', alignItems:'baseline', gap:10}}>
                  <span style={{width:6, height:6, background: cw.bg, border:`1px solid ${site.ink}`, marginTop:6}}></span>
                  <div>
                    <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:17, lineHeight:1.1}}>{k}</div>
                    <div style={{fontFamily: site.mono, fontSize:9, letterSpacing:'.22em', opacity:.55, marginTop:3}}>HANBANG · CLINICAL</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* HOW TO USE strip */}
      <section style={{padding: vp.isMobile ? '56px 18px' : '80px 32px', background: cw.bg, color: cw.fg, position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:.06,
          backgroundImage:`repeating-linear-gradient(0deg, ${cw.fg} 0 .5px, transparent .5px 28px),
                           repeating-linear-gradient(90deg, ${cw.fg} 0 .5px, transparent .5px 28px)`}}></div>
        <div style={{maxWidth:1400, margin:'0 auto', position:'relative'}}>
          <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.75}}>THE RITUAL</div>
          <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:64, letterSpacing:'-.02em', margin:'12px 0 0', lineHeight:1}}>Tear. Squeeze. Continue.</h2>
          <div style={{marginTop:48, display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : 'repeat(3, 1fr)', gap:32}}>
            {[
              ['01', 'Tear', 'Pinch the foil notch. The stick is engineered to open clean — no scissors, no spill.'],
              ['02', 'Squeeze', 'Squeeze the full 20 g into your mouth. The jelly is room-temperature stable for 18 months.'],
              ['03', 'Continue', `Take ${sku.role.toLowerCase()} on the move. ${sku.timeOfDay} works best — no water required.`],
            ].map(([n, t, d])=>(
              <div key={n}>
                <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.7}}>STEP {n}</div>
                <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:44, marginTop:10, lineHeight:1, letterSpacing:'-.01em'}}>{t}.</div>
                <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:17, lineHeight:1.4, marginTop:14, opacity:.85, maxWidth:320}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{padding: vp.isMobile ? '56px 18px' : '80px 32px', borderBottom:`.5px solid ${site.rule}`}}>
        <div style={{maxWidth:900, margin:'0 auto'}}>
          <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.6}}>QUESTIONS</div>
          <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:48, margin:'10px 0 36px', lineHeight:1, letterSpacing:'-.02em'}}>The fine print, italicised.</h2>
          {[
            ['Can I take more than one stick a day?', `Yes — up to two ${sku.enLong} sticks per day is well within our recommended use. Beyond that, write our pharmacist at ask@royalgoyal.kr.`],
            ['Is the pectin really vegan?', 'Yes. We use fruit pectin from Korean apple and citrus skins. No gelatine, no carrageenan.'],
            ['How is it shelf-stable for 18 months?', 'A nitrogen flush in the sachet plus a five-layer foil lamination. No preservatives, no refrigeration needed.'],
            ['Can I stack it with the other formulas?', 'That is the entire point. Try our Build a Stack tool to plan a five-stick day across morning, training, and wind-down.'],
          ].map(([q, a], i) => (
            <div key={q} style={{borderTop:`.5px solid ${site.rule}`, padding:'22px 0', cursor:'pointer'}} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:24}}>
                <div style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:26, letterSpacing:'-.01em'}}>{q}</div>
                <div style={{fontFamily: site.mono, fontSize:14, opacity:.6}}>{openFaq === i ? '−' : '+'}</div>
              </div>
              {openFaq === i && (
                <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:18, lineHeight:1.5, marginTop:14, opacity:.85, maxWidth:680}}>
                  {a}
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* RELATED FORMULAS */}
      <section style={{padding: vp.isMobile ? '56px 18px' : '80px 32px', borderBottom:`.5px solid ${site.rule}`}}>
        <div style={{maxWidth:1400, margin:'0 auto'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems: vp.isMobile ? 'flex-start' : 'baseline', flexDirection: vp.isMobile ? 'column' : 'row', gap: vp.isMobile ? 20 : 0, marginBottom:36}}>
            <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 36 : 44, margin:0, letterSpacing:'-.02em'}}>Stack it with.</h2>
            <SiteButton variant="outline" onClick={() => setPage({page:'stack'})}>Build a stack →</SiteButton>
          </div>
          <div style={{display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : vp.isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap:24}}>
            {others.map((o)=>(<ProductCard key={o.id} skuId={o.id} setPage={setPage} />))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PagePDP });