import Link from 'next/link';

// 쟁승메이드 메인 — 외주 개발 + 완성 소프트웨어 2축 랜딩 (서버 컴포넌트)
// PublicShell이 TopNav(h-16)·푸터·main 배경을 제공하므로 여기서는 콘텐츠 섹션만 렌더한다.

const KOR_TIGHT = { letterSpacing: '-0.02em' } as const;
const KOR_BODY = { letterSpacing: '-0.01em' } as const;

const PROCESS = [
  { n: '01', t: '무료 상담', d: '요구사항을 함께 정리하고 실현 가능성을 점검합니다.' },
  { n: '02', t: '견적·범위 확정', d: '영업일 2일 내 범위와 견적을 정리해 회신드립니다.' },
  { n: '03', t: '개발·중간 공유', d: '주 1회 이상 진행 상황을 공유하며 방향을 맞춥니다.' },
  { n: '04', t: '납품·배포 지원', d: '검수 후 30일 무상 하자보수로 안정화까지 책임집니다.' },
];

const STATS = [
  { v: '7년차', l: '대기업 백엔드 개발 경력' },
  { v: '15+', l: '직접 운영 중인 서비스' },
  { v: '기획→배포', l: '원스톱 단독 진행' },
];

const STACK = ['Python', 'Java', 'Spring', 'Next.js', 'AI 연동'];

const PORTFOLIO = [
  {
    t: '주식 자동매매 시스템',
    d: '텔레그램과 연동해 실시간으로 주문을 집행하고 체결·손익 리포트를 자동 전송합니다.',
    tags: ['실시간 주문', '텔레그램 연동', '리포트 자동화'],
  },
  {
    t: '부동산 청약 자동 수집·매칭',
    d: '공고를 주기적으로 크롤링해 조건에 맞는 매물만 골라내고, 신규 매칭을 즉시 알립니다.',
    tags: ['크롤링', '조건 매칭', '푸시 알림'],
  },
  {
    t: 'AI 콘텐츠 자동화 파이프라인',
    d: '생성부터 검수, 발행까지 사람이 개입할 지점만 남기고 전 과정을 자동으로 연결합니다.',
    tags: ['AI 연동', '검수 워크플로우', '자동 발행'],
  },
];

function ArrowRight() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <path d="M5 12h14" />
      <path d="m13 5 7 7-7 7" />
    </svg>
  );
}

export default function Home() {
  return (
    <>
      {/* ─── 1. Hero ─── */}
      <section className="border-b" style={{ borderColor: 'var(--jsm-line)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-24 lg:py-32">
          <div className="max-w-3xl">
            <span
              className="inline-block text-xs font-semibold mb-6 px-2.5 py-1 rounded"
              style={{
                color: 'var(--jsm-accent)',
                background: 'var(--jsm-accent-soft)',
                ...KOR_BODY,
              }}
            >
              외주 개발 · 완성 소프트웨어
            </span>
            <h1
              className="text-4xl sm:text-5xl lg:text-[3.5rem] font-bold leading-[1.2] break-keep"
              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
            >
              필요한 소프트웨어,
              <br className="hidden sm:block" /> 만들어 드리거나{' '}
              <span style={{ color: 'var(--jsm-accent)' }}>이미 만들어 두었습니다.</span>
            </h1>
            <p
              className="mt-7 text-lg lg:text-xl leading-relaxed break-keep max-w-2xl"
              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
            >
              7년차 대기업 백엔드 개발자가 직접 설계·개발·운영합니다. 맞춤 외주 개발과
              검증된 완성 소프트웨어 중 필요한 쪽을 선택하세요.
            </p>
            <div className="mt-10 flex flex-col sm:flex-row gap-3">
              <Link
                href="/outsourcing#contact"
                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-lg font-semibold text-white transition-colors duration-150"
                style={{ background: 'var(--jsm-accent)', ...KOR_BODY }}
              >
                프로젝트 문의하기
                <ArrowRight />
              </Link>
              <Link
                href="/products"
                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-lg font-semibold border transition-colors duration-150 hover:bg-[var(--jsm-surface-alt)]"
                style={{
                  color: 'var(--jsm-ink)',
                  borderColor: 'var(--jsm-line)',
                  background: 'var(--jsm-surface)',
                  ...KOR_BODY,
                }}
              >
                소프트웨어 보기
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ─── 2. 2축 서비스 ─── */}
      <section style={{ background: 'var(--jsm-surface-alt)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
          <div className="grid md:grid-cols-2 gap-6">
            {/* 외주 개발 */}
            <Link
              href="/outsourcing"
              className="group block rounded-2xl p-9 lg:p-11 border transition-colors duration-200 hover:border-[var(--jsm-accent)]"
              style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
            >
              <span
                className="text-xs font-semibold uppercase tracking-wider"
                style={{ color: 'var(--jsm-accent)' }}
              >
                Custom
              </span>
              <h2
                className="mt-3 text-2xl font-bold break-keep"
                style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
              >
                외주 개발
              </h2>
              <p
                className="mt-3 leading-relaxed break-keep"
                style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
              >
                기획부터 배포·운영까지 한 사람이 책임집니다. 웹 서비스, API, 업무 자동화,
                봇 개발까지 필요한 형태로 만들어 드립니다.
              </p>
              <span
                className="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold transition-colors duration-150 group-hover:text-[var(--jsm-accent-hover)]"
                style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
              >
                외주 개발 알아보기
                <ArrowRight />
              </span>
            </Link>

            {/* 완성 소프트웨어 */}
            <Link
              href="/products"
              className="group block rounded-2xl p-9 lg:p-11 border transition-colors duration-200 hover:border-[var(--jsm-accent)]"
              style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
            >
              <span
                className="text-xs font-semibold uppercase tracking-wider"
                style={{ color: 'var(--jsm-accent)' }}
              >
                Ready-made
              </span>
              <h2
                className="mt-3 text-2xl font-bold break-keep"
                style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
              >
                완성 소프트웨어
              </h2>
              <p
                className="mt-3 leading-relaxed break-keep"
                style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
              >
                입금 확인 후 바로 다운로드해 사용합니다. 제가 직접 운영하며 검증한 도구만
                정리해 제공합니다.
              </p>
              <span
                className="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold transition-colors duration-150 group-hover:text-[var(--jsm-accent-hover)]"
                style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
              >
                소프트웨어 둘러보기
                <ArrowRight />
              </span>
            </Link>
          </div>
        </div>
      </section>

      {/* ─── 3. 개발 프로세스 ─── */}
      <section id="process" style={{ background: 'var(--jsm-bg)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
          <div className="max-w-2xl">
            <p
              className="text-xs font-semibold uppercase tracking-wider mb-3"
              style={{ color: 'var(--jsm-accent)' }}
            >
              Process
            </p>
            <h2
              className="text-3xl lg:text-4xl font-bold break-keep"
              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
            >
              상담부터 납품까지, 흐름이 분명합니다
            </h2>
          </div>
          <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-px rounded-2xl overflow-hidden border" style={{ borderColor: 'var(--jsm-line)', background: 'var(--jsm-line)' }}>
            {PROCESS.map((s) => (
              <div key={s.n} className="p-7 lg:p-8" style={{ background: 'var(--jsm-surface)' }}>
                <span
                  className="text-sm font-bold"
                  style={{ color: 'var(--jsm-accent)', fontFamily: 'monospace' }}
                >
                  {s.n}
                </span>
                <h3
                  className="mt-4 text-lg font-bold break-keep"
                  style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
                >
                  {s.t}
                </h3>
                <p
                  className="mt-2 text-sm leading-relaxed break-keep"
                  style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
                >
                  {s.d}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── 4. 신뢰 요소 ─── */}
      <section style={{ background: 'var(--jsm-navy)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-24">
          <div className="grid sm:grid-cols-3 gap-10 sm:gap-8">
            {STATS.map((s) => (
              <div key={s.l}>
                <p
                  className="text-3xl lg:text-4xl font-bold text-white"
                  style={KOR_TIGHT}
                >
                  {s.v}
                </p>
                <p
                  className="mt-2 text-sm leading-relaxed break-keep text-white/60"
                  style={KOR_BODY}
                >
                  {s.l}
                </p>
              </div>
            ))}
          </div>
          <div
            className="mt-12 pt-8 border-t flex flex-wrap items-center gap-x-3 gap-y-2"
            style={{ borderColor: 'rgba(255,255,255,0.1)' }}
          >
            <span className="text-xs uppercase tracking-wider text-white/40 mr-1">Stack</span>
            {STACK.map((s) => (
              <span
                key={s}
                className="text-sm text-white/80 px-3 py-1 rounded-full"
                style={{ background: 'rgba(255,255,255,0.06)', ...KOR_BODY }}
              >
                {s}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* ─── 5. 포트폴리오 하이라이트 ─── */}
      <section id="portfolio" style={{ background: 'var(--jsm-surface-alt)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
          <div className="max-w-2xl">
            <p
              className="text-xs font-semibold uppercase tracking-wider mb-3"
              style={{ color: 'var(--jsm-accent)' }}
            >
              Portfolio
            </p>
            <h2
              className="text-3xl lg:text-4xl font-bold break-keep"
              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
            >
              실제로 운영 중인 시스템들
            </h2>
            <p
              className="mt-4 leading-relaxed break-keep"
              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
            >
              데모가 아니라 매일 돌아가는 서비스입니다. 같은 깊이로 의뢰하신 프로젝트를 만듭니다.
            </p>
          </div>
          <div className="mt-12 grid md:grid-cols-3 gap-6">
            {PORTFOLIO.map((p) => (
              <div
                key={p.t}
                className="flex flex-col rounded-2xl p-7 border"
                style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
              >
                <span
                  className="self-start inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-full mb-5"
                  style={{ color: 'var(--jsm-accent)', background: 'var(--jsm-accent-soft)' }}
                >
                  <span
                    className="w-1.5 h-1.5 rounded-full"
                    style={{ background: 'var(--jsm-accent)' }}
                  />
                  직접 개발·운영 중
                </span>
                <h3
                  className="text-lg font-bold break-keep"
                  style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
                >
                  {p.t}
                </h3>
                <p
                  className="mt-2.5 text-sm leading-relaxed break-keep flex-1"
                  style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
                >
                  {p.d}
                </p>
                <div className="mt-5 flex flex-wrap gap-1.5">
                  {p.tags.map((tag) => (
                    <span
                      key={tag}
                      className="text-xs px-2.5 py-1 rounded"
                      style={{
                        color: 'var(--jsm-ink-soft)',
                        background: 'var(--jsm-surface-alt)',
                        ...KOR_BODY,
                      }}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div className="mt-10">
            <Link
              href="/outsourcing#portfolio"
              className="inline-flex items-center gap-1.5 text-sm font-semibold transition-colors duration-150 hover:text-[var(--jsm-accent-hover)]"
              style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
            >
              포트폴리오 자세히 보기
              <ArrowRight />
            </Link>
          </div>
        </div>
      </section>

      {/* ─── 6. 소프트웨어 진열(예고) ─── */}
      {/* Phase 2: 이 섹션은 products 테이블 기반 동적 진열로 교체 예정.
          현재는 출시 전 정적 안내만 노출한다. */}
      <section style={{ background: 'var(--jsm-bg)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
          <div
            className="rounded-2xl border px-8 py-14 lg:px-14 lg:py-16 text-center"
            style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
          >
            <p
              className="text-xs font-semibold uppercase tracking-wider mb-3"
              style={{ color: 'var(--jsm-accent)' }}
            >
              Coming soon
            </p>
            <h2
              className="text-2xl lg:text-3xl font-bold break-keep"
              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
            >
              검증된 완성 소프트웨어를 준비하고 있습니다
            </h2>
            <p
              className="mt-4 max-w-xl mx-auto leading-relaxed break-keep"
              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
            >
              직접 운영하며 다듬은 도구를 하나씩 다운로드 상품으로 공개할 예정입니다.
              출시 소식을 가장 먼저 받아보세요.
            </p>
            <Link
              href="/outsourcing#contact"
              className="mt-8 inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-lg font-semibold border transition-colors duration-150 hover:bg-[var(--jsm-surface-alt)]"
              style={{
                color: 'var(--jsm-ink)',
                borderColor: 'var(--jsm-line)',
                ...KOR_BODY,
              }}
            >
              출시 소식 받기
              <ArrowRight />
            </Link>
          </div>
        </div>
      </section>

      {/* ─── 7. 최종 CTA ─── */}
      <section style={{ background: 'var(--jsm-navy)' }}>
        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-24 lg:py-28">
          <div className="max-w-3xl">
            <h2
              className="text-3xl lg:text-[2.5rem] font-bold leading-tight text-white break-keep"
              style={KOR_TIGHT}
            >
              프로젝트, 이야기부터 시작하세요
            </h2>
            <p
              className="mt-5 text-lg leading-relaxed text-white/70 break-keep max-w-2xl"
              style={KOR_BODY}
            >
              아이디어 단계여도 괜찮습니다. 무료 상담에서 방향을 함께 잡아드립니다.
            </p>
            <Link
              href="/outsourcing#contact"
              className="mt-9 inline-flex items-center justify-center gap-2 px-7 py-4 rounded-lg font-semibold text-white transition-colors duration-150"
              style={{ background: 'var(--jsm-accent)', ...KOR_BODY }}
            >
              무료 상담 신청
              <ArrowRight />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}