// AgencyServices.jsx — agency 소개 페이지 ("FIVE CREATIVE SERVICES")
//   상단 라벨 + 큰 제목 + 부제 + 5개 카테고리 리스트.
//   톤앤매너는 Hero.jsx 와 통일 (Pretendard, #F2F2F2 배경, 빨강 dot #000, 1px 검은 라인).
//   AGENCY 폼(/CastingForm AGENCY 탭)으로 가는 CTA는 하단 우측.
const agencyStyles = {
  outer: {
    background: '#F2F2F2',
    width: '100%',
    boxSizing: 'border-box',
    minHeight: 'calc(100svh - 52px)',
  },
  wrap: {
    maxWidth: 1280, margin: '0 auto',
    width: '100%',
    boxSizing: 'border-box',
    padding: '40px 36px 60px',
  },
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: "'Pretendard'", fontSize: 11, fontWeight: 700,
    letterSpacing: '0.08em', textTransform: 'uppercase', color: '#000',
    margin: '0 0 28px',
  },
  eyebrowDot: {
    width: 6, height: 6, borderRadius: '50%', background: '#000',
  },
  title: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 'clamp(18px, 3.2vw, 58px)',
    letterSpacing: '-0.06em', textTransform: 'uppercase',
    color: '#000', lineHeight: 1.05,
    margin: '0 0 16px',
  },
  titleDot: { color: '#000' },
  desc: {
    fontFamily: 'Pretendard', fontWeight: 300,
    fontSize: 'clamp(13px, 1.4vw, 18px)',
    letterSpacing: '-0.06em', lineHeight: 1.7,
    color: '#555', margin: '0 0 64px',
    maxWidth: 720, wordBreak: 'keep-all',
  },
  listRule: { width: '100%', height: 1, background: '#000', margin: 0 },
  row: {
    display: 'grid',
    gridTemplateColumns: '60px 1fr 1.6fr',
    gap: 24, alignItems: 'center',
    padding: '26px 0',
    borderBottom: '1px solid rgba(0,0,0,0.15)',
  },
  rowNum: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 13,
    letterSpacing: '0.06em', color: '#000', lineHeight: 1,
  },
  rowTitleWrap: { display: 'flex', flexDirection: 'column', gap: 6 },
  rowEn: {
    fontFamily: "'Pretendard'", fontWeight: 800, fontSize: 18,
    letterSpacing: '0.02em', textTransform: 'uppercase', color: '#000', lineHeight: 1.2,
  },
  rowKo: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 12.5,
    letterSpacing: '-0.02em', color: '#888', lineHeight: 1.3,
  },
  rowDesc: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 13,
    letterSpacing: '-0.02em', color: '#555', lineHeight: 1.7,
    wordBreak: 'keep-all',
  },
  cta: {
    display: 'inline-flex', alignItems: 'center', gap: 14,
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 13,
    letterSpacing: '-0.02em', textTransform: 'uppercase',
    background: '#000', color: '#F2F2F2',
    border: '1px solid #000', padding: '20px 40px',
    cursor: 'pointer',
    transition: 'background .25s, color .25s',
  },
};

// ── 5개 카테고리 통합 데이터 (목록 + 상세 페이지 양쪽 공용) ──
// id 는 라우팅/상세 페이지 진입 키.
const AGENCY_CATEGORIES = [
  {
    id: 'brand_photography', no: '01',
    en: 'Brand Photography', ko: '브랜드 포토그래피',
    desc: '지면 광고 및 브랜드 룩북 촬영 등 고감도 시각 아이덴티티를 구축하는 전문 사진 촬영 서비스',
    lead: [
      '한 컷의 이미지가 브랜드의 무드와 메시지를 응축합니다.',
      '고감도 라이팅과 아트디렉션으로 브랜드의 시각 아이덴티티를 완성하는 전문 포토그래피 서비스입니다.',
    ],
    items: [
      { no: '01', name: '지면 광고',   desc: '잡지 · 옥외 · 지면 캠페인을 위한 키 비주얼 촬영. 브랜드 톤에 맞춘 라이팅으로 메인 컷을 완성합니다.' },
      { no: '02', name: '룩북 촬영',   desc: '시즌 컬렉션과 신제품을 일관된 무드로 담아내는 룩북 · 카탈로그 화보를 통합 디렉팅합니다.' },
      { no: '03', name: '데일리 컷',   desc: 'SNS · 커머스 채널 운영을 위한 상시 콘텐츠 컷. 빠른 회전과 높은 완성도를 동시에 충족합니다.' },
      { no: '04', name: '모델 캐스팅', desc: '촬영 컨셉과 브랜드 무드에 꼭 맞는 모델을 AI 적합도 매핑으로 선별해 캐스팅합니다.' },
    ],
  },
  {
    id: 'tvc_brand_film', no: '02',
    en: 'TVC & Brand Film', ko: '영상 브랜딩',
    desc: '미디어 광고, 디지털 캠페인 및 고해상도 브랜드 필름 등 감각적인 영상 콘텐츠 제작',
    lead: [
      '정지된 이미지를 넘어, 움직임과 사운드로 브랜드의 서사를 설계합니다.',
      '컨셉 기획부터 촬영 · 편집 · 색보정까지 원스톱으로 완성하는 영상 브랜딩입니다.',
    ],
    items: [
      { no: '01', name: '미디어 광고',   desc: 'TV · 디지털 송출용 광고 영상. 기획부터 촬영, 편집, 후반 작업까지 전 과정을 토탈 프로덕션으로 책임집니다.' },
      { no: '02', name: '디지털 캠페인', desc: '숏폼 · 바이럴 · 퍼포먼스 영상 등 채널 특성에 최적화된 캠페인 콘텐츠를 제작합니다.' },
      { no: '03', name: '브랜드 필름',   desc: '브랜드의 철학과 무드를 깊이 있게 담아내는 고해상도 시네마틱 필름을 제작합니다.' },
      { no: '04', name: '모델 캐스팅',   desc: '영상의 톤앤매너와 메시지에 부합하는 모델을 데이터 기반으로 선별 및 캐스팅합니다.' },
    ],
  },
  {
    id: 'influencer_marketing', no: '03',
    en: 'Influencer Marketing', ko: '인플루언서 마케팅',
    desc: '사구오 전속 모델 및 최적의 인플루언서 시딩, 브랜드 이벤트 초청 등 성과 지향적 마케팅 솔루션',
    lead: [
      '감이 아닌 데이터로 검증된 적합도를 기반으로 인플루언서 협업을 설계합니다.',
      '단순 노출을 넘어 실질적인 브랜드 성과로 이어지는 마케팅 솔루션입니다.',
    ],
    items: [
      { no: '01', name: '전속 모델',       desc: '사구오 전속 아티스트를 활용해 신뢰도 높은 브랜드 협업과 캠페인을 운영합니다.' },
      { no: '02', name: '인플루언서 시딩', desc: 'AI 적합도 매핑으로 선별한 최적의 인플루언서 풀에 제품을 시딩하여 자연스러운 확산을 유도합니다.' },
      { no: '03', name: '이벤트 초청',     desc: '브랜드 행사 · 런칭에 영향력 있는 인사를 초청해 화제성과 도달률을 극대화합니다.' },
      { no: '04', name: '브랜디드 콘텐츠', desc: '브랜드와 인플루언서가 협업하여 예산을 투입해 제작하는 깊이 있는 고품질 홍보 콘텐츠입니다.' },
    ],
  },
  {
    id: 'offline_event_planning', no: '04',
    en: 'Offline Event Planning', ko: '오프라인 이벤트 기획',
    desc: '독창적인 팝업 스토어 기획부터 아티스트 콜라보 공연, 브랜드 기획 전시 등 오프라인 행사 총괄 대행',
    lead: [
      '공간과 경험으로 브랜드를 체감하게 만듭니다.',
      '컨셉 기획부터 공간 디자인, 현장 운영까지 오프라인 행사의 전 과정을 총괄합니다.',
    ],
    items: [
      { no: '01', name: '팝업 스토어', desc: '컨셉 기획부터 공간 디자인과 운영까지 팝업의 전 과정을 토탈 디렉팅합니다.' },
      { no: '02', name: '공연 기획',   desc: '아티스트 콜라보 공연 · 쇼케이스 등 라이브 콘텐츠를 기획하고 운영합니다.' },
      { no: '03', name: '기획 전시',   desc: '브랜드 메시지를 담은 전시 · 미디어 인스톨레이션을 기획합니다.' },
      { no: '04', name: '브랜드 파티', desc: '런칭행사 · 프레스데이 · VIP 파티 등 브랜드의 순간을 경험으로 만드는 프리미엄 행사를 연출합니다.' },
    ],
  },
  {
    id: 'creative_solutions', no: '05',
    en: 'Creative Solutions', ko: '토탈 크리에이티브 솔루션',
    desc: '브랜드 캠페인 전용 음원 제작, 커스텀 웹사이트 개발, 비주얼 그래픽 디자인 등 전방위적 창작 지원',
    lead: [
      '캠페인에 필요한 모든 창작 영역을 하나의 팀에서 해결합니다.',
      '외주의 공백 없이 사운드, 웹, 그래픽까지 통합적으로 지원합니다.',
    ],
    items: [
      { no: '01', name: '음원 제작',         desc: '브랜드 · 캠페인 전용 음원, 로고송, BGM을 작곡하고 사운드를 디자인합니다.' },
      { no: '02', name: '웹 개발',           desc: '캠페인 랜딩 페이지와 브랜드 사이트를 커스텀 기획하고 개발합니다.' },
      { no: '03', name: '그래픽 디자인',     desc: '키 비주얼, 로고, 패키지, 편집물 등 브랜드 그래픽 전반을 디자인합니다.' },
      { no: '04', name: '브랜드 아이덴티티', desc: '네이밍 · 슬로건 · 카피라이팅으로 브랜드의 언어와 메시지를 일관되게 설계합니다.' },
    ],
  },
];

// 글로벌로 노출 — AgencyServiceDetail 컴포넌트가 같은 데이터 룩업.
window.SAGUO_AGENCY_CATEGORIES = AGENCY_CATEGORIES;

function AgencyServices({ onCta, onSelect }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  // ── 타이틀 타이핑 효과 (ModelsIndex.jsx 와 동일 패턴) ──
  // 마운트 시 1회 실행, 점도 같이 타이핑, 커서는 끝까지 깜박임.
  const FULL_TEXT = 'WE PUT THE LAST DOT FOR YOUR BRAND.';
  const [typed, setTyped] = React.useState('');
  React.useEffect(() => {
    setTyped('');
    let i = 0;
    let interval;  // setTimeout 안에서 만들어진 interval을 외부 cleanup이 잡기 위해 선언
    const startDelay = setTimeout(() => {
      interval = setInterval(() => {
        i++;
        setTyped(FULL_TEXT.slice(0, i));
        if (i >= FULL_TEXT.length) clearInterval(interval);
      }, 46);
    }, 200);
    return () => { clearTimeout(startDelay); if (interval) clearInterval(interval); };
  }, []);

  // 모바일: 그리드 단순화 (번호+EN+KO 가 한 묶음, desc 는 그 아래 풀폭)
  const rowStyle = isMobile
    ? { ...agencyStyles.row, gridTemplateColumns: '1fr', gap: 10, padding: '22px 0' }
    : agencyStyles.row;

  return (
    <div style={agencyStyles.outer}>
      <section style={{ ...agencyStyles.wrap, padding: isMobile ? '48px 16px 80px' : '48px 36px 60px' }}>
        <h1 style={{ ...agencyStyles.title, fontSize: isMobile ? '18px' : '58px', margin: isMobile ? '0 0 12px' : '0 0 24px' }}>
          {typed}
          <span style={{
            display: 'inline-block',
            width: '0.06em', height: '0.82em',
            background: '#000',
            marginLeft: '0.05em', verticalAlign: 'middle',
            animation: 'hero-cursor-blink .65s step-end infinite',
          }} />
        </h1>

        <p style={{ ...agencyStyles.desc, margin: isMobile ? '0 0 12px' : '0 0 64px' }}>
          세상이 미처 발견 못한 고유한 빛깔, 유행 너머의 취향으로 브랜드를 완성합니다.
        </p>

        <div style={{ ...agencyStyles.listRule, margin: isMobile ? '0 0 48px' : 0 }} />

        <div role="list">
          {AGENCY_CATEGORIES.map((it, i) => (
            <button
              key={it.id}
              type="button"
              role="listitem"
              onClick={() => onSelect && onSelect(it.id)}
              style={{
                ...rowStyle,
                background: 'transparent',
                // border 는 shorthand 가 borderBottom 을 덮으므로 longhand 만 사용 — 마지막 행은 borderBottom 제거
                borderTop: 'none', borderLeft: 'none', borderRight: 'none',
                borderBottom: i === AGENCY_CATEGORIES.length - 1 ? 'none' : '1px solid rgba(0,0,0,0.15)',
                width: '100%', cursor: 'pointer', textAlign: 'left',
                fontFamily: "'Pretendard'",
                transition: 'opacity .2s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.opacity = 0.6; }}
              onMouseLeave={(e) => { e.currentTarget.style.opacity = 1; }}
              aria-label={`${it.en} 자세히 보기`}
            >
              {isMobile ? (
                <React.Fragment>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                    <span style={agencyStyles.rowNum}>{it.no}</span>
                    <div style={agencyStyles.rowTitleWrap}>
                      <span style={agencyStyles.rowEn}>{it.en}</span>
                      <span style={agencyStyles.rowKo}>{it.ko}</span>
                    </div>
                  </div>
                  <p style={{ ...agencyStyles.rowDesc, margin: 0 }}>{it.desc}</p>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <span style={agencyStyles.rowNum}>{it.no}</span>
                  <div style={agencyStyles.rowTitleWrap}>
                    <span style={agencyStyles.rowEn}>{it.en}</span>
                    <span style={agencyStyles.rowKo}>{it.ko}</span>
                  </div>
                  <p style={{ ...agencyStyles.rowDesc, margin: 0 }}>{it.desc}</p>
                </React.Fragment>
              )}
            </button>
          ))}
        </div>

      </section>
    </div>
  );
}

window.AgencyServices = AgencyServices;