// shapes.jsx — Simple painted-style SVG ornaments.
// All shapes are stroke/fill driven from CSS currentColor or props so they
// re-tint cleanly across the palette tweaks.

const Sunburst = ({ size = 600, rays = 28, color = "currentColor", shadow = null, style }) => {
  // A flat sun: alternating long/short triangular rays around a circle.
  const r = size / 2;
  const innerR = r * 0.18;
  const longR = r * 0.95;
  const shortR = r * 0.78;
  const wedge = (Math.PI * 2) / (rays * 2);
  const points = [];
  for (let i = 0; i < rays * 2; i++) {
    const a = i * wedge;
    const isLong = i % 2 === 0;
    const rr = isLong ? longR : shortR;
    // Each ray is a triangle: base on inner circle, tip at outer radius.
    const a0 = a - wedge * 0.42;
    const a1 = a + wedge * 0.42;
    const x0 = r + Math.cos(a0) * innerR * 2.2;
    const y0 = r + Math.sin(a0) * innerR * 2.2;
    const xt = r + Math.cos(a) * rr;
    const yt = r + Math.sin(a) * rr;
    const x1 = r + Math.cos(a1) * innerR * 2.2;
    const y1 = r + Math.sin(a1) * innerR * 2.2;
    points.push(`M${x0},${y0} L${xt},${yt} L${x1},${y1} Z`);
  }
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={style} aria-hidden="true">
      {shadow && (
        <g transform={`translate(${size * 0.012},${size * 0.018})`} fill={shadow} stroke="none">
          {points.map((d, i) => <path key={i} d={d} />)}
          <circle cx={r} cy={r} r={innerR * 2} />
        </g>
      )}
      <g fill={color} stroke="none">
        {points.map((d, i) => <path key={i} d={d} />)}
        <circle cx={r} cy={r} r={innerR * 2} />
      </g>
    </svg>
  );
};

const Star = ({ size = 24, color = "currentColor", shadow = null, style }) => {
  // 5-point star
  const r = size / 2;
  const outer = r * 0.95;
  const inner = r * 0.42;
  const pts = [];
  for (let i = 0; i < 10; i++) {
    const a = (Math.PI * 2 * i) / 10 - Math.PI / 2;
    const rr = i % 2 === 0 ? outer : inner;
    pts.push(`${r + Math.cos(a) * rr},${r + Math.sin(a) * rr}`);
  }
  const d = `M${pts.join(" L")} Z`;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={style} aria-hidden="true">
      {shadow && <path d={d} fill={shadow} transform={`translate(${size * 0.06},${size * 0.08})`} />}
      <path d={d} fill={color} />
    </svg>
  );
};

const Banner = ({ width = 360, height = 56, color = "currentColor", shadow = null, stroke = null, children, style }) => {
  // Pennant-style banner ribbon with notched ends.
  const h = height;
  const w = width;
  const notch = h * 0.32;
  const fold = h * 0.18;
  // Main ribbon shape (no folds for simplicity, just notched ends)
  const d = `
    M ${notch} 0
    L ${w - notch} 0
    L ${w} ${h / 2}
    L ${w - notch} ${h}
    L ${notch} ${h}
    L 0 ${h / 2}
    Z
  `;
  return (
    <div style={{ position: "relative", width: w, height: h, ...style }}>
      <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ position: "absolute", inset: 0 }} aria-hidden="true">
        {shadow && <path d={d} fill={shadow} transform={`translate(${w * 0.008},${h * 0.12})`} />}
        <path d={d} fill={color} stroke={stroke || "none"} strokeWidth={stroke ? 2 : 0} />
        {/* inner double-stroke line */}
        <path
          d={`M ${notch + fold} ${fold * 0.5} L ${w - notch - fold} ${fold * 0.5} L ${w - notch - fold * 0.3} ${h / 2} L ${w - notch - fold} ${h - fold * 0.5} L ${notch + fold} ${h - fold * 0.5} L ${notch + fold * 0.3} ${h / 2} Z`}
          fill="none"
          stroke="rgba(0,0,0,.18)"
          strokeWidth={1}
        />
      </svg>
      <div style={{ position: "relative", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", padding: `0 ${notch + fold * 0.6}px` }}>
        {children}
      </div>
    </div>
  );
};

const Swash = ({ width = 260, height = 32, color = "currentColor", style }) => {
  // A loose painted underline swash — single brushy line with a flourish at the end.
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={style} aria-hidden="true">
      <path
        d={`M 4 ${height * 0.55}
            C ${width * 0.18} ${height * 0.85}, ${width * 0.36} ${height * 0.2}, ${width * 0.55} ${height * 0.55}
            C ${width * 0.72} ${height * 0.85}, ${width * 0.86} ${height * 0.25}, ${width - 18} ${height * 0.55}
            C ${width - 4} ${height * 0.7}, ${width - 14} ${height * 0.95}, ${width - 28} ${height * 0.85}`}
        fill="none"
        stroke={color}
        strokeWidth={Math.max(3, height * 0.18)}
        strokeLinecap="round"
      />
    </svg>
  );
};

const DoubleFrame = ({ radius = 0, color = "currentColor", inset = 4, style, children }) => {
  // Wraps children with a double-stroke painted border.
  return (
    <div style={{ position: "relative", display: "inline-block", ...style }}>
      <div
        style={{
          position: "absolute",
          inset: 0,
          border: `2px solid ${color}`,
          borderRadius: radius,
          pointerEvents: "none",
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: inset,
          border: `1px solid ${color}`,
          borderRadius: Math.max(0, radius - inset),
          pointerEvents: "none",
          opacity: 0.65,
        }}
      />
      {children}
    </div>
  );
};

const Diamond = ({ size = 18, color = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" style={style} aria-hidden="true">
    <path d="M10 1 L19 10 L10 19 L1 10 Z" fill={color} />
  </svg>
);

const Manicule = ({ size = 28, color = "currentColor", style }) => (
  // A super-simple "pointing" arrow glyph (not anatomical hand) — keeps the
  // vernacular feel without me trying to draw a hand in SVG.
  <svg width={size} height={size * 0.6} viewBox="0 0 50 30" style={style} aria-hidden="true">
    <path d="M2 15 L36 15 M28 6 L40 15 L28 24" fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Rail = ({ width = 240, height = 12, color = "currentColor", style }) => {
  // Two parallel rails with regularly-spaced ties — the literal mark under
  // the wordmark. Kept very thin so it reads as ornament, not infographic.
  const tieCount = Math.max(6, Math.floor(width / 16));
  const sw = 1.4;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={style} aria-hidden="true">
      <line x1="0" y1={sw / 2 + 1} x2={width} y2={sw / 2 + 1} stroke={color} strokeWidth={sw} />
      <line x1="0" y1={height - sw / 2 - 1} x2={width} y2={height - sw / 2 - 1} stroke={color} strokeWidth={sw} />
      {Array.from({ length: tieCount }).map((_, i) => {
        const x = ((i + 0.5) * width) / tieCount;
        return <line key={i} x1={x} y1="0" x2={x} y2={height} stroke={color} strokeWidth={sw} />;
      })}
    </svg>
  );
};

Object.assign(window, { Sunburst, Star, Banner, Swash, DoubleFrame, Diamond, Manicule, Rail });