// QYAS — How it works
const { Nav: NavHW, Footer: FooterHW, useLang: useLangHW } = window.QyasShell;

function StepBlock({ num, title, body, accent, children }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr 1fr", gap: 40, padding: "48px 0", borderBottom: "1px solid var(--ink-200)", alignItems: "flex-start" }}>
      <div>
        <div className="mono" style={{ fontSize: 11, fontWeight: 600, color: accent, letterSpacing: "0.08em", marginBottom: 6 }}>STEP</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 56, fontWeight: 700, color: accent, lineHeight: 1, letterSpacing: "-0.04em" }}>{num}</div>
      </div>
      <div>
        <h3 style={{ fontSize: 24, marginBottom: 12 }}>{title}</h3>
        <p style={{ color: "var(--ink-600)", fontSize: 15.5, lineHeight: 1.6 }}>{body}</p>
      </div>
      <div>{children}</div>
    </div>
  );
}

function ReadingForm() {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--ink-200)", borderRadius: 12, padding: 20, maxWidth: 360 }}>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: "0.08em", marginBottom: 6 }}>METER · INLET A-12</div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, marginBottom: 16 }}>Enter current reading</div>
      <div style={{ padding: "16px 18px", border: "2px solid var(--primary)", borderRadius: 10, marginBottom: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 28, fontWeight: 600, color: "var(--ink-900)" }}>4.20</span>
        <span style={{ color: "var(--ink-500)", fontSize: 13 }}>bar</span>
      </div>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-500)", display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
        <span>min 2.0</span><span>max 6.0</span>
      </div>
      <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>Submit reading →</button>
    </div>
  );
}

function ThresholdBar() {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--ink-200)", borderRadius: 12, padding: 24 }}>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: "0.08em", marginBottom: 14 }}>THRESHOLD CHECK</div>
      <div style={{ position: "relative", height: 36, background: "linear-gradient(90deg, rgba(2,132,199,0.18) 0% 17%, rgba(5,150,105,0.18) 17% 50%, rgba(217,119,6,0.18) 50% 83%, rgba(220,38,38,0.18) 83% 100%)", borderRadius: 8, overflow: "hidden" }}>
        <div style={{ position: "absolute", left: "37%", top: -2, bottom: -2, width: 3, background: "var(--ink-900)", borderRadius: 2 }}></div>
        <div style={{ position: "absolute", left: "37%", top: -22, transform: "translateX(-50%)", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: "var(--ink-900)", whiteSpace: "nowrap" }}>4.20 ✓</div>
      </div>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", display: "flex", justifyContent: "space-between", marginTop: 8 }}>
        <span>0</span><span style={{ color: "var(--info)" }}>min 2</span><span style={{ color: "var(--danger)" }}>max 6</span><span>10</span>
      </div>
      <div style={{ marginTop: 18, padding: "10px 12px", background: "rgba(5,150,105,0.08)", borderRadius: 8, fontSize: 13, color: "var(--success)", fontWeight: 600 }}>
        ✓ In range. Stored at 14:32:08 UTC.
      </div>
    </div>
  );
}

function PushPreview() {
  return (
    <div style={{ background: "#0F172A", borderRadius: 18, padding: 18 }}>
      <div className="mono" style={{ fontSize: 10.5, color: "#94A3B8", letterSpacing: "0.08em", marginBottom: 12, padding: "0 4px" }}>PUSH · 14:31:57</div>
      <div style={{ background: "rgba(255,255,255,0.08)", backdropFilter: "blur(20px)", borderRadius: 14, padding: "14px 16px", color: "#fff", border: "1px solid rgba(255,255,255,0.1)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <div style={{ width: 22, height: 22, background: "var(--accent)", borderRadius: 5, display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700 }}>Q</div>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13 }}>QYAS</span>
          </div>
          <span className="mono" style={{ fontSize: 10, color: "#94A3B8" }}>now</span>
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14.5, marginTop: 10 }}>⚠ Pump P-7 over threshold</div>
        <div style={{ fontSize: 12.5, color: "#cbd5e1", marginTop: 4, lineHeight: 1.45 }}>7.2 bar · max 6.0 · Riyadh / Plant 03 / Sec. 2 — Ahmed M. logged 38s ago.</div>
      </div>
    </div>
  );
}

function HowPage() {
  const { lang, setLang } = useLangHW();
  const cta = (window.I18N[lang] || window.I18N.en).cta;
  return (
    <>
      <NavHW active="howItWorks" lang={lang} setLang={setLang} />
      <section style={{ padding: "80px 0 40px", borderBottom: "1px solid var(--ink-200)", background: "#fff" }}>
        <div className="container">
          <span className="eyebrow">HOW IT WORKS</span>
          <h1 style={{ fontSize: "clamp(36px, 4.5vw, 60px)", marginTop: 16, maxWidth: 880 }}>From a notification on a phone to a manager's screen — in under 4 seconds.</h1>
          <p className="lead" style={{ marginTop: 24, fontSize: 19 }}>QYAS runs the same loop seven times a day, every meter, every operator. Here it is — broken down.</p>
        </div>
      </section>

      <section style={{ padding: "0 0 80px", background: "var(--bg)" }}>
        <div className="container">
          <StepBlock num="01" accent="#0B4A6F" title="Operator gets reminded" body="Push notification + email + in-app reminder fires at the configured frequency. The operator opens QYAS to a list of meters due now."><div className="card mono" style={{ fontSize: 12, color: "var(--ink-700)", lineHeight: 1.7 }}>09:00 — Reminder pushed<br/>09:00 — Email sent<br/>09:00 — App badge: 12 due</div></StepBlock>
          <StepBlock num="02" accent="#0B4A6F" title="Selects a meter, enters the reading" body="Each meter shows its full context: name, location, threshold range, last reading. The operator types the current value and submits."><ReadingForm /></StepBlock>
          <StepBlock num="03" accent="#059669" title="System validates against thresholds" body="The reading is checked against configured min and max. In range → stored quietly. Out of range → escalation begins immediately."><ThresholdBar /></StepBlock>
          <StepBlock num="04" accent="#D97706" title="If out of range — push notification" body="Responsible managers (site manager, supervisor, owner) receive a push via OneSignal in under 4 seconds. The push includes meter, value, threshold, and operator."><PushPreview /></StepBlock>
          <StepBlock num="05" accent="#7C3AED" title="Manager responds — or doesn't have to" body="Managers can acknowledge from the notification, log a corrective action, or wait. Every action is timestamped and audit-logged.">
            <div style={{ background: "#fff", border: "1px solid var(--ink-200)", borderRadius: 12, padding: 20 }}>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: "0.08em", marginBottom: 12 }}>RESPONSE TIMELINE</div>
              <div style={{ display: "grid", gap: 10, fontSize: 13 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>14:31:54 · Reading entered</span><span className="mono" style={{ color: "var(--ink-400)" }}>+0s</span></div>
                <div style={{ display: "flex", justifyContent: "space-between", color: "var(--accent)", fontWeight: 600 }}><span>14:31:57 · Push delivered</span><span className="mono">+3.4s</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>14:33:12 · Manager ack'd</span><span className="mono" style={{ color: "var(--ink-400)" }}>+1m18s</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span>14:38:40 · Action logged</span><span className="mono" style={{ color: "var(--ink-400)" }}>+6m46s</span></div>
              </div>
            </div>
          </StepBlock>
          <StepBlock num="06" accent="#0284C7" title="Reading flows into reports" body="Stored with timestamp, GPS, operator, and threshold context. Surfaces immediately in dashboards and the three report types."><DashboardMock /></StepBlock>
        </div>
      </section>

      <section className="blueprint" style={{ padding: "100px 0" }}>
        <div className="container" style={{ textAlign: "center", color: "#fff" }}>
          <h2 style={{ color: "#fff", marginBottom: 20 }}>Run the loop on your own factory.</h2>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 24 }}>
            <a href="contact.html" className="btn btn-amber">{cta.download} <span>↓</span></a>
            <a href="contact.html" className="btn btn-ghost" style={{ background: "rgba(255,255,255,0.06)", borderColor: "rgba(255,255,255,0.12)", color: "#fff" }}>{cta.demo}</a>
          </div>
        </div>
      </section>

      <FooterHW lang={lang} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HowPage />);