// Logo.jsx — Blind Vision mark
// True to source: rounded-square frame, four quarter-cells with rounded inner
// corners, white channel cross dividing them. The negative space inverts into
// a soft four-point star that becomes the focal "vision" glyph.

function BVLogo({ size = 56, variant = 'default', glow = true }) {
  const id = React.useId().replace(/:/g, '');

  // Each variant tunes the four cell colors + star treatment.
  const variants = {
    // Faithful to the original — soft sky/butter palette
    default: {
      tl: ['#A8CDEA', '#6FA5D2'],
      tr: ['#FAE093', '#EFC04D'],
      bl: ['#BCD9EC', '#7FB1D0'],
      br: ['#A6C7E5', '#6FA0CB'],
      starA: '#FFFCF0', starB: '#E6EEF7',
      bg: 'transparent',
    },
    // All four corners distinct
    spectrum: {
      tl: ['#FAE093', '#EFC04D'],
      tr: ['#A8CDEA', '#6FA5D2'],
      bl: ['#FFC8AC', '#FF8E5A'],
      br: ['#CDB9FF', '#8F75FF'],
      starA: '#FFFCF0', starB: '#EDE5D2',
      bg: 'transparent',
    },
    // Bold contrast: dark cells with luminous star
    night: {
      tl: ['#1B2B47', '#0E1828'],
      tr: ['#3A2D5A', '#1F1738'],
      bl: ['#10243D', '#081428'],
      br: ['#2A1E48', '#170E2C'],
      starA: '#FFE89B', starB: '#FFB36E',
      bg: '#0B0A0E',
    },
    // Mono — single ink, useful for footers / favicons
    mono: {
      tl: ['currentColor', 'currentColor'],
      tr: ['currentColor', 'currentColor'],
      bl: ['currentColor', 'currentColor'],
      br: ['currentColor', 'currentColor'],
      starA: '#fff', starB: '#fff',
      bg: 'transparent',
    },
  };
  const v = variants[variant] || variants.default;

  // Geometry — drawn on 240×240. Outer rounded square; cells separated by a
  // white channel cross; central four-point star sits over the channel
  // intersection.
  const SZ = 240;
  const PAD = 8;
  const OUTER_R = 36;
  const CHANNEL = 12;
  const cx = SZ / 2;
  const cy = SZ / 2;

  // Soft four-point star path. Cardinal tips at distance R from center;
  // smooth concave curves between via cubic beziers with control points
  // pulled toward center.
  const STAR = (() => {
    const R = 88;        // tip distance
    const C = 30;        // inner control offset (smaller = sharper waist)
    const top = [cx, cy - R];
    const right = [cx + R, cy];
    const bot = [cx, cy + R];
    const left = [cx - R, cy];
    return [
      `M ${top[0]} ${top[1]}`,
      `C ${cx + C} ${cy - C}, ${cx + C} ${cy - C}, ${right[0]} ${right[1]}`,
      `C ${cx + C} ${cy + C}, ${cx + C} ${cy + C}, ${bot[0]} ${bot[1]}`,
      `C ${cx - C} ${cy + C}, ${cx - C} ${cy + C}, ${left[0]} ${left[1]}`,
      `C ${cx - C} ${cy - C}, ${cx - C} ${cy - C}, ${top[0]} ${top[1]} Z`,
    ].join(' ');
  })();

  return (
    <svg width={size} height={size} viewBox={`0 0 ${SZ} ${SZ}`}
         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Blind Vision">
      <defs>
        <linearGradient id={`tl-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={v.tl[0]} />
          <stop offset="100%" stopColor={v.tl[1]} />
        </linearGradient>
        <linearGradient id={`tr-${id}`} x1="1" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={v.tr[0]} />
          <stop offset="100%" stopColor={v.tr[1]} />
        </linearGradient>
        <linearGradient id={`bl-${id}`} x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stopColor={v.bl[0]} />
          <stop offset="100%" stopColor={v.bl[1]} />
        </linearGradient>
        <linearGradient id={`br-${id}`} x1="1" y1="1" x2="0" y2="0">
          <stop offset="0%" stopColor={v.br[0]} />
          <stop offset="100%" stopColor={v.br[1]} />
        </linearGradient>
        <linearGradient id={`star-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={v.starA} />
          <stop offset="100%" stopColor={v.starB} />
        </linearGradient>
        <radialGradient id={`shine-${id}`} cx="50%" cy="35%" r="55%">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.7" />
          <stop offset="70%" stopColor="#fff" stopOpacity="0" />
        </radialGradient>

        {/* Per-cell clip paths: each is a quadrant of the rounded outer square,
            inset on the inner edges by half the channel width. */}
        <clipPath id={`cell-tl-${id}`}>
          <path d={`M ${PAD} ${PAD + OUTER_R}
                    Q ${PAD} ${PAD}, ${PAD + OUTER_R} ${PAD}
                    L ${cx - CHANNEL / 2} ${PAD}
                    L ${cx - CHANNEL / 2} ${cy - CHANNEL / 2}
                    L ${PAD} ${cy - CHANNEL / 2} Z`} />
        </clipPath>
        <clipPath id={`cell-tr-${id}`}>
          <path d={`M ${cx + CHANNEL / 2} ${PAD}
                    L ${SZ - PAD - OUTER_R} ${PAD}
                    Q ${SZ - PAD} ${PAD}, ${SZ - PAD} ${PAD + OUTER_R}
                    L ${SZ - PAD} ${cy - CHANNEL / 2}
                    L ${cx + CHANNEL / 2} ${cy - CHANNEL / 2} Z`} />
        </clipPath>
        <clipPath id={`cell-bl-${id}`}>
          <path d={`M ${PAD} ${cy + CHANNEL / 2}
                    L ${cx - CHANNEL / 2} ${cy + CHANNEL / 2}
                    L ${cx - CHANNEL / 2} ${SZ - PAD}
                    L ${PAD + OUTER_R} ${SZ - PAD}
                    Q ${PAD} ${SZ - PAD}, ${PAD} ${SZ - PAD - OUTER_R} Z`} />
        </clipPath>
        <clipPath id={`cell-br-${id}`}>
          <path d={`M ${cx + CHANNEL / 2} ${cy + CHANNEL / 2}
                    L ${SZ - PAD} ${cy + CHANNEL / 2}
                    L ${SZ - PAD} ${SZ - PAD - OUTER_R}
                    Q ${SZ - PAD} ${SZ - PAD}, ${SZ - PAD - OUTER_R} ${SZ - PAD}
                    L ${cx + CHANNEL / 2} ${SZ - PAD} Z`} />
        </clipPath>

        {glow && (
          <filter id={`glow-${id}`} x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="2.5" result="b" />
            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
        )}
      </defs>

      {v.bg !== 'transparent' && (
        <rect x={PAD - 4} y={PAD - 4}
              width={SZ - 2 * (PAD - 4)} height={SZ - 2 * (PAD - 4)}
              rx={OUTER_R + 4} fill={v.bg} />
      )}

      {/* Four cells */}
      <g>
        <rect width={SZ} height={SZ} fill={`url(#tl-${id})`} clipPath={`url(#cell-tl-${id})`} />
        <rect width={SZ} height={SZ} fill={`url(#tr-${id})`} clipPath={`url(#cell-tr-${id})`} />
        <rect width={SZ} height={SZ} fill={`url(#bl-${id})`} clipPath={`url(#cell-bl-${id})`} />
        <rect width={SZ} height={SZ} fill={`url(#br-${id})`} clipPath={`url(#cell-br-${id})`} />
      </g>

      {/* Central four-point star — the "vision" glyph */}
      <g filter={glow ? `url(#glow-${id})` : undefined}>
        <path d={STAR} fill={`url(#star-${id})`} />
        <path d={STAR} fill={`url(#shine-${id})`} opacity="0.55" />
      </g>
    </svg>
  );
}

function BVLockup({ size = 36, color = 'inherit', subtle = false, variant = 'default' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color }}>
      <BVLogo size={size} glow={!subtle} variant={variant} />
      <span style={{
        fontFamily: '"Fraunces", "Cormorant Garamond", Georgia, serif',
        fontWeight: 500,
        fontSize: size * 0.5,
        letterSpacing: '-0.02em',
        lineHeight: 1,
        fontStyle: 'italic',
      }}>
        <span style={{ fontWeight: 400 }}>blind</span>
        <span style={{ fontWeight: 600, marginLeft: 2 }}>vision</span>
      </span>
    </div>
  );
}

Object.assign(window, { BVLogo, BVLockup });