/* global React */
function ContactView({ onQuote }) {
  const { Eyebrow, Button, LitEdge } = window.VailuxuryGlassDesignSystem_8a37c5;
  const details = [
    { label: 'Phone', value: '(970) 979-2022', note: 'Call us during business hours for fast assistance.' },
    { label: 'Email', value: 'sales@vailuxuryglassandmirror.com', note: 'We typically respond within one business day.' },
    { label: 'Visit / Service Area', value: '34510 US-6, Unit A7, Edwards Business Center, Edwards, CO', note: 'Proudly serving the Vail Valley and Colorado.' },
    { label: 'Business Hours', value: 'Mon–Fri 8:00 AM – 4:30 PM · Sat Closed · Sun Closed', note: '¡Hablamos Español!' },
  ];
  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">Contact</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 }}>Let's Talk Glass</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' }}>
            Have a project in mind or a question to ask? Our Colorado team is here to help. Reach out and we'll get back to you promptly.
          </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)' }}>
          <div className="vlx-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '0' }}>
            {details.map((d, i) => (
              <div key={d.label} style={{ padding: i === 0 ? '0 28px 0 0' : '0 28px', borderLeft: i === 0 ? 'none' : '1px solid color-mix(in srgb, var(--chrome) 50%, transparent)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.66rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--teal)' }}>— {d.label}</span>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', fontWeight: 500, lineHeight: 1.4, color: 'var(--ink)', margin: '14px 0 10px' }}>{d.value}</p>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', lineHeight: 1.55, color: 'var(--text-dim)', margin: 0 }}>{d.note}</p>
              </div>
            ))}
          </div>

          <div style={{ margin: 'var(--section-y) 0 0', position: 'relative' }}>
            <LitEdge />
            <div style={{ marginTop: '40px', position: 'relative', overflow: 'hidden', aspectRatio: '21 / 7', background: 'var(--ink-soft)' }}>
              <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?w=1800&q=80" alt="Map of Edwards, Colorado service area" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.5) brightness(0.7) hue-rotate(150deg)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(12,23,25,0.2), rgba(12,23,25,0.5))', display: 'flex', alignItems: 'flex-end', padding: 'var(--space-6)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--edge)' }}>Edwards Business Center · Edwards, CO</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--ink)', padding: 'var(--section-y) 0', textAlign: 'center' }}>
        <div style={{ maxWidth: '760px', margin: '0 auto', padding: '0 var(--gutter)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 'var(--fs-h2)', color: 'var(--text-inv)', margin: 0 }}>Prefer a Quick Estimate?</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-l)', color: 'var(--text-inv)', opacity: 0.9, margin: 0 }}>Skip the call and request your free, no-obligation quote online.</p>
          <Button variant="primary" size="lg" withArrow onClick={onQuote}>Get a Free Quote</Button>
        </div>
      </section>
    </div>
  );
}
window.ContactView = ContactView;