/* ============================================================
   Grid generator — area + spacing → optimal count + preview
   ============================================================ */
function GridGen({ go }) {
  const [area, setArea] = useState(2000);
  const [spacing, setSpacing] = useState(4);
  const [pattern, setPattern] = useState("rect");
  const [margin, setMargin] = useState(120);

  const res = HELP.computeGrid(area, spacing, pattern, margin);
  const previewCols = Math.min(res.cols, 22);
  const previewRows = Math.min(res.rows, 16);
  const showN = previewCols * previewRows;

  return (
    <div className="view">
      <section style={{ background: "var(--green-tint)", borderBottom: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ padding: "52px 0 44px" }}>
          <span className="eyebrow">Planificare parcelă</span>
          <h1 style={{ fontSize: "clamp(32px,4.6vw,50px)", marginTop: 12, maxWidth: 640 }}>
            Câți copaci încap pe terenul tău?
          </h1>
          <p className="muted" style={{ fontSize: 18, maxWidth: 560, marginTop: 14 }}>
            Introdu suprafața și distanța minimă între copaci. Calculăm automat numărul optim de sloturi
            și generăm grila propusă pentru parcelă.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 44 }}>
        <div className="wrap">
          <div className="gen-layout">
            {/* controls */}
            <div className="card" style={{ padding: 26, alignSelf: "start" }}>
              <h3 style={{ fontSize: 19, marginBottom: 20 }}>Parametri</h3>

              <GenSlider label="Suprafață parcelă" value={area} unit="m²" min={200} max={10000} step={50} onChange={setArea} />
              <GenSlider label="Distanță minimă între copaci" value={spacing} unit="m" min={1} max={12} step={0.5} onChange={setSpacing} />
              <GenSlider label="Margine / poteci" value={margin} unit="m²" min={0} max={1000} step={20} onChange={setMargin} />

              <div className="field" style={{ marginTop: 8 }}>
                <label>Pattern de plantare</label>
                <div className="seg" style={{ width: "100%" }}>
                  <button className={pattern === "rect" ? "on" : ""} style={{ flex: 1 }} onClick={() => setPattern("rect")}><Icon name="grid" size={15} /> Rectangular</button>
                  <button className={pattern === "hex" ? "on" : ""} style={{ flex: 1 }} onClick={() => setPattern("hex")}><Icon name="spark" size={15} /> Hexagonal</button>
                </div>
                <span className="faint" style={{ fontSize: 12.5, marginTop: 6 }}>
                  {pattern === "hex" ? "Densitate ~15% mai mare prin compactare hexagonală." : "Aliniere clasică pe rânduri și coloane."}
                </span>
              </div>

              <div className="card" style={{ background: "var(--surface-2)", padding: 14, marginTop: 18, fontSize: 12.5 }}>
                <span className="mono muted">
                  {pattern === "hex"
                    ? "n ≈ aria_utilă × 1 / (spacing² × sin60°)"
                    : "n ≈ floor(aria_utilă / spacing²)"}
                </span>
              </div>
            </div>

            {/* result + preview */}
            <div className="col gap24">
              <div className="result-grid">
                <div className="card" style={{ padding: 24, background: "var(--green)", color: "#eef2e6", border: "none" }}>
                  <span style={{ fontSize: 14, color: "#bcc8ab" }}>Număr optim de copaci</span>
                  <div className="stat-num" style={{ fontSize: 56, color: "#fff", marginTop: 6 }}>{res.count.toLocaleString("ro-RO")}</div>
                  <span style={{ fontSize: 13.5, color: "#bcc8ab" }}>pe {(area - margin).toLocaleString("ro-RO")} m² utili</span>
                </div>
                <div className="col gap12">
                  <MiniStat label="Grilă propusă" value={`${res.rows} × ${res.cols}`} ic="grid" />
                  <MiniStat label="Densitate" value={`${res.density} /m²`} ic="spark" />
                  <MiniStat label="CO₂ estimat / an" value={`~${(res.count * 0.018).toFixed(1)} t`} ic="leaf" />
                </div>
              </div>

              <div className="card" style={{ padding: 24 }}>
                <div className="row between center wrapf" style={{ gap: 10, marginBottom: 16 }}>
                  <h3 style={{ fontSize: 18 }}>Previzualizare grilă</h3>
                  <span className="badge">{res.rows > previewRows || res.cols > previewCols ? `extras ${previewRows}×${previewCols} din ${res.rows}×${res.cols}` : "la scară"}</span>
                </div>
                <div style={{ overflow: "auto" }}>
                  <div className="parcel-grid" style={{ gridTemplateColumns: `repeat(${previewCols}, 1fr)`, gap: 5, maxWidth: 560, margin: "0 auto", paddingLeft: pattern === "hex" ? 0 : 0 }}>
                    {Array.from({ length: showN }).map((_, i) => {
                      const row = Math.floor(i / previewCols);
                      const offset = pattern === "hex" && row % 2 === 1;
                      return <div key={i} className="cell is-available" style={{ cursor: "default", transform: offset ? "translateX(40%)" : "none" }}>
                        <span className="canopy"></span></div>;
                    })}
                  </div>
                </div>
                <div className="row between center wrapf" style={{ marginTop: 20, gap: 12 }}>
                  <span className="faint" style={{ fontSize: 13 }}>Grila generată poate fi salvată direct ca parcelă nouă.</span>
                  <button className="btn btn-primary" onClick={() => go("admin")}><Icon name="check" size={16} /> Creează parcela din grilă</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function GenSlider({ label, value, unit, min, max, step, onChange }) {
  return (
    <div className="field" style={{ marginBottom: 18 }}>
      <div className="row between center">
        <label style={{ marginBottom: 0 }}>{label}</label>
        <span className="row gap8 center">
          <input className="input mono" style={{ width: 78, padding: "6px 8px", fontSize: 14, textAlign: "right" }}
            value={value} onChange={e => onChange(Math.max(min, Math.min(max, +e.target.value || min)))} />
          <span className="faint mono" style={{ fontSize: 12.5, width: 24 }}>{unit}</span>
        </span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(+e.target.value)}
        style={{ accentColor: "var(--green)", width: "100%", marginTop: 10 }} />
    </div>
  );
}

function MiniStat({ label, value, ic }) {
  return (
    <div className="card" style={{ padding: "16px 18px", display: "flex", alignItems: "center", gap: 14 }}>
      <span style={{ width: 42, height: 42, borderRadius: 12, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center", flex: "none" }}><Icon name={ic} size={20} /></span>
      <div className="col">
        <span className="faint" style={{ fontSize: 12.5 }}>{label}</span>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>{value}</span>
      </div>
    </div>
  );
}

/* ============================================================
   About page
   ============================================================ */
function About({ go, totals }) {
  return (
    <div className="view">
      <section style={{ background: "var(--green-deep)", color: "#eef2e6" }}>
        <div className="wrap" style={{ padding: "72px 0" }}>
          <span className="eyebrow" style={{ color: "var(--clay-soft)" }}>Despre noi</span>
          <h1 style={{ fontSize: "clamp(36px,5.4vw,60px)", color: "#fff", marginTop: 14, maxWidth: 780 }}>
            Reîmpădurim România, un copac adoptat pe rând
          </h1>
          <p style={{ fontSize: 19, color: "#c5d0b4", maxWidth: 600, marginTop: 18 }}>
            Adopt a Tree! este o asociație non-profit care transformă terenuri degradate în păduri tinere,
            implicând comunitatea prin adopția individuală de copaci.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="about-grid">
            {[
              ["map", "Plantăm cu sens", "Alegem terenuri degradate — lunci inundabile, versanți erodați — și specii autohtone potrivite fiecărui sol."],
              ["heart", "Implicăm oamenii", "Fiecare copac are un tutore. Adopția creează o legătură personală cu pădurea care crește."],
              ["camera", "Raportăm transparent", "Fotografiem fiecare copac sezon de sezon. Tutorii văd exact cum evoluează investiția lor verde."],
            ].map(([ic, t, d]) => (
              <div key={t} className="col gap14">
                <span style={{ width: 56, height: 56, borderRadius: 16, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center" }}><Icon name={ic} size={26} /></span>
                <h3 style={{ fontSize: 22 }}>{t}</h3>
                <p className="muted" style={{ fontSize: 15.5 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ImpactStrip totals={totals} />

      <section className="section">
        <div className="wrap" style={{ textAlign: "center" }}>
          <h2 style={{ fontSize: "clamp(28px,4vw,40px)", marginBottom: 28 }}>Echipa din spatele pădurii</h2>
          <div className="about-grid">
            {[["Andrei M.", "Coordonator teren"], ["Ioana S.", "Relații cu tutorii"], ["Vlad G.", "Silvicultură"]].map(([n, r]) => (
              <div key={n} className="col gap12 center" style={{ alignItems: "center" }}>
                <div className="imgph green" style={{ width: 120, height: 120, borderRadius: "50%", fontSize: 10 }}>portret</div>
                <div className="col center" style={{ alignItems: "center" }}>
                  <span style={{ fontWeight: 700, fontSize: 17 }}>{n}</span>
                  <span className="faint" style={{ fontSize: 13.5 }}>{r}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA go={go} />
    </div>
  );
}

/* ============================================================
   Login / register
   ============================================================ */
function Login({ go, onLogin }) {
  const [mode, setMode] = useState("login");
  return (
    <div className="view" style={{ display: "grid", placeItems: "center", minHeight: "calc(100vh - 70px)", padding: "48px 18px", background: "linear-gradient(180deg, var(--green-tint), var(--bg))" }}>
      <div className="card" style={{ padding: "clamp(28px,4vw,44px)", width: "100%", maxWidth: 440, boxShadow: "var(--shadow-lg)" }}>
        <div className="col center" style={{ alignItems: "center", marginBottom: 24 }}>
          <Logo size={48} />
          <h1 style={{ fontSize: 28, marginTop: 16 }}>{mode === "login" ? "Bine ai revenit" : "Creează un cont"}</h1>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 6, textAlign: "center" }}>
            {mode === "login" ? "Intră în cont ca să-ți vezi copacii și jurnalul lor." : "Urmărește copacii adoptați și primește fotografii."}
          </p>
        </div>
        <div className="col gap14">
          {mode === "register" && <div className="field"><label>Nume complet</label><input className="input" placeholder="Ana Popescu" /></div>}
          <div className="field"><label>Email</label><input className="input" placeholder="nume@email.ro" /></div>
          <div className="field"><label>Parolă</label><input className="input" type="password" placeholder="••••••••" /></div>
          {mode === "login" && <a style={{ fontSize: 13.5, color: "var(--green)", fontWeight: 600, alignSelf: "flex-end" }}>Ai uitat parola?</a>}
          <button className="btn btn-primary btn-block btn-lg" onClick={() => onLogin({ name: "Ana Popescu", email: "ana.p@email.ro" })}>
            {mode === "login" ? "Autentificare" : "Creează contul"}
          </button>
        </div>
        <div className="row center" style={{ justifyContent: "center", gap: 6, marginTop: 20, fontSize: 14 }}>
          <span className="muted">{mode === "login" ? "Nu ai cont?" : "Ai deja cont?"}</span>
          <a style={{ color: "var(--green)", fontWeight: 700, cursor: "pointer" }} onClick={() => setMode(mode === "login" ? "register" : "login")}>
            {mode === "login" ? "Înregistrează-te" : "Autentifică-te"}
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GridGen, About, Login });