// Logo system — Artesanías Chepe
// Marca pictórica: henequén (agave yucateco) abstracto + monograma "C"
// Pareado con wordmark "Chepe" en cursiva.

// ---------- MARK (icon only) ----------
const Mark = ({ size = 48, color = "currentColor", strokeWidth = 3, variant = "henequen" }) => {
  const s = size;
  const sw = strokeWidth;
  if (variant === "henequen") {
    // Three henequén leaves rising from a single base point. Center leaf
    // vertical, two side leaves angled out. Subtle inner highlights.
    return (
      <svg width={s} height={s} viewBox="0 0 100 100" fill="none">
        <g stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
          {/* Base — small horizontal */}
          <path d="M40 86 L60 86" />
          {/* Center leaf */}
          <path d="M50 86 L50 14" />
          <path d="M50 30 L46 36 M50 30 L54 36" />
          {/* Left leaf */}
          <path d="M50 86 C 42 70 32 50 22 30" />
          <path d="M28 40 L26 46 M28 40 L32 42" />
          {/* Right leaf */}
          <path d="M50 86 C 58 70 68 50 78 30" />
          <path d="M72 40 L74 46 M72 40 L68 42" />
        </g>
      </svg>
    );
  }
  if (variant === "monogram") {
    // Circle frame + cursive "C" + one horizontal weave thread through it.
    return (
      <svg width={s} height={s} viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="44" stroke={color} strokeWidth={sw * 0.6} />
        {/* Cursive C */}
        <path d="M72 32 C 60 22, 38 26, 30 42 C 24 56, 32 72, 48 76 C 60 79, 70 74, 76 66"
              stroke={color} strokeWidth={sw} strokeLinecap="round" fill="none" />
        {/* Weave thread */}
        <path d="M12 52 L88 52" stroke={color} strokeWidth={sw * 0.7} strokeLinecap="round" opacity="0.35" />
      </svg>
    );
  }
  if (variant === "woven") {
    // Abstracted woven cross — two strands crossing, in a circle.
    return (
      <svg width={s} height={s} viewBox="0 0 100 100" fill="none">
        <g stroke={color} strokeWidth={sw} strokeLinecap="round" fill="none">
          <circle cx="50" cy="50" r="44" strokeWidth={sw * 0.5} />
          <path d="M22 42 C 38 42, 62 58, 78 58" />
          <path d="M22 58 C 38 58, 62 42, 78 42" />
          <path d="M42 22 C 42 38, 58 62, 58 78" />
          <path d="M58 22 C 58 38, 42 62, 42 78" />
        </g>
      </svg>
    );
  }
  if (variant === "sun") {
    // Yucatecan sun — radial rays of varying lengths.
    return (
      <svg width={s} height={s} viewBox="0 0 100 100" fill="none">
        <g stroke={color} strokeWidth={sw} strokeLinecap="round">
          <circle cx="50" cy="50" r="14" />
          {Array.from({ length: 12 }).map((_, i) => {
            const a = (i * 30 * Math.PI) / 180;
            const r1 = 22, r2 = i % 2 === 0 ? 38 : 32;
            return (
              <line key={i}
                x1={50 + Math.cos(a) * r1} y1={50 + Math.sin(a) * r1}
                x2={50 + Math.cos(a) * r2} y2={50 + Math.sin(a) * r2} />
            );
          })}
        </g>
      </svg>
    );
  }
  return null;
};

// ---------- LOCKUP (mark + wordmark) ----------
// orientation: "stacked" (default), "horizontal", "integrated", "mark-only", "wordmark-only"
const Lockup = ({
  size = 48,                 // mark size
  wordSize = null,           // wordmark size (auto if null)
  color,                     // "ink" | "bone" | "clay" | css color
  orientation = "stacked",
  variant = "henequen",
  showTagline = true,
  shopName = "Chepe",        // "Chepe" or "Chepe's" / "Chepes"
}) => {
  const palette = {
    ink:  "var(--ink)",
    bone: "var(--bone)",
    clay: "var(--clay)",
  };
  const c = palette[color] || color || "var(--ink)";
  const sub = color === "bone" ? "color-mix(in srgb, var(--bone) 65%, transparent)" : "var(--ink-60)";
  const ws = wordSize || (size * 0.9);

  if (orientation === "mark-only") {
    return <Mark size={size} color={c} variant={variant} />;
  }
  if (orientation === "wordmark-only") {
    return <span className="logo-chepe" style={{ fontSize: ws, color: c }}>{shopName}</span>;
  }

  // ----- INTEGRATED — "Artesanías Chepe" como una sola unidad tipográfica
  if (orientation === "integrated") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.34 }}>
        <Mark size={size} color={c} variant={variant} />
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 0.95, letterSpacing: "-0.005em" }}>
          <span style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: ws * 0.42, color: c,
            letterSpacing: "0.04em",
            whiteSpace: "nowrap",
          }}>Artesanías</span>
          <span className="logo-chepe" style={{ fontSize: ws, color: c, whiteSpace: "nowrap", marginTop: ws * -0.08 }}>{shopName}</span>
        </div>
      </div>
    );
  }

  // ----- HORIZONTAL — mark + stacked wordmark (Artesanías prominente)
  if (orientation === "horizontal") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.32 }}>
        <Mark size={size} color={c} variant={variant} />
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 0.95 }}>
          <span style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: ws * 0.36, color: c,
            letterSpacing: "0.03em",
            whiteSpace: "nowrap",
            marginBottom: ws * 0.06,
          }}>Artesanías</span>
          <span className="logo-chepe" style={{ fontSize: ws, color: c, whiteSpace: "nowrap" }}>{shopName}</span>
          {showTagline && (
            <span className="mono" style={{
              fontSize: Math.max(7, ws * 0.14), letterSpacing: "0.32em",
              textTransform: "uppercase", color: sub, marginTop: ws * 0.14,
              whiteSpace: "nowrap",
            }}>Mérida · Yucatán</span>
          )}
        </div>
      </div>
    );
  }

  // ----- STACKED (default — vertical lockup)
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", lineHeight: 0.95, maxWidth: "100%" }}>
      <Mark size={size} color={c} variant={variant} />
      <span style={{
        fontFamily: "var(--serif)", fontWeight: 500,
        fontSize: ws * 0.4, color: c,
        letterSpacing: "0.04em",
        marginTop: size * 0.36, marginBottom: ws * 0.06,
        whiteSpace: "nowrap",
      }}>Artesanías</span>
      <span className="logo-chepe" style={{ fontSize: ws, color: c, whiteSpace: "nowrap" }}>{shopName}</span>
      {showTagline && (
        <span className="mono" style={{
          fontSize: Math.max(7, ws * 0.14), letterSpacing: "0.34em",
          textTransform: "uppercase", color: sub, marginTop: ws * 0.22,
          whiteSpace: "nowrap",
        }}>Mérida · Yucatán · MX</span>
      )}
    </div>
  );
};

window.Mark   = Mark;
window.Lockup = Lockup;