function linkTo(href) {
  window.location.href = href;
}


function Hero() {
  const [hoveredItem, setHoveredItem] = React.useState(null);

  const getColumns = () => {
    if (hoveredItem === null) return '1fr 1fr 1fr';
    return [0, 1, 2].map(i => i === hoveredItem ? '1.3fr' : '1fr').join(' ');
  };

  return (
    <section id="top" style={{ paddingTop: 140, paddingBottom: 100, position: 'relative', overflow: 'hidden' }}>
      <div className="max" style={{ position: 'relative' }}>

        {/* meta row */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 80 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="chip"><span className="chip-dot"></span>2026 Spring Intake</span>
            <span className="kicker">Est. 2024 — Seoul</span>
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>
            N°024 &nbsp;·&nbsp; 미대인을 위한 포트폴리오
          </div>
        </div>

        {/* headline */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 80, alignItems: 'end' }}>
          <div>
            <div className="kicker" style={{ marginBottom: 22 }}>Portfolio Atelier — for Creators</div>
            <h1 className="serif" style={{
              fontSize: 98, lineHeight: 1.0, letterSpacing: '-0.035em',
              marginBottom: 38,
            }}>
              재능은 당신이,<br />
              <span style={{ color: 'var(--coral)' }}>날개는</span> <em style={{ fontFamily: 'inherit' }}>우리가.</em>
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 560, marginBottom: 40 }}>
              미대·음대·공연 전공자, 디자이너, 영상 크리에이터를 위한
              <br />포트폴리오 대행 제작 서비스. 작품은 당신의 것, 구성은 우리가.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button className="btn-primary" onClick={() => window.location.href = 'consultation.html'}>
                무료 상담 신청하기 <span>→</span>
              </button>
            </div>
          </div>

          {/* right card */}
          <div style={{
            border: '1px solid var(--line)', background: 'var(--bg-warm)',
            padding: 28, position: 'relative',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
              <span className="kicker">This Month</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--coral)' }}>● LIVE</span>
            </div>
            <div style={{ display: 'grid', gap: 16 }}>
              {[
                { n: '41', l: '제작 완료', e: 'completed' },
                { n: '96%', l: '서류 통과율', e: 'pass rate' },
                { n: '14일', l: '평균 제작', e: 'avg. days' },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, borderBottom: i < 2 ? '1px dashed var(--line)' : 'none', paddingBottom: i < 2 ? 14 : 0 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap' }}>{s.l}</div>
                    <div className="eng" style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2 }}>{s.e}</div>
                  </div>
                  <div className="serif" style={{ fontSize: 40, color: 'var(--ink)', letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{s.n}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* bottom billboard */}
        <div style={{ marginTop: 90, display: 'grid', gridTemplateColumns: getColumns(), gap: 24, height: 340, transition: 'grid-template-columns 0.4s ease' }}>
          <div
            onClick={() => linkTo("lijiancheng")}
            onMouseEnter={() => setHoveredItem(0)}
            onMouseLeave={() => setHoveredItem(null)}
            style={{ position: 'relative', padding: 24, backgroundImage: 'url("src/img/potfolio1.webp")', backgroundSize: 'cover', backgroundPosition: 'left', cursor: 'pointer' }}
          >
            <div className="ph-stripe" style={{ position: 'absolute', inset: 0 }}></div>
            <div className="mono" style={{ position: 'absolute', top: 16, left: 20, fontSize: 10, color: 'var(--ink-soft)' }}>FEATURED · 01</div>
            <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24 }}>
              <div className="kicker" style={{ marginBottom: 8 }}>Graphic · PHOTO</div>
              <div className="serif" style={{ fontSize: 26, lineHeight: 1.1 }}>국민대 시각디자인<br />졸업 포트폴리오 — K.</div>
            </div>
          </div>
          <div
            onClick={() => linkTo("janghayoung")}
            onMouseEnter={() => setHoveredItem(1)}
            onMouseLeave={() => setHoveredItem(null)}
            style={{ position: 'relative', padding: 24, backgroundImage: 'url("src/img/page_25.webp")', backgroundSize: 'cover', backgroundPosition: 'left', cursor: 'pointer' }}
          >
            <div className="ph-coral" style={{ position: 'absolute', inset: 0 }}></div>
            <div className="mono" style={{ position: 'absolute', top: 16, left: 20, fontSize: 10, color: 'var(--coral-ink)' }}>FEATURED · 02</div>
            <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24 }}>
              <div className="kicker" style={{ color: 'var(--coral-ink)', marginBottom: 8 }}>Marketing</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.1, color: 'var(--coral-ink)' }}>브렌딩 디자인<br />— 마케팅 · J.</div>
            </div>
          </div>
          <div
            onClick={() => linkTo("kimlihyang")}
            onMouseEnter={() => setHoveredItem(2)}
            onMouseLeave={() => setHoveredItem(null)}
            style={{ position: 'relative', padding: 24, backgroundImage: 'url("src/img/sungsu.png")', backgroundSize: 'cover', backgroundPosition: 'left', cursor: 'pointer' }}
          >
            <div className="ph-ink" style={{ position: 'absolute', inset: 0 }}></div>
            <div className="mono" style={{ position: 'absolute', top: 16, left: 20, fontSize: 10, color: 'rgba(255,255,255,0.7)' }}>FEATURED · 03</div>
            <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24 }}>
              <div className="kicker" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>Poster · Illustration</div>
              <div className="serif" style={{  color: 'rgba(255,255,255,0.8)',fontSize: 22, lineHeight: 1.1 }}>그레픽 디자인<br />캐릭터 — S.</div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}
window.Hero = Hero;