/* ===========================================================
   Halvorsen Orthopaedic — visual atoms
   Hairline anatomical line drawings used as quiet decoration.
   =========================================================== */

const Stroke = ({ children, w = 1 }) => (
  <g fill="none" stroke="currentColor" strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">
    {children}
  </g>
);

/* Knee joint — sagittal-ish abstract */
const KneeMotif = ({ size = 240, style }) => (
  <svg viewBox="0 0 240 320" width={size} style={style} aria-hidden="true">
    <Stroke>
      {/* femur */}
      <path d="M118 10 C 118 60, 100 90, 96 120 C 92 150, 96 165, 110 175" />
      <path d="M138 10 C 138 60, 152 90, 156 120 C 160 145, 156 162, 144 172" />
      <ellipse cx="124" cy="170" rx="36" ry="14" />
      {/* meniscus */}
      <path d="M88 188 Q 124 200 160 188" />
      <path d="M92 196 Q 124 206 156 196" />
      {/* tibia */}
      <path d="M104 210 C 100 240, 100 280, 108 310" />
      <path d="M144 210 C 148 240, 148 280, 140 310" />
      {/* patella */}
      <ellipse cx="124" cy="158" rx="14" ry="20" />
      {/* tick marks */}
      <path d="M40 170 L 60 170" />
      <path d="M40 170 L 40 178" />
      <path d="M60 170 L 60 178" />
      <path d="M180 170 L 200 170" />
      <path d="M180 170 L 180 178" />
      <path d="M200 170 L 200 178" />
    </Stroke>
    <text x="42" y="166" fontFamily="var(--mono)" fontSize="8" fill="currentColor" opacity="0.6">
      med · 42mm
    </text>
    <text x="182" y="166" fontFamily="var(--mono)" fontSize="8" fill="currentColor" opacity="0.6">
      lat · 38mm
    </text>
  </svg>
);

/* Shoulder — rotator cuff abstract */
const ShoulderMotif = ({ size = 240, style }) => (
  <svg viewBox="0 0 280 280" width={size} style={style} aria-hidden="true">
    <Stroke>
      <circle cx="140" cy="140" r="80" />
      <circle cx="140" cy="140" r="56" />
      <circle cx="140" cy="140" r="6" />
      <path d="M60 140 Q 140 60 220 140" />
      <path d="M60 140 Q 140 220 220 140" />
      <path d="M140 60 L 140 220" strokeDasharray="2 4" />
      <path d="M60 140 L 220 140" strokeDasharray="2 4" />
    </Stroke>
  </svg>
);

/* Hip — femoral head */
const HipMotif = ({ size = 240, style }) => (
  <svg viewBox="0 0 240 280" width={size} style={style} aria-hidden="true">
    <Stroke>
      <path d="M40 60 Q 120 40 200 60" />
      <path d="M40 60 L 60 180" />
      <path d="M200 60 L 180 180" />
      <circle cx="120" cy="160" r="48" />
      <circle cx="120" cy="160" r="30" />
      <path d="M120 208 C 110 230, 100 250, 88 270" />
      <path d="M120 208 C 130 230, 140 250, 152 270" />
    </Stroke>
  </svg>
);

/* Ankle */
const AnkleMotif = ({ size = 240, style }) => (
  <svg viewBox="0 0 240 280" width={size} style={style} aria-hidden="true">
    <Stroke>
      <path d="M100 20 L 100 130" />
      <path d="M140 20 L 140 130" />
      <path d="M80 130 Q 120 150 160 130" />
      <path d="M70 145 L 200 145" />
      <path d="M70 145 Q 100 200 90 230 L 200 230 L 200 145" />
      <circle cx="100" cy="138" r="6" />
      <circle cx="140" cy="138" r="6" />
    </Stroke>
  </svg>
);

/* Spine fragment */
const SpineMotif = ({ size = 200, style }) => (
  <svg viewBox="0 0 120 320" width={size} style={style} aria-hidden="true">
    <Stroke>
      {[0, 1, 2, 3, 4, 5, 6].map((i) => (
        <g key={i} transform={`translate(0 ${20 + i * 40})`}>
          <path d="M30 10 Q 60 0 90 10 L 90 30 Q 60 40 30 30 Z" />
          <path d="M55 14 L 65 14" />
        </g>
      ))}
      <path d="M60 0 L 60 320" strokeDasharray="2 4" opacity="0.4" />
    </Stroke>
  </svg>
);

/* Crosshair / measurement marker */
const Crosshair = ({ size = 40, style }) => (
  <svg viewBox="0 0 40 40" width={size} style={style} aria-hidden="true">
    <Stroke>
      <circle cx="20" cy="20" r="6" />
      <path d="M20 0 L 20 10" />
      <path d="M20 30 L 20 40" />
      <path d="M0 20 L 10 20" />
      <path d="M30 20 L 40 20" />
    </Stroke>
  </svg>
);

/* Portrait / image placeholder — striped, with caption. If `src` is provided, uses real image. */
const Plate = ({ ratio = "3/4", label, sub, tone = "sand", src, className = "", children, style }) => {
  const palettes = {
    sand:    { a: "#C2B79E", b: "#A89770", text: "#3a3320" },
    sage:    { a: "#7C8471", b: "#5E6657", text: "#1c1f18" },
    bone:    { a: "#E9E2D6", b: "#C2B79E", text: "#3a3320" },
    ink:     { a: "#2A3340", b: "#1F2937", text: "#EFEAE3" },
  };
  const p = palettes[tone] || palettes.sand;
  return (
    <div
      className={`plate ${className}`}
      style={{
        position: "relative",
        aspectRatio: ratio,
        width: "100%",
        background: src ? "#1a1a1a" : `repeating-linear-gradient(135deg, ${p.a} 0 14px, ${p.b} 14px 28px)`,
        color: src ? "#fff" : p.text,
        overflow: "hidden",
        ...style,
      }}
    >
      {src && (
        <img src={src} alt={sub || label || ""} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.92) contrast(1.02)" }} />
      )}
      {src && (
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(15,15,15,0.55) 100%)" }} />
      )}
      {(label || sub) && (
        <div style={{ position: "absolute", left: 18, right: 18, bottom: 16, color: src ? "#F5F1EA" : "inherit" }}>
          {label && (
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.85 }}>
              {label}
            </div>
          )}
          {sub && (
            <div className="serif" style={{ fontSize: 20, lineHeight: 1.2, marginTop: 4 }}>
              {sub}
            </div>
          )}
        </div>
      )}
      <Tick pos="tl" />
      <Tick pos="tr" />
      <Tick pos="bl" />
      <Tick pos="br" />
      {children}
    </div>
  );
};

const Tick = ({ pos }) => {
  const map = {
    tl: { top: 8, left: 8, rot: 0 },
    tr: { top: 8, right: 8, rot: 90 },
    bl: { bottom: 8, left: 8, rot: 270 },
    br: { bottom: 8, right: 8, rot: 180 },
  };
  const s = map[pos];
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" style={{ position: "absolute", ...s, transform: `rotate(${s.rot}deg)` }} aria-hidden="true">
      <path d="M0 0 L 14 0 L 14 1 L 1 1 L 1 14 L 0 14 Z" fill="currentColor" opacity="0.7" />
    </svg>
  );
};

/* Chapter label: "01 — Philosophy" */
const Chapter = ({ num, label }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
    <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--ink-soft)" }}>
      {String(num).padStart(2, "0")}
    </span>
    <span style={{ width: 20, height: 1, background: "var(--line-strong)" }} />
    <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
      {label}
    </span>
  </div>
);

/* Arrow icon */
const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true" className="arrow">
    <path d="M1 7 L 13 7 M 8 2 L 13 7 L 8 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* Hand signature */
const Signature = ({ size = 180 }) => (
  <svg viewBox="0 0 240 70" width={size} aria-hidden="true" style={{ color: "var(--oxblood)" }}>
    <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 44 C 8 24, 14 18, 20 30 C 24 42, 28 48, 34 38 C 38 30, 42 22, 48 32 C 52 42, 58 44, 64 34 C 70 22, 78 28, 82 40 Q 86 50, 92 38 L 100 26 L 96 46 Q 100 50, 110 40 C 118 32, 124 38, 130 34 C 138 28, 142 22, 148 30 C 152 38, 158 42, 168 36 C 178 28, 188 26, 198 32 C 206 38, 214 44, 222 38" />
      <path d="M58 56 L 226 56" strokeWidth="0.6" opacity="0.5" />
    </g>
  </svg>
);

Object.assign(window, {
  KneeMotif, ShoulderMotif, HipMotif, AnkleMotif, SpineMotif, Crosshair,
  Plate, Tick, Chapter, Arrow, Stroke, Signature,
});

/* Stock photo URLs (Unsplash, hand-picked for tone) */
const PHOTOS = {
  portrait: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=900&q=85",
  runner: "https://images.unsplash.com/photo-1571008887538-b36bb32f4571?w=900&q=85",
  craft: "https://images.unsplash.com/photo-1581595220892-b0739db3ba8c?w=900&q=85",
  hands: "https://images.unsplash.com/photo-1612277795421-9bc7706a4a34?w=900&q=85",
  dancer: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=900&q=85",
  knee: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=900&q=85",
  rugby: "https://images.unsplash.com/photo-1551655510-555dc3be8633?w=900&q=85",
  clinic: "https://images.unsplash.com/photo-1666214280557-f1b5022eb634?w=900&q=85",
  oslo: "https://images.unsplash.com/photo-1601581875309-fafbf2d3ed3a?w=1200&q=85",
  london: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=1200&q=85",
};

window.PHOTOS = PHOTOS;