/* global React */
const { useState } = React;

// ============ SPECS ============
function Specs() {
  return (
    <section className="section section--surface" id="specs" data-screen-label="04 Specs">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">Tech specs</span>
            <h2 className="section-title" style={{marginTop:24}}>המספרים<br/>שעושים את ההבדל.</h2>
          </div>
          <p className="head-right">
            כל פאנל PRIME עובר בדיקות מעבדה. אין כאן הבטחות — רק
            דאטה שתוכל להחזיק מולה ספסיפיקציה.
          </p>
        </div>
        <div className="specs__grid">
          <div className="spec-product">
            <div className="spec-product__viz">
              <PanelViz />
            </div>
            <div className="spec-product__meta">
              <span>PRIME LINE / V1</span>
              <span>SKU PRIME-LINE-9MM</span>
            </div>
          </div>
          <div className="spec-list">
            <div className="spec-row">
              <div>
                <div className="spec-row__label">Noise Reduction</div>
                <div className="spec-row__desc">דירוג NRC לפי ASTM C423</div>
              </div>
              <div className="spec-row__value">0.80<small>NRC</small></div>
            </div>
            <div className="spec-row">
              <div>
                <div className="spec-row__label">Dimensions</div>
                <div className="spec-row__desc">הרכבה אדריכלית מיחידות 240×52.5 ס"מ — בלי חיבורים נראים על הקיר</div>
              </div>
              <div className="spec-row__value">280×120<small>cm</small></div>
            </div>
            <div className="spec-row">
              <div>
                <div className="spec-row__label">Thickness</div>
                <div className="spec-row__desc">דק מספיק שלא יבלוט. עבה מספיק שיבלע.</div>
              </div>
              <div className="spec-row__value">9<small>mm</small></div>
            </div>
            <div className="spec-row">
              <div>
                <div className="spec-row__label">Material</div>
                <div className="spec-row__desc">לבד אקוסטי + חיפוי דקורטיבי</div>
              </div>
              <div className="spec-row__value">PET<small>+ decorative</small></div>
            </div>
            <div className="spec-row">
              <div>
                <div className="spec-row__label">Fire rating</div>
                <div className="spec-row__desc">תקן EN 13501-1</div>
              </div>
              <div className="spec-row__value">B-s1, d0</div>
            </div>
            <div className="spec-row">
              <div>
                <div className="spec-row__label">Finishes</div>
                <div className="spec-row__desc">אבן · אלון בהיר · Charcoal · Sage · בהזמנה</div>
              </div>
              <div className="spec-row__value">4<small>+ custom</small></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PanelViz() {
  return (
    <svg viewBox="0 0 240 280" style={{width:'100%',height:'100%'}}>
      <defs>
        <linearGradient id="pg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#262626"/>
          <stop offset="1" stopColor="#1a1a1a"/>
        </linearGradient>
      </defs>
      <g transform="translate(40, 20) rotate(-8 80 120)">
        <rect width="160" height="240" rx="8" fill="url(#pg)" stroke="#333" strokeWidth="0.5"/>
        {/* Vertical lines pattern (slat panel) */}
        {Array.from({length: 14}).map((_,i) => (
          <line key={i} x1={12 + i*10.5} y1="12" x2={12 + i*10.5} y2="228" stroke="#0f0f0f" strokeWidth="2.5"/>
        ))}
        {/* corner label */}
        <circle cx="20" cy="20" r="3" fill="var(--volt)"/>
      </g>
      {/* dimension labels */}
      <text x="120" y="278" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#5a5a56" letterSpacing="2">120 cm</text>
      <text x="232" y="140" fontFamily="var(--font-mono)" fontSize="9" fill="#5a5a56" letterSpacing="2" transform="rotate(90 232 140)">280 cm</text>
    </svg>
  );
}

// ============ CALCULATOR ============
function Calculator() {
  const [w, setW] = useState(4);
  const [h, setH] = useState(2.6);
  const [coverage, setCoverage] = useState(60); // %

  const wallArea = w * h;
  const targetArea = wallArea * (coverage / 100);
  const panelArea = 1.2 * 2.8; // m² — PRIME LINE 280×120
  const panels = Math.ceil(targetArea / panelArea);
  // NRC absorption estimate based on coverage
  const nrcEffective = (0.80 * coverage / 100).toFixed(2);
  const dbDrop = Math.round(10 * Math.log10(1 / (1 - 0.80 * coverage/100 * 0.6)));

  return (
    <section className="section" id="calc" data-screen-label="05 Calculator">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">Room calculator</span>
            <h2 className="section-title" style={{marginTop:24}}>כמה פאנלים<br/>צריך לחדר שלי?</h2>
          </div>
          <p className="head-right">
            הזן את מידות הקיר ואת הכיסוי הרצוי — נחשב לך אומדן של
            כמות פאנלים והפחתת רעש משוערת. אומדן בלבד; ייעוץ אישי = מדויק יותר.
          </p>
        </div>

        <div className="calc">
          <div>
            <h3>בנה את הפיתרון.</h3>
            <p>סלייד את המספרים. החדר מתעצב בזמן אמת.</p>
            <div className="calc__inputs">
              <div className="calc__field">
                <div className="calc__row">
                  <label>רוחב קיר</label>
                  <span className="val">{w.toFixed(1)} מ׳</span>
                </div>
                <input className="calc__slider" type="range" min="1" max="10" step="0.1" value={w} onChange={e => setW(+e.target.value)} />
              </div>
              <div className="calc__field">
                <div className="calc__row">
                  <label>גובה קיר</label>
                  <span className="val">{h.toFixed(1)} מ׳</span>
                </div>
                <input className="calc__slider" type="range" min="2" max="4" step="0.1" value={h} onChange={e => setH(+e.target.value)} />
              </div>
              <div className="calc__field">
                <div className="calc__row">
                  <label>אחוז כיסוי</label>
                  <span className="val">{coverage}%</span>
                </div>
                <input className="calc__slider" type="range" min="20" max="100" step="5" value={coverage} onChange={e => setCoverage(+e.target.value)} />
              </div>
            </div>
          </div>

          <div className="calc__result">
            <div className="calc__result-label">כמות פאנלים</div>
            <div className="calc__big">{panels}<small>יח׳</small></div>
            <div className="calc__breakdown">
              <div>
                <small>שטח קיר</small>
                <span>{wallArea.toFixed(1)} מ"ר</span>
              </div>
              <div>
                <small>שטח מכוסה</small>
                <span>{targetArea.toFixed(1)} מ"ר</span>
              </div>
              <div>
                <small>הפחתת רעש</small>
                <span>~{dbDrop}<small style={{fontSize:14, color:'var(--text-mute)'}}> dB</small></span>
              </div>
            </div>
            <a href="#where" className="btn btn--primary" style={{marginTop:24,alignSelf:'flex-start'}}>
              <span>איפה רואים את המוצר</span>
              <span className="arrow">←</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Specs = Specs;
window.Calculator = Calculator;