// shared-bits.jsx — atoms used by both directions

// Map placeholder — Leaflet-style with route line
function MapPlaceholder({ width = '100%', height = 320, theme = 'light' }) {
  const isDark = theme === 'dark';
  return (
    <div style={{
      width, height,
      borderRadius: 16,
      background: isDark
        ? 'linear-gradient(135deg, #1a1f1f, #0f1414)'
        : 'linear-gradient(135deg, #e8efe6, #d8e4d4)',
      position: 'relative',
      overflow: 'hidden',
      border: `1px solid ${isDark ? '#2a2a2e' : '#cfd9c8'}`,
    }}>
      {/* Grid */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: isDark ? 0.18 : 0.45 }}>
        <defs>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke={isDark ? '#3a4040' : '#9aaa90'} strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)"/>
        {/* Roads */}
        <path d="M 0 60 Q 100 80 220 70 T 480 90 T 720 120" stroke={isDark ? '#4a5050' : '#a8b29c'} strokeWidth="3" fill="none"/>
        <path d="M 0 180 Q 150 200 320 180 T 600 200 T 800 220" stroke={isDark ? '#4a5050' : '#a8b29c'} strokeWidth="3" fill="none"/>
        <path d="M 120 0 Q 140 100 100 200 T 80 360" stroke={isDark ? '#4a5050' : '#a8b29c'} strokeWidth="2.5" fill="none"/>
        <path d="M 380 0 Q 420 140 380 280 T 360 400" stroke={isDark ? '#4a5050' : '#a8b29c'} strokeWidth="2.5" fill="none"/>
        {/* Route */}
        <path d="M 80 280 L 120 240 L 200 220 L 280 180 L 340 140 L 420 100"
              stroke="var(--w-brand)" strokeWidth="3" fill="none" strokeLinecap="round"
              strokeDasharray="6 4"/>
      </svg>
      {/* Origin pin */}
      <div style={{
        position: 'absolute', left: 60, top: 260,
        width: 14, height: 14, borderRadius: '50%',
        background: '#0a0a0b', border: '3px solid #fff',
        boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
      }}/>
      {/* Destination pin */}
      <div style={{
        position: 'absolute', left: 400, top: 80,
        width: 36, height: 36, borderRadius: '50% 50% 50% 0',
        transform: 'rotate(-45deg)',
        background: 'var(--w-brand)',
        border: '3px solid #fff',
        boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#fff', transform: 'rotate(45deg)' }}/>
      </div>
      {/* ETA chip */}
      <div style={{
        position: 'absolute', bottom: 14, left: 14,
        padding: '8px 12px', borderRadius: 999,
        background: isDark ? 'rgba(10,10,11,0.9)' : 'rgba(255,255,255,0.95)',
        color: isDark ? '#fff' : '#0a0a0b',
        fontSize: 13, fontWeight: 700,
        display: 'flex', alignItems: 'center', gap: 6,
        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
        fontVariantNumeric: 'tabular-nums',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#3cc26d' }}/>
        ETA 9:23 · 12 min
      </div>
    </div>
  );
}

// Stat counter used by both directions
function StatNumber({ value, label, color = 'var(--w-brand)', size = 56 }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: size, fontWeight: 800,
        color, letterSpacing: '-0.04em', lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
      }}>{value}</div>
      <div style={{
        marginTop: 8,
        fontSize: 12, fontWeight: 600,
        color: 'var(--w-text-3)',
        letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>{label}</div>
    </div>
  );
}

// Tiny "as seen on" placeholder logo strip
function LogoStrip({ theme = 'light' }) {
  const color = theme === 'dark' ? 'rgba(255,255,255,0.55)' : 'rgba(10,10,11,0.55)';
  const logos = ['BUILDER WEEKLY', 'TRADESCRIPT', 'HVAC TODAY', 'PLUMBER REPORT', 'SPARK MAGAZINE'];
  return (
    <div style={{
      display: 'flex', gap: 48, justifyContent: 'center', flexWrap: 'wrap',
      alignItems: 'center',
    }}>
      {logos.map((l, i) => (
        <div key={i} style={{
          color,
          fontFamily: 'var(--font-display)',
          fontWeight: 700, fontSize: 13,
          letterSpacing: '0.18em',
        }}>{l}</div>
      ))}
    </div>
  );
}

// Customer portal "card" — fake browser-frame screen used in both directions
function PortalScreen({ width = 520, theme = 'light' }) {
  const isDark = theme === 'dark';
  return (
    <div style={{
      width, borderRadius: 14,
      overflow: 'hidden',
      background: isDark ? '#22201c' : '#fffdfa',
      border: `1px solid ${isDark ? '#38322b' : '#e3d8c9'}`,
      boxShadow: '0 30px 60px rgba(0,0,0,0.18)',
      fontFamily: 'var(--font-ui)',
    }}>
      {/* Browser chrome */}
      <div style={{
        padding: '10px 14px',
        background: isDark ? '#302c26' : '#f0ece6',
        display: 'flex', alignItems: 'center', gap: 8,
        borderBottom: `1px solid ${isDark ? '#38322b' : '#e3d8c9'}`,
      }}>
        <div style={{ display: 'flex', gap: 5 }}>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }}/>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }}/>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }}/>
        </div>
        <div style={{
          flex: 1, marginLeft: 10,
          background: isDark ? '#181714' : '#fffdfa',
          padding: '4px 12px', borderRadius: 6,
          fontSize: 11, color: isDark ? '#a8a8b0' : '#6f7177',
          fontFamily: 'var(--font-mono)',
          border: `1px solid ${isDark ? '#38322b' : '#e3d8c9'}`,
        }}>werkd.app/j/aria-russell-2847</div>
      </div>

      {/* Header */}
      <div style={{ padding: '20px 22px 16px', borderBottom: `1px solid ${isDark ? '#38322b' : '#e3d8c9'}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <WerkdMark size={32}/>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: isDark ? '#a8a8b0' : '#5a5a60' }}>Connors Mechanical</div>
            <div style={{ fontSize: 11, color: isDark ? '#8a8a92' : '#9a9ca3' }}>Quote #Q-1042 for Aria Russell</div>
          </div>
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: '20px 22px' }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: isDark ? '#8a8a92' : '#9a9ca3',
                      letterSpacing: '0.14em', marginBottom: 8 }}>
          SMART THERMOSTAT INSTALL · LABOR + PARTS
        </div>
        <div style={{
          fontSize: 36, fontWeight: 800,
          color: isDark ? '#f5f5f7' : '#171717',
          letterSpacing: '-0.03em',
          fontVariantNumeric: 'tabular-nums',
        }}>
          $420<span style={{ fontSize: 18, fontWeight: 500, color: isDark ? '#a8a8b0' : '#6f7177', marginLeft: 6 }}>.00</span>
        </div>
        <div style={{ fontSize: 12, color: isDark ? '#a8a8b0' : '#6f7177', marginTop: 4 }}>
          Includes Honeywell T9, zone-wire verification, app pairing.
        </div>

        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <button style={{
            flex: 1, padding: '12px',
            background: 'var(--w-brand)', color: '#fff',
            border: 'none', borderRadius: 6,
            fontSize: 13, fontWeight: 700,
            cursor: 'pointer',
          }}>Approve quote</button>
          <button style={{
            padding: '12px 16px',
            background: 'transparent', color: isDark ? '#f5f5f7' : '#171717',
            border: `1px solid ${isDark ? '#453e34' : '#d3c6b3'}`, borderRadius: 6,
            fontSize: 13, fontWeight: 600,
            cursor: 'pointer',
          }}>Pick a time</button>
        </div>

        <div style={{
          marginTop: 18, paddingTop: 14,
          borderTop: `1px solid ${isDark ? '#38322b' : '#e3d8c9'}`,
          display: 'flex', justifyContent: 'space-between',
          fontSize: 11, color: isDark ? '#8a8a92' : '#9a9ca3',
        }}>
          <span>Expires Friday 5pm</span>
          <span>Secure payment via Stripe</span>
        </div>
      </div>
    </div>
  );
}

// Chat / Photo Diagnosis result card
function ChatResultCard({ theme = 'dark', width = 380 }) {
  const isDark = theme === 'dark';
  return (
    <div style={{
      width,
      background: isDark ? '#22201c' : '#fffdfa',
      border: `1px solid ${isDark ? '#38322b' : '#e3d8c9'}`,
      borderRadius: 16,
      padding: 20,
      fontFamily: 'var(--font-ui)',
      boxShadow: '0 20px 40px rgba(0,0,0,0.12)',
      color: isDark ? '#f5f5f7' : '#171717',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          background: '#5BA4E626',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="camera" size={16} color="#5BA4E6" strokeWidth={2}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700 }}>Photo Diagnosis</div>
          <div style={{ fontSize: 11, color: isDark ? '#8a8a92' : '#9a9ca3' }}>Draft · review before sending</div>
        </div>
      </div>

      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>
        Likely issue
      </div>
      <div style={{ fontSize: 13, color: isDark ? '#a8a8b0' : '#6f7177', lineHeight: 1.5, marginBottom: 14 }}>
        Looks like a failed capacitor on the outdoor condenser — the bulged top + brown residue are consistent with that. Suggested next step: 45/5 MFD dual-run replacement.
      </div>

      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', color: isDark ? '#8a8a92' : '#9a9ca3', marginBottom: 8 }}>
        DRAFT QUOTE LINES
      </div>
      <div style={{
        background: isDark ? '#1a1a1c' : '#f7f5ef',
        borderRadius: 10, padding: '10px 12px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 6,
      }}>
        <span style={{ fontSize: 12.5 }}>45/5 MFD dual-run capacitor</span>
        <span style={{ fontSize: 12.5, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>$38</span>
      </div>
      <div style={{
        background: isDark ? '#1a1a1c' : '#f7f5ef',
        borderRadius: 10, padding: '10px 12px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 14,
      }}>
        <span style={{ fontSize: 12.5 }}>Labor · 1 hr</span>
        <span style={{ fontSize: 12.5, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>$140</span>
      </div>

      <button style={{
        width: '100%', padding: 12,
        background: 'var(--w-brand)', color: '#fff',
        border: 'none', borderRadius: 6,
        fontSize: 13, fontWeight: 700,
        cursor: 'pointer',
      }}>Review & send to Aria →</button>
    </div>
  );
}

Object.assign(window, { MapPlaceholder, StatNumber, LogoStrip, PortalScreen, ChatResultCard });