// asiz-art.jsx — abstract architectural line art

// Large detailed house with windows, roof, trees — animates 'sold' state
function HouseArt({ sold = false, accent = true, variant = 'A' }) {
  return (
    <svg className="asiz-house-art" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="0.6" opacity="0.22" />
        </pattern>
      </defs>

      {/* ground */}
      <line className="stroke" x1="20" y1="430" x2="780" y2="430" />

      {/* back tree silhouette */}
      <g className="stroke" opacity="0.38">
        <line x1="120" y1="430" x2="120" y2="280" />
        <path d="M120 280 Q90 260 95 230 Q70 215 85 190 Q75 170 105 165 Q120 145 145 160 Q175 150 180 180 Q205 195 185 220 Q200 250 170 260 Q160 285 120 280" />
      </g>

      {/* main house shell */}
      <g className="stroke">
        {/* foundation */}
        <line x1="180" y1="430" x2="640" y2="430" strokeWidth="1.5" />
        {/* left wall */}
        <line x1="220" y1="430" x2="220" y2="260" />
        {/* right wall */}
        <line x1="600" y1="430" x2="600" y2="260" />
        {/* eaves */}
        <line x1="205" y1="260" x2="615" y2="260" />
        {/* roof */}
        <polyline points="205,260 410,140 615,260" />
        {/* roof inner line */}
        <polyline points="220,262 410,152 600,262" opacity="0.5" />
        {/* chimney */}
        <rect x="510" y="165" width="22" height="48" />
        <line x1="510" y1="177" x2="532" y2="177" opacity="0.5" />
      </g>

      {/* windows */}
      <g className="stroke">
        <rect x="258" y="300" width="72" height="92" />
        <line x1="294" y1="300" x2="294" y2="392" />
        <line x1="258" y1="346" x2="330" y2="346" />

        <rect x="490" y="300" width="72" height="92" />
        <line x1="526" y1="300" x2="526" y2="392" />
        <line x1="490" y1="346" x2="562" y2="346" />
      </g>

      {/* door */}
      <g className="stroke">
        <rect x="378" y="320" width="64" height="110" />
        <circle cx="430" cy="378" r="2" fill="currentColor" />
        <line x1="378" y1="360" x2="442" y2="360" opacity="0.5" />
      </g>

      {/* path */}
      <g className="stroke" opacity="0.4">
        <line x1="390" y1="430" x2="360" y2="480" />
        <line x1="430" y1="430" x2="460" y2="480" />
        <line x1="360" y1="452" x2="450" y2="452" />
        <line x1="352" y1="466" x2="460" y2="466" />
      </g>

      {/* small pine tree */}
      <g className="stroke" opacity="0.55">
        <line x1="690" y1="430" x2="690" y2="380" />
        <polyline points="660,400 690,340 720,400" />
        <polyline points="665,380 690,320 715,380" />
        <polyline points="670,360 690,300 710,360" />
      </g>

      {/* sun / geometric mark */}
      <circle className="stroke" cx="140" cy="110" r="28" opacity="0.45" />

      {/* hatched accent overlay on one wall */}
      {accent && (
        <rect x="220" y="260" width="185" height="170" fill="url(#hatch)" opacity="0.9" />
      )}

      {/* SOLD stamp (reveals on sold=true) */}
      <g style={{
        transform: sold ? 'translate(0,0) rotate(-8deg)' : 'translate(0,-20px) rotate(-8deg)',
        transformOrigin: '560px 90px',
        opacity: sold ? 1 : 0,
        transition: 'all .8s cubic-bezier(.2,.7,.3,1) .2s',
      }}>
        <rect x="520" y="60" width="150" height="56" className="fill-accent" opacity="0.95" />
        <text x="595" y="96" textAnchor="middle"
          style={{ font: '700 22px/1 ui-monospace, monospace', letterSpacing: '0.18em', fill: 'var(--accent-ink)' }}>
          SOLD
        </text>
      </g>
    </svg>
  );
}

// Compact icon — abstract shape per feature
function FeatureIcon({ kind }) {
  const common = { className: 'asiz-feature-icon', viewBox: '0 0 48 48', fill: 'none', stroke: 'currentColor', strokeWidth: 1.25 };
  switch (kind) {
    case 'repairs':
      return (
        <svg {...common}>
          <path d="M6 36 L18 24 L24 30 L36 18 L42 24" />
          <circle cx="36" cy="12" r="3" />
          <path d="M6 42 L42 42" />
        </svg>
      );
    case 'money':
      return (
        <svg {...common}>
          <circle cx="24" cy="24" r="14" />
          <path d="M20 20 Q24 16 28 20 Q24 24 20 28 Q24 32 28 28" />
          <line x1="24" y1="14" x2="24" y2="34" />
        </svg>
      );
    case 'waiting':
      return (
        <svg {...common}>
          <circle cx="24" cy="24" r="14" />
          <line x1="24" y1="14" x2="24" y2="24" />
          <line x1="24" y1="24" x2="32" y2="28" />
        </svg>
      );
    case 'transparency':
      return (
        <svg {...common}>
          <path d="M6 24 Q24 10 42 24 Q24 38 6 24 Z" />
          <circle cx="24" cy="24" r="5" />
        </svg>
      );
    case 'easy':
      return (
        <svg {...common}>
          <rect x="10" y="8" width="28" height="32" rx="2" />
          <line x1="16" y1="16" x2="32" y2="16" />
          <line x1="16" y1="22" x2="32" y2="22" />
          <line x1="16" y1="28" x2="26" y2="28" />
          <path d="M28 34 L32 38 L38 30" />
        </svg>
      );
    case 'specialist':
      return (
        <svg {...common}>
          <circle cx="24" cy="18" r="6" />
          <path d="M12 40 Q24 28 36 40" />
          <line x1="34" y1="10" x2="40" y2="10" />
          <line x1="37" y1="7" x2="37" y2="13" />
        </svg>
      );
    default:
      return <svg {...common}><rect x="10" y="10" width="28" height="28" /></svg>;
  }
}

// Architectural chart ornament — used in "About" or "How it works"
function BlueprintFrame({ children, label }) {
  return (
    <div style={{
      position: 'relative',
      padding: '32px 24px',
      border: '1px solid var(--line)',
      borderRadius: 4,
      background: 'var(--bg)',
    }}>
      <span className="asiz-eyebrow" style={{
        position: 'absolute', top: -10, left: 16,
        background: 'var(--bg)', padding: '0 8px',
      }}>{label}</span>
      {children}
    </div>
  );
}

// Decorative asterisk
function Asterisk({ size = 40, color = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" stroke={color} strokeWidth="1.5">
      <line x1="20" y1="4" x2="20" y2="36" />
      <line x1="4" y1="20" x2="36" y2="20" />
      <line x1="8" y1="8" x2="32" y2="32" />
      <line x1="32" y1="8" x2="8" y2="32" />
    </svg>
  );
}

Object.assign(window, { HouseArt, FeatureIcon, BlueprintFrame, Asterisk });