// Care page — Launch care + detailed support services
const CarePage = ({setRoute, onContact}) => {
  const D = window.PAS_DATA;
  const M = window.PAS_MEDIA || {care: []};
  const timeline = [
    {day: "D-7", t: "개국 준비", d: "시스템 세팅과 초기 데이터 마이그레이션을 지원합니다."},
    {day: "D-1", t: "최종 점검", d: "엔지니어 현장 방문, 모든 기기 연동 확인."},
    {day: "D+0", t: "개국 당일", d: "실시간 스탠바이 모드. 긴급 이슈 즉시 대응."},
    {day: "D+7", t: "첫 주 케어", d: "매일 케어 콜로 업무 정착을 돕습니다."},
    {day: "D+30", t: "한 달 리포트", d: "운영 데이터 기반 개선 제안서 제공."},
  ];
  return (
    <main>
      <section className="pas-sub-hero">
        <div className="pas-container">
          <div className="pas-sub-hero-breadcrumb">
            <button onClick={() => setRoute("home")}>Home</button> / Care
          </div>
          <h1 className="pas-sub-hero-title">
            첫 시작의 어려움,<br/>PAS에는 없습니다
          </h1>
          <p className="pas-sub-hero-desc">
            개국 후 한 달 동안 제공되는 특별 케어 서비스로 안정적인 정착을 돕습니다.
            30분 더 빠른 상담, 먼저 거는 케어 콜, 사전 방문 점검까지.
          </p>
        </div>
      </section>

      <section className="pas-section">
        <div className="pas-container">
          <div className="pas-care-grid">
            {D.care.map((c, i) => (
              <article key={c.title} className="pas-care-card">
                <AssetImage src={M.care[i]?.src} alt={M.care[i]?.alt || c.title} className="pas-care-card-viz" aspect="16/10"/>
                <div className="pas-care-card-body">
                  <div className="pas-care-card-eyebrow">0{i+1} / {c.ko}</div>
                  <div className="pas-care-card-title">{c.title}</div>
                  <div className="pas-care-card-desc">{c.desc}</div>
                  <div className="pas-care-card-detail">{c.detail}</div>
                </div>
              </article>
            ))}
          </div>

          {/* Timeline */}
          <div style={{marginTop: 120}}>
            <div className="pas-section-head">
              <div>
                <div className="pas-eyebrow">Timeline</div>
                <h2>개국 30일 케어 플랜</h2>
              </div>
              <div style={{maxWidth: 360, color: "var(--ink-soft)", fontSize: 15}}>
                개국 일주일 전부터 한 달 후까지, 구간별로 필요한 지원을 선제적으로 제공합니다.
              </div>
            </div>
            <div style={{display: "grid", gridTemplateColumns: `repeat(${timeline.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--surface)"}}>
              {timeline.map((t, i) => (
                <div key={t.day} style={{padding: "32px 24px", borderLeft: i === 0 ? 0 : "1px solid var(--line)", position: "relative"}}>
                  <div className="mono" style={{fontSize: 11, textTransform: "uppercase", color: "var(--accent)", letterSpacing: "0.12em", marginBottom: 20}}>{t.day}</div>
                  <div style={{width: 12, height: 12, borderRadius: "50%", background: "var(--accent)", marginBottom: 20, boxShadow: "0 0 0 4px var(--chip-bg)"}}/>
                  <div style={{fontSize: 17, fontWeight: 500, marginBottom: 8}}>{t.t}</div>
                  <div style={{fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.5}}>{t.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* CTA */}
          <div style={{marginTop: 100, textAlign: "center", padding: "60px 20px", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)"}}>
            <div className="pas-eyebrow" style={{justifyContent: "center"}}>Get Started</div>
            <h2 style={{margin: "12px auto 20px", maxWidth: 720}}>개국 준비 중이신가요?<br/>전담 엔지니어가 찾아갑니다.</h2>
            <p style={{color: "var(--ink-soft)", maxWidth: 540, margin: "0 auto 32px", fontSize: 16}}>
              사전 상담 후 고객님 약국 현장을 방문해 최적의 시스템 구성을 제안해드립니다.
            </p>
            <button className="pas-btn pas-btn-lg" onClick={onContact}>상담 신청 <Icon name="arrow" size={16}/></button>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, {CarePage});