// Dispensary detail page
function ShopDetail({ id, go }) {
  const shop = (window.SHOPS || []).find(s => s.id === id) || window.SHOPS[0];

  return (
    <div>
      {/* Breadcrumb */}
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '40px var(--gutter) 0', fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        <a href="#/" onClick={e => { e.preventDefault(); go('/'); }} style={{ color: 'inherit', textDecoration: 'none' }}>Home</a>
        <span style={{ margin: '0 10px' }}>/</span>
        <a href="#/directory" onClick={e => { e.preventDefault(); go('/directory'); }} style={{ color: 'inherit', textDecoration: 'none' }}>Directory</a>
        <span style={{ margin: '0 10px' }}>/</span>
        <span style={{ color: 'var(--ink)' }}>{shop.name}</span>
      </div>

      {/* Header */}
      <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '40px var(--gutter) 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'end' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--accent-deep)' }}>— {shop.vibe}</div>
            <h1 className="serif" style={{ fontSize: 'clamp(52px, 6.5vw, 96px)', lineHeight: 0.98, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
              {shop.name}
            </h1>
            <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', fontSize: 14, color: 'var(--ink-soft)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon.pin size={14}/>{shop.city}</span>
              <span className="dot"></span>
              <span style={{ color: 'var(--sage-deep)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--sage)' }}></span>{shop.hours}
              </span>
              <span className="dot"></span>
              <span style={{ color: 'var(--accent-deep)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Icon.star size={13}/> {shop.rating} <span style={{ color: 'var(--ink-soft)' }}>({shop.reviews} reviews)</span>
              </span>
              <span className="dot"></span>
              <span>{shop.price}</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <button className="btn btn-ghost" style={{ padding: '12px 18px', fontSize: 13 }}>
              <Icon.bookmark size={14}/> Save
            </button>
            <button className="btn btn-ghost" style={{ padding: '12px 18px', fontSize: 13 }}>
              <Icon.share size={14}/> Share
            </button>
            <button className="btn btn-primary" style={{ padding: '12px 20px', fontSize: 13 }}>
              Get directions
            </button>
          </div>
        </div>
      </section>

      {/* Image gallery */}
      <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '40px var(--gutter) 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12, height: 520 }}>
          <WarmImg src={shop.img} placeholder="main shot" />
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 12 }}>
            <WarmImg src={IMG.product} placeholder="product"/>
            <WarmImg src={IMG.tea} placeholder="detail"/>
          </div>
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 12 }}>
            <WarmImg src={IMG.home} placeholder="interior"/>
            <WarmImg src={IMG.leaves} placeholder="detail"/>
          </div>
        </div>
      </section>

      {/* Main content */}
      <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '80px var(--gutter) 0', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80 }}>
        {/* Left: review */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>— Our visit</div>
          <div className="serif" style={{ fontSize: 28, lineHeight: 1.35, fontWeight: 400, fontStyle: 'italic', color: 'var(--ink)', letterSpacing: '-0.005em', textWrap: 'pretty' }}>
            "{shop.tagline}"
          </div>
          <div style={{ marginTop: 40, fontSize: 17, lineHeight: 1.75, color: 'var(--ink)', maxWidth: 620 }}>
            <p style={{ margin: 0 }}>
              The door is propped open when we visit — early April, one of those afternoons where the light comes in sideways. There's a record on, something slow and acoustic, and a small bowl of fruit by the register that the owner, Dani, is slowly working through while she tells us about the new single-origin flower from upstate.
            </p>
            <p>
              <span className="serif" style={{ fontSize: 48, lineHeight: 0.6, float: 'left', marginRight: 10, marginTop: 8, color: 'var(--accent-deep)', fontStyle: 'italic' }}>What</span> we like most is that nobody rushes you here. You're welcome to stand at the oak table, read the handwritten menu cards, and ask the kind of questions you'd be embarrassed to ask elsewhere. Dani wrote the menu herself — each item has a two-line description in her tidy print, noting feel, pairings, and what she'd put it next to on a shelf.
            </p>
            <p>
              The shop keeps a short list. You won't find forty SKUs of gummies; you'll find six or seven, rotated by season. There's a small apothecary area with tinctures she makes upstairs, and a basket of linen tea towels from a weaver two towns over. It's the kind of place where you buy one thing and leave with three because the recommendations are that good.
            </p>
            <p>
              Bring cash if you can — the card machine is cheerfully unreliable — and plan to stay a while. They'll put the kettle on.
            </p>
          </div>

          {/* Reviewer card */}
          <div style={{ marginTop: 40, padding: '24px 28px', background: 'var(--bg-tint)', display: 'flex', gap: 20, alignItems: 'center' }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
              <WarmImg src={IMG.portrait} aspect="1/1" placeholder="writer"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 4 }}>Visited by</div>
              <div className="serif" style={{ fontSize: 20 }}>Maren Olsen <span style={{ color: 'var(--ink-soft)', fontSize: 14, fontStyle: 'italic' }}>— Editor at large</span></div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>Stayed 2 hours · April 2026 · Paid in full</div>
            </div>
          </div>

          {/* Known for */}
          <div style={{ marginTop: 56 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>— Known for</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {shop.known.map(k => (
                <span key={k} style={{
                  padding: '10px 18px', border: '1px solid var(--hairline)', borderRadius: 999,
                  fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic', background: 'white',
                }}>{k}</span>
              ))}
            </div>
          </div>

          {/* User reviews */}
          <div style={{ marginTop: 72 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 12 }}>— Visitors</div>
                <h3 className="serif" style={{ fontSize: 32, margin: 0, fontWeight: 400 }}>What {shop.reviews} others said</h3>
              </div>
              <button className="btn btn-ghost" style={{ padding: '10px 18px', fontSize: 13 }}>Write yours</button>
            </div>
            {[
              { name: 'Sasha R.', when: '2 weeks ago', rating: 5, text: 'Walked in for a pre-roll and stayed 45 minutes. Left with three new pairings for my record collection. Dani is a saint.' },
              { name: 'Julian P.', when: 'a month ago', rating: 5, text: 'The quietest dispensary I\'ve ever been in. The music was perfect and the budtender drew me a little diagram of what goes with what mood.' },
              { name: 'Asha O.', when: '2 months ago', rating: 4, text: 'Loved the vibe. Small selection though — come knowing what you want-ish and be open to suggestions.' },
            ].map((r, i) => (
              <div key={i} style={{ padding: '28px 0', borderTop: '1px solid var(--hairline)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--bg-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--accent-deep)' }}>
                      {r.name.charAt(0)}
                    </div>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{r.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{r.when}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 2, color: 'var(--accent-deep)' }}>
                    {Array.from({length: 5}).map((_, j) => <Icon.star key={j} size={13} filled={j < r.rating}/>)}
                  </div>
                </div>
                <p style={{ margin: '8px 0 0', fontSize: 15, lineHeight: 1.6, color: 'var(--ink)' }}>{r.text}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Right: sidebar card */}
        <aside>
          <div style={{ position: 'sticky', top: 100, background: 'white', padding: 28, border: '1px solid var(--hairline)' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— Visit</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.25, marginBottom: 20 }}>412 Warren St<br/>Hudson, NY 12534</div>
            <div style={{ position: 'relative', height: 180, background: 'var(--bg-tint)', marginBottom: 20, overflow: 'hidden' }}>
              <svg viewBox="0 0 400 200" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                {Array.from({length: 10}).map((_, i) => (
                  <line key={'v'+i} x1={i*40} y1="0" x2={i*40} y2="200" stroke="rgba(58,58,58,0.08)" strokeWidth="1"/>
                ))}
                {Array.from({length: 6}).map((_, i) => (
                  <line key={'h'+i} x1="0" y1={i*40} x2="400" y2={i*40} stroke="rgba(58,58,58,0.08)" strokeWidth="1"/>
                ))}
                <line x1="0" y1="100" x2="400" y2="100" stroke="rgba(58,58,58,0.15)" strokeWidth="2"/>
              </svg>
              <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -100%)' }}>
                <div style={{ background: 'var(--accent)', color: 'white', padding: '6px 12px', borderRadius: 999, fontSize: 12, fontFamily: 'var(--serif)', whiteSpace: 'nowrap', boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}>
                  {shop.name}
                </div>
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 14 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Mon – Thu</span>
                <span>11am – 9pm</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 14 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Fri – Sat</span>
                <span>11am – 10pm</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 14 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Sunday</span>
                <span>12pm – 7pm</span>
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 16, marginTop: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Phone</span>
                <span>(518) 555-0142</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Est.</span>
                <span>2019</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>Cash</span>
                <span>Preferred</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-soft)' }}>21+</span>
                <span>Required</span>
              </div>
            </div>

            <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 20 }}>
              Get directions <Icon.arrow size={12}/>
            </button>
          </div>
        </aside>
      </section>

      {/* Related shops */}
      <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '100px var(--gutter) 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— You might also like</div>
            <h3 className="serif" style={{ fontSize: 36, margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>Shops with a similar feel.</h3>
          </div>
          <a href="#/directory" onClick={e => { e.preventDefault(); go('/directory'); }} className="tlink" style={{ fontSize: 14 }}>All shops →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {window.SHOPS.filter(s => s.id !== shop.id).slice(0, 3).map(s => (
            <div key={s.id} onClick={() => go('/shop/' + s.id)} style={{ cursor: 'pointer' }}>
              <WarmImg src={s.img} aspect="4/5" placeholder="shop"/>
              <div className="eyebrow" style={{ marginTop: 14, color: 'var(--accent-deep)' }}>{s.vibe}</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 8, fontWeight: 500 }}>{s.name}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 2 }}>{s.city}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ShopDetail });
