/* B2BBand, full-width navy wholesale CTA */

function B2BBand() {
  const bullets = [
    { k: "Bulk pricing", v: "Tiered from 10 units" },
    { k: "Net-30 terms", v: "PO workflows available" },
    { k: "Dedicated rep", v: "Not a ticket queue" },
    { k: "Spec sheets", v: "On every SKU" },
  ];
  return (
    <section className="band-navy" id="quote" style={{ padding: "104px 0" }}>
      <div className="wrap grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <Eyebrow style={{ color: "var(--scd-blush-300)" }}>B2B &middot; wholesale</Eyebrow>
          <h2 style={{
            marginTop: 14, marginBottom: 22,
            color: "var(--scd-cream-50)", fontSize: 48, lineHeight: 1.05,
          }}>
            Built for print shops, signage pros, and procurement teams.
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "var(--scd-cream-200)",
            maxWidth: 500, marginBottom: 32,
          }}>
            Qualifying print shops, photo labs, universities, and architecture firms get
            tiered pricing, net-30 terms, and a dedicated account rep. Tell us what you
            run through in a month, and we&rsquo;ll build you a standing quote.
          </p>
          <ul style={{
            listStyle: "none", padding: 0, margin: "0 0 32px",
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16,
          }}>
            {bullets.map(b => (
              <li key={b.k} style={{
                paddingLeft: 14, borderLeft: "1.5px solid var(--scd-blush-500)",
              }}>
                <div style={{
                  fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
                  color: "var(--scd-blush-300)", fontWeight: 600,
                }}>{b.k}</div>
                <div style={{ fontSize: 15, color: "var(--scd-cream-50)", marginTop: 4 }}>{b.v}</div>
              </li>
            ))}
          </ul>
          <a href="b2b-wholesale-v1.html#quote-form" className="btn btn--on-dark">Request a quote <Arrow/></a>
          <span style={{ marginLeft: 16, fontSize: 13, color: "var(--scd-cream-200)", opacity: 0.8 }}>
            or call <span style={{ color: "var(--scd-cream-50)" }}>(714) 555-0180</span>
          </span>
        </div>
        <form onSubmit={e => e.preventDefault()} style={{
          background: "var(--scd-cream-50)", color: "var(--fg)",
          padding: 32, borderRadius: 4,
          boxShadow: "var(--shadow-lg)",
          border: "1px solid var(--scd-navy-700)",
        }}>
          <div style={{
            fontFamily: "var(--font-display)", fontSize: 22, color: "var(--fg-brand)",
            letterSpacing: "-0.01em", marginBottom: 4,
          }}>Request a standing quote</div>
          <p style={{ fontSize: 13, color: "var(--fg-muted)", marginBottom: 20 }}>
            One business day turnaround. No sales calls unless you ask for one.
          </p>
          <div style={{ display: "grid", gap: 14 }}>
            <Field label="Company" defaultValue="Westside Print Co."/>
            <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="Your name" defaultValue=""/>
              <Field label="Work email" defaultValue="" type="email"/>
            </div>
            <Field label="What do you need a quote on?" defaultValue="Two Pro 52 trimmers + replacement heads" multi/>
            <button type="submit" className="btn btn--primary" style={{ justifyContent: "center", marginTop: 4 }}>
              Request quote
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

function Field({ label, defaultValue, type = "text", multi }) {
  const shared = {
    width: "100%", padding: "11px 13px", fontSize: 15,
    fontFamily: "var(--font-body)",
    border: "1px solid var(--border)", borderRadius: 2,
    background: "#fff", color: "var(--fg)", boxSizing: "border-box",
  };
  return (
    <label style={{ display: "grid", gap: 6 }}>
      <span style={{
        fontSize: 11, fontWeight: 600, letterSpacing: "0.12em",
        textTransform: "uppercase", color: "var(--fg-brand)",
      }}>{label}</span>
      {multi
        ? <textarea defaultValue={defaultValue} rows={2} style={{ ...shared, resize: "vertical", minHeight: 66 }}/>
        : <input type={type} defaultValue={defaultValue} style={shared}/>}
    </label>
  );
}

window.B2BBand = B2BBand;