// Home page — hero, featured grid, philosophy, ritual stack, journal, press, footer-adjacent.

function PageHome({ setPage, addToCart }) {
  const vp = useViewport();
  return (
    <div style={{background: site.paper, color: site.ink}}>

      {/* ─────── HERO ─────── */}
      <section style={{position:'relative', overflow:'hidden', borderBottom:`.5px solid ${site.rule}`}}>
        <div style={{position:'absolute', inset:0, opacity:.06,
          backgroundImage:`repeating-linear-gradient(0deg, ${site.ink} 0 .5px, transparent .5px 28px),
                           repeating-linear-gradient(90deg, ${site.ink} 0 .5px, transparent .5px 28px)`}}></div>
        <div style={{maxWidth:1400, margin:'0 auto', padding: vp.isMobile ? '40px 18px 56px' : '80px 32px 100px', display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1.15fr 1fr', gap: vp.isMobile ? 32 : 60, alignItems:'center', position:'relative'}}>
          <div>
            <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', color: site.warm}}>A MODERN HANBANG · 한방의 현대</div>
            <h1 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 60 : 108, lineHeight:.92, letterSpacing:'-.025em', margin: vp.isMobile ? '14px 0 0' : '22px 0 0'}}>
              For the body<br/>that has<br/>work to do.
            </h1>
            <div style={{fontFamily: site.han, fontSize: vp.isMobile ? 15 : 20, letterSpacing:'.14em', marginTop: vp.isMobile ? 16 : 24, opacity:.78}}>해야 할 일이 있는 몸을 위해.</div>
            <p style={{fontFamily: site.serif, fontStyle:'italic', fontSize: vp.isMobile ? 17 : 20, lineHeight:1.45, marginTop: vp.isMobile ? 18 : 26, maxWidth:520, opacity:.85}}>
              Twenty grams of focused intent — minerals, roots and adaptogens, measured the way a Seoul pharmacist measures them. No drink to mix. Nothing to swallow. Tear, and continue.
            </p>
            <div style={{display:'flex', gap:14, marginTop: vp.isMobile ? 24 : 36, flexWrap:'wrap'}}>
              <SiteButton onClick={() => setPage({page:'shop'})}>Shop the apothecary →</SiteButton>
              <SiteButton variant="outline" onClick={() => setPage({page:'stack'})}>Build your stack</SiteButton>
            </div>
            <div style={{display:'flex', gap: vp.isMobile ? 16 : 30, marginTop: vp.isMobile ? 24 : 38, fontFamily: site.mono, fontSize:10, letterSpacing:'.28em', opacity:.65, flexWrap:'wrap'}}>
              <span>NO SUGAR ADDED</span><span>VEGAN PECTIN</span><span>MADE IN KR</span><span>SHIPS WORLDWIDE</span>
            </div>
          </div>

          {/* fanned pouches — 3 visible, auto-rotate through the 5 */}
          <HeroPouches setPage={setPage} />
        </div>
      </section>

      {/* ─────── FIVE FORMULAS GRID ─────── */}
      <section style={{padding: vp.isMobile ? '56px 18px' : '90px 32px', borderBottom:`.5px solid ${site.rule}`, position:'relative'}}>
        <div style={{maxWidth:1400, margin:'0 auto'}}>
          <ScrollReveal>
            <div style={{display:'flex', justifyContent:'space-between', alignItems: vp.isMobile ? 'flex-start' : 'baseline', flexDirection: vp.isMobile ? 'column' : 'row', gap: vp.isMobile ? 20 : 0, marginBottom: vp.isMobile ? 28 : 48}}>
              <div>
                <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.6}}>THE APOTHECARY — 005 FORMULAS</div>
                <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 44 : 60, letterSpacing:'-.02em', margin:'14px 0 0', lineHeight:1}}>One ritual, five shades.</h2>
              </div>
              <SiteButton variant="outline" onClick={() => setPage({page:'shop'})}>See all formulas →</SiteButton>
            </div>
          </ScrollReveal>
          <div style={{display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : vp.isTablet ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)', gap: vp.isMobile ? 20 : 24}}>
            {SKUS.map((sku, i)=>(
              <ScrollReveal key={sku.id} delay={i * 80}>
                <ProductCard skuId={sku.id} setPage={setPage} />
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── PHILOSOPHY split ─────── */}
      <section style={{background: site.ink, color: site.paper, padding: vp.isMobile ? '56px 18px' : '90px 32px', borderBottom:`.5px solid rgba(239,230,212,.18)`}}>
        <div style={{maxWidth:1400, margin:'0 auto', display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1fr 1.2fr', gap: vp.isMobile ? 32 : 64, alignItems:'center'}}>
          <ScrollReveal>
          <div>
            <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.65, color: site.hanji}}>OUR HOUSE</div>
            <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 52 : 84, lineHeight:.9, letterSpacing:'-.02em', margin:'18px 0 0'}}>A pharmacy<br/>that travels.</h2>
            <p style={{fontFamily: site.serif, fontStyle:'italic', fontSize:20, lineHeight:1.5, marginTop:24, opacity:.85, maxWidth:520}}>
              Royal Goyal began in a small dispensary in Seoul's Bukchon district, with a single question: could a thousand-year hanbang tradition be measured in milligrams, sealed in a sachet, and tucked into a gym bag?
            </p>
            <div style={{marginTop:30, display:'flex', gap: vp.isMobile ? 18 : 32, flexWrap:'wrap'}}>
              {[
                ['Calm', 'We write the way a pharmacist speaks.'],
                ['Specific', 'Doses in grams. Never vague promises.'],
                ['Modern', 'Hanbang lineage, 2026 mouthfeel.'],
              ].map(([k,v])=>(
                <div key={k} style={{maxWidth:160}}>
                  <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.55}}>{k.toUpperCase()}</div>
                  <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:18, lineHeight:1.3, marginTop:6, opacity:.92}}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{marginTop:36}}>
              <SiteButton variant="outline" fg={site.paper} onClick={() => setPage({page:'about'})}>Read our story →</SiteButton>
            </div>
          </div>
          </ScrollReveal>
          <ScrollReveal delay={150}>
          <div style={{position:'relative', height: vp.isMobile ? 320 : 520}}>
            <div style={{position:'absolute', inset:0, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr', gap:16}}>
              {['hydrate','recover','sleep','revive'].map((id, i) => (
                <div key={id} style={{background: APS_SKU[id].bg, padding:16, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
                  <div style={{fontFamily: site.mono, fontSize:9, letterSpacing:'.28em', color: APS_SKU[id].fg, opacity:.75}}>SHADE · {APS_SKU[id].shade}</div>
                  <div>
                    <div style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:32, color: APS_SKU[id].fg, lineHeight:1}}>{SKU_BY_ID[id].enLong}.</div>
                    <div style={{fontFamily: site.han, fontSize:12, letterSpacing:'.22em', color: APS_SKU[id].fg, opacity:.78, marginTop:6}}>{SKU_BY_ID[id].krFull}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          </ScrollReveal>
        </div>
      </section>

      {/* ─────── RITUAL — a day in the apothecary ─────── */}
      <section style={{padding: vp.isMobile ? '56px 18px' : '90px 32px', position:'relative', borderBottom:`.5px solid ${site.rule}`}}>
        <div style={{maxWidth:1400, margin:'0 auto'}}>
          <div style={{textAlign:'center'}}>
            <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.6}}>A DAY IN THE APOTHECARY</div>
            <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 40 : 64, letterSpacing:'-.02em', margin:'14px 0 0', lineHeight:1}}>From wake to wind-down.</h2>
            <p style={{fontFamily: site.serif, fontStyle:'italic', fontSize: vp.isMobile ? 16 : 18, lineHeight:1.4, marginTop:14, opacity:.78, maxWidth:560, margin:'14px auto 0'}}>
              The five formulas stack across the hours. Pour none of them in water — tear the foil, squeeze, swallow, move on.
            </p>
          </div>
          <div style={{marginTop: vp.isMobile ? 40 : 60, display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : 'repeat(5, 1fr)', gap: vp.isMobile ? 28 : 0, position:'relative'}}>
            {[
              { time:'06:30', skuId:'focus',   note:'Sharp before the inbox opens.' },
              { time:'11:00', skuId:'hydrate', note:'Replace what coffee took.' },
              { time:'17:30', skuId:'recover', note:'Right after the last set.' },
              { time:'22:00', skuId:'sleep',   note:'Wind down without the headache.' },
              { time:'AS·NEEDED', skuId:'revive', note:'Before the second drink. And after.' },
            ].map((step, i, arr) => {
              const sku = SKU_BY_ID[step.skuId];
              const cw  = APS_SKU[step.skuId];
              return (
                <div key={step.skuId} style={{position:'relative', padding:'0 16px', textAlign:'center'}}>
                  {!vp.isMobile && i < arr.length-1 && <div style={{position:'absolute', top:40, left:'58%', right:'-42%', height:1, background: site.rule}}></div>}
                  <div style={{width:64, height:64, borderRadius:'50%', background: cw.bg, color: cw.fg, fontFamily: site.mono, fontSize:9, letterSpacing:'.22em', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto', position:'relative', zIndex:2, border:`.5px solid ${site.rule}`}}>{step.time}</div>
                  <div style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:26, marginTop:18}}>{sku.enLong}.</div>
                  <div style={{fontFamily: site.mono, fontSize:9, letterSpacing:'.26em', opacity:.55, marginTop:6}}>NO. {sku.no}  ·  {sku.role.toUpperCase()}</div>
                  <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:15, lineHeight:1.4, opacity:.82, marginTop:14, maxWidth:200, marginInline:'auto'}}>“{step.note}”</div>
                </div>
              );
            })}
          </div>
          <div style={{textAlign:'center', marginTop:48}}>
            <SiteButton onClick={() => setPage({page:'stack'})}>Build your ritual →</SiteButton>
          </div>
        </div>
      </section>

      {/* ─────── PRESS strip (marquee) ─────── */}
      <section style={{padding:'40px 0', borderBottom:`.5px solid ${site.rule}`, background: site.paper2, overflow:'hidden'}}>
        <div className="rg-marquee-track" style={{fontFamily: site.serif, fontStyle:'italic', fontSize:22, opacity:.75, whiteSpace:'nowrap', alignItems:'baseline'}}>
          {Array.from({length: 2}).map((_, k) => (
            <React.Fragment key={k}>
              <span>“The new face of hanbang.”</span>
              <span style={{fontFamily: site.mono, fontStyle:'normal', fontSize:11, letterSpacing:'.32em', opacity:.7}}>VOGUE KOREA</span>
              <span style={{opacity:.4}}>·</span>
              <span style={{fontFamily: site.mono, fontStyle:'normal', fontSize:11, letterSpacing:'.32em', opacity:.7}}>MR. PORTER</span>
              <span style={{opacity:.4}}>·</span>
              <span>“Tear, squeeze, do.”</span>
              <span style={{fontFamily: site.mono, fontStyle:'normal', fontSize:11, letterSpacing:'.32em', opacity:.7}}>NOWNESS</span>
              <span style={{opacity:.4}}>·</span>
              <span style={{fontFamily: site.mono, fontStyle:'normal', fontSize:11, letterSpacing:'.32em', opacity:.7}}>WHALEBONE</span>
              <span style={{opacity:.4}}>·</span>
              <span>“Quiet, specific, modern.”</span>
              <span style={{fontFamily: site.mono, fontStyle:'normal', fontSize:11, letterSpacing:'.32em', opacity:.7}}>MONOCLE</span>
              <span style={{opacity:.4}}>·</span>
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* ─────── JOURNAL ─────── */}
      <section style={{padding: vp.isMobile ? '56px 18px' : '90px 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: vp.isMobile ? 28 : 40}}>
            <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 40 : 54, letterSpacing:'-.02em', margin:0, lineHeight:1}}>From the Journal.</h2>
            <SiteButton variant="outline" onClick={() => setPage({page:'journal'})}>All entries →</SiteButton>
          </div>
          <div style={{display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1.4fr 1fr 1fr', gap: vp.isMobile ? 28 : 32}}>
            {[
              { tag:'INGREDIENTS', title:'On the patience of hovenia dulcis.', read:'8 min', shade:'WARM' },
              { tag:'LAB NOTES',   title:'Why we dose magnesium glycinate, not citrate.', read:'5 min', shade:'INK' },
              { tag:'HANBANG',     title:'A short history of the jelly stick.', read:'12 min', shade:'HANJI' },
            ].map((e, i) => {
              const accent = e.shade === 'WARM' ? site.warm : e.shade === 'INK' ? site.ink : site.hanji;
              return (
                <ScrollReveal key={e.title} delay={i * 120}>
                  <article className="rg-card-lift" style={{display:'flex', flexDirection:'column', cursor:'pointer'}}>
                    <div style={{aspectRatio:'4 / 3', background: accent, position:'relative', overflow:'hidden'}}>
                      <div style={{position:'absolute', inset:0, opacity:.08,
                        backgroundImage:`repeating-linear-gradient(45deg, #fff 0 .5px, transparent .5px 8px)`}}></div>
                      <div style={{position:'absolute', bottom:16, left:16, right:16, color: e.shade === 'HANJI' ? site.ink : site.paper, fontFamily: site.mono, fontSize:9, letterSpacing:'.28em', display:'flex', justifyContent:'space-between'}}>
                        <span>{e.tag}</span><span>{e.read} READ</span>
                      </div>
                    </div>
                    <h3 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:30, lineHeight:1.1, letterSpacing:'-.01em', marginTop:18}}>{e.title}</h3>
                    <span className="rg-link-underline" style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.28em', opacity:.55, marginTop:14, cursor:'pointer', alignSelf:'flex-start'}}>READ →</span>
                  </article>
                </ScrollReveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* ─────── DROP CTA band ─────── */}
      <section style={{padding: vp.isMobile ? '70px 18px' : '100px 32px', background: site.hanji}}>
        <ScrollReveal>
        <div style={{maxWidth:900, margin:'0 auto', textAlign:'center'}}>
          <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.6}}>THE FIRST DROP · SS 26</div>
          <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 46 : 72, letterSpacing:'-.02em', margin:'14px 0 0', lineHeight:.95}}>The apothecary opens soon.</h2>
          <p style={{fontFamily: site.serif, fontStyle:'italic', fontSize:20, lineHeight:1.4, opacity:.82, marginTop:20, maxWidth:560, marginInline:'auto'}}>
            We are taking names. The first 500 inboxes get twenty percent off the launch box and shipping anywhere in Korea, the US, and Japan.
          </p>
          <div style={{display:'flex', justifyContent:'center', marginTop:30}}>
            <DropCTA source="home-banner">Sign up for drop release</DropCTA>
          </div>
          <div style={{marginTop:18, fontFamily: site.mono, fontSize:10, letterSpacing:'.28em', opacity:.55}}>
            ESTIMATED PRICES · $38–$44 / BOX  ·  10 × 20 G
          </div>
        </div>
        </ScrollReveal>
      </section>
    </div>
  );
}

Object.assign(window, { PageHome, HeroPouches });

// ───────────────────────────────────────────────────────────────
// HeroPouches — 3 visible at a time (left · center · right), the
// 5 SKUs auto-rotate through the trio every 5.5s. Off-screen "ghost"
// slots on either side let pouches slide in/out smoothly. Each pouch
// bobs gently while in view.
// ───────────────────────────────────────────────────────────────
function HeroPouches({ setPage }) {
  const vp = useViewport();
  const [offset, setOffset] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [hoveredId, setHoveredId] = React.useState(null);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setOffset((o) => (o + 1) % SKUS.length), 5500);
    return () => clearInterval(t);
  }, [paused]);

  // Slot index → on-screen position. On desktop we show left/center/right;
  // on mobile we collapse to just the center slot.
  const SLOTS = vp.isMobile ? [
    /* 0 center        */ { x:    0, y:   0, rot:   0, opacity: 1, scale: 1.00, z: 12 },
    /* 1 right (offscreen) */ { x:  240, y:  10, rot:  16, opacity: 0, scale: 0.92, z: 4  },
    /* 2 hidden-right  */ { x:  360, y:  20, rot:  24, opacity: 0, scale: 0.85, z: 1  },
    /* 3 hidden-left   */ { x: -360, y:  20, rot: -24, opacity: 0, scale: 0.85, z: 1  },
    /* 4 left (offscreen)  */ { x: -240, y:  10, rot: -16, opacity: 0, scale: 0.92, z: 4  },
  ] : [
    /* 0 center        */ { x:    0, y: -16, rot:   0, opacity: 1, scale: 1.06, z: 12 },
    /* 1 right         */ { x:  180, y:  18, rot:  17, opacity: 1, scale: 1.00, z: 9  },
    /* 2 hidden-right  */ { x:  420, y:  46, rot:  28, opacity: 0, scale: 0.88, z: 1  },
    /* 3 hidden-left   */ { x: -420, y:  46, rot: -28, opacity: 0, scale: 0.88, z: 1  },
    /* 4 left          */ { x: -180, y:  18, rot: -17, opacity: 1, scale: 1.00, z: 9  },
  ];

  const pouchW = vp.isMobile ? 140 : 170;
  const pouchH = vp.isMobile ? 440 : 540;
  const containerH = vp.isMobile ? 540 : 680;

  return (
    <div style={{position:'relative', height: containerH}}
      onMouseEnter={() => !vp.isMobile && setPaused(true)}
      onMouseLeave={() => { if (!vp.isMobile) { setPaused(false); setHoveredId(null); } }}
    >
      {SKUS.map((sku, i) => {
        const pos  = (i - offset + SKUS.length) % SKUS.length;
        const slot = SLOTS[pos];
        const bobDur   = [6.2, 6.8, 5.6, 7.0, 6.4][i];
        const bobDelay = [0, .4, .8, 1.2, .6][i];
        const visible  = slot.opacity > 0;
        const isHover  = hoveredId === sku.id;
        const liftY    = isHover ? -34 : 0;
        const liftRot  = isHover ? slot.rot * 0.35 : slot.rot;
        const liftScl  = isHover ? slot.scale * 1.06 : slot.scale;
        const liftZ    = isHover ? 30 : slot.z;
        const cw       = APS_SKU[sku.id];
        return (
          <div key={sku.id}
            onMouseEnter={() => !vp.isMobile && visible && setHoveredId(sku.id)}
            onMouseLeave={() => !vp.isMobile && setHoveredId(null)}
            onClick={() => visible && setPage({ page:'pdp', skuId: sku.id })}
            style={{
              position:'absolute', left:'50%', top:'50%',
              width: pouchW, height: pouchH, marginLeft: -pouchW/2, marginTop: -pouchH/2,
              transform:`translateX(${slot.x}px) translateY(${slot.y + liftY}px) rotate(${liftRot}deg) scale(${liftScl})`,
              opacity: slot.opacity,
              zIndex: liftZ,
              cursor: visible ? 'pointer' : 'default',
              pointerEvents: visible ? 'auto' : 'none',
              transition: isHover
                ? 'transform .35s cubic-bezier(.22,.7,.3,1), opacity 1.0s cubic-bezier(.22,.7,.3,1)'
                : 'transform 1.2s cubic-bezier(.22,.7,.3,1), opacity 1.0s cubic-bezier(.22,.7,.3,1)',
            }}>
            {/* selected halo — soft warm ring that fades in on hover */}
            <div style={{
              position:'absolute', inset:-18, borderRadius:18, pointerEvents:'none',
              boxShadow: isHover ? `0 0 0 1px ${cw.bg}, 0 0 0 4px ${site.paper}, 0 0 60px 12px ${cw.bg}55` : 'none',
              opacity: isHover ? 1 : 0, transition: 'opacity .35s ease',
            }}/>
            <div
              style={{
                width:'100%', height:'100%',
                boxShadow: isHover
                  ? '0 38px 70px rgba(31,22,16,.42), 0 10px 18px rgba(31,22,16,.22)'
                  : '0 26px 50px rgba(31,22,16,.26), 0 6px 12px rgba(31,22,16,.14)',
                animation: `rg-float-a ${bobDur}s ease-in-out ${bobDelay}s infinite`,
                animationPlayState: isHover ? 'paused' : 'running',
                transition:'box-shadow .35s ease',
                willChange:'transform',
              }}
            >
              <StickApoStamp skuId={sku.id} />
            </div>

            {/* "SELECTED · NO. 0X" tag that fades in below the pouch */}
            <div style={{
              position:'absolute', top:'calc(100% + 14px)', left:'50%',
              transform:`translateX(-50%) translateY(${isHover ? 0 : -6}px) rotate(${-liftRot}deg)`,
              fontFamily: site.mono, fontSize:9, letterSpacing:'.32em',
              color: site.ink, background: site.paper, padding:'6px 10px',
              border:`.5px solid ${site.ink}`, whiteSpace:'nowrap',
              opacity: isHover ? 1 : 0, transition:'opacity .25s ease, transform .35s cubic-bezier(.2,.7,.3,1)',
              pointerEvents:'none',
            }}>
              ↳ SELECTED · NO. {sku.no} · {sku.en}
            </div>
          </div>
        );
      })}

      {/* slot indicators + label */}
      <div style={{position:'absolute', bottom:0, left:'50%', transform:'translateX(-50%)', display:'flex', flexDirection:'column', alignItems:'center', gap:10}}>
        <div style={{display:'flex', gap:8}}>
          {SKUS.map((sku, i) => (
            <button key={sku.id} onClick={() => setOffset(i)} aria-label={`Show ${sku.enLong}`} style={{
              width: i === offset ? 22 : 8, height: 4,
              background: i === offset ? site.ink : 'rgba(31,22,16,.32)',
              border:'none', padding:0, cursor:'pointer',
              transition:'width .4s cubic-bezier(.2,.7,.3,1), background .25s',
            }}/>
          ))}
        </div>
        <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', opacity:.55}}>
          {String(SKUS[(offset) % SKUS.length].no)} · {SKUS[(offset) % SKUS.length].en}  —  {paused ? 'PAUSED' : 'AUTO ROTATE'}
        </div>
      </div>
    </div>
  );
}