/* global React, Icon */

// Minimal TIWIB-style hero: thin banner, strong typography, no big cards
function Hero() {
  return (
    <section style={{ background: '#fff', borderBottom: '1px solid #eee' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 20px 88px', textAlign: 'center' }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px, 5vw, 52px)', margin: 0, letterSpacing: '-0.02em', color: '#111', lineHeight: 1.08 }}>
          가성비 <span style={{ color: 'var(--coral)' }}>월척템</span>만 모음.
        </h1>
        <p style={{ fontSize: 15, lineHeight: 1.6, margin: '14px auto 0', maxWidth: 640, color: '#666' }}>
          매일 쏟아지는 낚시용품 중에서 진짜 쓸 만한 템만 골라드려요. 링크 하나로 바로 낚으세요.
        </p>
      </div>
    </section>
  );
}

function SectionHeader({ title, caption, count }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '36px 0 20px', gap: 16, flexWrap: 'wrap', borderBottom: '1px solid #eee', paddingBottom: 14 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <h2 style={{ margin: 0, fontSize: 22, fontFamily: 'var(--font-display)', color: '#111' }}>{title}</h2>
        {typeof count === 'number' && <span style={{ color: '#999', fontSize: 13, fontFamily: 'var(--font-mono)' }}>{count}개</span>}
      </div>
      {caption && <span style={{ color: '#999', fontSize: 13 }}>{caption}</span>}
    </div>
  );
}

function GuideCard({ guide }) {
  return (
    <a href="#" onClick={(e) => e.preventDefault()}
       style={{ display: 'block', textDecoration: 'none', color: '#111', background: '#fff', border: '1px solid #eee', padding: '22px 20px', transition: 'border-color 140ms ease' }}
       onMouseEnter={(e) => e.currentTarget.style.borderColor = '#111'}
       onMouseLeave={(e) => e.currentTarget.style.borderColor = '#eee'}>
      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--coral)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>가이드 #{guide.num}</span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, lineHeight: 1.3, margin: '8px 0 8px' }}>{guide.title}</h3>
      <p style={{ margin: 0, fontSize: 13, color: '#666', lineHeight: 1.55 }}>{guide.sub}</p>
      <div style={{ marginTop: 14, fontSize: 12, color: '#999' }}>{guide.items}개 템 · {guide.readTime}분 읽기</div>
    </a>
  );
}

Object.assign(window, { Hero, SectionHeader, GuideCard });