// logo.jsx — Civify brand mark rebuilt as scalable SVG (orange C + 12 gold EU stars)
// Exports to window: CivifyMark, CivifyLogo

(function () {
  const TAU = Math.PI * 2;

  // 5-pointed star polygon centered at (cx,cy)
  function starPoints(cx, cy, outerR, innerR, rotDeg) {
    const pts = [];
    const rot = (rotDeg * Math.PI) / 180;
    for (let i = 0; i < 10; i++) {
      const r = i % 2 === 0 ? outerR : innerR;
      const a = rot - Math.PI / 2 + (i * Math.PI) / 5;
      pts.push(`${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`);
    }
    return pts.join(' ');
  }

  // Ring-sector "C" path. Opening faces right. Screen coords (y down).
  function cPath(cx, cy, R, r, gapDeg) {
    const start = gapDeg;        // lower-right edge of opening
    const end = 360 - gapDeg;    // upper-right edge of opening
    const p = (rad, deg) => {
      const a = (deg * Math.PI) / 180;
      return [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
    };
    const [ox0, oy0] = p(R, start);
    const [ox1, oy1] = p(R, end);
    const [ix1, iy1] = p(r, end);
    const [ix0, iy0] = p(r, start);
    const large = end - start > 180 ? 1 : 0;
    return [
      `M ${ox0.toFixed(2)} ${oy0.toFixed(2)}`,
      `A ${R} ${R} 0 ${large} 1 ${ox1.toFixed(2)} ${oy1.toFixed(2)}`,
      `L ${ix1.toFixed(2)} ${iy1.toFixed(2)}`,
      `A ${r} ${r} 0 ${large} 0 ${ix0.toFixed(2)} ${iy0.toFixed(2)}`,
      'Z',
    ].join(' ');
  }

  function CivifyMark({ size = 64, stars = true, gradientId, style }) {
    const gid = gradientId || 'civC-' + Math.random().toString(36).slice(2, 8);
    const cx = 50, cy = 50;
    const R = 42, r = 28, gap = 42;
    // 12 stars in a circle inside the C
    const ringR = 17;
    const starEls = [];
    if (stars) {
      for (let i = 0; i < 12; i++) {
        const ang = (i / 12) * TAU - Math.PI / 2;
        const sx = cx + ringR * Math.cos(ang);
        const sy = cy + ringR * Math.sin(ang);
        starEls.push(
          <polygon
            key={i}
            points={starPoints(sx, sy, 4.1, 1.7, 0)}
            fill="#FFC72C"
          />
        );
      }
    }
    return (
      <svg
        width={size}
        height={size}
        viewBox="0 0 100 100"
        style={style}
        aria-label="Civify"
        role="img"
      >
        <defs>
          <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#FF8A1E" />
            <stop offset="0.55" stopColor="#FB6E0E" />
            <stop offset="1" stopColor="#F2570A" />
          </linearGradient>
        </defs>
        <path d={cPath(cx, cy, R, r, gap)} fill={`url(#${gid})`} />
        {starEls}
      </svg>
    );
  }

  function CivifyLogo({
    size = 36,
    color = '#F2570A',
    stars = true,
    gap = 12,
    wordmark = true,
    style,
  }) {
    return (
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap,
          ...style,
        }}
      >
        <CivifyMark size={size} stars={stars} />
        {wordmark && (
          <span
            style={{
              fontFamily: "'Sora', sans-serif",
              fontWeight: 600,
              fontSize: size * 0.62,
              letterSpacing: '0.14em',
              color,
              textTransform: 'uppercase',
              lineHeight: 1,
              paddingTop: '0.06em',
            }}
          >
            civify
          </span>
        )}
      </span>
    );
  }

  window.CivifyMark = CivifyMark;
  window.CivifyLogo = CivifyLogo;
})();