// Services.jsx — service-first home section (corporate + international + students)
// Lead-generation oriented: tell visitors WHAT she does, HOW the process works,
// and route them to a contact CTA. Modeled on softlanders.com (relocation),
// not on a price-led property listings page.

const Services = ({ lang = 'EN', onContact, onSeeSales, onSeeRentals }) => {
  const isKR = lang === 'KR';

  const services = [
    {
      key: 'corporate',
      en: { title: 'Corporate Relocation', ko: '주재원·법인 이주' },
      ko_title: '주재원·법인 이주',
      en_blurb: 'For executives, transferees, and HR teams moving employees and families to New York. End-to-end placement: school zone advisory, lease negotiation, building approvals.',
      ko_blurb: '임원·주재원·HR 부서를 위한 뉴욕 이주 서비스. 학군 자문, 임대 협상, 빌딩 승인까지 시작부터 정착까지 도와드립니다.',
      glyph: (
        <svg viewBox="0 0 32 32" width="40" height="40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="5" y="11" width="22" height="16" />
          <path d="M11 11V7h10v4" />
          <path d="M5 17h22" />
          <path d="M14 20h4" />
        </svg>
      ),
      anchors: [
        { en: 'School zone & neighborhood advisory', ko: '학군·동네 자문' },
        { en: 'Lease negotiation & board package prep', ko: '임대 협상·보드 패키지' },
        { en: 'Visa-friendly documentation guidance', ko: '비자 친화적 서류 가이드' },
      ],
    },
    {
      key: 'international',
      en: { title: 'International Relocation', ko: '해외 이주·이민' },
      ko_title: '해외 이주·이민',
      en_blurb: 'For families and individuals arriving from abroad. Remote tours, virtual signings, and time-zone-aware communication — landing day one ready to move in.',
      ko_blurb: '해외에서 오시는 가족·개인 고객을 위한 서비스. 원격 투어, 비대면 계약, 시차를 고려한 소통으로 뉴욕 도착 첫날부터 편하게 정착하실 수 있도록 도와드립니다.',
      glyph: (
        <svg viewBox="0 0 32 32" width="40" height="40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="16" cy="16" r="11" />
          <path d="M5 16h22" />
          <path d="M16 5c3 3 4.5 7 4.5 11s-1.5 8-4.5 11c-3-3-4.5-7-4.5-11S13 8 16 5z" />
        </svg>
      ),
      anchors: [
        { en: 'Remote video tours & virtual signings', ko: '원격 영상 투어·비대면 계약' },
        { en: 'Time-zone-aware communication', ko: '시차를 고려한 소통' },
        { en: 'Move-in coordination on arrival', ko: '도착일 입주 코디네이션' },
      ],
    },
    {
      key: 'students',
      en: { title: 'International Students', ko: '유학생' },
      ko_title: '유학생',
      en_blurb: 'For students arriving for NYU, Columbia, Parsons, and beyond. Guarantor solutions, building approvals, and leases that fit a semester schedule.',
      ko_blurb: 'NYU, Columbia, Parsons 등 뉴욕 유학생을 위한 서비스. 보증인 솔루션, 빌딩 승인, 학기 일정에 맞는 임대까지 함께합니다.',
      glyph: (
        <svg viewBox="0 0 32 32" width="40" height="40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 13l13-6 13 6-13 6L3 13z" />
          <path d="M8 16v6c0 2 4 4 8 4s8-2 8-4v-6" />
          <path d="M29 13v8" />
        </svg>
      ),
      anchors: [
        { en: 'Student-friendly buildings & leases', ko: '학생 친화 빌딩·임대' },
        { en: 'Guarantor & institutional letter support', ko: '보증인·기관 보증서 지원' },
        { en: 'Semester & academic-year leases', ko: '학기·학년 임대' },
      ],
    },
  ];

  const steps = [
    { n: '01', en: { t: 'Tell me about you', b: 'A short note about your timeline, family, and the neighborhoods on your mind.' }, ko: { t: '당신의 이야기를 들려주세요', b: '이주 일정, 가족 구성, 관심 있는 동네를 편하게 들려주세요.' } },
    { n: '02', en: { t: 'A 30-minute call', b: 'We map out priorities — budget, schools, commute, lease terms — in your language.' }, ko: { t: '30분 통화', b: '예산·학교·출퇴근·임대 조건 등 우선순위를 함께 정리합니다.' } },
    { n: '03', en: { t: 'Curated tours', b: 'A shortlist of homes, in person or by video. No spam, no upsell — just what fits.' }, ko: { t: '맞춤 투어', b: '직접 또는 영상으로 진행되는 엄선된 매물 투어. 광고나 강요 없이 맞는 매물만 보여드립니다.' } },
    { n: '04', en: { t: 'Offer, board, move-in', b: 'I handle negotiation, building approval, and the move-in checklist start to finish.' }, ko: { t: '오퍼·승인·입주', b: '협상부터 빌딩 승인, 입주 체크리스트까지 처음부터 끝까지 직접 진행합니다.' } },
  ];

  return (
    <>
      <section className="ms-services" data-screen-label="Services">
        <header className="ms-services-head">
          <span className="ms-services-eyebrow">{isKR ? '서비스' : 'How I can help'}</span>
          <h2 className="ms-services-title">
            {isKR ? '뉴욕에서의 부드러운 정착.' : 'A soft landing in New York.'}
          </h2>
          <p className="ms-services-lede">
            {isKR
              ? '주재원, 해외 가족, 유학생까지 — 단순한 매물 소개가 아닌, 첫날부터 편안하게 정착할 수 있도록 전 과정을 함께합니다.'
              : 'Corporate teams, international families, and students arriving for school — I work end-to-end so the first week feels less like moving, and more like arriving.'}
          </p>
        </header>

        <div className="ms-services-grid">
          {services.map((s) => (
            <article key={s.key} className="ms-service-card">
              <div className="ms-service-glyph" aria-hidden="true">{s.glyph}</div>
              <h3 className="ms-service-name">{isKR ? s.ko_title : s.en.title}</h3>
              <p className="ms-service-blurb">{isKR ? s.ko_blurb : s.en_blurb}</p>
              <ul className="ms-service-anchors">
                {s.anchors.map((a) => (
                  <li key={a.en}>{isKR ? a.ko : a.en}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>

      <section className="ms-process" data-screen-label="Process">
        <header className="ms-process-head">
          <span className="ms-services-eyebrow">{isKR ? '진행 방식' : 'The process'}</span>
          <h2 className="ms-services-title">
            {isKR ? '단계별로, 정확하게.' : 'Step by step. Done right.'}
          </h2>
        </header>
        <ol className="ms-process-steps">
          {steps.map((s) => (
            <li key={s.n} className="ms-process-step">
              <span className="ms-process-num">{s.n}</span>
              <h4 className="ms-process-step-title">{isKR ? s.ko.t : s.en.t}</h4>
              <p className="ms-process-step-body">{isKR ? s.ko.b : s.en.b}</p>
            </li>
          ))}
        </ol>
      </section>

      <section className="ms-cta-banner" data-screen-label="Inquiry CTA">
        <div className="ms-cta-banner-inner">
          <h2 className="ms-cta-banner-title">
            {isKR ? '이주 계획을 들려주세요.' : 'Tell me about your move.'}
          </h2>
          <p className="ms-cta-banner-body">
            {isKR
              ? '간단한 메모만 남겨주세요 — 24시간 안에 직접 답변드립니다.'
              : 'A short note is all I need — just a real reply from me within 24 hours.'}
          </p>
          <div className="ms-cta-banner-actions">
            <button className="btn btn-primary" onClick={onContact}>
              {isKR ? '상담 요청' : 'Start a conversation'}
            </button>
            <button className="btn btn-ghost" onClick={onSeeSales}>
              {isKR ? '매매 매물' : 'Browse sales'}
            </button>
            <button className="btn btn-ghost" onClick={onSeeRentals}>
              {isKR ? '임대 매물' : 'Browse rentals'}
            </button>
          </div>
        </div>
      </section>
    </>
  );
};

window.Services = Services;