// Duyuf brand mark — interpretation of the brand guideline:
// "petals converging at one point — pilgrims arriving at the Two Holy
// Mosques from many directions, with the petal symbolizing giving."
//
// NOTE: This is a placeholder approximation. Drop the real logo SVG into
// public/duyuf-logo.svg and replace <DuyufMark> with an <img> for fidelity.

function DuyufMark({ size = 48, color = '#C19872', accent }) {
  // 8 elongated petals fully converging at center (no central gap).
  // Alternating opacities create the layered, geometric look of the source
  // identity without copying the exact construction.
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <g transform="translate(32 32)">
        {[0, 45, 90, 135, 180, 225, 270, 315].map((rot, i) => (
          <path
            key={i}
            d="M 0 0 C -3.4 -9, -3.4 -17, 0 -27 C 3.4 -17, 3.4 -9, 0 0 Z"
            fill={color}
            transform={`rotate(${rot})`}
            opacity={i % 2 === 0 ? 1 : 0.7}
          />
        ))}
      </g>
    </svg>
  );
}

function DuyufWordmark({ height = 28, color = '#1F1B17', lang = 'ar' }) {
  if (lang === 'ar' || lang === 'ur') {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: height * 0.32, height }}>
        <DuyufMark size={height * 1.05} color={color} />
        <span style={{
          fontFamily: 'Alexandria, system-ui, sans-serif',
          fontWeight: 700, fontSize: height * 0.72, color, letterSpacing: '-0.02em',
          lineHeight: 1,
        }}>ضيوف</span>
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: height * 0.32, height }}>
      <DuyufMark size={height * 1.05} color={color} />
      <span style={{
        fontFamily: 'Alexandria, system-ui, sans-serif',
        fontWeight: 700, fontSize: height * 0.62, color, letterSpacing: '-0.01em',
        lineHeight: 1, textTransform: 'lowercase',
      }}>duyuf</span>
    </div>
  );
}

// Background pattern — uses the same petal motif (per guideline §pattern)
function DuyufPattern({ color = '#C19872', opacity = 0.10, size = 56 }) {
  const id = 'duyuf-pat-' + Math.random().toString(36).slice(2, 8);
  return (
    <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
      <defs>
        <pattern id={id} x="0" y="0" width={size} height={size} patternUnits="userSpaceOnUse">
          <g transform={`translate(${size/2} ${size/2})`} opacity={opacity}>
            {[0, 45, 90, 135, 180, 225, 270, 315].map((r, i) => (
              <path key={i}
                d="M 0 0 C -1.8 -5, -1.8 -9, 0 -14 C 1.8 -9, 1.8 -5, 0 0 Z"
                fill={color}
                transform={`rotate(${r})`}
                opacity={i % 2 === 0 ? 1 : 0.7}
              />
            ))}
          </g>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`} />
    </svg>
  );
}

// Single petal — for decorative flourishes
function PetalAccent({ size = 80, color = '#C19872', opacity = 0.18, rotate = 0, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ ...style }}>
      <path
        d="M 32 32 C 26 18, 26 8, 32 -2 C 38 8, 38 18, 32 32 Z"
        fill={color}
        opacity={opacity}
        transform={`rotate(${rotate} 32 32)`}
      />
    </svg>
  );
}

Object.assign(window, { DuyufMark, DuyufWordmark, DuyufPattern, PetalAccent });