/* ============================================================
   Landing / public page
   ============================================================ */
function Hero({ go, totals }) {
  return (
    <section style={{ background: "linear-gradient(180deg, var(--green-tint), var(--bg) 70%)", overflow: "hidden" }}>
      <div className="wrap" style={{ paddingTop: 72, paddingBottom: 64 }}>
        <div className="hero-grid">
          <div className="col" style={{ gap: 24, maxWidth: 560 }}>
            <span className="chip" style={{ background: "var(--surface)", alignSelf: "flex-start" }}>
              <span className="dot" style={{ background: "var(--green)" }}></span>
              Asociație non-profit · România
            </span>
            <h1 style={{ fontSize: "clamp(38px, 4.6vw, 60px)", lineHeight: 1.08 }}>
              Adoptă un copac.<br />
              <span style={{ color: "var(--green)" }}>Crește o pădure.</span>
            </h1>
            <p className="muted" style={{ fontSize: 19, maxWidth: 480 }}>
              Alege o celulă pe harta unei parcele și plantăm un copac în numele tău.
              Îi dăm un nume, îl fotografiem sezon de sezon și îți trimitem un certificat de adopție.
            </p>
            <div className="row gap12 wrapf">
              <button className="btn btn-primary btn-lg" onClick={() => go("parcels")}>
                Vezi parcelele <Icon name="arrowR" size={18} />
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => go("about")}>Cum funcționează</button>
            </div>
            <div className="row gap32" style={{ marginTop: 14 }}>
              <Stat num={totals.adopted.toLocaleString("ro-RO")} label="Copaci plantați" />
              <div style={{ width: 1, background: "var(--line)", alignSelf: "stretch" }}></div>
              <Stat num="3" label="Parcele active" color="var(--clay-deep)" />
              <div style={{ width: 1, background: "var(--line)", alignSelf: "stretch" }}></div>
              <Stat num="38t" label="CO₂ / an estimat" color="var(--clay-deep)" />
            </div>
          </div>
          <div className="hero-art">
            <MiniGridArt />
          </div>
        </div>
      </div>
    </section>
  );
}

/* decorative live mini-grid */
function MiniGridArt() {
  const R = 7, C = 7;
  const seedStatus = (i) => {
    const m = (i * 13 + 5) % 10;
    if (m < 5) return "adopted";
    if (m < 7) return "reserved";
    if (m < 8) return "review";
    return "available";
  };
  return (
    <div className="card" style={{ padding: 18, boxShadow: "var(--shadow-lg)", transform: "rotate(1.2deg)" }}>
      <div className="row between center" style={{ marginBottom: 12, padding: "0 4px", gap: 10 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, whiteSpace: "nowrap" }}>Lunca Argeșului</span>
        <span className="badge" style={{ flex: "none" }}><Icon name="pin" size={12} /> Argeș</span>
      </div>
      <div className="parcel-grid" style={{ gridTemplateColumns: `repeat(${C}, 1fr)`, gap: 6, width: 320, maxWidth: "100%" }}>
        {Array.from({ length: R * C }).map((_, i) => {
          const st = seedStatus(i);
          return <div key={i} className={`cell is-${st}`} style={{ cursor: "default" }}>
            <span className="canopy"></span></div>;
        })}
      </div>
      <div className="row gap16 wrapf" style={{ marginTop: 14, padding: "0 4px" }}>
        <Legend />
      </div>
    </div>
  );
}

function Legend({ compact }) {
  const items = [
    ["adopted", "Adoptat"], ["available", "Disponibil"],
    ["reserved", "Rezervat"], ["review", "În verificare"],
  ];
  return (
    <div className="row wrapf" style={{ gap: compact ? 10 : 14 }}>
      {items.map(([k, l]) => (
        <span key={k} className="row center" style={{ gap: 7, fontSize: 12.5, color: "var(--ink-soft)", fontWeight: 600 }}>
          <span className={`cell is-${k}`} style={{ width: 16, height: 16, aspectRatio: "auto", borderRadius: 4, cursor: "default" }}></span>
          {l}
        </span>
      ))}
    </div>
  );
}

function HowItWorks() {
  const steps = [
    { icon: "grid", t: "Alege o celulă", d: "Deschide harta unei parcele și apasă pe orice slot disponibil din grilă." },
    { icon: "heart", t: "Adoptă copacul", d: "Plătești adopția cu cardul sau prin transfer. Poți dărui copacul cuiva drag." },
    { icon: "camera", t: "Urmărește evoluția", d: "Echipa de teren plantează și fotografiază copacul sezon de sezon." },
    { icon: "download", t: "Primește certificatul", d: "Îți trimitem pe email un certificat PDF de adopție, personalizat cu numele copacului." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead align="center" eyebrow="Cum funcționează"
          title="De la o celulă pe hartă la un copac cu nume"
          sub="Patru pași simpli. Fără cont obligatoriu — poți adopta și ca invitat." />
        <div className="how-grid" style={{ marginTop: 52 }}>
          {steps.map((s, i) => (
            <div key={i} className="col" style={{ gap: 14 }}>
              <div className="row center between">
                <span style={{ width: 52, height: 52, borderRadius: 16, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center" }}>
                  <Icon name={s.icon} size={24} />
                </span>
                <span className="mono" style={{ fontSize: 28, color: "var(--line)", fontWeight: 600 }}>0{i + 1}</span>
              </div>
              <h3 style={{ fontSize: 21 }}>{s.t}</h3>
              <p className="muted" style={{ fontSize: 15 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedParcels({ go, parcels }) {
  return (
    <section className="section" style={{ background: "var(--bg-deep)" }}>
      <div className="wrap">
        <div className="row between center wrapf" style={{ gap: 16, marginBottom: 40 }}>
          <SectionHead eyebrow="Parcele active" title="Unde plantăm acum" />
          <button className="btn btn-ghost" onClick={() => go("parcels")}>Toate parcelele <Icon name="arrowR" size={16} /></button>
        </div>
        <div className="feat-grid">
          {parcels.map(p => {
            const pct = Math.round((p.adopted / p.total) * 100);
            return (
              <div key={p.id} className="card" style={{ overflow: "hidden", cursor: "pointer" }}
                onClick={() => go("parcel", { id: p.id })}>
                <div className="imgph green" style={{ height: 168, borderRadius: 0 }}>plan parcelă · {p.rows}×{p.cols}</div>
                <div className="col" style={{ padding: 22, gap: 14 }}>
                  <div className="row between center">
                    <h3 style={{ fontSize: 22 }}>{p.name}</h3>
                    <span className="badge"><Icon name="pin" size={12} /> {p.county}</span>
                  </div>
                  <p className="muted" style={{ fontSize: 14.5, minHeight: 42 }}>{p.desc}</p>
                  <div className="col" style={{ gap: 8 }}>
                    <div className="row between" style={{ fontSize: 13, fontWeight: 600 }}>
                      <span className="muted">{p.adopted} din {p.total} adoptați</span>
                      <span style={{ color: "var(--green)" }}>{pct}%</span>
                    </div>
                    <div style={{ height: 8, background: "var(--surface-2)", borderRadius: 10, overflow: "hidden" }}>
                      <div style={{ width: pct + "%", height: "100%", background: "var(--green)", borderRadius: 10 }}></div>
                    </div>
                  </div>
                  <button className="btn btn-soft btn-block" style={{ marginTop: 4 }}>
                    Deschide harta <Icon name="arrowR" size={16} />
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ImpactStrip({ totals }) {
  return (
    <section style={{ background: "var(--green-deep)", color: "#eef2e6" }}>
      <div className="wrap section" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="impact-grid">
          <div style={{ gridColumn: "span 2" }}>
            <span className="eyebrow" style={{ color: "var(--clay-soft)" }}>Impactul nostru</span>
            <h2 style={{ fontSize: "clamp(28px,4vw,40px)", color: "#fff", marginTop: 12, maxWidth: 460 }}>
              Fiecare copac contează — și îl poți vedea crescând
            </h2>
          </div>
          {[
            [totals.adopted.toLocaleString("ro-RO"), "copaci plantați"],
            ["38 t", "CO₂ absorbit / an"],
            ["7,8 ha", "teren reîmpădurit"],
            ["1.240", "tutori activi"],
          ].map(([n, l], i) => (
            <div key={i} className="col" style={{ gap: 6 }}>
              <span className="stat-num" style={{ fontSize: 48, color: "#fff" }}>{n}</span>
              <span style={{ color: "#bcc8ab", fontSize: 15 }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 860, textAlign: "center" }}>
        <Icon name="leaf" size={40} style={{ color: "var(--clay)" }} />
        <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px,3.4vw,34px)", lineHeight: 1.3, margin: "24px 0 28px", letterSpacing: "-.01em" }}>
          „Am adoptat un stejar pentru ziua bunicului. Acum primim poze cu el la fiecare schimbare de sezon —
          a devenit un ritual de familie pe care îl așteptăm cu drag.”
        </p>
        <div className="row center" style={{ justifyContent: "center", gap: 12 }}>
          <span style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--clay-soft)", display: "grid", placeItems: "center", color: "var(--clay-deep)", fontWeight: 700 }}>AP</span>
          <div className="col" style={{ textAlign: "left" }}>
            <span style={{ fontWeight: 700 }}>Ana Popescu</span>
            <span className="faint" style={{ fontSize: 13 }}>tutore din 2025 · 2 copaci</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ go }) {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="card" style={{ background: "var(--clay-tint)", border: "1px solid var(--clay-soft)", padding: "clamp(36px,5vw,64px)", textAlign: "center" }}>
          <h2 style={{ fontSize: "clamp(30px,4.4vw,48px)", maxWidth: 640, margin: "0 auto 16px" }}>
            Pregătit să plantezi primul tău copac?
          </h2>
          <p className="muted" style={{ fontSize: 18, maxWidth: 520, margin: "0 auto 28px" }}>
            Adopția pornește de la 120 lei. Durează două minute și poate fi un cadou pentru oricine.
          </p>
          <div className="row" style={{ justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={() => go("parcels")}>Adoptă un copac</button>
            <button className="btn btn-clay btn-lg" onClick={() => go("gridgen")}>Planifică o parcelă</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Landing({ go, parcels, totals }) {
  return (
    <div className="view">
      <Hero go={go} totals={totals} />
      <HowItWorks />
      <FeaturedParcels go={go} parcels={parcels} />
      <ImpactStrip totals={totals} />
      <Testimonial />
      <FinalCTA go={go} />
    </div>
  );
}

Object.assign(window, { Landing, Legend });