// ============================================
// Icons — thin-stroke editorial
// ============================================

const I = ({ d, size = 18, sw = 1, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
    {...rest}>
    {d}
  </svg>
);

const IArrow      = (p) => <I {...p} d={<><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>}/>;
const IArrowUR    = (p) => <I {...p} d={<><path d="M7 17L17 7"/><path d="M9 7h8v8"/></>}/>;
const IChevDown   = (p) => <I {...p} d={<path d="M6 9l6 6 6-6"/>}/>;
const ICheck      = (p) => <I {...p} d={<path d="M5 12l5 5L20 7"/>}/>;
const IPlus       = (p) => <I {...p} d={<><path d="M12 5v14"/><path d="M5 12h14"/></>}/>;
const IMinus      = (p) => <I {...p} d={<path d="M5 12h14"/>}/>;
const IPlay       = (p) => <I {...p} d={<path d="M8 5l12 7-12 7V5z"/>}/>;
const IMail       = (p) => <I {...p} d={<><rect x="3" y="5" width="18" height="14" rx="0.5"/><path d="M3 7l9 7 9-7"/></>}/>;
const IPin        = (p) => <I {...p} d={<><path d="M12 22s-7-7.58-7-13a7 7 0 0 1 14 0c0 5.42-7 13-7 13z"/><circle cx="12" cy="9" r="2.5"/></>}/>;
const IClock      = (p) => <I {...p} d={<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>}/>;
const IInstagram  = (p) => <I {...p} d={<><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></>}/>;
const ILinkedin   = (p) => <I {...p} d={<><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 12v5"/></>}/>;
const ILink       = (p) => <I {...p} d={<><path d="M10 14a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 10a5 5 0 0 0-7.07 0l-3 3a5 5 0 1 0 7.07 7.07l1.5-1.5"/></>}/>;
const IPhone      = (p) => <I {...p} d={<><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M10 18h4"/></>}/>;

// Service glyphs — thin architectural line work
const ServiceGlyph = ({ kind, size = 56 }) => {
  const props = { width: size, height: size, viewBox: "0 0 64 64", fill: "none", stroke: "currentColor", strokeWidth: 0.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "exterior": return (
      <svg {...props}>
        <path d="M8 52h48"/>
        <path d="M14 52V28l18-14 18 14v24"/>
        <path d="M14 28h36"/>
        <path d="M24 52V36h6v16M34 36h12v16"/>
        <path d="M37 40h6v6h-6z"/>
        <path d="M27 40v8M30 40v8"/>
        <circle cx="32" cy="14" r="1" fill="currentColor"/>
      </svg>
    );
    case "interior": return (
      <svg {...props}>
        <path d="M6 50h52"/>
        <path d="M8 50V18h48v32"/>
        <path d="M8 22h48"/>
        <path d="M16 50V36h12v14M40 36h10v14M40 38h10M40 42h10M40 46h10"/>
        <path d="M30 30h8M30 33h8"/>
        <circle cx="14" cy="14" r="0.8" fill="currentColor"/>
        <circle cx="50" cy="14" r="0.8" fill="currentColor"/>
      </svg>
    );
    case "video": return (
      <svg {...props}>
        <rect x="6" y="18" width="38" height="28" rx="1"/>
        <path d="M50 24l8-4v24l-8-4z"/>
        <path d="M20 28l10 6-10 6z"/>
      </svg>
    );
    case "staging": return (
      <svg {...props}>
        <path d="M6 50h52"/>
        <path d="M8 50V20l24-12 24 12v30"/>
        <rect x="20" y="32" width="10" height="14"/>
        <rect x="34" y="32" width="10" height="14"/>
        <path d="M18 26h28"/>
        <circle cx="48" cy="20" r="0.8" fill="currentColor"/>
      </svg>
    );
    case "configurator": return (
      <svg {...props}>
        <path d="M32 8l22 12v24L32 56 10 44V20z"/>
        <path d="M32 8v48M10 20l22 12 22-12M10 44l22-12 22 12"/>
        <circle cx="32" cy="32" r="2" fill="currentColor"/>
      </svg>
    );
    case "ai": return (
      <svg {...props}>
        <circle cx="32" cy="32" r="20"/>
        <circle cx="32" cy="32" r="12"/>
        <path d="M32 12v8M32 44v8M12 32h8M44 32h8"/>
        <path d="M18 18l6 6M40 40l6 6M46 18l-6 6M24 40l-6 6"/>
        <circle cx="32" cy="32" r="3" fill="currentColor"/>
      </svg>
    );
    default: return null;
  }
};

// Portfolio art — refined architectural line drawings
const PortfolioArt = ({ kind }) => {
  const props = { viewBox: "0 0 800 600", preserveAspectRatio: "xMidYMid slice", className: "portart" };
  if (kind === "exterior") return (
    <svg {...props}>
      <defs>
        <linearGradient id="ex-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0A1019"/><stop offset="0.5" stopColor="#0F1822"/><stop offset="1" stopColor="#1A2638"/>
        </linearGradient>
        <linearGradient id="ex-glow" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#00A0E0" stopOpacity="0"/><stop offset="1" stopColor="#00A0E0" stopOpacity="0.18"/>
        </linearGradient>
      </defs>
      <rect width="800" height="600" fill="url(#ex-sky)"/>
      <rect y="380" width="800" height="220" fill="url(#ex-glow)" opacity="0.6"/>
      <circle cx="640" cy="120" r="3" fill="#29B6F0" opacity="0.9"/>
      <circle cx="640" cy="120" r="14" fill="none" stroke="#00A0E0" strokeWidth="0.5" opacity="0.5"/>
      <path d="M60 420 L60 360 M50 380 Q55 350 60 360 Q65 350 70 380" stroke="#1A2638" strokeWidth="0.6" fill="none"/>
      <path d="M740 420 L740 350 M725 380 Q735 340 740 360 Q745 340 755 380" stroke="#1A2638" strokeWidth="0.6" fill="none"/>
      <g stroke="#00A0E0" strokeWidth="0.8" fill="none">
        <path d="M180 420 L180 260 L400 160 L620 260 L620 420"/>
        <path d="M180 420 L620 420"/>
        <path d="M160 260 L640 260"/>
        <path d="M380 420 L380 340 L420 340 L420 420"/>
        <rect x="220" y="290" width="40" height="50"/>
        <rect x="280" y="290" width="40" height="50"/>
        <rect x="480" y="290" width="40" height="50"/>
        <rect x="540" y="290" width="40" height="50"/>
        <line x1="220" y1="315" x2="260" y2="315"/>
        <line x1="240" y1="290" x2="240" y2="340"/>
        <line x1="280" y1="315" x2="320" y2="315"/>
        <line x1="300" y1="290" x2="300" y2="340"/>
        <line x1="480" y1="315" x2="520" y2="315"/>
        <line x1="500" y1="290" x2="500" y2="340"/>
        <line x1="540" y1="315" x2="580" y2="315"/>
        <line x1="560" y1="290" x2="560" y2="340"/>
        <rect x="240" y="190" width="30" height="38"/>
        <rect x="385" y="180" width="30" height="38"/>
        <rect x="530" y="190" width="30" height="38"/>
        <path d="M280 200 L280 150 L310 150 L310 220"/>
        <path d="M275 150 L315 150 L315 142 L275 142 Z" fill="#00A0E0" fillOpacity="0.2"/>
      </g>
      <g fill="#29B6F0" opacity="0.85">
        <rect x="221" y="291" width="38" height="48"/>
        <rect x="281" y="291" width="38" height="48"/>
        <rect x="541" y="291" width="38" height="48"/>
        <rect x="386" y="181" width="28" height="36"/>
      </g>
      <g fill="#0F1822" opacity="0.4">
        <rect x="481" y="291" width="38" height="48"/>
        <rect x="241" y="191" width="28" height="36"/>
        <rect x="531" y="191" width="28" height="36"/>
      </g>
      <path d="M400 420 L380 600 L420 600 Z" fill="#00A0E0" fillOpacity="0.08" stroke="#00A0E0" strokeWidth="0.3"/>
    </svg>
  );
  if (kind === "kitchen") return (
    <svg {...props}>
      <defs>
        <linearGradient id="k-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0F1822"/><stop offset="1" stopColor="#0A1019"/>
        </linearGradient>
      </defs>
      <rect width="800" height="600" fill="url(#k-bg)"/>
      <g stroke="#00A0E0" strokeWidth="0.8" fill="none">
        <path d="M0 100 L800 80 L800 520 L0 540 Z"/>
        <path d="M200 80 L200 540 M400 80 L400 540 M600 80 L600 540"/>
        <rect x="250" y="340" width="320" height="120"/>
        <line x1="250" y1="380" x2="570" y2="380"/>
        <circle cx="290" cy="360" r="2" fill="#00A0E0"/>
        <circle cx="350" cy="360" r="2" fill="#00A0E0"/>
        <circle cx="470" cy="360" r="2" fill="#00A0E0"/>
        <circle cx="530" cy="360" r="2" fill="#00A0E0"/>
        <rect x="120" y="140" width="560" height="100"/>
        <line x1="260" y1="140" x2="260" y2="240"/>
        <line x1="400" y1="140" x2="400" y2="240"/>
        <line x1="540" y1="140" x2="540" y2="240"/>
        <line x1="330" y1="80" x2="330" y2="220"/>
        <line x1="470" y1="80" x2="470" y2="220"/>
        <path d="M320 220 L340 220 L335 240 L325 240 Z" fill="#00A0E0" fillOpacity="0.4"/>
        <path d="M460 220 L480 220 L475 240 L465 240 Z" fill="#00A0E0" fillOpacity="0.4"/>
        <line x1="0" y1="540" x2="800" y2="540"/>
      </g>
      <ellipse cx="410" cy="320" rx="220" ry="40" fill="#00A0E0" opacity="0.15"/>
      <ellipse cx="410" cy="540" rx="280" ry="20" fill="#00A0E0" opacity="0.08"/>
    </svg>
  );
  if (kind === "bedroom") return (
    <svg {...props}>
      <rect width="800" height="600" fill="#0A1019"/>
      <g stroke="#00A0E0" strokeWidth="0.8" fill="none">
        <path d="M50 80 L750 60 L750 540 L50 560 Z"/>
        <path d="M260 70 L260 555 M540 64 L540 548"/>
        <rect x="240" y="320" width="320" height="180"/>
        <rect x="240" y="320" width="320" height="50" fill="#00A0E0" fillOpacity="0.15"/>
        <path d="M240 290 L560 290 L560 330 L240 330 Z"/>
        <line x1="280" y1="350" x2="520" y2="350"/>
        <rect x="260" y="300" width="80" height="40" rx="2"/>
        <rect x="460" y="300" width="80" height="40" rx="2"/>
        <rect x="140" y="380" width="80" height="80"/>
        <rect x="580" y="380" width="80" height="80"/>
        <circle cx="180" cy="350" r="15"/>
        <circle cx="620" cy="350" r="15"/>
        <line x1="180" y1="365" x2="180" y2="380"/>
        <line x1="620" y1="365" x2="620" y2="380"/>
        <rect x="320" y="120" width="160" height="100"/>
        <line x1="320" y1="155" x2="480" y2="155"/>
        <line x1="400" y1="120" x2="400" y2="220"/>
      </g>
      <circle cx="180" cy="350" r="14" fill="#29B6F0" opacity="0.6"/>
      <circle cx="620" cy="350" r="14" fill="#29B6F0" opacity="0.6"/>
      <ellipse cx="180" cy="380" rx="60" ry="14" fill="#00A0E0" opacity="0.12"/>
      <ellipse cx="620" cy="380" rx="60" ry="14" fill="#00A0E0" opacity="0.12"/>
    </svg>
  );
  if (kind === "aerial") return (
    <svg {...props}>
      <rect width="800" height="600" fill="#060A12"/>
      <g stroke="#00A0E0" strokeWidth="0.5" fill="none" opacity="0.7">
        <path d="M0 300 L800 300"/>
        <path d="M400 0 L400 600"/>
        <path d="M0 150 L800 150" strokeOpacity="0.4"/>
        <path d="M0 450 L800 450" strokeOpacity="0.4"/>
        <path d="M200 0 L200 600" strokeOpacity="0.4"/>
        <path d="M600 0 L600 600" strokeOpacity="0.4"/>
        <circle cx="200" cy="450" r="40"/>
        <circle cx="600" cy="150" r="40"/>
      </g>
      <g fill="#00A0E0" fillOpacity="0.3" stroke="#00A0E0" strokeWidth="0.4">
        {[
          [80,80],[140,80],[260,80],[320,80],
          [460,80],[520,80],[680,80],[740,80],
          [80,220],[140,220],[260,220],[320,220],
          [460,220],[520,220],[680,220],[740,220],
          [80,370],[140,370],[280,370],[320,370],
          [460,370],[520,370],[680,370],[740,370],
          [80,510],[140,510],[260,510],[320,510],
          [460,510],[520,510],[680,510],[740,510],
        ].map(([x, y], i) => (
          <rect key={i} x={x} y={y} width="36" height="46"/>
        ))}
      </g>
      <g fill="#00A0E0" fillOpacity="0.06">
        <circle cx="200" cy="450" r="22"/>
        <circle cx="600" cy="150" r="22"/>
      </g>
      <g transform="translate(720 540)" stroke="#00A0E0" strokeWidth="0.6" fill="none">
        <circle r="22"/>
        <path d="M0 -16 L4 0 L0 16 L-4 0 Z" fill="#00A0E0" fillOpacity="0.4"/>
        <text x="0" y="-26" textAnchor="middle" fill="#00A0E0" fontSize="9" fontFamily="DM Sans" letterSpacing="2">N</text>
      </g>
    </svg>
  );
  return null;
};

Object.assign(window, {
  I, IArrow, IArrowUR, IChevDown, ICheck, IPlus, IMinus, IPlay,
  IMail, IPin, IClock, IInstagram, ILinkedin, ILink, IPhone,
  ServiceGlyph, PortfolioArt,
});
