// Visit page

const { useState: useStateV } = React;

const DAYS = [
  { d: 'Monday',    h: '10:00 – 21:00' },
  { d: 'Tuesday',   h: '10:00 – 21:00' },
  { d: 'Wednesday', h: '10:00 – 21:00' },
  { d: 'Thursday',  h: '10:00 – 21:00' },
  { d: 'Friday',    h: '10:00 – 21:00', note: '(prayer-hour pause may apply)' },
  { d: 'Saturday',  h: '10:00 – 21:00' },
  { d: 'Sunday',    h: '10:00 – 21:00' },
];
const todayIdx = (new Date().getDay() + 6) % 7;  // Monday = 0

function VisitPage() {
  return React.createElement(Shell, { current: 'visit' }, ({ openConsult }) =>
    React.createElement(React.Fragment, null,
      React.createElement('section', { className: 'visit-hero' },
        React.createElement('div', { className: 'container' },
          React.createElement('div', { className: 'eyebrow', style: { marginBottom: 18 } }, 'Visit'),
          React.createElement('h1', null, 'In the ', React.createElement('em', null, 'heart'), ' of Gold & Diamond Park.'),
          React.createElement('p', null, 'A six-minute walk from Equiti Metro. Walk-ins welcome between 10am and 9pm — but a private consultation lets us prepare the right tray, the right stones and a quiet room for you.'),
          React.createElement('div', { style: { display: 'flex', gap: 12, marginTop: 28 } },
            React.createElement('button', { className: 'btn btn-primary', onClick: openConsult }, 'Book a Consultation'),
            React.createElement('a', { className: 'btn btn-ghost', href: 'https://wa.me/971568747327', target: '_blank' },
              React.createElement(Icons.whatsapp, { width: 16, height: 16 }), 'WhatsApp Us'),
          ),
        ),
      ),

      React.createElement('section', null,
        React.createElement('div', { className: 'container' },
          React.createElement('div', { className: 'visit-main' },
            React.createElement('div', null,
              React.createElement(MapTile, null),
              React.createElement('div', { style: { marginTop: 16, fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.04em' } },
                'Live Google Maps view · Shop 28, Building 1, Gold & Diamond Park.'),
            ),

            React.createElement('div', null,
              React.createElement('div', { className: 'eyebrow' }, 'The atelier'),
              React.createElement('h2', { className: 'serif', style: { fontSize: 36, fontWeight: 400, lineHeight: 1.15, margin: '14px 0 24px' } },
                'Shop 28, Building 1', React.createElement('br'),
                'Gold & Diamond Park', React.createElement('br'),
                React.createElement('span', { style: { color: 'var(--ink-muted)' } }, 'Sheikh Zayed Road, Al Quoz, Dubai'),
              ),

              React.createElement('div', { className: 'hours-block' },
                React.createElement('div', { className: 'eyebrow muted', style: { marginBottom: 14 } }, 'Hours · Daily'),
                ...DAYS.map((d, i) =>
                  React.createElement('div', { key: i, className: 'day-row' + (i === todayIdx ? ' today' : '') },
                    React.createElement('div', null, d.d, i === todayIdx && React.createElement('span', { className: 'now-tag' }, 'Today')),
                    React.createElement('div', null, d.h, d.note && React.createElement('span', { style: { fontSize: 11, color: 'var(--ink-muted)', marginLeft: 8 } }, d.note)),
                  ),
                ),
              ),

              React.createElement('div', { className: 'contact-card', style: { marginTop: 32 } },
                React.createElement('div', { className: 'eyebrow', style: { color: 'var(--accent)', marginBottom: 6 } }, 'Reach the atelier'),
                React.createElement('div', { className: 'channel' },
                  React.createElement('div', { className: 'name' }, 'Showroom'),
                  React.createElement('div', { className: 'value' }, React.createElement('a', { href: 'tel:+97143978786' }, '+971 4 397 8786')),
                ),
                React.createElement('div', { className: 'channel' },
                  React.createElement('div', { className: 'name' }, 'WhatsApp'),
                  React.createElement('div', { className: 'value' }, React.createElement('a', { href: 'https://wa.me/971568747327', target: '_blank' }, '+971 56 874 7327')),
                ),
                React.createElement('div', { className: 'channel' },
                  React.createElement('div', { className: 'name' }, 'Email'),
                  React.createElement('div', { className: 'value', style: { fontSize: 18 } }, React.createElement('a', { href: 'mailto:queendiamondsgdp@gmail.com' }, 'queendiamondsgdp@gmail.com')),
                ),
              ),

              React.createElement('div', { className: 'directions' },
                React.createElement('div', { className: 'eyebrow muted', style: { marginBottom: 12 } }, 'Getting here'),
                React.createElement(DirectionStep, { num: '1', body: React.createElement(React.Fragment, null, React.createElement('strong', null, 'Metro:'), ' Equiti Station on the Red Line. Exit toward Gold & Diamond Park; six minutes on foot.') }),
                React.createElement(DirectionStep, { num: '2', body: React.createElement(React.Fragment, null, React.createElement('strong', null, 'Car:'), ' Interchange 4 on Sheikh Zayed Road. Building 1 is the first row inside the park.') }),
                React.createElement(DirectionStep, { num: '3', body: React.createElement(React.Fragment, null, React.createElement('strong', null, 'Landmarks:'), ' Gargash Motors and Symmetry Gym are next door — Building 1 entrance faces the courtyard.') }),
                React.createElement(DirectionStep, { num: '4', body: React.createElement(React.Fragment, null, React.createElement('strong', null, 'Parking:'), ' free, on-site. Pull into the shaded bay closest to Building 1.') }),
              ),
            ),
          ),
        ),
      ),

      React.createElement(StorefrontSection, null),
    ),
  );
}

function DirectionStep({ num, body }) {
  return React.createElement('div', { className: 'direction-step' },
    React.createElement('div', { className: 'num' }, num),
    React.createElement('div', { className: 'text' }, body),
  );
}

function StorefrontSection() {
  return React.createElement('section', { className: 'section', style: { paddingTop: 0 } },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'editorial' },
        React.createElement('div', { className: 'img' }, React.createElement('img', { src: 'assets/storefront.webp', alt: 'Queen Diamonds storefront in Gold & Diamond Park' })),
        React.createElement('div', { className: 'body' },
          React.createElement('div', { className: 'eyebrow' }, 'The showroom'),
          React.createElement('h2', null, 'Glass, oak, and one bench in plain sight.'),
          React.createElement('p', null, 'The atelier is small on purpose. Loose stones, ring trays and the bench are all in the same room — so you can ask to see a stone under loupe, weigh metal, watch a setting come together. It\'s a working room, not a showroom theatre.'),
          React.createElement('p', null, 'There\'s no commission floor and no script. Bring questions; we have answers and certificates.'),
        ),
      ),
    ),
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(VisitPage));