/* 요금제 + FAQ + Use Cases (Audience) */

/* ---- Audience / Use Cases ---- */
const SectionAudience = () => {
  const cases = [
    {
      tag: 'CORPORATE',
      title: '기업 통근버스 · 임직원 출퇴근',
      sub: '기업·기관·사업장 HR·운영팀',
      pain: '탑승 기록 부재로 정산 근거 불명확. 출근 기록과 탑승 기록 분리 관리. 운행일지 수기 작성 부담.',
      bullets: ['사원증·QR·얼굴인식 멀티 인증', '탑승 = 출근 기록 자동화 (예정)', '근태·교통비 정산 데이터 연동', '운수사·고객사 권한 분리'],
      icon: 'office',
    },
    {
      tag: 'INDUSTRIAL',
      title: '산업단지 · 공단 통근 셔틀',
      sub: '산업단지 관리기관 · 입주기업',
      pain: '다수 입주기업·다수 노선 종이 명단 관리. 지자체 지원사업 정산 자료 준비에 업무 시간 대량 소요.',
      bullets: ['다수 입주기업 통합 관리', '다중 사업장·노선·관리자 동시 운영', '지자체 보조금 정산 증빙 자동화', '법정 운행기록 자동 보관'],
      icon: 'factory',
    },
    {
      tag: 'CHARTER',
      title: '전세버스 · 대형 행사 · 워크샵',
      sub: '여행사 · 행사 운영사 · 공공기관',
      pain: '50~200명 단체 행사. 전원 앱 설치 비현실적. 종이 명단 대조는 누락 빈번.',
      bullets: ['탑승자 앱 설치 불필요', '링크 기반 셀프 얼굴 등록', '게스트(미등록) 탑승자 구분 기록', 'GPS 실시간 차량 위치 관제'],
      icon: 'bus',
    },
    {
      tag: 'BUILDING',
      title: '건물 · 시설 · 방문자 출입',
      sub: '빌딩 · 사무실 · 공동 시설 관리',
      pain: '출입 게이트·전용 리더기·출입카드 시스템 수백만 원 도입 비용. 방문자 출입 이력 수기 관리.',
      bullets: ['얼굴인식 출입 확인', '방문자 출입 이력 자동 기록', '별도 출입 장치·게이트 불필요', '감사 로그 자동 연동'],
      icon: 'door',
    },
  ];

  return (
    <section id="cases">
      <div className="shell">
        <div className="section-head section-head--center">
          <div className="eyebrow"><span className="dot" />USE CASES</div>
          <h2 className="section-title">활용 분야.</h2>
          <p className="section-sub">기업 통근버스·산업단지 셔틀·전세버스·시설 출입까지 — 성인 탑승 확인이 필요한 4가지 운영 환경에서 도입되고 있습니다.</p>
        </div>

        <div className="grid grid-2">
          {cases.map(c => <CaseCard key={c.tag} {...c} />)}
        </div>
      </div>
    </section>
  );
};

const CaseIcon = ({name}) => {
  const p = {width: 24, height: 24, fill: 'none', stroke: 'var(--sid-blue)', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round'};
  if (name === 'office') return <svg {...p} viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M7 8h2M11 8h2M15 8h2M7 12h2M11 12h2M15 12h2M7 16h10" /></svg>;
  if (name === 'factory') return <svg {...p} viewBox="0 0 24 24"><path d="M3 21V10l5 3V10l5 3V10l5 3v8H3z" /><path d="M8 17h2M14 17h2" /></svg>;
  if (name === 'bus') return <svg {...p} viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="11" rx="2" /><circle cx="7" cy="19" r="1.5" /><circle cx="17" cy="19" r="1.5" /><path d="M3 11h18M7 9v3M17 9v3" /></svg>;
  if (name === 'door') return <svg {...p} viewBox="0 0 24 24"><path d="M5 22V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v18M3 22h18M14 12v.5" /></svg>;
  return null;
};

const CaseCard = ({tag, title, sub, pain, bullets, icon}) => (
  <div className="card" style={{padding: 32, borderRadius: 20}}>
    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18}}>
      <div>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
          color: 'var(--sid-blue-link)', textTransform: 'uppercase', marginBottom: 8,
        }}>{tag}</div>
        <h3 style={{fontSize: 22, fontWeight: 800, color: 'var(--sid-ink)', margin: '0 0 4px', letterSpacing: '-0.03em'}}>{title}</h3>
        <div style={{fontSize: 13, color: 'var(--sid-fg-mid)'}}>{sub}</div>
      </div>
      <div style={{
        width: 48, height: 48, borderRadius: 12,
        background: 'var(--sid-blue-tint)', display: 'grid', placeItems: 'center', flexShrink: 0,
      }}><CaseIcon name={icon} /></div>
    </div>
    <div style={{
      padding: '14px 16px', background: 'var(--sid-bg-soft)', borderRadius: 12,
      fontSize: 13, color: 'var(--sid-fg-mid)', lineHeight: 1.6, marginBottom: 16,
    }}>
      <strong style={{color: 'var(--sid-ink)', fontWeight: 700}}>현장의 어려움 — </strong>{pain}
    </div>
    <ul style={{margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8}}>
      {bullets.map(b => (
        <li key={b} style={{
          display: 'flex', alignItems: 'flex-start', gap: 8,
          fontSize: 13, color: 'var(--sid-fg)', lineHeight: 1.5,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--sid-blue)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink: 0, marginTop: 2}}><polyline points="20 6 9 17 4 12" /></svg>
          {b}
        </li>
      ))}
    </ul>
  </div>
);

/* ---- Pricing ---- */
const SectionPricing = () => {
  const plans = [
    {
      name: 'Free', price: '무료', priceSub: '영구', desc: '소규모 기업·빠른 PoC 도입·행사 운영에 적합',
      features: ['1계정 최대 200명 등록', 'AI 얼굴인식 3가지 모드', '다인 동시 인식 모드', '사원증·QR 탑승권 병행', '단일 계정 관리·통계', '스케줄·좌석 예약 기본'],
      cta: '무료로 시작', ctaHref: 'https://play.google.com/store/apps/details?id=com.schoolbus.shuttle.id', ctaKind: 'outline',
    },
    {
      name: 'Standard', price: '별도 문의', priceSub: '월', desc: '중규모 기업 통근·산업단지 셔틀 도입에 적합', highlight: true,
      features: ['Free 기능 전체 포함', '200명 이상 등록', 'GPS 실시간 관제', '운행일지 자동화', '노선 설계·배차 관리', '감사 로그 (Audit Log)', '운수사·고객사 권한 분리', '우선 기술 지원'],
      cta: '도입 상담 신청', ctaHref: 'contact', ctaKind: 'primary',
    },
    {
      name: 'Enterprise', price: '맞춤 견적', priceSub: '', desc: '대기업·공공기관·다중 사업장 운영에 적합',
      features: ['Standard 기능 전체 포함', 'AI 노선 최적화·통폐합', '전용 관제 대시보드', '출근 기록 연동 (예정)', 'HR 시스템 API 연동 (예정)', '화이트라벨 제공 (예정)', '전담 운영 매니저 배정'],
      cta: 'Enterprise 문의', ctaHref: 'contact', ctaKind: 'ink',
    },
  ];
  return (
    <section id="pricing">
      <div className="shell">
        <div className="section-head section-head--center">
          <div className="eyebrow"><span className="dot" />PRICING</div>
          <h2 className="section-title">합리적인 요금 안내.</h2>
          <p className="section-sub">
            200명까지 무료로 시작하고, 운영 규모에 맞게 확장하세요.
            기업 통근·산업단지·전세버스 규모에 맞춘 3단계 플랜.
          </p>
        </div>

        <div className="grid grid-3" style={{alignItems: 'stretch'}}>
          {plans.map(p => <PlanCard key={p.name} {...p} />)}
        </div>
      </div>
    </section>
  );
};

const PlanCard = ({name, price, priceSub, desc, features, cta, ctaHref, ctaKind, highlight}) => {
  const isContact = ctaHref === 'contact';
  const handler = (e) => {
    if (isContact) {
      e.preventDefault();
      window.__sidContactOpen && window.__sidContactOpen();
    }
  };
  return (
    <div className="card" style={{
      padding: 32, borderRadius: 20,
      background: highlight ? 'var(--sid-ink)' : '#fff',
      color: highlight ? '#fff' : 'inherit',
      borderColor: highlight ? 'var(--sid-ink)' : 'var(--sid-line)',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}>
      {highlight && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          padding: '6px 14px', borderRadius: 999,
          background: 'var(--sid-yellow)', color: 'var(--sid-ink)',
          fontSize: 11, fontWeight: 800, letterSpacing: '0.04em',
        }}>MOST POPULAR</div>
      )}
      <div style={{
        fontSize: 13, fontWeight: 700,
        color: highlight ? 'var(--sid-yellow)' : 'var(--sid-blue-link)',
        marginBottom: 8,
      }}>{name}</div>
      <div style={{display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4}}>
        <span style={{
          fontFamily: 'var(--font-numeric)', fontSize: 36, fontWeight: 800,
          letterSpacing: '-0.04em', lineHeight: 1,
          color: highlight ? '#fff' : 'var(--sid-ink)',
        }}>{price}</span>
        {priceSub && (
          <span style={{
            fontSize: 14, fontWeight: 600,
            color: highlight ? 'rgba(255,255,255,0.6)' : 'var(--sid-fg-mid)',
          }}>/ {priceSub}</span>
        )}
      </div>
      <p style={{
        fontSize: 13, lineHeight: 1.6, margin: '8px 0 24px',
        color: highlight ? 'rgba(255,255,255,0.7)' : 'var(--sid-fg-mid)',
      }}>{desc}</p>

      <ul style={{listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10, flex: 1}}>
        {features.map(f => (
          <li key={f} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 13, lineHeight: 1.5,
            color: highlight ? 'rgba(255,255,255,0.9)' : 'var(--sid-fg)',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke={highlight ? 'var(--sid-yellow)' : 'var(--sid-blue)'}
              strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
              style={{flexShrink: 0, marginTop: 2}}>
              <polyline points="20 6 9 17 4 12" />
            </svg>
            {f}
          </li>
        ))}
      </ul>

      {isContact ? (
        <button type="button" onClick={handler}
          className={`btn btn-lg ${ctaKind === 'primary' ? 'btn-yellow' : ctaKind === 'ink' ? 'btn-primary' : 'btn-outline'}`}
          style={{width: '100%', marginTop: 28}}>
          {cta}
        </button>
      ) : (
        <a href={ctaHref} target="_blank" rel="noreferrer"
          className={`btn btn-lg ${ctaKind === 'primary' ? 'btn-yellow' : ctaKind === 'ink' ? 'btn-primary' : 'btn-outline'}`}
          style={{width: '100%', marginTop: 28}}>
          {cta}
        </a>
      )}
    </div>
  );
};

Object.assign(window, {SectionPricing, SectionAudience, PlanCard, CaseCard});