// Shared visual primitives used by the Karrie 29 site.
// All localized copy lives in i18n.jsx as STRINGS[lang].

// Minimal thin-line icon set. 1.5px strokes, currentColor, sized via inline width/height.
const Icon = ({ name, size = 22, stroke = 1.5, style = {} }) => {
  const sw = stroke;
  const c = 'currentColor';
  const common = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: c,
    strokeWidth: sw,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    style: { flex: '0 0 auto', ...style },
  };
  switch (name) {
    case 'home':
      return (
        <svg {...common}>
          <path d="M3 10.5 12 3l9 7.5" />
          <path d="M5.5 9.5V20h13V9.5" />
        </svg>
      );
    case 'leaf':
      return (
        <svg {...common}>
          <path d="M20 4c-9 0-15 5-15 12 0 2 .5 3.5 1.5 4.5 1-1 2.5-1.5 4.5-1.5 7 0 12-6 12-15 0 0-1-.5-3-.5z" />
          <path d="M5.5 20.5 14 12" />
        </svg>
      );
    case 'box':
      return (
        <svg {...common}>
          <path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5v-9Z" />
          <path d="M3 7.5 12 12l9-4.5" />
          <path d="M12 12v9" />
        </svg>
      );
    case 'spark':
      return (
        <svg {...common}>
          <path d="M12 3v5M12 16v5M3 12h5M16 12h5M5.5 5.5l3 3M15.5 15.5l3 3M5.5 18.5l3-3M15.5 8.5l3-3" />
        </svg>
      );
    case 'cal':
      return (
        <svg {...common}>
          <rect x="3.5" y="5" width="17" height="15" rx="2" />
          <path d="M3.5 9.5h17M8 3v4M16 3v4" />
        </svg>
      );
    case 'chat':
      return (
        <svg {...common}>
          <path d="M4 5h16v11H9l-5 4z" />
        </svg>
      );
    case 'note':
      return (
        <svg {...common}>
          <path d="M6 3.5h9l4 4V20a.5.5 0 0 1-.5.5h-12A.5.5 0 0 1 6 20Z" />
          <path d="M15 3.5v4h4" />
          <path d="M9 12h7M9 15.5h7M9 8.5h3" />
        </svg>
      );
    case 'heart':
      return (
        <svg {...common}>
          <path d="M12 19.5s-7-4.4-7-9.5a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.1-7 9.5-7 9.5Z" />
        </svg>
      );
    case 'arrow':
      return (
        <svg {...common}>
          <path d="M5 12h14" />
          <path d="M13 6l6 6-6 6" />
        </svg>
      );
    case 'plus':
      return (
        <svg {...common}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case 'minus':
      return (
        <svg {...common}>
          <path d="M5 12h14" />
        </svg>
      );
    case 'menu':
      return (
        <svg {...common}>
          <path d="M4 7h16M4 12h16M4 17h16" />
        </svg>
      );
    case 'close':
      return (
        <svg {...common}>
          <path d="M6 6l12 12M18 6 6 18" />
        </svg>
      );
    case 'mail':
      return (
        <svg {...common}>
          <rect x="3" y="5.5" width="18" height="13" rx="2" />
          <path d="m3.5 7 8.5 6.5L20.5 7" />
        </svg>
      );
    case 'phone':
      return (
        <svg {...common}>
          <path d="M5 4.5h3l1.5 4.5-2 1a11 11 0 0 0 6.5 6.5l1-2 4.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5C9.5 20.5 3.5 14.5 3.5 6A1.5 1.5 0 0 1 5 4.5Z" />
        </svg>
      );
    case 'pin':
      return (
        <svg {...common}>
          <path d="M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12Z" />
          <circle cx="12" cy="9.5" r="2.5" />
        </svg>
      );
    case 'star':
      return (
        <svg {...common}>
          <path d="m12 4 2.5 5 5.5.7-4 3.8 1 5.5L12 16.5 7 19l1-5.5-4-3.8 5.5-.7Z" />
        </svg>
      );
    case 'quote':
      return (
        <svg {...common}>
          <path d="M7 16c-2 0-3-1.5-3-3.5C4 9 6.5 6 9 5.5M17 16c-2 0-3-1.5-3-3.5 0-3.5 2.5-6.5 5-7" />
        </svg>
      );
    case 'check':
      return (
        <svg {...common}>
          <path d="m5 12.5 4.5 4.5L19 7" />
        </svg>
      );
    case 'dot':
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="3.5" />
        </svg>
      );
    case 'sun':
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="4" />
          <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.5 5.5l1.5 1.5M17 17l1.5 1.5M5.5 18.5 7 17M17 7l1.5-1.5" />
        </svg>
      );
    case 'moon':
      return (
        <svg {...common}>
          <path d="M20 14a8 8 0 1 1-10-10 7 7 0 0 0 10 10z" />
        </svg>
      );
    case 'upload':
      return (
        <svg {...common}>
          <path d="M12 16V4M7 9l5-5 5 5" />
          <path d="M4 17v2.5A1.5 1.5 0 0 0 5.5 21h13a1.5 1.5 0 0 0 1.5-1.5V17" />
        </svg>
      );
    default:
      return null;
  }
};

// A "photo" placeholder — soft tonal blocks suggesting a room, with a
// monospace caption strip. Two modes: "messy" (denser, more shapes, slightly
// warmer) and "calm" (sparse, lighter). Used in before/after sections.
const RoomPlaceholder = ({ mode = 'calm', palette, label, w = '100%', h = 240, radius = 16 }) => {
  const isMessy = mode === 'messy';
  const bg = isMessy ? palette.messyBg : palette.calmBg;
  const accent = isMessy ? palette.messyAccent : palette.calmAccent;
  const ink = palette.placeholderInk;
  return (
    <div
      style={{
        position: 'relative',
        width: w,
        height: h,
        borderRadius: radius,
        overflow: 'hidden',
        background: bg,
        border: `1px solid ${palette.border}`,
      }}
    >
      <svg
        viewBox="0 0 400 300"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      >
        {/* floor line */}
        <rect x="0" y="220" width="400" height="80" fill={accent} opacity="0.35" />
        {/* window */}
        <rect x="60" y="50" width="80" height="110" fill={palette.calmBg} opacity={isMessy ? 0.6 : 0.95} stroke={ink} strokeWidth="1" />
        <line x1="100" y1="50" x2="100" y2="160" stroke={ink} strokeWidth="0.6" />
        <line x1="60" y1="105" x2="140" y2="105" stroke={ink} strokeWidth="0.6" />
        {/* sofa/bed shape */}
        <rect x="180" y="160" width="180" height="55" rx="8" fill={accent} opacity="0.7" />
        <rect x="180" y="140" width="180" height="25" rx="6" fill={accent} opacity="0.55" />
        {/* lamp */}
        <line x1="40" y1="220" x2="40" y2="170" stroke={ink} strokeWidth="1" />
        <path d="M28 170 L52 170 L46 152 L34 152 Z" fill={accent} opacity="0.8" />
        {/* clutter (messy only) */}
        {isMessy && (
          <g opacity="0.85">
            <rect x="80" y="190" width="60" height="22" rx="3" fill={accent} opacity="0.75" />
            <rect x="100" y="172" width="40" height="18" rx="2" fill={accent} opacity="0.6" />
            <circle cx="160" cy="210" r="10" fill={accent} opacity="0.6" />
            <rect x="220" y="100" width="50" height="38" rx="2" fill={accent} opacity="0.5" />
            <rect x="290" y="80" width="40" height="60" rx="2" fill={accent} opacity="0.5" />
            <path d="M180 220 L210 220 L205 230 L185 230 Z" fill={accent} opacity="0.6" />
          </g>
        )}
        {!isMessy && (
          <g opacity="0.7">
            <circle cx="260" cy="125" r="14" fill="none" stroke={ink} strokeWidth="0.8" />
            <rect x="80" y="200" width="36" height="14" rx="2" fill={accent} opacity="0.5" />
          </g>
        )}
      </svg>
      {label && (
        <div
          style={{
            position: 'absolute',
            left: 12,
            bottom: 12,
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontSize: 10,
            letterSpacing: 0.4,
            color: ink,
            background: 'rgba(255,255,255,0.7)',
            padding: '4px 8px',
            borderRadius: 6,
            textTransform: 'uppercase',
          }}
        >
          {label}
        </div>
      )}
    </div>
  );
};

// A "portrait" placeholder for Karrie — abstract bust silhouette over a soft
// tonal wash. Mono caption.
const PortraitPlaceholder = ({ palette, h = 360, w = '100%', radius = 16, caption = 'portrait · karrie' }) => {
  return (
    <div
      style={{
        position: 'relative',
        width: w,
        height: h,
        borderRadius: radius,
        overflow: 'hidden',
        background: palette.calmBg,
        border: `1px solid ${palette.border}`,
      }}
    >
      <svg
        viewBox="0 0 300 400"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      >
        <rect x="0" y="0" width="300" height="400" fill={palette.calmBg} />
        <rect x="0" y="240" width="300" height="160" fill={palette.calmAccent} opacity="0.35" />
        {/* head */}
        <circle cx="150" cy="170" r="60" fill={palette.calmAccent} opacity="0.7" />
        {/* shoulders */}
        <path
          d="M50 360 C 70 280, 230 280, 250 360 L 250 400 L 50 400 Z"
          fill={palette.calmAccent}
          opacity="0.85"
        />
      </svg>
      <div
        style={{
          position: 'absolute',
          left: 12,
          bottom: 12,
          fontFamily: "'JetBrains Mono', ui-monospace, monospace",
          fontSize: 10,
          letterSpacing: 0.4,
          color: palette.placeholderInk,
          background: 'rgba(255,255,255,0.75)',
          padding: '4px 8px',
          borderRadius: 6,
          textTransform: 'uppercase',
        }}
      >
        {caption}
      </div>
    </div>
  );
};

// KarrieLogo — the brand mark. A stylized 盈 character with a botanical
// branch sprig to the left, and a "KARRIE 29 / INTERIORS" serif wordmark
// below. Pass `ink` (main color), `leaf` (branch color, defaults to ink),
// and `width` (overall width in px). `layout='stacked'` (default) renders
// icon-over-wordmark; `layout='inline'` is a compact horizontal mark for
// nav bars.
const LeafBranch = ({ color = 'currentColor', width = 60, height = 140, stroke = 1.2 }) => (
  <svg
    width={width}
    height={height}
    viewBox="0 0 60 140"
    fill="none"
    style={{ flex: '0 0 auto' }}
    aria-hidden="true"
  >
    {/* main stem - gentle s-curve */}
    <path
      d="M44 138 C 38 110, 42 84, 34 60 C 28 38, 30 22, 22 6"
      stroke={color}
      strokeWidth={stroke}
      strokeLinecap="round"
      fill="none"
      opacity="0.85"
    />
    {/* leaves: pairs of pointed ovals branching off the stem */}
    {[
      { y: 22, side: -1, len: 14, rot: -55 },
      { y: 36, side: 1, len: 12, rot: 35 },
      { y: 52, side: -1, len: 16, rot: -50 },
      { y: 68, side: 1, len: 14, rot: 40 },
      { y: 86, side: -1, len: 18, rot: -45 },
      { y: 104, side: 1, len: 15, rot: 45 },
      { y: 120, side: -1, len: 14, rot: -40 },
    ].map((l, i) => {
      const stemX = 22 + ((l.y - 6) / 132) * 22; // matches stem curve roughly
      const tipX = stemX + l.side * (l.len * 1.05);
      const tipY = l.y - 4;
      const ctrlX1 = stemX + l.side * (l.len * 0.2);
      const ctrlY1 = l.y - l.len * 0.55;
      const ctrlX2 = stemX + l.side * (l.len * 0.95);
      const ctrlY2 = l.y - l.len * 0.15;
      const ctrlX3 = stemX + l.side * (l.len * 0.6);
      const ctrlY3 = l.y + l.len * 0.2;
      return (
        <path
          key={i}
          d={`M ${stemX} ${l.y} C ${ctrlX1} ${ctrlY1}, ${ctrlX2} ${ctrlY2}, ${tipX} ${tipY} C ${ctrlX3} ${ctrlY3}, ${stemX + l.side * 1} ${l.y + 1}, ${stemX} ${l.y} Z`}
          stroke={color}
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
          opacity="0.85"
        />
      );
    })}
  </svg>
);

const KarrieLogo = ({
  ink = '#2c2925',
  leaf,
  width = 240,
  layout = 'stacked',
  showWordmark = true,
}) => {
  const leafColor = leaf || ink;

  if (layout === 'inline') {
    // Compact horizontal: small branch + 盈 + stacked wordmark, all in a row.
    const charSize = width * 0.34;
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: width * 0.04, color: ink, lineHeight: 1 }}>
        <LeafBranch color={leafColor} width={width * 0.12} height={charSize * 1.25} stroke={1.1} />
        <span
          style={{
            fontFamily: "'Noto Serif TC', 'Noto Serif SC', 'Cormorant Garamond', serif",
            fontWeight: 400,
            fontSize: charSize,
            lineHeight: 0.9,
            color: ink,
          }}
        >
          盈
        </span>
        {showWordmark && (
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: width * 0.012, marginLeft: width * 0.02 }}>
            <div
              style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontWeight: 500,
                fontSize: width * 0.085,
                letterSpacing: width * 0.01,
                color: ink,
                lineHeight: 1,
              }}
            >
              KARRIE 29
            </div>
            <div style={{ width: '100%', height: 0.8, background: ink, opacity: 0.55 }} />
            <div
              style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontWeight: 400,
                fontSize: width * 0.058,
                letterSpacing: width * 0.022,
                color: ink,
                lineHeight: 1,
              }}
            >
              INTERIORS
            </div>
          </div>
        )}
      </div>
    );
  }

  // Stacked (default): branch + 盈 on top row, wordmark beneath.
  const charSize = width * 0.46;
  const branchH = charSize * 1.4;
  const branchW = branchH * 0.42;
  return (
    <div
      style={{
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: width * 0.06,
        color: ink,
        lineHeight: 1,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: width * 0.02 }}>
        <LeafBranch color={leafColor} width={branchW} height={branchH} stroke={1.1} />
        <span
          style={{
            fontFamily: "'Noto Serif TC', 'Noto Serif SC', 'Cormorant Garamond', serif",
            fontWeight: 400,
            fontSize: charSize,
            lineHeight: 0.88,
            color: ink,
            marginBottom: -charSize * 0.04,
          }}
        >
          盈
        </span>
      </div>
      {showWordmark && (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
          <div
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 400,
              fontSize: width * 0.16,
              letterSpacing: width * 0.012,
              color: ink,
              lineHeight: 1.1,
            }}
          >
            KARRIE 29
          </div>
          <div style={{ width: '78%', height: 0.9, background: ink, margin: `${width * 0.035}px 0`, opacity: 0.65 }} />
          <div
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 400,
              fontSize: width * 0.085,
              letterSpacing: width * 0.028,
              color: ink,
              lineHeight: 1.1,
            }}
          >
            INTERIORS
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Icon, RoomPlaceholder, PortraitPlaceholder, KarrieLogo });