/* Hero, large serif headline, script "family", dual CTAs, placeholder image for workshop shot */

function Hero() {
  return (
    <section className="paper" style={{
      background: "var(--scd-cream-100)",
      paddingTop: 64, paddingBottom: 72,
      borderBottom: "1px solid var(--border)",
      overflow: "hidden",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.15fr 1fr",
        gap: 72, alignItems: "center",
      }} className="wrap grid-2 hero-grid">
        <div>
          <Eyebrow>Rotary trimmers · Blades · Easels · Mount board</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: 76, lineHeight: 1.02, letterSpacing: "-0.025em",
            color: "var(--fg-brand)", marginTop: 22, marginBottom: 0,
          }} className="hero-h1">
            Precision print supply,<br/>
            trusted by professionals<br/>
            since <span style={{ display: "inline-block", position: "relative" }}>
              1980
              <span aria-hidden="true" style={{
                position: "absolute", left: 0, right: 0,
                bottom: -4, height: 2, background: "var(--scd-blush-500)",
              }}/>
            </span>.
          </h1>
          <p style={{
            marginTop: 30, fontSize: 18, lineHeight: 1.6,
            color: "var(--scd-ink-700)", maxWidth: 520,
          }}>
            Forty-five years shipping rotary trimmers, cutter heads, and mount board to
            print shops, photo labs, universities, and sign makers, including the
            FedEx Office supply program, on reorder since 1991.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <a href="collection-rotary-trimmers-v1.html" className="btn btn--primary">Shop trimmers <Arrow/></a>
            <a href="b2b-wholesale-v1.html#quote-form" className="btn btn--secondary">Request a B2B quote</a>
          </div>
          <div style={{
            display: "flex", gap: 16, marginTop: 36, alignItems: "center",
            color: "var(--fg-muted)", fontSize: 13, flexWrap: "wrap",
          }}>
            <Badge variant="stock">
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor", display: "inline-block" }}/>
              In stock · ships today
            </Badge>
            <span style={{ color: "var(--scd-ink-300)" }}>·</span>
            <span>Net-30 terms for qualifying shops</span>
          </div>
        </div>
        <div style={{ position: "relative", justifySelf: "stretch" }}>
          <Placeholder
            ratio="4/3"
            tone="sunk"
            caption="Warm-lit workshop overhead, hands cropping a large print on a 52″ rotary trimmer. Natural light, slight analog grain."
          />
          <div style={{
            position: "absolute", right: -28, bottom: -28,
            background: "var(--scd-cream-100)", borderRadius: "50%",
            padding: 10, boxShadow: "var(--shadow-md)",
            border: "1px solid var(--border)",
          }}>
            <Seal size={112} tone="navy"/>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1080px) { .hero-h1 { font-size: 64px !important; } }
        @media (max-width: 820px)  { .hero-h1 { font-size: 48px !important; } .hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; } }
        @media (max-width: 480px)  { .hero-h1 { font-size: 40px !important; } }
      `}</style>
    </section>
  );
}

window.Hero = Hero;