// Shared UI bits used across screens.

const DK_YELLOW = "#FFE02B";
const DK_YELLOW_DEEP = "#FFC800";
const DK_INK = "#1A1A1A";
const DK_INK_SOFT = "#4A4A4A";
const DK_CREAM = "#FFF8D6";
const DK_RED = "#E53935";
const DK_GREEN = "#2E7D32";

/* Brand logo — official DELISH KITCHEN icon. Kept square; sizes via prop. */
function LogoTag({ size = 72 }) {
  return (
    <img
      src="assets/delish-logo.png"
      alt="デリッシュキッチン"
      width={size}
      height={size}
      style={{
        display: "block",
        width: size,
        height: size,
        borderRadius: Math.round(size * 0.18),
        boxShadow: "0 6px 16px rgba(0,0,0,0.12)",
      }}
    />
  );
}

/* A small chip — used for the conference tag line. */
function Chip({ children, tone = "ink" }) {
  const bg = tone === "ink" ? "#1A1A1A" : "#FFFFFF";
  const fg = tone === "ink" ? "#FFE02B" : "#1A1A1A";
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        background: bg,
        color: fg,
        padding: "6px 12px",
        borderRadius: 999,
        fontWeight: 700,
        fontSize: 12,
        letterSpacing: 0.6,
      }}
    >
      {children}
    </span>
  );
}

/* Progress dots — shows how far through the 3-question run you are. */
function ProgressDots({ total, current }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
      }}
    >
      {Array.from({ length: total }).map((_, i) => {
        const state =
          i < current ? "done" : i === current ? "active" : "todo";
        const bg =
          state === "done"
            ? DK_INK
            : state === "active"
            ? DK_INK
            : "rgba(0,0,0,0.18)";
        const w = state === "active" ? 28 : 10;
        return (
          <div
            key={i}
            style={{
              height: 10,
              width: w,
              borderRadius: 999,
              background: bg,
              transition: "all .35s cubic-bezier(.2,.9,.3,1.2)",
            }}
          />
        );
      })}
    </div>
  );
}

/* Big round / cross stamp that animates in. */
function ResultStamp({ correct }) {
  return (
    <div
      className="dk-stamp-wrap"
      aria-hidden
      style={{
        position: "relative",
        width: 180,
        height: 180,
        margin: "0 auto",
      }}
    >
      <svg
        className="dk-stamp"
        width="180"
        height="180"
        viewBox="0 0 180 180"
        style={{ display: "block" }}
      >
        {correct ? (
          <>
            <circle
              cx="90"
              cy="90"
              r="70"
              fill="none"
              stroke={DK_RED}
              strokeWidth="14"
              strokeLinecap="round"
              className="dk-stamp-draw"
              style={{ strokeDasharray: 440, strokeDashoffset: 440 }}
            />
          </>
        ) : (
          <>
            <line
              x1="45"
              y1="45"
              x2="135"
              y2="135"
              stroke="#2B6BFF"
              strokeWidth="14"
              strokeLinecap="round"
              className="dk-stamp-draw"
              style={{ strokeDasharray: 140, strokeDashoffset: 140 }}
            />
            <line
              x1="135"
              y1="45"
              x2="45"
              y2="135"
              stroke="#2B6BFF"
              strokeWidth="14"
              strokeLinecap="round"
              className="dk-stamp-draw dk-stamp-draw-2"
              style={{ strokeDasharray: 140, strokeDashoffset: 140 }}
            />
          </>
        )}
      </svg>
    </div>
  );
}

/* Confetti — lightweight, CSS-keyframed. Shown on the result screen. */
function Confetti({ count = 28 }) {
  const pieces = React.useMemo(
    () =>
      Array.from({ length: count }).map((_, i) => ({
        left: Math.random() * 100,
        delay: Math.random() * 0.8,
        duration: 1.8 + Math.random() * 1.6,
        rot: Math.random() * 360,
        color: ["#FFE02B", "#FF8A3D", "#2B6BFF", "#E53935", "#2E7D32", "#1A1A1A"][
          i % 6
        ],
        size: 8 + Math.random() * 8,
        shape: i % 3,
      })),
    [count]
  );
  return (
    <div
      aria-hidden
      style={{
        position: "absolute",
        inset: 0,
        overflow: "hidden",
        pointerEvents: "none",
      }}
    >
      {pieces.map((p, i) => (
        <span
          key={i}
          className="dk-confetti"
          style={{
            left: `${p.left}%`,
            width: p.size,
            height: p.shape === 2 ? p.size * 0.5 : p.size,
            background: p.color,
            borderRadius: p.shape === 1 ? "50%" : 2,
            animationDelay: `${p.delay}s`,
            animationDuration: `${p.duration}s`,
            transform: `rotate(${p.rot}deg)`,
          }}
        />
      ))}
    </div>
  );
}

Object.assign(window, { LogoTag, Chip, ProgressDots, ResultStamp, Confetti, DK_YELLOW, DK_YELLOW_DEEP, DK_INK, DK_INK_SOFT, DK_CREAM, DK_RED, DK_GREEN });