/* The cup — used both as the hero illustration (legacy)
   and as a tiny living mark in the logo lockup.
   Steam keeps rising lazily either way. */

const Cup = ({ mini = false }) => {
  // Steam wisp config — fewer & faster for the mini, lazier for the hero.
  const wisps = mini
    ? [
        { d: "M 0 0 C -6 -16,  8 -32, 0 -52", x: -10, xf: -4,  dur: 4.4, delay: 0,   op: .50 },
        { d: "M 0 0 C  5 -14, -6 -30, 4 -50", x:  4,  xf:  8,  dur: 5.2, delay: 1.1, op: .42 },
        { d: "M 0 0 C -3 -14,  6 -28,-2 -48", x: 14,  xf:  10, dur: 4.8, delay: 2.3, op: .35 },
      ]
    : [
        { d: "M 0 0 C -8 -22, 10 -44, 2 -68 C -4 -82, 8 -98, 0 -120",  x: -22, xf: -14, dur: 6.2, delay: 0,   op: .55 },
        { d: "M 0 0 C  6 -20, -8 -42, 4 -66 C 12 -80, -2 -96, 6 -120", x:  4,  xf:  12, dur: 7.4, delay: 1.1, op: .50 },
        { d: "M 0 0 C -4 -18,  8 -40,-2 -64 C -10 -78, 4 -94,-4 -120", x:  26, xf:  18, dur: 6.8, delay: 2.4, op: .42 },
        { d: "M 0 0 C  8 -22, -6 -46, 6 -70 C 14 -84, 0 -100, 8 -120", x: -2,  xf: -8,  dur: 8.1, delay: 3.6, op: .38 },
      ];

  if (mini) return <MiniCup wisps={wisps} />;

  return (
    <div className="cup-wrap" style={{
      position: "relative",
      width: "min(360px, 60vw)",
      pointerEvents: "none",
    }}>
      <svg
        viewBox="-120 -200 240 240"
        style={{
          position: "absolute",
          left: "50%", bottom: "82%",
          transform: "translateX(-50%)",
          width: "62%", height: "auto",
          overflow: "visible",
        }}
        aria-hidden="true"
      >
        {wisps.map((w, i) => (
          <path
            key={i}
            className="steam-wisp"
            d={w.d}
            fill="none"
            stroke="rgba(74, 58, 44, 0.55)"
            strokeWidth="1.2"
            strokeLinecap="round"
            style={{
              ['--x']: `${w.x}px`,
              ['--xf']: `${w.xf}px`,
              ['--dur']: `${w.dur}s`,
              ['--delay']: `${w.delay}s`,
              ['--steam-op']: w.op,
            }}
          />
        ))}
      </svg>

      <svg viewBox="0 0 360 320"
        style={{ width: "100%", height: "auto", overflow: "visible" }}
        role="img" aria-label="A coffee cup, steam rising slowly"
      >
        <defs>
          <linearGradient id="cupBody" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%"  stopColor="#C6633E" />
            <stop offset="55%" stopColor="#A24D2A" />
            <stop offset="100%" stopColor="#7C3819" />
          </linearGradient>
          <radialGradient id="cupInner" cx=".5" cy=".3" r=".7">
            <stop offset="0%"  stopColor="#2A180D" />
            <stop offset="100%" stopColor="#0E0805" />
          </radialGradient>
          <radialGradient id="coffeeSurface" cx=".45" cy=".4" r=".6">
            <stop offset="0%"  stopColor="#6B3A1E" />
            <stop offset="60%" stopColor="#3A1E0C" />
            <stop offset="100%" stopColor="#1F0F06" />
          </radialGradient>
          <linearGradient id="cupHighlight" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"  stopColor="rgba(255,255,255,.32)" />
            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
          </linearGradient>
          <radialGradient id="saucerGrad" cx=".5" cy=".4" r=".55">
            <stop offset="0%"  stopColor="#B8542F" />
            <stop offset="100%" stopColor="#7A3417" />
          </radialGradient>
          <radialGradient id="cupShadow" cx=".5" cy=".5" r=".5">
            <stop offset="0%"  stopColor="rgba(28,20,14,.32)" />
            <stop offset="100%" stopColor="rgba(28,20,14,0)" />
          </radialGradient>
        </defs>

        <ellipse cx="180" cy="298" rx="135" ry="14" fill="url(#cupShadow)" />
        <ellipse cx="180" cy="282" rx="125" ry="18" fill="url(#saucerGrad)" />
        <ellipse cx="180" cy="280" rx="115" ry="14" fill="#8E3F22" />
        <ellipse cx="180" cy="278" rx="110" ry="11" fill="#A24D2A" />
        <ellipse cx="180" cy="277" rx="108" ry="10" fill="none"
          stroke="rgba(255,255,255,.18)" strokeWidth="1" />

        <path d="M 95 110 Q 95 105 100 105 L 260 105 Q 265 105 265 110 L 252 256 Q 250 272 234 272 L 126 272 Q 110 272 108 256 Z"
          fill="url(#cupBody)" />
        <path d="M 100 110 L 112 252 Q 113 262 122 263 L 132 263 Q 124 262 122 252 L 110 110 Z"
          fill="url(#cupHighlight)" opacity=".55" />

        <path d="M 263 140 Q 312 142 312 184 Q 312 226 263 230"
          fill="none" stroke="url(#cupBody)" strokeWidth="20" strokeLinecap="round" />
        <path d="M 263 152 Q 300 156 300 184 Q 300 218 263 222"
          fill="none" stroke="rgba(0,0,0,.18)" strokeWidth="6" />

        <ellipse cx="180" cy="108" rx="83" ry="14" fill="url(#cupInner)" />
        <ellipse cx="180" cy="106" rx="83" ry="14" fill="none"
          stroke="rgba(255,255,255,.16)" strokeWidth="1" />
        <ellipse cx="180" cy="110" rx="76" ry="10" fill="url(#coffeeSurface)" />
        <path d="M 158 110 Q 180 115 202 110" fill="none"
          stroke="rgba(232, 208, 170, .55)" strokeWidth="1.5" strokeLinecap="round" />
      </svg>
    </div>
  );
};

/* Minimal cup for the logo lockup. Sized to align with the
   wordmark's x-height; steam overflows upward into header padding. */
const MiniCup = ({ wisps }) => (
  <span className="mini-cup" aria-hidden="true" style={{
    position: "relative",
    display: "inline-block",
    width: "1.3em",
    height: "1.3em",
    verticalAlign: "middle",
    lineHeight: 0,
    overflow: "visible",
  }}>
    {/* steam — short and quiet, sits just above the cup rim */}
    <svg viewBox="-30 -55 60 55"
      style={{
        position: "absolute",
        left: "50%",
        bottom: "92%",
        transform: "translateX(-50%)",
        width: "75%",
        height: ".55em",
        overflow: "visible",
        pointerEvents: "none",
      }}
      preserveAspectRatio="xMidYMax meet"
      aria-hidden="true"
    >
      {wisps.map((w, i) => (
        <path
          key={i}
          className="steam-wisp"
          d={w.d}
          fill="none"
          stroke="var(--ink-soft, #4A3A2C)"
          strokeWidth="2.2"
          strokeLinecap="round"
          opacity=".55"
          style={{
            ['--x']: `${w.x * .6}px`,
            ['--xf']: `${w.xf * .6}px`,
            ['--dur']: `${w.dur}s`,
            ['--delay']: `${w.delay}s`,
            ['--steam-op']: Math.min(.7, w.op + .2),
            ['--rise']: '-22px',
          }}
        />
      ))}
    </svg>
    {/* the cup — fills the wrapper */}
    <svg viewBox="0 0 60 56"
      style={{
        width: "100%",
        height: "100%",
        overflow: "visible",
        display: "block",
      }}
      preserveAspectRatio="xMidYMid meet"
      aria-hidden="true"
    >
      <defs>
        <linearGradient id="miniCupBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="#C6633E" />
          <stop offset="100%" stopColor="#7C3819" />
        </linearGradient>
      </defs>
      {/* saucer */}
      <ellipse cx="30" cy="50" rx="22" ry="3.4" fill="#8E3F22"/>
      <ellipse cx="30" cy="49" rx="20" ry="2.4" fill="#A24D2A"/>
      {/* body */}
      <path d="M 12 18 Q 12 16 14 16 L 44 16 Q 46 16 46 18 L 43 44 Q 42 47 38 47 L 20 47 Q 16 47 15 44 Z"
        fill="url(#miniCupBody)"/>
      {/* highlight */}
      <path d="M 14 18 L 18 44 L 22 44 L 18 18 Z" fill="rgba(255,255,255,.28)"/>
      {/* handle */}
      <path d="M 46 22 Q 56 23 56 31 Q 56 39 46 40"
        fill="none" stroke="url(#miniCupBody)" strokeWidth="3.6" strokeLinecap="round"/>
      {/* rim */}
      <ellipse cx="30" cy="17" rx="16" ry="2.4" fill="#1F0F06"/>
      <ellipse cx="30" cy="18" rx="14.5" ry="1.6" fill="#3A1E0C"/>
    </svg>
  </span>
);

Object.assign(window, { Cup, MiniCup });