// KASHA — 코스어 굿즈 판매 대행 소개 페이지
// 홈과 톤은 잇되(프로스티드·iOS 모션) 색다른 결: 다크 인디고 히어로 + 보라 액센트.
// 대상: 판매 대행이 필요한 코스어 / 상업 판매에 미숙한 코스어 / CMS·엑셀이 필요한 코스어 /
//       미성년자(한도 제한) / 촬영~판매~배송을 한 번에 원하는 코스어.
function AgencyScreen({ onNavigate }) {
  const { Button, Icon } = window.DS;
  window.KASHADB.useStore();
  const user = window.KASHADB.getCurrentUser();
  const role = (user && user.role) || null;

  const goApply = () => onNavigate("mypage");   // 마이페이지에서 코스어 권한 신청

  const pains = [
    { icon: "user", title: "대행이 필요한 코스어", desc: "에이전시 없이 혼자서는 굿즈 판매가 막막한 분." },
    { icon: "sparkles", title: "판매가 처음인 코스어", desc: "상업 판매·정산·세금이 낯설고 미숙한 분." },
    { icon: "image", title: "관리가 버거운 코스어", desc: "실시간 판매 현황·구매자 관리·엑셀 정리가 필요한 분." },
    { icon: "star", title: "미성년 코스어", desc: "한도 제한 때문에 수익 수령 계좌·카드가 필요한 분." },
  ];
  const features = [
    { icon: "image", title: "실시간 판매 CMS", desc: "판매량·매출·구매자를 실시간 대시보드로. 마이페이지 분석 탭에서 바로 확인해요." },
    { icon: "bookmark", title: "정리된 엑셀 리포트", desc: "구매자·주문·배송 내역을 깔끔한 엑셀로 내려받아요." },
    { icon: "sparkles", title: "정산 대행", desc: "구매 대금을 KASHA가 수취해 수수료를 뺀 금액을 코스어에게 정산해요." },
    { icon: "star", title: "미성년 한도 해제", desc: "미성년 코스어를 위한 한도 해제 계좌·사용 카드 발급을 지원해요." },
    { icon: "calendar", title: "배송까지 원스톱", desc: "촬영·상품화·판매·배송·CS까지 한 번에 대행해요." },
    { icon: "check", title: "간편한 등록", desc: "승인 한 번이면 계약 기간 내내 굿즈를 자유롭게 등록·판매해요." },
  ];
  const steps = [
    { n: "01", title: "코스어 권한 신청", desc: "마이페이지에서 신청 폼을 작성해요." },
    { n: "02", title: "관리자 승인", desc: "검토 후 계정에 코스어 권한이 부여돼요." },
    { n: "03", title: "대행 계약 · 서명", desc: "마이페이지에서 대행 서비스를 신청하고 계약서에 서명해요." },
    { n: "04", title: "굿즈 등록 · 판매", desc: "승인되면 굿즈를 등록하고 판매를 시작해요." },
  ];

  return (
    <div style={{ overflowX: "clip" }}>
      <style>{`
        .kag-hero{position:relative;overflow:hidden;padding:96px 24px 84px;text-align:center;color:#fff;
          background:radial-gradient(120% 120% at 50% -10%, #3b2f7a 0%, #241d52 42%, #14122b 100%)}
        .kag-hero:before{content:"";position:absolute;inset:0;background:
          radial-gradient(40% 40% at 80% 12%, rgba(139,120,255,0.35), transparent 70%),
          radial-gradient(38% 38% at 12% 82%, rgba(96,120,255,0.28), transparent 70%);pointer-events:none}
        .kag-eyebrow{position:relative;font-size:12.5px;font-weight:800;letter-spacing:0.14em;color:#b9adff}
        .kag-h1{position:relative;color:#fff;font-size:clamp(30px,5.4vw,52px);font-weight:800;letter-spacing:-0.03em;line-height:1.12;margin:18px 0 0}
        .kag-sub{position:relative;max-width:620px;margin:20px auto 0;font-size:clamp(15px,2.1vw,18px);line-height:1.65;color:rgba(255,255,255,0.82)}
        .kag-cta{position:relative;display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
        .kag-btn{height:52px;padding:0 26px;border-radius:14px;font-family:var(--font-sans);font-size:16px;font-weight:700;cursor:pointer;border:none;transition:transform .2s var(--ease-ios),box-shadow .3s}
        .kag-btn.p{background:var(--gray-0);color:#1a1636;box-shadow:0 10px 30px -10px rgba(0,0,0,0.5)}
        .kag-btn.p:hover{transform:translateY(-2px)}
        .kag-btn.g{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.24)}
        .kag-btn.g:hover{background:rgba(255,255,255,0.2)}
        .kag-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
        .kag-sec{padding:72px 0}
        .kag-eyebrow2{font-size:12.5px;font-weight:800;letter-spacing:0.1em;color:var(--blue-500);text-align:center}
        .kag-h2{font-size:clamp(24px,3.6vw,34px);font-weight:800;letter-spacing:-0.02em;text-align:center;margin:12px 0 0;color:var(--text-strong)}
        .kag-lead{text-align:center;color:var(--text-secondary);font-size:16px;margin:12px auto 0;max-width:560px;line-height:1.6}
        .kag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
        .kag-grid.f3{grid-template-columns:repeat(3,1fr)}
        /* .kag-grid.f3 는 2클래스 선택자라 아래 미디어 규칙보다 우선순위가 높아, 반드시 .f3 도 함께 지정해 모바일에서 접히게 해요 */
        @media(max-width:900px){.kag-grid,.kag-grid.f3{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:560px){.kag-grid,.kag-grid.f3{grid-template-columns:1fr}}
        .kag-card{background:var(--gray-0);border:1px solid var(--border-subtle);border-radius:18px;padding:22px 20px;transition:transform .3s var(--ease-ios),box-shadow .3s}
        .kag-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(15,17,21,0.24)}
        .kag-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--blue-500);margin-bottom:14px}
        .kag-ic.v{background:#efe9ff;color:#6b4dff}
        .kag-ct{font-size:16.5px;font-weight:700;color:var(--text-strong);letter-spacing:-0.01em}
        .kag-cd{margin-top:7px;font-size:14px;color:var(--text-secondary);line-height:1.6}
        .kag-steps{position:relative;margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        @media(max-width:760px){.kag-steps{grid-template-columns:1fr}}
        .kag-step{background:var(--gray-50);border-radius:16px;padding:22px 20px}
        .kag-num{font-size:30px;font-weight:800;color:#6b4dff;letter-spacing:-0.04em}
        .kag-band{margin:20px auto 90px;max-width:1080px;border-radius:26px;padding:52px 32px;text-align:center;color:#fff;
          background:linear-gradient(120deg,#2a2260,#4a3aa8)}
      `}</style>

      {/* Hero */}
      <section className="kag-hero" data-no-reveal>
        <div className="kag-eyebrow">COSPLAYER GOODS AGENCY</div>
        <h1 className="kag-h1">촬영부터 판매·배송까지,<br/>코스어 굿즈를 한 번에</h1>
        <p className="kag-sub">판매가 막막한 코스어를 위해 KASHA가 촬영·상품화·판매·정산·배송까지 대행해요. 미성년 코스어의 한도 문제까지 함께 풀어드려요.</p>
        <div className="kag-cta">
          {role === "코스어"
            ? <button className="kag-btn p" onClick={goApply}>대행 서비스 신청</button>
            : <button className="kag-btn p" onClick={goApply}>코스어 권한 신청</button>}
          <button className="kag-btn g" onClick={() => onNavigate("goods")}>굿즈 상품 보기</button>
        </div>
      </section>

      {/* 이런 분을 위해요 */}
      <section className="kag-sec">
        <div className="kag-wrap">
          <div className="kag-eyebrow2">WHO IT'S FOR</div>
          <h2 className="kag-h2">이런 코스어를 위한 서비스예요</h2>
          <div className="kag-grid">
            {pains.map((p, i) => (
              <div className="kag-card" key={i}>
                <div className="kag-ic v"><Icon name={p.icon} size={22} /></div>
                <div className="kag-ct">{p.title}</div>
                <div className="kag-cd">{p.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 무엇을 도와드리나요 */}
      <section className="kag-sec" style={{ background: "var(--gray-50)" }}>
        <div className="kag-wrap">
          <div className="kag-eyebrow2">WHAT WE DO</div>
          <h2 className="kag-h2">판매의 모든 과정을 대행해요</h2>
          <p className="kag-lead">실시간 CMS부터 정산·배송, 미성년 한도 해제까지 — 코스어는 창작에만 집중하세요.</p>
          <div className="kag-grid f3">
            {features.map((f, i) => (
              <div className="kag-card" key={i}>
                <div className="kag-ic"><Icon name={f.icon} size={22} /></div>
                <div className="kag-ct">{f.title}</div>
                <div className="kag-cd">{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 진행 절차 */}
      <section className="kag-sec">
        <div className="kag-wrap">
          <div className="kag-eyebrow2">HOW IT WORKS</div>
          <h2 className="kag-h2">신청부터 판매까지, 네 걸음</h2>
          <div className="kag-steps">
            {steps.map((s, i) => (
              <div className="kag-step" key={i}>
                <div className="kag-num">{s.n}</div>
                <div className="kag-ct" style={{ marginTop: 8 }}>{s.title}</div>
                <div className="kag-cd">{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section>
        <div className="kag-band">
          <h2 style={{ fontSize: "clamp(24px,3.6vw,32px)", fontWeight: 800, letterSpacing: "-0.02em", color: "#fff" }}>지금 코스어로 시작하세요</h2>
          <p style={{ marginTop: 12, fontSize: 16, color: "rgba(255,255,255,0.82)", lineHeight: 1.6 }}>권한 신청은 무료예요. 승인 후 대행 계약을 맺으면 바로 굿즈를 판매할 수 있어요.</p>
          <div style={{ marginTop: 26 }}>
            <button className="kag-btn p" onClick={goApply}>{role === "코스어" ? "대행 서비스 신청" : "코스어 권한 신청하기"}</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.AgencyScreen = AgencyScreen;