/* PLASTIFY · shared shell: Header, Footer, MobileDrawer, FloatingCta, ProductCard */
/* global React */
const { useState: useStateS, useEffect: useEffectS } = React;

function HexMark({ size = 32, invert = false }) {
  return (
    <img src="../assets/logos/icon_hex.png" alt=""
      style={{ width: size, height: "auto", display: "block",
        filter: invert ? "brightness(0) invert(1)" : "none" }} />
  );
}

function Logo({ dark = false }) {
  return (
    <a className="site-logo" href="#/" onClick={() => window.scrollTo(0,0)}>
      <HexMark size={32} />
      <div className="lockup">
        <span className="wordmark" style={{ color: dark ? "var(--silver-300)" : "var(--ink-900)" }}>PLASTIFY</span>
        <span className="tagline">MATERIAL WORKS</span>
      </div>
    </a>
  );
}

function SiteHeader({ tone = "dark", route, ctaLabel = "Cere ofertă →" }) {
  const [scrolled, setScrolled] = useStateS(false);
  const [drawerOpen, setDrawerOpen] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const isDark = tone === "dark";

  const isActive = (hash) => {
    if (hash === "#/") return route === "#/" || route === "";
    return route && route.startsWith(hash);
  };

  return (
    <>
      <header className={`site-header ${isDark ? "dark" : "light"} ${scrolled ? "scrolled" : ""}`}>
        <div className="container">
          <Logo dark={isDark && !scrolled || isDark} />
          <nav className="site-nav">
            {window.PLASTIFY_NAV.slice(0, -1).map(n => (
              <a key={n.hash} href={n.hash} className={isActive(n.hash) ? "active" : ""}>{n.label}</a>
            ))}
            <a href="#/contact" className={isActive("#/contact") ? "active" : ""}>Contact</a>
            <a className="btn btn-primary btn-sm" href="#/cere-oferta">{ctaLabel}</a>
          </nav>
          <button className="menu-btn" onClick={() => setDrawerOpen(true)} aria-label="Meniu">
            <i data-lucide="menu" style={{ width: 20, height: 20 }}></i>
          </button>
        </div>
      </header>

      <div className={`mobile-drawer ${drawerOpen ? "open" : ""}`}>
        <div className="top">
          <Logo dark={true} />
          <button className="menu-btn" style={{ borderColor: "rgba(255,255,255,0.4)", color: "#fff" }} onClick={() => setDrawerOpen(false)} aria-label="Închide">
            <i data-lucide="x" style={{ width: 20, height: 20 }}></i>
          </button>
        </div>
        <nav>
          {window.PLASTIFY_NAV.map(n => (
            <a key={n.hash} href={n.hash} className={isActive(n.hash) ? "active" : ""}
              onClick={() => setDrawerOpen(false)}>{n.label}</a>
          ))}
        </nav>
        <div className="foot">
          <span>+40 7XX XXX XXX</span>
          <span>office@aronplastify.eu</span>
          <span>Brașov, România</span>
        </div>
      </div>
    </>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="grid">
          <div>
            <Logo dark={true} />
            <p style={{ fontSize: 13, marginTop: 16, maxWidth: 320, lineHeight: 1.55, color: "var(--silver-400)" }}>
              Distribuitor de materiale plastice și accesorii signage din Brașov. Tăiem la dimensiunea cerută. Livrăm în toată România.
            </p>
            <div style={{ marginTop: 20, display: "flex", gap: 12 }}>
              <a className="btn btn-primary btn-sm" href="#/cere-oferta">Cere ofertă →</a>
            </div>
          </div>
          <div>
            <div className="col-title">Materiale</div>
            <a href="#/materiale">Plăci PVC</a>
            <a href="#/materiale">Plexiglass</a>
            <a href="#/materiale">Policarbonat</a>
            <a href="#/materiale">Accesorii signage</a>
          </div>
          <div>
            <div className="col-title">Companie</div>
            <a href="#/">Acasă</a>
            <a href="#/cere-oferta">Cere ofertă</a>
            <a href="#/contact">Contact</a>
          </div>
          <div>
            <div className="col-title">Legale</div>
            <a href="#/legale">Termeni & Condiții</a>
            <a href="#/legale/confidentialitate">Confidențialitate</a>
            <a href="#/legale/cookies">Cookies</a>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 PLASTIFY · MATERIAL WORKS · Aron Plastify SRL</span>
          <span>BRAȘOV · ROMÂNIA · CUI RO00000000</span>
        </div>
      </div>
    </footer>
  );
}

function FloatingCta() {
  return (
    <a className="floating-cta" href="#/cere-oferta">Cere ofertă →</a>
  );
}

function ProductCard({ p, onClick, layout = "card" }) {
  if (layout === "row") {
    return (
      <a href={`#/produs/${p.slug}`} className="product-card"
         style={{ flexDirection: "row", alignItems: "stretch", textDecoration: "none" }}>
        <div className="img-wrap" style={{ width: 160, flexShrink: 0, aspectRatio: "1" }}>
          <img src={p.img} alt={p.name} />
        </div>
        <div className="body" style={{ flex: 1, borderTop: 0, borderLeft: "1px solid var(--line-1)", justifyContent: "center" }}>
          <div className="cat">{p.cat.toUpperCase()} · {p.subcat}</div>
          <div className="name">{p.name}</div>
          <div className="spec">{p.spec}</div>
          <div className="price">{p.price.toUpperCase()}</div>
        </div>
      </a>
    );
  }
  return (
    <a href={`#/produs/${p.slug}`} className="product-card" style={{ textDecoration: "none" }}>
      <div className="img-wrap"><img src={p.img} alt={p.name} /></div>
      <div className="body">
        <div className="cat">{p.cat.toUpperCase()}</div>
        <div className="name">{p.name}</div>
        <div className="spec">{p.spec}</div>
        <div className="price">{p.price.toUpperCase()}</div>
      </div>
    </a>
  );
}

/* Generic Page Header / hero band for sub-pages */
function PageHeading({ eyebrow, title, sub }) {
  return (
    <section style={{ background: "var(--ink-900)", color: "#fff", paddingTop: 140, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
      <img src="../assets/logos/icon_hex.png" alt="" style={{
        position: "absolute", right: -60, top: 60, width: 420, opacity: 0.05, filter: "brightness(0) invert(1)" }}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="eyebrow eyebrow-dark">{eyebrow}</div>
        <h1 className="display" style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(48px, 7vw, 96px)",
          lineHeight: 1.0, textTransform: "uppercase", color: "var(--silver-300)",
          margin: "20px 0 0", maxWidth: 1100 }}>{title}</h1>
        {sub && <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.6, color: "var(--silver-400)", maxWidth: 720 }}>{sub}</p>}
      </div>
    </section>
  );
}

/* breadcrumb */
function Breadcrumb({ items }) {
  return (
    <nav style={{ padding: "20px 0", borderBottom: "1px solid var(--line-1)", background: "#fff" }}>
      <div className="container" style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap",
          fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.04em", color: "var(--silver-700)" }}>
        {items.map((it, i) => (
          <React.Fragment key={i}>
            {it.href ? <a href={it.href} style={{ color: "var(--silver-700)", textDecoration: "none" }}>{it.label}</a>
                     : <span style={{ color: "var(--ink-900)" }}>{it.label}</span>}
            {i < items.length - 1 && <span style={{ color: "var(--silver-400)" }}>/</span>}
          </React.Fragment>
        ))}
      </div>
    </nav>
  );
}

window.SiteHeader = SiteHeader;
window.SiteFooter = SiteFooter;
window.FloatingCta = FloatingCta;
window.ProductCard = ProductCard;
window.PageHeading = PageHeading;
window.Breadcrumb = Breadcrumb;
window.HexMark = HexMark;
window.Logo = Logo;