// About / 회사 소개 page

const STATS = [
  { num: "1,240", unit: "만+", label: "누적 조회 건수" },
  { num: "320", unit: "만+", label: "예약 발송 건수" },
  { num: "8", unit: "개사", label: "통합 제휴 택배사" },
  { num: "98.4", unit: "%", label: "정시 도착률" },
];

const VALUES = [
  {
    n: "01",
    title: "복잡한 것을 단순하게",
    desc: "여러 앱·여러 단계를 거쳐야 했던 택배 경험을, 하나의 화면에서 끝나도록 다시 설계합니다. 우리는 빼는 것에서 시작합니다.",
  },
  {
    n: "02",
    title: "신뢰는 사소한 데서",
    desc: "약속한 시간에, 약속한 곳으로. 보낸 사람과 받는 사람 모두에게 같은 정보를 같은 속도로 전달합니다.",
  },
  {
    n: "03",
    title: "함께 일하는 동료",
    desc: "택배 기사님은 우리 서비스의 가장 큰 동료입니다. 더 나은 일하는 환경을 만드는 것이 사용자 경험과 분리되지 않는다고 믿습니다.",
  },
];

const TIMELINE = [
  { year: "2022", title: "솔브잇 창업", desc: "택배 조회·예약 통합 플랫폼이라는 아이디어에서 시작. 서울 성수동에서 3인 팀으로 출발.", major: true },
  { year: "2023.03", title: "베타 서비스 오픈", desc: "주요 택배사 4곳과 제휴해 통합 조회 베타 서비스를 출시. 첫 달 만에 5만 명 사용." },
  { year: "2023.11", title: "원클릭 예약 출시", desc: "주소록과 결제 정보를 연동한 원클릭 예약 기능 출시. 평균 예약 시간을 4분에서 30초로 단축." },
  { year: "2024.05", title: "Series A 투자 유치", desc: "150억 원 규모 투자 유치. 전국 단위 서비스로 확장.", major: true },
  { year: "2025.01", title: "8개 택배사 전체 통합", desc: "국내 주요 8개 택배사를 모두 연동. 누적 사용자 200만 명 돌파." },
  { year: "2026.05", title: "솔브잇 비즈니스 출시", desc: "월 10건 이상 발송 사업자를 위한 전용 플랜과 정산 대시보드 오픈.", major: true },
];

const TEAM = [
  { name: "박서연", role: "CEO · 공동창업자", initial: "박" },
  { name: "이준호", role: "CTO · 공동창업자", initial: "이" },
  { name: "정민지", role: "Head of Product", initial: "정" },
  { name: "김도윤", role: "Head of Operations", initial: "김" },
];

const About = ({ navigate }) => {
  return (
    <main>
      <section className="about-hero">
        <div className="container-narrow">
          <span className="eyebrow">About Solveit</span>
          <h1>택배의 모든 것을<br/><em>가장 단순하게.</em></h1>
          <p className="lede">
            택배 서비스를 가장 단순한 형태로 다시 설계합니다.
            여러 앱을 오갈 필요 없이, 송장 하나로 조회하고 클릭 한 번으로 예약하는 그날까지.
          </p>
        </div>
      </section>

      <div className="stats-strip">
        {STATS.map((s, i) => (
          <div key={i} className="stat-item">
            <div className="stat-num">{s.num}<span className="unit">{s.unit}</span></div>
            <div className="stat-label">{s.label}</div>
          </div>
        ))}
      </div>

      {/* Mission */}
      <section className="section">
        <div className="container">
          <div className="mission-grid">
            <div>
              <div className="section-tag">미션</div>
              <h2>택배사가 아닌, <br/>사용자를 위한 택배 서비스.</h2>
              <p className="sub" style={{ marginTop: 20 }}>
                택배는 보내는 사람도, 받는 사람도, 기사님도 모두 사용자입니다.
                솔브잇은 세 사용자의 관점에서 다시 출발해, 흩어진 정보와 단계를 하나로 모았습니다.
              </p>
              <p style={{
                marginTop: 16, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.7
              }}>
                우리는 새로운 운송 인프라를 만들지 않습니다. 대신 이미 존재하는 우수한 택배사들의 데이터와
                기능을 연결해, 사용자가 하나의 일관된 경험을 누릴 수 있도록 합니다. 우리의 일은
                <strong> '연결'과 '단순화'</strong>입니다.
              </p>
            </div>

            <div className="mission-image">
              <div className="mission-image-inner">
                <div className="mock-row">
                  <div className="mock-ic"><Icon name="package" size={14}/></div>
                  <div className="mock-line short"></div>
                </div>
                <div className="mock-row">
                  <div className="mock-ic"><Icon name="pin" size={14}/></div>
                  <div className="mock-line"></div>
                </div>
                <div className="mock-row">
                  <div className="mock-ic"><Icon name="truck" size={14}/></div>
                  <div className="mock-line short"></div>
                </div>
                <div className="mock-row">
                  <div className="mock-ic"><Icon name="check-bold" size={14}/></div>
                  <div className="mock-line"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-head center">
            <div className="section-tag">우리가 일하는 방식</div>
            <h2>세 가지 약속</h2>
          </div>
          <div className="values-grid">
            {VALUES.map(v => (
              <div key={v.n} className="value-card">
                <div className="num">{v.n}</div>
                <h3>{v.title}</h3>
                <p>{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-tag">우리의 이야기</div>
            <h2>2022년 · 3인 팀에서 시작한 여정</h2>
          </div>
          <div className="timeline-vert">
            {TIMELINE.map((t, i) => (
              <div key={i} className={`tv-item ${t.major ? "major" : ""}`}>
                <div className="tv-year">{t.year}</div>
                <h4 className="tv-title">{t.title}</h4>
                <p className="tv-desc">{t.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-head center">
            <div className="section-tag">팀</div>
            <h2>같은 방향을 보는 사람들</h2>
            <p className="sub" style={{ fontSize: 15 }}>
              솔브잇은 현재 30명의 팀으로 운영되고 있습니다. 함께할 동료를 항상 찾고 있어요.
            </p>
          </div>
          <div className="team-grid">
            {TEAM.map(m => (
              <div key={m.name} className="team-card">
                <div className="team-photo">{m.initial}</div>
                <div className="team-name">{m.name}</div>
                <div className="team-role">{m.role}</div>
              </div>
            ))}
          </div>

          <div className="callout" style={{ marginTop: 56 }}>
            <div className="ic"><Icon name="sparkle" size={22}/></div>
            <div className="body">
              <h4>솔브잇과 함께 일해보세요</h4>
              <p>현재 엔지니어링, 디자인, 오퍼레이션 등 다양한 포지션에서 동료를 찾고 있어요.</p>
            </div>
            <button className="btn btn-primary">채용 페이지 보기 <Icon name="arrow-right" size={14}/></button>
          </div>
        </div>
      </section>

      {/* Office info */}
      <section className="section-narrow" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, fontSize: 14
          }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--muted)",
                textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>
                Office
              </div>
              <div style={{ fontWeight: 600 }}>서울 성수 본사</div>
              <div style={{ color: "var(--muted)", marginTop: 4, lineHeight: 1.6 }}>
                서울 성동구 왕십리로 222<br/>
                성수 빌딩 8층
              </div>
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--muted)",
                textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>
                Contact
              </div>
              <div style={{ fontWeight: 600 }}>일반 문의</div>
              <div style={{ color: "var(--muted)", marginTop: 4, lineHeight: 1.6 }}>
                hello@solveit.kr<br/>
                고객센터 1588-0000
              </div>
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--muted)",
                textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>
                Press · 제휴
              </div>
              <div style={{ fontWeight: 600 }}>비즈니스 문의</div>
              <div style={{ color: "var(--muted)", marginTop: 4, lineHeight: 1.6 }}>
                <a href="#" onClick={e => { e.preventDefault(); navigate('partnership'); }}
                  style={{ color: "var(--primary)", borderBottom: "1px solid currentColor" }}>
                  제휴 문의 페이지
                </a><br/>
                partner@solveit.kr
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.About = About;