/* ============================================
   Icons + reusable SVG bits for Storage Cartel
   Kept geometric & simple — strokes, no illustrative drawings.
   ============================================ */

const Icon = {
  Lock: ({ size = 20, stroke = 1.75 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="square">
      <rect x="4" y="10" width="16" height="11" />
      <path d="M7 10V7a5 5 0 0 1 10 0v3" />
      <circle cx="12" cy="15" r="1.3" fill="currentColor" stroke="none" />
    </svg>
  ),
  Calendar: ({ size = 20, stroke = 1.75 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="square">
      <rect x="3" y="5" width="18" height="16" />
      <path d="M3 10h18M8 3v4M16 3v4" />
    </svg>
  ),
  Card: ({ size = 20, stroke = 1.75 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="square">
      <rect x="3" y="5" width="18" height="14" />
      <path d="M3 10h18M7 15h4" />
    </svg>
  ),
  Phone: ({ size = 20, stroke = 1.75 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="square">
      <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
    </svg>
  ),
  Arrow: ({ size = 16, stroke = 2 }) => (
    <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="square">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
  Plus: ({ size = 14, stroke = 2 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke}>
      <path d="M12 5v14M5 12h14" />
    </svg>
  ),
  Menu: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 7h16M4 12h16M4 17h16" />
    </svg>
  ),
  // Segment glyphs — small abstract marks
  Move: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8">
      <rect x="4" y="11" width="14" height="14" />
      <path d="M18 14h10v11H18M22 18l-2-2-2 2M20 16v6" />
    </svg>
  ),
  Holiday: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M5 26h22M7 26V13l9-6 9 6v13M12 26v-7h8v7" />
    </svg>
  ),
  Business: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8">
      <rect x="5" y="11" width="22" height="15" />
      <path d="M12 11V7h8v4M5 17h22" />
    </svg>
  ),
  Vehicle: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M4 21V16l3-6h14l4 6v5M4 21h24M4 21v3h3v-3M25 21v3h3v-3" />
      <circle cx="10" cy="21" r="2.4" />
      <circle cx="22" cy="21" r="2.4" />
    </svg>
  ),
  Downsize: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8">
      <rect x="6" y="6" width="20" height="20" />
      <rect x="11" y="13" width="10" height="10" />
      <path d="M21 13l5-5M11 13l-5-5" />
    </svg>
  ),
};

// Hero art — isometric stacked storage units
const HeroArt = () => (
  <svg className="hero-art" viewBox="0 0 520 520" fill="none">
    <defs>
      <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
        <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(244,246,249,0.06)" strokeWidth="1" />
      </pattern>
    </defs>
    {/* ground line */}
    <line x1="20" y1="460" x2="500" y2="460" stroke="rgba(244,246,249,0.18)" strokeWidth="1" strokeDasharray="3 4" />

    {/* back row */}
    <g transform="translate(60, 110)">
      <rect x="0" y="0" width="180" height="160" fill="#0E2244" stroke="rgba(244,246,249,0.25)" />
      <rect x="0" y="0" width="180" height="160" fill="url(#hatch)" />
      <rect x="20" y="40" width="60" height="100" fill="#163059" stroke="#EC3214" strokeWidth="2" />
      {/* door slats */}
      <g stroke="rgba(244,246,249,0.35)">
        <line x1="20" y1="55" x2="80" y2="55" />
        <line x1="20" y1="70" x2="80" y2="70" />
        <line x1="20" y1="85" x2="80" y2="85" />
        <line x1="20" y1="100" x2="80" y2="100" />
        <line x1="20" y1="115" x2="80" y2="115" />
        <line x1="20" y1="130" x2="80" y2="130" />
      </g>
      <rect x="100" y="40" width="60" height="100" fill="#163059" stroke="rgba(244,246,249,0.4)" />
      <g stroke="rgba(244,246,249,0.25)">
        <line x1="100" y1="55" x2="160" y2="55" />
        <line x1="100" y1="70" x2="160" y2="70" />
        <line x1="100" y1="85" x2="160" y2="85" />
        <line x1="100" y1="100" x2="160" y2="100" />
        <line x1="100" y1="115" x2="160" y2="115" />
        <line x1="100" y1="130" x2="160" y2="130" />
      </g>
      {/* unit numbers */}
      <text x="20" y="32" fill="rgba(244,246,249,0.6)" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.5">A·14</text>
      <text x="100" y="32" fill="rgba(244,246,249,0.6)" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.5">A·15</text>
    </g>

    {/* front row larger */}
    <g transform="translate(140, 270)">
      <rect x="0" y="0" width="280" height="190" fill="#081936" stroke="rgba(244,246,249,0.4)" />
      <rect x="20" y="40" width="100" height="140" fill="#0E2244" stroke="rgba(244,246,249,0.35)" />
      <g stroke="rgba(244,246,249,0.3)">
        {[0,1,2,3,4,5,6,7,8].map(i => <line key={i} x1="20" y1={56 + i*14} x2="120" y2={56 + i*14} />)}
      </g>
      <rect x="140" y="40" width="120" height="140" fill="#163059" stroke="#1C4E92" strokeWidth="2" />
      {/* OPEN door — angled */}
      <path d="M140 40 L260 40 L260 70 L140 70 Z" fill="#081936" stroke="rgba(244,246,249,0.5)" />
      {/* interior */}
      <rect x="148" y="80" width="104" height="96" fill="#040F22" />
      <g fill="#1C4E92" opacity="0.6">
        <rect x="156" y="120" width="20" height="50" />
        <rect x="180" y="100" width="30" height="70" />
        <rect x="214" y="135" width="32" height="35" />
      </g>
      <text x="20" y="32" fill="rgba(244,246,249,0.7)" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="1.5">B·02</text>
      <text x="140" y="32" fill="#EC3214" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="1.5">B·03 — YOURS</text>
    </g>

    {/* badge */}
    <g transform="translate(360, 90)">
      <rect x="0" y="0" width="120" height="60" fill="#EC3214" />
      <text x="14" y="24" fill="#fff" fontFamily="Barlow Condensed, sans-serif" fontWeight="700" fontSize="14" letterSpacing="1.5">MANAGER</text>
      <text x="14" y="44" fill="#fff" fontFamily="Barlow Condensed, sans-serif" fontWeight="700" fontSize="14" letterSpacing="1.5">ATTENDED</text>
    </g>
  </svg>
);

// Small isometric box for unit cards
const UnitGlyph = ({ scale = 1 }) => (
  <svg viewBox="0 0 120 70" fill="none">
    <g stroke="#081936" strokeWidth="1.4" fill="none">
      <rect x={60 - 22*scale} y={35 - 16*scale} width={44*scale} height={28*scale} fill="#fff" />
      <line x1={60 - 22*scale} y1={35 + 12*scale} x2={60 - 22*scale} y2={35 - 16*scale + 4} stroke="#EC3214" />
    </g>
    <text x="60" y="62" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#4a5567">UNIT</text>
  </svg>
);

// Map placeholder — abstract peninsula coastline
const MapArt = () => (
  <svg viewBox="0 0 600 460" preserveAspectRatio="xMidYMid slice">
    <defs>
      <pattern id="watergrid" width="40" height="40" patternUnits="userSpaceOnUse">
        <path d="M40 0H0V40" stroke="rgba(244,246,249,0.05)" fill="none" />
      </pattern>
    </defs>
    {/* water */}
    <rect width="600" height="460" fill="#0E2244" />
    <rect width="600" height="460" fill="url(#watergrid)" />
    {/* peninsula landmass — abstract */}
    <path d="M-20 60 L80 50 L160 80 L230 70 L300 110 L370 130 L420 180 L450 240 L420 310 L360 360 L290 380 L240 400 L180 420 L120 410 L60 380 L20 320 L-20 280 Z"
          fill="#1C4E92" opacity="0.35" stroke="rgba(244,246,249,0.4)" strokeWidth="1.5" />
    <path d="M-20 60 L80 50 L160 80 L230 70 L300 110 L370 130 L420 180 L450 240 L420 310 L360 360 L290 380 L240 400 L180 420 L120 410 L60 380 L20 320 L-20 280 Z"
          fill="#163059" />
    {/* roads */}
    <path d="M40 280 Q160 220 280 240 T440 280" stroke="rgba(244,246,249,0.3)" strokeWidth="1.5" strokeDasharray="4 4" fill="none" />
    <path d="M120 380 L260 320 L320 220" stroke="rgba(244,246,249,0.2)" strokeWidth="1" strokeDasharray="3 4" fill="none" />
    {/* town labels */}
    <g fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(244,246,249,0.55)">
      <text x="90" y="200">SORRENTO</text>
      <text x="380" y="280">DROMANA</text>
      <text x="260" y="380">RYE</text>
      <text x="200" y="120">PORT PHILLIP BAY</text>
    </g>
  </svg>
);

Object.assign(window, { Icon, HeroArt, UnitGlyph, MapArt });
