/* OrchEcomm website — Modules catalog page. */
function ModulesPage({ go }) {
  const I = window.OcWebIcons;
  const D = window.OcWeb;
  const wrap = { maxWidth: 1180, margin: "0 auto", padding: "0 24px" };
  const [cat, setCat] = React.useState("All");
  const shown = D.WEB_MODULES.filter((m) => cat === "All" || m.cat === cat);

  const flows = [
    { steps: [["Stock Management", "Package", "Detects low inventory"], ["Supplier Contact & RFQ", "Message", "Auto-drafts quote request"], ["Purchase Orders", "Clipboard", "PO created & tracked"]] },
    { steps: [["Shopify Plugin", "Bag", "New product added"], ["Automated Visual Content", "Image", "Banner, social & email generated"], ["Social Media Scheduler", "Megaphone", "Post queued"]] },
    { steps: [["Payment Orchestration", "Repeat", "Detects failed charge"], ["Email Automation", "Mail", "Recovery flow triggered"], ["Unified Analytics", "Chart", "Recovery rate updated"]] },
  ];

  return (
    <div>
      {/* HERO */}
      <section style={{ position: "relative", background: "var(--white)", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -120, right: -160, width: 560, height: 560, opacity: 0.5, pointerEvents: "none", maskImage: "radial-gradient(circle at 60% 40%, #000, transparent 70%)", WebkitMaskImage: "radial-gradient(circle at 60% 40%, #000, transparent 70%)" }}>
          {React.createElement(window.OrchestrationDiagram, { decorative: true })}
        </div>
        <div style={{ ...wrap, position: "relative", padding: "84px 24px 40px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
          <Reveal style={{ maxWidth: 640 }}>
            <Eyebrow>The full suite</Eyebrow>
            <h1 style={{ font: "var(--font-sans)", fontSize: 48, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.08, color: "var(--ink-900)", marginTop: 16, textWrap: "balance" }}>Every module your store needs. Orchestrated.</h1>
            <p style={{ font: "var(--font-sans)", fontSize: 18, lineHeight: 1.55, color: "var(--text-secondary)", marginTop: 16, maxWidth: 540 }}>Independent modules that share one data layer and react to each other's events. Switch on what you need.</p>
          </Reveal>
          <Reveal delay={120} style={{ textAlign: "right" }}>
            <div style={{ font: "var(--font-sans)", fontSize: 72, fontWeight: 700, letterSpacing: "-0.04em", color: "var(--green-600)", lineHeight: 1 }}>23</div>
            <div style={{ font: "var(--font-sans)", fontSize: 15, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-800)" }}>Modules</div>
          </Reveal>
        </div>
      </section>

      {/* FILTER BAR */}
      <div style={{ position: "sticky", top: 66, zIndex: 50, background: "rgba(248,250,249,0.9)", backdropFilter: "saturate(160%) blur(8px)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div style={{ ...wrap, padding: "14px 24px", display: "flex", gap: 9, flexWrap: "wrap" }}>
          {D.WEB_CATEGORIES.map((c) => {
            const on = cat === c;
            return <button key={c} onClick={() => setCat(c)} style={{ height: 34, padding: "0 15px", borderRadius: "var(--radius-full)", border: "1px solid " + (on ? "var(--green-800)" : "var(--border-strong)"), background: on ? "var(--green-800)" : "var(--white)", color: on ? "#fff" : "var(--text-secondary)", font: "var(--font-sans)", fontSize: 14, fontWeight: on ? 600 : 500, cursor: "pointer", transition: "all var(--transition-fast)" }}>{c}</button>;
          })}
        </div>
      </div>

      {/* GRID */}
      <section style={{ background: "var(--bg-app)", padding: "40px 0 88px" }}>
        <div style={{ ...wrap, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }} className="web-3col">
          {shown.map((m, i) => <ModuleCard key={m.name} m={m} />)}
          {cat === "All" ? <MoreCard /> : null}
        </div>
      </section>

      {/* HOW MODULES CONNECT */}
      <section style={{ background: "var(--white)", padding: "92px 0" }}>
        <div style={wrap}>
          <Reveal style={{ textAlign: "center", maxWidth: 680, margin: "0 auto" }}>
            <Eyebrow style={{ justifyContent: "center" }}>Interoperability</Eyebrow>
            <h2 style={{ font: "var(--font-sans)", fontSize: 38, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink-900)", marginTop: 14, textWrap: "balance" }}>Modules that work better together.</h2>
            <p style={{ font: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--text-secondary)", marginTop: 14 }}>Every module shares one data layer — so an event in one automatically triggers the next. No manual wiring.</p>
          </Reveal>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 44, maxWidth: 940, marginInline: "auto" }}>
            {flows.map((f, i) => <FlowCard key={i} flow={f} idx={i} />)}
          </div>
          <Reveal style={{ textAlign: "center", marginTop: 44 }}>
            <Btn variant="primary" size="lg" onClick={() => window.OcSignup.open()} iconRight={<I.ArrowRight size={17} />}>See how it works — Start free</Btn>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function ModuleCard({ m }) {
  const I = window.OcWebIcons;
  const [h, setH] = React.useState(false);
  return (
    <Reveal>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ position: "relative", height: "100%", background: "var(--white)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", padding: "22px 22px 20px", boxShadow: h ? "var(--shadow-md)" : "var(--shadow-xs)", transform: h ? "translateY(-3px)" : "none", transition: "box-shadow var(--transition-base), transform var(--transition-base)" }}>
        {m.flagship ? <span style={{ position: "absolute", top: 18, right: 18, font: "var(--font-sans)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "#fff", background: "var(--green-600)", borderRadius: "var(--radius-full)", padding: "3px 9px" }}>Flagship</span> : null}
        <span style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", background: h ? "var(--green-800)" : "var(--green-100)", color: h ? "#fff" : "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "all var(--transition-base)" }}>{React.createElement(I[m.icon], { size: 23 })}</span>
        <h3 style={{ font: "var(--font-sans)", fontSize: 17, fontWeight: 700, color: "var(--ink-900)", marginTop: 15, letterSpacing: "-0.01em" }}>{m.name}</h3>
        <p style={{ font: "var(--font-sans)", fontSize: 14, lineHeight: 1.5, color: "var(--text-secondary)", marginTop: 7 }}>{m.desc}</p>
      </div>
    </Reveal>
  );
}

function MoreCard() {
  return (
    <Reveal>
      <div style={{ position: "relative", height: "100%", minHeight: 170, borderRadius: "var(--radius-lg)", background: "linear-gradient(140deg, var(--green-800), var(--green-900))", color: "#fff", padding: "24px", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.5, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1px, transparent 0)", backgroundSize: "22px 22px", animation: "web-drift 22s linear infinite" }} />
        <div style={{ position: "relative" }}>
          <h3 style={{ font: "var(--font-sans)", fontSize: 22, fontWeight: 700, letterSpacing: "-0.01em", color: "#fff" }}>More, every month</h3>
          <p style={{ font: "var(--font-sans)", fontSize: 14, lineHeight: 1.5, color: "var(--green-200)", marginTop: 8 }}>New modules ship every month — adopt them à la carte.</p>
        </div>
        <style>{`@keyframes web-drift{from{background-position:0 0}to{background-position:88px 44px}}`}</style>
      </div>
    </Reveal>
  );
}

function FlowCard({ flow, idx }) {
  const I = window.OcWebIcons;
  return (
    <Reveal delay={idx * 80}>
      <div style={{ background: "var(--bg-app)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", padding: "20px 22px" }}>
        <div style={{ display: "flex", alignItems: "stretch", gap: 10, flexWrap: "wrap" }}>
          {flow.steps.map(([name, icon, sub], i) => (
            <React.Fragment key={i}>
              <div style={{ flex: "1 1 200px", display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", background: "var(--white)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-xs)" }}>
                <span style={{ width: 36, height: 36, borderRadius: "var(--radius-sm)", background: "var(--green-100)", color: "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{React.createElement(I[icon], { size: 18 })}</span>
                <div style={{ minWidth: 0 }}><div style={{ font: "var(--type-card-title)", color: "var(--ink-900)" }}>{name}</div><div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 1 }}>{sub}</div></div>
              </div>
              {i < flow.steps.length - 1 ? (
                <div style={{ display: "flex", alignItems: "center", color: "var(--green-600)", flexShrink: 0 }} className="web-flow-arrow"><I.ArrowRight size={20} /></div>
              ) : null}
            </React.Fragment>
          ))}
        </div>
      </div>
    </Reveal>
  );
}
window.ModulesPage = ModulesPage;