/* PLASTIFY · Home — Variant A1 — Industrial Premium (faithful, photo-led, dark hero with stats) */
/* global React */

function HomeA1() {
  return (
    <div data-screen-label="Acasă">
      {/* HERO — dark, full-bleed feel */}
      <section style={{
        paddingTop: 160, paddingBottom: 100, background: "var(--ink-900)", color: "#fff",
        position: "relative", overflow: "hidden",
      }}>
        <img src="../assets/logos/icon_hex.png" alt="" style={{
          position: "absolute", right: -80, top: 80, width: 560, opacity: 0.06, filter: "brightness(0) invert(1)"
        }}/>
        <div className="container" style={{ position: "relative" }}>
          <div className="eyebrow eyebrow-dark">MATERIALE · ACCESORII · SIGNAGE</div>
          <h1 className="display" style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(56px, 8vw, 112px)", lineHeight: 0.95,
            textTransform: "uppercase", margin: "20px 0 0", color: "var(--silver-300)", letterSpacing: "0.01em",
          }}>Materiale și soluții<br/>pentru proiectele <span style={{ color: "var(--gold-400)" }}>tale.</span></h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--silver-400)", marginTop: 28, maxWidth: 620 }}>
            Plăci PVC, plexiglass, policarbonat, profile aluminiu și accesorii. Distribuitor B2B din Brașov, livrăm în toată România.
          </p>
          <div style={{ marginTop: 40, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a className="btn btn-primary btn-lg on-dark" href="#/cere-oferta">Cere ofertă →</a>
            <a className="btn btn-ghost-dark btn-lg" href="#/materiale">Vezi materialele</a>
          </div>
          <div className="hero-stats" style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
            {[["12+","ani de experiență"],["48h","livrare națională"],["~200","referințe materiale"],["B2B","atelier · signage · print"]].map(([n,l]) => (
              <div key={l}>
                <div style={{ fontFamily: "var(--font-techno)", fontSize: 36, color: "var(--gold-400)", lineHeight: 1 }}>{n}</div>
                <div className="techno" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--silver-400)", marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNERS STRIP */}
      <section style={{ padding: "44px 0", background: "var(--ink-900)", borderTop: "1px solid rgba(255,255,255,0.08)", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
        <div className="container">
          <div className="techno" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--gold-400)", textAlign: "center", marginBottom: 24 }}>COLABORĂM CU</div>
          <div className="partners-row" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24, alignItems: "center" }}>
            {["ATELIER PRINT","MOBILA NORD","SIGNAGE.RO","BRAȘOV FAB","POLIPRINT","STUDIO BV"].map(p => (
              <div key={p} style={{ fontFamily: "var(--font-display)", fontSize: 16, letterSpacing: "0.04em", color: "var(--silver-400)", textAlign: "center", textTransform: "uppercase", opacity: 0.7 }}>{p}</div>
            ))}
          </div>
        </div>
      </section>

      {/* MATERIALS featured grid */}
      <section style={{ padding: "96px 0", background: "var(--silver-50)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow">Materiale</div>
              <h2 style={{ marginTop: 8, fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)", textTransform: "uppercase", lineHeight: 1.05 }}>Plăci, profile<br/>și accesorii.</h2>
            </div>
            <a className="btn btn-ghost-light" href="#/materiale">Toate materialele →</a>
          </div>
          <div className="featured-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {window.PLASTIFY_PRODUCTS.slice(0, 8).map(p => <ProductCard key={p.id} p={p} />)}
          </div>
        </div>
      </section>

      {/* DESPRE + STATS */}
      <section style={{ padding: "96px 0", background: "#fff" }}>
        <div className="container despre-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow">Despre noi</div>
            <h2 style={{ marginTop: 8, marginBottom: 24, fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)", textTransform: "uppercase", lineHeight: 1.05 }}>Distribuitor B2B<br/>din Brașov.</h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink-700)", marginBottom: 16 }}>
              Plastify lucrează cu producători de signage, mobilieri, ateliere de print și constructori din toată țara. Tăiem la dimensiunea cerută, gestionăm stocul și livrăm cu transportator partener.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-700)" }}>
              Nu vindem online. Lucrăm pe bază de comandă fermă, ofertă scrisă și termen agreat.
            </p>
          </div>
          <div style={{ background: "var(--ink-900)", color: "#fff", padding: 40, borderRadius: 4 }}>
            {[["12+","ani în distribuția materialelor plastice"],["48h","termen mediu de livrare în țară"],["~200","referințe materiale active"],["100%","oferte scrise în 24h de la cerere"]].map(([n,l]) => (
              <div key={l} style={{ padding: "16px 0", borderBottom: "1px solid rgba(255,255,255,0.1)", display: "flex", alignItems: "baseline", gap: 24 }}>
                <div style={{ fontFamily: "var(--font-techno)", fontSize: 36, color: "var(--gold-400)", lineHeight: 1, minWidth: 90 }}>{n}</div>
                <div style={{ fontSize: 14, color: "var(--silver-300)" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCES */}
      <section style={{ padding: "96px 0", background: "var(--silver-50)" }}>
        <div className="container">
          <div className="eyebrow">Proces</div>
          <h2 style={{ marginTop: 8, marginBottom: 48, fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)", textTransform: "uppercase", lineHeight: 1.05 }}>De la cerere la livrare.</h2>
          <div className="proces-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {[
              ["01","Cerere","Trimite-ne dimensiuni, cantitate, finisaje. Confirmăm pe email că am primit-o."],
              ["02","Ofertă","Calculăm preț, debitare și termen. Trimitem ofertă scrisă în 24h."],
              ["03","Producție","Tăiem la cota cerută. Pregătim comanda în atelier la Brașov."],
              ["04","Livrare","Cu transportator partener, în 48h pentru stoc. Sau ridicare directă."],
            ].map(([n, t, d]) => (
              <div key={n}>
                <div style={{ fontFamily: "var(--font-techno)", fontSize: 14, color: "var(--gold-500)", letterSpacing: "0.18em" }}>{n}</div>
                <h3 style={{ marginTop: 14, fontFamily: "var(--font-display)", fontSize: 28, textTransform: "uppercase", marginBottom: 10 }}>{t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-700)" }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section style={{ padding: "80px 0", background: "var(--ink-900)", color: "#fff" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow eyebrow-dark">CERE OFERTĂ</div>
            <h2 style={{ marginTop: 8, fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)", textTransform: "uppercase", color: "var(--silver-300)", lineHeight: 1.05 }}>Răspundem în 24h.</h2>
          </div>
          <a className="btn btn-primary btn-lg on-dark" href="#/cere-oferta">Trimite o cerere →</a>
        </div>
      </section>
    </div>
  );
}

window.HomeA1 = HomeA1;