// Support page — services + dealer recruitment
const SupportPage = ({setRoute, onContact}) => {
  const D = window.PAS_DATA;

  const benefits = [
    {n: "01", t: "독점 영업권", d: "지정 권역 내 단독 대리점 지위로 안정적인 영업 기반을 보장합니다."},
    {n: "02", t: "제품 교육 & 인증", d: "본사 엔지니어 트레이닝 2주 과정을 무상 제공, 공식 PAS 파트너 자격 부여."},
    {n: "03", t: "공동 마케팅", d: "지역 개국 약국 리드를 본사와 공유하고, 마케팅 비용을 50% 지원합니다."},
    {n: "04", t: "기술 지원 백업", d: "본사 엔지니어가 원격·현장 백업 지원. 초기 정착 부담을 최소화합니다."},
    {n: "05", t: "수익 구조", d: "라이센스 판매·유지보수·하드웨어 유통 3축의 안정적인 수익 모델."},
    {n: "06", t: "브랜드 자산", d: "20년 축적된 PAS 브랜드와 전국 단위 레퍼런스를 그대로 활용하실 수 있습니다."},
  ];

  const targets = [
    "수도권 (서울·경기·인천)",
    "강원 (춘천·원주·강릉)",
    "충청 (대전·세종·청주·천안)",
    "전북 (전주·익산·군산)",
    "전남·광주",
    "경북·대구",
    "경남 (창원·진주)",
    "부산·울산",
    "제주",
  ];

  const steps = [
    {n: "01", t: "지원서 접수", d: "하단 버튼으로 간단한 정보를 남겨주시면 담당자가 연락드립니다."},
    {n: "02", t: "상담 & 실사", d: "본사 방문 또는 현지 미팅을 통해 권역·역량을 상호 확인합니다."},
    {n: "03", t: "계약 체결", d: "조건 합의 후 공식 파트너 계약을 체결합니다."},
    {n: "04", t: "교육 & 오픈", d: "2주간의 집중 교육 후 정식 대리점으로 운영을 시작합니다."},
  ];

  return (
    <main>
      <section className="pas-sub-hero">
        <div className="pas-container">
          <div className="pas-sub-hero-breadcrumb">
            <button onClick={() => setRoute("home")}>Home</button> / Support
          </div>
          <h1 className="pas-sub-hero-title">
            PAS와 함께<br/>성장할 파트너를<br/>모십니다
          </h1>
          <p className="pas-sub-hero-desc">
            PAS는 전국 권역별 대리점 파트너를 모집하고 있습니다. 약국 IT 시장에서 20년의 노하우를 가진 본사와 함께, 지역의 첫 번째 PAS 파트너가 되어주세요.
          </p>
        </div>
      </section>

      {/* Services */}
      <section className="pas-section">
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">Services</div>
              <h2>6가지 지원 서비스</h2>
            </div>
          </div>
          <div className="pas-services-grid">
            {D.services.map(s => (
              <div key={s.n} className="pas-service-cell">
                <div className="pas-service-num">{s.n}</div>
                <div className="pas-service-title">{s.t}</div>
                <div className="pas-service-desc">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Recruitment banner */}
      <section className="pas-section" style={{background: "var(--surface)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"}}>
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow" style={{color: "var(--accent)"}}>◇ Now Recruiting</div>
              <h2>전국 대리점<br/>파트너 모집 중</h2>
            </div>
            <div style={{maxWidth: 380, color: "var(--ink-soft)", fontSize: 15}}>
              현재 모든 권역에서 첫 파트너를 모집 중입니다. 지역별 독점 영업권을 선착순으로 부여합니다.
            </div>
          </div>

          {/* Status hero */}
          <div style={{
            padding: "56px 48px",
            border: "1px dashed var(--line-strong)",
            borderRadius: "var(--radius-lg)",
            background: "var(--bg)",
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr",
            gap: 48,
            alignItems: "center",
            marginBottom: 48,
          }}>
            <div>
              <div className="mono" style={{fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 16, display: "inline-flex", alignItems: "center", gap: 8}}>
                <span style={{width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", display: "inline-block", animation: "dotPulse 2s infinite"}}/>
                모집 현황
              </div>
              <div style={{fontSize: "clamp(36px, 4.5vw, 52px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1.05, marginBottom: 16}}>
                9개 권역 <em style={{fontStyle: "normal", color: "var(--accent)", fontFamily: "var(--font-en)", fontWeight: 400}}>전 지역</em><br/>파트너 모집 오픈
              </div>
              <p style={{color: "var(--ink-soft)", fontSize: 16, maxWidth: 440, lineHeight: 1.55}}>
                본사 직속 운영 구간은 수도권이며, 전국 9개 권역은 공식 대리점 파트너를 모집합니다. 선정된 파트너에게는 권역 내 독점 영업권이 부여됩니다.
              </p>
            </div>
            <div style={{
              background: "var(--ink)",
              color: "var(--bg)",
              borderRadius: "var(--radius-lg)",
              padding: "32px",
              display: "grid",
              gridTemplateColumns: "repeat(2, 1fr)",
              gap: "24px 32px",
            }}>
              <div>
                <div className="mono" style={{fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.55, marginBottom: 8}}>모집 권역</div>
                <div style={{fontSize: 32, fontWeight: 500, fontFamily: "var(--font-en)", letterSpacing: "-0.02em", color: "var(--hero-accent)"}}>9</div>
              </div>
              <div>
                <div className="mono" style={{fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.55, marginBottom: 8}}>선정 기준</div>
                <div style={{fontSize: 32, fontWeight: 500, fontFamily: "var(--font-en)", letterSpacing: "-0.02em"}}>권역당 1곳</div>
              </div>
              <div>
                <div className="mono" style={{fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.55, marginBottom: 8}}>계약 방식</div>
                <div style={{fontSize: 16, fontWeight: 500}}>독점 파트너십</div>
              </div>
              <div>
                <div className="mono" style={{fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.55, marginBottom: 8}}>지원 기간</div>
                <div style={{fontSize: 16, fontWeight: 500}}>상시 접수</div>
              </div>
            </div>
          </div>

          {/* Target regions grid */}
          <div style={{marginBottom: 16}}>
            <div className="mono muted" style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 16}}>모집 권역 · Target Regions</div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 12}}>
            {targets.map((t, i) => (
              <div key={t} style={{
                padding: "20px 20px",
                background: "var(--surface)",
                border: "1px solid var(--line)",
                borderRadius: "var(--radius)",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                gap: 12,
                transition: "all 0.2s",
                cursor: "pointer",
              }}
              onMouseEnter={e => {e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.transform = "translateY(-2px)";}}
              onMouseLeave={e => {e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)";}}
              >
                <div style={{display: "flex", alignItems: "center", gap: 12}}>
                  <span className="mono" style={{fontSize: 11, color: "var(--ink-muted)"}}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{fontWeight: 500, fontSize: 14}}>{t}</span>
                </div>
                <span className="mono" style={{fontSize: 10, padding: "4px 8px", background: "var(--chip-bg)", color: "var(--chip-ink)", borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.08em"}}>OPEN</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="pas-section">
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">Partner Benefits</div>
              <h2>PAS 파트너가<br/>되시면</h2>
            </div>
          </div>
          <div className="pas-services-grid">
            {benefits.map(b => (
              <div key={b.n} className="pas-service-cell">
                <div className="pas-service-num">{b.n}</div>
                <div className="pas-service-title">{b.t}</div>
                <div className="pas-service-desc">{b.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="pas-section" style={{background: "var(--surface)", borderTop: "1px solid var(--line)"}}>
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">Process</div>
              <h2>파트너 지원 절차</h2>
            </div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--bg)"}}>
            {steps.map((s, i) => (
              <div key={s.n} style={{padding: "32px 24px", borderLeft: i === 0 ? 0 : "1px solid var(--line)"}}>
                <div className="mono" style={{fontSize: 11, textTransform: "uppercase", color: "var(--accent)", letterSpacing: "0.12em", marginBottom: 20}}>STEP {s.n}</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}}>{s.t}</div>
                <div style={{fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.5}}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA / Hotline */}
      <section className="pas-section">
        <div className="pas-container">
          <div style={{background: "var(--ink)", color: "var(--bg)", borderRadius: "var(--radius-xl)", padding: "60px 48px", display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 40, flexWrap: "wrap"}}>
            <div>
              <div className="mono" style={{fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--hero-accent)", marginBottom: 16}}>Partner Inquiry</div>
              <h2 style={{color: "var(--bg)"}}>지역의 첫 번째<br/>PAS 파트너가 되어주세요</h2>
              <p style={{marginTop: 16, color: "color-mix(in oklab, var(--bg) 70%, transparent)", fontSize: 16}}>
                지원과 관련된 모든 문의는 본사 파트너십 담당자가 직접 응대합니다.
              </p>
            </div>
            <div style={{textAlign: "right"}}>
              <div className="mono" style={{fontSize: 11, opacity: 0.6, marginBottom: 8, letterSpacing: "0.1em"}}>파트너십 문의</div>
              <div style={{fontSize: 44, fontWeight: 500, fontFamily: "var(--font-en)", letterSpacing: "-0.02em", color: "var(--hero-accent)"}}>02-2039-7767</div>
              <button className="pas-btn" style={{marginTop: 16, background: "var(--bg)", color: "var(--ink)"}} onClick={onContact}>파트너 지원하기 <Icon name="arrow" size={14}/></button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, {SupportPage});