/* ============================================================
   Shared UI — Icon, Header, Footer, building blocks
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

/* ---- Icon set (simple stroke icons) ---- */
const PATHS = {
  leaf: "M11 3C6 3 3 7 3 12c0 3 1 5 1 5s7 1 11-3 4-11 4-11-9-1-9-1z M5 19C9 13 13 11 17 9",
  grid: "M4 4h7v7H4z M13 4h7v7h-7z M4 13h7v7H4z M13 13h7v7h-7z",
  user: "M12 12a4 4 0 100-8 4 4 0 000 8z M4 20c0-4 4-6 8-6s8 2 8 6",
  cart: "M3 4h2l2.4 12.4a1 1 0 001 .8h9.2a1 1 0 001-.8L21 8H6 M9 21a1 1 0 100-2 1 1 0 000 2 M18 21a1 1 0 100-2 1 1 0 000 2",
  menu: "M4 7h16 M4 12h16 M4 17h16",
  close: "M6 6l12 12 M18 6L6 18",
  arrowR: "M5 12h14 M13 6l6 6-6 6",
  arrowL: "M19 12H5 M11 18l-6-6 6-6",
  check: "M5 12l4.5 4.5L19 7",
  plus: "M12 5v14 M5 12h14",
  search: "M11 18a7 7 0 100-14 7 7 0 000 14z M20 20l-3.5-3.5",
  camera: "M4 8h3l1.5-2h7L17 8h3v11H4z M12 16a3 3 0 100-6 3 3 0 000 6z",
  map: "M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z M9 4v14 M15 6v14",
  chart: "M4 20V10 M10 20V4 M16 20v-7 M22 20H2",
  shield: "M12 3l8 3v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z M9 12l2 2 4-4",
  heart: "M12 20s-7-4.5-9.5-9C1 8 3 4 6.5 4 9 4 12 7 12 7s3-3 5.5-3C21 4 23 8 21.5 11 19 15.5 12 20 12 20z",
  download: "M12 4v11 M8 11l4 4 4-4 M5 19h14",
  bell: "M18 16V11a6 6 0 10-12 0v5l-2 2h16z M10 21a2 2 0 004 0",
  settings: "M12 15a3 3 0 100-6 3 3 0 000 6z M19 12a7 7 0 00-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 00-1.7-1L14.5 3h-5l-.3 2.5a7 7 0 00-1.7 1l-2.4-1-2 3.5L3 11a7 7 0 000 2l-2 1.5 2 3.5 2.4-1a7 7 0 001.7 1l.4 2.5h5l.3-2.5a7 7 0 001.7-1l2.4 1 2-3.5L19 13a7 7 0 000-1z",
  edit: "M4 20h4L19 9l-4-4L4 16v4z M14 6l4 4",
  upload: "M12 16V5 M8 9l4-4 4 4 M5 19h14",
  spark: "M12 3l1.8 6.2L20 11l-6.2 1.8L12 19l-1.8-6.2L4 11l6.2-1.8z",
  pin: "M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z M12 12a2.5 2.5 0 100-5 2.5 2.5 0 000 5z",
  clock: "M12 21a9 9 0 100-18 9 9 0 000 18z M12 7v5l3 2",
  mail: "M3 6h18v12H3z M3 7l9 6 9-6",
  logout: "M14 4h4v16h-4 M3 12h11 M9 8l-4 4 4 4",
  list: "M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01",
  zoom: "M11 18a7 7 0 100-14 7 7 0 000 14z M20 20l-3.5-3.5 M11 8v6 M8 11h6",
  share: "M16 6a3 3 0 100-.01 M16 18a3 3 0 100-.01 M6 12a3 3 0 100-.01 M8.6 13.5l6.8 3.8 M15.4 6.7L8.6 10.5",
  facebook: "M14 8h2V5h-2c-2 0-3 1.3-3 3v2H9v3h2v6h3v-6h2.2l.3-3H14V8.5c0-.3.2-.5.5-.5z",
  tree: "M12 3l5 7h-3l4 6h-5v5h-2v-5H6l4-6H7z",
};

function Icon({ name, size = 20, stroke = 2, fill = "none", style, className }) {
  const filled = name === "facebook";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : fill}
      stroke={filled ? "none" : "currentColor"} strokeWidth={stroke} strokeLinecap="round"
      strokeLinejoin="round" style={style} className={className} aria-hidden="true">
      <path d={PATHS[name] || ""} />
    </svg>
  );
}

/* ---- Logo mark ---- */
function Logo({ size = 34 }) {
  return (
    <span className="mark" style={{ width: size, height: size }}>
      <Icon name="tree" size={size * 0.56} stroke={0} fill="#dfe8cf" style={{ color: "#dfe8cf" }} />
    </span>
  );
}

/* ---- Header ---- */
function Header({ route, go, cartCount, user, onMenu }) {
  const NAV = [
    { k: "parcels", label: "Parcele" },
    { k: "gridgen", label: "Generator grilă" },
    { k: "about", label: "Despre noi" },
    { k: "admin", label: "Admin" },
  ];
  const active = (k) => route.name === k || (k === "parcels" && route.name === "parcel");
  return (
    <header className="hdr">
      <div className="wrap hdr-in">
        <div className="brand" onClick={() => go("home")}>
          <Logo />
          <span>Adopt a Tree<span style={{ color: "var(--clay)" }}>!</span></span>
        </div>
        <nav className="nav">
          {NAV.map(n => (
            <a key={n.k} className={active(n.k) ? "active" : ""} onClick={() => go(n.k)}>{n.label}</a>
          ))}
        </nav>
        <div className="hdr-right">
          <button className="hdr-cart" onClick={() => go("checkout")} title="Coș">
            <Icon name="cart" size={19} />
            {cartCount > 0 && <span className="count">{cartCount}</span>}
          </button>
          {user
            ? <button className="btn btn-soft btn-sm" onClick={() => go("profile")}>
                <Icon name="user" size={16} /> {user.name.split(" ")[0]}
              </button>
            : <button className="btn btn-ghost btn-sm" onClick={() => go("login")}>Cont</button>}
          <button className="btn btn-primary btn-sm" onClick={() => go("parcels")} style={{ marginLeft: 2 }}>
            Adoptă
          </button>
          <button className="hdr-menu-btn" onClick={onMenu}><Icon name="menu" /></button>
        </div>
      </div>
    </header>
  );
}

/* ---- Mobile nav drawer ---- */
function MobileNav({ open, close, go, user }) {
  if (!open) return null;
  const NAV = [
    ["parcels", "Parcele"], ["gridgen", "Generator grilă"], ["about", "Despre noi"],
    ["profile", "Contul meu"], ["admin", "Admin"],
  ];
  return (
    <div className="overlay" style={{ alignItems: "stretch", justifyItems: "end" }} onClick={close}>
      <div className="drawer-r" style={{ width: 300 }} onClick={e => e.stopPropagation()}>
        <div className="row between center" style={{ padding: "20px 22px" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19 }}>Meniu</span>
          <button className="hdr-cart" onClick={close}><Icon name="close" size={18} /></button>
        </div>
        <hr className="hr" />
        <div className="col" style={{ padding: 14 }}>
          {NAV.map(([k, l]) => (
            <a key={k} onClick={() => { go(k); close(); }}
              style={{ padding: "14px 16px", fontWeight: 600, fontSize: 16, borderRadius: 12 }}>{l}</a>
          ))}
          <button className="btn btn-primary btn-block" style={{ marginTop: 12 }}
            onClick={() => { go("parcels"); close(); }}>Adoptă un copac</button>
        </div>
      </div>
    </div>
  );
}

/* ---- Footer ---- */
function Footer({ go }) {
  return (
    <footer className="ftr">
      <div className="wrap ftr-grid">
        <div>
          <div className="brand" style={{ color: "#fff", marginBottom: 14 }}>
            <Logo />
            <span>Adopt a Tree<span style={{ color: "var(--clay-soft)" }}>!</span></span>
          </div>
          <p style={{ color: "#bcc8ab", fontSize: 14.5, maxWidth: 320 }}>
            Asociație non-profit care reîmpădurește terenuri degradate din România,
            un copac adoptat pe rând. Fiecare copac are un nume, o poveste și un tutore.
          </p>
          <div className="row gap12" style={{ marginTop: 18 }}>
            <a className="hdr-cart" style={{ background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.16)", color: "#dfe6d3" }}><Icon name="facebook" size={18} /></a>
            <a className="hdr-cart" style={{ background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.16)", color: "#dfe6d3" }}><Icon name="share" size={18} /></a>
            <a className="hdr-cart" style={{ background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.16)", color: "#dfe6d3" }}><Icon name="mail" size={18} /></a>
          </div>
        </div>
        <div className="ftr-col">
          <h4>Explorează</h4>
          <a onClick={() => go("parcels")}>Parcele</a>
          <a onClick={() => go("gridgen")}>Generator grilă</a>
          <a onClick={() => go("parcels")}>Adoptă un copac</a>
          <a onClick={() => go("profile")}>Contul meu</a>
        </div>
        <div className="ftr-col">
          <h4>Organizație</h4>
          <a onClick={() => go("about")}>Despre noi</a>
          <a onClick={() => go("about")}>Raport de impact</a>
          <a onClick={() => go("admin")}>Panou admin</a>
          <a>Contact</a>
        </div>
        <div className="ftr-col">
          <h4>Legal</h4>
          <a>Termeni</a>
          <a>Confidențialitate (GDPR)</a>
          <a>Politica cookie</a>
          <a>Transparență</a>
        </div>
      </div>
      <div className="wrap ftr-bottom">
        <span>© 2026 Adopt a Tree! — Asociație non-profit · CIF 4XXXXXXX</span>
        <span>Făcut cu grijă pentru pământ 🌱</span>
      </div>
    </footer>
  );
}

/* ---- Small reusable: stat ---- */
function Stat({ num, label, sub, color }) {
  return (
    <div className="col" style={{ gap: 4 }}>
      <span className="stat-num" style={{ fontSize: 44, color: color || "var(--green-deep)" }}>{num}</span>
      <span style={{ fontWeight: 600, fontSize: 15 }}>{label}</span>
      {sub && <span className="faint" style={{ fontSize: 13 }}>{sub}</span>}
    </div>
  );
}

/* ---- Section heading ---- */
function SectionHead({ eyebrow, title, sub, align }) {
  return (
    <div className="col" style={{ gap: 12, alignItems: align === "center" ? "center" : "flex-start",
      textAlign: align === "center" ? "center" : "left", maxWidth: align === "center" ? 640 : "none",
      margin: align === "center" ? "0 auto" : 0 }}>
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2 style={{ fontSize: "clamp(28px, 4vw, 42px)" }}>{title}</h2>
      {sub && <p className="muted" style={{ fontSize: 17, maxWidth: 580 }}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { Icon, Logo, Header, MobileNav, Footer, Stat, SectionHead });