/* parts/icespec.jsx — Volleiswürfel-Sektion: 3D-Eiswürfel mit Mass-Animation */

function IceSpec(){
  const facts = [
    { big:'30', unit:'g', label:'Gewicht pro Würfel', sub:'Voller Kern, kein Loch' },
    { big:'3×3×3', unit:'cm', label:'Würfelmass', sub:'Präzise geschnitten' },
    { big:'Lange', unit:'kalt', label:'Langsames Schmelzen', sub:'Kühlt ohne zu verwässern' },
  ];
  return (
    <section className="section icespec" id="ice">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Volleiswürfel · Swiss Made</span>
          <h2 className="section-title">Ein Würfel.<br/>Drei Zentimeter.</h2>
          <p className="lead">Massive Volleiswürfel statt hohler Eisstücke: <b>30 Gramm</b> reines Schweizer Eis, exakt <b>3 × 3 × 3 cm</b> geschnitten. Mehr Masse, langsameres Schmelzen — dein Getränk bleibt kalt, ohne zu verwässern.</p>
        </div>

        <div className="icespec-grid reveal">
          {/* 3D-Würfel mit Masslinien */}
          <div className="cube-stage">
            <div className="cube-floor"></div>

            {/* Masslinien */}
            <div className="dim dim-h">
              <span className="dim-line"></span>
              <span className="dim-cap dim-cap-top"></span>
              <span className="dim-cap dim-cap-bot"></span>
              <span className="dim-label">3&nbsp;cm</span>
            </div>
            <div className="dim dim-w">
              <span className="dim-line"></span>
              <span className="dim-cap dim-cap-l"></span>
              <span className="dim-cap dim-cap-r"></span>
              <span className="dim-label">3&nbsp;cm</span>
            </div>

            <div className="ice3d">
              <div className="ice3d-cube">
                <div className="ice-face fz"></div>
                <div className="ice-face bk"></div>
                <div className="ice-face rt"></div>
                <div className="ice-face lf"></div>
                <div className="ice-face tp">
                  <span className="bub b1"></span>
                  <span className="bub b2"></span>
                  <span className="bub b3"></span>
                </div>
                <div className="ice-face bm"></div>
              </div>
            </div>

            <div className="weight-chip"><b>30 g</b><span>pro Würfel</span></div>
          </div>

          {/* Fakten */}
          <div className="spec-list">
            {facts.map((f,i)=>(
              <div key={i} className="spec-card">
                <div className="spec-val"><b>{f.big}</b><span>{f.unit}</span></div>
                <div className="spec-meta">
                  <h3>{f.label}</h3>
                  <p>{f.sub}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IceSpec });