// Visit.jsx — locations, hours, map placeholder, get directions
const HOURS = [
  { day: 'Sunday', hrs: 'Closed', closed: true },
  { day: 'Monday', hrs: '8 AM – 2 PM' },
  { day: 'Tuesday', hrs: '8 AM – 3 PM' },
  { day: 'Wednesday', hrs: '8 AM – 3 PM' },
  { day: 'Thursday', hrs: '8 AM – 3 PM' },
  { day: 'Friday', hrs: '8 AM – 3 PM' },
  { day: 'Saturday', hrs: '8 AM – 2 PM' },
];

const isOpenNow = () => {
  const now = new Date();
  const h = HOURS[now.getDay()];
  if (h.closed) return false;
  const toMin = s => {
    const [t, p] = s.trim().split(' ');
    let hr = parseInt(t, 10);
    if (p === 'PM' && hr !== 12) hr += 12;
    if (p === 'AM' && hr === 12) hr = 0;
    return hr * 60;
  };
  const [open, close] = h.hrs.split(' – ').map(toMin);
  const cur = now.getHours() * 60 + now.getMinutes();
  return cur >= open && cur < close;
};

const Visit = () => {
  const todayIdx = new Date().getDay(); // 0=Sun, 1=Mon … matches HOURS order
  const [open, setOpen] = React.useState(isOpenNow());

  React.useEffect(() => {
    const id = setInterval(() => setOpen(isOpenNow()), 60_000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="visit" className="psd-section psd-section--visit">
      <div className="psd-visit-inner">
        <div className="psd-visit-copy psd-reveal psd-reveal--left">
          <div className="psd-script psd-section-script">Come on by</div>
          <h2 className="psd-section-title">Find us on Main.</h2>
          <p className="psd-visit-addr">
            <strong>123 Main Street</strong><br />
            Manchester, CT 06040
          </p>
          <div className="psd-visit-actions">
            <a
              className="psd-btn psd-btn--primary"
              href="https://maps.google.com/?q=123+Main+St+Manchester+CT"
              target="_blank"
              rel="noopener"
            >Get Directions <span aria-hidden="true">→</span></a>
            <a className="psd-btn psd-btn--secondary" href="tel:5551233634">Call (555) 123-3634</a>
          </div>

          <div className="psd-map-embed">
            <iframe
              title="Puerto Rican Deli location"
              src="https://www.google.com/maps?q=697+Main+St,+Manchester,+CT+06040&output=embed"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </div>

        <div className="psd-hours-card psd-reveal psd-reveal--right">
          <div className="psd-hours-card-head">
            <h3>Hours</h3>
            <span className={'psd-hours-status' + (open ? '' : ' psd-hours-status--closed')}>
              {open ? 'Open Now' : 'Closed'}
            </span>
          </div>
          <div className="psd-hours-list">
            {HOURS.map((h, i) => (
              <div key={h.day} className={'row' + (i === todayIdx ? ' today' : '') + (h.closed ? ' closed' : '')}>
                <span className="day">{h.day}</span>
                <span className="hrs">{h.hrs}</span>
                <span />
              </div>
            ))}
          </div>
          <div className="psd-hours-card-foot">
            <span>Holidays may vary — call ahead</span>
            <a href="tel:5551233634" className="ph">(555) 123-3634</a>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Visit = Visit;