function GlowDot() {
  const canvasRef = React.useRef(null);
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false });
    if (!gl) return;

    const vs = `attribute vec2 a_pos; void main(){gl_Position=vec4(a_pos,0,1);}`;
    const fs = `
      precision highp float;
      uniform float u_time;
      uniform vec2 u_res;
      void main(){
        vec2 uv=(gl_FragCoord.xy-u_res*0.5)/min(u_res.x,u_res.y);
        float d=length(uv);
        float pulse=0.5+0.5*sin(u_time*3.2);
        /* bright core — mimics bloom threshold pass */
        float core=0.0055/(d*d+0.0008);
        /* outer halo — mimics gaussian blur pass */
        float halo=0.012/(d+0.05)*pulse;
        /* sharp inner spark */
        float spark=exp(-d*28.0)*0.9*pulse;
        vec3 col=vec3(0.95,0.42,0.10)*(core+halo)+vec3(1.0,0.88,0.65)*spark;
        /* composite — same blend as UnrealBloomPass additive layer */
        float a=clamp(length(col)*2.2,0.0,1.0);
        gl_FragColor=vec4(col*a,a);
      }
    `;

    function mkShader(type, src) {
      const s = gl.createShader(type);
      gl.shaderSource(s, src); gl.compileShader(s); return s;
    }
    const prog = gl.createProgram();
    gl.attachShader(prog, mkShader(gl.VERTEX_SHADER, vs));
    gl.attachShader(prog, mkShader(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(prog); gl.useProgram(prog);

    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
    const loc = gl.getAttribLocation(prog, 'a_pos');
    gl.enableVertexAttribArray(loc);
    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

    const uTime = gl.getUniformLocation(prog, 'u_time');
    const uRes  = gl.getUniformLocation(prog, 'u_res');
    gl.uniform2f(uRes, canvas.width, canvas.height);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    let start = null;
    function frame(ts) {
      if (!start) start = ts;
      gl.uniform1f(uTime, (ts - start) / 1000);
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      rafRef.current = requestAnimationFrame(frame);
    }
    rafRef.current = requestAnimationFrame(frame);
    return () => cancelAnimationFrame(rafRef.current);
  }, []);

  return (
    <canvas ref={canvasRef} width={26} height={26}
      style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: 5, marginBottom: 2 }} />
  );
}

function BrowardBubble() {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (document.getElementById('broward-bubble-styles')) return;
    const style = document.createElement('style');
    style.id = 'broward-bubble-styles';
    style.textContent = `
      @keyframes broward-pulse {
        0%   { transform: scale(1);   opacity: 0.55; }
        65%  { transform: scale(1.7); opacity: 0; }
        100% { transform: scale(1.7); opacity: 0; }
      }
      @keyframes broward-pulse2 {
        0%   { transform: scale(1);   opacity: 0.35; }
        65%  { transform: scale(2.1); opacity: 0; }
        100% { transform: scale(2.1); opacity: 0; }
      }
      @keyframes broward-pop-in {
        0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
        55%  { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
        100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
      }
      @keyframes broward-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      .broward-btn:hover .broward-circle {
        transform: scale(1.1);
        box-shadow: 6px 6px 0 var(--ink-900);
      }
      @keyframes broward-click-glow {
        0%, 20% {
          text-shadow:
            0 0 6px  rgba(227,107,38,0.55),
            0 0 14px rgba(227,107,38,0.35),
            0 0 28px rgba(227,107,38,0.18);
          transform: scale(1);
        }
        5% {
          text-shadow:
            0 0 10px rgba(227,107,38,0.95),
            0 0 22px rgba(227,107,38,0.7),
            0 0 44px rgba(227,107,38,0.45),
            0 0 68px rgba(255,180,120,0.25);
          transform: scale(1.09);
        }
      }
      @keyframes broward-click-underline {
        0%, 100% { transform: scaleX(0.4); opacity: 0.45; }
        50%      { transform: scaleX(1);   opacity: 1; }
      }
      @keyframes broward-arrow-bounce {
        0%, 100% { transform: translateX(0); opacity: 0.6; }
        50%      { transform: translateX(4px); opacity: 1; }
      }
    `;
    document.head.appendChild(style);
  }, []);

  const requirements = [
    'Current rabies vaccination certificate',
    'Microchip number listed on the certificate (for the $25 rate)',
    'Annual renewal — valid from date of rabies vaccination, not purchase date',
  ];

  return (
    <div style={{ marginTop: 64, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>

      {/* Label above */}
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--accent)' }}>
        Broward County
      </div>

      {/* Bubble */}
      <button
        className="broward-btn"
        onClick={() => setOpen(true)}
        style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        aria-label="View Broward County pet registration info"
      >
        {/* Pulse rings */}
        <div style={{
          position: 'absolute', width: 130, height: 130, borderRadius: '50%',
          border: '2px solid var(--orange-500)',
          animation: 'broward-pulse 2.6s ease-out infinite',
          pointerEvents: 'none',
        }} />
        <div style={{
          position: 'absolute', width: 130, height: 130, borderRadius: '50%',
          border: '1.5px solid var(--orange-300)',
          animation: 'broward-pulse2 2.6s ease-out infinite 0.5s',
          pointerEvents: 'none',
        }} />

        {/* Main circle */}
        <div
          className="broward-circle"
          style={{
            width: 130, height: 130, borderRadius: '50%',
            background: 'var(--navy-600)',
            border: '3px solid var(--ink-900)',
            boxShadow: '4px 4px 0 var(--ink-900)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
            transition: 'transform 240ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 240ms ease',
            position: 'relative', zIndex: 1,
          }}
        >
          {/* Tag icon */}
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="none">
            <ellipse cx="12" cy="16" rx="5" ry="4.5" fill="var(--orange-400, #F5924A)"/>
            <circle cx="6" cy="10" r="2.3" fill="var(--orange-400, #F5924A)"/>
            <circle cx="18" cy="10" r="2.3" fill="var(--orange-400, #F5924A)"/>
            <circle cx="9" cy="5" r="2" fill="var(--orange-400, #F5924A)"/>
            <circle cx="15" cy="5" r="2" fill="var(--orange-400, #F5924A)"/>
          </svg>
          <span style={{
            fontFamily: 'var(--font-body)', fontSize: 9, fontWeight: 700,
            textTransform: 'uppercase', letterSpacing: '0.14em',
            color: 'rgba(255,255,255,0.65)', lineHeight: 1.3, textAlign: 'center',
          }}>Pet<br/>Tag Info</span>
        </div>
      </button>

      {/* Hint text */}
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg2)', margin: 0, textAlign: 'center', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
        <span style={{
          position: 'relative',
          fontFamily: 'var(--font-display)',
          fontWeight: 700,
          fontSize: 22,
          letterSpacing: '0.01em',
          color: 'var(--orange-500)',
          display: 'inline-block',
          animation: 'broward-click-glow 1.8s ease-in-out infinite',
          transformOrigin: 'center',
          padding: '0 4px',
          willChange: 'transform, text-shadow',
        }}>
          Click
          <span style={{
            position: 'absolute',
            left: 4, right: 4, bottom: 0,
            height: 2.5,
            background: 'var(--orange-500)',
            borderRadius: 2,
            transformOrigin: 'center',
            animation: 'broward-click-underline 1.8s ease-in-out infinite',
            boxShadow: '0 0 8px rgba(227,107,38,0.7)',
          }} />
        </span>
        <span style={{
          display: 'inline-block',
          color: 'var(--orange-500)',
          fontWeight: 700,
          animation: 'broward-arrow-bounce 1.8s ease-in-out infinite',
        }}>→</span>
        <span style={{ color: 'var(--fg3)' }}>to see county registration fees &amp; requirements</span>
      </p>

      {/* ── Expanded modal ── */}
      {open && (
        <>
          {/* Backdrop */}
          <div
            onClick={() => setOpen(false)}
            style={{
              position: 'fixed', inset: 0, zIndex: 200,
              background: 'rgba(13,12,10,0.6)',
              backdropFilter: 'blur(6px)',
              WebkitBackdropFilter: 'blur(6px)',
              animation: 'broward-fade-in 200ms ease forwards',
            }}
          />

          {/* Card */}
          <div style={{
            position: 'fixed', top: '50%', left: '50%', zIndex: 201,
            width: 'min(560px, 92vw)',
            background: '#fff',
            borderRadius: 20,
            border: '2px solid var(--ink-900)',
            boxShadow: '8px 8px 0 var(--ink-900)',
            padding: '36px 32px 28px',
            animation: 'broward-pop-in 420ms cubic-bezier(0.34,1.56,0.64,1) forwards',
          }}>
            {/* Close button */}
            <button
              onClick={() => setOpen(false)}
              style={{
                position: 'absolute', top: 14, right: 14,
                width: 32, height: 32, borderRadius: '50%',
                border: '1.5px solid var(--border)', background: 'var(--cream-100)',
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, color: 'var(--fg2)', fontFamily: 'var(--font-body)',
              }}
            >✕</button>

            {/* Header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
              <div style={{
                width: 52, height: 52, borderRadius: '50%',
                background: 'var(--navy-600)', border: '2px solid var(--ink-900)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <ellipse cx="12" cy="16" rx="5" ry="4.5" fill="var(--orange-400, #F5924A)"/>
                  <circle cx="6" cy="10" r="2.3" fill="var(--orange-400, #F5924A)"/>
                  <circle cx="18" cy="10" r="2.3" fill="var(--orange-400, #F5924A)"/>
                  <circle cx="9" cy="5" r="2" fill="var(--orange-400, #F5924A)"/>
                  <circle cx="15" cy="5" r="2" fill="var(--orange-400, #F5924A)"/>
                </svg>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--accent)', marginBottom: 4 }}>
                  Broward County Animal Care
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--ink-900)', margin: 0, lineHeight: 1 }}>
                  Pet Registration Fees
                </h3>
              </div>
            </div>

            {/* Fee cards */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
              {[
                { price: '$25', label: 'Microchipped', sub: 'Chip # on rabies certificate' },
                { price: '$55', label: 'Non-microchipped', sub: 'Save $30/yr — add a chip' },
              ].map(({ price, label, sub }) => (
                <div key={price} style={{ background: 'var(--cream-100)', border: '1.5px solid var(--border)', borderRadius: 12, padding: '18px 16px' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 32, fontWeight: 700, color: 'var(--navy-600)', lineHeight: 1 }}>{price}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: 'var(--ink-900)', margin: '6px 0 3px' }}>{label}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg2)' }}>{sub}</div>
                </div>
              ))}
            </div>

            {/* Requirements */}
            <div style={{ background: 'var(--cream-50)', border: '1px solid var(--border)', borderRadius: 10, padding: '14px 16px', marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--fg2)', marginBottom: 10 }}>
                To register your pet:
              </div>
              {requirements.map((req, i) => (
                <div key={i} style={{ display: 'flex', gap: 9, alignItems: 'flex-start', marginBottom: i < requirements.length - 1 ? 8 : 0 }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
                    <circle cx="12" cy="12" r="10" stroke="var(--orange-500)" strokeWidth="2"/>
                    <path d="M8 12l3 3 5-5" stroke="var(--orange-500)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg1)', lineHeight: 1.5 }}>{req}</span>
                </div>
              ))}
            </div>

            <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg3)', margin: 0, lineHeight: 1.6 }}>
              We can help with registration during your visit. Tags purchased at an approved veterinary office are subject to a service fee not exceeding $5.00 per tag.
            </p>
          </div>
        </>
      )}
    </div>
  );
}

function ServicesScreen({ onNav }) {
  const mob = useIsMobile();
  const services = [
    { cat: 'Wellness', t: 'Annual Exam', d: 'Nose-to-tail checkup. About 30 minutes.', price: 'from $65' },
    { cat: 'Wellness', t: 'Vaccinations', d: 'DHPP, rabies, bordetella, FVRCP.', price: 'varies' },
    { cat: 'Wellness', t: 'Microchip', d: 'Registered chip, takes five minutes.', price: '$55' },
    { cat: 'Dental',   t: 'Dental Cleaning', d: 'Full scale and polish under anesthesia with dental radiographs and IV fluids.', price: 'from $600' },
    { cat: 'Dental',   t: 'Extractions', d: 'Single or multiple, as needed.', price: 'quoted' },
    { cat: 'Surgery',  t: 'Spay / Neuter', d: 'Most weekdays. Same-day pickup.', price: 'quoted' },
    { cat: 'Surgery',  t: 'Soft-tissue', d: 'Mass removals, wound repair.', price: 'quoted' },
    { cat: 'Urgent',   t: 'Same-day exam', d: 'Call by 11am for today.', price: '$95 + care' },
    { cat: 'Urgent',   t: 'X-ray & Labs', d: 'In-house imaging and bloodwork.', price: 'varies' },
  ];
  const cats = ['All', 'Wellness', 'Dental', 'Surgery', 'Urgent'];
  const [tab, setTab] = React.useState('All');
  const shown = tab === 'All' ? services : services.filter(s => s.cat === tab);

  return (
    <div style={{ background: 'var(--cream-50)', minHeight: '100vh' }}>
      <NavBar active="Services" onNav={onNav} />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: mob ? '40px 20px' : '64px 40px' }}>
        <Eyebrow>What we do</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mob ? 44 : 64, color: 'var(--ink-900)', lineHeight: 1, margin: '10px 0 14px' }}>
          Services & pricing.
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: mob ? 15 : 18, color: 'var(--fg2)', maxWidth: 620, lineHeight: 1.6, marginBottom: 28 }}>
          Straightforward pricing, no mystery line items. If we can't help, we'll refer you to someone who can.
        </p>

        {/* Filter tabs */}
        <div style={{ display: 'flex', gap: mob ? 4 : 10, marginBottom: 28, borderBottom: '1.5px solid var(--border)', paddingBottom: 2, overflowX: 'auto' }}>
          {cats.map(c => (
            <button key={c} onClick={() => setTab(c)} style={{
              fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: mob ? 12 : 13,
              padding: mob ? '10px 14px' : '10px 18px', background: 'transparent', whiteSpace: 'nowrap',
              color: tab === c ? 'var(--navy-600)' : 'var(--fg2)', border: 'none', cursor: 'pointer',
              borderBottom: tab === c ? '2.5px solid var(--orange-500)' : '2.5px solid transparent',
              marginBottom: -2, letterSpacing: '0.04em'
            }}>{c}</button>
          ))}
        </div>

        <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 14, overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
          {shown.map((s, i) => (
            <div key={s.t} style={{
              display: 'grid',
              gridTemplateColumns: mob ? '1fr auto' : '110px 1fr auto',
              padding: mob ? '16px 18px' : '20px 24px',
              gap: mob ? '4px 12px' : 20, alignItems: mob ? 'start' : 'center',
              borderBottom: i < shown.length - 1 ? '1px solid var(--border)' : 'none'
            }}>
              {!mob && <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--accent)' }}>{s.cat}</div>}
              <div>
                {mob && <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--accent)', marginBottom: 2 }}>{s.cat}</div>}
                <div style={{ fontFamily: 'var(--font-display)', fontSize: mob ? 18 : 22, color: 'var(--ink-900)', lineHeight: 1 }}>{s.t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: mob ? 12 : 14, color: 'var(--fg2)', marginTop: 3 }}>{s.d}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: mob ? 12 : 14, color: 'var(--fg1)', fontWeight: 600, whiteSpace: 'nowrap' }}>{s.price}</div>
            </div>
          ))}
        </div>

        <BrowardBubble />
      </div>
      <Footer />
    </div>
  );
}

window.ServicesScreen = ServicesScreen;