/* Schegen Adam — original mascot
   Geometric, badge-style. Built from SVG primitives.
   Three styles: badge, silhouette, minimal. */

const Mascot = ({ style = "photo", size = 460, gold = "#D4AF37" }) => {
  if (style === "photo") return <MascotPhoto size={size} gold={gold} />;
  if (style === "minimal") return <MascotMinimal size={size} gold={gold} />;
  if (style === "silhouette") return <MascotSilhouette size={size} gold={gold} />;
  return <MascotBadge size={size} gold={gold} />;
};

const MascotPhoto = ({ size, gold }) => (
  <div style={{
    position: "relative",
    width: size,
    maxWidth: "100%",
    aspectRatio: "1917 / 2371",
  }}>
    <div style={{
      position: "absolute",
      inset: "8% 8% 8% 8%",
      borderRadius: "50%",
      background: `radial-gradient(closest-side, ${gold}33, transparent 70%)`,
      filter: "blur(20px)",
      pointerEvents: "none",
    }} />
    <img
      src={(typeof window !== "undefined" && window.__resources && window.__resources.logo) || "assets/schegen-adam-logo.png"}
      alt="Schegen Adam"
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        objectFit: "contain",
        filter: "drop-shadow(0 24px 40px rgba(0,0,0,0.45))",
      }}
    />
  </div>
);

const MascotBadge = ({ size, gold }) => (
  <svg
    viewBox="0 0 480 480"
    width={size}
    height={size}
    style={{ display: "block", maxWidth: "100%", height: "auto" }}
    aria-label="Schegen Adam mascot"
  >
    <defs>
      <radialGradient id="m-bg" cx="50%" cy="40%" r="65%">
        <stop offset="0%" stopColor="#1E3A8A" />
        <stop offset="60%" stopColor="#0B1E3C" />
        <stop offset="100%" stopColor="#060F21" />
      </radialGradient>
      <linearGradient id="m-coat" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#142a55" />
        <stop offset="100%" stopColor="#070f24" />
      </linearGradient>
      <linearGradient id="m-gold" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stopColor={gold} stopOpacity="1" />
        <stop offset="100%" stopColor={gold} stopOpacity="0.65" />
      </linearGradient>
      <radialGradient id="m-glow" cx="50%" cy="40%" r="50%">
        <stop offset="0%" stopColor={gold} stopOpacity="0.35" />
        <stop offset="100%" stopColor={gold} stopOpacity="0" />
      </radialGradient>
      <clipPath id="m-clip">
        <circle cx="240" cy="240" r="206" />
      </clipPath>
    </defs>

    {/* outer gold ring */}
    <circle cx="240" cy="240" r="226" fill="none" stroke={gold} strokeWidth="1.4" opacity="0.55" />
    <circle cx="240" cy="240" r="218" fill="none" stroke={gold} strokeWidth="0.8" opacity="0.35" strokeDasharray="2 4" />

    {/* badge fill */}
    <circle cx="240" cy="240" r="206" fill="url(#m-bg)" />
    <circle cx="240" cy="240" r="206" fill="url(#m-glow)" />

    {/* subtle stamp arcs */}
    <g clipPath="url(#m-clip)" opacity="0.9">
      <circle cx="240" cy="240" r="190" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
      <circle cx="240" cy="240" r="170" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
      <circle cx="240" cy="240" r="148" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
    </g>

    {/* mascot — clipped to circle */}
    <g clipPath="url(#m-clip)">
      {/* shoulders / coat */}
      <path
        d="M 80 460
           C 100 390, 160 360, 240 360
           C 320 360, 380 390, 400 460
           Z"
        fill="url(#m-coat)"
      />
      {/* lapel hint */}
      <path d="M 240 360 L 220 460 L 240 410 L 260 460 Z" fill="rgba(255,255,255,0.04)" />

      {/* neck */}
      <rect x="222" y="312" width="36" height="60" rx="10" fill="#caa978" opacity="0.92" />
      <rect x="222" y="312" width="36" height="14" fill="rgba(0,0,0,0.18)" />

      {/* head */}
      <ellipse cx="240" cy="260" rx="84" ry="92" fill="#e7c896" />
      {/* hair / cap */}
      <path
        d="M 158 248
           C 162 198, 200 168, 240 168
           C 282 168, 318 198, 322 248
           C 322 232, 300 218, 270 220
           C 246 222, 230 232, 218 246
           C 206 232, 182 230, 158 248 Z"
        fill="#0a1430"
      />
      {/* shadow under hair */}
      <path d="M 162 246 Q 240 230 318 246 L 318 260 Q 240 248 162 260 Z" fill="rgba(0,0,0,0.22)" />

      {/* brows */}
      <rect x="198" y="258" width="28" height="4" rx="2" fill="#1d1408" />
      <rect x="254" y="258" width="28" height="4" rx="2" fill="#1d1408" />

      {/* eyes (geometric, no expression-overload) */}
      <circle cx="212" cy="276" r="4" fill="#0a1428" />
      <circle cx="268" cy="276" r="4" fill="#0a1428" />

      {/* nose */}
      <path d="M 240 282 L 234 308 L 246 308 Z" fill="rgba(0,0,0,0.10)" />

      {/* mouth — slight confident line */}
      <path d="M 222 326 Q 240 332 258 326" stroke="#3a2a14" strokeWidth="2.4" fill="none" strokeLinecap="round" />

      {/* hand holding passport */}
      <g transform="translate(298 372) rotate(-14)">
        {/* sleeve */}
        <rect x="-30" y="-8" width="80" height="38" rx="10" fill="#0a1430" />
        {/* cuff */}
        <rect x="32" y="-8" width="6" height="38" fill="rgba(255,255,255,0.06)" />
        {/* hand */}
        <ellipse cx="46" cy="12" rx="18" ry="14" fill="#e7c896" />
        {/* passport */}
        <g transform="translate(8 -36) rotate(8)">
          <rect x="0" y="0" width="86" height="58" rx="6" fill="url(#m-gold)" />
          <rect x="0" y="0" width="86" height="58" rx="6" fill="none" stroke="rgba(0,0,0,0.18)" />
          {/* crest */}
          <circle cx="43" cy="22" r="9" fill="none" stroke="#0B1E3C" strokeWidth="1.6" />
          <path d="M 43 14 L 43 30 M 35 22 L 51 22" stroke="#0B1E3C" strokeWidth="1.6" />
          <rect x="22" y="38" width="42" height="2.4" fill="#0B1E3C" opacity="0.7" />
          <rect x="28" y="44" width="30" height="2.4" fill="#0B1E3C" opacity="0.5" />
        </g>
      </g>

      {/* small EU-style stars halo behind head */}
      <g opacity="0.55" fill={gold}>
        {Array.from({ length: 9 }).map((_, i) => {
          const a = (-Math.PI * 0.95) + (i * (Math.PI * 0.9)) / 8;
          const r = 142;
          const cx = 240 + Math.cos(a) * r;
          const cy = 240 + Math.sin(a) * r;
          return <Star key={i} cx={cx} cy={cy} r={4} />;
        })}
      </g>
    </g>

    {/* arc text */}
    <g fill={gold} fontFamily="var(--f-mono)" fontSize="11" letterSpacing="3">
      <path id="arc-top" d="M 64 240 A 176 176 0 0 1 416 240" fill="none" />
      <text>
        <textPath href="#arc-top" startOffset="50%" textAnchor="middle">
          SCHENGEN · OPERATOR · SINCE 2018
        </textPath>
      </text>
    </g>

    {/* gold dot ticks */}
    <g fill={gold}>
      <circle cx="64" cy="240" r="2.2" />
      <circle cx="416" cy="240" r="2.2" />
      <circle cx="240" cy="20" r="2.2" opacity="0.6" />
      <circle cx="240" cy="460" r="2.2" opacity="0.6" />
    </g>
  </svg>
);

const Star = ({ cx, cy, r }) => {
  const pts = [];
  for (let i = 0; i < 10; i++) {
    const a = (Math.PI / 5) * i - Math.PI / 2;
    const rad = i % 2 === 0 ? r : r * 0.42;
    pts.push(`${cx + Math.cos(a) * rad},${cy + Math.sin(a) * rad}`);
  }
  return <polygon points={pts.join(" ")} />;
};

const MascotSilhouette = ({ size, gold }) => (
  <svg
    viewBox="0 0 480 480"
    width={size}
    height={size}
    style={{ display: "block", maxWidth: "100%", height: "auto" }}
  >
    <defs>
      <radialGradient id="ms-bg" cx="50%" cy="55%" r="60%">
        <stop offset="0%" stopColor="#1E3A8A" stopOpacity="0.55" />
        <stop offset="100%" stopColor="#0B1E3C" stopOpacity="0" />
      </radialGradient>
    </defs>
    <rect width="480" height="480" fill="url(#ms-bg)" />
    {/* gold light from corner */}
    <circle cx="380" cy="80" r="120" fill={gold} opacity="0.10" />
    {/* silhouette */}
    <g fill="#040a18">
      <path d="M 80 480 C 110 380, 170 340, 240 340 C 310 340, 370 380, 400 480 Z" />
      <ellipse cx="240" cy="248" rx="76" ry="86" />
      <path d="M 162 240 C 168 188, 200 158, 240 158 C 282 158, 314 188, 320 240 C 306 222, 280 214, 240 214 C 200 214, 176 224, 162 240 Z" />
    </g>
    {/* passport */}
    <g transform="translate(298 372) rotate(-12)">
      <rect x="-30" y="-8" width="80" height="38" rx="10" fill="#040a18" />
      <ellipse cx="46" cy="12" rx="18" ry="14" fill="#040a18" />
      <g transform="translate(8 -36) rotate(8)">
        <rect width="86" height="58" rx="6" fill={gold} />
        <circle cx="43" cy="22" r="9" fill="none" stroke="#0B1E3C" strokeWidth="1.8" />
        <path d="M 43 14 L 43 30 M 35 22 L 51 22" stroke="#0B1E3C" strokeWidth="1.8" />
      </g>
    </g>
    {/* gold rim light */}
    <path
      d="M 320 240 C 314 188, 282 158, 240 158"
      stroke={gold}
      strokeWidth="2"
      fill="none"
      opacity="0.55"
    />
    <path
      d="M 400 480 C 370 380, 310 340, 240 340"
      stroke={gold}
      strokeWidth="1.4"
      fill="none"
      opacity="0.4"
    />
  </svg>
);

const MascotMinimal = ({ size, gold }) => (
  <svg
    viewBox="0 0 480 480"
    width={size}
    height={size}
    style={{ display: "block", maxWidth: "100%", height: "auto" }}
  >
    <defs>
      <linearGradient id="mm-paper" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stopColor="#0f2350" />
        <stop offset="100%" stopColor="#060f21" />
      </linearGradient>
    </defs>
    {/* circle ground */}
    <circle cx="240" cy="240" r="200" fill="url(#mm-paper)" />
    <circle cx="240" cy="240" r="200" fill="none" stroke={gold} strokeWidth="1" opacity="0.4" />
    {/* head circle */}
    <circle cx="240" cy="210" r="58" fill="none" stroke={gold} strokeWidth="2" />
    {/* shoulders triangle */}
    <path d="M 150 360 L 240 280 L 330 360 Z" fill="none" stroke={gold} strokeWidth="2" />
    {/* passport rectangle */}
    <g transform="translate(296 320) rotate(-10)">
      <rect width="70" height="48" rx="4" fill="none" stroke={gold} strokeWidth="2" />
      <circle cx="35" cy="20" r="7" fill="none" stroke={gold} strokeWidth="1.6" />
      <path d="M 35 13 L 35 27 M 28 20 L 42 20" stroke={gold} strokeWidth="1.6" />
    </g>
    {/* eyes */}
    <circle cx="222" cy="208" r="2.4" fill={gold} />
    <circle cx="258" cy="208" r="2.4" fill={gold} />
    {/* labels */}
    <text x="240" y="448" textAnchor="middle" fill={gold} fontFamily="var(--f-mono)" fontSize="10" letterSpacing="3">
      SCHEGEN ADAM
    </text>
  </svg>
);

window.Mascot = Mascot;
