import React from 'react';

export function MapEmbed() {
  return (
    <section className="w-full h-[400px] md:h-[500px] bg-slate-200 relative overflow-hidden">
      {/* 
        Docelowo tutaj powinien znaleźć się kod iframe z Google Maps.
        Przykład:
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2505.465597792618!2d17.031980815754593!3d51.10006297957077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTHCsDA2JzAwLjIiTiAxN8KwMDInMDMuMCJF!5e0!3m2!1spl!2spl!4v1620000000000!5m2!1spl!2spl"
          width="100%"
          height="100%"
          style={{ border: 0 }}
          allowFullScreen={false}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          className="absolute inset-0"
        ></iframe>
      */}
      <div className="absolute inset-0 flex items-center justify-center bg-slate-200 border-y border-border">
        <div className="text-center p-6 bg-white/80 backdrop-blur-sm rounded-xl border border-white/50 shadow-sm max-w-sm mx-4">
          <svg className="w-12 h-12 text-primary/40 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
          </svg>
          <p className="font-semibold text-primary font-heading">Mapa Lokalizacji</p>
          <p className="text-sm text-text-muted mt-1">Tutaj zostanie osadzona interaktywna mapa Google (iframe).</p>
        </div>
      </div>
    </section>
  );
}