/* global React */

// ============================================================
// Logo: gold "CC" double-crescent monogram + "COVENT CLINIC"
// Reconstructed from the reception-wall reference photo.
// ============================================================

// Two interlocking crescents — left-facing C + right-facing C — gold gradient.
const CCMonogram = ({ size = 64, color }) => {
  const useGrad = !color;
  const fill = useGrad ? "url(#ccGoldGrad)" : color;
  return (
    <svg width={size} height={size} viewBox="0 0 160 120" fill="none" aria-hidden="true">
      <defs>
        <linearGradient id="ccGoldGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"  stopColor="#EEDBA0" />
          <stop offset="45%" stopColor="#C9A24B" />
          <stop offset="100%" stopColor="#9A7A30" />
        </linearGradient>
        {/* Left C: ring minus a notch on the right */}
        <mask id="ccMaskLeft" maskUnits="userSpaceOnUse">
          <rect width="160" height="120" fill="black"/>
          <circle cx="60" cy="60" r="48" fill="white"/>
          <circle cx="60" cy="60" r="32" fill="black"/>
          <rect x="60" y="34" width="60" height="52" fill="black"/>
        </mask>
        {/* Right C: mirrored */}
        <mask id="ccMaskRight" maskUnits="userSpaceOnUse">
          <rect width="160" height="120" fill="black"/>
          <circle cx="100" cy="60" r="48" fill="white"/>
          <circle cx="100" cy="60" r="32" fill="black"/>
          <rect x="40" y="34" width="60" height="52" fill="black"/>
        </mask>
      </defs>
      <rect width="160" height="120" fill={fill} mask="url(#ccMaskLeft)"/>
      <rect width="160" height="120" fill={fill} mask="url(#ccMaskRight)"/>
    </svg>
  );
};

const Wordmark = ({ height = 18, color }) => (
  <span
    style={{
      fontFamily: "var(--f-script)",
      fontSize: height,
      letterSpacing: "0.32em",
      color: color || "var(--espresso)",
      fontWeight: 400,
      textTransform: "uppercase",
      lineHeight: 1,
    }}
  >
    Covent Clinic
  </span>
);

// Logo lockup: monogram + wordmark stacked or inline
const LogoLockup = ({ size = 40, inline = false, color }) => {
  if (inline) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <CCMonogram size={size} />
        <Wordmark height={size * 0.32} color={color} />
      </div>
    );
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
      <CCMonogram size={size} />
      <Wordmark height={size * 0.22} color={color} />
    </div>
  );
};

// Neon face-profile mark (secondary device, traced from clinic signage)
const NeonFace = ({ width = 220, glow = true }) => (
  <svg width={width} viewBox="0 0 220 320" fill="none" aria-hidden="true" style={{ filter: glow ? "drop-shadow(0 0 12px rgba(180,210,255,0.55))" : "none" }}>
    <defs>
      <linearGradient id="neonG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"  stopColor="#FFFFFF" />
        <stop offset="50%" stopColor="#E8F1FF" />
        <stop offset="100%" stopColor="#B9D2FF" />
      </linearGradient>
    </defs>
    <path
      d="M 30 295
         C 70 270, 100 250, 120 220
         C 140 195, 145 175, 138 158
         C 132 142, 138 130, 152 118
         C 168 104, 178 92, 178 72
         C 178 50, 165 28, 148 18"
      stroke="url(#neonG)"
      strokeWidth="3.5"
      strokeLinecap="round"
      fill="none"
    />
    {/* lip notch */}
    <path d="M 138 158 C 148 162, 152 168, 150 175" stroke="url(#neonG)" strokeWidth="2.5" strokeLinecap="round" fill="none" />
  </svg>
);

// Stars
const Stars = ({ value = 5, size = 14, color = "var(--gold)" }) => {
  const full = Math.floor(value);
  const half = value - full >= 0.4 && value - full < 0.9;
  const filled = (i) => i < full || (i === full && half);
  return (
    <span style={{ display: "inline-flex", gap: 2, alignItems: "center" }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={filled(i) ? color : "transparent"} stroke={color} strokeWidth="1.2">
          <path d="M12 2 L14.9 8.6 22 9.3 16.5 14 18 21 12 17.3 6 21 7.5 14 2 9.3 9.1 8.6 Z" />
        </svg>
      ))}
    </span>
  );
};

// WhatsApp icon
const WhatsAppIcon = ({ size = 18, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M19.05 4.91A10 10 0 0 0 4.7 19l-1.7 5 5.13-1.34a10 10 0 0 0 10.92-17.75ZM12 21.05a8.95 8.95 0 0 1-4.57-1.25l-.33-.2-3.04.8.81-2.97-.21-.34A8.95 8.95 0 1 1 12 21.05ZM16.85 14.2c-.27-.13-1.58-.78-1.82-.87-.24-.09-.42-.13-.6.13s-.69.87-.85 1.05c-.16.18-.31.2-.58.07a7.39 7.39 0 0 1-2.18-1.35 8.18 8.18 0 0 1-1.5-1.87c-.16-.27 0-.41.12-.55.12-.13.27-.31.4-.47.13-.16.18-.27.27-.45a.49.49 0 0 0 0-.47c-.07-.13-.6-1.45-.82-1.99-.22-.52-.44-.45-.6-.45h-.51a.98.98 0 0 0-.71.33 3 3 0 0 0-.93 2.22 5.18 5.18 0 0 0 1.08 2.74 11.84 11.84 0 0 0 4.53 4 5.41 5.41 0 0 0 3.32 1c.51-.08 1.58-.65 1.8-1.27.22-.62.22-1.15.16-1.27-.07-.13-.24-.2-.51-.34Z"/>
  </svg>
);

const PhoneIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.7 11.7 0 0 0 3.7.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.27.2 2.51.6 3.7a1 1 0 0 1-.25 1Z"/>
  </svg>
);

const PinIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/>
  </svg>
);

const ChevronRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <path d="M9 5l7 7-7 7"/>
  </svg>
);

const ChevronDown = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <path d="M6 9l6 6 6-6"/>
  </svg>
);

const CheckIcon = ({ size = 14, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M5 12l5 5 9-11"/>
  </svg>
);

Object.assign(window, {
  CCMonogram, Wordmark, LogoLockup, NeonFace, Stars,
  WhatsAppIcon, PhoneIcon, PinIcon, ChevronRight, ChevronDown, CheckIcon,
});
