// Real PAS application screenshots, shared by Home and the Screens page.
const PAS_SCREENS = [
  {id: "login", title: "로그인", src: "uploads/screens/01-login.webp", width: 1120, height: 760,
    subtitle: "약국의 하루를 여는 첫 화면",
    description: "차분한 시작 화면에서 통합 계정으로 로그인하고, 익숙한 업무 공간으로 들어갑니다.",
    features: ["통합 계정 로그인", "아이디 저장", "하루 자동로그인"]},
  {id: "dashboard", title: "메인 대시보드", src: "uploads/screens/02-home.webp", width: 1600, height: 900,
    subtitle: "오늘 필요한 정보를 한눈에",
    description: "약국 공지와 최근 알림, 달력까지. 여러 화면을 오가지 않고 오늘 확인할 내용을 한곳에서 살펴보세요.",
    features: ["공지·메모 모아보기", "최근 작성 알림", "달력과 공휴일"]},
  {id: "menu", title: "전체 메뉴 안내", src: "uploads/screens/03-menu.webp", width: 1600, height: 900,
    subtitle: "많은 업무도, 찾기 쉽게",
    description: "약품·조제·검수·재고·발주 등 업무별 메뉴를 한곳에 모았습니다. 분류와 검색으로 필요한 기능을 찾아보세요.",
    features: ["업무별 메뉴 분류", "메뉴 검색", "즐겨찾기 접근"]},
  {id: "notices", title: "공지사항", src: "uploads/screens/04-notices.webp", width: 1600, height: 900,
    subtitle: "함께 알아야 할 소식을 놓치지 않게",
    description: "약국 운영에 필요한 안내를 공지로 공유하세요. 분류와 미확인 표시로 확인할 소식을 구분할 수 있습니다.",
    features: ["약국 공지 공유", "공지 분류", "미확인 공지 확인"]},
  {id: "calendar", title: "달력·일정 관리", src: "uploads/screens/05-calendar.webp", width: 1600, height: 900,
    subtitle: "하루의 일정부터 한 달의 계획까지",
    description: "월·주·일 단위로 일정을 살펴보고, 오늘과 다가오는 일정을 확인하세요. 공휴일과 영업시간도 함께 관리합니다.",
    features: ["월·주·일 보기", "오늘·다가오는 일정", "공휴일·영업시간"]},
];

const ScreenshotGallery = ({id = "screens"}) => {
  const [selected, setSelected] = React.useState(1);
  const [expanded, setExpanded] = React.useState(false);
  const dialogRef = React.useRef(null);
  const screen = PAS_SCREENS[selected];

  React.useEffect(() => {
    const dialog = dialogRef.current;
    if (!expanded) { if (dialog.open) dialog.close(); return; }
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    if (!dialog.open) dialog.showModal();
    return () => { document.body.style.overflow = previousOverflow; };
  }, [expanded]);

  const move = (direction) => setSelected(index => (index + direction + PAS_SCREENS.length) % PAS_SCREENS.length);

  return (
    <div className="pas-screens-gallery">
      <div className="pas-screens-frame">
        <div className="pas-screens-bar">
          <span className="pas-screens-bar-label"><span className="pas-screens-dot"/> PAS / 실제 프로그램 화면</span>
          <span className="mono">{String(selected + 1).padStart(2, "0")} / 05</span>
        </div>
        <button className="pas-screens-stage" onClick={() => setExpanded(true)} aria-label={`${screen.title} 화면 크게 보기`}>
          <img src={screen.src} alt={`PAS ${screen.title} 실제 프로그램 화면`} width={screen.width} height={screen.height} decoding="async"/>
          <span className="pas-screens-zoom"><Icon name="search" size={15}/> 크게 보기</span>
        </button>
        <div className="pas-screens-caption" aria-live="polite" aria-atomic="true">
          <div>
            <div className="pas-screens-kicker">{screen.title}</div>
            <h3>{screen.subtitle}</h3>
            <p>{screen.description}</p>
          </div>
          <ul className="pas-screens-features">
            {screen.features.map(feature => <li key={feature}><Icon name="check" size={14}/>{feature}</li>)}
          </ul>
        </div>
      </div>
      <div className="pas-screens-thumbnails" aria-label="프로그램 화면 선택">
        {PAS_SCREENS.map((item, index) => (
          <button key={item.id} className={`pas-screens-thumb ${selected === index ? "is-active" : ""}`} aria-pressed={selected === index} onClick={() => setSelected(index)}>
            <span className="pas-screens-thumb-image"><img src={item.src} alt="" width={item.width} height={item.height} loading="lazy" decoding="async"/></span>
            <span className="pas-screens-thumb-label"><span className="mono">{String(index + 1).padStart(2, "0")}</span>{item.title}</span>
          </button>
        ))}
      </div>
      <p className="pas-screens-note">2026.10.08 촬영 · 실제 PAS 프로그램 화면입니다. 업데이트에 따라 화면 구성이 달라질 수 있습니다.</p>

      <dialog ref={dialogRef} className="pas-screens-dialog" aria-labelledby={`${id}-dialog-title`} onCancel={() => setExpanded(false)} onClose={() => setExpanded(false)} onClick={event => { if (event.target === event.currentTarget) setExpanded(false); }} onKeyDown={event => {
        if (event.key === "ArrowLeft") { event.preventDefault(); move(-1); }
        if (event.key === "ArrowRight") { event.preventDefault(); move(1); }
      }}>
        <div className="pas-screens-dialog-bar">
          <div><span className="mono">{String(selected + 1).padStart(2, "0")} / 05</span><h3 id={`${id}-dialog-title`}>{screen.title}</h3></div>
          <button className="pas-screens-icon-btn" onClick={() => setExpanded(false)} aria-label="확대 화면 닫기" autoFocus><Icon name="close" size={22}/></button>
        </div>
        <div className="pas-screens-dialog-image"><img src={screen.src} alt={`PAS ${screen.title} 확대 화면`} width={screen.width} height={screen.height}/></div>
        <div className="pas-screens-dialog-controls">
          <button onClick={() => move(-1)}><Icon name="chevron-left" size={18}/> 이전 화면</button>
          <a href={screen.src} target="_blank" rel="noopener noreferrer">원본 크기로 보기 <Icon name="arrow-up-right" size={15}/></a>
          <button onClick={() => move(1)}>다음 화면 <Icon name="chevron-right" size={18}/></button>
        </div>
      </dialog>
    </div>
  );
};

const ScreensSection = ({setRoute}) => (
  <section className="pas-section pas-screens-section" aria-labelledby="home-screens-title">
    <div className="pas-container">
      <div className="pas-screens-heading">
        <div>
          <div className="pas-eyebrow">Inside PAS</div>
          <h2 id="home-screens-title">매일 쓰는 화면,<br/><em>먼저 만나보세요.</em></h2>
          <p>로그인부터 메뉴 탐색, 공지와 일정 관리까지.<br/>약국의 일상을 담은 PAS의 실제 화면을 소개합니다.</p>
        </div>
        <button className="pas-btn pas-btn-ghost" onClick={() => setRoute("screens")}>프로그램 화면 둘러보기 <Icon name="arrow-up-right" size={16}/></button>
      </div>
      <ScreenshotGallery id="home-screens"/>
    </div>
  </section>
);

const ScreensPage = ({setRoute, onContact}) => (
  <main>
    <section className="pas-sub-hero pas-screens-hero">
      <div className="pas-container">
        <div className="pas-sub-hero-breadcrumb"><button onClick={() => setRoute("home")}>Home</button> / Screens</div>
        <div className="pas-eyebrow">Inside PAS</div>
        <h1 className="pas-sub-hero-title">약국의 하루를 담은<br/><em>프로그램 화면</em></h1>
        <p className="pas-sub-hero-desc">익숙한 업무를 더 편하게. 실제 PAS 화면을 통해 약사님이 사용할 공간을 미리 만나보세요.</p>
      </div>
    </section>
    <section className="pas-section pas-screens-page-gallery" aria-label="실제 프로그램 화면 둘러보기">
      <div className="pas-container"><ScreenshotGallery id="page-screens"/></div>
    </section>
    <section className="pas-screens-cta">
      <div className="pas-container">
        <div><div className="pas-eyebrow">Experience PAS</div><h2>우리 약국에서는 어떻게 쓸까요?</h2><p>실제 업무 흐름이 궁금하다면, 상담을 통해 PAS를 더 자세히 만나보세요.</p></div>
        <button className="pas-btn pas-btn-lg" onClick={onContact}>데모 상담 신청 <Icon name="arrow" size={16}/></button>
      </div>
    </section>
  </main>
);

Object.assign(window, {ScreensSection, ScreensPage});