/* global React */
function AboutView({ onQuote, onNavigate }) {
  const { Eyebrow, Button, LitEdge, ValueItem } = window.VailuxuryGlassDesignSystem_8a37c5;
  const values = [
    { label: 'Precision First', title: 'No room for error', body: 'Glass leaves no room for error. We measure twice, cut once, and deliver results that fit perfectly every time.' },
    { label: 'Luxury by Design', title: 'In the details', body: 'We work exclusively with premium materials and finishes, because true luxury is in the details.' },
    { label: 'Local to Colorado', title: 'Proud to serve', body: 'As a local team, we know the area, value our neighbors, and stand behind every job.' },
    { label: 'Commitment to You', title: 'Your satisfaction', body: 'We communicate clearly, deliver on time, and treat your space with respect.' },
  ];
  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">About Us</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, maxWidth: '18ch' }}>Craftsmanship You Can See Through</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 0', maxWidth: '56ch' }}>
            At Vailuxury Glass & Mirror, we believe glass should be flawless — and so should the experience of working with us.
          </p>
        </div>
      </section>

      <section style={{ background: 'var(--glass)', padding: 'var(--section-y) 0' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center' }} className="vlx-about-grid">
          <div>
            <Eyebrow>Our Story</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 'var(--fs-h2)', color: 'var(--ink)', margin: '14px 0 18px', lineHeight: 1.1 }}>Built on Precision, Driven by Excellence</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 1.65, color: 'var(--text-dim)', margin: '0 0 16px' }}>
              The owners of the company personally install glass, windows, mirrors, and shower enclosures, from small to large sizes. Our negotiation and installation can be tailored to your project and budget, delivering the same precise, high-quality finish on every job — no matter the size.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 1.65, color: 'var(--text-dim)', margin: 0 }}>
              Based at our Edwards shop in the Vail Valley, we've earned the trust of homeowners and businesses across Colorado by treating each installation as a reflection of our reputation.
            </p>
          </div>
          <div style={{ position: 'relative' }}>
            <img src="assets/about-storefront.jpg" alt="Vailuxury Glass & Mirror storefront at the Edwards Business Center, Edwards, Colorado" style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block' }} />
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '2px', background: 'var(--lit-edge-h)', opacity: 0.7 }} />
          </div>
        </div>
      </section>

      <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">Our Values</Eyebrow>
          <div style={{ margin: '28px 0 44px' }}><LitEdge opacity={0.7} /></div>
          <div className="vlx-values-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '40px' }}>
            {values.map((v) => <ValueItem key={v.label} label={v.label} title={v.title} tone="dark">{v.body}</ValueItem>)}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--glass)', padding: 'var(--section-y) 0' }}>
        <div style={{ maxWidth: '900px', margin: '0 auto', padding: '0 var(--gutter)', textAlign: 'center' }}>
          <div className="lit-edge" style={{ maxWidth: '120px', margin: '0 auto 32px' }} />
          <blockquote style={{ fontFamily: 'var(--font-display)', fontWeight: 500, letterSpacing: '-0.02em', fontSize: 'clamp(1.5rem, 3vw, 2.2rem)', lineHeight: 1.2, color: 'var(--ink)', margin: 0 }}>
            "We approach every project with the precision of craftsmen and the care of neighbors. That's the Vailuxury promise."
          </blockquote>
          <div style={{ marginTop: '40px' }}>
            <Button variant="primary" withArrow onClick={onQuote}>Request a Free Quote</Button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.AboutView = AboutView;