// Lightweight iPhone bezel — for thread mockups in the hero
// Props: width, height, children, accent (frame color)
const Phone = ({
  width = 320,
  height = 640,
  children,
  frame = "#1a1a1a",
  bezel = 11,
  showStatusBar = true,
  bg = "#fff",
  shadow = "0 30px 60px -20px rgba(0,0,0,0.35), 0 12px 24px -8px rgba(0,0,0,0.18)",
  style = {},
}) => {
  const cornerR = 44;
  return (
    <div style={{
      width, height,
      background: frame,
      borderRadius: cornerR,
      padding: bezel,
      boxShadow: shadow,
      position: "relative",
      ...style,
    }}>
      <div style={{
        width: "100%", height: "100%",
        background: bg,
        borderRadius: cornerR - bezel,
        overflow: "hidden",
        position: "relative",
        display: "flex",
        flexDirection: "column",
      }}>
        {showStatusBar && (
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "10px 22px 4px", fontSize: 13, fontWeight: 600,
            color: "#000", flexShrink: 0,
            fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
          }}>
            <span>9:41</span>
            <div style={{
              position: "absolute", left: "50%", transform: "translateX(-50%)",
              top: 8, width: 90, height: 24, background: "#000", borderRadius: 14,
            }} />
            <span style={{ display: "flex", gap: 4, alignItems: "center" }}>
              <SignalIcon /> <WifiIcon /> <BatteryIcon />
            </span>
          </div>
        )}
        <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
          {children}
        </div>
      </div>
    </div>
  );
};

const SignalIcon = () => (
  <svg width="16" height="10" viewBox="0 0 16 10" fill="#000">
    <rect x="0" y="6" width="2.5" height="4" rx="0.5" />
    <rect x="3.5" y="4" width="2.5" height="6" rx="0.5" />
    <rect x="7" y="2" width="2.5" height="8" rx="0.5" />
    <rect x="10.5" y="0" width="2.5" height="10" rx="0.5" />
  </svg>
);
const WifiIcon = () => (
  <svg width="14" height="10" viewBox="0 0 16 12" fill="#000">
    <path d="M8 11.5a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4ZM3.4 6.9a6.5 6.5 0 0 1 9.2 0l1.4-1.4a8.5 8.5 0 0 0-12 0L3.4 6.9Zm2.8 2.8a2.5 2.5 0 0 1 3.6 0l1.4-1.4a4.5 4.5 0 0 0-6.4 0l1.4 1.4Z"/>
  </svg>
);
const BatteryIcon = () => (
  <svg width="22" height="10" viewBox="0 0 26 12" fill="none">
    <rect x="0.5" y="0.5" width="22" height="11" rx="2.5" stroke="#000" opacity="0.4" />
    <rect x="2" y="2" width="19" height="8" rx="1.5" fill="#000" />
    <rect x="23.5" y="3.5" width="2" height="5" rx="1" fill="#000" opacity="0.4" />
  </svg>
);

window.Phone = Phone;