/* Placeholder taiyaki illustrations — used when real photos aren't available.
   Each component renders an SVG that "feels" like a taiyaki product photo placeholder. */

const TaiyakiSVG = ({ flavor = "ogura", size = 360, label, oozing = true }) => {
  // flavors: ogura (red bean), shiro (white bean), cream, matcha, ogura_cheese, seasonal
  const flavorColors = {
    ogura: { filling: "#5C2620", fillingLight: "#7A3528", label: "小倉あん" },
    shiro: { filling: "#E8DCC4", fillingLight: "#F2E8D0", label: "白あん" },
    cream: { filling: "#F4D58A", fillingLight: "#FCE5A8", label: "クリーム" },
    matcha: { filling: "#3F5E2A", fillingLight: "#5A7C42", label: "抹茶" },
    ogura_cheese: { filling: "#5C2620", fillingLight: "#F4E4C8", label: "小倉チーズ" },
    seasonal: { filling: "#D88AAE", fillingLight: "#F0B8D2", label: "桜あん" },
  };
  const c = flavorColors[flavor] || flavorColors.ogura;

  return (
    <svg viewBox="0 0 400 300" width={size} height={size * 0.75} style={{ display: "block" }} aria-label={label || c.label}>
      <defs>
        <radialGradient id={`crust-${flavor}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#E8B36A" />
          <stop offset="55%" stopColor="#C68A3F" />
          <stop offset="100%" stopColor="#7A4A1E" />
        </radialGradient>
        <radialGradient id={`crustHi-${flavor}`} cx="35%" cy="30%" r="40%">
          <stop offset="0%" stopColor="rgba(255,235,180,0.7)" />
          <stop offset="100%" stopColor="rgba(255,235,180,0)" />
        </radialGradient>
        <radialGradient id={`fill-${flavor}`} cx="50%" cy="50%" r="60%">
          <stop offset="0%" stopColor={c.fillingLight} />
          <stop offset="100%" stopColor={c.filling} />
        </radialGradient>
        <pattern id={`scales-${flavor}`} x="0" y="0" width="14" height="12" patternUnits="userSpaceOnUse">
          <path d="M 0 12 Q 7 4 14 12" fill="none" stroke="rgba(80,40,15,0.22)" strokeWidth="1" />
        </pattern>
      </defs>

      {/* shadow on plate */}
      <ellipse cx="200" cy="260" rx="160" ry="14" fill="rgba(80,40,15,0.18)" />

      {/* Body */}
      <g>
        {/* Tail */}
        <path
          d="M 320 150
             Q 360 110, 380 130
             Q 372 150, 376 170
             Q 360 190, 320 160
             Z"
          fill={`url(#crust-${flavor})`}
        />
        {/* Main body — fish silhouette */}
        <path
          d="M 60 150
             Q 60 90, 140 80
             Q 220 70, 280 90
             Q 330 105, 340 150
             Q 330 195, 280 210
             Q 220 230, 140 220
             Q 60 210, 60 150 Z"
          fill={`url(#crust-${flavor})`}
        />
        {/* Scale pattern */}
        <path
          d="M 60 150
             Q 60 90, 140 80
             Q 220 70, 280 90
             Q 330 105, 340 150
             Q 330 195, 280 210
             Q 220 230, 140 220
             Q 60 210, 60 150 Z"
          fill={`url(#scales-${flavor})`}
          opacity="0.85"
        />
        {/* Top fin */}
        <path d="M 200 78 Q 210 50, 230 58 Q 222 70, 220 82 Z" fill="#9A6630" />
        {/* Bottom fin */}
        <path d="M 200 222 Q 210 245, 235 240 Q 226 230, 220 218 Z" fill="#9A6630" />
        {/* Highlight */}
        <ellipse cx="170" cy="120" rx="80" ry="22" fill={`url(#crustHi-${flavor})`} opacity="0.7" />
        {/* Eye */}
        <circle cx="105" cy="135" r="7" fill="#2A1810" />
        <circle cx="103" cy="133" r="2" fill="#FFF" opacity="0.6" />
        {/* Mouth */}
        <path d="M 70 160 Q 85 168, 95 162" stroke="#5A3018" strokeWidth="2" fill="none" strokeLinecap="round" />
        {/* Gill */}
        <path d="M 130 110 Q 138 150, 130 195" stroke="rgba(80,40,15,0.35)" strokeWidth="2" fill="none" />
      </g>

      {/* Oozing filling — the brand promise */}
      {oozing && (
        <g>
          <path
            d="M 180 178
               Q 175 200, 168 215
               Q 178 220, 188 218
               Q 195 230, 205 222
               Q 218 232, 222 218
               Q 232 218, 230 205
               Q 222 195, 215 188
               Z"
            fill={`url(#fill-${flavor})`}
            stroke="rgba(60,20,10,0.3)"
            strokeWidth="0.8"
          />
          {/* extra ooze drops */}
          <ellipse cx="172" cy="222" rx="6" ry="4" fill={c.filling} opacity="0.8" />
          <ellipse cx="225" cy="232" rx="5" ry="3" fill={c.filling} opacity="0.7" />
          {/* For ogura_cheese, add cheese ooze */}
          {flavor === "ogura_cheese" && (
            <path
              d="M 200 175 Q 205 195, 215 200 Q 218 205, 212 210 Q 200 208, 195 200 Z"
              fill="#F4E4C8"
              opacity="0.9"
            />
          )}
        </g>
      )}
    </svg>
  );
};

/* Decorative wave SVG (seigaiha — traditional pattern) */
const SeigaihaPattern = ({ color = "currentColor", opacity = 0.08 }) => (
  <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity }} aria-hidden="true">
    <defs>
      <pattern id="seigaiha" x="0" y="0" width="60" height="30" patternUnits="userSpaceOnUse">
        <path d="M 0 30 A 30 30 0 0 1 60 30" fill="none" stroke={color} strokeWidth="1.2" />
        <path d="M -30 30 A 30 30 0 0 1 30 30" fill="none" stroke={color} strokeWidth="1.2" />
        <path d="M 30 30 A 30 30 0 0 1 90 30" fill="none" stroke={color} strokeWidth="1.2" />
        <path d="M 0 15 A 15 15 0 0 1 30 15" fill="none" stroke={color} strokeWidth="0.8" opacity="0.6" />
        <path d="M 30 15 A 15 15 0 0 1 60 15" fill="none" stroke={color} strokeWidth="0.8" opacity="0.6" />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#seigaiha)" />
  </svg>
);

/* Asanoha (hemp leaf) decorative pattern */
const AsanohaPattern = ({ color = "currentColor", opacity = 0.06 }) => (
  <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity }} aria-hidden="true">
    <defs>
      <pattern id="asanoha" x="0" y="0" width="40" height="46" patternUnits="userSpaceOnUse">
        <g stroke={color} strokeWidth="0.8" fill="none">
          <path d="M 20 0 L 20 46 M 0 11 L 40 11 M 0 35 L 40 35" />
          <path d="M 0 0 L 40 46 M 40 0 L 0 46" />
        </g>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#asanoha)" />
  </svg>
);

/* Steam animation — for hot fresh-baked feel */
const SteamWisps = ({ count = 3 }) => (
  <div style={{ position: "absolute", left: "50%", top: -20, transform: "translateX(-50%)", display: "flex", gap: 10, pointerEvents: "none" }}>
    {Array.from({ length: count }).map((_, i) => (
      <div
        key={i}
        style={{
          width: 8,
          height: 40,
          background: "linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.6))",
          borderRadius: 999,
          animation: `steamRise 2.4s ease-out infinite`,
          animationDelay: `${i * 0.4}s`,
          filter: "blur(3px)",
        }}
      />
    ))}
    <style>{`
      @keyframes steamRise {
        0% { transform: translateY(10px) scale(0.6); opacity: 0; }
        30% { opacity: 0.9; }
        100% { transform: translateY(-40px) scale(1.4); opacity: 0; }
      }
    `}</style>
  </div>
);

/* Sakura petal scatter (decorative) */
const SakuraScatter = ({ count = 6 }) => (
  <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}>
    {Array.from({ length: count }).map((_, i) => (
      <svg
        key={i}
        viewBox="0 0 24 24"
        width={14 + (i % 3) * 6}
        height={14 + (i % 3) * 6}
        style={{
          position: "absolute",
          left: `${(i * 137) % 100}%`,
          top: `${(i * 53) % 100}%`,
          opacity: 0.5,
          transform: `rotate(${i * 47}deg)`,
        }}
      >
        <path d="M 12 2 Q 14 8 12 12 Q 10 8 12 2 Z M 22 12 Q 16 14 12 12 Q 16 10 22 12 Z M 12 22 Q 10 16 12 12 Q 14 16 12 22 Z M 2 12 Q 8 10 12 12 Q 8 14 2 12 Z"
          fill="#E8A5C4" />
      </svg>
    ))}
  </div>
);

Object.assign(window, { TaiyakiSVG, SeigaihaPattern, AsanohaPattern, SteamWisps, SakuraScatter });