// Community Dividend — animated flowchart showing where taxes go
function Dividend() {
  const dashRef = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!dashRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: .3 });
    io.observe(dashRef.current);
    return () => io.disconnect();
  }, []);
  const cap = useCountUp(13, { when: inView, duration: 1800 });
  const wages = useCountUp(2, { when: inView });

  return (
    <section id="dividend" ref={dashRef} style={{ padding: '140px 0', background: 'var(--paper)' }}>
      <div className="container-x">
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap', marginBottom: 40 }}>
          <div style={{ maxWidth: 720 }}>
            <Reveal><div className="eyebrow"><span className="dot" /> Community dividend · Tax impact</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 18 }}>Where the <span className="accent-underline">tax base</span> flows.</h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p style={{ color:'var(--slate-700)', fontSize: 16, lineHeight: 1.6, maxWidth: 480 }}>
              Data centers generate ongoing property taxes, sales/use taxes, utility franchise fees, and other public revenues. Under Oklahoma's tax structure, a large share goes directly to local school districts and colleges.
            </p>
          </Reveal>
        </div>

        {/* Flow diagram */}
        <Reveal className="card" style={{ padding: 28, position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1.4fr', gap: 32, alignItems: 'center', minHeight: 340, position: 'relative' }}>
            {/* Source */}
            <div style={{ background: 'var(--cream-100)', color: 'var(--ink)', borderRadius: 4, padding: 28, position: 'relative', overflow: 'hidden', border: '1px solid rgba(20,32,27,.08)' }}>
              <div style={{ position: 'absolute', inset: -20, opacity: .08, pointerEvents: 'none' }}>
                <div style={{ position: 'absolute', right: -40, top: -40, width: 160, height: 160, borderRadius: '50%', border: '1px solid var(--accent)' }} />
                <div style={{ position: 'absolute', right: -20, top: -20, width: 120, height: 120, borderRadius: '50%', border: '1px solid var(--accent)' }} />
              </div>
              <div className="tag-mono" style={{ color: 'var(--accent-deep)' }}>Source</div>
              <div className="font-display" style={{ fontSize: 22, fontWeight: 500, marginTop: 8, letterSpacing: '-0.01em' }}>Piedmont Technology Park</div>
              <div style={{ marginTop: 22, display:'flex', flexDirection:'column', gap: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid rgba(20,32,27,.12)', padding: '12px 0' }}>
                  <span className="tag-mono" style={{ color: 'var(--slate-500)' }}>Capital investment</span>
                  <span className="font-display num" style={{ fontWeight: 500, fontSize: 18 }}>${cap.toFixed(0)}B</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid rgba(20,32,27,.12)', padding: '12px 0' }}>
                  <span className="tag-mono" style={{ color: 'var(--slate-500)' }}>Avg. wages</span>
                  <span className="font-display num" style={{ fontWeight: 500, fontSize: 18 }}>{wages.toFixed(1)}× local</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '12px 0' }}>
                  <span className="tag-mono" style={{ color: 'var(--slate-500)' }}>Campus</span>
                  <span className="font-display num" style={{ fontWeight: 500, fontSize: 18 }}>720 ac.</span>
                </div>
              </div>
            </div>

            {/* Middle: revenue types */}
            <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
              {[
                'Ongoing property taxes',
                'Sales & use taxes',
                'Utility franchise fees',
                'Other public revenues',
              ].map((r, i) => (
                <div key={i} style={{ background: 'var(--forest-50)', border: '1px solid rgba(30,70,51,.15)', padding: '12px 16px', borderRadius: 14, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div className="font-display" style={{ fontWeight: 500, fontSize: 14 }}>{r}</div>
                  <span className="pip" />
                </div>
              ))}
            </div>

            {/* Destinations */}
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
              {[
                { t: 'Local schools', d: 'Large share of property tax goes directly to districts & colleges.', I: Icons.School },
                { t: 'Fire / EMS', d: 'Funding for first responders and public‑safety equipment.', I: Icons.Shield },
                { t: 'County services', d: 'Roads, records, public works — without shifting costs to households.', I: Icons.Bolt },
                { t: 'Relief for residents', d: 'Broader commercial base reduces pressure for future residential tax increases.', I: Icons.Home },
              ].map((d, i) => (
                <div key={i} style={{ padding: 16, borderRadius: 14, border: '1px solid rgba(10,24,18,.1)', background: 'white' }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 10, color: 'var(--forest-700)' }}>
                    <d.I size={20} />
                    <div className="font-display" style={{ fontWeight: 600, fontSize: 15 }}>{d.t}</div>
                  </div>
                  <div style={{ color: 'var(--slate-700)', fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>{d.d}</div>
                </div>
              ))}
            </div>

            {/* Flow SVG overlay (absolute) */}
            <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} aria-hidden>
              <defs>
                <linearGradient id="flow-g" x1="0" x2="1"><stop offset="0" stopColor="var(--accent)" stopOpacity=".8" /><stop offset="1" stopColor="var(--forest-700)" stopOpacity=".3" /></linearGradient>
              </defs>
              {[0.18, 0.38, 0.58, 0.78].map((y, i) => (
                <path key={i} d={`M 33% ${30 + i*76} Q 44% ${30 + i*76} 50% ${30 + i*76}`}
                      stroke="url(#flow-g)" strokeWidth="1.4" fill="none" className="flow-line" strokeDashoffset={i*3} />
              ))}
            </svg>
          </div>

          {/* Footnote */}
          <div style={{ marginTop: 28, padding: '16px 20px', background: 'var(--forest-50)', borderRadius: 14, display:'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--accent)' }} />
            <div style={{ color: 'var(--forest-900)', fontSize: 14 }}>
              <strong>Takes pressure off existing taxpayers.</strong> Major power, water, and sewer upgrades are paid for by the project and its utility agreements — not by shifting costs onto existing households.
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media(max-width: 1100px){ #dividend .card > div:first-child { grid-template-columns: 1fr !important; gap: 20px !important; } #dividend svg[aria-hidden] { display: none; } }
        @media(max-width: 720px){ #dividend .card > div:first-child > div:last-child { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}
window.Dividend = Dividend;
