// sections-mid.jsx — HowItWorks, Leakage, Integrations
const { useState: useStateM } = React;

/* ---------------------------------------------------------------- HOW IT WORKS */
function HowItWorks() {
  const {t}=useLang();
  const steps = [
    [t("how.step1.title"), t("how.step1.desc")],
    [t("how.step2.title"), t("how.step2.desc")],
    [t("how.step3.title"), t("how.step3.desc")],
    [t("how.step4.title"), t("how.step4.desc")],
  ];
  return (
    <section id="how" className="section" style={{ position: "relative" }}>
      <div className="wrap">
        <div style={{ maxWidth: 760 }}>
          <Reveal><span className="eyebrow">{t("how.eyebrow")}</span></Reveal>
          <Reveal delay={120}><h2 className="d-lg" style={{ marginTop: 20 }}>
            {t("how.heading")}</h2></Reveal>
          <Reveal delay={220} className="lead" style={{ marginTop: 22, maxWidth: "54ch" }}>
            {t("how.leadPre")} <em>{t("how.leadEm")}</em>
          </Reveal>
        </div>

        <Reveal delay={120} style={{ marginTop: 54 }}><ControlLayer /></Reveal>

        <div className="steps-grid" style={{
          marginTop: 64, display: "grid",
          gridTemplateColumns: "repeat(4,1fr)", gap: "clamp(20px,2.4vw,34px)"
        }}>
          {steps.map(([title, desc], i) => (
            <Reveal key={i} delay={i * 90} as="div">
              <div style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--drift)", fontWeight: 600 }}>
                {String(i+1).padStart(2,"0")}
              </div>
              <div className="hairline" style={{ margin: "14px 0 16px" }} />
              <h3 style={{ fontSize: 23, letterSpacing: "-.02em" }}>{title}</h3>
              <p style={{ marginTop: 10, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.5 }}>{desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ControlLayer() {
  const {t}=useLang();
  const sources = ["cl.s1","cl.s2","cl.s3","cl.s4","cl.s5","cl.s6","cl.s7","cl.s8"].map(k=>t(k));
  const outputs = [
    [t("cl.out1"), "var(--drift)"],
    [t("cl.out2"), "var(--ink)"],
    [t("cl.out3"), "var(--ink)"],
    [t("cl.out4"), "var(--agreed)"],
  ];
  return (
    <div className="card" style={{
      padding: "clamp(22px,3vw,38px)", background: "var(--paper)",
      boxShadow: "0 40px 80px -54px rgba(20,20,22,.4)"
    }}>
      <Mono style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".1em" }}>{t("cl.sourcesLabel")}</Mono>
      <div className="sources-grid" style={{marginTop:14,display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:9}}>
        {sources.map((s,i)=>(
          <span key={i} style={{fontFamily:"var(--mono)",fontSize:12,color:"var(--ink-2)",
            border:"1px solid var(--line)",background:"var(--paper-2)",padding:"8px 12px",borderRadius:9,
            display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center"}}>{s}</span>
        ))}
      </div>
      <div style={{ height: 30, display: "grid", placeItems: "center" }}>
        <svg width="100%" height="30" viewBox="0 0 800 30" preserveAspectRatio="none" aria-hidden="true">
          <path d="M40 0 V14 Q40 22 60 22 H740 Q760 22 760 14 V0" fill="none" stroke="var(--line)" strokeWidth="1.5" />
          <path d="M400 22 V30" stroke="var(--line)" strokeWidth="1.5" />
        </svg>
      </div>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
        padding: "18px 22px", borderRadius: 12, background: "var(--ink)", color: "var(--paper)"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Logo on="dark" size={26} wordmark={false} />
          <div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 18, letterSpacing: "-.02em" }}>{t("cl.layerName")}</div>
            <Mono style={{ fontSize: 11, opacity: .6 }}>{t("cl.layerSub")}</Mono>
          </div>
        </div>
        <Mono style={{ fontSize: 11, opacity: .6, letterSpacing: ".08em" }}>MULTI-TENANT · AUDIT-TRAILED · MFA</Mono>
      </div>
      <div style={{ height: 30, display: "grid", placeItems: "center" }}>
        <svg width="100%" height="30" viewBox="0 0 800 30" preserveAspectRatio="none" aria-hidden="true">
          <path d="M400 0 V8" stroke="var(--line)" strokeWidth="1.5" />
          <path d="M40 30 V16 Q40 8 60 8 H740 Q760 8 760 16 V30" fill="none" stroke="var(--line)" strokeWidth="1.5" />
        </svg>
      </div>
      <div className="outputs" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 9 }}>
        {outputs.map(([label, c]) => (
          <div key={label} style={{
            border: "1px solid var(--line)", borderRadius: 9, padding: "12px 14px",
            display: "flex", alignItems: "center", gap: 9
          }}>
            <i style={{ width: 7, height: 7, borderRadius: 7, background: c, display: "block" }} />
            <span style={{ fontSize: 13.5, fontWeight: 600 }}>{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- LEAKAGE GRID */
function Leakage() {
  const {t}=useLang();
  const items = [1,2,3,4,5,6,7,8].map(n=>([
    `DRIFT-0${n}`,
    t(`leakage.t${n}`),
    t(`leakage.d${n}`),
  ]));
  const [active, setActive] = useStateM(null);
  return (
    <section id="leakage" className="section" style={{
      background: "var(--paper-2)",
      borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"
    }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 640 }}>
            <Reveal><span className="eyebrow">{t("leakage.eyebrow")}</span></Reveal>
            <Reveal delay={120}><h2 className="d-lg" style={{ marginTop: 20 }}>{t("leakage.heading")}</h2></Reveal>
          </div>
          <Reveal delay={200} style={{ maxWidth: "34ch", color: "var(--ink-2)", fontSize: 16 }}>
            {t("leakage.sub")}
          </Reveal>
        </div>

        <div className="leak-grid" style={{
          marginTop: 48, display: "grid",
          gridTemplateColumns: "repeat(4,1fr)", gap: 1, background: "var(--line)",
          border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden"
        }}>
          {items.map(([code, title, desc], i) => (
            <Reveal key={code} delay={(i % 4) * 70} as="div"
              onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)}
              style={{
                background: active === i ? "var(--ink)" : "var(--paper)",
                color: active === i ? "var(--paper)" : "var(--ink)",
                padding: "24px 22px 26px", minHeight: 188, display: "flex", flexDirection: "column",
                transition: "background .35s ease,color .35s ease", cursor: "default"
              }}>
              <Mono style={{
                fontSize: 11, fontWeight: 600,
                color: active === i ? "rgba(247,245,239,.6)" : "var(--drift)"
              }}>{code}</Mono>
              <h3 style={{ fontSize: 19, marginTop: 16, letterSpacing: "-.02em" }}>{title}</h3>
              <p style={{
                marginTop: "auto", paddingTop: 14, fontSize: 13.5, lineHeight: 1.45,
                color: active === i ? "rgba(247,245,239,.72)" : "var(--muted)"
              }}>{desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- INTEGRATIONS */
function Integrations() {
  const {t}=useLang();
  const ins = ["int.ins1","int.ins2","int.ins3","int.ins4","int.ins5","int.ins6",
               "int.ins7","int.ins8","int.ins9","int.ins10","int.ins11","int.ins12"].map(k=>t(k));
  const notItems = ["int.not1","int.not2","int.not3","int.not4","int.not5"].map(k=>t(k));
  return (
    <section id="integrations" className="section">
      <div className="wrap">
        <div className="int-grid" style={{
          display: "grid", gridTemplateColumns: "minmax(0,.9fr) minmax(0,1.1fr)",
          gap: "clamp(36px,6vw,84px)", alignItems: "center"
        }}>
          <div>
            <Reveal><span className="eyebrow">{t("int.eyebrow")}</span></Reveal>
            <Reveal delay={120}><h2 className="d-lg" style={{ marginTop: 20 }}>
              {t("int.heading")}</h2></Reveal>
            <Reveal delay={220} className="lead" style={{ marginTop: 22 }}>
              {t("int.lead")}
            </Reveal>
            <Reveal delay={320} style={{
              marginTop: 30, padding: "22px 24px", borderRadius: 14,
              border: "1px dashed var(--line)", background: "var(--paper-2)"
            }}>
              <Mono style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".1em" }}>{t("int.notLabel")}</Mono>
              <p style={{ marginTop: 12, fontSize: 16.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
                {t("int.notPrefix")}{" "}
                {notItems.map((n, i) => (
                  <span key={i}>
                    <span style={{ color: "var(--ink)", textDecoration: "line-through", textDecorationColor: "var(--drift)" }}>{n}</span>
                    {i < notItems.length - 1 ? ", " : ". "}
                  </span>
                ))}
                {t("int.notSuffix")}
              </p>
            </Reveal>
          </div>
          <Reveal delay={150}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {ins.map((s, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "center", gap: 11, padding: "15px 16px",
                  borderRadius: 11, border: "1px solid var(--line)", background: "var(--paper)"
                }}>
                  <span style={{
                    width: 30, height: 30, borderRadius: 8, flexShrink: 0,
                    background: "var(--paper-2)", border: "1px solid var(--line)", display: "grid", placeItems: "center",
                    fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)"
                  }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontSize: 14, fontWeight: 500 }}>{s}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, ControlLayer, Leakage, Integrations });