/* About page */

const VALUES = [
  { ic: "shield",   title: "אמינות ויושרה",        text: "מילה שלנו = חוזה. עומדים בהתחייבויות, גם כשקשה. בלי הפתעות בחשבון הסופי." },
  { ic: "award",    title: "איכות ללא פשרות",      text: "חומרי גלם פרימיום, ציוד מתקדם, ובקרת איכות פנימית על כל הזמנה." },
  { ic: "users",    title: "שירות אישי",            text: "מנהל לקוח ייעודי לכל פרויקט — אותו איש קשר מהשיחה הראשונה ועד האספקה." },
];

const TEAM = [
  { initials: "אר", name: "אלי רובין",   role: "מנכ״ל ובעלים" },
  { initials: "שכ", name: "שירה כהן",    role: "סמנכ״ל ייצור" },
  { initials: "יל", name: "יואב לוי",    role: "מנהל לקוחות אסטרטגיים" },
  { initials: "מס", name: "מאיה ספיר",   role: "מעצבת ראשית" },
];

const TIMELINE = [
  { y: "2003", t: "הקמת המפעל",       d: "אלי רובין מקים את המפעל בחדרה." },
  { y: "2009", t: "מעבר לדפוס דיגיטלי", d: "השקעה בטכנולוגיית הדפסה דיגיטלית רחבת פורמט." },
  { y: "2015", t: "חוזה הלאומי",        d: "הסכם רב-שנתי עם משרד החוץ לאספקת דגלים." },
  { y: "2020", t: "הרחבת המפעל",        d: "הכפלת שטח הייצור ותוספת מערכי תפירה." },
  { y: "2024", t: "ISO 9001",          d: "הסמכה רשמית לתקן ניהול האיכות הבינלאומי." },
];

function AboutPage() {
  const [mobile, setMobile] = React.useState(false);
  useReveal();
  return (
    <React.Fragment>
      <TopBar />
      <Header current="about.html" onMobileOpen={() => setMobile(true)} />
      <MobileMenu open={mobile} onClose={() => setMobile(false)} />
      <main>
        <section className="page-hero">
          <div className="container">
            <div className="breadcrumb">
              <a href="index.html">דף הבית</a>
              <span className="sep">›</span>
              <span>אודות</span>
            </div>
            <h1>אודות א. רובין דגלים</h1>
            <p>מפעל ייצור ומיתוג ישראלי. מאז 2003 אנו מספקים דגלים, שילוט וטקסטיל ממותג לעיריות, חברות ומוסדות בכל הארץ.</p>
          </div>
        </section>

        <section className="section">
          <div className="container">
            <div className="about-intro">
              <div className="reveal">
                <span style={{ display: 'inline-block', padding: '6px 14px', background: 'rgba(214,40,57,0.10)', color: 'var(--red)', borderRadius: 999, fontSize: 13, fontWeight: 600, marginBottom: 14 }}>הסיפור שלנו</span>
                <h2>מפעל ישראלי, אנשים ישראליים, ייצור ישראלי.</h2>
                <p>
                  התחלנו בסדנא קטנה בחדרה ב-2003, עם מכונת תפירה אחת ושני עובדים. היום
                  אנחנו מפעל מקצועי עם מעל 25 עובדים, ציוד תעשייתי מתקדם, וצוות עיצוב פנימי
                  המייצר אלפי הזמנות בשנה.
                </p>
                <p>
                  לאורך השנים שמרנו על אותו ערך: כל הזמנה מקבלת יחס אישי. ממש כמו פעם.
                  גם כשמדובר בהזמנה של 10,000 דגלים לעיריית תל אביב, וגם כשמדובר בעשרה
                  דגלים לחתונה של בני משפחה.
                </p>
                <p>
                  אנחנו מאמינים שבארץ קטנה, איכות אמיתית נבנית מקשרים אישיים, לא ממערכות
                  אוטומטיות ודיווחי שיווק.
                </p>
              </div>
              <div className="about-visual reveal">
                <div className="ph dark" data-label="image · factory-exterior" />
                <div className="ph weave" data-label="image · stitching" />
                <div className="ph" data-label="image · machine" />
              </div>
            </div>

            <div className="about-stats">
              <div className="about-stat">
                <strong>+20</strong>
                <span>שנות פעילות</span>
              </div>
              <div className="about-stat">
                <strong>+850</strong>
                <span>לקוחות עסקיים</span>
              </div>
              <div className="about-stat">
                <strong>+60</strong>
                <span>עיריות וגופים</span>
              </div>
              <div className="about-stat">
                <strong>25</strong>
                <span>עובדים מומחים</span>
              </div>
            </div>

            <h2 className="section-title">הערכים שלנו</h2>
            <div className="section-rule" />
            <div className="about-values">
              {VALUES.map((v, i) => (
                <div key={v.title} className="value-card reveal" style={{ transitionDelay: `${i * 60}ms` }}>
                  <div className="ic"><Icon name={v.ic} size={24} /></div>
                  <h3>{v.title}</h3>
                  <p>{v.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section" style={{ background: 'var(--bg)' }}>
          <div className="container">
            <h2 className="section-title">לוח הזמנים שלנו</h2>
            <div className="section-rule" />
            <div style={{ maxWidth: 760, margin: '0 auto' }}>
              {TIMELINE.map((t, i) => (
                <div key={t.y} className="reveal" style={{
                  display: 'grid',
                  gridTemplateColumns: '100px 1fr',
                  gap: 24,
                  padding: '20px 0',
                  borderBottom: i < TIMELINE.length - 1 ? '1px solid var(--border-2)' : 'none',
                  transitionDelay: `${i * 60}ms`
                }}>
                  <div style={{
                    fontSize: 22,
                    color: 'var(--red)',
                    fontWeight: 800,
                    letterSpacing: '-0.02em'
                  }}>{t.y}</div>
                  <div>
                    <strong style={{ display: 'block', color: 'var(--blue)', fontSize: 17, marginBottom: 4 }}>{t.t}</strong>
                    <span style={{ color: 'var(--text-2)', fontSize: 14.5 }}>{t.d}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section">
          <div className="container">
            <h2 className="section-title">הצוות שלנו</h2>
            <div className="section-rule" />
            <div className="team-grid">
              {TEAM.map((m, i) => (
                <div key={m.name} className="team-card reveal" style={{ transitionDelay: `${i * 60}ms` }}>
                  <div className="team-avatar">{m.initials}</div>
                  <strong>{m.name}</strong>
                  <span>{m.role}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        <FinalCTA />
      </main>
      <Footer />
      <StickyWhatsapp />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AboutPage />);