const STEPS = [
  { n: '01', ko: '상담 신청', en: 'Consultation', desc: '전공·목적·제출 기한을 간단히 공유해주세요. 24시간 내 담당 디자이너가 배정됩니다.', detail: ['화상 또는 서면 상담 (40분)', '견적·범위·일정 협의', '무료'] },
  { n: '02', ko: '자료 전달', en: 'Asset Handoff', desc: '작품 이미지, 이력, 글 등 가공 전 원자료를 전달받습니다. 정리 안 되어도 괜찮아요.', detail: ['드라이브 / 드롭박스', '원본 해상도 권장', '누락 시 촬영 대행 가능'] },
  { n: '03', ko: '초안 확인', en: 'First Draft', desc: '구성안 + 시안 1세트. 여기서 톤, 구조, 타이포의 큰 방향을 함께 정합니다.', detail: ['7~10일 소요', '구조도 + 무드보드', '영상 미팅 1회 포함'] },
  { n: '04', ko: '수정', en: 'Revision', desc: '피드백을 반영해 2~3차 수정. 디테일을 만져 가장 ‘나다운’ 포트폴리오로 완성해 나갑니다.', detail: ['최대 3회 수정', '문구·레이아웃·이미지', '24~48h 이내 반영'] },
  { n: '05', ko: '완성', en: 'Delivery', desc: '도메인·호스팅 세팅과 함께 인도. 이후 1개월 무상 AS와 유지보수 플랜 안내.', detail: ['PDF + 웹 링크 전달', '1개월 무상 AS', '유지보수 별도'] },
];

function Process() {
  const [active, setActive] = React.useState(0);
  return (
    <section id="process" style={{ paddingTop: 140, paddingBottom: 100, background: 'var(--ink)', color: 'var(--bg)' }}>
      <div className="max">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 70 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16, color: 'rgba(255,255,255,0.5)' }}>§ 04 — How It Works</div>
            <h2 className="serif" style={{ fontSize: 72, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              <em>다섯 걸음.</em><br />단, 서두르지 않습니다.
            </h2>
          </div>
          <div style={{ maxWidth: 380, fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6 }}>
            평균 제작 기간 14일, 최장 30일. 작품의 결과 당신의 속도에 맞춰 진행합니다.
          </div>
        </div>

        {/* horizontal progress */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 2, marginBottom: 50 }}>
          {STEPS.map((s, i) => (
            <button key={s.n} onClick={() => setActive(i)} style={{
              textAlign: 'left', padding: '18px 18px 20px',
              background: active === i ? 'var(--coral)' : 'transparent',
              borderTop: '1px solid ' + (active === i ? 'var(--coral)' : 'rgba(255,255,255,0.2)'),
              color: active === i ? 'var(--cream)' : 'var(--bg)',
              transition: 'all .2s ease', cursor: 'pointer',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <span className="mono" style={{ fontSize: 11, opacity: 0.75 }}>STEP {s.n}</span>
                <span style={{ fontSize: 10, opacity: 0.6 }}>{active === i ? '●' : '○'}</span>
              </div>
              <div className="serif" style={{ fontSize: 24, letterSpacing: '-0.02em' }}>{s.ko}</div>
              <div className="eng" style={{ fontSize: 11, opacity: 0.65, marginTop: 4 }}>{s.en}</div>
            </button>
          ))}
        </div>

        {/* detail */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60, alignItems: 'start', paddingTop: 30, borderTop: '1px dashed rgba(255,255,255,0.2)' }}>
          <div>
            <div className="kicker" style={{ color: 'var(--coral)', marginBottom: 20 }}>Step {STEPS[active].n} · {STEPS[active].en}</div>
            <div className="serif" style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', marginBottom: 24 }}>
              {STEPS[active].ko}
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.82)', maxWidth: 560 }}>
              {STEPS[active].desc}
            </p>
          </div>
          <div>
            <div className="kicker" style={{ marginBottom: 16, color: 'rgba(255,255,255,0.5)' }}>Included</div>
            <ul style={{ listStyle: 'none' }}>
              {STEPS[active].detail.map((d, i) => (
                <li key={i} style={{ padding: '16px 0', borderBottom: '1px solid rgba(255,255,255,0.14)', display: 'flex', gap: 14, alignItems: 'center' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--coral)', width: 24 }}>0{i+1}</span>
                  <span style={{ fontSize: 15 }}>{d}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Process = Process;