const OPTIONS = [
  { id: 1, ko: '도메인 및 초기 보안 (SSL) 세팅', en: 'Domain & SSL Setup', price: '11', unit: '만 원', desc: '도메인 등록부터 HTTPS 인증서까지 일괄 설정.' },
  { id: 2, ko: 'SEO 검색 엔진 최적화', en: 'Search Engine Optimization', price: '55', unit: '만 원', desc: '구글·네이버 기준 메타·스키마·sitemap 구성.' },
  { id: 3, ko: '맞춤형 로고 (BI) 제작', en: 'Custom Logo / BI Design', price: '88', unit: '만 원', from: '~', desc: '로고 1안 + 컬러·타이포 시스템 포함.' },
  { id: 4, ko: '월 유지보수 (업데이트/관리)', en: 'Monthly Maintenance', price: '3.3', unit: '만 원', from: '/월~', desc: '콘텐츠 교체, 기술 업데이트, 백업 관리.' },
];

function Options() {
  return (
    <section style={{ paddingTop: 120, paddingBottom: 140 }}>
      <div className="max">
        <div style={{ marginBottom: 50, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16 }}>§ 07 — Add-On Options</div>
            <h2 className="serif" style={{ fontSize: 64, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              필요한 것만, <em>골라담기.</em>
            </h2>
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>OPTIONAL · 4 ITEMS</div>
        </div>

        <div style={{ border: '1px solid var(--line)' }}>
          {OPTIONS.map((o, i) => (
            <div key={o.id} style={{
              display: 'grid', gridTemplateColumns: '60px 1fr 280px 160px 60px',
              alignItems: 'center', padding: '28px 32px', gap: 24,
              borderBottom: i < OPTIONS.length - 1 ? '1px solid var(--line-soft)' : 'none',
              transition: 'background .2s ease',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-warm)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>0{o.id}</div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 4 }}>{o.ko}</div>
                <div className="eng" style={{ fontSize: 12, color: 'var(--muted)' }}>{o.en}</div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{o.desc}</div>
              <div style={{ textAlign: 'right' }}>
                <span className="serif" style={{ fontSize: 36, letterSpacing: '-0.02em' }}>{o.price}</span>
                <span style={{ fontSize: 13, marginLeft: 2 }}>{o.unit}</span>
                {o.from && <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 4 }}>{o.from}</span>}
              </div>
              <button style={{
                width: 40, height: 40, borderRadius: '50%',
                border: '1px solid var(--line)', fontSize: 16,
                color: 'var(--ink-soft)',
              }}>+</button>
            </div>
          ))}
        </div>

        {/* CTA banner */}
        <div style={{
          marginTop: 80, padding: '80px 60px',
          background: 'var(--coral)', color: 'var(--cream)',
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60, alignItems: 'end',
        }}>
          <div>
            <div className="kicker" style={{ color: 'rgba(255,248,238,0.7)', marginBottom: 20 }}>Let's Begin</div>
            <div className="serif" style={{ fontSize: 88, lineHeight: 0.95, letterSpacing: '-0.035em' }}>
              당신이 쌓아온<br />그 시간을,<br /><em>선명하게.</em>
            </div>
          </div>
          <div>
            <p style={{ fontSize: 16, lineHeight: 1.6, marginBottom: 32, opacity: 0.9 }}>
              첫 상담은 언제나 무료. 부담 없이 작업물 한 장만 들고 오셔도 괜찮아요.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button style={{ padding: '16px 26px', borderRadius: 999, background: 'var(--ink)', color: 'var(--cream)', fontSize: 15, fontWeight: 500 }}>
                무료 상담 신청 →
              </button>
              <button style={{ padding: '16px 26px', borderRadius: 999, border: '1px solid rgba(255,248,238,0.4)', color: 'var(--cream)', fontSize: 15 }}>
                카카오톡으로 문의
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Options = Options;