// === Wave 1: HeroRotator, PERTDemo, ROICalculator ===

function HeroRotator() {
  const words = ["construind", "simulând", "certificându-te"];
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setIdx((i) => (i + 1) % words.length);
    }, 2800);
    return () => clearInterval(interval);
  }, []);

  return (
    <span className="hero-rotator">
      <span key={idx} className="hero-rotator-word">{words[idx]}</span>
      <svg className="hero-rotator-underline" viewBox="0 0 200 14" preserveAspectRatio="none" aria-hidden="true">
        <path d="M3,9 Q50,2 100,7 T197,5" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round"/>
      </svg>
    </span>
  );
}

// Mini-PERT demo embedded on landing. Read-only friendly, with light editing.
function PERTDemo({ onCTA }) {
  const [acts, setActs] = React.useState([
    { id: 1, code: "A", name: "Cercetare piață", duration: 5, deps: [] },
    { id: 2, code: "B", name: "Design produs", duration: 8, deps: [1] },
    { id: 3, code: "C", name: "Prototip & test", duration: 6, deps: [2] },
    { id: 4, code: "D", name: "Lansare", duration: 3, deps: [3] }
  ]);

  const { nodes, projectEnd } = React.useMemo(() => calculatePERT(acts), [acts]);
  const criticalCount = Object.values(nodes).filter((n) => n.critical).length;

  const setDuration = (id, value) => {
    setActs(prev => prev.map(a => a.id === id ? { ...a, duration: Math.max(1, Math.min(30, +value || 1)) } : a));
  };

  // Layout
  const byDepth = {};
  acts.forEach((a) => {
    const d = nodes[a.id].depth;
    byDepth[d] = byDepth[d] || [];
    byDepth[d].push(a.id);
  });
  const COL_W = 170;
  const ROW_H = 110;
  const NODE_W = 150;
  const NODE_H = 84;
  const PAD = 20;
  const positions = {};
  Object.entries(byDepth).forEach(([depth, ids]) => {
    ids.forEach((id, i) => {
      positions[id] = { x: PAD + (+depth) * COL_W, y: PAD + i * ROW_H };
    });
  });
  const depths = Math.max(...Object.values(nodes).map(n => n.depth)) + 1;
  const totalW = PAD * 2 + depths * COL_W;
  const totalH = PAD * 2 + Math.max(...Object.values(byDepth).map(a => a.length)) * ROW_H;

  return (
    <div className="demo-card">
      <div className="demo-head">
        <div>
          <h3>Încearcă aici. Fără cont.</h3>
          <p>Mini-diagrama PERT. Ajustează duratele și vezi instant cum se schimbă drumul critic și durata totală. Asta e doar 1 din 8 instrumente din Modulul 2.</p>
        </div>
        <span className="demo-pill">Live</span>
      </div>

      <div style={{ overflowX: "auto", border: "1px solid var(--line)", borderRadius: 10, background: "var(--bg-elevated)", padding: 6 }}>
        <svg width={totalW} height={totalH} style={{ display: "block", minWidth: "100%" }}>
          {acts.map((a) =>
            a.deps.map((depId) => {
              const from = positions[depId];
              const to = positions[a.id];
              if (!from || !to) return null;
              const fromX = from.x + NODE_W;
              const fromY = from.y + NODE_H / 2;
              const toX = to.x;
              const toY = to.y + NODE_H / 2;
              const midX = (fromX + toX) / 2;
              const isCritical = nodes[depId].critical && nodes[a.id].critical;
              return (
                <path key={`${depId}-${a.id}`}
                  d={`M ${fromX} ${fromY} C ${midX} ${fromY}, ${midX} ${toY}, ${toX} ${toY}`}
                  stroke={isCritical ? "#ef4444" : "#cdd1e0"}
                  strokeWidth={isCritical ? 2.5 : 1.5}
                  fill="none"
                  strokeDasharray={isCritical ? "0" : "4 3"} />
              );
            }))}
          {acts.map((a) => {
            const pos = positions[a.id];
            const n = nodes[a.id];
            if (!pos) return null;
            return (
              <g key={a.id} transform={`translate(${pos.x},${pos.y})`}>
                <rect width={NODE_W} height={NODE_H} rx={8}
                  fill={n.critical ? "#fef2f2" : "#ffffff"}
                  stroke={n.critical ? "#ef4444" : "#d2d7e6"}
                  strokeWidth={n.critical ? 2 : 1} />
                <text x={10} y={18} fontSize="10" fontFamily="var(--mono)" fill="#6b7390" fontWeight="500">ES {n.ES}</text>
                <text x={NODE_W - 10} y={18} fontSize="10" fontFamily="var(--mono)" fill="#6b7390" textAnchor="end" fontWeight="500">EF {n.EF}</text>
                <text x={10} y={40} fontSize="13" fontFamily="var(--display)" fill={n.critical ? "#b91c1c" : "#0a0e1c"} fontWeight="700">{a.code}</text>
                <text x={28} y={40} fontSize="11" fontFamily="var(--sans)" fill="#0a0e1c" fontWeight="500">{a.name}</text>
                <foreignObject x={10} y={48} width={NODE_W - 20} height={28}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11 }}>
                    <span style={{ fontFamily: "var(--mono)", color: "#6b7390" }}>Durată</span>
                    <input type="number" min="1" max="30" value={a.duration}
                      onChange={(e) => setDuration(a.id, e.target.value)}
                      style={{ width: 44, border: "1px solid #d2d7e6", borderRadius: 4, padding: "2px 6px", fontSize: 12, fontFamily: "var(--mono)", fontWeight: 600, background: "white", color: "#0a0e1c" }} />
                    <span style={{ fontFamily: "var(--mono)", color: n.critical ? "#b91c1c" : "#10b981", fontWeight: 700 }}>
                      slack {n.slack}
                    </span>
                  </div>
                </foreignObject>
              </g>
            );
          })}
        </svg>
      </div>

      <div className="demo-stats-strip">
        <div className="demo-stat-item">
          <span className="demo-stat-label">DURATA TOTALĂ</span>
          <span className="demo-stat-val accent">{projectEnd} <span style={{fontSize: 13, color: "var(--ink-3)", fontFamily: "var(--sans)"}}>zile</span></span>
        </div>
        <div className="demo-stat-item">
          <span className="demo-stat-label">DRUM CRITIC</span>
          <span className="demo-stat-val critical">{criticalCount} <span style={{fontSize: 13, color: "var(--ink-3)", fontFamily: "var(--sans)"}}>activități</span></span>
        </div>
        <div className="demo-stat-item">
          <span className="demo-stat-label">ACTIVITĂȚI TOTAL</span>
          <span className="demo-stat-val">{acts.length}</span>
        </div>
      </div>

      <div className="demo-actions">
        <span className="demo-hint">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{color: "var(--accent)"}}><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
          Modifică duratele și urmărește cum se schimbă durata proiectului.
        </span>
        <button className="btn primary" onClick={onCTA}>Construiește propria ta diagramă →</button>
      </div>
    </div>
  );
}

function ROICalculator() {
  const [users, setUsers] = React.useState(15);
  const [months, setMonths] = React.useState(12);

  // Pricing assumptions
  const pmhPerUserMonth = 39; // RON
  const pmiOneTime = 1500; // RON ~ $300
  const courseraPerUserMonth = 250; // RON ~$49
  const dpmOneTime = 3500; // RON ~$699

  const pmhCost = pmhPerUserMonth * users * months;
  const pmiCost = pmiOneTime * users; // one-time but per user
  const courseraCost = courseraPerUserMonth * users * months;
  const dpmCost = dpmOneTime * users;

  const maxCost = Math.max(pmhCost, pmiCost, courseraCost, dpmCost);
  const savings = Math.round((Math.min(pmiCost, courseraCost, dpmCost) - pmhCost));
  const savingsPositive = savings > 0;

  const fmt = (n) => Math.round(n).toLocaleString("ro-RO");

  return (
    <div className="roi-calc">
      <div className="demo-head">
        <div>
          <h3>Cât economisești vs. concurența?</h3>
          <p>Ajustează numărul de utilizatori și perioada. Calculatorul îți arată costul real pe 3 ani.</p>
        </div>
        <span className="demo-pill">Calculator</span>
      </div>

      <div className="roi-controls">
        <div className="roi-slider-row">
          <label>
            <span className="slider-name">Utilizatori în echipa ta</span>
            <span className="slider-val">{users}</span>
          </label>
          <input type="range" min="1" max="100" value={users} onChange={(e) => setUsers(+e.target.value)} className="roi-slider" />
          <div style={{display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", marginTop: 4}}>
            <span>1</span><span>100</span>
          </div>
        </div>
        <div className="roi-slider-row">
          <label>
            <span className="slider-name">Perioadă (luni)</span>
            <span className="slider-val">{months}</span>
          </label>
          <input type="range" min="1" max="36" value={months} onChange={(e) => setMonths(+e.target.value)} className="roi-slider" />
          <div style={{display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", marginTop: 4}}>
            <span>1 lună</span><span>3 ani</span>
          </div>
        </div>
      </div>

      <div className="roi-bars">
        <div className="roi-bar pmh">
          <div className="roi-name">
            <strong>PM Interactive Hub</strong>
            <span>39 RON / utilizator / lună</span>
          </div>
          <div className="roi-bar-fill-track">
            <div className="roi-bar-fill" style={{ width: `${(pmhCost / maxCost) * 100}%` }}></div>
          </div>
          <div className="roi-cost">{fmt(pmhCost)} RON</div>
        </div>
        <div className="roi-bar">
          <div className="roi-name">
            <strong>PMI eLearning</strong>
            <span>~1500 RON / utilizator (one-time)</span>
          </div>
          <div className="roi-bar-fill-track">
            <div className="roi-bar-fill" style={{ width: `${(pmiCost / maxCost) * 100}%` }}></div>
          </div>
          <div className="roi-cost">{fmt(pmiCost)} RON</div>
        </div>
        <div className="roi-bar">
          <div className="roi-name">
            <strong>Coursera Plus</strong>
            <span>~250 RON / utilizator / lună</span>
          </div>
          <div className="roi-bar-fill-track">
            <div className="roi-bar-fill" style={{ width: `${(courseraCost / maxCost) * 100}%` }}></div>
          </div>
          <div className="roi-cost">{fmt(courseraCost)} RON</div>
        </div>
        <div className="roi-bar">
          <div className="roi-name">
            <strong>DPM School</strong>
            <span>~3500 RON / utilizator (one-time)</span>
          </div>
          <div className="roi-bar-fill-track">
            <div className="roi-bar-fill" style={{ width: `${(dpmCost / maxCost) * 100}%` }}></div>
          </div>
          <div className="roi-cost">{fmt(dpmCost)} RON</div>
        </div>
      </div>

      <div className="roi-summary">
        <div className="roi-savings-num">
          {savingsPositive ? "−" : "+"}{fmt(Math.abs(savings))}<span className="currency">RON</span>
        </div>
        <div className="roi-savings-text">
          <strong>Economisești {savingsPositive ? fmt(savings) : 0} RON</strong><br/>
          față de cea mai ieftină alternativă pentru {users} {users === 1 ? "utilizator" : "utilizatori"} pe {months} {months === 1 ? "lună" : "luni"}.
          <br/><span style={{fontSize: 12, color: "#a5acf0"}}>Calculul presupune prețuri publice listate de fiecare furnizor.</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroRotator, PERTDemo, ROICalculator });