// agency-contact.jsx — bloc partagé "Contactez votre agence"
// Utilisé en bas des étapes /configure, /options et /booking.
// Tokens : utilise window.VA_TEAL si dispo, sinon fallback hardcodé.

const AC_TEAL    = (window.VA_TEAL    || '#11978f');
const AC_INK     = (window.VA_INK     || '#042828');
const AC_MUTED   = (window.VA_MUTED   || '#5B7A82');
const AC_SURFACE = (window.VA_SURFACE || '#FFFFFF');
const AC_BORDER  = (window.VA_BORDER  || 'rgba(4,40,40,0.08)');
const AC_BG_TEAL = (window.VA_TEAL_LIGHT || '#e7fcfb');

function AgencyContactBlock({ search, compact }) {
  return (
    <div className={`va-agency ${compact ? 'is-compact' : ''}`}>
      <div className="va-agency-body">
        <div className="va-agency-content">
          <div className="va-agency-head">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={AC_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 9l9-6 9 6v11a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2z"/>
            </svg>
            <div>
              <div className="va-agency-eyebrow">Une question&nbsp;? Contactez votre agence</div>
              <div className="va-agency-name">{search.agencyName}</div>
            </div>
          </div>
          <div className="va-agency-grid">
            <div className="va-agency-item va-agency-addr">
              <span className="va-agency-item-label">Adresse</span>
              <span className="va-agency-item-val">{search.agencyAddress}</span>
            </div>
            <a href={`tel:${(search.agencyPhone||'').replace(/\s/g,'')}`} className="va-agency-item is-link">
              <span className="va-agency-item-label">Téléphone</span>
              <span className="va-agency-item-val">{search.agencyPhone}</span>
            </a>
            <a href={`mailto:${search.agencyEmail}`} className="va-agency-item is-link">
              <span className="va-agency-item-label">Email</span>
              <span className="va-agency-item-val">{search.agencyEmail}</span>
            </a>
          </div>
        </div>
        {!compact &&
          <div className="va-agency-photo">
            <img src="Images/agence-conseillere.png" alt="Conseillère agence Van-Away" />
          </div>
        }
      </div>
      <style>{`
        .va-agency{padding:18px 20px;background:${AC_SURFACE};border:1px solid ${AC_BORDER};border-radius:16px}
        .va-agency-body{display:flex;align-items:center;gap:18px}
        .va-agency-content{flex:1;min-width:0}
        .va-agency-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
        .va-agency-eyebrow{font-size:11px;font-weight:900;color:${AC_TEAL};text-transform:uppercase;letter-spacing:1.4px}
        .va-agency-name{font-size:15px;font-weight:900;color:${AC_INK};margin-top:2px}
        .va-agency-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
        .va-agency.is-compact .va-agency-grid{grid-template-columns:1fr}
        .va-agency-item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:#fafaf6;border-radius:10px;text-decoration:none;transition:all .15s;min-width:0}
        .va-agency-item.is-link{cursor:pointer}
        .va-agency-item.is-link:hover{background:${AC_BG_TEAL}}
        .va-agency-item-label{font-size:10.5px;font-weight:900;color:${AC_MUTED};text-transform:uppercase;letter-spacing:1px}
        .va-agency-item-val{font-size:13px;font-weight:700;color:${AC_INK};line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .va-agency-photo{flex-shrink:0;width:130px;height:130px;display:flex;align-items:center;justify-content:center}
        .va-agency-photo img{width:100%;height:100%;object-fit:contain;display:block}
      `}</style>
    </div>
  );
}

window.AgencyContactBlock = AgencyContactBlock;