// ─────────────────────────────────────────────────────────────
// DoricMatch AI — src/components/common.jsx
// Composants UI réutilisables (titres, stats, sections, etc.).
// Chargé via <script type="text/babel"> dans index.html (ordre important).
// ─────────────────────────────────────────────────────────────

function H({ children, sub }) {
  return (
    <div className="rise" style={{ marginBottom: 28 }}>
      <h1 className="serif" style={{ fontSize: 34, margin: 0, fontWeight: 700, letterSpacing: "-.5px" }}>{children}</h1>
      {sub && <p style={{ color: C.dim, fontSize: 14, marginTop: 7 }}>{sub}</p>}
    </div>
  );
}

function Stat({ label, v, c }) {
  return <div><div style={{ fontSize: 11, color: C.faint, marginBottom: 2 }}>{label}</div><div style={{ fontWeight: 600, color: c || C.text }}>{v}</div></div>;
}

function ScoreRing({ value, color }) {
  const r = 24, circ = 2 * Math.PI * r;
  return (
    <div style={{ position: "relative", width: 60, height: 60 }}>
      <svg width="60" height="60" style={{ transform: "rotate(-90deg)" }}>
        <circle cx="30" cy="30" r={r} fill="none" stroke={C.panel2} strokeWidth="5" />
        <circle cx="30" cy="30" r={r} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round" strokeDasharray={circ} strokeDashoffset={circ * (1 - value / 100)} style={{ transition: "stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1)" }} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", fontSize: 19, fontWeight: 700, color }}>{value}</div>
    </div>
  );
}

function Section({ title, children }) {
  return <div style={{ marginTop: 24 }}><div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "1.3px", color: C.faint, marginBottom: 10 }}>{title}</div>{children}</div>;
}

function Block({ title, color }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "26px 0 2px", paddingBottom: 6, borderBottom: `1px solid ${C.line}` }}>
      <span style={{ width: 5, height: 14, borderRadius: 3, background: color || C.amber }} />
      <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".6px", color: C.text, textTransform: "uppercase" }}>{title}</span>
    </div>
  );
}

function Row({ k, v }) {
  return <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", fontSize: 13.5 }}><span style={{ color: C.dim }}>{k}</span><span style={{ fontWeight: 500, textAlign: "right" }}>{v}</span></div>;
}

function Empty({ go }) {
  return <div style={{ textAlign: "center", paddingTop: 130 }}><p style={{ color: C.dim }}>Aucun dossier analysé pour le moment.</p><button className="btn btn-p" style={{ marginTop: 12 }} onClick={() => go("upload")}>Analyser un dossier</button></div>;
}

function EnseigneEmpty({ go }) {
  return <div style={{ textAlign: "center", paddingTop: 130 }}><p style={{ color: C.dim }}>Aucun local analysé pour le moment.</p><button className="btn btn-p" style={{ marginTop: 12 }} onClick={() => go("uploadLocal")}>Analyser un local</button></div>;
}

function ResultTabs({ tab, setTab, count }) {
  const btn = (id, label) => (
    <button onClick={() => setTab(id)} style={{ padding: "8px 16px", borderRadius: 9, border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600,
      background: tab === id ? `linear-gradient(100deg,${C.indigo},${C.violet})` : "transparent", color: tab === id ? "#fff" : C.dim }}>{label}</button>
  );
  return (
    <div style={{ display: "inline-flex", gap: 4, marginBottom: 20, padding: 4, borderRadius: 12, background: C.panel2, border: `1px solid ${C.line}` }}>
      {btn("current", "Matching en cours")}
      {btn("history", `Historique des matchings${count ? ` (${count})` : ""}`)}
    </div>
  );
}

function Splash({ text }) {
  return <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", fontFamily: "'Outfit',sans-serif", fontSize: 14, color: "#6b6a85", background: "radial-gradient(140% 120% at 50% -10%, #eef0ff 0%, #f5f6fb 55%)" }}>{text}</div>;
}