// Shared components for deals pages — placeholder image, status pill, deal card
const DealsMasthead = () => (
  <div className="v-masthead">
    <div className="v-masthead-left">
      <span className="v-masthead-dot"/>
      <span className="v-masthead-line">EXKLUSIV · NUR FÜR VIRTORUM-INVESTOREN &nbsp;·&nbsp; Q2 · 2026</span>
    </div>
    <a href="#kundenlogin" className="v-masthead-login">KUNDENLOGIN <span aria-hidden="true">→</span></a>
  </div>
);

const DealsNav = () => (
  <nav className="v-nav">
    <a className="v-nav-logo" href="/" style={{textDecoration:'none',color:'inherit'}}>
      <svg width="18" height="13" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter">
        <path d="M1 1L11 15L21 1"/><path d="M6 1L11 8L16 1"/>
      </svg>
      VIRTORUM
    </a>
    <div className="v-nav-links">
      <a href="/">Home</a>
      <a href="/deals" className="is-active">Aktuelle Deals</a>
      <a href="/#prozess">Prozess</a>
      <a href="/#team">Team</a>
      <a href="/#faq">FAQ</a>
    </div>
    <button className="v-btn-nav">Strategiegespräch →</button>
  </nav>
);

const StatusPill = ({ status }) => (
  <span className={`v-deal-status v-deal-status-${status}`}>
    <span className="v-deal-status-dot"/> {window.STATUS_LABELS[status]}
  </span>
);

// Image slot — renders a real photo if `imgSrc` is provided, otherwise an
// architectural line-art SVG keyed off property type.
const PropPlaceholder = ({ t, num, addr, imgSrc }) => {
  if (imgSrc) {
    return (
      <div className="v-deal-img">
        <img
          src={imgSrc}
          alt={addr || `Deal ${num}`}
          style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}
          loading="lazy"
        />
      </div>
    );
  }
  const stroke = 'var(--v-ink-soft)';
  const sw = 1;
  let art = null;
  if (t === 'SFR') art = (
    <g>
      <path d={"M60 210 L60 130 L160 70 L260 130 L260 210 Z"} stroke={stroke} strokeWidth={sw} fill="none"/>
      <path d={"M100 210 L100 150 L140 150 L140 210"} stroke={stroke} strokeWidth={sw} fill="none"/>
      <rect x={180} y={150} width={50} height={40} stroke={stroke} strokeWidth={sw} fill="none"/>
      <line x1={30} y1={210} x2={290} y2={210} stroke={stroke} strokeWidth={sw}/>
    </g>
  );
  else if (t === 'Duplex') art = (
    <g>
      <path d={"M40 210 L40 120 L160 60 L280 120 L280 210 Z"} stroke={stroke} strokeWidth={sw} fill="none"/>
      <line x1={160} y1={60} x2={160} y2={210} stroke={stroke} strokeWidth={sw}/>
      <rect x={75} y={150} width={35} height={50} stroke={stroke} strokeWidth={sw} fill="none"/>
      <rect x={205} y={150} width={35} height={50} stroke={stroke} strokeWidth={sw} fill="none"/>
      <line x1={20} y1={210} x2={300} y2={210} stroke={stroke} strokeWidth={sw}/>
    </g>
  );
  else art = (
    <g>
      <rect x={40} y={80} width={240} height={130} stroke={stroke} strokeWidth={sw} fill="none"/>
      {[0,1,2].map(r=>[0,1,2,3].map(c=>(
        <rect key={r+'-'+c} x={60+c*55} y={95+r*38} width={35} height={24} stroke={stroke} strokeWidth={sw} fill="none"/>
      )))}
      <line x1={20} y1={210} x2={300} y2={210} stroke={stroke} strokeWidth={sw}/>
    </g>
  );
  return (
    <div className="v-deal-img">
      <svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid meet">{art}</svg>
      <div className="v-deal-img-cap">[ Foto · #{num} ]</div>
    </div>
  );
};

// Short, URL-friendly id derived from the deal's UUID. For the seed
// rows (UUIDs ending in 0001..0009) this returns "1".."9". For random
// UUIDs we fall back to the trailing 4 hex chars so the URL stays
// short. Lookup logic in DealDetailApp accepts both forms.
const shortId = (uuid) => {
  if (!uuid) return '';
  const tail = String(uuid).replace(/-/g, '').slice(-4);
  const stripped = tail.replace(/^0+/, '');
  return stripped || tail;
};

// Preferred URL id for a deal — slug if the DB has one, otherwise short uuid.
const dealHref = (d) => {
  if (!d) return '';
  if (d.slug) return d.slug;
  return shortId(d.id);
};

Object.assign(window, { DealsMasthead, DealsNav, StatusPill, PropPlaceholder, shortId, dealHref });
