// pages/mobile/MobileCronograma.jsx

function MobileCronograma() {
  const today = 7;
  const stageColor = { done: "#666", active: "#0A0A0A", future: "#bdbdbd" };

  return (
    <>
      <h1 className="m-title">Cronograma</h1>
      <div className="m-subtitle">14 meses · 10 fases macro</div>

      <div className="m-card" style={{ marginBottom: 14 }}>
        <div className="m-card-body" style={{ paddingBottom: 14 }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
            <span>início · set 25</span>
            <span style={{ color: "var(--red)" }}>HOJE · abr 26</span>
            <span>entrega · nov 26</span>
          </div>
          <div style={{ position: "relative", height: 4, background: "var(--bg-muted)", borderRadius: 2, marginTop: 10 }}>
            <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "50%", background: "var(--fg)", borderRadius: 2 }} />
            <div style={{ position: "absolute", left: "50%", top: -4, bottom: -4, width: 2, background: "var(--red)" }} />
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 10 }}>
            <span>{today} meses executados</span>
            <span>{14 - today} meses restantes</span>
          </div>
        </div>
      </div>

      <div className="m-section-label">Fases</div>
      <div className="m-card">
        {PHASES.map((p, i) => {
          const active = p.stage === "active";
          return (
            <div key={i} className="m-phase">
              <div className="m-phase-head">
                <div className="m-phase-name">
                  <span className={"m-phase-dot " + p.stage}></span>
                  {p.name}
                </div>
                <div className="m-phase-pct">{Math.round(p.progress * 100)}%</div>
              </div>
              <div style={{ height: 4, background: "var(--bg-muted)", borderRadius: 2, overflow: "hidden" }}>
                <div style={{
                  height: "100%",
                  width: (p.progress * 100) + "%",
                  background: stageColor[p.stage],
                  borderRadius: 2,
                }} />
              </div>
              <div className="m-phase-meta">
                <span>{MONTHS[Math.floor(p.start)]} → {MONTHS[Math.min(Math.ceil(p.end) - 1, MONTHS.length - 1)]}</span>
                <span>·</span>
                <span>{p.stage === "done" ? "concluído" : p.stage === "active" ? "em andamento" : "futuro"}</span>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

window.MobileCronograma = MobileCronograma;