/* global React */
const VLX_SERVICE_DETAIL = [
  { name: 'Shower Doors', tagline: 'Spa Luxury, Every Single Day', body: 'Transform your bathroom into a private sanctuary. We fit frameless and sliding shower enclosures to natural stone, marble, and tile for a seamless, open feel.',
    aesthetic: 'Clean frameless lines and crystal-clear glass make any bathroom feel brighter, larger, and more luxurious.',
    functional: 'Premium tempered glass with corrosion-resistant hardware resists water spots, mold, and wear — easy to clean and built to last.',
    img: 'assets/services/shower-detail.jpeg' },
  { name: 'Custom Mirrors', tagline: 'Reflect Light. Expand Space. Elevate Design.', body: 'Custom mirrors do more than reflect — they transform. From statement vanity mirrors to full-length and free-form organic shapes, we cut and install with flawless precision.',
    aesthetic: 'Mirrors amplify natural light and visually double your space, adding depth and a sculptural focal point to any room.',
    functional: 'Made to measure with polished, beveled, or frameless edges and secure, professional mounting.',
    img: 'assets/services/mirror-detail.jpeg' },
  { name: 'Glass Walls & Partitions', tagline: 'Open Walls, Defined Spaces', body: 'Divide rooms, offices, and living areas with framed glass walls and partitions that separate space without closing it off.',
    aesthetic: 'A modern, minimalist look that keeps sightlines open and lets natural light flow through the whole space.',
    functional: 'Engineered tempered glass with sturdy framing and hardware for everyday durability and smooth operation.',
    img: 'assets/services/partitions-detail.jpeg' },
  { name: 'Glass Table Tops', tagline: 'Protect and Elevate Your Surfaces', body: 'Custom-cut glass tops for coffee, dining, and accent tables — protecting the surface underneath while adding a refined, finished look.',
    aesthetic: 'A clear, polished top that showcases the wood or design beneath and keeps it looking new.',
    functional: 'Precise measurements, tempered or polished-edge glass, and a perfect fit for daily use.',
    img: 'assets/services/tabletop-detail.jpeg' },
  { name: 'Window Glass Repair', tagline: 'Restore Clarity, Safety, and Function', body: 'Cracked, foggy, or shattered window glass? Our team delivers fast, reliable repairs and replacements to bring your windows back to their best.',
    aesthetic: 'Eliminate cracks, fogging, and damage so your windows look flawless and clear again.',
    functional: 'Prompt service restores safety, insulation, and weather sealing — with results that match the original.',
    img: 'assets/services/window-detail.jpeg' },
];

function ServicesView({ onQuote }) {
  const { Eyebrow, Button, LitEdge } = window.VailuxuryGlassDesignSystem_8a37c5;
  return (
    <div>
      <section style={{ background: 'var(--ink)', padding: 'calc(var(--section-y) * 0.8) 0 var(--section-y)' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <Eyebrow tone="dark">Our Services</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 'var(--fs-display-l)', color: 'var(--text-inv)', margin: '16px 0 0', lineHeight: 1.02 }}>Our Services</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-l)', lineHeight: 1.6, color: 'var(--text-inv)', opacity: 0.9, margin: '20px 0 32px', maxWidth: '56ch' }}>
            Precision glasswork for homes and businesses across Colorado. Whatever your vision, we bring it to life with clarity and craftsmanship.
          </p>
          <Button variant="primary" withArrow onClick={onQuote}>Request a Free Quote</Button>
        </div>
      </section>

      <section style={{ background: 'var(--glass)' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          {VLX_SERVICE_DETAIL.map((s, i) => (
            <div key={s.name}>
              <div className="vlx-svc-row" style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center',
                padding: 'var(--section-y) 0',
                direction: i % 2 === 1 ? 'rtl' : 'ltr',
              }}>
                <div style={{ direction: 'ltr', position: 'relative' }}>
                  <img src={s.img} alt={s.name} style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block', filter: 'saturate(0.92) brightness(1.02)' }} />
                  <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '2px', background: 'var(--lit-edge-h)', opacity: 0.7 }} />
                </div>
                <div style={{ direction: 'ltr' }}>
                  <Eyebrow>{s.name}</Eyebrow>
                  <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 'var(--fs-h2)', color: 'var(--ink)', margin: '14px 0 14px', lineHeight: 1.08 }}>{s.tagline}</h2>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 1.65, color: 'var(--text-dim)', margin: '0 0 22px' }}>{s.body}</p>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', marginBottom: '26px' }}>
                    <Bene label="Aesthetic" text={s.aesthetic} />
                    <Bene label="Functional" text={s.functional} />
                  </div>
                  <Button variant="ghost" onClick={onQuote}>Get a Quote for {s.name}</Button>
                </div>
              </div>
              {i < VLX_SERVICE_DETAIL.length - 1 && <LitEdge />}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function Bene({ label, text }) {
  return (
    <div style={{ display: 'flex', gap: '14px', alignItems: 'flex-start' }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.66rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--teal)', flex: 'none', width: '84px', paddingTop: '2px' }}>{label}</span>
      <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.55, color: 'var(--text)' }}>{text}</span>
    </div>
  );
}
window.ServicesView = ServicesView;