// FtiMind brand mark + wordmark.
//
// Symbol: a leaf shape (nutrición) whose midrib is a heartbeat pulse line
// (deporte). Two-tone, scalable, picks up the parent text color through
// `currentColor` so it adapts to light/dark themes.
//
// Usage:
//   <Mark size={32} />                           // symbol only
//   <Wordmark size={20} />                       // text only
//   <Logo size={28} />                           // mark + wordmark side by side
//
// All components are pure presentational — no state, no API calls.

const Mark = ({ size = 32, accent = "#5EEAD4" }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    style={{ display: "block" }}
  >
    <defs>
      <linearGradient id="fm-leaf" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor={accent} stopOpacity="0.45" />
        <stop offset="100%" stopColor={accent} stopOpacity="0.05" />
      </linearGradient>
    </defs>
    {/* Leaf body */}
    <path
      d="M 15.6 3.6 C 7.8 5.4 3.6 13.2 4.6 21.6 C 13 23.6 22.4 20.6 27.6 11.6 C 24.6 6.8 20 4 15.6 3.6 Z"
      fill="url(#fm-leaf)"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    {/* Stem hint */}
    <path
      d="M 5.2 22.4 L 7.8 19.6"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      opacity="0.6"
    />
    {/* Pulse / heartbeat as the leaf's midrib */}
    <path
      d="M 8.4 18.8 L 11 18.8 L 12.8 14 L 15.4 24 L 18.4 10 L 21 18.8 L 24.6 16.4"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
  </svg>
);

const Wordmark = ({ size = 18, weight = 600 }) => (
  // Two-tone wordmark. "Fti" sólida, "Mind" en text-2 para sugerir IA/asesor.
  <span
    style={{
      fontFamily: "var(--font-sans, 'Geist', system-ui, sans-serif)",
      fontWeight: weight,
      fontSize: size,
      letterSpacing: "-0.01em",
      lineHeight: 1,
      whiteSpace: "nowrap",
    }}
  >
    <span style={{ color: "currentColor" }}>Fti</span>
    <span style={{ color: "var(--text-2, currentColor)", opacity: 0.78 }}>Mind</span>
  </span>
);

const Logo = ({ size = 28, gap = 8, accent }) => (
  <div style={{ display: "inline-flex", alignItems: "center", gap }}>
    <Mark size={size} accent={accent} />
    <Wordmark size={size * 0.6} />
  </div>
);

window.FtiMindLogo = { Mark, Wordmark, Logo };