/* global React */
const VLX_VALUES = [
  { label: 'Premium Quality', title: 'Only the finest materials', body: 'Only the finest tempered glass and high-grade hardware, engineered to perform and impress for years.' },
  { label: 'Precision Craftsmanship', title: 'Measured twice, cut once', body: 'Every measurement, every cut, every finish — executed with meticulous attention to detail.' },
  { label: 'Proudly Local to Colorado', title: 'A team that knows the region', body: 'A trusted local team that knows the Vail Valley and treats every project as if it were our own.' },
  { label: 'Customer-First Commitment', title: 'A relationship that lasts', body: 'Transparent pricing, dependable timelines, and a relationship that lasts well beyond installation.' },
];

function WhyChooseUs() {
  const { Eyebrow, ValueItem, LitEdge } = window.VailuxuryGlassDesignSystem_8a37c5;
  return (
    <section style={{ background: 'var(--ink)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <Eyebrow tone="dark">The Vailuxury Difference</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em',
          fontSize: 'var(--fs-h2)', color: 'var(--text-inv)', margin: '14px 0 0', lineHeight: 1.08, maxWidth: '20ch',
        }}>We don't just install glass — we deliver an experience</h2>

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

        <div className="vlx-values-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '40px' }}>
          {VLX_VALUES.map((v) => (
            <ValueItem key={v.label} label={v.label} title={v.title} tone="dark">{v.body}</ValueItem>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyChooseUs = WhyChooseUs;