import { useState, useEffect, useRef } from "react";

const distributions = [
{
id: "poisson",
name: "Poisson Distribution",
phenomenon: "Customer Arrivals at a Coffee Shop",
emoji: " ",
color: "#c0392b",
accent: "#e74c3c",
bg: "#fff5f5",
lambda: 4,
param: "λ (avg arrivals/hour) = 4",
justification: [
"Events occur independently of each other",
"Average rate is constant (4 customers/hour during peak)",
"Two arrivals cannot happen at the exact same instant",
"Models discrete counts over a fixed time interval",
],
businessInsight:
"A café manager can use this to staff optimally. With λ = 4, there's a ~19.5% chance of
formula: "P(X=k) = (e^-λ · λ^k) / k!",
xLabel: "Number of Arrivals per Hour",
compute: (lambda) => {
const pts = [];
for (let k = 0; k <= 12; k++) {
let prob = [Link](-lambda) * [Link](lambda, k);
for (let i = 1; i <= k; i++) prob /= i;
[Link]({ k, prob });
}
return pts;
},
},
{
id: "normal",
name: "Normal Distribution",
phenomenon: "Delivery Times of an E-Commerce Platform",
emoji: " ",
color: "#1a6b3c",
accent: "#27ae60",
bg: "#f0fff4",
mean: 3,
std: 0.6,
param: "µ = 3 days, σ = 0.6 days",
 justification: [
"Delivery time is a sum of many small, independent delays (Central Limit Theorem)",
"Symmetric bell curve around the average of 3 days",
"Most deliveries cluster near the mean; extremes are rare",
"Continuous variable — any fractional day is possible",
],
businessInsight:
"With µ = 3 days and σ = 0.6, ~68% of deliveries arrive between 2.4–3.6 days. Promising
formula: "f(x) = (1/σ√2π) · e^(-(x-µ)²/2σ²)",
xLabel: "Delivery Time (Days)",
compute: (mean, std) => {
const pts = [];
for (let x = mean - 3.5 * std; x <= mean + 3.5 * std; x += 0.1) {
const prob =
(1 / (std * [Link](2 * [Link]))) *
[Link](-0.5 * [Link]((x - mean) / std, 2));
[Link]({ k: +[Link](2), prob });
}
return pts;
},
},
{
id: "binomial",
name: "Binomial Distribution",
phenomenon: "Defective Units in a Manufacturing Batch",
emoji: " ",
color: "#1a3a6b",
accent: "#2980b9",
bg: "#f0f6ff",
n: 20,
p: 0.05,
param: "n = 20 units, p = 0.05 defect rate",
justification: [
"Each unit is independently either defective or not (binary outcome)",
"Fixed number of trials: n = 20 units per batch",
"Constant probability of defect: p = 5% per unit",
"Counts the number of successes (defects) in n trials",
],
businessInsight:
"With n=20, p=0.05, the expected defects per batch = 1. A quality manager setting a 're
formula: "P(X=k) = C(n,k) · p^k · (1-p)^(n-k)",
xLabel: "Number of Defective Units",
compute: (n, p) => {
const pts = [];
const binom = (n, k) => {
if (k > n) return 0;
let r = 1;
 for (let i = 0; i < k; i++) r = (r * (n - i)) / (i + 1);
return r;
};
for (let k = 0; k <= [Link](n, 10); k++) {
const prob = binom(n, k) * [Link](p, k) * [Link](1 - p, n - k);
[Link]({ k, prob });
}
return pts;
},
},
{
id: "exponential",
name: "Exponential Distribution",
phenomenon: "Time Between Customer Support Calls",
emoji: " ",
color: "#6b1a6b",
accent: "#8e44ad",
bg: "#fdf5ff",
lambda: 2,
param: "λ = 2 calls/hour → avg wait = 30 min",
justification: [
"Models time between events in a Poisson process",
"Memoryless property: past wait time doesn't affect future",
"Continuous distribution over non-negative time values",
"Calls arrive at a constant average rate of 2/hour",
],
businessInsight:
"With λ = 2, there's a 63.2% chance the next call arrives within 30 minutes. A call cen
formula: "f(x) = λ · e^(-λx) for x ≥ 0",
xLabel: "Time Between Calls (Hours)",
compute: (lambda) => {
const pts = [];
for (let x = 0; x <= 3; x += 0.05) {
const prob = lambda * [Link](-lambda * x);
[Link]({ k: +[Link](2), prob });
}
return pts;
},
},
];

const BAR_W = 32;

function BarChart({ data, color, accent, isContinuous, xLabel }) {

const maxProb = [Link](...[Link]((d) => [Link]));
const svgW = isContinuous ? 520 : [Link](420, [Link] * (BAR_W + 8) + 60);
const svgH = 220;
const padL = 52, padB = 48, padT = 16, padR = 20;
const chartW = svgW - padL - padR;
const chartH = svgH - padT - padB;

const yTicks = [0, 0.25, 0.5, 0.75, 1].map((f) => ({

v: f * maxProb,
y: padT + chartH - f * chartH,
}));

if (isContinuous) {
const xs = [Link]((d) => d.k);
const minX = xs[0], maxX = xs[[Link] - 1];
const xScale = (x) => padL + ((x - minX) / (maxX - minX)) * chartW;
const yScale = (p) => padT + chartH - (p / maxProb) * chartH;

const pathD =
data
.map((d, i) =>
i === 0
? `M ${xScale(d.k)} ${yScale([Link])}`
: `L ${xScale(d.k)} ${yScale([Link])}`
)
.join(" ") +
` L ${xScale(xs[[Link] - 1])} ${padT + chartH} L ${xScale(xs[0])} ${padT + chartH} Z

const linePath = data

.map((d, i) =>
i === 0
? `M ${xScale(d.k)} ${yScale([Link])}`
: `L ${xScale(d.k)} ${yScale([Link])}`
)
.join(" ");

const xTickCount = 7;
const xTicks = [Link]({ length: xTickCount }, (_, i) => {
const v = minX + (i / (xTickCount - 1)) * (maxX - minX);
return { v: +[Link](1), x: xScale(v) };
});

return (
<svg width={svgW} height={svgH} style={{ display: "block", margin: "0 auto", maxWidth:
<defs>
<linearGradient id={`fill-${color}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={accent} stopOpacity="0.35" />
<stop offset="100%" stopColor={accent} stopOpacity="0.02" />
</linearGradient>
</defs>
 {[Link]((t, i) => (
<g key={i}>
<line x1={padL} y1={t.y} x2={padL + chartW} y2={t.y} stroke="#e0e0e0" strokeWidth
<text x={padL - 6} y={t.y + 4} textAnchor="end" fontSize="10" fill="#888">
{[Link](2)}
</text>
</g>
))}
<path d={pathD} fill={`url(#fill-${color})`} />
<path d={linePath} fill="none" stroke={accent} strokeWidth="2.5" strokeLinejoin="roun
{[Link]((t, i) => (
<g key={i}>
<line x1={t.x} y1={padT + chartH} x2={t.x} y2={padT + chartH + 4} stroke="#bbb" s
<text x={t.x} y={padT + chartH + 16} textAnchor="middle" fontSize="9.5" fill="#88
</g>
))}
<line x1={padL} y1={padT} x2={padL} y2={padT + chartH} stroke="#ccc" strokeWidth="1"
<line x1={padL} y1={padT + chartH} x2={padL + chartW} y2={padT + chartH} stroke="#ccc
<text x={padL + chartW / 2} y={svgH - 4} textAnchor="middle" fontSize="10.5" fill="#6
<text x={12} y={padT + chartH / 2} textAnchor="middle" fontSize="10" fill="#666" tran
</svg>
);
}

const barW = [Link](BAR_W, chartW / [Link] - 6);

const totalBarSpan = [Link] * (barW + 6);
const startX = padL + (chartW - totalBarSpan) / 2;

return (
<svg width={svgW} height={svgH} style={{ display: "block", margin: "0 auto", maxWidth: "1
<defs>
<linearGradient id={`bargrad-${color}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={accent} stopOpacity="0.9" />
<stop offset="100%" stopColor={color} stopOpacity="0.7" />
</linearGradient>
</defs>
{[Link]((t, i) => (
<g key={i}>
<line x1={padL} y1={t.y} x2={padL + chartW} y2={t.y} stroke="#e0e0e0" strokeWidth="
<text x={padL - 6} y={t.y + 4} textAnchor="end" fontSize="10" fill="#888">
{[Link](3)}
</text>
</g>
))}
{[Link]((d, i) => {
const bh = ([Link] / maxProb) * chartH;
const bx = startX + i * (barW + 6);
 const by = padT + chartH - bh;
return (
<g key={i}>
<rect x={bx} y={by} width={barW} height={bh} fill={`url(#bargrad-${color})`} rx="
<text x={bx + barW / 2} y={padT + chartH + 14} textAnchor="middle" fontSize="9.5"
</g>
);
})}
<line x1={padL} y1={padT} x2={padL} y2={padT + chartH} stroke="#ccc" strokeWidth="1" />
<line x1={padL} y1={padT + chartH} x2={padL + chartW} y2={padT + chartH} stroke="#ccc"
<text x={padL + chartW / 2} y={svgH - 4} textAnchor="middle" fontSize="10.5" fill="#666
<text x={12} y={padT + chartH / 2} textAnchor="middle" fontSize="10" fill="#666" transf
</svg>
);
}

export default function App() {

const [active, setActive] = useState(0);
const d = distributions[active];
const isContinuous = [Link] === "normal" || [Link] === "exponential";
const chartData =
[Link] === "poisson" ? [Link]([Link]) :
[Link] === "normal" ? [Link]([Link], [Link]) :
[Link] === "binomial" ? [Link](d.n, d.p) :
[Link]([Link]);

return (
<div style={{
minHeight: "100vh",
background: "#f7f5f0",
fontFamily: "'Georgia', 'Times New Roman', serif",
padding: "24px 16px 48px",
}}>
{/* Header */}
<div style={{ maxWidth: 760, margin: "0 auto 28px" }}>
<div style={{
background: "#1a1a2e",
color: "#f0ece0",
borderRadius: 12,
padding: "24px 28px",
boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
}}>
<div style={{ fontSize: 11, letterSpacing: 3, textTransform: "uppercase", color: "#
Business Statistics · Experiential Assignment
</div>
<h1 style={{ margin: 0, fontSize: 22, fontWeight: "normal", lineHeight: 1.3, color:
Probability Distributions in<br />
 <span style={{ fontStyle: "italic", color: "#e8c97a" }}>Real-World Business Pheno
</h1>
<p style={{ margin: "12px 0 0", fontSize: 13, color: "#b0a888", lineHeight: 1.6 }}>
Four distinct phenomena · Distribution identification · Graphical plotting · Busi
</p>
</div>
</div>

{/* Tab Selector */}

<div style={{ maxWidth: 760, margin: "0 auto 20px", display: "flex", gap: 8, flexWrap:
{[Link]((dist, i) => (
<button
key={[Link]}
onClick={() => setActive(i)}
style={{
flex: "1 1 160px",
padding: "10px 12px",
background: active === i ? [Link] : "#fff",
color: active === i ? "#fff" : "#444",
border: `2px solid ${active === i ? [Link] : "#ddd"}`,
borderRadius: 8,
cursor: "pointer",
fontSize: 12,
fontFamily: "Georgia, serif",
textAlign: "center",
transition: "all 0.2s",
boxShadow: active === i ? `0 2px 12px ${[Link]}55` : "none",
}}
>
<div style={{ fontSize: 18 }}>{[Link]}</div>
<div style={{ fontWeight: "bold", fontSize: 11 }}>{[Link]}</div>
</button>
))}
</div>

{/* Main Card */}

<div style={{ maxWidth: 760, margin: "0 auto" }}>
<div style={{
background: "#fff",
borderRadius: 12,
boxShadow: "0 2px 20px rgba(0,0,0,0.08)",
overflow: "hidden",
border: `1px solid ${[Link]}33`,
}}>
{/* Card Header */}
<div style={{
background: [Link],
 padding: "20px 24px",
color: "#fff",
}}>
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
<span style={{ fontSize: 32 }}>{[Link]}</span>
<div>
<div style={{ fontSize: 11, letterSpacing: 2, textTransform: "uppercase", opa
Selected Phenomenon
</div>
<h2 style={{ margin: 0, fontSize: 18, fontWeight: "normal" }}>{[Link]}<
<div style={{
display: "inline-block",
marginTop: 6,
background: "rgba(255,255,255,0.2)",
padding: "2px 10px",
borderRadius: 20,
fontSize: 11,
fontFamily: "'Courier New', monospace",
}}>{[Link]} — {[Link]}</div>
</div>
</div>
</div>

<div style={{ padding: "24px" }}>

{/* Section 1: Justification */}
<Section title=" Distribution Identification & Justification" accent={[Link]}>
<p style={{ margin: "0 0 12px", fontSize: 13, color: "#555", lineHeight: 1.6 }}
The <strong>{[Link]}</strong> is the appropriate model for this phenomenon be
</p>
<ul style={{ margin: 0, paddingLeft: 20 }}>
{[Link]((j, i) => (
<li key={i} style={{ marginBottom: 6, fontSize: 13, color: "#444", lineHeig
))}
</ul>
<div style={{
marginTop: 14,
background: [Link],
border: `1px solid ${[Link]}44`,
borderRadius: 6,
padding: "8px 14px",
fontFamily: "'Courier New', monospace",
fontSize: 13,
color: [Link],
textAlign: "center",
}}>
{[Link]}
</div>
</Section>

{/* Section 2: Graph */}

<Section title=" Graphical Plot" accent={[Link]}>
<div style={{ overflowX: "auto", marginTop: 8 }}>
<BarChart
data={chartData}
color={[Link]}
accent={[Link]}
isContinuous={isContinuous}
xLabel={[Link]}
/>
</div>
<p style={{ margin: "10px 0 0", fontSize: 11.5, color: "#888", textAlign: "cent
{isContinuous
? `Probability Density Function (PDF) — ${[Link]}`
: `Probability Mass Function (PMF) — ${[Link]}`}
&nbsp;|&nbsp; Parameters: {[Link]}
</p>
</Section>

{/* Section 3: Business Interpretation */}

<Section title=" Business Interpretation & Decision Insight" accent={[Link]}>
<div style={{
background: [Link],
borderLeft: `4px solid ${[Link]}`,
borderRadius: "0 8px 8px 0",
padding: "14px 16px",
fontSize: 13.5,
color: "#333",
lineHeight: 1.7,
}}>
{[Link]}
</div>
</Section>

{/* Learning Summary */}

<div style={{
marginTop: 20,
background: "#fafafa",
border: "1px solid #eee",
borderRadius: 8,
padding: "14px 16px",
}}>
<div style={{ fontSize: 11, letterSpacing: 2, textTransform: "uppercase", color
Learning Output Summary
</div>
 <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
{[
["Distribution", [Link]],
["Type", isContinuous ? "Continuous" : "Discrete"],
["Plot", isContinuous ? "PDF Curve" : "PMF Bar Chart"],
["Skill", "Model Selection & Analytical Reasoning"],
].map(([label, val]) => (
<div key={label} style={{
background: "#fff",
border: `1px solid ${[Link]}55`,
borderRadius: 6,
padding: "6px 12px",
fontSize: 12,
}}>
<span style={{ color: "#999", fontSize: 10, display: "block" }}>{label}</
<span style={{ color: [Link], fontWeight: "bold" }}>{val}</span>
</div>
))}
</div>
</div>
</div>
</div>

<p style={{ textAlign: "center", fontSize: 11, color: "#bbb", marginTop: 16, fontStyl
Click any tab above to explore a different distribution
</p>
</div>
</div>
);
}

function Section({ title, accent, children }) {

return (
<div style={{ marginBottom: 20 }}>
<div style={{
display: "flex",
alignItems: "center",
gap: 8,
marginBottom: 12,
}}>
<div style={{ width: 3, height: 18, background: accent, borderRadius: 2, flexShrink:
<h3 style={{ margin: 0, fontSize: 13.5, fontWeight: "bold", color: "#222", letterSpac
</div>
{children}
</div>
);
}