// Uri Padel site — architectural SVG placeholder + shared mark component.

const Mark = ({ size = 36, style = {}, className = '' }) => (
  <img
    src="assets/uri-mark.png"
    alt="Uri Padel mark"
    className={className}
    style={{ height: size, width: 'auto', display: 'block', ...style }}
  />
);

// Abstract court-geometry placeholder. Uses the top-down layout of a padel
// court (rectangle, service lines, net). Looks architectural, not illustrated.
const CourtPlaceholder = ({ label, number, dark = false }) => {
  const ink = dark ? '#f5f3ed' : '#0a0a0a';
  const hair = dark ? 'rgba(245,243,237,0.22)' : 'rgba(10,10,10,0.20)';
  const fill = dark ? '#1a1a1a' : '#ebe7dc';
  return (
    <div className="loc-placeholder" style={{ background: fill }}>
      <svg viewBox="0 0 400 500" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
           style={{ position: 'absolute', inset: 0 }}>
        {/* outer court */}
        <rect x="60" y="60" width="280" height="380" fill="none" stroke={ink} strokeWidth="2"/>
        {/* net */}
        <line x1="60" y1="250" x2="340" y2="250" stroke={ink} strokeWidth="2"/>
        {/* service boxes */}
        <line x1="60" y1="150" x2="340" y2="150" stroke={ink} strokeWidth="1" opacity="0.6"/>
        <line x1="60" y1="350" x2="340" y2="350" stroke={ink} strokeWidth="1" opacity="0.6"/>
        <line x1="200" y1="150" x2="200" y2="250" stroke={ink} strokeWidth="1" opacity="0.6"/>
        <line x1="200" y1="250" x2="200" y2="350" stroke={ink} strokeWidth="1" opacity="0.6"/>
        {/* coordinate ticks */}
        {[0,1,2,3,4,5,6,7].map(i => (
          <line key={i} x1={60} y1={60 + i*(380/7)} x2={52} y2={60 + i*(380/7)} stroke={hair} strokeWidth="1"/>
        ))}
      </svg>
      <div style={{
        position: 'absolute', top: 16, left: 16,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em',
        textTransform: 'uppercase', color: ink, opacity: 0.7
      }}>
        {number} · {label}
      </div>
      <div style={{
        position: 'absolute', bottom: 16, right: 16,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em',
        textTransform: 'uppercase', color: ink, opacity: 0.7
      }}>
        20m × 10m
      </div>
    </div>
  );
};

// Diagonal-hatch block used in Courts section.
const Hatch = ({ style = {} }) => <div className="diag" style={style} />;

window.UriSite = { Mark, CourtPlaceholder, Hatch };