// logo.jsx
// Brand mark + lockup using the real PNG logo.
// - <LogoMark /> shows just the tooth+A on any background
// - <LogoLockup /> shows the full lockup (mark + wordmark) — best on cream
// - <ToothMonogram /> is the SVG fallback kept for use cases where we want a tighter,
//   monochrome version (e.g. small footer corner, scaling animations)

const { useId } = React;

function LogoMark({ size = 88, alt = 'Dental Avenue' }) {
  return (
    <img
      src="assets/dental-avenue-mark.png"
      alt={alt}
      style={{
        width: size,
        height: 'auto',
        display: 'block',
        filter: 'drop-shadow(0 4px 14px rgba(201,165,91,.18))',
        userSelect: 'none',
      }}
      draggable={false}
    />
  );
}

function LogoLockup({ width = 480, alt = 'Dental Avenue · Advanced Dental Care', invert = false }) {
  return (
    <img
      src={invert ? 'assets/dental-avenue-mark.png' : 'assets/dental-avenue-full.png'}
      alt={alt}
      style={{
        width,
        height: 'auto',
        display: 'block',
        userSelect: 'none',
      }}
      draggable={false}
    />
  );
}

// Kept as fallback/decorative SVG monogram for cases needing scalable, mono-color rendering
function ToothMonogram({ size = 120, stroke = 1.6, color = 'var(--gold)', accent = 'var(--gold-light)', sheen = true }) {
  const id = useId();
  return (
    <svg width={size} height={size * 1.08} viewBox="0 0 200 220" fill="none" style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id={`g-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"  stopColor={accent} />
          <stop offset="50%" stopColor={color} />
          <stop offset="100%" stopColor="var(--gold-deep)" />
        </linearGradient>
        <linearGradient id={`g2-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"  stopColor={accent} />
          <stop offset="100%" stopColor={color} />
        </linearGradient>
      </defs>

      {/* Single clean tooth outline — molar silhouette, two bumps on top, tapering roots */}
      <path
        d="
          M 60 32
          C 36 28, 22 48, 32 80
          C 38 98, 42 116, 44 138
          C 46 162, 54 188, 70 202
          C 86 214, 96 198, 100 178
          C 104 198, 114 214, 130 202
          C 146 188, 154 162, 156 138
          C 158 116, 162 98, 168 80
          C 178 48, 164 28, 140 32
          C 122 34, 112 48, 100 56
          C 88 48, 78 34, 60 32 Z
        "
        stroke={`url(#g-${id})`}
        strokeWidth={stroke}
        strokeLinejoin="round"
        strokeLinecap="round"
        fill="none"
      />

      {/* "A" — clean Cinzel uppercase, centered */}
      <text
        x="100"
        y="148"
        textAnchor="middle"
        fontFamily="'Cinzel', serif"
        fontSize="92"
        fontWeight="500"
        fill={`url(#g2-${id})`}
        style={{ letterSpacing: '0.02em' }}
      >
        A
      </text>

      {sheen && (
        <path
          d="M 44 56 C 80 38, 120 38, 156 56"
          stroke="rgba(255,255,255,.4)"
          strokeWidth="0.6"
          fill="none"
        />
      )}
    </svg>
  );
}

// Smaller leaf accent used as a typographic ornament (kept understated)
function LeafOrnament({ size = 18, color = 'var(--gold)' }) {
  return (
    <svg width={size} height={size * 0.5} viewBox="0 0 40 20" fill="none">
      <path d="M2 10 C 10 4, 18 4, 20 10 C 22 4, 30 4, 38 10 C 30 16, 22 16, 20 10 C 18 16, 10 16, 2 10 Z"
            fill={color} opacity="0.85" />
    </svg>
  );
}

// Subtle botanical sprig (corner accent)
function Sprig({ size = 220, color = 'var(--gold)', opacity = 0.22 }) {
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 220 260" fill="none" style={{ opacity }}>
      <path d="M 110 250 Q 100 180, 70 130 Q 50 90, 60 30"
            stroke={color} strokeWidth="0.8" fill="none" />
      {[[90, 200, 30, -20], [76, 170, 28, 25], [70, 140, 32, -25],
        [62, 110, 28, 30], [62, 80, 26, -22], [60, 50, 24, 28]].map(([cx, cy, r, rot], i) => (
        <g key={i} transform={`translate(${cx} ${cy}) rotate(${rot})`}>
          <path d={`M 0 0 C ${r*0.6} ${-r*0.5}, ${r*1.2} ${-r*0.2}, ${r*1.4} 0
                     C ${r*1.2} ${r*0.2}, ${r*0.6} ${r*0.5}, 0 0 Z`}
                fill={color} opacity="0.5" />
        </g>
      ))}
      <path d="M 110 250 Q 130 200, 150 160 Q 170 120, 165 70"
            stroke={color} strokeWidth="0.8" fill="none" opacity="0.7" />
      {[[140, 220, 22, 18], [148, 195, 24, -25], [156, 165, 26, 22],
        [162, 135, 24, -28], [164, 105, 22, 25]].map(([cx, cy, r, rot], i) => (
        <g key={i} transform={`translate(${cx} ${cy}) rotate(${rot})`}>
          <path d={`M 0 0 C ${r*0.6} ${-r*0.5}, ${r*1.2} ${-r*0.2}, ${r*1.4} 0
                     C ${r*1.2} ${r*0.2}, ${r*0.6} ${r*0.5}, 0 0 Z`}
                fill={color} opacity="0.4" />
        </g>
      ))}
    </svg>
  );
}

function GoldWave({ height = 120, flip = false, fillTop = 'var(--cream)', fillBottom = 'var(--navy)' }) {
  return (
    <svg width="100%" height={height} viewBox="0 0 1440 140" preserveAspectRatio="none"
         style={{ display: 'block', transform: flip ? 'scaleY(-1)' : 'none' }}>
      <path d="M 0 0 L 1440 0 L 1440 70 C 1100 130, 700 30, 380 80 C 200 110, 80 100, 0 90 Z"
            fill={fillTop} />
      <path d="M 0 90 C 80 100, 200 110, 380 80 C 700 30, 1100 130, 1440 70 L 1440 80 C 1100 138, 700 38, 380 88 C 200 118, 80 108, 0 98 Z"
            fill="var(--gold)" opacity="0.9" />
      <path d="M 0 98 C 80 108, 200 118, 380 88 C 700 38, 1100 138, 1440 80 L 1440 140 L 0 140 Z"
            fill={fillBottom} />
    </svg>
  );
}

Object.assign(window, { LogoMark, LogoLockup, ToothMonogram, LeafOrnament, Sprig, GoldWave });