/* StoryBlock, two-column editorial, script on "family", pull quote */

function StoryBlock() {
  return (
    <section className="band-cream">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 80, alignItems: "center" }} className="wrap grid-2">
        <div style={{ position: "relative" }}>
          <div style={{
            aspectRatio: "4/5", position: "relative", overflow: "hidden",
            border: "1px solid var(--border)", borderRadius: 4,
            background: "var(--scd-cream-300)",
          }}>
            <div className="placeholder__grain" style={{ position: "absolute", inset: 0 }}/>
            <div style={{
              position: "absolute", top: 16, left: 16,
              background: "var(--scd-cream-50)", padding: "5px 9px",
              fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)",
              borderRadius: 2, border: "1px solid var(--border)",
            }}>Archive · c. 1987</div>
            <span style={{
              position: "absolute", bottom: 16, left: 16, right: 16,
              fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.5,
              color: "var(--scd-ink-700)",
              background: "rgba(253, 252, 250, 0.88)",
              padding: "8px 12px", borderRadius: 2,
            }}>Placeholder · family portrait, Maggie Keary with her children in the Orange County warehouse, loading a pallet of mount board.</span>
          </div>
          <div style={{
            position: "absolute", bottom: -32, right: -32,
            background: "var(--scd-cream-100)",
            borderRadius: "50%", padding: 8,
            boxShadow: "var(--shadow-md)", border: "1px solid var(--border)",
          }}>
            <Seal size={96} tone="navy"/>
          </div>
        </div>
        <div>
          <Eyebrow>Our story</Eyebrow>
          <h2 style={{ marginTop: 14, marginBottom: 26, fontSize: 52, lineHeight: 1.05 }}>
            Forty-five years. One <ScriptWord size={68}>family</ScriptWord>. Every order.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--scd-ink-900)", maxWidth: 520, marginBottom: 18 }}>
            In 1980, Maggie Keary opened a small office in Orange County to supply precision
            paper trimmers to local print shops. Forty-five years on, the same phone number
            still rings, and the same family still answers it.
          </p>
          <p style={{ fontSize: 16, color: "var(--scd-ink-700)", maxWidth: 520, marginBottom: 32, lineHeight: 1.65 }}>
            Now Maggie&rsquo;s children are taking the reins. The catalog grows; the service
            doesn&rsquo;t change. Same phone, same warehouse, same commitment to ship the
            right tool on the right day.
          </p>
          <a href="about-v1.html" className="btn btn--secondary">Read the full story <Arrow/></a>
        </div>
      </div>
    </section>
  );
}

window.StoryBlock = StoryBlock;