function EmailTemplates() {
  const [selected, setSelected] = useState('interview-invite');

  const templates = [
    { id: 'app-received',   name: '지원 접수 확인',      stage: '자동',   sent: 1247, open: 89, category: '지원' },
    { id: 'screening-pass', name: '서류 통과 안내',      stage: '서류',   sent: 486,  open: 91, category: '서류' },
    { id: 'screening-fail', name: '서류 불합격 안내',    stage: '서류',   sent: 761,  open: 78, category: '서류' },
    { id: 'interview-invite', name: '1차 인터뷰 초대', stage: '인터뷰',  sent: 214,  open: 95, category: '면접', active: true },
    { id: 'interview-2nd',  name: '2차 인터뷰 초대',    stage: '인터뷰', sent: 92,   open: 96, category: '면접' },
    { id: 'offer',          name: '오퍼 제안',           stage: '오퍼',   sent: 38,   open: 100, category: '오퍼' },
    { id: 'offer-accept',   name: '오퍼 수락 확인',      stage: '오퍼',   sent: 31,   open: 100, category: '오퍼' },
    { id: 'reject-final',   name: '최종 불합격 안내',    stage: '최종',   sent: 54,   open: 82, category: '결과' },
  ];

  return (
    <div style={{ display:'grid', gridTemplateColumns: '300px 1fr', height:'100%', minHeight: 0 }}>

      {/* Sidebar list */}
      <aside style={{ borderRight: '1px solid var(--border-default)', background: 'var(--neutral-25)', overflow:'auto' }}>
        <div style={{ padding: 16, borderBottom: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: 15, fontWeight: 700, letterSpacing:'-0.01em' }}>이메일 템플릿</div>
          <div style={{ fontSize: 11.5, color:'var(--fg-3)', marginTop: 2 }}>{templates.length}개 · 이번 달 발송 {templates.reduce((s,t)=>s+t.sent,0).toLocaleString()}건</div>
          <Button variant="primary" size="sm" icon="plus" style={{ width:'100%', justifyContent:'center', marginTop: 12 }}>새 템플릿</Button>
        </div>
        <div style={{ padding: 8 }}>
          {['지원','서류','면접','오퍼','결과'].map(cat => {
            const items = templates.filter(t => t.category === cat);
            return (
              <div key={cat} style={{ marginBottom: 10 }}>
                <div style={{ padding:'6px 8px', fontSize: 10.5, color:'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>{cat}</div>
                {items.map(t => (
                  <div key={t.id} onClick={()=>setSelected(t.id)} style={{
                    padding: '10px 10px', borderRadius: 8, cursor:'pointer', marginBottom: 2,
                    background: selected === t.id ? 'var(--brand-50)' : 'transparent',
                    display:'grid', gridTemplateColumns:'1fr auto', alignItems:'center', gap: 8,
                  }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: selected === t.id ? 600 : 500, color: selected === t.id ? 'var(--brand-700)' : 'var(--fg-1)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{t.name}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 2, fontFamily:'var(--font-mono)' }}>{t.sent.toLocaleString()} sent · {t.open}% open</div>
                    </div>
                    {t.stage === '자동' && <Badge tone="brand">AUTO</Badge>}
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      </aside>

      {/* Editor + preview */}
      <div style={{ display:'grid', gridTemplateRows:'auto 1fr', minHeight: 0, overflow:'hidden' }}>
        {/* Toolbar */}
        <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--border-default)', display:'flex', alignItems:'center', gap: 12, background: 'var(--neutral-0)' }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 600, letterSpacing:'-0.01em', whiteSpace:'nowrap' }}>1차 인터뷰 초대</div>
            <div style={{ fontSize: 11.5, color:'var(--fg-3)', whiteSpace:'nowrap' }}>마지막 수정 2026.08.02 · 한지현</div>
          </div>
          <div style={{ flex: 1 }}/>
          <span style={{ padding:'4px 10px', background:'var(--success-50)', color:'var(--success-700)', fontSize: 11.5, fontWeight: 600, borderRadius: 999, display:'inline-flex', alignItems:'center', gap: 5, whiteSpace:'nowrap' }}>
            <span style={{ width: 6, height: 6, background:'var(--success-500)', borderRadius: 999 }}/>
            활성
          </span>
          <Button variant="secondary" size="sm" icon="eye">테스트 발송</Button>
          <Button variant="ai" size="sm" icon="sparkles">AI로 다시 작성</Button>
          <Button variant="primary" size="sm">저장</Button>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', minHeight: 0, overflow:'hidden' }}>
          {/* Editor */}
          <div style={{ overflow:'auto', padding: 24, background: 'var(--neutral-0)', borderRight: '1px solid var(--border-default)' }}>
            <SectionLabel>메타</SectionLabel>
            <FieldRow label="발신자">
              <input defaultValue="한지현 · 채용팀 <recruiting@company.com>" style={inputStyle}/>
            </FieldRow>
            <FieldRow label="답장 받을 곳">
              <input defaultValue="recruiting@company.com" style={inputStyle}/>
            </FieldRow>
            <FieldRow label="제목">
              <input defaultValue="[{{company}}] {{position}} 포지션 1차 인터뷰 안내" style={{...inputStyle, fontFamily:'var(--font-mono)', fontSize: 12.5}}/>
            </FieldRow>

            <SectionLabel style={{ marginTop: 24 }}>본문</SectionLabel>

            {/* Editor toolbar */}
            <div style={{ display:'flex', gap: 2, padding: 4, background:'var(--neutral-50)', border:'1px solid var(--border-default)', borderRadius: '8px 8px 0 0', borderBottom:'none' }}>
              {['bold','italic','underline','list','list-ordered','link','image','code'].map(i => (
                <button key={i} style={{ width: 28, height: 28, background:'transparent', border:'none', borderRadius: 4, cursor:'pointer', color:'var(--fg-2)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name={i} size={14}/>
                </button>
              ))}
              <div style={{ flex: 1 }}/>
              <button style={{ padding:'4px 10px', background:'var(--violet-50)', color:'var(--violet-700)', border:'1px solid var(--violet-100)', borderRadius: 6, cursor:'pointer', fontSize: 11.5, fontWeight: 600, display:'inline-flex', alignItems:'center', gap: 4, whiteSpace:'nowrap' }}>
                <AISparkle size={11}/>
                톤 조정
              </button>
            </div>
            <textarea
              defaultValue={emailBody}
              style={{
                width: '100%', minHeight: 320,
                padding: 14, fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.6,
                border: '1px solid var(--border-default)', borderTop:'none',
                borderRadius: '0 0 8px 8px', resize: 'vertical', outline: 'none',
                background:'var(--neutral-0)', color: 'var(--fg-1)',
              }}
            />

            <SectionLabel style={{ marginTop: 24 }}>사용 가능한 변수</SectionLabel>
            <div style={{ display:'flex', gap: 6, flexWrap:'wrap' }}>
              {[
                ['{{candidate_name}}', '지원자 이름'],
                ['{{position}}', '포지션'],
                ['{{interview_date}}', '면접 일시'],
                ['{{interviewer}}', '면접관'],
                ['{{meeting_link}}', '화상 링크'],
                ['{{recruiter_name}}', '담당자'],
                ['{{company}}', '회사명'],
                ['{{location}}', '장소'],
              ].map(([v, desc]) => (
                <span key={v} title={desc} style={{
                  padding:'4px 10px', background:'var(--neutral-100)', color:'var(--fg-2)',
                  border:'1px solid var(--border-default)', borderRadius: 999,
                  fontSize: 11.5, fontFamily:'var(--font-mono)', cursor:'pointer', whiteSpace:'nowrap',
                }}>{v}</span>
              ))}
            </div>
          </div>

          {/* Preview */}
          <div style={{ overflow:'auto', padding: 24, background: 'var(--neutral-50)' }}>
            <SectionLabel>미리보기 · Preview</SectionLabel>
            <div style={{ background:'var(--neutral-0)', border:'1px solid var(--border-default)', borderRadius: 12, overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
              <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)' }}>
                <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                  <span style={{ width: 34, height: 34, borderRadius: 999, background:'#DBE5FF', color:'#17357F', display:'inline-flex', alignItems:'center', justifyContent:'center', fontWeight: 600, fontSize: 13 }}>한</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, color:'var(--fg-3)' }}>보낸 사람: 한지현 · 채용팀 &lt;recruiting@company.com&gt;</div>
                    <div style={{ fontSize: 12, color:'var(--fg-3)', marginTop: 2 }}>받는 사람: 문서연 &lt;seoyeon@example.com&gt;</div>
                  </div>
                  <span style={{ fontSize: 11, color:'var(--fg-3)', whiteSpace:'nowrap' }}>2026.08.06 14:32</span>
                </div>
                <div style={{ fontSize: 15, fontWeight: 600, marginTop: 10 }}>[Career Intelligence Suite] Sr. Frontend Engineer 포지션 1차 인터뷰 안내</div>
              </div>
              <div style={{ padding: '20px 22px', fontSize: 13.5, lineHeight: 1.7, color: 'var(--fg-1)' }}>
                <p style={{ margin: '0 0 14px' }}>안녕하세요, <b>문서연</b>님.</p>
                <p style={{ margin: '0 0 14px' }}>Career Intelligence Suite 채용팀입니다. <b>Sr. Frontend Engineer</b> 포지션에 지원해주셔서 감사드려요. 서류 검토 결과, <b style={{color:'var(--brand-600)'}}>1차 인터뷰</b>로 초대드리고 싶습니다.</p>

                <div style={{ padding: 14, background: 'var(--brand-50)', border: '1px solid var(--brand-100)', borderRadius: 10, margin: '14px 0' }}>
                  <PreviewInfo label="일시" value="2026.08.14 (금) 14:00 – 15:00"/>
                  <PreviewInfo label="방식" value="화상 인터뷰 (Google Meet)"/>
                  <PreviewInfo label="면접관" value="박준영 · 정예린"/>
                  <PreviewInfo label="예상 시간" value="60분"/>
                </div>

                <p style={{ margin: '0 0 14px' }}>아래 링크에서 <b>가능한 시간을 선택</b>해주시면, 면접관 캘린더와 자동 매칭되어 확정 이메일이 발송돼요.</p>

                <div style={{ margin: '18px 0' }}>
                  <a style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'11px 18px', background:'var(--brand-500)', color:'#fff', borderRadius: 8, fontWeight: 600, fontSize: 13, textDecoration:'none' }}>
                    <Icon name="calendar" size={14}/>
                    면접 시간 선택하기
                  </a>
                </div>

                <p style={{ margin: '20px 0 0', color:'var(--fg-2)', fontSize: 13 }}>궁금한 점이 있으시면 언제든 회신 부탁드려요.</p>
                <p style={{ margin: '4px 0 0', color:'var(--fg-2)', fontSize: 13 }}>감사합니다.<br/>한지현 드림</p>
              </div>
            </div>

            {/* Stats bar */}
            <div style={{ marginTop: 18, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10 }}>
              <PreviewStat label="발송" value="214건"/>
              <PreviewStat label="열람률" value="95%" delta="+3%"/>
              <PreviewStat label="응답률" value="87%" delta="+5%"/>
              <PreviewStat label="평균 응답" value="4.2시간" delta="-1.1h"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const inputStyle = {
  width: '100%', padding: '9px 12px',
  border: '1px solid var(--border-strong)', borderRadius: 8,
  fontSize: 13, fontFamily: 'var(--font-sans)',
  background: 'var(--neutral-0)', outline: 'none',
};

const emailBody = `안녕하세요, {{candidate_name}}님.

Career Intelligence Suite 채용팀입니다. {{position}} 포지션에 지원해주셔서 감사드려요.

서류 검토 결과, 1차 인터뷰로 초대드리고 싶습니다.

- 일시: {{interview_date}}
- 방식: 화상 인터뷰 (Google Meet)
- 면접관: {{interviewer}}
- 예상 시간: 60분

아래 링크에서 가능한 시간을 선택해주시면, 면접관 캘린더와 자동 매칭되어 확정 이메일이 발송돼요.

>> 면접 시간 선택하기 << ({{meeting_link}})

궁금한 점이 있으시면 언제든 회신 부탁드려요.

감사합니다.
{{recruiter_name}} 드림`;

function SectionLabel({ children, style = {} }) {
  return <div style={{ fontSize: 10.5, color:'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500, marginBottom: 10, ...style }}>{children}</div>;
}
function FieldRow({ label, children }) {
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={{ fontSize: 11.5, color:'var(--fg-3)', marginBottom: 5 }}>{label}</div>
      {children}
    </div>
  );
}
function PreviewInfo({ label, value }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'60px 1fr', gap: 8, padding:'3px 0', fontSize: 13 }}>
      <span style={{ color:'var(--fg-3)' }}>{label}</span>
      <span style={{ color:'var(--fg-1)', fontWeight: 500 }}>{value}</span>
    </div>
  );
}
function PreviewStat({ label, value, delta }) {
  return (
    <div style={{ padding: 10, background:'var(--neutral-0)', border:'1px solid var(--border-default)', borderRadius: 8 }}>
      <div style={{ fontSize: 10.5, color:'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>{label}</div>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', gap: 4, marginTop: 4 }}>
        <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 17, fontWeight: 700, letterSpacing:'-0.02em' }}>{value}</span>
        {delta && <span style={{ fontSize: 11, color:'var(--success-600)', fontWeight: 600, whiteSpace:'nowrap' }}>{delta}</span>}
      </div>
    </div>
  );
}

window.EmailTemplates = EmailTemplates;