// WhyItMatters.jsx — Dark impact section + before/after + service area

// ── Leaflet map — must be defined before WhyItMatters ──
const LeafletMap = () => {
  const mapRef = React.useRef(null);
  const instanceRef = React.useRef(null);

  React.useEffect(() => {
    if (!mapRef.current || instanceRef.current) return;
    const L = window.L;
    if (!L) return;

    const map = L.map(mapRef.current, {
      center: [42.95, -81.6],
      zoom: 8,
      zoomControl: true,
      scrollWheelZoom: false,
      attributionControl: false,
    });
    instanceRef.current = map;

    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { maxZoom: 19 }).addTo(map);

    const icon = L.divIcon({
      className: '',
      html: `<div style="width:14px;height:14px;border-radius:50%;background:#8B1020;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(139,16,32,0.55);"></div>`,
      iconSize: [14, 14],
      iconAnchor: [7, 7],
    });

    const cities = [
      { name: 'Sarnia', lat: 42.9994, lng: -82.3089 },
      { name: 'Wallaceburg', lat: 42.5972, lng: -82.3882 },
      { name: 'Chatham', lat: 42.4048, lng: -82.1910 },
      { name: 'St. Thomas', lat: 42.7757, lng: -81.1836 },
      { name: 'London', lat: 42.9849, lng: -81.2453 },
      { name: 'Port Stanley', lat: 42.6667, lng: -81.2167 },
      { name: 'Grand Bend', lat: 43.3167, lng: -81.7500 },
      { name: 'Bayfield', lat: 43.5650, lng: -81.6987 },
      { name: 'Strathroy', lat: 42.9550, lng: -81.6172 },
    ];

    cities.forEach(c => {
      L.marker([c.lat, c.lng], { icon })
        .addTo(map)
        .bindTooltip(c.name, {
          permanent: true, direction: 'top', offset: [0, -10], className: 'te-tooltip',
        });
    });

    const style = document.createElement('style');
    style.textContent = `.te-tooltip{background:#fff!important;border:1px solid #DCDAD7!important;border-radius:3px!important;color:#1A1210!important;font-family:'Raleway',sans-serif!important;font-size:11px!important;font-weight:700!important;padding:3px 7px!important;box-shadow:0 2px 8px rgba(0,0,0,.10)!important;white-space:nowrap!important;}.te-tooltip::before,.leaflet-tooltip-top.te-tooltip::before{display:none!important;}`;
    document.head.appendChild(style);

    return () => { map.remove(); instanceRef.current = null; };
  }, []);

  return <div ref={mapRef} style={{ width: '100%', height: '100%' }}></div>;
};

const WhyItMatters = () => {
  const [whyRef, whyInView] = window.useInView(0.1);
  const [areaRef, areaInView] = window.useInView(0.1);
  const benefits = [
    'Clean beer tastes the way it should.',
    'Happy customers come back.',
    'Fewer returns and complaints.',
    'Less waste. More profit.',
    'Your reputation stays strong.',
  ];

  const cities = ['Sarnia', 'St. Thomas', 'Wallaceburg', 'Port Stanley', 'Chatham', 'London', 'Grand Bend', 'Bayfield', 'Strathroy'];

  return (
    <div>
      {/* ── Why It Matters ── */}
      <section style={{ background: '#1A1210', padding: '96px 32px' }} id="why-it-matters">
        <div ref={whyRef} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>

          {/* Left */}
          <div style={{ opacity: whyInView ? 1 : 0, transform: whyInView ? 'translateX(0)' : 'translateX(-40px)', transition: 'opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <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' }}>Why It Matters</span>
            </div>
            <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(44px, 5.5vw, 68px)', fontWeight: 800, textTransform: 'uppercase', color: '#fff', lineHeight: 0.92, margin: '0 0 36px', letterSpacing: '-0.01em' }}>
              Clean Lines.<br />
              Better Beer.<br />
              <span style={{ color: '#E8B422' }}>Better Business.</span>
            </h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {benefits.map(b => (
                <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgba(139,16,32,0.25)', border: '1px solid rgba(139,16,32,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#8B1020" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <span style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.88)', lineHeight: 1.5 }}>{b}</span>
                </div>
              ))}
            </div>

            <button
              onClick={() => document.getElementById('assessment-form').scrollIntoView({ behavior: 'smooth' })}
              style={{ marginTop: 40, background: '#8B1020', color: '#fff', border: 'none', padding: '14px 28px', fontFamily: "'Raleway', sans-serif", fontSize: 12, fontWeight: 800, letterSpacing: '0.10em', textTransform: 'uppercase', cursor: 'pointer', borderRadius: 3, display: 'inline-flex', alignItems: 'center', gap: 10, transition: 'background 0.2s' }}
              onMouseEnter={e => e.currentTarget.style.background = '#6B0C18'}
              onMouseLeave={e => e.currentTarget.style.background = '#8B1020'}
            >
              Get a Free Assessment
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </button>
          </div>

          {/* Right — Before/After */}
          <div style={{ opacity: whyInView ? 1 : 0, transform: whyInView ? 'translateX(0)' : 'translateX(40px)', transition: 'opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s' }}>
            <div style={{ position: 'relative', borderRadius: 4, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.07)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>

                {/* Dirty */}
                <div style={{ position: 'relative', overflow: 'hidden', borderRight: '1px solid rgba(255,255,255,0.06)' }}>
                  <div style={{ height: 220, overflow: 'hidden', position: 'relative' }}>
                    <img src="https://images.unsplash.com/photo-1608270586620-248524c67de9?w=600&q=75&auto=format&fit=crop" alt="Dirty beer lines"
                      style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.35) brightness(0.55) sepia(0.3)', display: 'block' }} />
                    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 30%, rgba(20,10,5,0.85) 100%)' }}></div>
                  </div>
                  <div style={{ padding: '18px 20px 24px', background: '#1a1008' }}>
                    <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', marginBottom: 6 }}>Dirty Lines</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                      {['Off-flavors', 'Cloudy pour', 'Foam waste', 'Lost revenue'].map(t => (
                        <span key={t} style={{ fontFamily: "'Raleway',sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.35)', display: 'flex', alignItems: 'center', gap: 7 }}>
                          <svg width="9" height="9" viewBox="0 0 14 14" fill="none"><line x1="2" y1="2" x2="12" y2="12" stroke="#8B1020" strokeWidth="2.5"/><line x1="12" y1="2" x2="2" y2="12" stroke="#8B1020" strokeWidth="2.5"/></svg>
                          {t}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Clean */}
                <div style={{ position: 'relative', overflow: 'hidden' }}>
                  <div style={{ height: 220, overflow: 'hidden', position: 'relative' }}>
                    <img src="https://images.unsplash.com/photo-1544145945-f90425340c7e?w=600&q=80&auto=format&fit=crop" alt="Clean beer pour"
                      style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.15) brightness(0.75)', display: 'block' }} />
                    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 30%, rgba(20,16,4,0.85) 100%)' }}></div>
                  </div>
                  <div style={{ padding: '18px 20px 24px', background: '#1a1a08' }}>
                    <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(232,180,34,0.6)', marginBottom: 6 }}>Clean Lines</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                      {['Pure taste', 'Perfect pour', 'Zero waste', 'Happy customers'].map(t => (
                        <span key={t} style={{ fontFamily: "'Raleway',sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.65)', display: 'flex', alignItems: 'center', gap: 7 }}>
                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#E8B422" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                          {t}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* VS badge */}
              <div style={{
                position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
                width: 42, height: 42, borderRadius: '50%', background: '#8B1020',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'Raleway',sans-serif", fontSize: 12, fontWeight: 800, color: '#fff',
                zIndex: 5, border: '3px solid #1A1210', letterSpacing: '0.02em',
                boxShadow: '0 0 0 1px rgba(139,16,32,0.4)'
              }}>VS</div>
            </div>

            {/* Stats row */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 16 }}>
              {[
                { num: '14', unit: 'days', label: 'Cleaning cycle' },
                { num: '100%', unit: '', label: 'Line sanitization' },
                { num: '0', unit: '', label: 'Tolerance for shortcuts' },
              ].map(s => (
                <div key={s.label} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)', padding: '18px 16px', textAlign: 'center', borderRadius: 3 }}>
                  <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 26, fontWeight: 800, color: '#E8B422', lineHeight: 1 }}>{s.num}<span style={{ fontSize: 13, color: 'rgba(232,180,34,0.6)', fontWeight: 600 }}>{s.unit}</span></div>
                  <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.60)', marginTop: 4, letterSpacing: '0.04em' }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── Service Area ── */}
      <section style={{ background: '#fff', padding: '88px 32px' }} id="service-area">
        <div ref={areaRef} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div style={{ opacity: areaInView ? 1 : 0, transform: areaInView ? 'translateY(0)' : 'translateY(28px)', transition: 'opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s' }}>
            <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' }}>Service Area</span>
            </div>
            <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(28px, 3vw, 42px)', fontWeight: 800, textTransform: 'uppercase', color: '#0E0C0B', margin: '0 0 20px', lineHeight: 1.0 }}>
              Local Experts.<br />Fast. Dependable.<br />Nearby.
            </h2>
            <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15, color: '#706C6A', lineHeight: 1.7, margin: '0 0 32px', maxWidth: 420 }}>
              We proudly serve bars, restaurants, breweries, and hospitality venues across Southwestern Ontario. When you need us, we're already close by.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 28px' }}>
              {cities.map(city => (
                <div key={city} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: "'Raleway', sans-serif", fontSize: 14, color: '#0E0C0B', fontWeight: 600 }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#FDF0F1', border: '1.5px solid #F0A8B0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#8B1020" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  {city}
                </div>
              ))}
            </div>
          </div>

          {/* Leaflet Map */}
          <div style={{ borderRadius: 4, overflow: 'hidden', height: 320, border: '1px solid #F0D8DC', boxShadow: '0 4px 20px rgba(0,0,0,0.08)', opacity: areaInView ? 1 : 0, transform: areaInView ? 'translateX(0)' : 'translateX(32px)', transition: 'opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s' }}>
            <LeafletMap />
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { WhyItMatters, LeafletMap });