/* ============================================================
   YUZU YATAI — logo system (SVG, recolorable)
   YuzuSlice  : the citrus cross-section monogram
   Wordmark   : YUZU (slice in 2nd glyph) + YATAI
   Logo       : full lockup w/ 寿司 | ไทย kicker
   ============================================================ */

function YuzuSlice({
  size = 64,
  line = "var(--ink)",
  seed = "var(--saffron)",
  flesh = "transparent",
  segments = 9,
}) {
  const cx = 50,
    cy = 50;
  const fleshR = 41,
    rindR = 47;
  const spokes = [];
  const seeds = [];
  for (let i = 0; i < segments; i++) {
    const ang = (360 / segments) * i - 90; // start at top
    const rad = (ang * Math.PI) / 180;
    // membrane spoke
    spokes.push(
      <line
        key={"s" + i}
        x1={cx}
        y1={cy}
        x2={cx + Math.cos(rad) * fleshR}
        y2={cy + Math.sin(rad) * fleshR}
        stroke={line}
        strokeWidth="1.4"
      />,
    );
    // seed: an almond/petal pointing outward, placed mid-radius
    const sd = 25;
    const sx = cx + Math.cos(rad) * sd,
      sy = cy + Math.sin(rad) * sd;
    const rot = ang + 90; // align long axis radially
    seeds.push(
      <path
        key={"d" + i}
        d="M0 -9 C5 -5.5 5 4 0 8 C-5 4 -5 -5.5 0 -9 Z"
        fill={seed}
        transform={`translate(${sx} ${sy}) rotate(${rot})`}
      />,
    );
  }
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      aria-hidden="true"
      style={{ display: "block", overflow: "visible" }}
    >
      <circle
        cx={cx}
        cy={cy}
        r={rindR}
        fill={flesh}
        stroke={line}
        strokeWidth="2.4"
      />
      <circle
        cx={cx}
        cy={cy}
        r={rindR - 4.5}
        fill="none"
        stroke={line}
        strokeWidth="1"
        opacity=".55"
      />
      <circle
        cx={cx}
        cy={cy}
        r={fleshR}
        fill="none"
        stroke={line}
        strokeWidth="1.2"
        opacity=".8"
      />
      {spokes}
      {seeds}
      <circle cx={cx} cy={cy} r={3.6} fill={line} />
    </svg>
  );
}

/* the YUZU wordmark with the slice standing in for the 2nd letter (the first "U") */
function Wordmark({ height = 46, tone = "ink" }) {
  const ink = tone === "cream" ? "var(--rice)" : "var(--ink)";
  const letter = {
    fontFamily: "var(--display)",
    fontWeight: 700,
    color: ink,
    fontSize: height,
    lineHeight: 1,
    letterSpacing: "-.02em",
    display: "block",
  };
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: height * 0.02,
      }}
    >
      <span style={letter}>Y</span>
      <YuzuSlice size={height * 0.92} line={ink} seed="var(--saffron)" />
      <span style={letter}>Z</span>
      <span style={letter}>U</span>
    </span>
  );
}

/* the real wordmark artwork — ink on light backgrounds, cream on dark.
   Reads window.__resources (set by the offline bundler) at render time,
   falling back to the relative path for the live prototype. */
function logoSrc(tone, wm) {
  const R = (typeof window !== "undefined" && window.__resources) || {};
  if (wm)
    return tone === "cream"
      ? R.logoCreamWm || "assets/logo-cream-wm.png"
      : R.logoInkWm || "assets/logo-ink-wm.png";
  return tone === "cream"
    ? R.logoCream || "assets/logo-cream.png"
    : R.logoInk || "assets/logo-ink.png";
}

/* compact lockup for the nav / footer (wordmark crop of the real logo) */
function LogoMark({ tone = "ink", size = 34 }) {
  return (
    <img
      src={logoSrc(tone, true)}
      alt="Yuzu Yatai"
      style={{
        height: Math.round(size * 1.16),
        width: "auto",
        display: "block",
      }}
    />
  );
}

/* the 寿司 | ไทย kicker */
function ScriptKicker({ tone = "ink", scale = 1 }) {
  const ink = tone === "cream" ? "var(--rice)" : "var(--ink)";
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 14 * scale,
        color: ink,
      }}
    >
      <span
        style={{
          display: "inline-flex",
          flexDirection: "column",
          alignItems: "center",
          lineHeight: 1,
        }}
      >
        <span
          style={{
            fontFamily: "var(--display)",
            fontSize: 22 * scale,
            fontWeight: 600,
          }}
        >
          寿司
        </span>
        <span
          style={{
            fontFamily: "var(--body)",
            fontSize: 10 * scale,
            letterSpacing: ".34em",
            color: "var(--saffron)",
            marginTop: 4,
          }}
        >
          SUSHI
        </span>
      </span>
      <span
        style={{ width: 1, height: 30 * scale, background: ink, opacity: 0.4 }}
      ></span>
      <span
        style={{
          display: "inline-flex",
          flexDirection: "column",
          alignItems: "center",
          lineHeight: 1,
        }}
      >
        <span
          style={{
            fontFamily: "var(--display)",
            fontSize: 22 * scale,
            fontWeight: 600,
          }}
        >
          ไทย
        </span>
        <span
          style={{
            fontFamily: "var(--body)",
            fontSize: 10 * scale,
            letterSpacing: ".34em",
            color: "var(--saffron)",
            marginTop: 4,
          }}
        >
          THAI
        </span>
      </span>
    </span>
  );
}

/* full stacked lockup (hero / footer) — the real logo artwork */
function Logo({ tone = "ink", wordmarkHeight = 88, kicker = true }) {
  return (
    <img
      src={logoSrc(tone, false)}
      alt="Yuzu Yatai"
      style={{
        height: Math.round(wordmarkHeight * 2.05),
        width: "auto",
        display: "block",
        maxWidth: "100%",
      }}
    />
  );
}

Object.assign(window, { YuzuSlice, Wordmark, LogoMark, ScriptKicker, Logo });