// Product page — detail view for PAS System
const ProductPage = ({setRoute, onContact}) => {
  const D = window.PAS_DATA;
  const M = window.PAS_MEDIA || {products: {}};
  const [activeId, setActiveId] = React.useState(D.products[0].id);
  const active = D.products.find(p => p.id === activeId);
  const activeMedia = M.products[active.id];

  const features = [
    {t: "AI 처방 검토", d: "복용 중인 약과의 상호작용, 중복 처방을 자동 감지해 경고합니다."},
    {t: "자동 수가 청구", d: "보건복지부 수가 개정안을 실시간 반영, 심사 오류율을 줄입니다."},
    {t: "실시간 재고 동기화", d: "도매상 시스템과 API 연동으로 발주부터 입고까지 자동 처리."},
    {t: "복약 지도 스크립트", d: "환자 기록 기반의 맞춤 스크립트를 조제 시점에 자동 생성."},
    {t: "다점포 운영", d: "본점-지점 간 데이터를 실시간 공유하고 통합 리포트를 제공합니다."},
    {t: "보안 & 백업", d: "의료법 준수 ISMS-P 인증, 이중화 클라우드 백업으로 데이터 손실 방지."},
  ];

  const plans = [
    {name: "STARTER", desc: "1인 약국 · 처방 일 100건 이하", price: "99,000", pop: false, feats: ["PAS System 라이센스 1석", "OCR 처방입력 연동", "기본 원격 지원", "월간 리포트"]},
    {name: "STANDARD", desc: "일반 약국 · 처방 일 100~400건", price: "189,000", pop: true, feats: ["Starter 전체 기능", "DS Pay 결제 연동", "AI 처방 검토", "담당 엔지니어", "방문 케어 연 2회"]},
    {name: "ENTERPRISE", desc: "다점포·중대형 약국", price: "맞춤", pop: false, feats: ["Standard 전체 기능", "JVM 조제기 연동", "다점포 통합 관리", "전담 엔지니어", "무제한 원격 지원"]},
  ];

  return (
    <main>
      <section className="pas-sub-hero">
        <div className="pas-container">
          <div className="pas-sub-hero-breadcrumb">
            <button onClick={() => setRoute("home")}>Home</button> / Products / {active.name}
          </div>
          <h1 className="pas-sub-hero-title">
            {active.name}
            <br/>
            <span style={{color: "var(--ink-muted)", fontSize: "0.6em"}}>{active.ko}</span>
          </h1>
          <p className="pas-sub-hero-desc">{active.desc}</p>

          {/* product switcher */}
          <div style={{marginTop: 40, display: "flex", flexWrap: "wrap", gap: 8}}>
            {D.products.map(p => (
              <button
                key={p.id}
                className={`pas-form-chip ${activeId === p.id ? "is-on" : ""}`}
                onClick={() => setActiveId(p.id)}
              >
                <span className="mono" style={{opacity: 0.6, marginRight: 8}}>{p.code}</span>
                {p.name}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* product hero */}
      <section className="pas-section">
        <div className="pas-container">
          <div className="pas-product-hero">
            <div>
              <div className="pas-eyebrow">Overview</div>
              <h2 style={{marginBottom: 20}}>처방 조제부터<br/>수가 청구까지,<br/>하나의 흐름으로</h2>
              <p style={{fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.6, marginBottom: 32}}>
                {active.long} 기존 약국의 업무 프로세스를 그대로 유지하면서,
                반복적이고 소모적인 작업만 AI가 대신 처리합니다. 약사님은 환자 상담에 더 집중할 수 있습니다.
              </p>
              <div style={{display: "flex", gap: 12, flexWrap: "wrap"}}>
                <button className="pas-btn pas-btn-lg" onClick={onContact}>데모 신청 <Icon name="arrow" size={16}/></button>
                <button className="pas-btn pas-btn-ghost pas-btn-lg"><Icon name="play" size={12}/> 1분 영상</button>
              </div>
            </div>
            <AssetImage src={activeMedia?.src} alt={activeMedia?.alt || active.name} aspect="4/3"/>
          </div>

          {/* feature list */}
          <div style={{marginTop: 80}}>
            <div className="pas-section-head">
              <div>
                <div className="pas-eyebrow">Features</div>
                <h2>핵심 기능</h2>
              </div>
            </div>
            <div className="pas-feature-list">
              {features.map(f => (
                <div key={f.t} className="pas-feature-cell">
                  <h4>{f.t}</h4>
                  <p>{f.d}</p>
                </div>
              ))}
            </div>
          </div>

          {/* pricing */}
          <div style={{marginTop: 120}}>
            <div className="pas-section-head">
              <div>
                <div className="pas-eyebrow">Pricing</div>
                <h2>약국 규모에 맞춘<br/>요금제</h2>
              </div>
              <div style={{maxWidth: 360, color: "var(--ink-soft)", fontSize: 15}}>
                부가세 별도 · 연 단위 계약 시 최대 20% 할인. 정확한 견적은 상담 후 제공됩니다.
              </div>
            </div>
            <div className="pas-pricing">
              {plans.map(p => (
                <div key={p.name} className={`pas-price-card ${p.pop ? "is-pop" : ""}`}>
                  <div className="pas-price-name">{p.name}</div>
                  <div className="pas-price-desc">{p.desc}</div>
                  <div className="pas-price-amt">
                    {p.price === "맞춤" ? "맞춤" : <>₩{p.price}<small>/월</small></>}
                  </div>
                  <ul className="pas-price-feat">
                    {p.feats.map(f => (
                      <li key={f}><Icon name="check" size={16}/><span>{f}</span></li>
                    ))}
                  </ul>
                  <button className={p.pop ? "pas-btn" : "pas-btn pas-btn-ghost"} onClick={onContact}>
                    시작하기 <Icon name="arrow" size={14}/>
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, {ProductPage});