// Hours & Location — map placeholder, address, hours table
const hoursDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function HoursLocation() {
  const { SectionHeading, Button } = hoursDS;
  const { NAP, HOURS } = window;
  const { MapPinIcon, PhoneIcon, ClockIcon, ArrowRight } = window;
  const todayRow = [3, 0, 0, 0, 0, 1, 2][new Date().getDay()]; // Sun..Sat -> HOURS index

  return (
    <section id="hours" style={{ background: 'var(--cream-100)', padding: 'var(--section-y) 0' }} data-reveal>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <SectionHeading eyebrow="Come On In" title="Hours & Location"
          description="Find us on South Lewis — pickup, dine-in, and a whole lot of heat." />
        <div style={{
          display: 'grid', gap: 'clamp(20px, 3vw, 40px)', marginTop: 'clamp(30px, 3.5vw, 48px)',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', alignItems: 'stretch',
        }}>
          {/* Live Google Map */}
          <div style={{
            position: 'relative', minHeight: 340, borderRadius: 'var(--radius-lg)', overflow: 'hidden',
            border: '1px solid var(--cream-300)', boxShadow: 'var(--shadow-md)',
          }}>
            <iframe
              title="Thai Village Cuisine location"
              src="https://maps.google.com/maps?q=Thai%20Village%20Cuisine%208102%20S%20Lewis%20Ave%20Ste%20E%20Tulsa%20OK%2074137&z=15&output=embed"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div style={{ position: 'absolute', left: 18, right: 18, bottom: 18, background: 'var(--cream-50)', border: '1px solid var(--cream-300)', borderRadius: 'var(--radius-md)', padding: '14px 16px', boxShadow: 'var(--shadow-sm)', pointerEvents: 'none' }}>
              <div style={{ fontWeight: 700, color: 'var(--char-900)' }}>Thai Village Cuisine</div>
              <div style={{ color: 'var(--char-500)', fontSize: '0.9rem', marginTop: 2 }}>{NAP.address}</div>
              <a href="https://maps.google.com/?q=Thai+Village+Cuisine+8102+S+Lewis+Ave+Tulsa+OK" target="_blank" rel="noopener"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 8, color: 'var(--chili-500)', fontWeight: 700, fontSize: '0.9rem', pointerEvents: 'auto' }}>
                Get Directions <ArrowRight />
              </a>
            </div>
          </div>

          {/* Hours + contact */}
          <div style={{ background: 'var(--cream-50)', border: '1px solid var(--cream-300)', borderRadius: 'var(--radius-lg)', padding: 'clamp(22px, 3vw, 34px)', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--char-900)' }}>
              <span style={{ color: 'var(--gold-600)', fontSize: 20, display: 'inline-flex' }}><ClockIcon /></span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: '1.4rem', margin: 0 }}>Opening Hours</h3>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 16 }}>
              <tbody>
                {HOURS.map(([d, h], i) => {
                  const isToday = i === todayRow;
                  return (
                    <tr key={d} style={{ background: isToday ? 'var(--gold-100)' : 'transparent' }}>
                      <td style={{ padding: '11px 12px', fontWeight: isToday ? 700 : 600, color: 'var(--char-900)', borderBottom: '1px solid var(--cream-200)', borderRadius: isToday ? '8px 0 0 8px' : 0 }}>
                        {d}{isToday ? <span style={{ marginLeft: 8, fontSize: '0.7rem', color: 'var(--gold-600)', fontWeight: 700, letterSpacing: '0.08em' }}>TODAY</span> : null}
                      </td>
                      <td style={{ padding: '11px 12px', textAlign: 'right', color: 'var(--char-700)', fontVariantNumeric: 'tabular-nums', borderBottom: '1px solid var(--cream-200)', borderRadius: isToday ? '0 8px 8px 0' : 0 }}>{h}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            <div style={{ marginTop: 'auto', paddingTop: 22 }}>
              <Button variant="primary" size="lg" fullWidth href={NAP.tel} icon={<PhoneIcon />}>Call to Order: {NAP.phone}</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.HoursLocation = HoursLocation;