// Google Maps preview gated on cookie consent (house rule: no third-party
// iframe/cookie before the user accepts the "Cartographie" category).
function MapEmbed({ allowed, onReveal }) {
  const { Button, Icon } = window.PAOLIPlomberieDesignSystem_b9eca4;
  const address = "80 Avenue Léonard de Vinci, 34970 Lattes";
  const mapsSearchUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;

  if (allowed) {
    return (
      <iframe
        title="Localisation Paoli Plomberie"
        src={`https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`}
        style={{ width: '100%', height: '100%', border: 0, borderRadius: 'var(--radius-lg)' }}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
      ></iframe>
    );
  }

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        borderRadius: 'var(--radius-lg)',
        background: 'var(--surface-card-muted)',
        border: '1px solid var(--border-subtle)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 14,
        padding: 24,
        textAlign: 'center',
      }}
    >
      <Icon name="map-pin" size={28} color="var(--brand-cta)" />
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)', margin: 0, maxWidth: 280 }}>
        La carte Google Maps n'est chargée qu'après votre accord (dépôt de cookies tiers).
      </p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
        <Button size="sm" variant="cta" onClick={onReveal}>Afficher la carte</Button>
        <Button size="sm" variant="outline" as="a" href={mapsSearchUrl} target="_blank" rel="noopener">Voir sur Google Maps</Button>
      </div>
    </div>
  );
}
window.MapEmbed = MapEmbed;