const { Card, FormField, Input, Select, Textarea, Checkbox, Radio, FileDrop, Button, Badge, Icon } = window.MyMailerDesignSystem_77208c || {};

function QuoteForm() {
  const [step, setStep] = React.useState(1);
  const [svc, setSvc] = React.useState("mail");
  const [sender, setSender] = React.useState("newsletter@naver.com");
  const [agree, setAgree] = React.useState(false);
  const naver = /@naver\./.test(sender);

  return (
    <div style={{display:"grid",gap:"var(--grid-gap)",gridTemplateColumns:"1fr 340px",alignItems:"start"}}>
      <Card padding="32px">
        <div style={{display:"flex",gap:8,marginBottom:26}}>
          {[1,2].map(n=>(
            <button key={n} type="button" onClick={()=>setStep(n)} style={{flex:1,display:"grid",gap:6,padding:"12px 14px",textAlign:"left",background:step===n?"var(--signal-100)":"var(--surface-sunken)",border:"1px solid "+(step===n?"var(--signal-300)":"var(--border-subtle)"),borderRadius:"var(--radius-md)"}}>
              <span style={{font:"var(--type-data)",letterSpacing:"var(--tracking-wide)",color:step===n?"var(--signal-600)":"var(--text-faint)"}}>STEP {n}</span>
              <span style={{font:"var(--type-label)",color:"var(--text-primary)"}}>{n===1?"견적 요청 (4개 항목)":"발송 정보 · 파일"}</span>
            </button>
          ))}
        </div>

        {step===1 ? (
          <div style={{display:"grid",gap:20}}>
            <div>
              <div style={{font:"var(--type-label)",marginBottom:10}}>서비스 구분</div>
              <div style={{display:"grid",gap:10,gridTemplateColumns:"repeat(3,1fr)"}}>
                <Radio variant="card" name="svc" value="mail" checked={svc==="mail"} onChange={setSvc} label="메일 발송대행" />
                <Radio variant="card" name="svc" value="news" checked={svc==="news"} onChange={setSvc} label="뉴스레터 발송대행" />
                <Radio variant="card" name="svc" value="gift" checked={svc==="gift"} onChange={setSvc} label="기프티콘 발송대행" />
              </div>
            </div>
            <div style={{display:"grid",gap:20,gridTemplateColumns:"1fr 1fr"}}>
              <FormField label="회사명" required><Input placeholder="예) 처음소프트" /></FormField>
              <FormField label="담당자 성명" required><Input placeholder="예) 홍길동" /></FormField>
              <FormField label="연락처 · 이메일" required><Input placeholder="010-0000-0000 / name@company.co.kr" /></FormField>
              <FormField label="발송 규모 · 희망일" required hint="당일 신청 시 스케줄 협의 후 가능합니다.">
                <Select placeholder="예상 발송 규모" options={["1만 통 이하","1~5만 통","5~20만 통","20만 통 이상"]} />
              </FormField>
            </div>
            <div style={{display:"flex",gap:10,alignItems:"center",padding:"12px 14px",borderRadius:"var(--radius-md)",background:"var(--surface-sunken)"}}>
              <Icon name="user-check" size={16} color="var(--text-muted)" />
              <span style={{font:"var(--type-caption)",color:"var(--text-muted)",flex:1}}>로그인하시면 회사·담당자 정보가 자동 입력됩니다. 재구매 시 입력 항목은 4개로 줄어듭니다.</span>
              <Button variant="link" size="sm">이전 신청 내용 불러오기</Button>
            </div>
            <Button size="lg" onClick={()=>setStep(2)} iconRight={<Icon name="arrow-right" size={17}/>}>견적 요청하고 다음 단계로</Button>
          </div>
        ) : (
          <div style={{display:"grid",gap:20}}>
            <div style={{display:"grid",gap:20,gridTemplateColumns:"1fr 1fr"}}>
              <FormField label="발신자 이름" required><Input defaultValue="마이메일러 뉴스레터" /></FormField>
              <FormField label="발신자 이메일" required
                error={naver ? "네이버 이메일은 발신자 주소로 사용할 수 없습니다." : null}
                hint={naver ? null : "자체 도메인 주소를 권장합니다."}>
                <Input value={sender} invalid={naver} onChange={(e)=>setSender(e.target.value)} />
              </FormField>
            </div>
            <FormField label="메일 발송 제목" required><Input placeholder="수신자 메일함에 표시될 제목" /></FormField>
            <FormField label="테스트메일 수신 주소" required hint="승인 회신 전에는 실발송하지 않습니다.">
              <Input placeholder="test@company.co.kr" />
            </FormField>
            <FormField label="요청 사항"><Textarea rows={3} placeholder="분할 발송·시차 발송 등 요청 사항" /></FormField>
            <FormField label="첨부파일" help="필요 파일: 소재 원본(HTML/이미지/문서), 발송 주소록(XLSX/CSV)">
              <FileDrop hint="개당 20MB 이하 · 주소록은 수신동의된 리스트만 가능" />
            </FormField>
            <Checkbox checked={agree} onChange={setAgree} label="개인정보 수집·이용에 동의합니다 (필수)"
              description="수집 항목: 회사명, 담당자명, 연락처, 이메일 · 보유 기간: 계약 종료 후 3년" />
            <div style={{display:"flex",gap:10}}>
              <Button variant="outline" size="lg" onClick={()=>setStep(1)}>이전</Button>
              <Button size="lg" fullWidth disabled={!agree}>신청 접수</Button>
            </div>
          </div>
        )}
      </Card>

      <Card tone="sunken" padding="24px">
        <div style={{display:"grid",gap:16}}>
          <Badge tone="managed">캠페인 1회당 · 구독 아님</Badge>
          <p style={{font:"var(--type-body-sm)",color:"var(--text-secondary)"}}>
            첫 화면에서는 4개 항목만 받습니다. 발신자 정보와 첨부파일은 견적 확정 후 STEP 2에서 요청드립니다.
          </p>
          <div style={{display:"grid",gap:10,paddingTop:16,borderTop:"1px solid var(--border-subtle)"}}>
            {[["평균 첫 응답","2시간 이내"],["신청→발송","영업일 2~3일"],["디자인 제작 시","영업일 5~7일"]].map(([k,v])=>(
              <div key={k} style={{display:"flex",justifyContent:"space-between",gap:12}}>
                <span style={{font:"var(--type-caption)",color:"var(--text-muted)"}}>{k}</span>
                <span style={{font:"var(--type-data)",color:"var(--text-primary)"}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}
Object.assign(window, { QuoteForm });