import React from "react";
export function Panel({ eyebrow, title, children, padding = "20px", style }) {
  return (
    <section style={{
      background: "var(--surface)", borderRadius: "var(--radius-lg)",
      border: "1px solid rgba(232,178,74,0.28)",
      boxShadow: "0 0 0 1.5px var(--rr-void), 0 0 0 2.5px rgba(232,178,74,0.30), 0 18px 48px rgba(0,0,0,0.55)",
      padding: padding, fontFamily: "var(--font-sans)", ...style
    }}>
      {eyebrow && <div style={{ fontSize: "11px", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--rr-gold)", marginBottom: "6px" }}>{eyebrow}</div>}
      {title && <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "22px", lineHeight: 1.15, margin: "0 0 10px", color: "var(--fg)" }}>{title}</h3>}
      {children}
    </section>
  );
}