// Partnership / 제휴 문의 page

const PARTNER_TYPES = [
  {
    id: "carrier",
    icon: "truck",
    title: "택배사 제휴",
    desc: "솔브잇 통합 플랫폼에 합류하여 더 많은 사용자에게 도달하세요.",
    points: [
      "표준화된 API 연동 지원",
      "월간 정산 리포트 제공",
      "마케팅·노출 협업",
    ],
  },
  {
    id: "business",
    icon: "warehouse",
    title: "비즈니스 제휴",
    desc: "월 100건 이상 발송하는 사업자를 위한 전용 플랜과 정산 시스템.",
    points: [
      "최대 25% 할인된 단가",
      "전용 대시보드·세금계산서",
      "전담 매니저 지원",
    ],
  },
  {
    id: "platform",
    icon: "share",
    title: "플랫폼·기술 제휴",
    desc: "커머스·중고거래·B2B 플랫폼에 솔브잇 배송을 임베드하세요.",
    points: [
      "REST API · Webhook 제공",
      "화이트라벨 위젯",
      "수익 쉐어 모델",
    ],
  },
];

const PROCESS = [
  { n: "01", title: "문의 접수", desc: "아래 폼을 통해 제휴 유형과 회사 정보를 보내주세요." },
  { n: "02", title: "1차 검토", desc: "3 영업일 내에 담당자가 1차 검토 후 회신드립니다." },
  { n: "03", title: "미팅·제안", desc: "온라인 또는 오프라인 미팅을 통해 구체적인 협업안을 논의해요." },
  { n: "04", title: "계약·런칭", desc: "협약 체결 후 평균 4주 내에 서비스가 시작됩니다." },
];

const COMPANY_SIZES = ["1~10명", "11~50명", "51~200명", "201~1,000명", "1,000명 이상"];
const VOLUMES = ["월 100건 미만", "월 100~500건", "월 500~2,000건", "월 2,000건 이상"];

const Partnership = ({ navigate }) => {
  const [selectedType, setSelectedType] = React.useState("business");
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    company: "",
    name: "",
    role: "",
    email: "",
    phone: "",
    size: COMPANY_SIZES[1],
    volume: VOLUMES[0],
    message: "",
    agree: false,
  });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const canSubmit = form.company && form.name && form.email && form.message && form.agree;

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (submitted) {
    return (
      <main>
        <div className="container-narrow" style={{ padding: "120px 28px" }}>
          <div className="reserve-main" style={{ padding: 56, textAlign: "center" }}>
            <div className="done-icon" style={{ margin: "0 auto 24px" }}>
              <Icon name="check-bold" size={36}/>
            </div>
            <h3 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 12px" }}>
              문의를 잘 받았어요
            </h3>
            <p style={{ color: "var(--muted)", marginBottom: 24, lineHeight: 1.65 }}>
              <strong style={{ color: "var(--ink)" }}>{form.company}</strong>의 제휴 문의가 정상 접수되었습니다.<br/>
              담당자가 3 영업일 이내에 <strong style={{ color: "var(--ink)" }}>{form.email}</strong>로 회신드릴게요.
            </p>
            <div className="done-receipt" style={{ textAlign: "left", maxWidth: 360, margin: "0 auto 28px" }}>
              <div className="done-receipt-row id">
                <span className="lbl">접수번호</span>
                <span className="val">PNR-{Math.floor(Math.random() * 90000 + 10000)}</span>
              </div>
              <div className="done-receipt-row">
                <span className="lbl">제휴 유형</span>
                <span className="val">{PARTNER_TYPES.find(p => p.id === selectedType).title}</span>
              </div>
              <div className="done-receipt-row">
                <span className="lbl">담당자</span>
                <span className="val">{form.name} {form.role && `· ${form.role}`}</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "center" }}>
              <button className="btn btn-outline" onClick={() => { setSubmitted(false); }}>
                다른 문의 추가
              </button>
              <button className="btn btn-primary" onClick={() => navigate('home')}>
                홈으로 <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main>
      {/* Hero */}
      <section className="partner-hero">
        <div className="container">
          <div className="section-tag" style={{ marginBottom: 16 }}>Partnership</div>
          <h1>솔브잇과 함께<br/>택배의 경험을 바꿔요.</h1>
          <p>택배사·사업자·플랫폼 누구든. 사용자에게 더 단순한 택배 경험을 만드는 일에 함께 해주실 분을 찾고 있어요.</p>

          <div className="partner-types">
            {PARTNER_TYPES.map(p => (
              <div key={p.id}
                className={`partner-type ${selectedType === p.id ? "selected" : ""}`}
                onClick={() => setSelectedType(p.id)}>
                <div className="partner-type-icon"><Icon name={p.icon} size={22}/></div>
                <h3>{p.title}</h3>
                <p className="desc">{p.desc}</p>
                <ul>
                  {p.points.map(pt => <li key={pt}>{pt}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <div className="section-tag">제휴 진행 절차</div>
            <h2>문의부터 런칭까지 평균 4주</h2>
          </div>
          <div className="process-grid">
            {PROCESS.map(p => (
              <div key={p.n} className="process-step">
                <div className="process-num">{p.n}</div>
                <h4>{p.title}</h4>
                <p>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Form + Aside */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="partner-form-wrap">
            <form className="partner-form" onSubmit={handleSubmit}>
              <h3>제휴 문의하기</h3>
              <p>아래 정보를 남겨주시면 담당자가 빠르게 회신드릴게요.</p>

              <div className="field-group" style={{ marginBottom: 18 }}>
                <label>제휴 유형 <span style={{ color: "var(--primary)" }}>*</span></label>
                <div className="option-cards" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
                  {PARTNER_TYPES.map(p => (
                    <button key={p.id} type="button"
                      className={`option-card ${selectedType === p.id ? "selected" : ""}`}
                      onClick={() => setSelectedType(p.id)}>
                      <span className="oc-title">{p.title}</span>
                      <span className="oc-sub" style={{ marginTop: 2 }}>{p.desc.split(".")[0]}.</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="form-grid">
                <div className="field-group">
                  <label>회사명 <span style={{ color: "var(--primary)" }}>*</span></label>
                  <input className="input" value={form.company}
                    onChange={e => update('company', e.target.value)}
                    placeholder="예: 솔브잇 주식회사"/>
                </div>
                <div className="field-group">
                  <label>회사 규모</label>
                  <select className="select" value={form.size} onChange={e => update('size', e.target.value)}>
                    {COMPANY_SIZES.map(s => <option key={s}>{s}</option>)}
                  </select>
                </div>
                <div className="field-group">
                  <label>담당자 이름 <span style={{ color: "var(--primary)" }}>*</span></label>
                  <input className="input" value={form.name}
                    onChange={e => update('name', e.target.value)}
                    placeholder="홍길동"/>
                </div>
                <div className="field-group">
                  <label>직책</label>
                  <input className="input" value={form.role}
                    onChange={e => update('role', e.target.value)}
                    placeholder="예: 사업개발팀 매니저"/>
                </div>
                <div className="field-group">
                  <label>이메일 <span style={{ color: "var(--primary)" }}>*</span></label>
                  <input className="input" type="email" value={form.email}
                    onChange={e => update('email', e.target.value)}
                    placeholder="business@company.kr"/>
                </div>
                <div className="field-group">
                  <label>연락처</label>
                  <input className="input" value={form.phone}
                    onChange={e => update('phone', e.target.value)}
                    placeholder="010-0000-0000"/>
                </div>
                {selectedType === "business" && (
                  <div className="field-group full">
                    <label>월 평균 발송량</label>
                    <div className="option-cards" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
                      {VOLUMES.map(v => (
                        <button key={v} type="button"
                          className={`option-card ${form.volume === v ? "selected" : ""}`}
                          onClick={() => update('volume', v)}
                          style={{ padding: "12px 14px" }}>
                          <span className="oc-title" style={{ fontSize: 13 }}>{v}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                <div className="field-group full">
                  <label>제휴 문의 내용 <span style={{ color: "var(--primary)" }}>*</span></label>
                  <textarea className="textarea" value={form.message}
                    onChange={e => update('message', e.target.value)}
                    placeholder="어떤 형태의 제휴를 원하시는지, 기대하시는 점이 있다면 자유롭게 적어주세요."
                    style={{ minHeight: 140 }}/>
                </div>
              </div>

              <label className="checkbox-row" style={{
                marginTop: 20, padding: "14px 16px",
                background: "var(--bg-2)", borderRadius: 10
              }}>
                <input type="checkbox" checked={form.agree}
                  onChange={e => update('agree', e.target.checked)}/>
                <span>
                  <strong>(필수)</strong> 제휴 검토를 위한 개인정보 수집·이용에 동의합니다.
                  <a href="#" style={{ color: "var(--primary)", marginLeft: 6,
                    borderBottom: "1px solid color-mix(in oklab, var(--primary), transparent 70%)" }}>
                    내용 보기
                  </a>
                </span>
              </label>

              <div className="step-actions" style={{ justifyContent: "flex-end" }}>
                <button type="submit" className="btn btn-primary btn-lg"
                  disabled={!canSubmit}
                  style={{ opacity: canSubmit ? 1 : 0.5 }}>
                  제휴 문의 보내기 <Icon name="arrow-right" size={14}/>
                </button>
              </div>
            </form>

            <aside className="partner-aside">
              <div className="partner-aside-card">
                <h4>제휴 담당</h4>
                <div className="info-row">
                  <div className="ic"><Icon name="msg" size={14}/></div>
                  <div>
                    <div className="lbl">이메일</div>
                    <div className="val">partner@solveit.kr</div>
                  </div>
                </div>
                <div className="info-row">
                  <div className="ic"><Icon name="phone" size={14}/></div>
                  <div>
                    <div className="lbl">전화 (평일 10:00~18:00)</div>
                    <div className="val">02-1234-5678</div>
                  </div>
                </div>
                <div className="info-row">
                  <div className="ic"><Icon name="pin" size={14}/></div>
                  <div>
                    <div className="lbl">본사</div>
                    <div className="val">서울 성동구 왕십리로 222<br/>성수빌딩 8층</div>
                  </div>
                </div>
              </div>

              <div className="partner-aside-card" style={{
                background: "var(--primary-50)", border: "1px solid color-mix(in oklab, var(--primary), transparent 80%)"
              }}>
                <h4 style={{ color: "var(--primary)" }}>이미 제휴 중이신가요?</h4>
                <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6, margin: 0 }}>
                  파트너 전용 대시보드에서 정산 내역과 운영 지표를 확인하실 수 있어요.
                </p>
                <button className="btn btn-outline btn-block" style={{ marginTop: 12 }}>
                  파트너 로그인 <Icon name="arrow-right" size={14}/>
                </button>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Partnership = Partnership;