/* global React */

const PRODUCT_LINES = [
  {
    num: "01",
    name: "PRIME LINE",
    tagline: "V-Cut. קלאסי. הבסיס של PRIME.",
    specs: "9mm · NRC 0.80 · 48 colors",
    status: "available",
  },
  {
    num: "02",
    name: "PRIME PLUS",
    tagline: "שכבה כפולה. ספיגה מקסימלית.",
    specs: "9+12mm · NRC 0.80+ · Premium",
    status: "available",
  },
  {
    num: "03",
    name: "PRIME ART",
    tagline: "3D פיסולי. אקוסטיקה כאמנות.",
    specs: "50×50cm · NRC 0.80 · Sculpted",
    status: "available",
  },
  {
    num: "04",
    name: "PRIME GEO",
    tagline: "גיאומטרי. צעיר. מודרני.",
    specs: "52.5×52.5cm · Hollow-Cut · Pattern",
    status: "available",
  },
  {
    num: "05",
    name: "PRIME RELIEF",
    tagline: "תבליטים עדינים. טקסטורה אדריכלית.",
    specs: "6mm · Surface texture · Refined",
    status: "soon",
  },
  {
    num: "06",
    name: "PRIME WOOD",
    tagline: "סלאט עץ. חם. אדריכלי.",
    specs: "21mm · MDF + PET · Oak / Walnut",
    status: "soon",
  },
];

function ProductLines() {
  return (
    <section className="section section--surface" id="lines" data-screen-label="04 Product lines">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">Product lines</span>
            <h2 className="section-title" style={{marginTop:24}}>שש סדרות.<br/>מצא את שלך.</h2>
          </div>
          <p className="head-right">
            כל סדרה של PRIME בנויה לקטגוריה ולקהל. אותו NRC 0.80. אותו B-s1, d0. סטייל אחר.
          </p>
        </div>

        <div className="lines">
          {PRODUCT_LINES.map(line => (
            <div key={line.num} className={`line-card ${line.status === 'soon' ? 'is-soon' : ''}`}>
              <div className="line-card__head">
                <span className="line-card__num">{line.num} / 06</span>
                {line.status === 'soon' && <span className="line-card__badge">COMING SOON</span>}
              </div>
              <div className="line-card__name">{line.name}</div>
              <div className="line-card__tagline">{line.tagline}</div>
              <div className="line-card__specs">{line.specs}</div>
            </div>
          ))}
        </div>

        <div className="lines__footer">
          <a href="/certificates/" className="lines__cta">
            כל הסדרות נבדקו על ידי SGS. ראה את התעודות
            <span className="arrow">←</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.ProductLines = ProductLines;
window.PRODUCT_LINES = PRODUCT_LINES;