const REVIEWS = [
  { name: '김 모 씨', detail: '국민대 · 시각디자인 · 2025 졸업', quote: '밤새 고민하던 포트폴리오 구성을 세 번의 미팅만에 정리받았어요. 제 작업을 저보다 더 잘 이해해주셨다는 느낌.', rating: 5, tag: '학생 지원플랜', coral: true },
  { name: '이 모 씨', detail: '이직 준비 · 3년차 UX 디자이너', quote: '이직용 포트폴리오라 고민이 많았는데, 케이스 스터디 구조부터 복기해주셔서 서류 100% 통과했습니다.', rating: 5, tag: 'Type A. 원페이지' },
  { name: '박 모 씨', detail: '프리랜서 일러스트레이터', quote: '그냥 갤러리가 아니라, 제 그림을 "읽게" 만드는 페이지가 필요했는데 딱 그걸 해주셨어요.', rating: 5, tag: 'Type B. 브랜드' },
  { name: '최 모 씨', detail: '한예종 · 작곡 전공', quote: '음원 embed까지 자연스럽게 녹아드는 디자인을 찾기가 어려웠는데, 결과물이 너무 좋아서 교수님들께도 호평 받았어요.', rating: 5, tag: 'Type A. 원페이지' },
  { name: '정 모 씨', detail: '홍익대 · 회화 · 개인전 준비', quote: '온라인 도록 개념으로 의뢰드렸는데, 오프라인 전시 자료로도 그대로 써도 될 만큼의 퀄리티가 나왔습니다.', rating: 5, tag: '학생 지원플랜', coral: true },
  { name: '한 모 씨', detail: '영상 프리랜서 · 6년차', quote: '릴 영상 임베드가 모바일에서도 깔끔하게 재생되는 게 중요했는데, 기술적인 부분까지 세심하게 챙겨주셨어요.', rating: 5, tag: 'Type C. 시스템' },
];

function ReviewCard({ r }) {
  const dark = r.coral;
  return (
    <article style={{
      background: dark ? 'var(--coral)' : 'var(--bg)',
      color: dark ? 'var(--cream)' : 'var(--ink)',
      border: dark ? 'none' : '1px solid var(--line)',
      padding: 36, display: 'flex', flexDirection: 'column', minHeight: 360,
      height: '100%',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
        <div className="serif" style={{ fontSize: 52, lineHeight: 0.8, opacity: dark ? 0.9 : 1 }}>"</div>
        <div style={{ display: 'flex', gap: 2 }}>
          {Array.from({ length: r.rating }).map((_, i) => (
            <span key={i} style={{ color: dark ? 'var(--cream)' : 'var(--coral)', fontSize: 14 }}>★</span>
          ))}
        </div>
      </div>
      <p style={{ fontSize: 17, lineHeight: 1.55, fontWeight: 400, flex: 1, letterSpacing: '-0.01em' }}>
        {r.quote}
      </p>
      <div style={{
        marginTop: 30, paddingTop: 20,
        borderTop: dark ? '1px solid rgba(255,248,238,0.25)' : '1px dashed var(--line)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{r.name}</div>
          <div className="eng" style={{ fontSize: 11, opacity: 0.7, marginTop: 3 }}>{r.detail}</div>
        </div>
        <span className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{r.tag}</span>
      </div>
    </article>
  );
}

function Reviews() {
  const containerRef = React.useRef(null);
  const swiperRef = React.useRef(null);

  React.useEffect(() => {
    swiperRef.current = new Swiper(containerRef.current, {
      loop: true,
      autoplay: { delay: 2800, disableOnInteraction: false, pauseOnMouseEnter: true },
      speed: 700,
      slidesPerView: 'auto',
      spaceBetween: 28,
      grabCursor: true,
    });
    return () => { swiperRef.current?.destroy(true, true); };
  }, []);

  const prev = () => swiperRef.current?.slidePrev();
  const next = () => swiperRef.current?.slideNext();

  return (
    <section style={{ paddingTop: 100, paddingBottom: 100, background: 'var(--bg-warm)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
      <div className="max" style={{ paddingBottom: 40 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16 }}>§ 02 — Client Reviews</div>
            <h2 className="serif" style={{ fontSize: 72, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              받은 <em>편지함.</em>
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', marginTop: 18, maxWidth: 520 }}>
              41명의 창작자가 남긴 진심. 각자의 속도, 각자의 언어로 쓰여진 후기입니다.
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ textAlign: 'right' }}>
              <div className="serif" style={{ fontSize: 44, lineHeight: 1, letterSpacing: '-0.02em' }}>4.96<span style={{ fontSize: 20, color: 'var(--muted)' }}>/5.0</span></div>
              <div className="eng" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>based on 412 reviews</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={prev} style={{ ...arrowBtn2 }}>←</button>
              <button onClick={next} style={{ ...arrowBtn2 }}>→</button>
            </div>
          </div>
        </div>
      </div>

      <div ref={containerRef} className="swiper" style={{ paddingLeft: 56, paddingRight: 56, overflow: 'hidden' }}>
        <div className="swiper-wrapper" style={{ alignItems: 'stretch' }}>
          {REVIEWS.map((r, i) => (
            <div key={i} className="swiper-slide" style={{ width: 480, height: 'auto' }}>
              <ReviewCard r={r} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const arrowBtn2 = {
  width: 44, height: 44, borderRadius: '50%',
  border: '1px solid var(--line)', fontSize: 16,
  background: 'var(--bg)', color: 'var(--ink)',
};

window.Reviews = Reviews;