// ──────────────────────────────────────────────────────────────────────────
// Logo proposals for Simsalabim Solutions — three distinct directions.
// Each direction exports a few sub-components for variants & mockups.
// ──────────────────────────────────────────────────────────────────────────

/* ─── DIRECTION A — STARDUST ────────────────────────────────────────────────
   Playful & magical. A four-point sparkle in a purple→magenta gradient,
   paired with a soft geometric wordmark. Friendly, modern, a touch of magic.
─────────────────────────────────────────────────────────────────────────── */

const stardustGradient = (id, c1, c2) => (
  <defs>
    <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%"   stopColor={c1} />
      <stop offset="100%" stopColor={c2} />
    </linearGradient>
  </defs>
);

// A four-point twinkle, geometric — slim diamonds meeting at center.
function StardustMark({ size = 96, gradientId = "sd-grad", fill, mono = false }) {
  const g = mono ? null : stardustGradient(gradientId, "#7C3AED", "#EC4899");
  const F = fill || (mono ? "currentColor" : `url(#${gradientId})`);
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} aria-label="Simsalabim Solutions mark">
      {g}
      {/* primary 4-point sparkle */}
      <path d="M50 4 C 52 30, 58 36, 96 50 C 58 64, 52 70, 50 96 C 48 70, 42 64, 4 50 C 42 36, 48 30, 50 4 Z" fill={F}/>
      {/* tiny secondary sparkle */}
      <path d="M84 12 C 84.6 19, 86.4 20.4, 94 22 C 86.4 23.6, 84.6 25, 84 32 C 83.4 25, 81.6 23.6, 74 22 C 81.6 20.4, 83.4 19, 84 12 Z"
            fill={F} opacity={mono ? 0.6 : 0.85}/>
    </svg>
  );
}

function StardustWordmark({ height = 56, color = "#111", solutionsColor }) {
  const sc = solutionsColor || color;
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: height * 0.28, lineHeight: 1 }}>
      <span style={{
        fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
        fontWeight: 700, fontSize: height, color, letterSpacing: "-0.025em",
        fontVariationSettings: "'wdth' 100",
      }}>simsalabim</span>
      <span style={{
        fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
        fontWeight: 500, fontSize: height * 0.38, color: sc,
        letterSpacing: "0.22em", textTransform: "uppercase",
      }}>solutions</span>
    </div>
  );
}

function StardustLockup({ markSize = 88, wordHeight = 56, mono = false, dark = false }) {
  const color = dark ? "#fff" : "#111";
  const solColor = dark ? "rgba(255,255,255,0.55)" : "rgba(0,0,0,0.55)";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: markSize * 0.32 }}>
      <StardustMark size={markSize} mono={mono} fill={mono ? color : undefined} gradientId={`sd-${markSize}-${dark}`}/>
      <StardustWordmark height={wordHeight} color={color} solutionsColor={solColor}/>
    </div>
  );
}

/* ─── DIRECTION B — CABINET ─────────────────────────────────────────────────
   Sophisticated magic. A circular emblem with a serif S and a small star,
   reminiscent of vintage illusionist posters / a magician's wax seal.
   Deep navy + warm gold.
─────────────────────────────────────────────────────────────────────────── */

function CabinetMark({ size = 120, dark = false, mono = false }) {
  const ink   = mono ? "currentColor" : (dark ? "#F5EFE0" : "#0B1437");
  const accent = mono ? "currentColor" : "#D4A24C";
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} aria-label="Simsalabim Solutions emblem">
      {/* outer ring */}
      <circle cx="60" cy="60" r="56" fill="none" stroke={ink} strokeWidth="2"/>
      {/* inner thin ring */}
      <circle cx="60" cy="60" r="50" fill="none" stroke={ink} strokeWidth="0.7"/>
      {/* tiny dots on the ring at cardinal points */}
      {[0, 90, 180, 270].map((d) => {
        const r = (d * Math.PI) / 180;
        const cx = 60 + Math.cos(r) * 53;
        const cy = 60 + Math.sin(r) * 53;
        return <circle key={d} cx={cx} cy={cy} r="1.4" fill={ink}/>;
      })}
      {/* serif S */}
      <text
        x="60" y="74"
        textAnchor="middle"
        fontFamily="'Cormorant Garamond', 'Playfair Display', Georgia, serif"
        fontWeight={500}
        fontSize="58"
        fill={ink}
        fontStyle="italic"
      >S</text>
      {/* small star above */}
      <g transform="translate(60 22)">
        <path d="M0 -6 L1.3 -1.3 L6 0 L1.3 1.3 L0 6 L-1.3 1.3 L-6 0 L-1.3 -1.3 Z" fill={accent}/>
      </g>
      {/* tiny stars beside the S */}
      <g fill={accent} opacity="0.9">
        <path transform="translate(30 60)" d="M0 -3 L0.7 -0.7 L3 0 L0.7 0.7 L0 3 L-0.7 0.7 L-3 0 L-0.7 -0.7 Z"/>
        <path transform="translate(90 60)" d="M0 -3 L0.7 -0.7 L3 0 L0.7 0.7 L0 3 L-0.7 0.7 L-3 0 L-0.7 -0.7 Z"/>
      </g>
    </svg>
  );
}

function CabinetWordmark({ height = 48, dark = false, mono = false }) {
  const ink = mono ? "currentColor" : (dark ? "#F5EFE0" : "#0B1437");
  const sub = mono ? "currentColor" : (dark ? "#D4A24C" : "#9A7430");
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 1, gap: height * 0.18 }}>
      <div style={{
        fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif",
        fontWeight: 500, fontSize: height, color: ink,
        letterSpacing: "0.18em", textTransform: "uppercase",
      }}>Simsalabim</div>
      <div style={{
        display: "flex", alignItems: "center", gap: height * 0.3,
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontWeight: 500, fontSize: height * 0.32, color: sub,
        letterSpacing: "0.5em", textTransform: "uppercase",
      }}>
        <span style={{ width: height * 0.6, height: 1, background: sub }}/>
        <span>Solutions</span>
        <span style={{ width: height * 0.6, height: 1, background: sub }}/>
      </div>
    </div>
  );
}

function CabinetLockup({ orientation = "stacked", markSize = 110, wordHeight = 42, dark = false, mono = false }) {
  if (orientation === "horizontal") {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: markSize * 0.28 }}>
        <CabinetMark size={markSize} dark={dark} mono={mono}/>
        <CabinetWordmark height={wordHeight} dark={dark} mono={mono}/>
      </div>
    );
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: markSize * 0.22 }}>
      <CabinetMark size={markSize} dark={dark} mono={mono}/>
      <CabinetWordmark height={wordHeight} dark={dark} mono={mono}/>
    </div>
  );
}

/* ─── DIRECTION C — BRACKET ─────────────────────────────────────────────────
   Modern technical. A curly-brace mark with a sparkle inside — "code that
   does magic". Geometric sans, indigo accent.
─────────────────────────────────────────────────────────────────────────── */

function BracketMark({ size = 96, dark = false, mono = false, color }) {
  const ink   = color || (mono ? "currentColor" : (dark ? "#FFFFFF" : "#0F172A"));
  const accent = mono ? ink : "#4F46E5";
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} aria-label="Simsalabim Solutions bracket mark">
      {/* left curly brace */}
      <path
        d="M40 14
           C 30 14, 26 20, 26 30
           L 26 50
           C 26 58, 22 60, 16 60
           C 22 60, 26 62, 26 70
           L 26 90
           C 26 100, 30 106, 40 106"
        fill="none" stroke={ink} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round"
      />
      {/* right curly brace */}
      <path
        d="M80 14
           C 90 14, 94 20, 94 30
           L 94 50
           C 94 58, 98 60, 104 60
           C 98 60, 94 62, 94 70
           L 94 90
           C 94 100, 90 106, 80 106"
        fill="none" stroke={ink} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round"
      />
      {/* sparkle in the middle */}
      <path d="M60 36 C 61.5 54, 64 56.5, 80 60 C 64 63.5, 61.5 66, 60 84 C 58.5 66, 56 63.5, 40 60 C 56 56.5, 58.5 54, 60 36 Z"
            fill={accent}/>
    </svg>
  );
}

function BracketWordmark({ height = 52, dark = false, mono = false, accentColor }) {
  const ink = mono ? "currentColor" : (dark ? "#FFFFFF" : "#0F172A");
  const accent = mono ? ink : (accentColor || "#4F46E5");
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: height * 0.22, lineHeight: 1 }}>
      <span style={{
        fontFamily: "'Space Grotesk', 'Inter', system-ui, sans-serif",
        fontWeight: 600, fontSize: height, color: ink, letterSpacing: "-0.035em",
      }}>
        simsalabim<span style={{ color: accent }}>.</span>solutions
      </span>
    </div>
  );
}

function BracketLockup({ markSize = 88, wordHeight = 50, dark = false, mono = false }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: markSize * 0.3 }}>
      <BracketMark size={markSize} dark={dark} mono={mono}/>
      <BracketWordmark height={wordHeight} dark={dark} mono={mono}/>
    </div>
  );
}

// Make available to other scripts
Object.assign(window, {
  StardustMark, StardustWordmark, StardustLockup,
  CabinetMark, CabinetWordmark, CabinetLockup,
  BracketMark, BracketWordmark, BracketLockup,
});