// === Module 1 — Overview + Definitions animated ===

function M1OverviewSection({ state, go }) {
  const lessons = [
    { id: "m1-definitions", num: "1.1", title: "Definiții animate", desc: "Concepte cheie: proiect, milestone, WBS, scope, triplul constraint.", time: "5 min", icon: "✦" },
    { id: "m1-pert", num: "1.2", title: "Diagrama PERT", desc: "Construiește o rețea de activități. Sistemul calculează drumul critic.", time: "8 min", icon: "◈" },
    { id: "m1-eisenhower", num: "1.3", title: "Matricea Eisenhower", desc: "Drag & drop pe 4 cadrane: urgent × important. Exersezi prioritizarea.", time: "4 min", icon: "▣" },
    { id: "m1-orgs", num: "1.4", title: "Organigrame comparate", desc: "Side-by-side: piramidală vs. matriceală. Avantaje, dezavantaje, când.", time: "3 min", icon: "⛓" },
    { id: "m1-glossary", num: "1.5", title: "Glosar de termeni", desc: "Termeni PM cu definiții și exemple. Căutare instantă.", time: "auto", icon: "⌬" },
    { id: "m1-quiz", num: "1.Q", title: "Quiz de fixare", desc: "10 întrebări pe baza materialului. Trebuie 60% ca să treci.", time: "7 min", icon: "✓" }
  ];

  const done = lessons.filter(l => m1LessonComplete(l.id, state)).length;
  const pct = Math.round((done / lessons.length) * 100);

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Modul 1 · Teorie interactivă</div>
        <h1 className="section-title">Învață jucând, nu citind.</h1>
        <p className="section-lede">
          Cinci lecții interactive plus un quiz de fixare. Construiești PERT-uri, prioritizezi sarcini pe matrice, explorezi organigrame — fără slide-uri PowerPoint, fără PDF-uri statice.
        </p>
        <div className="section-meta">
          <span>⏱ ~30 min total</span>
          <span className="dot"></span>
          <span>Progres salvat local</span>
        </div>
      </div>

      <div className="m1-progress-card">
        <div>
          <div className="eyebrow" style={{marginBottom: 6}}>Progres modul</div>
          <div style={{fontFamily: "var(--display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 8}}>
            {done} / {lessons.length} lecții complete
          </div>
          <div className="progress-bar" style={{background: "var(--line)", margin: 0, height: 6}}>
            <div className="progress-bar-fill" style={{width: `${pct}%`}}></div>
          </div>
        </div>
        <button className="btn primary" onClick={() => {
          const next = lessons.find(l => !m1LessonComplete(l.id, state));
          go(next ? next.id : "m1-quiz");
        }}>
          {done === 0 ? "Începe Lecția 1.1 →" : done === lessons.length ? "Revezi quiz →" : "Continuă →"}
        </button>
      </div>

      <div className="lesson-grid">
        {lessons.map(l => {
          const isDone = m1LessonComplete(l.id, state);
          return (
            <button key={l.id} className={`lesson-card ${isDone ? "done" : ""}`} onClick={() => go(l.id)}>
              <div className="lesson-card-icon">{l.icon}</div>
              <div className="lesson-card-num">{l.num}</div>
              <h3 className="lesson-card-title">{l.title}</h3>
              <p className="lesson-card-desc">{l.desc}</p>
              <div className="lesson-card-foot">
                <span className="lesson-card-time">{l.time}</span>
                {isDone && <Pill kind="ok">✓ Complet</Pill>}
              </div>
            </button>
          );
        })}
      </div>

      <div className="m1-cta">
        <div>
          <div className="eyebrow" style={{color: "var(--accent-2)", marginBottom: 4}}>După M1</div>
          <h3 style={{fontFamily: "var(--display)", fontSize: 22, fontWeight: 600, margin: "4px 0 8px", letterSpacing: "-0.02em"}}>Treci la Modulul 2 — pune teoria în practică</h3>
          <p style={{margin: 0, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55}}>
            Acum că ai conceptele, construiește o propunere completă cu instrumentele live: SWOT, SMART, Gantt, buget, risc.
          </p>
        </div>
        <button className="btn primary" onClick={() => go("m2-overview")}>Deschide M2 →</button>
      </div>
    </div>
  );
}

const DEFINITIONS = [
  {
    id: "project",
    word: "Proiect",
    short: "Efort temporar pentru a crea un produs/serviciu/rezultat unic.",
    long: "Un proiect are un început și un sfârșit clar definite, resurse limitate, obiective specifice și produce ceva ce nu exista înainte. Spre deosebire de operațiuni (care sunt repetitive), proiectul e o investiție pe termen finit.",
    counter: "Spre deosebire de:",
    counterText: "Operațiunile zilnice ale unei firme — repetitive, fără sfârșit, cu același output.",
    color: "indigo",
    example: "Lansarea unui nou produs vs. mentenanța liniei de producție existente."
  },
  {
    id: "milestone",
    word: "Milestone",
    short: "Punct de control major în proiect — un eveniment, nu o activitate.",
    long: "Un milestone marchează un moment-cheie: finalizarea unei faze, o aprobare, o livrare. Are durată zero — e doar un punct pe timeline. Le folosești ca să sincronizezi echipa, să raportezi stakeholder-ilor și să iei decizii GO/NO-GO.",
    counter: "NU confunda cu:",
    counterText: "Activitățile — care au durată, resurse și produc ceva. Milestone-ul doar marchează că s-a întâmplat.",
    color: "coral",
    example: '"Aprobare design final pe 15 iunie" e milestone. "Realizare design" (3 săptămâni) e activitate.'
  },
  {
    id: "wbs",
    word: "WBS — Work Breakdown Structure",
    short: "Descompunerea ierarhică a proiectului în pachete de lucru mai mici.",
    long: "WBS-ul îți dă o vedere de tip arbore: la rădăcină e proiectul, sub el fazele, sub faze pachetele de lucru, sub pachete activitățile. Regula 100%: fiecare nivel acoperă întreg scope-ul nivelului de deasupra. Regula 8/80: nicio activitate nu trebuie să dureze sub 8 ore sau peste 80.",
    counter: "Diferit de:",
    counterText: "Lista de task-uri — care e plată. WBS-ul e ierarhic și forțează gândirea structurată.",
    color: "indigo",
    example: "Proiect → Faza Design → Pachet UI → Activitate \"Wireframe ecran login\"."
  },
  {
    id: "scope",
    word: "Scope",
    short: "Tot ce face — și NU face — proiectul.",
    long: "Scope-ul definește exact ce intră și ce iese din proiect. Are 3 componente: produsul (ce livrezi), proiectul (cum livrezi) și constrângerile (ce NU faci). „Scope creep\" e termenul pentru când scope-ul crește necontrolat — cea mai frecventă cauză de eșec.",
    counter: "Atenție la:",
    counterText: "Scope creep — adăugarea de „mici cerințe” care, cumulate, dublează efortul fără să crească bugetul.",
    color: "coral",
    example: '„Aplicația de delivery NU va include plata cash la curier” e scope. Asta îți protejează echipa.'
  },
  {
    id: "triple",
    word: "Triplul constraint",
    short: "Timp · Buget · Scope (sau Calitate). Nu poți optimiza toate trei simultan.",
    long: "Cea mai veche lege a managementului de proiect: dacă lungești scope-ul, fie crește bugetul, fie crește timpul. Dacă reduci bugetul, fie taie din scope, fie din calitate. Tu, ca PM, ești expertul în trade-off-uri.",
    counter: "Mit demontat:",
    counterText: '„Vrem totul, repede, ieftin, și de calitate.” — Răspunsul corect: „Alege două.”',
    color: "indigo",
    example: "Client cere live în 2 luni, fără buget extra. Alegere: tai 30% din feature-uri."
  },
  {
    id: "stakeholder",
    word: "Stakeholder",
    short: "Orice persoană sau entitate afectată de proiect — pozitiv sau negativ.",
    long: "Sponsorul, echipa, clientul, utilizatorii finali, furnizorii, departamentul juridic, comunitatea locală — toți sunt stakeholderi. Îi mapezi pe matricea Influență × Interes: gestionezi îndeaproape pe cei cu mare influență și mare interes, iar pe restul îi ții informați.",
    counter: "Greșeala #1:",
    counterText: "Să-i ignori pe „opozanți” — persoanele care pierd ceva din proiect. Ei vor sabota în liniște.",
    color: "coral",
    example: "În digitalizarea unui proces, angajații care făceau manual = stakeholderi negativi de gestionat."
  }
];

function DefinitionsSection({ state, update, go }) {
  const [active, setActive] = React.useState(0);
  const [flipped, setFlipped] = React.useState({});

  React.useEffect(() => {
    // mark as viewed
    const id = DEFINITIONS[active].id;
    update(s => {
      if ((s.m1.definitionsViewed || []).includes(id)) return s;
      return { ...s, m1: { ...s.m1, definitionsViewed: [...(s.m1.definitionsViewed || []), id] }};
    });
  }, [active]);

  const def = DEFINITIONS[active];
  const viewed = state.m1.definitionsViewed || [];

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Lecția 1.1 · Modul 1</div>
        <h1 className="section-title">Definiții animate</h1>
        <p className="section-lede">
          Șase concepte de bază. Pentru fiecare ai: o frază scurtă (TL;DR), explicația lungă, ce <em>nu</em> e și un exemplu concret. Apasă cardul pentru detalii.
        </p>
        <div className="section-meta">
          <span><Pill kind="info">Lecția 1 din 6</Pill></span>
          <span className="dot"></span>
          <span>{viewed.length} / {DEFINITIONS.length} concepte parcurse</span>
        </div>
      </div>

      <div className="def-stack">
        <div className="def-tabs">
          {DEFINITIONS.map((d, i) => (
            <button key={d.id}
              className={`def-tab ${i === active ? "active" : ""} ${viewed.includes(d.id) ? "viewed" : ""}`}
              onClick={() => setActive(i)}>
              <span className="def-tab-num">{String(i+1).padStart(2,"0")}</span>
              <span className="def-tab-name">{d.word.split(" — ")[0]}</span>
              {viewed.includes(d.id) && <span className="def-tab-check">✓</span>}
            </button>
          ))}
        </div>

        <div className={`def-card def-card-${def.color}`} key={def.id}>
          <div className="def-card-num">{String(active + 1).padStart(2,"0")} / {String(DEFINITIONS.length).padStart(2,"0")}</div>
          <h2 className="def-word">{def.word}</h2>
          <p className="def-short">{def.short}</p>

          <div className="def-detail">
            <p>{def.long}</p>
            <div className="def-counter">
              <div className="def-counter-label">{def.counter}</div>
              <div className="def-counter-text">{def.counterText}</div>
            </div>
            <div className="def-example">
              <span className="def-example-label">EXEMPLU</span>
              <span className="def-example-text">{def.example}</span>
            </div>
          </div>
        </div>

        <div className="def-nav">
          <button className="btn ghost" disabled={active === 0} onClick={() => setActive(active - 1)}>← Anterior</button>
          <span style={{fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)"}}>{active + 1} / {DEFINITIONS.length}</span>
          {active < DEFINITIONS.length - 1
            ? <button className="btn primary" onClick={() => setActive(active + 1)}>Următor →</button>
            : <button className="btn primary" onClick={() => { markM1LessonDone("m1-definitions", update); go("m1-pert"); }}>Treci la PERT →</button>
          }
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { M1OverviewSection, DefinitionsSection, DEFINITIONS });