// Landing page

const CARRIERS = [
  "한진택배", "CU", "GS25", "7eleven", "emart24"
];

const Landing = ({ navigate, onTrack }) => {
  const [trackInput, setTrackInput] = React.useState("");

  const handleTrack = (e) => {
    e.preventDefault();
    if (trackInput.trim()) {
      onTrack(trackInput.trim());
    } else {
      onTrack("1234-5678-9012");
    }
  };

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-bg"></div>
        <div className="container-narrow">
          <h1>택배의 모든 것, <em>한 번에</em></h1>
          <p className="lede">
            여러 택배사를 오갈 필요 없이 솔브잇에서.
            <br/>송장번호 하나로 조회하고, 클릭 한 번으로 예약하세요.
          </p>

          <form className="hero-search" onSubmit={handleTrack}>
            <select aria-label="택배사 선택" defaultValue="">
              <option value="">전체 택배사</option>
              {CARRIERS.map(c => <option key={c}>{c}</option>)}
            </select>
            <input
              type="text"
              placeholder="송장번호 입력 (예: 1234-5678-9012)"
              value={trackInput}
              onChange={e => setTrackInput(e.target.value)}
              autoComplete="off"
            />
            <button type="submit" className="btn btn-primary">
              <Icon name="search" size={16}/> 조회
            </button>
          </form>

          <div className="hero-or">
            보낼 택배가 있나요?
            <a href="#" onClick={e => { e.preventDefault(); navigate('reserve'); }}>
              원클릭으로 예약하기 →
            </a>
          </div>

          <div className="hero-metrics">
            <div className="hero-metric">
              <div className="num"><span>1,240</span>만+</div>
              <div className="label">누적 조회 건수</div>
            </div>
            <div className="hero-metric">
              <div className="num"><span>8</span>개사</div>
              <div className="label">제휴 택배사</div>
            </div>
            <div className="hero-metric">
              <div className="num"><span>98.4</span>%</div>
              <div className="label">평균 정시 도착률</div>
            </div>
          </div>
        </div>
      </section>

      {/* CARRIERS */}
      <section style={{ padding: "8px 0 32px" }}>
        <div className="container">
          <div className="carriers">
            {CARRIERS.map(c => (
              <span key={c} className="carrier-pill">
                <span className="carrier-dot"></span>{c}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <h2>흩어진 택배 경험을 하나로</h2>
            <p className="sub">조회, 예약, 알림까지. 매일 쓰는 택배 서비스를 가장 단순한 형태로 다시 설계했습니다.</p>
          </div>
          <div className="feature-grid">
            <div className="feature-card">
              <div className="feature-icon"><Icon name="package" size={22}/></div>
              <h3>통합 조회</h3>
              <p>주요 8개 택배사를 송장번호 하나로. 자동으로 택배사를 인식하고 통합 타임라인으로 보여드려요.</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon"><Icon name="bolt" size={22}/></div>
              <h3>원클릭 예약</h3>
              <p>저장된 주소와 즐겨쓰는 옵션으로 예약을 30초 안에 완료. 픽업 일정도 한 번에 잡습니다.</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon"><Icon name="bell" size={22}/></div>
              <h3>실시간 알림</h3>
              <p>배송 상태가 바뀔 때마다 카카오톡과 푸시로 즉시 알림. 받는 분에게도 자동 공유돼요.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ONE-CLICK SPLIT */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="split">
            <div>
              <div className="section-tag">원클릭 예약</div>
              <h2>주소록 한 번이면 충분합니다</h2>
              <p className="sub">자주 보내는 곳을 저장해두면, 다음부터는 보낼 사람만 골라 30초 안에 끝.</p>
              <ul className="one-click-list">
                <li>
                  <span className="check"><Icon name="check-bold" size={12}/></span>
                  내 주소·받는 분 주소 자동 채움
                </li>
                <li>
                  <span className="check"><Icon name="check-bold" size={12}/></span>
                  마지막 예약 옵션 자동 추천
                </li>
                <li>
                  <span className="check"><Icon name="check-bold" size={12}/></span>
                  픽업 가능한 가장 빠른 시간 즉시 표시
                </li>
                <li>
                  <span className="check"><Icon name="check-bold" size={12}/></span>
                  네이버페이 · 카카오페이 간편 결제
                </li>
              </ul>
              <button className="btn btn-primary btn-lg" onClick={() => navigate('reserve')}>
                지금 예약하기 <Icon name="arrow-right" size={16}/>
              </button>
            </div>

            <div className="split-right">
              <ReservePreview />
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

// Mini visual mock of the one-click reservation
const ReservePreview = () => (
  <div className="preview">
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
      <div style={{ fontWeight: 600, fontSize: 14 }}>원클릭 예약</div>
      <div style={{ fontSize: 12, color: "var(--muted)" }}>3단계 · 약 30초</div>
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <PreviewRow icon="pin" title="보내는 곳" sub="서울 성동구 왕십리로 222 · 우리집" tag="기본"/>
      <PreviewRow icon="user" title="받는 분" sub="김민지 · 010-2345-****" tag="자주"/>
      <PreviewRow icon="package" title="물품" sub="박스 (M) · 의류 · 3kg 이하"/>
      <PreviewRow icon="calendar" title="픽업" sub="내일(목) 오후 2시–4시" tag="가장 빠른"/>
    </div>

    <div style={{
      marginTop: 18, padding: 14, background: "var(--bg-2)",
      borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center"
    }}>
      <span style={{ fontSize: 13, color: "var(--muted)" }}>예상 요금</span>
      <span style={{ fontWeight: 700, fontSize: 16, color: "var(--primary)", fontVariantNumeric: "tabular-nums" }}>
        4,800원
      </span>
    </div>

    <button className="btn btn-primary btn-block" style={{ marginTop: 14 }}>
      <Icon name="bolt" size={14}/> 한 번에 예약
    </button>
  </div>
);

const PreviewRow = ({ icon, title, sub, tag }) => (
  <div style={{
    display: "flex", alignItems: "center", gap: 12,
    padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 10, background: "var(--card)"
  }}>
    <div style={{
      width: 32, height: 32, borderRadius: 8, background: "var(--primary-50)",
      color: "var(--primary)", display: "grid", placeItems: "center"
    }}>
      <Icon name={icon} size={16}/>
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13, fontWeight: 600 }}>{title}</div>
      <div style={{ fontSize: 12, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
        {sub}
      </div>
    </div>
    {tag && (
      <span style={{
        fontSize: 10, padding: "3px 8px", borderRadius: 999,
        background: "var(--primary-50)", color: "var(--primary)", fontWeight: 600
      }}>{tag}</span>
    )}
  </div>
);

window.Landing = Landing;