/* PLASTIFY · Home — Variant A2 — Industrial Editorial
   More typographic / editorial: oversized headline split across rows,
   image-text alternating sections, fewer cards, more whitespace.
   Stays inside the same brand tokens. */
/* global React */

function HomeA2() {
  const featured = window.PLASTIFY_PRODUCTS.slice(0, 6);
  return (
    <div data-screen-label="Acasă">
      {/* Editorial hero — dark band on top, then split editorial */}
      <section style={{ paddingTop: 160, paddingBottom: 80, background: "var(--ink-900)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div className="container">
          <div className="eyebrow eyebrow-dark">PLASTIFY · ESTABLISHED 2014</div>
          <h1 style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(72px, 12vw, 200px)",
            lineHeight: 0.86, textTransform: "uppercase", margin: "32px 0 0",
            color: "var(--silver-300)", letterSpacing: "-0.01em"
          }}>
            <span style={{ display: "block" }}>Material</span>
            <span style={{ display: "block", color: "var(--gold-400)" }}>Works.</span>
          </h1>
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.1)" }} className="hero-split">
            <div>
              <div className="techno" style={{ fontSize: 11, color: "var(--gold-400)", letterSpacing: "0.18em", marginBottom: 12 }}>VOL. 01 — CATALOG 2026</div>
              <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--silver-300)", margin: 0, fontWeight: 300, maxWidth: 480 }}>
                Plăci, profile, clipsuri și capace. Tăiate la cota ta. Livrate în toată țara, dintr-un depozit din Brașov.
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn btn-primary on-dark" href="#/cere-oferta">Cere ofertă →</a>
                <a className="btn btn-ghost-dark" href="#/materiale">Catalog</a>
              </div>
            </div>
            <div className="hero-meta" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignSelf: "end" }}>
              {[["§ 01","Plăci PVC, plexi, policarbonat"],["§ 02","Accesorii signage AluSign"],["§ 03","Tăiere la cotă cu termen 5–10 zile"],["§ 04","Livrare națională în 48h"]].map(([k,v]) => (
                <div key={k} style={{ borderTop: "1px solid rgba(255,255,255,0.15)", paddingTop: 12 }}>
                  <div className="techno" style={{ fontSize: 11, color: "var(--gold-400)", letterSpacing: "0.14em" }}>{k}</div>
                  <div style={{ fontSize: 14, color: "var(--silver-300)", marginTop: 6, lineHeight: 1.4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Editorial featured row — 2 large cards then 4 small */}
      <section style={{ padding: "96px 0 64px", background: "#fff" }}>
        <div className="container">
          <div className="eyebrow">§ Materiale</div>
          <h2 style={{ marginTop: 8, marginBottom: 48, fontFamily: "var(--font-display)", fontSize: "clamp(40px, 6vw, 80px)", textTransform: "uppercase", lineHeight: 1.0, maxWidth: 900 }}>
            Plăci la cota ta,<br/><span style={{ color: "var(--gold-500)" }}>accesorii din stoc.</span>
          </h2>

          <div className="editorial-feat" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginBottom: 32 }}>
            {featured.slice(0, 2).map(p => (
              <a key={p.id} href={`#/produs/${p.slug}`} style={{ textDecoration: "none", display: "grid", gridTemplateRows: "auto auto", gap: 0 }}>
                <div style={{ background: "var(--silver-50)", aspectRatio: "16/10", display: "grid", placeItems: "center", padding: 48, overflow: "hidden" }}>
                  <img src={p.img} alt={p.name} style={{ maxWidth: "70%", maxHeight: "100%" }}/>
                </div>
                <div style={{ paddingTop: 20, display: "flex", justifyContent: "space-between", alignItems: "flex-end", borderTop: "2px solid var(--ink-900)" }}>
                  <div>
                    <div className="techno" style={{ fontSize: 11, color: "var(--gold-500)", letterSpacing: "0.14em" }}>{p.cat.toUpperCase()} · {p.subcat}</div>
                    <h3 style={{ marginTop: 8, fontFamily: "var(--font-display)", fontSize: 32, textTransform: "uppercase", color: "var(--ink-900)" }}>{p.name}</h3>
                    <div className="mono" style={{ fontSize: 13, color: "var(--silver-700)", marginTop: 4 }}>{p.spec}</div>
                  </div>
                  <i data-lucide="arrow-up-right" style={{ width: 28, color: "var(--ink-900)" }}></i>
                </div>
              </a>
            ))}
          </div>

          <div className="editorial-row" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {featured.slice(2, 6).map(p => <ProductCard key={p.id} p={p} />)}
          </div>

          <div style={{ textAlign: "center", marginTop: 56 }}>
            <a className="btn btn-ghost-light btn-lg" href="#/materiale">Toate materialele · {window.PLASTIFY_PRODUCTS.length} referințe →</a>
          </div>
        </div>
      </section>

      {/* PULL-QUOTE EDITORIAL */}
      <section style={{ padding: "120px 0", background: "var(--silver-50)" }}>
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <span className="divider-gold" style={{ marginBottom: 24 }}></span>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)", textTransform: "uppercase", lineHeight: 1.1, margin: "16px 0", color: "var(--ink-900)" }}>
            "Lucrăm cu materiale, nu cu termeni de marketing.<br/><span style={{ color: "var(--gold-500)" }}>Tăiem, livrăm, răspundem la telefon."</span>
          </p>
          <div className="techno" style={{ fontSize: 11, color: "var(--silver-700)", letterSpacing: "0.14em", marginTop: 16 }}>ARON · FONDATOR PLASTIFY</div>
        </div>
      </section>

      {/* DESPRE — split column editorial */}
      <section style={{ padding: "96px 0", background: "#fff" }}>
        <div className="container despre-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "flex-start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="eyebrow">§ Despre</div>
            <h2 style={{ marginTop: 8, fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5vw, 72px)", textTransform: "uppercase", lineHeight: 1.0 }}>Plastify, pe scurt.</h2>
          </div>
          <div>
            {[
              ["§ 01 — Cine suntem","Aron Plastify este un distribuitor de materiale plastice și accesorii signage cu sediul în Brașov. Furnizăm ateliere de print, signage shops, mobilieri și constructori din toată România."],
              ["§ 02 — Cum lucrăm","Pe bază de comandă fermă și ofertă scrisă. Fără cont online, fără coș de cumpărături. Cerere prin formular, telefon sau email — răspuns în 24h."],
              ["§ 03 — Stoc & producție","Avem stoc parțial pentru plăci și accesorii frecvente. Pentru tăieri custom și produse pe comandă, termenul standard este de 5–10 zile lucrătoare."],
              ["§ 04 — Livrare","În toată țara, prin transportator partener, în 48h pentru produsele aflate în stoc. Ridicare directă din depozit cu programare."],
            ].map(([t, d]) => (
              <div key={t} style={{ paddingBottom: 32, marginBottom: 32, borderBottom: "1px solid var(--line-1)" }}>
                <div className="techno" style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.14em", marginBottom: 12 }}>{t.toUpperCase()}</div>
                <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-700)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNERS — editorial style */}
      <section style={{ padding: "80px 0", background: "var(--ink-900)", color: "#fff" }}>
        <div className="container">
          <div className="techno" style={{ fontSize: 11, color: "var(--gold-400)", letterSpacing: "0.18em", marginBottom: 32 }}>COLABORĂM CU §</div>
          <div className="partners-edit" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
            {["Atelier Print","Mobila Nord","Signage.ro","Brașov Fab","Poliprint","Studio BV"].map((p, i) => (
              <div key={p} style={{
                padding: "32px 24px",
                borderRight: (i+1) % 3 !== 0 ? "1px solid rgba(255,255,255,0.1)" : "none",
                borderBottom: i < 3 ? "1px solid rgba(255,255,255,0.1)" : "none",
              }}>
                <div className="techno" style={{ fontSize: 11, color: "var(--silver-500)", letterSpacing: "0.14em" }}>§ {String(i+1).padStart(2,"0")}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--silver-300)", textTransform: "uppercase", marginTop: 10 }}>{p}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "120px 0", background: "var(--gold-400)", color: "var(--ink-900)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end" }}>
          <div>
            <div className="techno" style={{ fontSize: 11, color: "var(--ink-900)", letterSpacing: "0.18em", opacity: 0.7 }}>§ NEXT STEP</div>
            <h2 style={{ marginTop: 12, fontFamily: "var(--font-display)", fontSize: "clamp(48px, 7vw, 96px)", textTransform: "uppercase", lineHeight: 0.95 }}>Cere o ofertă.<br/>Răspundem în 24h.</h2>
          </div>
          <a href="#/cere-oferta" style={{
            display: "inline-flex", alignItems: "center", gap: 16, textDecoration: "none",
            background: "var(--ink-900)", color: "var(--gold-400)", padding: "20px 28px", borderRadius: 2,
            fontFamily: "var(--font-display)", fontSize: 20, textTransform: "uppercase",
          }}>Trimite cerere <i data-lucide="arrow-right" style={{ width: 22 }}></i></a>
        </div>
      </section>
    </div>
  );
}

window.HomeA2 = HomeA2;