// Zone d'intervention + horaires/contact block
const ZoneContact = ({ phoneLink, phone }) => {
  // Dynamic opening hours based on Europe/Paris current day & time
  const getNowInParis = () => {
    try {
      const fmt = new Intl.DateTimeFormat('fr-FR', {
        timeZone: 'Europe/Paris',
        weekday: 'long',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      });
      const parts = fmt.formatToParts(new Date());
      const weekday = parts.find(p => p.type === 'weekday')?.value || '';
      const hour = parseInt(parts.find(p => p.type === 'hour')?.value || '0', 10);
      const minute = parseInt(parts.find(p => p.type === 'minute')?.value || '0', 10);
      // Map French day names to canonical (lowercase, no accents)
      const map = { 'lundi': 'Lundi', 'mardi': 'Mardi', 'mercredi': 'Mercredi', 'jeudi': 'Jeudi', 'vendredi': 'Vendredi', 'samedi': 'Samedi', 'dimanche': 'Dimanche' };
      const today = map[weekday.toLowerCase()] || 'Lundi';
      return { today, minutes: hour * 60 + minute };
    } catch (e) {
      const d = new Date();
      const days = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
      return { today: days[d.getDay()], minutes: d.getHours() * 60 + d.getMinutes() };
    }
  };

  const { today, minutes } = getNowInParis();

  // Each row defines opening windows in minutes-since-midnight
  const schedule = [
    { d: 'Lundi',    h: '08:30 – 12:00 · 14:00 – 18:30', windows: [[510, 720], [840, 1110]] },
    { d: 'Mardi',    h: '08:30 – 12:00 · 14:00 – 18:30', windows: [[510, 720], [840, 1110]] },
    { d: 'Mercredi', h: '08:30 – 12:00 · 14:00 – 18:30', windows: [[510, 720], [840, 1110]] },
    { d: 'Jeudi',    h: '08:30 – 12:00 · 14:00 – 18:30', windows: [[510, 720], [840, 1110]] },
    { d: 'Vendredi', h: '08:30 – 12:00 · 14:00 – 18:30', windows: [[510, 720], [840, 1110]] },
    { d: 'Samedi',   h: '09:00 – 12:00',                   windows: [[540, 720]] },
    { d: 'Dimanche', h: 'Fermé',                          windows: [], off: true },
  ];

  const todayRow = schedule.find(r => r.d === today);
  const isOpen = !!todayRow && todayRow.windows.some(([s, e]) => minutes >= s && minutes < e);

  return (
    <section className="zc-section">
      <div className="rp-container">
        <div className="zc-head">
          <span className="zc-eyebrow">Zone d'intervention</span>
          <h2>On vient à vous, partout en Vendée.</h2>
          <p>Pose à domicile ou sur votre lieu de travail — sans frais de déplacement.</p>
        </div>
        <div className="zc-grid">
          {/* Map - Vendée illustrée avec camion */}
          <div className="zc-map zc-map-photo">
            <img
              src="assets/rapid-domicile-offre.png"
              alt="Zone d'intervention Rapid Pare-Brise en Vendée — pose à domicile"
              className="zc-map-photo-img"
            />
          </div>

          {/* Contact / hours */}
          <div className="zc-contact">
            <div className="zc-card">
              <div className="zc-card-head">
                <div>
                  <div className="zc-card-tag">
                    <span className="zc-google">G</span>
                    <span>Établissement Google</span>
                    <span className="zc-rating">
                      <strong>4,9</strong>
                      <span className="zc-stars">★★★★★</span>
                      <span className="zc-rating-count">(312 avis)</span>
                    </span>
                  </div>
                  <h3>Rapid Pare-Brise Challans</h3>
                  <div className="zc-address">
                    <Icon name="check" size={14} />
                    Zone d'activité de la Boule d'Or — 85300 Challans
                  </div>
                </div>
                <div className={`zc-open ${isOpen ? '' : 'zc-closed'}`}>
                  <span className="zc-open-dot"></span>
                  {isOpen ? 'Ouvert' : 'Fermé'}
                </div>
              </div>

              <div className="zc-hours">
                {schedule.map((r, i) => (
                  <div key={i} className={`zc-row ${r.d === today ? 'today' : ''} ${r.off ? 'off' : ''}`}>
                    <span className="zc-day">{r.d}</span>
                    <span className="zc-time">{r.h}</span>
                  </div>
                ))}
              </div>

              <div className="zc-ctas">
                <a href={phoneLink} className="rp-btn rp-btn-primary rp-btn-lg" style={{ flex: 1, justifyContent: 'center' }}>
                  <Icon name="phone" size={16} /> Appeler · {phone}
                </a>
                <a href="#devis" className="rp-btn rp-btn-ink rp-btn-lg" style={{ flex: 1, justifyContent: 'center' }}>
                  <Icon name="zap" size={16} /> Prendre RDV
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ZoneContact = ZoneContact;