/* global React */
const VLX_SERVICES = [
  { idx: '01', name: 'Shower Doors', blurb: 'Frameless and sliding enclosures fitted to natural stone and marble for a clean, spa-grade finish.', img: 'assets/services/shower.jpeg' },
  { idx: '02', name: 'Custom Mirrors', blurb: 'Made-to-measure mirrors — including organic, free-form shapes — that expand light and depth in any room.', img: 'assets/services/mirror.jpeg' },
  { idx: '03', name: 'Glass Walls & Partitions', blurb: 'Framed glass walls and room dividers that define space while keeping sightlines and light wide open.', img: 'assets/services/partitions.jpeg' },
  { idx: '04', name: 'Glass Table Tops', blurb: 'Custom-cut protective tops for coffee, dining, and accent tables — polished edges, perfect fit.', img: 'assets/services/tabletop.jpeg' },
  { idx: '05', name: 'Window Glass Repair', blurb: 'Fast replacement of cracked, fogged, or shattered window glass to restore clarity and safety.', img: 'assets/services/window.jpeg' },
];

function ServicesGrid({ onNavigate }) {
  const { Eyebrow, ServicePane, Button, LitEdge } = window.VailuxuryGlassDesignSystem_8a37c5;
  return (
    <section style={{ background: 'var(--glass)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <Eyebrow>What We Do</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em',
          fontSize: 'var(--fs-h2)', color: 'var(--ink)', margin: '14px 0 0', lineHeight: 1.08,
        }}>Crafted Solutions for Every Space</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-l)', lineHeight: 1.6, color: 'var(--text-dim)', maxWidth: '60ch', margin: '16px 0 0' }}>
          From spa-inspired bathrooms to striking commercial façades, our glasswork transforms the ordinary into the exceptional.
        </p>

        <div style={{ margin: '48px 0 0' }}><LitEdge /></div>

        <div className="vlx-svc-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          columnGap: '40px', rowGap: '48px', marginTop: '48px',
        }}>
          {VLX_SERVICES.map((s) => (
            <ServicePane key={s.idx} index={s.idx} name={s.name} blurb={s.blurb} image={s.img}
              href="#" onClickCapture={(e) => { e.preventDefault(); onNavigate && onNavigate('Services'); }} />
          ))}
        </div>

        <div style={{ marginTop: '52px', display: 'flex', justifyContent: 'center' }}>
          <Button variant="ghost" onClick={() => onNavigate && onNavigate('Services')}>View All Services</Button>
        </div>
      </div>
    </section>
  );
}
window.ServicesGrid = ServicesGrid;
window.VLX_SERVICES = VLX_SERVICES;