// Shared small components for Savannah Tails & Trails

const PawMark = ({ size = 22, color = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} style={style} aria-hidden>
    <ellipse cx="6" cy="10" rx="2" ry="2.6"/>
    <ellipse cx="12" cy="7.5" rx="2.1" ry="2.8"/>
    <ellipse cx="18" cy="10" rx="2" ry="2.6"/>
    <ellipse cx="9" cy="14.5" rx="1.6" ry="2.1"/>
    <ellipse cx="15" cy="14.5" rx="1.6" ry="2.1"/>
    <path d="M12 13.5c-3.4 0-5.4 2.5-5.4 4.6 0 1.6 1.4 2.6 3 2.6 1.1 0 1.7-.5 2.4-.5s1.3.5 2.4.5c1.6 0 3-1 3-2.6 0-2.1-2-4.6-5.4-4.6z"/>
  </svg>
);

// Soft hand-drawn arch — echo of the Algarve villa arches
const Arch = ({ children, className = "", style }) => (
  <div className={`arch ${className}`} style={style}>
    <div className="arch__frame">{children}</div>
  </div>
);

// Striped cushion texture — inspired by the beige/grey striped beds
const StripeDivider = ({ height = 36 }) => (
  <div
    className="stripe-divider"
    style={{
      height,
      backgroundImage:
        "repeating-linear-gradient(90deg, #e8ddc3 0 22px, #f6eedd 22px 26px, #c9b99a 26px 30px, #f6eedd 30px 56px)",
    }}
    aria-hidden
  />
);

// Azulejo tile corner motif - sparingly used
const TileCorner = ({ size = 44, color = "#8FB8D4" }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden>
    <g fill={color} opacity="0.85">
      <path d="M0 0 L40 0 L40 6 L20 6 L20 20 L6 20 L6 40 L0 40 Z" />
    </g>
    <g fill={color} opacity="0.45">
      <rect x="10" y="10" width="4" height="4"/>
      <rect x="16" y="10" width="4" height="4"/>
      <rect x="10" y="16" width="4" height="4"/>
    </g>
  </svg>
);

// A tiny illustrated dog silhouette (used as subtle badge, not as main art)
const DogBadge = ({ size = 28, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 64 40" fill={color} aria-hidden>
    <path d="M4 28 C4 20, 10 14, 20 14 L40 14 C46 14, 52 8, 56 8 C58 8, 60 10, 60 14 C60 18, 56 20, 54 22 L54 30 C54 33, 52 35, 49 35 L46 35 L46 28 L22 28 L22 35 L18 35 C15 35, 13 33, 13 30 L13 28 Z"/>
    <circle cx="51" cy="15" r="1.4" fill="#2B2721"/>
  </svg>
);

// Olive branch accent
const OliveSprig = ({ size = 80, color = "#6B7A4B", style }) => (
  <svg width={size} height={size * 0.6} viewBox="0 0 100 60" style={style} aria-hidden>
    <path d="M2 30 Q 50 20, 98 30" stroke={color} strokeWidth="1.5" fill="none"/>
    {[15, 30, 45, 60, 75].map((x, i) => (
      <g key={i}>
        <ellipse cx={x} cy={28 - (i%2===0?6:0)} rx="5" ry="2.2" fill={color} transform={`rotate(${i%2===0?-25:25} ${x} ${28})`} opacity="0.9"/>
      </g>
    ))}
  </svg>
);

// Button
const Button = ({ children, variant = "primary", size = "md", onClick, icon }) => {
  const cls = `btn btn--${variant} btn--${size}`;
  return (
    <button className={cls} onClick={onClick}>
      <span>{children}</span>
      {icon && <span className="btn__icon">{icon}</span>}
    </button>
  );
};

// Section label (kicker above section headlines)
const Kicker = ({ children, color }) => (
  <div className="kicker" style={color ? { color } : undefined}>
    <span className="kicker__dot" style={color ? { background: color } : undefined}/>
    {children}
  </div>
);

// Big photo frame with caption badge
const PhotoFrame = ({ src, alt, caption, badge, ratio = "4/5", tone, children }) => (
  <figure className="photo-frame" style={{ aspectRatio: ratio, ...(tone ? { background: tone } : {}) }}>
    {src && <img src={src} alt={alt}/>}
    {children}
    {badge && <div className="photo-frame__badge">{badge}</div>}
    {caption && <figcaption className="photo-frame__caption">{caption}</figcaption>}
  </figure>
);

Object.assign(window, {
  PawMark, Arch, StripeDivider, TileCorner, DogBadge, OliveSprig,
  Button, Kicker, PhotoFrame,
});