/* Shape section */

function ShapeSection() {
  const radii = [
    { name: "xs",  v: 4 },  { name: "sm",  v: 8 },  { name: "md",  v: 12 },
    { name: "lg",  v: 20 }, { name: "xl",  v: 28 }, { name: "2xl", v: 36 },
  ];
  const elev = [1,2,3,4,5];
  return (
    <section id="shape" className="zo-section">
      <div className="zo-section-eyebrow">03 — Shape &amp; elevation</div>
      <h2 className="zo-section-title">Soft, generous, unmistakably MD3 Expressive.</h2>
      <p className="zo-section-lede">
        Rounded, never sharp. The shape scale runs from 4 to 36 pixels with a pill terminal. Elevation uses sapphire-tinted shadows for warmth.
      </p>

      <h3 className="zo-subsection-title">Shape scale</h3>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 16 }}>
        {radii.map(r => (
          <div key={r.name} style={{
            background: "var(--md-primary-container)",
            color: "var(--md-on-primary-container)",
            height: 120,
            borderRadius: r.v,
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
            gap: 4,
          }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500 }}>{r.name}</div>
            <div className="zo-mono" style={{ fontSize: 11, opacity: 0.7 }}>{r.v}px</div>
          </div>
        ))}
        <div style={{
          background: "var(--md-primary-container)",
          color: "var(--md-on-primary-container)",
          height: 120, borderRadius: 9999,
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4,
        }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500 }}>pill</div>
          <div className="zo-mono" style={{ fontSize: 11, opacity: 0.7 }}>9999</div>
        </div>
      </div>

      <h3 className="zo-subsection-title">Elevation</h3>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 20, padding: "32px 24px", background: "var(--md-surface-container)", borderRadius: 28 }}>
        {elev.map(n => (
          <div key={n} style={{
            background: "var(--md-surface-container-lowest)",
            color: "var(--md-on-surface)",
            height: 120,
            borderRadius: 20,
            boxShadow: `var(--elev-${n})`,
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4,
          }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500 }}>elev-{n}</div>
            <div className="zo-mono" style={{ fontSize: 11, color: "var(--md-on-surface-variant)" }}>level {n}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.ShapeSection = ShapeSection;