/* AI WORKFORCE — the ecosystem section. The single most differentiating
   pitch on the site: these aren't tools, they're employees; they build
   themselves; they learn from every other realtor's agents in the network;
   and the realtor reconfigures them with a voice note. */

const Workforce = ({ lang }) => {
  const isAR = lang === "ar";

  const traits = isAR ? [
  {
    n: "01",
    kicker: "يبنون أنفسهم",
    t: "النظام يصنع موظفين جددًا.",
    d: "لاحظ النظام أنّ مستأجريك يسألون عن خطط الدفع؟ يبني موظّفًا للمفاوضات. تحتاج تغطية بالروسيّة الليلة؟ يبني موظفًا بالروسيّة. لا تفتح تذكرة. لا تنتظر إصدارًا."
  },
  {
    n: "02",
    kicker: "بصوتك",
    t: "أنت تُملي، النظام يطبّق.",
    d: "«لا تسألي عن الميزانية قبل المعاينة الثانية.» تُلقي رسالة صوتيّة. خلال ثوانٍ، كل موظف على نطاقك يطبّقها — وإن لزم وكيل جديد، يُبنى."
  },
  {
    n: "03",
    kicker: "يتعلّمون من الشبكة",
    t: "كل صفقة لكل وكيل تجعلك أذكى.",
    d: "موظفو الذكاء عند كل عميل آخر يتشاركون الدروس — أيّ سيناريو يحوّل، أيّ توقيت يحجز، أيّ نَبرة تُغلق. أنت لا تُشارك بياناتك. تَستفيد من نتائج الشبكة."
  },
  {
    n: "04",
    kicker: "يديرون أنفسهم",
    t: "تتحسّن أسبوعيًا، تلقائيًا.",
    d: "النظام يقيس ما يعمل، يُعيد كتابة ما لا يعمل، ويتخلّى عن المسارات الضعيفة. أنت تستقبل تقريرًا أسبوعيًا واحدًا — وتعود إلى الإغلاق."
  }] :
  [
  {
    n: "01",
    kicker: "Self-building",
    t: "The system spawns new employees.",
    d: "🛠️ Tenants asking about payment plans? It builds a negotiation agent. Need Russian coverage tonight? It builds a Russian-speaking agent. No tickets. No releases. No waiting."
  },
  {
    n: "02",
    kicker: "Voice-configured",
    t: "You speak. The system ships.",
    d: "🎙️ \"Stop asking about budget before the second viewing.\" Voice-note it. Within seconds every agent across your stack adopts the change — and a new agent is built if one is needed."
  },
  {
    n: "03",
    kicker: "Network-learning",
    t: "Every realtor's deals make yours sharper.",
    d: "🌐 AI employees on the network share what's working — which script converts, which timing books, which tone closes. Your data stays yours. The lessons compound across the whole ecosystem."
  },
  {
    n: "04",
    kicker: "Self-managing",
    t: "Gets better, weekly, without you.",
    d: "📈 The system measures what works, rewrites what doesn't, retires the dead flows. You get one weekly report — and your hours back for closing."
  }];

  return (
    <section className="section workforce" id="workforce" data-screen-label="04 Workforce">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/03</span>
            <span className="eyebrow">{isAR ? "نظامٌ غيرُ مسبوق" : "A different kind of system"}</span>
          </div>
          <h2>
            {isAR ? <>موظفوك يتعلّمون من <span className="it">كل</span> موظف ذكاء في الشبكة.</> :
            <>Your employees learn from <span className="it">every</span> AI employee on the network.</>}
          </h2>
        </div>

        <p className="lead workforce-lead">
          {isAR ?
          "ليست أدوات. موظّفون. يبنون أنفسهم، يديرون أنفسهم، ويتحسّنون مع كل تجربة — تجربتك، وتجربة كل وكيل آخر. هكذا يصبح من المستحيل تقريبًا عدم النجاح." :
          "Not tools. Employees. They build themselves, manage themselves, and get better with every experience — yours, and every other realtor's. That's how you build a system it's almost impossible not to win with."}
        </p>

        <div className="wf-grid">
          {traits.map((it) =>
            <div className="wf-card" key={it.n}>
              <div className="wf-top mono">
                <span className="wf-num">{it.n}</span>
                <span className="wf-kicker">{it.kicker}</span>
              </div>
              <div className="wf-title">{it.t}</div>
              <div className="wf-desc">{it.d}</div>
            </div>
          )}
        </div>

        {/* Live "voice-note → ships" demo strip */}
        <div className="wf-voice">
          <div className="wf-voice-lhs">
            <div className="wf-voice-eye mono">
              {isAR ? "مثال · رسالة صوتيّة → تحديث الفريق" : "Example · Voice-note → workforce update"}
            </div>
            <div className="wf-quote">
              {isAR ?
              "«غيّروا أوّل ردّ لاستفسارات Downtown إلى لهجة خليجيّة، واسألوا عن الميزانيّة قبل الحجز.»" :
              "\"For Downtown inquiries, switch the first reply to a Khaleeji tone and ask budget before booking.\""}
            </div>
            <div className="wf-voice-meta mono">
              {isAR ? "أنت · ٠٠:٠٨ ثانية" : "You · 0:08 sec"}
            </div>
          </div>

          <div className="wf-voice-arrow" aria-hidden="true">
            <svg viewBox="0 0 80 24" width="80" height="24">
              <path d="M 4 12 L 72 12" stroke="currentColor" strokeWidth="1.5" fill="none"></path>
              <path d="M 64 5 L 74 12 L 64 19" stroke="currentColor" strokeWidth="1.5" fill="none"></path>
            </svg>
          </div>

          <div className="wf-voice-rhs">
            <div className="wf-voice-eye mono">
              {isAR ? "النظام · بعد ٤ ثوانٍ" : "System · 4 seconds later"}
            </div>
            <ul className="wf-list">
              <li><span className="wf-check">✓</span>{isAR ? "موظف Downtown — تحديث القالب" : "Downtown agent — template updated"}</li>
              <li><span className="wf-check">✓</span>{isAR ? "نَبرة خليجيّة — تُطبَّق على ٤ مسارات" : "Khaleeji tone — applied across 4 flows"}</li>
              <li><span className="wf-check">✓</span>{isAR ? "وكيل تأهيل ميزانيّة — تمّ إنشاؤه" : "Budget-qualifier agent — created"}</li>
              <li><span className="wf-check">✓</span>{isAR ? "اختبار A/B — يبدأ تلقائيًا" : "A/B test — running automatically"}</li>
            </ul>
          </div>
        </div>
      </div>

      <style>{`
        .workforce { position: relative; }
        .workforce-lead {
          max-width: 38ch;
          font-size: clamp(26px, 2.8vw, 42px);
          line-height: 1.25;
          font-style: italic;
          margin-bottom: 80px;
        }

        .wf-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0;
          border-top: 1px solid var(--rule);
          border-left: 1px solid var(--rule);
          margin-bottom: 96px;
        }
        .wf-card {
          padding: 48px 40px;
          border-right: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          display: flex;
          flex-direction: column;
          gap: 18px;
          min-height: 280px;
          transition: background .35s var(--ease);
        }
        .wf-card:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }

        .wf-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--muted);
          margin-bottom: 12px;
        }
        .wf-num { color: var(--accent); }
        .wf-kicker { color: var(--ink); }
        .wf-title {
          font-size: clamp(24px, 2.2vw, 34px);
          line-height: 1.1;
          letter-spacing: -0.02em;
        }
        .wf-desc {
          font-size: 15px;
          color: var(--muted);
          line-height: 1.6;
          max-width: 46ch;
          margin-top: auto;
        }

        /* Voice-note strip */
        .wf-voice {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          gap: 56px;
          align-items: stretch;
          padding: 56px;
          border: 1px solid var(--rule-2);
          background:
            radial-gradient(at 0% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 50%),
            color-mix(in oklab, var(--ink) 3%, transparent);
        }
        .wf-voice-lhs, .wf-voice-rhs { display: flex; flex-direction: column; gap: 16px; }
        .wf-voice-eye {
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--muted);
        }
        .wf-quote {
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(22px, 2vw, 30px);
          line-height: 1.3;
          color: var(--ink);
        }
        .wf-voice-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.16em; }

        .wf-voice-arrow {
          display: flex;
          align-items: center;
          color: var(--accent);
          animation: wfArrow 2s ease-in-out infinite;
        }
        @keyframes wfArrow {
          0%, 100% { transform: translateX(0); opacity: 0.8; }
          50%      { transform: translateX(6px); opacity: 1; }
        }

        .wf-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
          font-size: 15px;
          color: var(--ink);
        }
        .wf-list li { display: flex; gap: 12px; align-items: flex-start; }
        .wf-check { color: var(--accent); font-weight: 600; }

        @media (max-width: 900px) {
          .wf-grid { grid-template-columns: 1fr; margin-bottom: 56px; }
          .wf-card { padding: 28px 22px; min-height: 0; }
          .wf-voice { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
          .wf-voice-arrow { transform: rotate(90deg); align-self: center; }
        }
      `}</style>
    </section>
  );
};

window.Workforce = Workforce;
