// sheets.jsx — full-screen overlays for hero/interaction moments inside the phone.

function Sheet({ children, onClose, dark = false }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 80, background: dark ? '#10242B' : 'var(--paper)',
      display: 'flex', flexDirection: 'column', animation: 'jjSheetIn .28s cubic-bezier(.2,.7,.2,1)',
    }}>
      <div style={{ position: 'absolute', top: 54, right: 16, zIndex: 5 }}>
        <button onClick={onClose} style={{
          width: 36, height: 36, borderRadius: '50%', border: 'none', cursor: 'pointer',
          background: dark ? 'rgba(255,255,255,.14)' : 'var(--card)', boxShadow: '0 2px 8px var(--shadow)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><JJIcon name="close" size={18} color={dark ? '#fff' : 'var(--ink-2)'} sw={2} /></button>
      </div>
      <div style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch' }}>{children}</div>
    </div>
  );
}

// ── 추억 선물 (기능 13) — the gift, opened ───────────────────
function MemorySheet({ onClose }) {
  const m = JJ.memory;
  return (
    <Sheet onClose={onClose} dark>
      {/* cover */}
      <div style={{ position: 'relative', height: 320 }}>
        <Photo scene={m.cover} h={320} r={0} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(16,36,43,.2) 0%, transparent 30%, #10242B 100%)' }} />
        <div style={{ position: 'absolute', left: 22, right: 22, bottom: 26 }}>
          <div style={{ fontFamily: 'var(--f-hand)', fontSize: 'calc(22px * var(--hand-scale))', color: 'var(--amber)' }}>잘 가요, 또 와요</div>
          <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 30, color: '#fff', lineHeight: 1.25, marginTop: 4 }}>{m.title}</div>
          <div style={{ fontFamily: 'var(--f-body)', fontSize: 13, color: 'rgba(255,255,255,.75)', marginTop: 4 }}>{m.sub}</div>
        </div>
      </div>

      {/* chapters */}
      <div style={{ padding: '8px 22px 30px' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 26, padding: '18px 0 24px' }}>
          {[['장소', m.stats.places], ['사진', m.stats.photos], ['함께한 날', m.stats.days]].map(([l, n]) => (
            <div key={l} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 26, color: 'var(--amber)' }}>{n}</div>
              <div style={{ fontFamily: 'var(--f-body)', fontSize: 11, color: 'rgba(244,236,218,.6)', marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {m.chapters.map((c, i) => (
            <div key={i}>
              <Photo scene={c.scene} h={150} r={16} />
              <div style={{ fontFamily: 'var(--f-body)', fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--amber)', marginTop: 11 }}>{c.t}</div>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 17, color: '#F4ECDA', lineHeight: 1.6, marginTop: 3 }}>{c.body}</div>
            </div>
          ))}
        </div>
        {/* letter */}
        <div style={{ marginTop: 26, padding: '20px 20px', borderRadius: 16, background: 'rgba(244,236,218,.06)', border: '1px solid rgba(244,236,218,.14)' }}>
          <div style={{ fontFamily: 'var(--f-body)', fontSize: 10.5, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'rgba(244,236,218,.5)', marginBottom: 8 }}>호스트의 한 줄</div>
          <Hand size={24} color="#F4ECDA" style={{ display: 'block', whiteSpace: 'pre-line', lineHeight: 1.5 }}>{m.letter}</Hand>
        </div>
        <div style={{ marginTop: 22, textAlign: 'center', fontFamily: 'var(--f-hand)', fontSize: 'calc(20px * var(--hand-scale))', color: 'var(--sea)' }}>당신의 부산을, 선물할게요.</div>
      </div>
    </Sheet>
  );
}

// ── 맞춤 추천 결과 (기능 08) ─────────────────────────────────
function RecommendSheet({ onClose }) {
  const picks = [JJ.pins[2], JJ.pins[1]]; // 노을 카페, 포장마차 — context: 저녁·노을
  return (
    <Sheet onClose={onClose}>
      <div style={{ padding: '64px 22px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 6 }}>
          <JJIcon name="spark" size={22} color="var(--amber)" />
          <Hand size={26} color="var(--amber)">추천해줄게요</Hand>
        </div>
        <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--ink)', lineHeight: 1.35 }}>오늘 저녁, 이런 건 어때요?</div>
        <div style={{ fontFamily: 'var(--f-body)', fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>해 질 시간 · 선선한 날씨 · 어제 동선에 맞춰, 쩨 지도에서 골랐어요.</div>

        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 13 }}>
          {picks.map((p, i) => (
            <Card key={p.id} pad={0} style={{ overflow: 'hidden' }}>
              <div style={{ position: 'relative', height: 150 }}>
                <Photo scene={p.scene} h={150} r={0} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent, rgba(0,0,0,.45))' }} />
                <div style={{ position: 'absolute', left: 14, bottom: 12, right: 14 }}>
                  <Tag tone="amber" solid>{i === 0 ? '1순위' : '또는'} · {p.tag}</Tag>
                  <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, color: '#fff', marginTop: 6 }}>{p.name}</div>
                </div>
              </div>
              <div style={{ padding: 13, display: 'flex', alignItems: 'center', gap: 10 }}>
                <Avatar name={JJ.host.initial} tone="host" size={30} />
                <div style={{ flex: 1, fontFamily: 'var(--f-hand)', fontSize: 'calc(17px * var(--hand-scale))', color: 'var(--ink-2)' }}>“{p.note}”</div>
                <BtnGhost icon="heart">담기</BtnGhost>
              </div>
            </Card>
          ))}
        </div>
        <div style={{ marginTop: 16, padding: '12px 14px', borderRadius: 12, background: 'var(--paper-2)', border: '1px dashed var(--line)', fontFamily: 'var(--f-body)', fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55, textAlign: 'center' }}>
          분 단위 일정이 아니라 <b style={{ color: 'var(--ink)' }}>느슨한 제안</b>이에요. 마음 가는 대로 골라요.
        </div>
      </div>
    </Sheet>
  );
}

// ── 손님 요청 (기능 09) ──────────────────────────────────────
function RequestSheet({ onClose }) {
  const quick = ['수건 한 장 더', '충전기(C타입)', '내일 늦잠 잘게요', '물 / 생필품'];
  return (
    <Sheet onClose={onClose}>
      <div style={{ padding: '64px 22px 24px' }}>
        <Hand size={26} color="var(--coral)">편하게 말해요</Hand>
        <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--ink)', marginTop: 2 }}>필요한 거 있어요?</div>
        <div style={{ fontFamily: 'var(--f-body)', fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>얼굴 보며 부탁하는 부담 없이. 쩨가 조용히 챙겨줄게요.</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, marginTop: 18 }}>
          {quick.map(q => (
            <button key={q} style={{ fontFamily: 'var(--f-body)', fontSize: 13.5, fontWeight: 600, color: 'var(--ink-2)', background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer' }}>{q}</button>
          ))}
        </div>
        <Card pad={14} style={{ marginTop: 16 }}>
          <div style={{ fontFamily: 'var(--f-body)', fontSize: 13.5, color: 'var(--ink-3)' }}>직접 적기…</div>
          <div style={{ height: 1, background: 'var(--line-soft)', margin: '10px 0' }} />
          <div style={{ fontFamily: 'var(--f-body)', fontSize: 11.5, color: 'var(--ink-3)' }}>접수되면 쩨 화면에 바로 뜨고, 처리 상태가 보여요.</div>
        </Card>
        <BtnPrimary icon="send" full style={{ marginTop: 16 }}>요청 보내기</BtnPrimary>
      </div>
    </Sheet>
  );
}

// ── 방명록 쓰기 (기능 15) ────────────────────────────────────
function GuestbookSheet({ onClose }) {
  return (
    <Sheet onClose={onClose}>
      <div style={{ padding: '64px 22px 24px' }}>
        <Hand size={26} color="var(--sea)">잘 있었어요</Hand>
        <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--ink)', marginTop: 2 }}>떠나기 전, 한 줄</div>
        <div style={{ fontFamily: 'var(--f-body)', fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>이 집을 거쳐간 사람들 사이에 마음을 남겨요.</div>
        <Card pad={18} style={{ marginTop: 18, background: 'var(--paper-2)', minHeight: 120 }}>
          <Hand size={23} color="var(--ink)" style={{ display: 'block', lineHeight: 1.5 }}>막걸리도 흰여울 아침도 다 좋았어요. 여기 오면 부산이 우리집 같아져요. 또 올게요!</Hand>
          <div style={{ width: 2, height: 22, background: 'var(--coral)', marginTop: 4, animation: 'jjBlink 1s step-end infinite' }} />
        </Card>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 14 }}>
          <Avatar name={JJ.guest.initial} tone="guest" size={30} />
          <div style={{ fontFamily: 'var(--f-body)', fontSize: 12.5, color: 'var(--ink-2)', flex: 1 }}>민서 · 이번 방문으로 남겨요</div>
        </div>
        <BtnPrimary icon="check" full tone="sea" style={{ marginTop: 16 }}>방명록에 남기기</BtnPrimary>
      </div>
    </Sheet>
  );
}

function SheetHost({ which, onClose }) {
  if (which === 'memory') return <MemorySheet onClose={onClose} />;
  if (which === 'recommend') return <RecommendSheet onClose={onClose} />;
  if (which === 'request') return <RequestSheet onClose={onClose} />;
  if (which === 'guestbook') return <GuestbookSheet onClose={onClose} />;
  return null;
}

Object.assign(window, { SheetHost, MemorySheet, RecommendSheet, RequestSheet, GuestbookSheet });
