// ============================================
// Why PolyCraft — rotating rings + value points
// ============================================

function Why() {
  const PC = window.PC;
  return (
    <section className="section why">
      <div className="wrap why__inner">
        <div className="why__visual reveal reveal--left">
          <div className="rings">
            <div className="rings__ring rings__ring--1"></div>
            <div className="rings__ring rings__ring--2"></div>
            <div className="rings__ring rings__ring--3"></div>
            <div className="rings__core">
              <span className="label rings__sub">Built on</span>
              <span className="serif rings__title">UE5</span>
              <span className="label rings__sub muted">Real-time pipeline</span>
            </div>
            <span className="rings__pip rings__pip--1"></span>
            <span className="rings__pip rings__pip--2"></span>
            <span className="rings__pip rings__pip--3"></span>
          </div>
        </div>

        <div className="why__copy">
          <span className="eyebrow reveal">07 — Why PolyCraft</span>
          <h2 className="h-1 reveal" data-d="1">
            A studio engineered like<br/>
            <span className="serif it gold-text">a software company</span>.
          </h2>
          <p className="lead reveal" data-d="2">
            We aren't a render shop. We're a production studio that builds its own pipeline — real-time engines, custom plugins, AI augmentation — so we deliver faster without compromising the work.
          </p>

          <ul className="whypoints">
            {PC.whyPoints.map((pt, i) => (
              <li key={i} className="whypoint reveal" data-d={i + 2}>
                <span className="whypoint__mark serif it gold-text">{pt.mark}</span>
                <div className="whypoint__copy">
                  <h3 className="h-3 whypoint__title">{pt.title}</h3>
                  <p className="body">{pt.detail}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

window.Why = Why;