/* global React */

function SpecifierDownloads({ collection = "Gateway" }) {
  const rows = [
    { name: `${collection} — Product specification sheet`, formats: ["PDF"] },
    { name: `${collection} — Dimensioned drawings`,        formats: ["DWG", "PDF"] },
    { name: `${collection} — 3D models`,                    formats: ["3DM", "REVIT"] },
    { name: `${collection} — Finishes and materials`,       formats: ["PDF"] },
    { name: `${collection} — Care and lifecycle`,           formats: ["PDF"] },
  ];
  return (
    <section style={{ padding: "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Specifier downloads</div>
      <h2 style={{ fontWeight: 500, fontSize: "clamp(24px, 2.4vw, 34px)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "#1a1917", margin: "0 0 32px 0" }}>
        Every file you need to specify.
      </h2>
      <div>
        {rows.map((r, i) => (
          <div key={r.name} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "20px 0",
            borderTop: "0.5px solid rgba(26,25,23,0.18)",
            borderBottom: i === rows.length - 1 ? "0.5px solid rgba(26,25,23,0.18)" : "none",
          }}>
            <div style={{ fontSize: 16, color: "#1a1917", fontWeight: 500 }}>{r.name}</div>
            <div style={{ display: "flex", gap: 20 }}>
              {r.formats.map((f) => (
                <a key={f} style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, cursor: "pointer" }}>{f}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ fontSize: 12, color: "#a8a49a", marginTop: 16, letterSpacing: "0.02em" }}>DWG, 3DM and REVIT files may require specifier access.</div>
    </section>
  );
}

window.SpecifierDownloads = SpecifierDownloads;