// SVG motifs for Falta Palta — subtle avocado/seed shapes used as design accents.

function AvocadoMark({ size = 28, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 40" fill="none" style={style} aria-hidden="true">
      <path
        d="M16 1.6c-7 0-12.4 6.4-12.4 14.6 0 8.6 5 21.6 12.4 21.6S28.4 24.8 28.4 16.2C28.4 8 23 1.6 16 1.6Z"
        fill="none" stroke="currentColor" strokeWidth="1.4"
      />
      <circle cx="16" cy="22" r="5.6" fill="currentColor" opacity="0.9" />
    </svg>
  );
}

function SeedShape({ size = 200, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 240" style={style} aria-hidden="true">
      <ellipse cx="100" cy="120" rx="80" ry="100" fill="currentColor" />
    </svg>
  );
}

function HalfAvocado({ size = 320, style }) {
  const s = size;
  return (
    <svg width={s} height={s * 1.25} viewBox="0 0 320 400" style={style} aria-hidden="true">
      <defs>
        <clipPath id="fp-avo-clip">
          <path d="M160 16c-70 0-124 64-124 146 0 86 50 216 124 216s124-130 124-216C284 80 230 16 160 16Z" />
        </clipPath>
      </defs>
      <path
        d="M160 16c-70 0-124 64-124 146 0 86 50 216 124 216s124-130 124-216C284 80 230 16 160 16Z"
        fill="var(--avo-skin, currentColor)"
      />
      <g clipPath="url(#fp-avo-clip)">
        <path
          d="M160 38c-58 0-104 54-104 124 0 74 42 184 104 184s104-110 104-184C264 92 218 38 160 38Z"
          fill="var(--avo-flesh, #E8E0C5)"
        />
      </g>
      <ellipse cx="160" cy="220" rx="58" ry="62" fill="var(--avo-pit, #6B3A1F)" />
      <ellipse cx="142" cy="200" rx="14" ry="18" fill="var(--avo-pit-hi, rgba(255,255,255,0.08))" />
    </svg>
  );
}

function ArrowRight({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true"
         style={{ display: 'inline-block', verticalAlign: '-0.12em', marginLeft: 4 }}>
      <path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PlusMark({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
    </svg>
  );
}

Object.assign(window, { AvocadoMark, SeedShape, HalfAvocado, ArrowRight, PlusMark });
