// Services.jsx — Value props + Service cards
const Services = () => {
  const [vpRef, vpInView] = window.useInView(0.1);
  const [svcRef, svcInView] = window.useInView(0.1);
  const valueProps = [
  { icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" /><circle cx="12" cy="9" r="2.5" /></svg>, title: 'Locally Owned', body: 'Proudly serving Southwestern Ontario with deep roots in the hospitality community.' },
  { icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg>, title: 'Quality Guaranteed', body: 'We use professional-grade equipment and proven processes — every time.' },
  { icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>, title: 'Fast Response', body: 'We show up on time and get the job done right, without cutting corners.' },
  { icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>, title: 'Real Relationships', body: 'Long-term partnerships built on trust, communication, and consistent results.' }];


  const services = [
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>, title: 'Draught Line Cleaning', body: 'Professional cleaning that removes mold, bacteria, and off-flavors — restoring your beer to its best.' },
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>, title: 'Line Installs & Repairs', body: 'From new tap systems to leak fixes, we install and repair with precision and minimal downtime.' },
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /><path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01" /></svg>, title: 'Preventative Maintenance', body: 'Scheduled maintenance keeps your system running clean and efficient — preventing issues before they start.' },
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></svg>, title: 'Bar & Restaurant Consulting', body: 'Optimize your draught system, reduce waste, and increase profitability with expert advice you can trust.' }];


  const [hoveredCard, setHoveredCard] = React.useState(null);

  return (
    <div>
      {/* ── Value Props ── */}
      <section style={{ background: '#fff', padding: '80px 32px' }} id="line-cleaning">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <div style={{ width: 24, height: 1.5, background: '#8B1020' }}></div>
              <span style={{ fontFamily: "'Raleway', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8B1020' }}>Not Brewery-Owned. Not Corporate.</span>
              <div style={{ width: 24, height: 1.5, background: '#8B1020' }}></div>
            </div>
            <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 800, textTransform: 'uppercase', color: '#0E0C0B', margin: 0, letterSpacing: '-0.01em' }}>
              Just Real People Who Care<br />About Your Beer.
            </h2>
          </div>

          <div ref={vpRef} style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {valueProps.map((v, i) =>
            <div key={v.title} style={{ textAlign: 'center', padding: '0 12px', opacity: vpInView ? 1 : 0, transform: vpInView ? 'translateY(0)' : 'translateY(24px)', transition: `opacity 0.6s ease ${i * 0.12}s, transform 0.6s ease ${i * 0.12}s` }}>
                <div style={{ width: 56, height: 56, borderRadius: '50%', border: '1.5px solid #DCDAD7', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px', color: '#8B1020', background: '#fff', transition: 'border-color 0.2s, background 0.2s' }}>
                  {v.icon}
                </div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15, fontWeight: 700, color: '#0E0C0B', marginBottom: 8, letterSpacing: '0.01em' }}>{v.title}</div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 13.5, color: '#706C6A', lineHeight: 1.65 }}>{v.body}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Photo Break ── */}
      <div style={{ position: 'relative', height: 280, overflow: 'hidden' }}>
        <img
          src="https://images.unsplash.com/photo-1436076863939-06870fe779c2?w=1800&q=80&auto=format&fit=crop"
          alt="Draught tap handles"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%', display: 'block', filter: 'brightness(0.45)' }} />
        
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, rgba(10,6,4,0.70) 0%, rgba(10,6,4,0.30) 50%, rgba(10,6,4,0.70) 100%)' }}></div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12 }}>
          <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(24px,3.5vw,42px)', fontWeight: 800, textTransform: 'uppercase', color: '#fff', letterSpacing: '0.04em', textAlign: 'center', lineHeight: 1.1, textShadow: '0 2px 12px rgba(0,0,0,0.4)' }}>BEER IS NOT JUST A DRINK; IT'S AN EXPERIENCE.

          </div>
          <div style={{ width: 48, height: 2, background: '#E8B422' }}></div>
          <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>Southwestern Ontario's Draught Specialists</div>
        </div>
      </div>

      {/* ── Services Grid ── */}
      <section style={{ background: '#F5F4F2', padding: '80px 32px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{ width: 24, height: 1.5, background: '#8B1020' }}></div>
              <span style={{ fontFamily: "'Raleway', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8B1020' }}>What We Do</span>
              <div style={{ width: 24, height: 1.5, background: '#8B1020' }}></div>
            </div>
            <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 800, textTransform: 'uppercase', color: '#0E0C0B', margin: 0 }}>Complete Draught Solutions</h2>
          </div>

          <div ref={svcRef} style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {services.map((s, i) =>
            <div key={s.title}
            onMouseEnter={() => setHoveredCard(i)}
            onMouseLeave={() => setHoveredCard(null)}
            style={{
              background: '#fff',
              border: `1px solid ${hoveredCard === i ? '#DCDAD7' : '#EEECEB'}`,
              borderTop: `3px solid ${hoveredCard === i ? '#8B1020' : '#EEECEB'}`,
              borderRadius: 4,
              padding: '32px 24px',
              cursor: 'default',
              transform: hoveredCard === i ? 'translateY(-3px)' : svcInView ? 'translateY(0)' : 'translateY(28px)',
              opacity: svcInView ? 1 : 0,
              boxShadow: hoveredCard === i ? '0 8px 28px rgba(0,0,0,0.10)' : '0 1px 4px rgba(0,0,0,0.04)',
              transition: `opacity 0.6s ease ${i * 0.1}s, transform 0.6s ease ${i * 0.1}s, box-shadow 0.25s ease, border-color 0.25s ease`
            }}>
                <div style={{ width: 48, height: 48, background: hoveredCard === i ? '#FDF0F1' : '#F5F4F2', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20, color: '#8B1020', transition: 'background 0.2s' }}>
                  {s.icon}
                </div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15.5, fontWeight: 700, color: '#0E0C0B', marginBottom: 10, lineHeight: 1.25 }}>{s.title}</div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 13.5, color: '#706C6A', lineHeight: 1.65 }}>{s.body}</div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>);

};

Object.assign(window, { Services });