// === Sections A: Intro, Org, Scope, Needs/SWOT ===

function IntroSection({ state, go }) {
  const totalDone = M2_TOOL_IDS.filter((id) => sectionComplete(id, state)).length;
  const pct = Math.round(totalDone / 8 * 100);
  return (
    <div className="landing">
      {/* HERO */}
      <div className="landing-hero">
        <div>
          <div className="eyebrow">Platformă · 100% în limba română · Pregătire ANC</div>
          <h1 className="hero-title">
            Învață Management de Proiect{" "}
            <HeroRotator />,&nbsp;nu citind.
          </h1>
          <p className="lede">
            PM Interactive Hub este prima platformă românească dedicată învățării și practicării managementului de proiect. Aliniat la programa de certificare <strong>ANC</strong>, cu instrumente reale (Gantt, SWOT, buget, risc) integrate direct în lecții — nu separat, ca PDF-uri.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn" onClick={() => go("m2-overview")}>Încearcă Modulul 2 — Constructor →</button>
            <button className="btn ghost" onClick={() => {
              document.getElementById("for-business")?.scrollIntoView({ behavior: "smooth" });
            }}>Pentru companii</button>
          </div>
          {totalDone > 0 &&
          <div style={{ marginTop: 24, padding: "12px 16px", background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center", maxWidth: 480 }}>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-3)" }}>Progres curent · M2</div>
                <div style={{ fontSize: 13, marginTop: 2 }}>{totalDone} din 8 instrumente complete</div>
              </div>
              <button className="btn small" onClick={() => go("m2-overview")}>Continuă →</button>
            </div>
          }
        </div>
        <div className="hero-side">
          <h3>Decalaj de piață confirmat</h3>
          <div className="market-stat">
            <span className="ms-val">$12B</span>
            <span className="ms-lbl">Piața globală PM software până în 2030</span>
          </div>
          <div className="market-stat">
            <span className="ms-val">+33%</span>
            <span className="ms-lbl">Cerere joburi PM până în 2027</span>
          </div>
          <div className="market-stat">
            <span className="ms-val">+10.7%</span>
            <span className="ms-lbl">CAGR industrie</span>
          </div>
          <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid #2a261e", fontSize: 12, color: "#c1b8a3", lineHeight: 1.5 }}>
            <strong style={{ color: "#f5f1e6" }}>0</strong> platforme serioase de PM learning în limba română. Acest gol e oportunitatea.
          </div>
        </div>
      </div>

      {/* WAVE 1 — Inline PERT demo */}
      <section className="demo-section">
        <div className="lp-section-head" style={{ marginBottom: 18 }}>
          <div className="eyebrow">Demo · fără cont</div>
          <h2 className="lp-h2">Încearcă platforma chiar acum</h2>
          <p className="lp-lede">Nu mai citi despre cum se face un PERT — modifică mai jos duratele și vezi instant impactul.</p>
        </div>
        <PERTDemo onCTA={() => go("m2-overview")} />
      </section>

      {/* MODULES OVERVIEW */}
      <section className="lp-section">
        <div className="lp-section-head">
          <div className="eyebrow">Arhitectură</div>
          <h2 className="lp-h2">4 module care lucrează împreună</h2>
          <p className="lp-lede">Fiecare modul abordează o latură diferită a învățării: teorie, practică, simulare și evaluare. Modulul 2 e disponibil acum — restul vin în iterațiile următoare.</p>
        </div>
        <div className="module-grid">
          {MODULES.map((m, i) =>
          <button key={m.id} className={`module-card ${m.status}`} onClick={() => go(m.route)}>
              <div className="module-card-head">
                <span className="module-code">{m.code}</span>
                {m.status === "active" ? <Pill kind="ok">Disponibil</Pill> : <Pill>În curând</Pill>}
              </div>
              <h3 className="module-name">{m.name}</h3>
              <p className="module-blurb">{m.blurb}</p>
              <span className="module-cta">{m.status === "active" ? "Deschide →" : "Vezi planul →"}</span>
            </button>
          )}
        </div>
      </section>

      {/* DIFFERENTIATORS */}
      <section className="lp-section">
        <div className="lp-section-head">
          <div className="eyebrow">De ce PM Interactive Hub</div>
          <h2 className="lp-h2">Ce ne diferențiază de Coursera, PMI eLearning și DPM School</h2>
        </div>
        <div className="strengths">
          <div className="strength">
            <div className="strength-num">01 / LIMBĂ</div>
            <h4>100% în limba română</h4>
            <p>Nicio platformă serioasă de PM learning nu există în română. Concurența cere fluență în engleză tehnică.</p>
          </div>
          <div className="strength">
            <div className="strength-num">02 / RELEVANȚĂ</div>
            <h4>Aliniat la programa ANC</h4>
            <p>Conținut direct utilizabil pentru certificarea de Manager de Proiect ANC din România. Bazat pe materiale acreditate.</p>
          </div>
          <div className="strength">
            <div className="strength-num">03 / INSTRUMENTE</div>
            <h4>Gantt, SWOT, buget — în lecție</h4>
            <p>Nu citești despre cum se face un Gantt — îl construiești. Toate instrumentele sunt încorporate direct în experiența de învățare.</p>
          </div>
          <div className="strength">
            <div className="strength-num">04 / SIMULATOR</div>
            <h4>Decizii cu consecințe reale</h4>
            <p>Modulul 3 te pune să conduci un proiect virtual. Fiecare decizie modifică buget, timp și moralul echipei — feedback explicativ din AI.</p>
          </div>
          <div className="strength">
            <div className="strength-num">05 / UNIVERSALITATE</div>
            <h4>Aplicabil oricărui domeniu</h4>
            <p>Conținut universal — IT, ONG, administrație publică, construcții. Nu te leagă de o industrie specifică.</p>
          </div>
          <div className="strength">
            <div className="strength-num">06 / MOBIL</div>
            <h4>Mobile-first</h4>
            <p>Microlearning în pauze. Lecții de 5–10 minute, completabile pe telefon — nu doar pe desktop.</p>
          </div>
        </div>
      </section>

      {/* ROI Calculator (Wave 1) */}
      <section className="lp-section">
        <div className="lp-section-head">
          <div className="eyebrow">Cost vs. concurență</div>
          <h2 className="lp-h2">Calculatorul de economii pe 3 ani</h2>
          <p className="lp-lede">Alege mărimea echipei și perioada. Compară instant costul real cu PMI, Coursera și DPM School.</p>
        </div>
        <ROICalculator />
      </section>

      {/* COMPETITION */}
      <section className="lp-section">
        <div className="lp-section-head">
          <div className="eyebrow">Concurența</div>
          <h2 className="lp-h2">Cum ne raportăm la ce există</h2>
        </div>
        <div className="compare-table">
          <div className="compare-row compare-head">
            <div>Platformă</div>
            <div>Limbă</div>
            <div>Format</div>
            <div>Preț</div>
            <div>Limitare</div>
          </div>
          <div className="compare-row">
            <div><strong>PM Interactive Hub</strong></div>
            <div><Pill kind="ok">RO</Pill></div>
            <div>Interactiv + simulator</div>
            <div>29–49 RON/lună</div>
            <div className="muted">—</div>
          </div>
          <div className="compare-row">
            <div>PMI eLearning</div>
            <div>EN</div>
            <div>Video pasiv</div>
            <div>$299+</div>
            <div className="muted">Fără instrumente integrate</div>
          </div>
          <div className="compare-row">
            <div>Coursera (Google, IBM)</div>
            <div>EN</div>
            <div>MOOC video</div>
            <div>$49/lună</div>
            <div className="muted">Pasiv, fără simulator</div>
          </div>
          <div className="compare-row">
            <div>DPM School</div>
            <div>EN</div>
            <div>On-demand + Slack</div>
            <div>$699</div>
            <div className="muted">Fără instrumente live, fără română</div>
          </div>
          <div className="compare-row">
            <div>projectsimulations.com</div>
            <div>EN</div>
            <div>Doar simulator</div>
            <div>$59+</div>
            <div className="muted">Fără teorie, fără română</div>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section className="lp-section">
        <div className="lp-section-head">
          <div className="eyebrow">Preț</div>
          <h2 className="lp-h2">Freemium · plătești doar pentru ce folosești</h2>
        </div>
        <div className="pricing-grid">
          <div className="price-card">
            <div className="price-tier">Gratuit</div>
            <div className="price-amount">0 <span className="price-unit">RON</span></div>
            <ul className="price-feats">
              <li>Modul 1 — Teorie interactivă completă</li>
              <li>O simulare demo în Modul 3</li>
              <li>Constructor Gantt de bază (M2)</li>
              <li>Salvare locală în browser</li>
            </ul>
            <button className="btn ghost" onClick={() => go("m2-overview")}>Începe gratuit</button>
          </div>
          <div className="price-card featured">
            <div className="price-badge">Cel mai popular</div>
            <div className="price-tier">Individual</div>
            <div className="price-amount">29–49 <span className="price-unit">RON / lună</span></div>
            <ul className="price-feats">
              <li>Acces complet la toate cele 4 module</li>
              <li>Toate scenariile simulator + feedback AI</li>
              <li>Template-uri descărcabile (PDF, Word)</li>
              <li>Certificat de parcurgere</li>
              <li>Salvare cloud + progres pe dispozitive</li>
            </ul>
            <button className="btn" disabled style={{ opacity: 0.6 }}>În curând</button>
          </div>
          <div className="price-card">
            <div className="price-tier">Business / Centre formare</div>
            <div className="price-amount">La cerere<span className="price-unit"></span></div>
            <ul className="price-feats">
              <li>Licențe pentru echipe / cohorte</li>
              <li>White-label pentru centre acreditate ANC</li>
              <li>Dashboard administrativ + rapoarte</li>
              <li>Conținut personalizat pe organizație</li>
              <li>Suport dedicat</li>
            </ul>
            <button className="btn ghost" onClick={() => {
              document.getElementById("for-business")?.scrollIntoView({ behavior: "smooth" });
            }}>Detalii →</button>
          </div>
        </div>
      </section>

      {/* B2B */}
      <section className="lp-section" id="for-business">
        <div className="b2b-card">
          <div>
            <div className="eyebrow" style={{ color: "#9ea3e8" }}>Pentru companii și centre de formare</div>
            <h2 className="lp-h2" style={{ color: "#fff", marginTop: 8 }}>Formează-ți echipa de project manageri în limba lor</h2>
            <p style={{ color: "#d4d7f0", fontSize: 15, lineHeight: 1.6, maxWidth: "56ch", margin: "16px 0 24px" }}>
              Departamentele L&D din Lidl, Orange, Metro, PwC și Stefanini investesc activ în upskilling PM. Oferim pachete corporate cu dashboard administrativ, conținut adaptat și certificate de parcurgere — la o fracțiune din costul cursurilor englezești.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button className="btn" style={{ background: "#fff", color: "#1d2152", borderColor: "#fff" }}>Solicită o demo</button>
              <button className="btn ghost" style={{ color: "#fff", borderColor: "#fff" }}>Listă completă funcționalități</button>
            </div>
          </div>
          <div className="b2b-stats">
            <div className="b2b-stat">
              <div className="b2b-stat-val">5</div>
              <div className="b2b-stat-lbl">Corporații active în L&D PM în RO</div>
            </div>
            <div className="b2b-stat">
              <div className="b2b-stat-val">~40+</div>
              <div className="b2b-stat-lbl">Centre acreditate ANC pentru certificare PM</div>
            </div>
            <div className="b2b-stat">
              <div className="b2b-stat-val">€0</div>
              <div className="b2b-stat-lbl">Alternative româneşti existente</div>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

function OrgSection({ state, update, go }) {
  const set = (k, v) => update((s) => ({ ...s, org: { ...s.org, [k]: v } }));
  const o = state.org;
  return (
    <div>
      <SectionHead num="01" title="Date despre organizație"
      lede="Beneficiarul direct al proiectului — firma, ONG-ul sau entitatea pentru care se elaborează propunerea."
      maxPages={1} />

      <Card title="Pagina de copertă" sub="OBLIGATORIE">
        <div className="field-row">
          <Field label="Titlul proiectului">
            <TextInput value={o.projectTitle} onChange={(v) => set("projectTitle", v)} placeholder='ex. "Digitalizarea procesului de onboarding pentru angajații noi"' />
          </Field>
          <Field label="Nume/prenume autor">
            <TextInput value={o.authorName} onChange={(v) => set("authorName", v)} placeholder="Popescu Andrei-Mihai" />
          </Field>
        </div>
        <div className="field-row">
          <Field label="Localitate">
            <TextInput value={o.location} onChange={(v) => set("location", v)} placeholder="București / Cluj / Iași / ..." />
          </Field>
          <Field label="Data">
            <TextInput value={o.date} onChange={(v) => set("date", v)} />
          </Field>
        </div>
      </Card>

      <Card title="Despre firmă/organizație">
        <Field label="Denumire">
          <TextInput value={o.name} onChange={(v) => set("name", v)} placeholder='ex. "SC Acme Digital SRL" / "Asociația X" / "Primăria Y"' />
        </Field>
        <div className="field-row">
          <Field label="Localitate">
            <TextInput value={o.locality} onChange={(v) => set("locality", v)} />
          </Field>
          <Field label="Județ">
            <TextInput value={o.county} onChange={(v) => set("county", v)} />
          </Field>
        </div>
        <Field label="Obiect de activitate" help="Domeniul principal — CAEN sau descriere scurtă.">
          <TextArea value={o.activity} onChange={(v) => set("activity", v)} placeholder="Dezvoltare software pentru sectorul financiar / Servicii sociale pentru tineret / Construcții industriale ..." rows={2} />
        </Field>
        <div className="field-row-3">
          <Field label="Nr. angajați">
            <TextInput value={o.employees} onChange={(v) => set("employees", v)} placeholder="42" />
          </Field>
          <Field label="Cifră afaceri (RON)">
            <TextInput value={o.turnover} onChange={(v) => set("turnover", v)} placeholder="3.500.000" />
          </Field>
          <Field label="Profit (RON, >0)">
            <TextInput value={o.profit} onChange={(v) => set("profit", v)} placeholder="280.000" />
          </Field>
        </div>
        <Field label="Produse / servicii oferite în prezent">
          <TextArea value={o.product} onChange={(v) => set("product", v)} placeholder="Linii de asamblare semi-automate; sisteme de control PLC pentru clienți B2B" />
        </Field>
      </Card>

      <FootNav onPrev={() => go("intro")} onNext={() => go("scope")} prev="Introducere" next="Scop" />
    </div>);

}

function ScopeSection({ state, update, go }) {
  const setScope = (k, v) => update((s) => ({ ...s, scope: { ...s.scope, [k]: v } }));
  return (
    <div>
      <SectionHead num="02" title="Ideea de proiect / Scopul"
      lede='"De ce?" Cea mai importantă întrebare: pentru ce există acest proiect.'
      maxPages={1} />

      <Lesson tag="Principiul 1">
        Proiectele se elaborează pentru <strong>satisfacerea unei necesități</strong> ori pentru <strong>rezolvarea unei probleme</strong>, clar formulate (CARE? / CUM?).
      </Lesson>
      <Lesson tag="Principiul 2">
        Axează-te pe un <strong>singur rezultat final major</strong>. Formulează Scopul într-o propoziție/sintagmă, folosind <strong>maximum 50 de cuvinte</strong>.
      </Lesson>

      <Card title="Formulează scopul">
        <Field label="Scopul proiectului" help="O singură propoziție, maxim 50 de cuvinte. Răspunde la CARE / CUM / CUI folosește.">
          <TextArea rows={5} value={state.scope.text} onChange={(v) => setScope("text", v)}
          placeholder="ex. Reducerea cu 35% a consumului energetic în secția de asamblare prin implementarea unui sistem inteligent de monitorizare și a unor echipamente eficiente, pentru a crește competitivitatea firmei și a reduce amprenta de carbon." />
          <WordCounter text={state.scope.text} />
        </Field>

        <div className="divider-thick"></div>

        <div className="field">
          <label className="lbl">Tipul proiectului — alege pe ce-ți axezi propunerea</label>
          <RadioChoice value={state.scope.type}
          onChange={(v) => setScope("type", v)}
          options={[
          { v: "needs", label: "Rezolvarea unei probleme", sub: "Recomandat. Centrat pe proces decizional." },
          { v: "funds", label: "Atragere de fonduri", sub: "Centrat pe scrierea unei propuneri de succes." }]
          } />
        </div>

        <div className="field">
          <label className="lbl">Arie tematică</label>
          <RadioChoice value={state.scope.breadth}
          onChange={(v) => setScope("breadth", v)}
          options={[
          { v: "specific", label: "Temă clar definită", sub: "Preferabil. Un singur rezultat final major." },
          { v: "broad", label: "Arie tematică largă", sub: "Mai greu de coordonat și măsurat." }]
          } />
        </div>
      </Card>

      <div className="banner-warn">
        Dacă problema ta se poate rezolva prin simpla achiziție a câtorva obiecte sau soft-uri, atunci <strong>nu ai nevoie de proiect — ai nevoie de magazinul potrivit!</strong>
      </div>

      <FootNav onPrev={() => go("org")} onNext={() => go("needs")} prev="Organizație" next="Analiză nevoi" />
    </div>);

}

function RadioChoice({ value, onChange, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 10, marginTop: 6 }}>
      {options.map((opt) =>
      <button key={opt.v}
      onClick={() => onChange(opt.v)}
      style={{
        textAlign: "left",
        border: `1px solid ${value === opt.v ? "var(--accent)" : "var(--line-2)"}`,
        background: value === opt.v ? "var(--accent-soft)" : "var(--bg-elevated)",
        color: value === opt.v ? "var(--accent)" : "var(--ink)",
        padding: "12px 14px",
        borderRadius: 8,
        cursor: "pointer",
        fontFamily: "inherit",
        transition: "all 0.12s"
      }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 3 }}>{opt.label}</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.4 }}>{opt.sub}</div>
        </button>
      )}
    </div>);

}

function NeedsSection({ state, update, go }) {
  const setNeeds = (k, v) => update((s) => ({ ...s, needs: { ...s.needs, [k]: v } }));
  const n = state.needs;

  const addSwot = (q, text) => {
    if (!text || !text.trim()) return;
    update((s) => ({
      ...s,
      needs: {
        ...s.needs,
        swot: { ...s.needs.swot, [q]: [...s.needs.swot[q], { id: Date.now(), text }] }
      }
    }));
  };
  const removeSwot = (q, id) => {
    update((s) => ({
      ...s,
      needs: {
        ...s.needs,
        swot: { ...s.needs.swot, [q]: s.needs.swot[q].filter((it) => it.id !== id) }
      }
    }));
  };

  return (
    <div>
      <SectionHead num="03" title="Analiza de nevoi"
      lede="Răspunde la 3 întrebări: Ce aduce inovativ? Cui se adresează? Cum se realizează?"
      maxPages={2} />

      <Card title="Cele trei întrebări obligatorii" sub="3 × răspuns scurt">
        <Field label="1. Ce aduce inovativ proiectul?" help="Stadiul actual al cunoașterii. Obiective specifice care susțin un rezultat cu grad de noutate.">
          <TextArea rows={2} value={n.innovation} onChange={(v) => setNeeds("innovation", v)} placeholder="Introduce un sistem de monitorizare predictivă bazat pe ML, nemaifolosit în secțiile de asamblare ale firmei..." />
        </Field>
        <Field label="2. Cui se adresează rezultatele?" help="Beneficiari direcți (cei finanțați) și indirecți (grupul țintă mai larg).">
          <TextArea rows={2} value={n.beneficiaries} onChange={(v) => setNeeds("beneficiaries", v)} placeholder="Direcți: 42 angajați. Indirecți: 8 clienți B2B, 3 furnizori, comunitatea locală..." />
        </Field>
        <Field label="3. Cum se realizează proiectul?" help="Analiza resurselor existente și necesare (materiale, umane, financiare, parteneriate).">
          <TextArea rows={2} value={n.resources} onChange={(v) => setNeeds("resources", v)} placeholder="Echipă internă de 5 ingineri + parteneriat cu Univ. Transilvania pentru cercetare-dezvoltare..." />
        </Field>
      </Card>

      <Card title="Matrice SWOT" sub="Recomandat de curs">
        <SwotMatrix swot={n.swot} onAdd={addSwot} onRemove={removeSwot} />
      </Card>

      <FootNav onPrev={() => go("scope")} onNext={() => go("activities")} prev="Scop" next="Activități" />
    </div>);

}

function SwotMatrix({ swot, onAdd, onRemove }) {
  const quads = [
  { k: "s", letter: "S", name: "Strengths · Puncte tari", placeholder: "ex. Echipă tehnică cu experiență în PLC" },
  { k: "w", letter: "W", name: "Weaknesses · Puncte slabe", placeholder: "ex. Lipsă expertiză internă ML" },
  { k: "o", letter: "O", name: "Opportunities · Oportunități", placeholder: "ex. Fonduri europene PNRR M3" },
  { k: "t", letter: "T", name: "Threats · Amenințări", placeholder: "ex. Volatilitatea prețurilor energiei" }];

  return (
    <div className="swot-grid">
      {quads.map((q) =>
      <SwotQuadrant key={q.k} q={q} items={swot[q.k]} onAdd={(t) => onAdd(q.k, t)} onRemove={(id) => onRemove(q.k, id)} />
      )}
    </div>);

}

function SwotQuadrant({ q, items, onAdd, onRemove }) {
  const [editing, setEditing] = React.useState(false);
  const [text, setText] = React.useState("");
  const submit = () => {
    if (text.trim()) {onAdd(text.trim());setText("");setEditing(false);}
  };
  return (
    <div className={`swot-quadrant ${q.k}`}>
      <div className={`swot-letter ${q.k}`}>{q.letter}</div>
      <div className="swot-name">{q.name}</div>
      <div className="swot-items">
        {items.map((it) =>
        <div className="swot-item" key={it.id}>
            <span>{it.text}</span>
            <button onClick={() => onRemove(it.id)} title="Șterge">×</button>
          </div>
        )}
      </div>
      {editing ?
      <div className="swot-input">
          <input autoFocus value={text} onChange={(e) => setText(e.target.value)} placeholder={q.placeholder}
        onKeyDown={(e) => {if (e.key === "Enter") submit();if (e.key === "Escape") {setEditing(false);setText("");}}} />
          <button className="btn small" onClick={submit}>+</button>
        </div> :

      <button className="swot-add" onClick={() => setEditing(true)}>+ Adaugă element</button>
      }
    </div>);

}

Object.assign(window, { IntroSection, OrgSection, ScopeSection, NeedsSection });