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

const FAQ_DATA = [
  {
    q: "מה זה NRC ולמה זה משנה?",
    a: "NRC (Noise Reduction Coefficient) הוא ציון בין 0 ל-1 שמודד כמה רעש החומר בולע. PRIME עם 0.80 NRC בולע 80% מהקול שפוגע בו — שזה גבוה מאוד לחיפוי דקורטיבי. למעשה, מספיק כדי להפוך חדר רגיל לחדר עם איכות סטודיו."
  },
  {
    q: "האם הפאנלים מתאימים לחדר תינוק?",
    a: "בהחלט. הפאנלים עשויים מ-PET ממוחזר מאושר GRS V4.0, ללא פליטות VOC, עומדים בתקן EN 13501-1 לעמידות באש ובטוחים לסביבת שינה. הם גם מורידים רעשים מבחוץ וגם בולעים את הבכי שמהדהד בתוך החדר."
  },
  {
    q: "איך מתקינים? צריך בעל מקצוע?",
    a: "ההתקנה פשוטה — דבק או ברגים על קיר ישר. רוב הלקוחות מתקינים לבד עם מדריך הווידאו שלנו. אם הקיר מורכב או שאתה רוצה תוצאה מושלמת — יש לנו צוות התקנה שמגיע עד הבית בכל הארץ."
  },
  {
    q: "כמה זמן לוקחת ההזמנה?",
    a: "פאנלים בגוונים סטנדרט במלאי — משלוח תוך 3-5 ימי עסקים. הזמנות מיוחדות (גוון/מידה) — 14-21 יום. התקנה זמינה עד שבוע מקבלת ההזמנה."
  },
  {
    q: "האם זה מתאים לחדר גיימינג עם RGB?",
    a: "PRIME הוא חלום של גיימר. הפאנלים בלעו את כל הרעשים החיצוניים (אוויר, רחוב, שכנים) ובאותו זמן משמשים רקע מושלם ל-RGB. הצבעים הכהים שלנו (Charcoal, Sage) מבליטים תאורה צבעונית בצורה מטורפת."
  },
  {
    q: "אפשר להזיז אם אני עובר דירה?",
    a: "אם הותקנו עם דבק — קשה. אם הותקנו עם ברגים על מסילה — קל יחסית, אבל ייתכן צורך בחיפויים חדשים. אנחנו ממליצים על מסילה לדיירים, ועל דבק לבעלי דירה."
  },
  {
    q: "מה ההבדל בין PRIME לפאנלים זולים מאלי-אקספרס?",
    a: "פאנלים זולים נראים דומים. הספיגה שלהם — לא קרובה. PRIME = 9 מ\"מ PET ממוחזר, NRC 0.80, EN 13501-1 B-s1 d0, בדיקת SGS. הזולים? בלי תעודה. ההבדל בסאונד — שמיעתי מיידית."
  },
  {
    q: "למי מתאימים הפאנלים?",
    a: "סטרימרים, פודקאסטרים, מוזיקאים, מהנדסי הקלטה, גיימרים, הורים לתינוקות, אנשים שעובדים מהבית, אוהבי קולנוע ביתי, או סתם מי שלא סובל הד בסלון. אם הסאונד חשוב לך — זה מתאים."
  },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--surface" id="faq" data-screen-label="06 FAQ">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 className="section-title" style={{marginTop:24}}>שאלות.<br/>תשובות.</h2>
          </div>
          <p className="head-right">
            הכל מה שאנשים שואלים אותנו לפני שהם מזמינים. עוד שאלה?
            <br/>WhatsApp: 072-212-2014
          </p>
        </div>
        <div className="faq__list">
          {FAQ_DATA.map((item, i) => (
            <div key={i} className={`faq__item ${open === i ? 'open' : ''}`}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="icon">+</span>
              </button>
              <div className="faq__a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <section className="cta-section" id="contact" data-screen-label="07 Contact">
      <div className="wrap cta-section__inner">
        <div>
          <span className="eyebrow">Free consult</span>
          <h2 style={{marginTop:24}}>
            דבר עם<br/>
            <span className="accent">בן אדם</span>.<br/>
            לא צ׳אטבוט.
          </h2>
          <p style={{marginTop:32, fontSize:18, maxWidth:480}}>
            10 דקות שיחה. נבין את החדר שלך, נמליץ על כמות וגוון, ניתן הצעת מחיר.
            בלי מחויבות. בלי מכירת לחץ.
          </p>
          <div style={{marginTop:48, display:'flex', gap:32, flexWrap:'wrap'}}>
            <div>
              <div className="mono" style={{fontSize:11, color:'var(--text-mute)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:6}}>Phone · WhatsApp</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:28}}>072-212-2014</div>
            </div>
            <div>
              <div className="mono" style={{fontSize:11, color:'var(--text-mute)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:6}}>Showroom</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:28}}>פנחס החוצב 1, ב״ש</div>
            </div>
          </div>
        </div>

        {!submitted ? (
          <form className="form" onSubmit={handleSubmit}>
            <div className="form__field">
              <label>שם מלא</label>
              <input type="text" required placeholder="הקלד שם" />
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>טלפון</label>
                <input type="tel" required placeholder="050-0000000" />
              </div>
              <div className="form__field">
                <label>אימייל</label>
                <input type="email" placeholder="optional@email.com" />
              </div>
            </div>
            <div className="form__field">
              <label>מטרת השימוש</label>
              <select defaultValue="">
                <option value="" disabled>בחר חדר</option>
                <option>חדר גיימינג</option>
                <option>אולפן הקלטות / פודקאסט</option>
                <option>סלון / הום סינמה</option>
                <option>חדר תינוק</option>
                <option>משרד / Home Office</option>
                <option>אחר</option>
              </select>
            </div>
            <div className="form__field">
              <label>כמה מילים על הפרויקט (לא חובה)</label>
              <textarea rows="3" placeholder="גודל החדר, סגנון עיצוב, לוח זמנים..." />
            </div>
            <button type="submit" className="btn btn--primary">
              <span>שלח — נחזור תוך שעה</span>
              <span className="arrow">←</span>
            </button>
          </form>
        ) : (
          <div className="form" style={{textAlign:'center', padding:60, alignItems:'center', justifyContent:'center'}}>
            <div style={{fontSize:60, marginBottom:16}}>✦</div>
            <h3 style={{color:'var(--volt)', fontSize:32, marginBottom:12}}>קיבלנו!</h3>
            <p>נחזור אליך תוך שעה. בינתיים, תרגיש חופשי לקרוא את ה-FAQ למעלה.</p>
          </div>
        )}
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div className="footer__brand">
            <div className="nav__logo">PRIME<span className="dot" /></div>
            <p>LOOK SHARP. SOUND PURE.<br/>חיפויי קיר אקוסטיים פרימיום. מאומת על ידי SGS. מאושר B-s1, d0.</p>
          </div>
          <div className="footer__col">
            <h4>נקודות הפצה</h4>
            <ul>
              <li><a href="https://www.welcome.org.il">Welcome Design — Beer Sheva</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>חברה</h4>
            <ul>
              <li><a href="mailto:info@prime-acoustic.co.il">יצירת קשר</a></li>
              <li><a href="/certificates/">תעודות בדיקה</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>תקני בדיקה</h4>
            <ul>
              <li><span className="footer__standard">ISO 11654 — אקוסטיקה</span></li>
              <li><span className="footer__standard">EN 13501-1 — בטיחות אש</span></li>
              <li><span className="footer__standard">ASTM E84 — תקן אמריקאי</span></li>
              <li><span className="footer__standard">GRS V4.0 — קיימות</span></li>
              <li><span className="footer__standard">REACH — בטיחות כימית</span></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>משפטי</h4>
            <ul>
              <li><a href="/privacy/">מדיניות פרטיות</a></li>
              <li><a href="/accessibility/">הצהרת נגישות</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 PRIME Acoustic Design</span>
          <span>BEER SHEVA · IL</span>
        </div>
      </div>
    </footer>
  );
}

window.FAQ = FAQ;
window.Contact = Contact;
window.Footer = Footer;
window.FAQ_DATA = FAQ_DATA;