// src/services.jsx — SERVICES: pyramid + expandable detail

function Services({ onBook }) {
  const { services } = window.DATA;
  const [openIdx, setOpenIdx] = React.useState(null);

  return (
    <section id="services" className="sec">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="sec-tag">04 / Services</div>
              <h2>七档服务，<em style={{ fontStyle: "normal", color: "var(--accent)", fontFamily: "var(--display)" }}>从 ¥980 到 ¥100 万</em>。<br/>每一档都写清楚"适合谁"，更写清楚"不适合谁"。</h2>
            </div>
            <div className="sec-meta">当前可接 · 2025 Q3</div>
          </div>
        </Reveal>

        <Reveal>
          <div className="svc-pyramid">
            {services.map((s, i) => (
              <div key={s.tier} className={`svc-tier t-${s.tier}${openIdx === i ? " open" : ""}`}
                   onClick={() => setOpenIdx(openIdx === i ? null : i)}>
                <div className="tier-mark">{String(s.tier).padStart(2, "0")}</div>
                <div className="name">
                  {s.name}
                  <span className="sub">{s.sub}</span>
                </div>
                <div className="price">{s.price}</div>
                <div className="dur">{s.dur}</div>
                <div className="chev">›</div>

                {openIdx === i && (
                  <div className="svc-detail">
                    <div className="svc-detail-grid">
                      <div className="svc-detail-col">
                        <div className="lbl">适合谁</div>
                        <ul>
                          {s.forWho.map((x, j) => <li key={j}>{x}</li>)}
                        </ul>
                        <div className="lbl" style={{ marginTop: 22 }}>不适合谁</div>
                        <ul>
                          {s.notFor.map((x, j) => <li key={j} className="x">{x}</li>)}
                        </ul>
                      </div>
                      <div className="svc-detail-col">
                        <div className="lbl">包含什么</div>
                        <ul className="no-bullets">
                          {s.includes.map((x, j) => <li key={j}>· {x}</li>)}
                        </ul>
                        <div className="lbl" style={{ marginTop: 22 }}>交付什么</div>
                        <ul className="no-bullets">
                          {s.delivers.map((x, j) => <li key={j}>→ {x}</li>)}
                        </ul>
                      </div>
                    </div>
                    <div className="case-strip">
                      <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--mute)", letterSpacing: ".1em", textTransform: "uppercase", alignSelf: "center", marginRight: 4 }}>已合作</span>
                      {s.cases.map((c, j) => (
                        <span key={j} className="case-pill">{c}</span>
                      ))}
                    </div>
                    <div className="book-btn">
                      <button className="btn btn-primary" onClick={(e) => { e.stopPropagation(); onBook(); }}>
                        预约 {s.name} <span className="arr">→</span>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal>
          <p style={{ marginTop: 56, textAlign: "center", fontSize: 13, color: "var(--mute)", maxWidth: 640, marginLeft: "auto", marginRight: "auto", lineHeight: 1.7 }}>
            点击任一服务展开详情。每一档都是真实接过的产品，
            金额是开过的真实合同区间——不虚构、不"按询价"。
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Services = Services;