05제품 확대 호출점 히어로

<main class="stage">
  <section class="hz is-demo">
    <div class="hz__copy">
      <h1 class="hz__title">기능은 짚어서 보여 준다</h1>
      <p class="hz__sub">점을 누르면 그 자리에 설명 쪽지가 뜹니다.</p>
    </div>

    <div class="hz__frame">
      <!-- 제품 그림은 사진이 아니라 도형 조합 — transform-origin 을 호출점 쪽에 두고 천천히 확대된다 -->
      <div class="hz__art" aria-hidden="true">
        <span class="hz__screen">
          <i class="hz__bar hz__bar--head"></i>
          <i class="hz__bar hz__bar--a"></i>
          <span class="hz__row">
            <i class="hz__tile hz__tile--v"></i>
            <i class="hz__tile hz__tile--g"></i>
          </span>
        </span>
      </div>

      <div class="hz__spot hz__spot--1">
        <button class="hz__dot" type="button" aria-expanded="false" aria-controls="hz-note-1" aria-label="지표 설명 열기">
          <span class="hz__ring" aria-hidden="true"></span>
          <svg viewBox="0 0 256 256" width="11" height="11" aria-hidden="true" focusable="false" fill="currentColor"><path d="M160,128a32,32,0,1,1-32-32A32,32,0,0,1,160,128Z" opacity="0.2"/><path d="M232,120h-8.34A96.14,96.14,0,0,0,136,32.34V24a8,8,0,0,0-16,0v8.34A96.14,96.14,0,0,0,32.34,120H24a8,8,0,0,0,0,16h8.34A96.14,96.14,0,0,0,120,223.66V232a8,8,0,0,0,16,0v-8.34A96.14,96.14,0,0,0,223.66,136H232a8,8,0,0,0,0-16Zm-96,87.6V200a8,8,0,0,0-16,0v7.6A80.15,80.15,0,0,1,48.4,136H56a8,8,0,0,0,0-16H48.4A80.15,80.15,0,0,1,120,48.4V56a8,8,0,0,0,16,0V48.4A80.15,80.15,0,0,1,207.6,120H200a8,8,0,0,0,0,16h7.6A80.15,80.15,0,0,1,136,207.6ZM128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Z"/></svg>
        </button>
        <p class="hz__note" id="hz-note-1">지표를 한눈에</p>
      </div>

      <div class="hz__spot hz__spot--2">
        <button class="hz__dot" type="button" aria-expanded="false" aria-controls="hz-note-2" aria-label="알림 설명 열기">
          <span class="hz__ring" aria-hidden="true"></span>
          <svg viewBox="0 0 256 256" width="11" height="11" aria-hidden="true" focusable="false" fill="currentColor"><path d="M160,128a32,32,0,1,1-32-32A32,32,0,0,1,160,128Z" opacity="0.2"/><path d="M232,120h-8.34A96.14,96.14,0,0,0,136,32.34V24a8,8,0,0,0-16,0v8.34A96.14,96.14,0,0,0,32.34,120H24a8,8,0,0,0,0,16h8.34A96.14,96.14,0,0,0,120,223.66V232a8,8,0,0,0,16,0v-8.34A96.14,96.14,0,0,0,223.66,136H232a8,8,0,0,0,0-16Zm-96,87.6V200a8,8,0,0,0-16,0v7.6A80.15,80.15,0,0,1,48.4,136H56a8,8,0,0,0,0-16H48.4A80.15,80.15,0,0,1,120,48.4V56a8,8,0,0,0,16,0V48.4A80.15,80.15,0,0,1,207.6,120H200a8,8,0,0,0,0,16h7.6A80.15,80.15,0,0,1,136,207.6ZM128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Z"/></svg>
        </button>
        <p class="hz__note" id="hz-note-2">알림만 골라서</p>
      </div>
    </div>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 275 히어로 팔레트 — 아홉 항목이 같은 값을 쓴다. 괄호 안은 실측 대비비
$hr-ink:    $stage-ink;      // 오렌지 무대 위 글자는 전부 잉크 (5.50:1)
$hr-paper:  $stage-paper;    // 액자 · 쪽지 글자
$hr-cream:  #fdf7ec;         // 제품 화면 바닥
$hr-orange: $stage-orange;   // 무대
$hr-violet: #9791c9;         // 제품 화면 타일 1
$hr-grass:  #479074;         // 제품 화면 타일 2

$duration: $dur-loop;        // 확대 한 바퀴 · 호출점 둘이 차례로 터지는 한 바퀴
$easing:   $ease-out;        // 확대가 붙었다 풀리는 결
$color:    $hr-violet;       // 이 항목의 강조색

@include stage($hr-orange);

// 왼쪽 글 · 오른쪽 액자. 좁아져도 세로로 쌓지 않는다 (쌓으면 오히려 세로로 넘친다)
.hz {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 16px);
  width: clamp(272px, 94vw, 432px);
  // 쪽지가 absolute 라 부모 높이에 안 들어간다 — scrollHeight 만큼 미리 자리를 확보한다
  padding-bottom: $sp-2;
}

.hz__copy {
  flex: 1 1 38%;
  min-width: 0;
}
.hz__title {
  margin: 0;
  color: $hr-ink;                                    // 잉크 on 오렌지 5.50:1
  font-weight: 800; font-size: clamp(12px, 3.2vw, 18px); line-height: 1.2;
  letter-spacing: -.01em;
  word-break: keep-all;                              // 한국어는 낱말 단위로 줄을 바꾼다
}
.hz__sub {
  margin: $sp-1 0 0;
  color: $hr-ink;
  font-weight: 500; font-size: clamp(9px, 2.2vw, 12px); line-height: 1.4;
}

// 흰 액자 — 확대된 그림은 여기서 잘린다
.hz__frame {
  position: relative;
  flex: 1 1 62%;
  min-width: 0;
  box-sizing: border-box;
  padding: $sp-3;
  border-radius: $r-card;
  background: $hr-paper;
  overflow: hidden;
}

// 제품 그림 — 도형 조합. 원점을 첫 호출점 쪽에 둔다
.hz__art {
  transform-origin: 30% 34%; // 규칙8: 호출점 기준 카메라 확대
  transform: scale(1);
}
.hz__screen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: $sp-1;
  height: clamp(72px, 24vw, 104px);
  padding: $sp-2;
  border-radius: $r-sm;
  background: $hr-cream;
}
.hz__bar {
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .78);
}
.hz__bar--head { width: 42%; height: 8px; }
.hz__bar--a    { width: 68%; height: 6px; background: rgba(23, 20, 26, .32); }
.hz__row {
  display: flex;
  gap: $sp-1;
  flex: 1 1 auto;
  min-height: 0;
}
.hz__tile {
  flex: 1 1 0;
  border-radius: $r-sm;
}
.hz__tile--v { background: $color; }
.hz__tile--g { flex: 0 0 32%; background: $hr-grass; }

// 호출점 — 크기 0 의 닻. 점과 쪽지가 여기에 매달린다
.hz__spot {
  position: absolute;
  width: 0;
  height: 0;
}
.hz__spot--1 { left: 26%; top: 32%; }
.hz__spot--2 { left: 46%; top: 66%; }

.hz__dot {
  position: absolute;
  left: -9px;
  top: -9px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: $hr-ink;
  color: $hr-paper;                                  // 흰 아이콘 on 잉크 18.24:1
  cursor: pointer;
}
.hz__dot:focus-visible {
  outline: 2px solid $hr-ink;
  outline-offset: 2px;
}

// 부풀었다 터지는 고리
.hz__ring {
  position: absolute;
  inset: 0;
  border: 2px solid $hr-ink;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
}

// 쪽지 — 기본은 닫힘. 누르면 열리고, 미리보기에서는 컷으로 나타난다
.hz__note {
  position: absolute;
  left: 14px;
  top: -8px;
  margin: 0;
  padding: $sp-1 $sp-2;
  border-radius: $r-pill;
  background: $hr-ink;
  color: $hr-paper;
  font-weight: 600; font-size: clamp(8px, 2vw, 11px); line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity $dur-quick $ease-out;
}
.hz__spot.is-open .hz__note {
  opacity: 1;
  visibility: visible;
}

// ── 자동 재생 ─────────────────────────────────────────────
// 그림은 루프 내내 천천히 커졌다 제자리로 돌아오고(90% 안), 그 위에서 호출점 둘이 차례로 터진다.
// animation 단축은 delay 를 0 으로 리셋하므로 낱개 속성으로 쓴다
.hz.is-demo .hz__art {
  animation-name: hzZoom;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
.hz.is-demo .hz__dot {
  animation-duration: $duration;
  animation-timing-function: $ease-spring;
  animation-iteration-count: infinite;
}
.hz.is-demo .hz__spot--1 .hz__dot { animation-name: hzPulse1; }
.hz.is-demo .hz__spot--2 .hz__dot { animation-name: hzPulse2; }

.hz.is-demo .hz__ring {
  animation-duration: $duration;
  animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
}
.hz.is-demo .hz__spot--1 .hz__ring { animation-name: hzBurst1; }
.hz.is-demo .hz__spot--2 .hz__ring { animation-name: hzBurst2; }

// 쪽지는 반투명 유령을 만들지 않는다 — steps(1, end) 로 한 프레임에 컷
.hz.is-demo .hz__note {
  visibility: visible;
  animation-duration: $duration;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  transition: none;
}
.hz.is-demo .hz__spot--1 .hz__note { animation-name: hzNote1; }
.hz.is-demo .hz__spot--2 .hz__note { animation-name: hzNote2; }

@keyframes hzZoom {
  0%   { transform: scale(1); }
  52%  { transform: scale(1.12); }
  88%, 100% { transform: scale(1); }
}

// 점은 작은 transform 으로 계속 살아 있다 — 컷만 있으면 움직인 프레임이 모자란다
@keyframes hzPulse1 {
  0%        { transform: scale(1); }
  8%        { transform: scale(1.28); }
  22%, 100% { transform: scale(1); }
}
@keyframes hzPulse2 {
  0%, 40%  { transform: scale(1); }
  46%      { transform: scale(1.28); }
  58%, 100% { transform: scale(1); }
}

@keyframes hzBurst1 {
  0%, 4%    { transform: scale(1);   opacity: .9; }
  26%       { transform: scale(2.8); opacity: 0; }
  100%      { transform: scale(2.8); opacity: 0; }
}
@keyframes hzBurst2 {
  0%, 40%   { transform: scale(1);   opacity: 0; }
  44%       { transform: scale(1);   opacity: .9; }
  62%, 100% { transform: scale(2.8); opacity: 0; }
}

// 컷 — 터진 자리에 한 프레임에 나타나고, 루프 복귀는 90% 안에 끝낸다
@keyframes hzNote1 {
  0%   { opacity: 0; }
  26%  { opacity: 1; }
  86%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hzNote2 {
  0%   { opacity: 0; }
  62%  { opacity: 1; }
  86%  { opacity: 0; }
  100% { opacity: 0; }
}

// 좁은 화면 — 글자·여백만 줄이고 두 칸을 유지한다 (이 안에서는 간격을 올리지 않는다)
@media (max-width: 340px), (max-height: 220px) {
  .hz { gap: $sp-2; width: 100%; padding-bottom: $sp-1; }
  .hz__frame { padding: $sp-2; }
  .hz__screen { padding: $sp-1; }
  // 쪽지가 액자 밖으로 잘리지 않게 호출점을 왼쪽으로 당긴다 (실측: 320px 에서 오른쪽 끝이 잘렸다)
  .hz__spot--1 { left: 18%; top: 30%; }
  .hz__spot--2 { left: 24%; top: 66%; }
  .hz__note { left: 12px; padding: 0 $sp-1; }
  .hz__dot { width: 16px; height: 16px; left: -8px; top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  // .hz.is-demo .hz__art (0,3,0) 를 이기려면 !important 가 필요하다 — 쪽지는 열린 상태를 그대로 남긴다
  .hz__art, .hz__dot, .hz__ring, .hz__note { animation: none !important; transition: none !important; }
  .hz.is-demo .hz__note { opacity: 1 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.hz {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 16px);
  width: clamp(272px, 94vw, 432px);
  padding-bottom: 8px;
}

.hz__copy {
  flex: 1 1 38%;
  min-width: 0;
}

.hz__title {
  margin: 0;
  color: #17141a;
  font-weight: 800;
  font-size: clamp(12px, 3.2vw, 18px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.hz__sub {
  margin: 4px 0 0;
  color: #17141a;
  font-weight: 500;
  font-size: clamp(9px, 2.2vw, 12px);
  line-height: 1.4;
}

.hz__frame {
  position: relative;
  flex: 1 1 62%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.hz__art {
  transform-origin: 30% 34%;
  transform: scale(1);
}

.hz__screen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: clamp(72px, 24vw, 104px);
  padding: 8px;
  border-radius: 8px;
  background: #fdf7ec;
}

.hz__bar {
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.78);
}

.hz__bar--head {
  width: 42%;
  height: 8px;
}

.hz__bar--a {
  width: 68%;
  height: 6px;
  background: rgba(23, 20, 26, 0.32);
}

.hz__row {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
}

.hz__tile {
  flex: 1 1 0;
  border-radius: 8px;
}

.hz__tile--v {
  background: #9791c9;
}

.hz__tile--g {
  flex: 0 0 32%;
  background: #479074;
}

.hz__spot {
  position: absolute;
  width: 0;
  height: 0;
}

.hz__spot--1 {
  left: 26%;
  top: 32%;
}

.hz__spot--2 {
  left: 46%;
  top: 66%;
}

.hz__dot {
  position: absolute;
  left: -9px;
  top: -9px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #17141a;
  color: #ffffff;
  cursor: pointer;
}

.hz__dot:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.hz__ring {
  position: absolute;
  inset: 0;
  border: 2px solid #17141a;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
}

.hz__note {
  position: absolute;
  left: 14px;
  top: -8px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #17141a;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(8px, 2vw, 11px);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease-out;
}

.hz__spot.is-open .hz__note {
  opacity: 1;
  visibility: visible;
}

.hz.is-demo .hz__art {
  animation-name: hzZoom;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.hz.is-demo .hz__dot {
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

.hz.is-demo .hz__spot--1 .hz__dot {
  animation-name: hzPulse1;
}

.hz.is-demo .hz__spot--2 .hz__dot {
  animation-name: hzPulse2;
}

.hz.is-demo .hz__ring {
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.hz.is-demo .hz__spot--1 .hz__ring {
  animation-name: hzBurst1;
}

.hz.is-demo .hz__spot--2 .hz__ring {
  animation-name: hzBurst2;
}

.hz.is-demo .hz__note {
  visibility: visible;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  transition: none;
}

.hz.is-demo .hz__spot--1 .hz__note {
  animation-name: hzNote1;
}

.hz.is-demo .hz__spot--2 .hz__note {
  animation-name: hzNote2;
}

@keyframes hzZoom {
  0% {
    transform: scale(1);
  }
  52% {
    transform: scale(1.12);
  }
  88%, 100% {
    transform: scale(1);
  }
}
@keyframes hzPulse1 {
  0% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.28);
  }
  22%, 100% {
    transform: scale(1);
  }
}
@keyframes hzPulse2 {
  0%, 40% {
    transform: scale(1);
  }
  46% {
    transform: scale(1.28);
  }
  58%, 100% {
    transform: scale(1);
  }
}
@keyframes hzBurst1 {
  0%, 4% {
    transform: scale(1);
    opacity: 0.9;
  }
  26% {
    transform: scale(2.8);
    opacity: 0;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
@keyframes hzBurst2 {
  0%, 40% {
    transform: scale(1);
    opacity: 0;
  }
  44% {
    transform: scale(1);
    opacity: 0.9;
  }
  62%, 100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
@keyframes hzNote1 {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hzNote2 {
  0% {
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .hz {
    gap: 8px;
    width: 100%;
    padding-bottom: 4px;
  }
  .hz__frame {
    padding: 8px;
  }
  .hz__screen {
    padding: 4px;
  }
  .hz__spot--1 {
    left: 18%;
    top: 30%;
  }
  .hz__spot--2 {
    left: 24%;
    top: 66%;
  }
  .hz__note {
    left: 12px;
    padding: 0 4px;
  }
  .hz__dot {
    width: 16px;
    height: 16px;
    left: -8px;
    top: -8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hz__art, .hz__dot, .hz__ring, .hz__note {
    animation: none !important;
    transition: none !important;
  }
  .hz.is-demo .hz__note {
    opacity: 1 !important;
  }
}

(function () {
  var root = document.querySelector('.hz');
  var spots = [].slice.call(root.querySelectorAll('.hz__spot'));

  // 격자 미리보기용 자동 루프 — 사람이 손을 대면 뗀다
  function stopLoop() { root.classList.remove('is-demo'); }

  spots.forEach(function (spot) {
    var dot = spot.querySelector('.hz__dot');
    dot.addEventListener('click', function () {
      stopLoop();
      var isOpen = dot.getAttribute('aria-expanded') === 'true';
      dot.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
      spot.classList.toggle('is-open', !isOpen);
    });
  });

  root.addEventListener('pointerenter', stopLoop);
  root.addEventListener('focusin', stopLoop);
})();

import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./HeroZoomHotspot.module.scss";

export type Hotspot = {
  /** 점의 이름 — 스크린 리더가 읽는다 */
  label: string;
  /** 터진 자리에 뜨는 쪽지 */
  note: string;
};

export type HeroZoomHotspotProps = {
  title?: string;
  sub?: string;
  spots?: [Hotspot, Hotspot];
  /** 확대 한 바퀴 · 호출점 둘이 차례로 터지는 한 바퀴(ms) */
  duration?: number;
  easing?: string;
  /** 제품 화면 타일의 강조색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

const Crosshair = (): ReactNode => (
  <svg viewBox="0 0 256 256" width="11" height="11" aria-hidden="true" focusable="false" fill="currentColor">
    <path d="M160,128a32,32,0,1,1-32-32A32,32,0,0,1,160,128Z" opacity="0.2" />
    <path d="M232,120h-8.34A96.14,96.14,0,0,0,136,32.34V24a8,8,0,0,0-16,0v8.34A96.14,96.14,0,0,0,32.34,120H24a8,8,0,0,0,0,16h8.34A96.14,96.14,0,0,0,120,223.66V232a8,8,0,0,0,16,0v-8.34A96.14,96.14,0,0,0,223.66,136H232a8,8,0,0,0,0-16Zm-96,87.6V200a8,8,0,0,0-16,0v7.6A80.15,80.15,0,0,1,48.4,136H56a8,8,0,0,0,0-16H48.4A80.15,80.15,0,0,1,120,48.4V56a8,8,0,0,0,16,0V48.4A80.15,80.15,0,0,1,207.6,120H200a8,8,0,0,0,0,16h7.6A80.15,80.15,0,0,1,136,207.6ZM128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Z" />
  </svg>
);

const DEFAULT_SPOTS: [Hotspot, Hotspot] = [
  { label: "지표 설명 열기", note: "지표를 한눈에" },
  { label: "알림 설명 열기", note: "알림만 골라서" },
];

export default function HeroZoomHotspot({
  title = "기능은 짚어서 보여 준다",
  sub = "점을 누르면 그 자리에 설명 쪽지가 뜹니다.",
  spots = DEFAULT_SPOTS,
  duration = 2000,
  easing = "ease-out",
  color = "#5b4bd6",
}: HeroZoomHotspotProps): ReactNode {
  const [loop, setLoop] = useState<boolean>(true);
  const [open, setOpen] = useState<boolean[]>([false, false]);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const place = [styles.spot1, styles.spot2];

  /* 점을 누르면 그 쪽지만 열리고 닫힌다 — 미리보기 루프는 그 자리에서 뗀다 */
  const toggle = (i: number): void => {
    setLoop(false);
    setOpen(open.map((v: boolean, k: number) => (k === i ? !v : v)));
  };

  return (
    <section
      className={loop ? `${styles.hz} ${styles.isDemo}` : styles.hz}
      style={vars}
      onPointerEnter={() => setLoop(false)}
      onFocus={() => setLoop(false)}
    >
      <div className={styles.copy}>
        <h1 className={styles.title}>{title}</h1>
        <p className={styles.sub}>{sub}</p>
      </div>

      <div className={styles.frame}>
        {/* 제품 그림은 사진이 아니라 도형 조합 — transform-origin 을 첫 호출점 쪽에 둔다 */}
        <div className={styles.art} aria-hidden="true">
          <span className={styles.screen}>
            <i className={`${styles.bar} ${styles.barHead}`} />
            <i className={`${styles.bar} ${styles.barA}`} />
            <span className={styles.row}>
              <i className={`${styles.tile} ${styles.tileV}`} />
              <i className={`${styles.tile} ${styles.tileG}`} />
            </span>
          </span>
        </div>

        {spots.map((s: Hotspot, i: number) => (
          <div
            className={`${styles.spot} ${place[i]} ${open[i] ? styles.isOpen : ""}`}
            key={s.label}
          >
            <button
              className={styles.dot}
              type="button"
              aria-expanded={open[i]}
              aria-controls={`hz-note-${i + 1}`}
              aria-label={s.label}
              onClick={() => toggle(i)}
            >
              <span className={styles.ring} aria-hidden="true" />
              <Crosshair />
            </button>
            <p className={styles.note} id={`hz-note-${i + 1}`}>{s.note}</p>
          </div>
        ))}
      </div>
    </section>
  );
}