const { useState } = React;

/* --- Small UI helpers (same look as your 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";
  }
  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((r, i) => (
          <div key={i} style={{ marginTop: 2 }}>
            {r}
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- Card Component --- */
function MLA2Card() {
  const [links] = useState({
    pdf: "./DURIEZMLA2.pdf", // put the PDF here
    code: "https://github.com/jeremy111004/Report-Classification-of-Blue-Collar-and-White-Collar-Workers-Using-Classification-Methods", // optional repo link
  });

  return (
    <div>
      {/* ===== Header with cover ===== */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./mla2-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">ML</div>
            <div>
              <h1 className="title">
                Classifying Workers: Blue- vs White-Collar (Logit • LDA • k-NN)
              </h1>
              <div className="meta">
                PCA Decision Boundaries • ROC Curves • Accuracy Comparison
              </div>
            </div>
          </div>
        </div>

        {/* ===== Body ===== */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Academic Project</Badge>
            <Badge>Logit • LDA • k-NN</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            Using the pre-processed SCF07 subset, this study predicts
            occupational status (blue- vs white-collar) with{" "}
            <strong>Logistic Regression</strong>,{" "}
            <strong>Linear Discriminant Analysis</strong>, and{" "}
            <strong>k-Nearest Neighbors</strong>, evaluating PCA-based decision
            boundaries and ROC curves. Accuracies observed (test): Logit ≈{" "}
            <strong>0.772</strong>, LDA ≈ <strong>0.780</strong>, k-NN ≈{" "}
            <strong>0.827</strong>.
          </p>

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

      {/* ===== Methods ===== */}
      <Section title="Methods">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Logistic Regression (probabilistic)</strong> with linear
            decision boundary and ROC evaluation.
          </li>
          <li>
            <strong>Linear Discriminant Analysis</strong> assuming Gaussian
            classes with equal covariance; projection clarifies class
            separation.
          </li>
          <li>
            <strong>k-NN (non-parametric)</strong> for flexible, nonlinear
            boundaries; sensitive to k.
          </li>
        </ul>
      </Section>

      {/* ===== Highlights ===== */}
      <Section title="Highlights">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="Performance (Accuracy)"
            lines={[
              <>
                Logit ≈ <strong>0.772</strong>
              </>,
              <>
                LDA ≈ <strong>0.780</strong>
              </>,
              <>
                k-NN ≈ <strong>0.827</strong>
              </>,
            ]}
          />
          <StatCard
            label="Model Behavior"
            lines={[
              <>Logit/LDA: linear boundaries; similar ROC.</>,
              <>k-NN: nonlinear boundary; can overfit if k too small.</>,
            ]}
          />
          <StatCard
            label="Interpretation"
            lines={[
              <>
                LDA strong under linearity; k-NN best on this dataset but needs
                tuning.
              </>,
              <>Logit is a solid baseline with clear odds interpretation.</>,
            ]}
          />
        </div>
      </Section>

      {/* ===== Conclusion ===== */}
      <Section title="Conclusion">
        <p style={{ color: "#2C3445", lineHeight: 1.55 }}>
          For linearly separable settings, <strong>LDA</strong> is competitive
          and interpretable;
          <strong> k-NN</strong> captured non-linearities and achieved the best
          accuracy here, at the cost of parameter sensitivity;{" "}
          <strong>Logit</strong> remains a robust baseline and
          communication-friendly choice.
        </p>
      </Section>

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

/* --- Mount --- */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MLA2Card />);