const { useState } = React;

/* Small UI helpers (same style as other cards) */
function Badge({ children, tone = "default" }) {
  const styles = {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    border: "1px solid var(--ring)",
    borderRadius: "999px",
    padding: "6px 10px",
    fontWeight: 700,
    fontSize: "12.5px",
    background: "#fff",
    color: "var(--text)",
  };
  if (tone === "info") {
    styles.background = "#F1F5FF";
    styles.border = "1px solid #C7D2FE";
    styles.color = "#1E3A8A";
  }
  if (tone === "warn") {
    styles.background = "#FFF7ED";
    styles.border = "1px solid #FED7AA";
    styles.color = "#9A3412";
  }
  return <span style={styles}>{children}</span>;
}

function Pill({ children }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        border: "1px solid var(--ring)",
        borderRadius: "999px",
        padding: "6px 10px",
        marginRight: 8,
        marginBottom: 8,
        background: "#fff",
        color: "var(--text)",
        fontWeight: 700,
        fontSize: "12.5px",
      }}
    >
      {children}
    </span>
  );
}

function Section({ title, children }) {
  return (
    <section className="card" style={{ marginTop: 16 }}>
      <h2 style={{ marginTop: 0, marginBottom: 8, fontSize: 18 }}>{title}</h2>
      <div>{children}</div>
    </section>
  );
}

function StatCard({ label, lines = [] }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="muted">{label}</div>
      <div style={{ fontSize: 14, marginTop: 6 }}>
        {lines.map((t, i) => (
          <div key={i} style={{ marginTop: 2 }}>
            {t}
          </div>
        ))}
      </div>
    </div>
  );
}

function SuezCard() {
  const [links] = useState({
    pdf: "/projects/suez/Report.pdf", // <- Public/redacted PDF only (no raw data)
    // Use a SANITIZED methods-only repo; do NOT link to any repo that ever contained raw client/ops data.
    code: "/projects/suez/suez_methods_showcase_notebook_tech.html",
  });

  return (
    <div>
      {/* ===== Header with cover ===== */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./suez-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">SZ</div>
            <div>
              <h1 className="title">SUEZ — ECOMOB Logistics Analytics (Redacted)</h1>
              <div className="meta">
                Methods showcase • Fully anonymised visuals • No operational detail
              </div>
            </div>
          </div>
        </div>

        {/* ===== Body ===== */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Public artifacts contain no raw data</Badge>
            <Badge tone="warn">All figures anonymised, aggregated, and truncated</Badge>
            <Badge>Methods & workflow only</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            This page demonstrates a generic analytics workflow relevant to
            municipal collection logistics (e.g., activity patterns, resource
            coordination, and planning heuristics). It is a <em>methods-only,
            non-operational</em> showcase. All visuals are illustrative and built from
            anonymised, aggregated, or synthetic samples to demonstrate the
            approach. <strong>Every single figure in the report is masked and truncated for
            confidentiality.</strong> No client-identifiable, route-specific, or
            personnel-level information is disclosed.
          </p>

          {/* Centered buttons: PDF + Code */}
          <div
            style={{
              marginTop: 12,
              display: "flex",
              justifyContent: "center",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
            <a className="btn" href={links.pdf} target="_blank" rel="noopener">
              Open Redacted Report (PDF)
            </a>
            <a
              className="btn ghost"
              href={links.code}
              target="_blank"
              rel="noopener"
            >
              Methods (Sanitised Code)
            </a>
          </div>
        </div>
      </header>

      {/* ===== Goals & Scope ===== */}
      <Section title="Goals & Scope">
        <ul style={{ marginTop: 8 }}>
          <li>
            Illustrate a reproducible analytics workflow applicable to
            collection logistics in a generic setting.
          </li>
          <li>
            Surface high-level temporal patterns and workload seasonality using
            non-sensitive aggregates.
          </li>
          <li>
            Demonstrate how neutral KPIs can inform capacity planning—without
            exposing any operational specifics.
          </li>
          <li>
            Provide a redacted communication format suitable for public
            portfolios.
          </li>
        </ul>
      </Section>

      {/* ===== Methods ===== */}
      <Section title="Methods (Redacted)">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Stack:</strong> Python (Pandas), Matplotlib for schematic
            visuals; ETL sequence: import → clean → transform → aggregate →
            visualise.
          </li>
          <li>
            <strong>Privacy-by-design:</strong> strict aggregation (weekly/monthly);
            cohorting; k-anonymity thresholds; value jittering; top-coding; unit
            normalisation; removal of identifiers; synthetic substitution where
            necessary.
          </li>
          <li>
            <strong>Visuals:</strong> schematic histograms/boxplots/line charts
            conveying structure only—no granular or linkable information.
          </li>
          <li>
            <strong>Scope limitation:</strong> examples demonstrate methodology and
            presentation patterns; they do not reconstruct or imply any specific
            operations.
          </li>
        </ul>
      </Section>

      {/* ===== Illustrative Insights (non-operational) ===== */}
      <Section title="Illustrative Insights (non-operational)">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="Temporal Structure"
            lines={[
              <>Recurring weekly rhythms consistent with standard collection cycles.</>,
              <>Seasonal envelopes visible in monthly aggregates.</>,
            ]}
          />
          <StatCard
            label="Workload Signals"
            lines={[
              <>Aggregate volume proxies vary within expected operational bands.</>,
              <>Normalised trends suitable for capacity planning heuristics.</>,
            ]}
          />
          <StatCard
            label="Operational Heterogeneity"
            lines={[
              <>Cohort-level dispersion is observable at an abstract level.</>,
              <>Differences remain within privacy-preserving, non-identifying ranges.</>,
            ]}
          />
          <StatCard
            label="Efficiency Heuristics"
            lines={[
              <>Generic opportunities suggested by aggregate fill-rate patterns.</>,
              <>No client, route, or personnel details are exposed or inferable.</>,
            ]}
          />
        </div>
      </Section>

      {/* ===== Recommendations (generic & conditional) ===== */}
      <Section title="Recommendations (generic)">
        <ul style={{ marginTop: 8 }}>
          <li>
            Use <em>aggregated</em> temporal patterns to smooth staffing and equipment
            allocation—avoid day-level disclosures in any public artifact.
          </li>
          <li>
            Track high-level cohort KPIs (e.g., normalised workload, seasonality
            indices) within secure environments; communicate trends, not
            granularity.
          </li>
          <li>
            Maintain a redaction pipeline (suppression, top-coding, synthesis)
            before any external sharing.
          </li>
          <li>
            Periodically review public materials to ensure no re-identification
            risk under updated datasets.
          </li>
        </ul>
      </Section>

      {/* ===== Data Governance & Redaction Notes ===== */}
      <Section title="Data Governance & Redaction">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>No raw data is hosted or linked.</strong> Public resources are
            sanitised and demonstrate methodology only.
          </li>
          <li>
            <strong>Figures are illustrative:</strong> masked, truncated, and/or
            synthetic; units may be normalised; scales may be clipped.
          </li>
          <li>
            <strong>Access segregation:</strong> any operational analysis belongs in
            private, access-controlled systems only.
          </li>
          <li>
            <strong>Change control:</strong> commits and history are scrubbed of
            sensitive content before publication.
          </li>
        </ul>
      </Section>

      <div style={{ textAlign: "center", marginTop: 16 }}>
        <a className="btn ghost" href="/" rel="noopener">
          ← Back to Home
        </a>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<SuezCard />);