/* PLASTIFY · Home — Variant A3 — Industrial Catalog (denser, photo-grid first, technical-led) */
/* global React */

function HomeA3() {
  return (
    <div data-screen-label="Acasă">
      {/* HERO — split: text left, photo grid right */}
      <section style={{ paddingTop: 140, paddingBottom: 64, background: "#fff", borderBottom: "1px solid var(--line-1)" }}>
        <div className="container hero-a3" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow">CATALOG · BRAȘOV · 2026</div>
            <h1 style={{ marginTop: 16, fontFamily: "var(--font-display)", fontSize: "clamp(48px, 6.4vw, 88px)", textTransform: "uppercase", lineHeight: 0.95 }}>
              Materiale plastice<br/>din depozit,<br/><span style={{ color: "var(--gold-500)" }}>la cota ta.</span>
            </h1>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color: "var(--ink-700)", maxWidth: 540 }}>
              {window.PLASTIFY_PRODUCTS.length}+ referințe active · plăci, profile, capace, clipsuri. Tăiem la dimensiunea cerută. Livrăm în 48h.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary btn-lg" href="#/materiale">Catalog complet →</a>
              <a className="btn btn-ghost-light btn-lg" href="#/cere-oferta">Cere ofertă</a>
            </div>
            <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--line-1)", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
              {[["12+","ani"],["48h","livrare"],["~200","produse"]].map(([n,l]) => (
                <div key={l}>
                  <div style={{ fontFamily: "var(--font-techno)", fontSize: 28, color: "var(--ink-900)", lineHeight: 1 }}>{n}</div>
                  <div className="techno" style={{ fontSize: 11, color: "var(--silver-700)", letterSpacing: "0.1em", marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="hero-photo-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, height: 560 }}>
            {window.PLASTIFY_PRODUCTS.slice(0, 4).map((p, i) => (
              <a key={p.id} href={`#/produs/${p.slug}`} style={{
                background: "var(--silver-50)", display: "grid", placeItems: "center", padding: 24,
                position: "relative", overflow: "hidden", borderRadius: 2, textDecoration: "none",
              }}>
                <img src={p.img} alt={p.name} style={{ maxWidth: "80%", maxHeight: "80%" }}/>
                <div style={{ position: "absolute", left: 16, bottom: 16, right: 16, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                  <div>
                    <div className="techno" style={{ fontSize: 9, color: "var(--gold-500)", letterSpacing: "0.14em" }}>{p.cat.toUpperCase()}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 14, textTransform: "uppercase", color: "var(--ink-900)", marginTop: 4 }}>{p.short}</div>
                  </div>
                  <i data-lucide="arrow-up-right" style={{ width: 18, color: "var(--ink-900)" }}></i>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CATEGORII compact strip */}
      <section style={{ background: "var(--ink-900)", color: "#fff" }}>
        <div className="container">
          <div className="categ-strip" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              { c: "Plăci", t: "PVC, plexi, policarbonat", n: window.PLASTIFY_PRODUCTS.filter(p => p.cat === "Plăci").length, icon: "layers" },
              { c: "Accesorii", t: "Clipsuri AluSign", n: window.PLASTIFY_PRODUCTS.filter(p => p.cat === "Accesorii").length, icon: "puzzle" },
              { c: "Signage", t: "Capace & end-cap-uri", n: window.PLASTIFY_PRODUCTS.filter(p => p.cat === "Signage").length, icon: "frame" },
              { c: "La cerere", t: "Tăiere & finisare custom", n: "∞", icon: "scissors" },
            ].map((c, i) => (
              <a key={c.c} href="#/materiale" style={{
                padding: "32px 24px", textDecoration: "none", color: "inherit",
                borderRight: i < 3 ? "1px solid rgba(255,255,255,0.08)" : "none",
                display: "flex", flexDirection: "column", gap: 12,
              }}>
                <i data-lucide={c.icon} style={{ width: 24, color: "var(--gold-400)" }}></i>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--silver-300)", textTransform: "uppercase" }}>{c.c}</div>
                  <div style={{ fontSize: 13, color: "var(--silver-500)", marginTop: 4 }}>{c.t}</div>
                </div>
                <div className="techno" style={{ fontSize: 11, color: "var(--gold-400)", letterSpacing: "0.14em" }}>{c.n} REFERINȚE →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CATALOG GRID — denser */}
      <section style={{ padding: "80px 0", background: "var(--silver-50)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow">CATALOG · CELE MAI CĂUTATE</div>
              <h2 style={{ marginTop: 8, fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3.6vw, 48px)", textTransform: "uppercase", lineHeight: 1.05 }}>Catalog activ</h2>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              {window.PLASTIFY_CATS.map(c => (
                <a key={c} className="chip" href="#/materiale">{c}</a>
              ))}
            </div>
          </div>
          <div className="catalog-tight" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
            {window.PLASTIFY_PRODUCTS.slice(0, 12).map(p => <ProductCard key={p.id} p={p} />)}
          </div>
          <div style={{ textAlign: "center", marginTop: 40 }}>
            <a className="btn btn-primary" href="#/materiale">Vezi toate {window.PLASTIFY_PRODUCTS.length} referințele →</a>
          </div>
        </div>
      </section>

      {/* SERVICES — technical row */}
      <section style={{ padding: "80px 0", background: "#fff", borderTop: "1px solid var(--line-1)" }}>
        <div className="container">
          <div className="eyebrow">SERVICII</div>
          <h2 style={{ marginTop: 8, marginBottom: 40, fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3.6vw, 48px)", textTransform: "uppercase", lineHeight: 1.05 }}>Ce facem cu materialele.</h2>
          <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line-1)" }}>
            {[
              ["scissors","Tăiere la cotă","Decupaj precis pe dimensiuni custom — toleranță ±0,5 mm. Pentru cantități > 10 mp."],
              ["truck","Livrare națională","Transportator partener. 48h pentru stoc, 5–10 zile pentru comandă fermă."],
              ["package-2","Stoc Brașov","Plăci PVC și accesorii AluSign frecvente — disponibile pentru ridicare directă."],
              ["headphones","Consultanță tehnică","Recomandări material, grosime și finisaj. Gratuit, telefonic sau la depozit."],
            ].map(([icon,t,d], i) => (
              <div key={t} style={{
                padding: "32px 24px",
                borderRight: i < 3 ? "1px solid var(--line-1)" : "none",
                borderBottom: "1px solid var(--line-1)",
                display: "flex", flexDirection: "column", gap: 12,
              }}>
                <i data-lucide={icon} style={{ width: 24, color: "var(--gold-500)" }}></i>
                <div className="techno" style={{ fontSize: 11, color: "var(--ink-900)", letterSpacing: "0.14em" }}>{t.toUpperCase()}</div>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: "var(--ink-700)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DESPRE compact */}
      <section style={{ padding: "80px 0", background: "var(--ink-900)", color: "#fff" }}>
        <div className="container despre-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow eyebrow-dark">DESPRE</div>
            <h2 style={{ marginTop: 8, marginBottom: 16, fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)", textTransform: "uppercase", color: "var(--silver-300)", lineHeight: 1.05 }}>Distribuitor B2B.<br/>Brașov, din 2014.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--silver-400)", maxWidth: 580 }}>
              Plastify lucrează cu producători de signage, mobilieri, ateliere de print și constructori din toată țara. Stoc fizic, ofertă scrisă, livrare națională.
            </p>
            <div style={{ marginTop: 24, 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="#/contact">Contact</a>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {[["12+","ani"],["48h","livrare"],["~200","produse"],["100%","oferte 24h"]].map(([n,l]) => (
              <div key={l} style={{ padding: 24, border: "1px solid rgba(255,255,255,0.1)", borderRadius: 2 }}>
                <div style={{ fontFamily: "var(--font-techno)", fontSize: 40, color: "var(--gold-400)", lineHeight: 1 }}>{n}</div>
                <div className="techno" style={{ fontSize: 11, color: "var(--silver-400)", letterSpacing: "0.1em", marginTop: 8 }}>{l.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomeA3 = HomeA3;