// Environment & Water — dashboard-style section (dark)
function Environment() {
  // Animated radial for Water Usage Effectiveness
  const dialRef = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!dialRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: .3 });
    io.observe(dialRef.current);
    return () => io.disconnect();
  }, []);

  const reduction = useCountUp(70, { when: inView });
  const openSpace = useCountUp(10, { when: inView });
  const wue = useCountUp(0, { when: inView });

  const Ring = ({ pct, label, value, unit, accent }) => {
    const C = 2 * Math.PI * 56;
    const off = C - (pct/100) * C;
    return (
      <div style={{ position:'relative', width: 160, height: 160, margin: '0 auto' }}>
        <svg viewBox="0 0 140 140" width={160} height={160}>
          <circle cx="70" cy="70" r="56" stroke="rgba(255,255,255,.1)" strokeWidth="8" fill="none" />
          <circle cx="70" cy="70" r="56" stroke={accent} strokeWidth="8" fill="none" strokeLinecap="round"
            strokeDasharray={C} strokeDashoffset={off} transform="rotate(-90 70 70)"
            style={{ transition: 'stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)' }} />
        </svg>
        <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center' }}>
          <div className="font-display num" style={{ fontSize: 32, fontWeight: 600, color: 'white' }}>{value}<span style={{ fontSize: 16, color: accent, marginLeft: 2 }}>{unit}</span></div>
          <div className="tag-mono" style={{ color: 'rgba(255,255,255,.55)', marginTop: 2 }}>{label}</div>
        </div>
      </div>
    );
  };

  return (
    <section id="environment" ref={dialRef} style={{ padding: '140px 0 140px', background: 'var(--forest-950)', color: 'white' }}>

      <div className="container-x" style={{ position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, flexWrap: 'wrap', marginBottom: 48 }}>
          <div style={{ maxWidth: 720 }}>
            <Reveal><div className="eyebrow light"><span className="dot" /> Environment & water</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 18, color: 'var(--cream-50)' }}>Protecting drinking water, <span className="italic-serif" style={{ color: 'var(--accent)' }}>wells, and wildlife.</span></h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p style={{ color: 'rgba(255,255,255,.7)', fontSize: 16, lineHeight: 1.6, maxWidth: 440 }}>
              People in Piedmont have made it clear that protecting wells and local wildlife is not negotiable. The City's rules and this project's design both start from that point.
            </p>
          </Reveal>
        </div>

        {/* Top metrics */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 28 }}>
          <Reveal delay={1} className="glass-dark" style={{ borderRadius: 22, padding: 28 }}>
            <div className="tag-mono" style={{ color: 'rgba(255,255,255,.6)' }}>Air cooling (dry)</div>
            <Ring pct={100} label="Water Usage Effectiveness" value={wue.toFixed(0)} unit="" accent="var(--accent)" />
            <div style={{ color: 'rgba(255,255,255,.75)', fontSize: 14, textAlign: 'center', marginTop: 10, lineHeight: 1.55 }}>
              Zero water for cooling. Industry gold standard in water‑stressed areas.
            </div>
          </Reveal>
          <Reveal delay={2} className="glass-dark" style={{ borderRadius: 22, padding: 28 }}>
            <div className="tag-mono" style={{ color: 'rgba(255,255,255,.6)' }}>Closed‑loop liquid cooling</div>
            <Ring pct={reduction} label="Freshwater reduction" value={`up to ${reduction.toFixed(0)}`} unit="%" accent="var(--accent)" />
            <div style={{ color: 'rgba(255,255,255,.75)', fontSize: 14, textAlign: 'center', marginTop: 10, lineHeight: 1.55 }}>
              Water circulates internally in a sealed system — filled once at construction.
            </div>
          </Reveal>
          <Reveal delay={3} className="glass-dark" style={{ borderRadius: 22, padding: 28 }}>
            <div className="tag-mono" style={{ color: 'rgba(255,255,255,.6)' }}>Site design</div>
            <Ring pct={openSpace * 3} label="Open space (minimum)" value={openSpace.toFixed(0)} unit="%" accent="var(--accent)" />
            <div style={{ color: 'rgba(255,255,255,.75)', fontSize: 14, textAlign: 'center', marginTop: 10, lineHeight: 1.55 }}>
              Woodlands, meadows, stream buffers, trails, and landscaped buffers.
            </div>
          </Reveal>
        </div>

        {/* Detail rows */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <Reveal className="glass-dark" style={{ borderRadius: 22, padding: 28 }}>
            <div className="font-display" style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>Water, carefully managed</div>
            {[
              { label: 'Reclaimed wastewater', text: 'Used where possible — eliminates demand for potable water.' },
              { label: 'Potable water', text: 'Limited to life‑safety uses only: toilets, sinks, and fire suppression.' },
              { label: 'Treated discharge', text: 'Any cooling water is treated to city standards; no new chemicals introduced.' },
            ].map((r, i) => (
              <div key={i} style={{ padding: '14px 0', borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,.08)', display: 'grid', gridTemplateColumns: '180px 1fr', gap: 16 }}>
                <div className="font-display" style={{ fontSize: 14, fontWeight: 500, color: 'var(--accent)' }}>{r.label}</div>
                <div style={{ color: 'rgba(255,255,255,.75)', fontSize: 14.5, lineHeight: 1.55 }}>{r.text}</div>
              </div>
            ))}
          </Reveal>

          <Reveal delay={1} className="glass-dark" style={{ borderRadius: 22, padding: 28 }}>
            <div className="font-display" style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>A green campus that fits the land</div>
            {[
              { label: 'Natural edges', text: 'Most intensive activity kept interior, preserving perimeter for wildlife movement.' },
              { label: 'Dark-sky lighting', text: 'Standards reduce glare, protect night skies, preserve wildlife patterns.' },
              { label: 'Inward orientation', text: 'Generators and cooling equipment turned inward, away from property lines and streets.' },
              { label: 'Regulated construction', text: 'Land disturbance permits and SWPPP requirements protect soil and waterways.' },
            ].map((r, i) => (
              <div key={i} style={{ padding: '14px 0', borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,.08)', display: 'grid', gridTemplateColumns: '180px 1fr', gap: 16 }}>
                <div className="font-display" style={{ fontSize: 14, fontWeight: 500, color: 'var(--accent)' }}>{r.label}</div>
                <div style={{ color: 'rgba(255,255,255,.75)', fontSize: 14.5, lineHeight: 1.55 }}>{r.text}</div>
              </div>
            ))}
          </Reveal>
        </div>

        {/* For neighbors */}
        <Reveal delay={2} style={{ marginTop: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderRadius: 22, overflow: 'hidden', border: '1px solid rgba(255,255,255,.1)', background: 'rgba(255,255,255,.04)' }}>
            {[
              { t: 'No competition with water sources', s: 'Reclaimed wastewater prioritized; WUE 0 at air-cooled facilities.' },
              { t: 'Significant open space and natural setbacks', s: '10%+ preserved as open space; 150 ft setbacks required.' },
              { t: 'Dark-sky lighting to protect the night sky', s: 'Shielded fixtures; wildlife-friendly fencing standards.' },
            ].map((n, i) => (
              <div key={i} style={{ padding: '28px 28px', borderRight: i < 2 ? '1px solid rgba(255,255,255,.1)' : 'none' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, color: 'var(--accent)' }}>
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9 L7 13 L15 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  <span className="tag-mono" style={{ color: 'var(--accent)' }}>For neighbors</span>
                </div>
                <div className="font-display" style={{ fontSize: 18, fontWeight: 600, color: 'white' }}>{n.t}</div>
                <div style={{ color: 'rgba(255,255,255,.7)', fontSize: 14, marginTop: 6, lineHeight: 1.55 }}>{n.s}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        @media(max-width: 960px){
          #environment > .container-x > div:nth-child(2) { grid-template-columns: 1fr !important; }
          #environment > .container-x > div:nth-child(3) { grid-template-columns: 1fr !important; }
          #environment > .container-x > div:nth-child(4) > div { grid-template-columns: 1fr !important; }
          #environment > .container-x > div:nth-child(4) > div > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.1); }
          #environment .glass-dark [style*="grid-template-columns: 180px"] { grid-template-columns: 1fr !important; gap: 4px !important; }
        }
      `}</style>
    </section>
  );
}
window.Environment = Environment;
