// Contact modal + Contact page
const ContactModal = ({open, onClose}) => {
  const [step, setStep] = React.useState("form"); // form | confirm | success
  const [topics, setTopics] = React.useState([]);
  const [form, setForm] = React.useState({name: "", pharmacy: "", phone: "", region: "", message: ""});

  React.useEffect(() => {
    if (open) { setStep("form"); setTopics([]); setForm({name: "", pharmacy: "", phone: "", region: "", message: ""}); }
  }, [open]);

  React.useEffect(() => {
    const onKey = e => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const toggleTopic = t => setTopics(ts => ts.includes(t) ? ts.filter(x => x !== t) : [...ts, t]);
  const goToConfirm = () => setStep("confirm");
  const goBackToForm = () => setStep("form");
  const submit = () => setStep("success");

  const D = window.PAS_DATA;
  const topicNames = topics.map(id => (D.products.find(p => p.id === id) || {}).name).filter(Boolean);

  return (
    // NOTE: scrim no longer closes on click — only X button or Escape closes
    <div className="pas-modal-scrim">
      <div className="pas-modal-wrapper">
        {/* X button moved OUTSIDE the modal */}
        <button className="pas-modal-close-outside" onClick={onClose} aria-label="닫기">
          <Icon name="close" size={18}/>
        </button>
        <div className="pas-modal">
          {step === "form" && (
            <>
              <div className="pas-eyebrow">Contact</div>
              <h3>상담 문의</h3>
              <p className="pas-modal-sub">남겨주신 정보로 영업일 기준 24시간 이내에 연락 드립니다.</p>

              <div className="pas-form-group">
                <label className="pas-form-label">관심 제품 (복수 선택 가능)</label>
                <div className="pas-form-chips">
                  {D.products.map(p => (
                    <button key={p.id} className={`pas-form-chip ${topics.includes(p.id) ? "is-on" : ""}`} onClick={() => toggleTopic(p.id)}>
                      {p.name}
                    </button>
                  ))}
                </div>
              </div>
              <div className="pas-form-group">
                <label className="pas-form-label">성함</label>
                <input className="pas-form-input" placeholder="홍길동" value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
              </div>
              <div className="pas-form-group">
                <label className="pas-form-label">약국명</label>
                <input className="pas-form-input" placeholder="◯◯ 약국" value={form.pharmacy} onChange={e => setForm({...form, pharmacy: e.target.value})}/>
              </div>
              <div className="pas-form-group">
                <label className="pas-form-label">연락처</label>
                <input className="pas-form-input" placeholder="010-0000-0000" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})}/>
              </div>
              <div className="pas-form-group">
                <label className="pas-form-label">지역</label>
                <select className="pas-form-select" value={form.region} onChange={e => setForm({...form, region: e.target.value})}>
                  <option value="">지역을 선택하세요</option>
                  {D.regions.map(r => <option key={r.name} value={r.name}>{r.name}</option>)}
                </select>
              </div>
              <div className="pas-form-group">
                <label className="pas-form-label">남기실 말씀 (선택)</label>
                <textarea className="pas-form-textarea" placeholder="개국 예정 시기, 궁금하신 점 등을 자유롭게 남겨주세요." value={form.message} onChange={e => setForm({...form, message: e.target.value})}/>
              </div>
              <button className="pas-btn pas-btn-lg" style={{width: "100%", justifyContent: "center"}} onClick={goToConfirm}>
                입력 내용 확인 <Icon name="arrow" size={16}/>
              </button>
              <p className="mono muted" style={{fontSize: 11, textAlign: "center", marginTop: 14}}>
                제출 시 개인정보처리방침에 동의하신 것으로 간주됩니다
              </p>
            </>
          )}

          {step === "confirm" && (
            <>
              <div className="pas-eyebrow">Review</div>
              <h3>입력 내용 확인</h3>
              <p className="pas-modal-sub">아래 내용이 맞는지 확인해주세요. 수정이 필요하면 '수정하기'를 눌러주세요.</p>

              <div className="pas-confirm-list">
                <div className="pas-confirm-row">
                  <div className="pas-confirm-label">관심 제품</div>
                  <div className="pas-confirm-value">
                    {topicNames.length > 0 ? (
                      <div className="pas-confirm-chips">
                        {topicNames.map(n => <span key={n} className="pas-confirm-chip">{n}</span>)}
                      </div>
                    ) : <span className="muted">선택 안 함</span>}
                  </div>
                </div>
                <div className="pas-confirm-row">
                  <div className="pas-confirm-label">성함</div>
                  <div className="pas-confirm-value">{form.name || <span className="muted">입력 안 함</span>}</div>
                </div>
                <div className="pas-confirm-row">
                  <div className="pas-confirm-label">약국명</div>
                  <div className="pas-confirm-value">{form.pharmacy || <span className="muted">입력 안 함</span>}</div>
                </div>
                <div className="pas-confirm-row">
                  <div className="pas-confirm-label">연락처</div>
                  <div className="pas-confirm-value">{form.phone || <span className="muted">입력 안 함</span>}</div>
                </div>
                <div className="pas-confirm-row">
                  <div className="pas-confirm-label">지역</div>
                  <div className="pas-confirm-value">{form.region || <span className="muted">선택 안 함</span>}</div>
                </div>
                <div className="pas-confirm-row">
                  <div className="pas-confirm-label">남기실 말씀</div>
                  <div className="pas-confirm-value" style={{whiteSpace: "pre-wrap"}}>{form.message || <span className="muted">없음</span>}</div>
                </div>
              </div>

              <div style={{display: "flex", gap: 12, marginTop: 24}}>
                <button className="pas-btn pas-btn-ghost pas-btn-lg" style={{flex: 1, justifyContent: "center"}} onClick={goBackToForm}>
                  수정하기
                </button>
                <button className="pas-btn pas-btn-lg" style={{flex: 1, justifyContent: "center"}} onClick={submit}>
                  문의 보내기 <Icon name="arrow" size={16}/>
                </button>
              </div>
            </>
          )}

          {step === "success" && (
            <div className="pas-modal-success">
              <div className="pas-modal-success-icon"><Icon name="check" size={28}/></div>
              <h3>문의가 접수되었습니다</h3>
              <p style={{color: "var(--ink-soft)", marginTop: 12, marginBottom: 28}}>
                영업일 기준 24시간 이내에 담당 엔지니어가<br/>연락 드리겠습니다. 감사합니다.
              </p>
              <button className="pas-btn pas-btn-ghost" onClick={onClose}>닫기</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const ContactPage = ({setRoute, onContact}) => {
  const channels = [
    {icon: "phone", label: "전화 상담", value: "02-2039-7767", sub: "평일 08:30 – 18:00"},
    {icon: "clock", label: "원격 지원", value: "988.co.kr", sub: "연중무휴 24시간"},
    {icon: "map-pin", label: "본사 방문", value: "순화궁로 418, 15층 15호", sub: "사전 예약 필수"},
  ];
  return (
    <main>
      <section className="pas-sub-hero">
        <div className="pas-container">
          <div className="pas-sub-hero-breadcrumb">
            <button onClick={() => setRoute("home")}>Home</button> / Contact
          </div>
          <h1 className="pas-sub-hero-title">문의하기</h1>
          <p className="pas-sub-hero-desc">약국 경영에 필요한 모든 것, PAS가 함께 고민합니다. 편한 방법으로 연락 주세요.</p>
        </div>
      </section>

      <section className="pas-section">
        <div className="pas-container">
          <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 80}}>
            {channels.map(c => (
              <div key={c.label} style={{padding: 32, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)"}}>
                <div style={{width: 44, height: 44, borderRadius: "50%", background: "var(--chip-bg)", color: "var(--chip-ink)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 24}}>
                  <Icon name={c.icon} size={20}/>
                </div>
                <div className="mono muted" style={{fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8}}>{c.label}</div>
                <div style={{fontSize: 20, fontWeight: 500, marginBottom: 6, letterSpacing: "-0.01em"}}>{c.value}</div>
                <div className="muted" style={{fontSize: 13}}>{c.sub}</div>
              </div>
            ))}
          </div>

          <div style={{textAlign: "center", padding: "80px 20px", background: "var(--ink)", color: "var(--bg)", borderRadius: "var(--radius-xl)"}}>
            <div className="pas-eyebrow" style={{justifyContent: "center", color: "var(--hero-accent)"}}>Online Inquiry</div>
            <h2 style={{color: "var(--bg)", marginTop: 12, marginBottom: 20}}>온라인 상담 신청</h2>
            <p style={{color: "color-mix(in oklab, var(--bg) 70%, transparent)", maxWidth: 520, margin: "0 auto 32px"}}>
              버튼을 눌러 간단한 정보를 남겨주시면, 담당 엔지니어가 24시간 이내에 연락 드립니다.
            </p>
            <button className="pas-btn pas-btn-lg" style={{background: "var(--bg)", color: "var(--ink)"}} onClick={onContact}>
              상담 신청하기 <Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, {ContactModal, ContactPage});