// Testimonials — Hero 직후 스트립 + Pricing 직전 스포트라이트
// 데이터: 파란영 (메인/스포트라이트) + 4인 서브

const TESTIMONIALS = {
  // 메인 — Pricing 직전 스포트라이트용
  main: {
    name: '파란영',
    role: '웹소설 작가',
    meta: '웹툰화 누적 조회수 1,800만+',
    works: [
      '스킬빨로 레벨업 (2020)',
      '판타지 세계 속 바바리안으로 살아가기 (2024)',
      '소드마스터의 환생 (2019)',
      '0.0000001%의 마왕님 (2019)',
      '던전에서 살아온 남자 (2017)',
      '정점이 돌아왔다 (2016)',
    ],
    short: '200화 내용을 완벽히 기억',
    quote: [
      { p: '200화가 넘는 내용을 완벽하게 기억하고 있어서 다른 AI와 달리 집필에 상당한 도움이 됩니다.' },
      { p: '잊고 있던 떡밥이나 아이템, 등장 인물들에 대해서 정리해주기도 하여 앞으로의 전개와 떡밥 회수에도 도움을 받을 수 있습니다.' },
      { p: '한 번쯤 사용해보시면 좋을 것 같습니다.' },
    ],
    // 강조할 구절 (메인 헤드라인용)
    highlight: ['200화가 넘는 내용', '앞으로의 전개와 떡밥 회수'],
  },
  // 서브 — Hero 직후 스트립용
  strip: [
    {
      name: '커피수염',
      role: '대표작 「대항해시대에서 살아남기」, 「청스 1세가 되었다」',
      quote: '백지를 마주했을 때의 막막함이 없어진다. 유능한 편집자와 실시간으로 대화하며 작업하는 것 같다. 슬럼프가 사라졌다!',
      short: '슬럼프가 사라졌다',
    },
    {
      name: '제나토인',
      role: '웹소설 작가 (판타지/호러), 베타테스터',
      quote: '막막할 때 주제 관련 대화로 물꼬를 트고, 다음 작업까지 안내해줘서 흐름이 끊기지 않았다. 창작자의 의무를 상기시켜주는 점도 좋았고, 기대 이상으로 실용적인 글쓰기 도구였다.',
      short: '흐름이 끊기지 않았다',
    },
    {
      name: '써니윤',
      role: '웹소설 작가 (현대 로맨스), 베타테스터',
      quote: '로맨스는 결국 캐릭터 싸움인데 캐릭터를 성격부터 감정 반응까지 세세하게 잡을 수 있어서 좋았다. 이미지 생성으로 인물 분위기를 바로 떠올릴 수 있어 감정선이 훨씬 안정됐다.',
      short: '감정선이 훨씬 안정됐다',
    },
    {
      name: '홍민',
      role: '웹소설 작가 (현대 로맨스), 베타테스터',
      quote: '"상태창"은 웹소설 세계에 지식이 전무한 F급인 당신이 웹소설 작가가 될 수 있도록 이끌어주는 친절한 안내자이다. 트리트먼트, 시놉시스가 뭔지 모르는 당신을 위해 "상태창"이 있다.',
      short: '친절한 안내자',
    },
  ],
};

// ─── Hero 직후 — 4인 스트립 ──────────────────
function TestimonialStrip({ accent }) {
  return (
    <section className="px-6 py-16 md:py-20 border-b border-white/5" data-screen-label="02 Testimonial Strip">
      <div className="max-w-6xl mx-auto">
        <Reveal>
          <div className="flex items-center gap-3 mb-10">
            <span className="text-[10px] font-mono tracking-widest text-neutral-500">02</span>
            <div className="h-px flex-1 bg-white/10"/>
            <span className="text-[11px] uppercase tracking-widest text-neutral-400">베타테스터 후기</span>
          </div>
        </Reveal>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {TESTIMONIALS.strip.map((t, i) => (
            <Reveal key={t.name} delay={i * 80}>
              <figure className="h-full p-6 rounded-2xl border border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04] transition flex flex-col">
                <div className="text-3xl leading-none mb-3" style={{color: accent, fontFamily:'Georgia, serif'}}>“</div>
                <div className="text-[15px] font-semibold text-white leading-snug mb-3" style={{textWrap:'balance'}}>
                  {t.short}
                </div>
                <blockquote className="text-[13px] text-neutral-400 leading-relaxed mb-5 flex-1" style={{textWrap:'pretty'}}>
                  {t.quote}
                </blockquote>
                <figcaption className="pt-4 border-t border-white/5">
                  <div className="text-sm font-semibold text-white">{t.name}</div>
                  <div className="text-[11px] text-neutral-500 leading-relaxed mt-0.5">{t.role}</div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Pricing 직전 — 파란영 스포트라이트 (에디토리얼) ────────
function TestimonialSpotlight({ accent }) {
  const m = TESTIMONIALS.main;
  // 작품명/연도 분리
  const works = m.works.map(w => {
    const match = w.match(/^(.+?)\s*\((\d{4})\)$/);
    return match ? { title: match[1], year: match[2] } : { title: w, year: '' };
  }).sort((a,b) => (b.year||'').localeCompare(a.year||''));

  return (
    <section className="relative px-6 py-28 md:py-40 overflow-hidden" data-screen-label="10 Testimonial Spotlight">
      {/* 배경 장식 따옴표 */}
      <div aria-hidden="true" className="absolute select-none pointer-events-none font-serif leading-none"
           style={{
             top: '40px',
             left: '-20px',
             fontSize: 'clamp(280px, 40vw, 560px)',
             color: accent,
             opacity: 0.05,
             fontFamily: 'Georgia, "Times New Roman", serif',
           }}>“</div>

      <div className="relative max-w-6xl mx-auto">
        {/* 에디토리얼 마커 */}
        <Reveal>
          <div className="flex items-center gap-3 mb-14 md:mb-20">
            <span className="text-[10px] font-mono tracking-[0.2em] text-neutral-500">10</span>
            <div className="h-px w-8 bg-white/20"/>
            <span className="text-[11px] uppercase tracking-[0.25em] text-neutral-400">Endorsement</span>
          </div>
        </Reveal>

        <div className="grid md:grid-cols-[1fr_320px] gap-12 md:gap-20 items-start">
          {/* 왼쪽: 인용 — 박스 없음, 세로 라인만 */}
          <Reveal>
            <div className="border-l-2 pl-6 md:pl-10" style={{borderColor: accent}}>
              {/* 리드 (큰 문장) */}
              <p className="text-2xl md:text-[32px] font-bold text-white leading-[1.4] mb-8 tracking-tight" style={{textWrap:'balance'}}>
                <span style={{
                  background: `linear-gradient(transparent 62%, ${accent}40 62%, ${accent}40 92%, transparent 92%)`,
                  padding: '0 2px',
                }}>200화가 넘는 내용</span>을 완벽하게 기억하고 있어서, 다른 AI와 달리 집필에 상당한 도움이 됩니다.
              </p>
              {/* 서포트 본문 */}
              <p className="text-[17px] md:text-lg text-neutral-300 leading-[1.8] mb-6" style={{textWrap:'pretty'}}>
                잊고 있던 떡밥이나 아이템, 등장 인물들에 대해서 정리해주기도 하여{' '}
                <span className="text-white font-semibold" style={{borderBottom: `1px solid ${accent}`}}>앞으로의 전개와 떡밥 회수</span>에도 도움을 받을 수 있습니다.
              </p>
              {/* 클로징 (이탤릭, 작게) */}
              <p className="text-base md:text-[17px] text-neutral-400 italic leading-relaxed" style={{fontFamily: 'Georgia, serif'}}>
                — 한 번쯤 사용해보시면 좋을 것 같습니다.
              </p>
            </div>
          </Reveal>

          {/* 오른쪽: 프로필 카드 */}
          <Reveal delay={150}>
            <div className="md:sticky md:top-28">
              {/* 아바타 + 이름 */}
              <div className="flex items-start gap-4 mb-6">
                <div className="w-14 h-14 rounded-full flex items-center justify-center text-xl font-bold shrink-0"
                     style={{
                       background: `linear-gradient(135deg, ${accent}, ${accent}88)`,
                       color: '#0a0a0f',
                     }}>
                  파
                </div>
                <div className="min-w-0">
                  <div className="text-[10px] font-mono tracking-[0.2em] text-neutral-500 mb-1">AUTHOR</div>
                  <h3 className="text-2xl font-bold tracking-tight leading-tight">{m.name}</h3>
                  <div className="text-xs text-neutral-400 mt-0.5">{m.role}</div>
                </div>
              </div>

              {/* 뱃지 */}
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md border mb-8"
                   style={{borderColor: `${accent}40`, background: `${accent}0a`}}>
                <span className="w-1.5 h-1.5 rounded-full" style={{background: accent}}/>
                <span className="text-xs font-semibold" style={{color: accent}}>웹툰화 누적 조회수 1,800만+</span>
              </div>

              {/* 작품 리스트 — 연도 컬럼 분리 */}
              <div className="pt-6 border-t border-white/10">
                <div className="text-[10px] font-mono tracking-[0.2em] text-neutral-500 mb-4">SELECTED WORKS</div>
                <ul className="space-y-2.5">
                  {works.map((w) => (
                    <li key={w.title} className="grid grid-cols-[42px_1fr] gap-3 text-[13px] leading-snug">
                      <span className="font-mono text-neutral-600 tabular-nums">{w.year}</span>
                      <span className="text-neutral-300">{w.title}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TestimonialStrip, TestimonialSpotlight, TESTIMONIALS });