// Testimonials.jsx — Reviews + CTA Band + Footer
const Testimonials = ({ onNav }) => {
  const [revRef, revInView] = window.useInView(0.1);
  const [ctaRef, ctaInView] = window.useInView(0.2);
  const reviews = [
    { stars: 5, text: 'Tap Estate transformed our beer program. Cleaner lines, better taste, and way less waste. Our customers definitely notice the difference.', name: 'Mike G.', business: 'The Imperial Bar & Grill, Sarnia' },
    { stars: 5, text: 'Professional, reliable, and easy to work with. They take the stress out of draught maintenance so we can focus on our guests.', name: 'Jenna R.', business: 'The Black Goose, London' },
    { stars: 5, text: "We wouldn't trust anyone else with our lines. Tap Estate is local, responsive, and truly cares about their work.", name: 'Dave H.', business: 'Port Stanley Brewing Co.' },
  ];

  const footerLinks = {
    'Services': ['Draught Line Cleaning', 'Line Installs & Repairs', 'Preventative Maintenance', 'Bar & Restaurant Consulting'],
    'Service Area': ['Sarnia', 'Wallaceburg · Chatham', 'St. Thomas · Port Stanley', 'London and surrounding'],
    'Quick Links': ['Services', 'Why It Matters', 'About Us', 'Reviews', 'Get a Free Line Assessment', 'All Services & Partners'],
  };

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

  return (
    <div>
      {/* ── Testimonials ── */}
      <section style={{ background: '#F5F4F2', padding: '88px 32px' }} id="reviews">
        <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 Our Clients Say</span>
              <div style={{ width: 24, height: 1.5, background: '#8B1020' }}></div>
            </div>
            {/* Star row */}
            <div style={{ display: 'flex', gap: 4, justifyContent: 'center', marginBottom: 12 }}>
              {[...Array(5)].map((_, i) => (
                <svg key={i} width="20" height="20" viewBox="0 0 24 24" fill="#E8B422"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
              ))}
            </div>
            <p style={{ fontFamily: "'Raleway',sans-serif", fontSize: 13, color: '#9A9692', margin: 0 }}>Trusted by bars, breweries, and restaurants across Southwestern Ontario</p>
          </div>

          <div ref={revRef} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {reviews.map((r, i) => (
              <div key={i}
                onMouseEnter={() => setHoveredCard(i)}
                onMouseLeave={() => setHoveredCard(null)}
                style={{
                  background: '#fff',
                  border: '1px solid #EEECEB',
                  borderRadius: 4,
                  padding: '32px 28px',
                  boxShadow: hoveredCard === i ? '0 8px 28px rgba(0,0,0,0.08)' : '0 1px 4px rgba(0,0,0,0.04)',
                  opacity: revInView ? 1 : 0,
                  transform: hoveredCard === i ? 'translateY(-2px)' : (revInView ? 'translateY(0)' : 'translateY(28px)'),
                  transition: `opacity 0.6s ease ${i * 0.15}s, transform 0.6s ease ${i * 0.15}s, box-shadow 0.25s ease`,
                  position: 'relative',
                }}>
                {/* Quote mark */}
                <div style={{ position: 'absolute', top: 20, right: 24, fontFamily: 'Georgia, serif', fontSize: 64, color: '#EEECEB', lineHeight: 1, userSelect: 'none' }}>"</div>
                <div style={{ display: 'flex', gap: 3, marginBottom: 20 }}>
                  {[...Array(r.stars)].map((_, j) => (
                    <svg key={j} width="14" height="14" viewBox="0 0 24 24" fill="#E8B422"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                  ))}
                </div>
                <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: 14.5, color: '#3C3432', lineHeight: 1.70, marginBottom: 24, fontStyle: 'italic', position: 'relative', zIndex: 1 }}>"{r.text}"</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#8B1020', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Raleway',sans-serif", fontSize: 14, fontWeight: 700, color: '#fff', flexShrink: 0 }}>
                    {r.name[0]}
                  </div>
                  <div>
                    <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 13.5, fontWeight: 700, color: '#0E0C0B' }}>{r.name}</div>
                    <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 12, color: '#9A9692' }}>{r.business}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA Band ── */}
      <section style={{ background: '#8B1020', padding: '72px 32px', position: 'relative', overflow: 'hidden' }}>
        {/* Background texture */}
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 80% 50%, rgba(232,180,34,0.08) 0%, transparent 60%)', pointerEvents: 'none' }}></div>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(to right, transparent, rgba(232,180,34,0.3), transparent)' }}></div>
        <div ref={ctaRef} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr auto', gap: 48, alignItems: 'center', position: 'relative', opacity: ctaInView ? 1 : 0, transform: ctaInView ? 'translateY(0)' : 'translateY(20px)', transition: 'opacity 0.7s ease, transform 0.7s ease' }}>
          <div>
            <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(232,180,34,0.8)', marginBottom: 12 }}>Ready to pour better beer?</div>
            <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(28px, 4vw, 46px)', fontWeight: 800, textTransform: 'uppercase', color: '#fff', margin: '0 0 8px', lineHeight: 1.0 }}>
              Get Your Free Line Assessment
            </h2>
            <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.65)', margin: 0 }}>
              No commitment. No pressure. Just honest advice from local experts.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }}>
            <button
              onClick={() => document.getElementById('assessment-form').scrollIntoView({ behavior: 'smooth' })}
              style={{ background: '#E8B422', color: '#1A1210', border: 'none', padding: '16px 32px', fontFamily: "'Raleway', sans-serif", fontSize: 13, fontWeight: 800, letterSpacing: '0.09em', textTransform: 'uppercase', cursor: 'pointer', borderRadius: 3, whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 10, transition: 'background 0.2s, transform 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.background = '#F5CC6A'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#E8B422'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              Book a Free Assessment →
            </button>
            <a href="tel:5192812337" style={{ fontFamily: "'Raleway', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.75)', textDecoration: 'none', letterSpacing: '0.04em' }}
              onMouseEnter={e => e.target.style.color = '#fff'}
              onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.75)'}
            >or call 519-281-2337</a>
          </div>
        </div>
      </section>

      {/* ── Footer ── */}
      <footer style={{ background: '#1A1210', padding: '64px 32px 28px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40, marginBottom: 52, paddingBottom: 52, borderBottom: '1px solid rgba(255,255,255,0.07)' }}>

            {/* Brand col */}
            <div>
              <img src="assets/tap-estate-logo.png" alt="Tap Estate" style={{ height: 30, filter: 'brightness(0) invert(1)', marginBottom: 20, display: 'block' }} />
              <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.70)', lineHeight: 1.7, margin: '0 0 24px', maxWidth: 230 }}>
                Premium draught beer services for bars, restaurants and hospitality venues across Southwestern Ontario.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg>, text: '519-281-2337', href: 'tel:5192812337' },
                  { icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>, text: 'info@tapestate.ca', href: 'mailto:info@tapestate.ca' },
                ].map(c => (
                  <a key={c.text} href={c.href} style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: "'Raleway', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.72)', textDecoration: 'none', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.50)'}
                  >
                    <span style={{ color: '#8B1020' }}>{c.icon}</span>
                    {c.text}
                  </a>
                ))}
              </div>
            </div>

            {/* Link cols */}
            {Object.entries(footerLinks).map(([title, links]) => (
              <div key={title}>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 20 }}>{title}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {links.map(l => (
                    <a key={l} href="#" onClick={e => e.preventDefault()}
                      style={{ fontFamily: "'Raleway', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.72)', textDecoration: 'none', transition: 'color 0.2s', lineHeight: 1.4 }}
                      onMouseEnter={e => e.target.style.color = '#fff'}
                      onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.72)'}
                    >{l}</a>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
              © 2025 Tap Estate. All Rights Reserved. &nbsp;·&nbsp; Proudly serving Southwestern Ontario
            </div>
            <div style={{ display: 'flex', gap: 20 }}>
              {['Privacy Policy', 'Terms of Service'].map(l => (
                <a key={l} href="#" onClick={e => e.preventDefault()}
                  style={{ fontFamily: "'Raleway', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.45)', textDecoration: 'none', transition: 'color 0.2s' }}
                  onMouseEnter={e => e.target.style.color = 'rgba(255,255,255,0.8)'}
                  onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.45)'}
                >{l}</a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

Object.assign(window, { Testimonials });