/* ============================================
   CareNav — Logo System (React components)
   Mark: continuous-path Cn monogram (master path).
   Source: 2A_forest_mark_transparent_master.svg
   ============================================ */

/* Master path — DO NOT alter. Drawn on a 140×100 viewBox.
   Stroke: 15.2, round caps + round joins. */
const CN_MARK_PATH = "M 72 18 C 60 11, 43 12, 31 24 C 18 37, 17 58, 31 72 C 43 84, 64 82, 74 68 C 81 58, 80 44, 91 37 C 103 29, 121 37, 121 56 L 121 76";
const CN_MARK_VB = { w: 140, h: 100 };
const CN_MARK_STROKE = 15.2;

window.CNLogoMark = function CNLogoMark({
  size = 96,
  color = "var(--cn-forest-700)",
  title = "CareNav mark",
}) {
  // Width-based sizing; height derives from the 140:100 aspect.
  const w = size;
  const h = size * (CN_MARK_VB.h / CN_MARK_VB.w);
  return (
    <svg
      viewBox={`0 0 ${CN_MARK_VB.w} ${CN_MARK_VB.h}`}
      width={w}
      height={h}
      role="img"
      aria-label={title}
      style={{ display: 'block', overflow: 'visible' }}
    >
      <title>{title}</title>
      <path
        d={CN_MARK_PATH}
        fill="none"
        stroke={color}
        strokeWidth={CN_MARK_STROKE}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

/* Solid tile version — mark reversed out on a colored rounded square.
   Used for app icons, favicons, avatars, social profile images. */
window.CNLogoTile = function CNLogoTile({
  size = 96,
  bg = "var(--cn-forest-700)",
  fg = "#FFFFFF",
  radius = 0.05, // fraction of size — matches master 7/140 ratio
  shadow = false,
}) {
  // The master tile is 160×160 with a 7px radius — gentle, almost squared.
  // Mark is offset (10, 27) and sized to 121 max-x of the inner 140.
  // We replicate that proportional layout.
  const r = size * radius;
  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius: r,
        background: bg,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexShrink: 0,
        boxShadow: shadow ? 'var(--cn-shadow-md)' : 'none',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <CNLogoMark size={size * 0.78} color={fg} />
    </div>
  );
};

/* Coral tile with cut-out mark — replicates 2C master.
   The mark is masked OUT, revealing whatever is behind. */
window.CNLogoTileCutout = function CNLogoTileCutout({
  size = 96,
  bg = "var(--cn-coral-600)",
  radius = 0.05,
}) {
  // Inline SVG so the mask works regardless of stacking context.
  const id = React.useId();
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 160 160"
      role="img"
      aria-label="CareNav app icon"
      style={{ display: 'block' }}
    >
      <defs>
        <mask id={id} maskUnits="userSpaceOnUse" x="0" y="0" width="160" height="160">
          <rect x="0" y="0" width="160" height="160" rx={size * radius * (160 / size)} ry={size * radius * (160 / size)} fill="white"/>
          <g transform="translate(10,27)">
            <path
              d={CN_MARK_PATH}
              fill="none"
              stroke="black"
              strokeWidth={CN_MARK_STROKE}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </g>
        </mask>
      </defs>
      <rect x="0" y="0" width="160" height="160" rx={size * radius * (160 / size)} ry={size * radius * (160 / size)} fill={bg} mask={`url(#${id})`}/>
    </svg>
  );
};

window.CNLogoLockup = function CNLogoLockup({
  size = 48,
  color = "var(--cn-forest-700)",
  taglineColor = "var(--cn-coral-600)",
  layout = "horizontal", // "horizontal" | "stacked" | "horizontal-divider"
  showTagline = false,
  tagline = "Guided care, together.",
}) {
  const wordmark = (
    <div style={{ display: 'flex', flexDirection: 'column', gap: size * 0.06, lineHeight: 1 }}>
      <div style={{
        fontFamily: 'var(--cn-font-display)',
        fontWeight: 400,
        fontSize: size * 1.0,
        letterSpacing: '-0.01em',
        lineHeight: 0.95,
        color,
      }}>
        CareNav
      </div>
      {showTagline && (
        <div style={{
          fontFamily: 'var(--cn-font-display)',
          fontStyle: 'italic',
          fontWeight: 400,
          fontSize: size * 0.36,
          lineHeight: 1.1,
          color: taglineColor,
          letterSpacing: '0',
        }}>
          {tagline}
        </div>
      )}
    </div>
  );

  // Mark is wider than tall (1.4:1) — sizes are tuned per layout.
  if (layout === "stacked") {
    return (
      <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: size * 0.3 }}>
        <CNLogoMark size={size * 2.0} color={color}/>
        <div style={{ textAlign: 'center' }}>{wordmark}</div>
      </div>
    );
  }

  if (layout === "horizontal-divider") {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.5 }}>
        <CNLogoMark size={size * 1.7} color={color}/>
        <div style={{
          width: 1,
          alignSelf: 'stretch',
          background: 'currentColor',
          opacity: 0.25,
          color,
        }}/>
        {wordmark}
      </div>
    );
  }

  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.4 }}>
      <CNLogoMark size={size * 1.5} color={color}/>
      {wordmark}
    </div>
  );
};