// Water — sourced rebuild (2026-08-02).
//
// The prior version led with an unsourced "About 5% of the water a typical
// campus would use" headline over a three-bar chart with no defensible
// denominator, and closed with a fabricated "Watershed consultant" quote.
// Both are gone. This version leads with a real, dated, attributable
// trajectory (one operator's own disclosed water-use-effectiveness numbers),
// a sourced air-cooled-vs-evaporative contrast, and a real per-site range —
// then keeps this campus's own illustrative figure, clearly badged as a
// demonstration number rather than a filed estimate.
// See docs/research/2026-08-02-elephants-evidence-briefs.md §1 for sourcing.
function Water() {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: .15 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  // Microsoft's own disclosed fleet-wide water-use effectiveness (WUE),
  // liters per kWh — a company-specific trajectory, not an industry
  // average. Source: Microsoft, "Inside Microsoft's two-decade push to cut
  // water intensity while scaling for growth," Official Microsoft Blog,
  // June 24, 2026.
  const REF_MAX = 2.3;
  const rows = [
    { k: 'high', label: 'Early-2000s fleet baseline', sub: 'Microsoft, company-wide disclosure', value: 2.3, unit: 'L/kWh' },
    { k: 'low',  label: '2025 fleet-wide',             sub: 'Microsoft, company-wide disclosure', value: 0.27, unit: 'L/kWh' },
  ];

  return (
    <section id="water" ref={ref} className="wt-section">
      <div className="container-x">

        {/* Heading row */}
        <div className="wt-head">
          <div style={{ maxWidth: 760 }}>
            <Reveal delay={1}><div className="eyebrow"><span className="kicker-num">03</span><span className="dot" /> Water</div></Reveal>
            <Reveal delay={2}>
              <h2 className="h2 wt-h2">
                Cooling technology has{' '}
                <span className="civic-emphasis">changed enormously</span>
                {' '}since the 2000s.
              </h2>
            </Reveal>
            <Reveal delay={3}>
              <p className="wt-standfirst">
                Early data centers commonly used water-intensive evaporative cooling. The honest question for any specific project is which system it actually uses — not which decade the coverage you've seen was describing.
              </p>
            </Reveal>
          </div>
          <Reveal delay={3}>
            <p className="wt-deck">
              In {SITE.county}, the aquifer is the well behind the house. Cattle. The family table. It&rsquo;s not abstract &mdash; which is exactly why the cooling system matters more than the decade a data center happened to be built.
            </p>
          </Reveal>
        </div>

        {/* Resident question — kept as a calm-trust callout, not a hero shout */}
        <Reveal delay={2}>
          <div className="wt-question-block">
            <blockquote className="wt-question">
              &ldquo;Will this campus drain my well?&rdquo;
            </blockquote>
            <p className="wt-question-attr">
              A fair question for any specific project — see how to check it below
            </p>
          </div>
        </Reveal>

        {/* Chart — one operator's own disclosed trajectory, dated and sourced */}
        <div className="wt-chart-wrap">
          <Reveal>
            <div className="wt-chart-head">
              <span className="tag-mono wt-chart-eyebrow">Water-use effectiveness, liters per kWh</span>
              <span className="wt-chart-context">Lower is less water per unit of computing. One operator's own disclosed numbers — not an industry average.</span>
            </div>
          </Reveal>
          <Reveal as="div" className="wt-chart" delay={1}>
            {rows.map((r, i) => {
              const pct = Math.min((r.value / REF_MAX) * 100, 100);
              return (
                <div key={r.label} className={`wt-row wt-row-${r.k}`}>
                  <div className="wt-label">
                    <span className="wt-label-name">{r.label}</span>
                    <span className="wt-label-sub">{r.sub}</span>
                  </div>
                  <div className="wt-track">
                    <div
                      className={`wt-fill wt-fill-${r.k}`}
                      style={{ '--w': `${pct}%`, animationDelay: `${0.12 * i}s` }}
                    />
                  </div>
                  <div className="wt-value tag-mono">{r.value} {r.unit}</div>
                </div>
              );
            })}
          </Reveal>
          <div className="wt-chart-source">
            <StatusBadge status="sourced" /> Microsoft, &ldquo;Inside Microsoft&rsquo;s two-decade push to cut water intensity while scaling for growth,&rdquo; Official Microsoft Blog, June 24, 2026. A company-specific trajectory — other operators and colocation providers moved at different paces, and many facilities built in the 2010s still use evaporative cooling.
          </div>
        </div>

        {/* Supporting sourced stats — the contrast and the real spread */}
        <Reveal>
          <div className="wt-support-row">
            <div className="wt-support-stat">
              <StatusBadge status="sourced" />
              <span className="font-display wt-support-num">Up to 90% less water</span>
              <span className="wt-support-label">Air-cooled / closed-loop cooling compared with traditional evaporative cooling towers</span>
              <span className="wt-support-source">Microsoft, Official Microsoft Blog, June 2026</span>
            </div>
            <div className="wt-support-stat">
              <StatusBadge status="sourced" />
              <span className="font-display wt-support-num">500,000 &ndash; 3,000,000 gal/day</span>
              <span className="wt-support-label">Real range across individual Google data centers in 2024, by climate and cooling design &mdash; &ldquo;data center water use&rdquo; was never one number</span>
              <span className="wt-support-source">Google 2024 Environmental Report</span>
            </div>
          </div>
        </Reveal>

        {/* This campus's own projected figure — kept, but clearly badged */}
        <Reveal>
          <div className="wt-project">
            <div className="wt-project-head">
              <StatusBadge status="illustrative" />
              <span className="tag-mono wt-project-k">This campus &mdash; demonstration figure</span>
            </div>
            <div className="wt-project-rows">
              <div className="wt-project-row">
                <span className="tag-mono wt-project-row-k">Before this site</span>
                <span className="wt-project-row-v">~15 million gallons a year. Cattle and irrigation.</span>
              </div>
              <div className="wt-project-row">
                <span className="tag-mono wt-project-row-k">This proposal</span>
                <span className="wt-project-row-v">~18 million gallons a year. Cleaning, makeup water, and employee facilities &mdash; not an evaporative cooling loop.</span>
              </div>
            </div>
            <p className="wt-project-note">
              A demonstration number for this template, not a filed engineering estimate. A real project would publish its own water budget with the assumptions behind it.
            </p>
          </div>
        </Reveal>

        {/* How you check */}
        <div className="wt-check">
          <span className="tag-mono wt-check-k">How you check</span>
          <span className="wt-check-v font-display">
            Quarterly water-use reports filed with the county. Public record.
          </span>
        </div>

      </div>

      <style>{`
        #water.wt-section {
          padding: 140px 0;
          background: var(--cream-50);
          border-top: 1px solid rgba(20,32,27,.08);
          color: var(--ink);
        }
        #water .wt-head {
          display: flex;
          align-items: end;
          justify-content: space-between;
          gap: 40px;
          flex-wrap: wrap;
          margin-bottom: 56px;
        }
        #water .wt-h2 { margin-top: 14px; }
        #water .wt-standfirst {
          color: var(--slate-700);
          font-size: 18px;
          line-height: 1.45;
          margin: 14px 0 0;
          max-width: 580px;
        }
        #water .wt-deck {
          color: var(--slate-700);
          font-size: 15px;
          line-height: 1.6;
          max-width: 460px;
          margin: 0;
        }

        /* Resident question — calm-trust, not hero shout */
        #water .wt-question-block {
          max-width: 880px;
          padding: 36px 0 28px;
          margin: 8px 0 56px;
          border-top: 1px solid rgba(20,32,27,.16);
          border-bottom: 1px solid rgba(20,32,27,.16);
        }
        #water .wt-question {
          margin: 0;
          font-family: var(--font-display);
          font-style: normal;
          font-weight: 700;
          font-size: clamp(30px, 4vw, 52px);
          line-height: 1.08;
          letter-spacing: 0;
          color: var(--ink);
        }
        #water .wt-question-attr {
          margin: 18px 0 0;
          font-family: var(--font-body);
          font-size: 13px;
          color: var(--slate-500);
        }

        /* Chart */
        #water .wt-chart-wrap {
          padding-top: 8px;
        }
        #water .wt-chart-head {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 24px;
        }
        #water .wt-chart-eyebrow {
          color: var(--slate-500);
          letter-spacing: .14em;
        }
        #water .wt-chart-context {
          color: var(--slate-700);
          font-size: 15px;
        }
        #water .wt-chart {
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 28px 0;
          border-top: 1px solid rgba(20,32,27,.16);
          border-bottom: 1px solid rgba(20,32,27,.16);
        }
        #water .wt-row {
          display: grid;
          grid-template-columns: 280px 1fr 100px;
          gap: 18px;
          align-items: center;
          padding: 10px 0;
        }
        #water .wt-label {
          display: flex;
          flex-direction: column;
          gap: 4px;
          min-width: 0;
        }
        #water .wt-label-name {
          font-family: var(--font-display);
          font-size: 15px;
          font-weight: 500;
          color: var(--ink);
          letter-spacing: -0.005em;
        }
        #water .wt-label-sub {
          font-family: var(--font-body);
          font-style: normal;
          font-weight: 500;
          font-size: 13px;
          color: var(--slate-500);
          line-height: 1.3;
        }

        #water .wt-track {
          position: relative;
          height: 14px;
          background: rgba(20,32,27,.06);
          border-radius: 999px;
          overflow: hidden;
        }
        #water .wt-fill {
          height: 100%;
          width: 0;
          border-radius: inherit;
          animation: wt-grow 1.0s cubic-bezier(.2,.8,.25,1) both;
        }
        #water .wt-fill-high {
          background: linear-gradient(90deg, #6b7280, #374151);
        }
        #water .wt-fill-low {
          background: linear-gradient(90deg, var(--forest-500), var(--forest-600));
        }
        @keyframes wt-grow {
          from { width: 0; }
          to   { width: var(--w); }
        }
        #water .reveal:not(.in) .wt-fill { animation-play-state: paused; }

        #water .wt-value {
          color: var(--slate-700);
          text-align: right;
          font-size: 12px;
          letter-spacing: .04em;
        }
        #water .wt-chart-source {
          margin-top: 18px;
          display: flex;
          align-items: baseline;
          gap: 10px;
          flex-wrap: wrap;
          color: var(--slate-500);
          font-size: 11.5px;
          line-height: 1.5;
        }

        /* Supporting sourced stats */
        #water .wt-support-row {
          margin-top: 48px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        #water .wt-support-stat {
          padding: 24px 24px 22px;
          border-radius: var(--r-md);
          background: var(--white);
          border: 1px solid var(--paper-warm-line);
          box-shadow: var(--shadow-sm);
          position: relative;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: 8px;
          transition: box-shadow .25s ease, transform .25s ease;
        }
        #water .wt-support-stat::before {
          content: "";
          position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, var(--wheat-500), var(--wheat-400));
        }
        #water .wt-support-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        @media (prefers-reduced-motion: reduce) { #water .wt-support-stat:hover { transform: none; } }
        #water .wt-support-num {
          font-size: 22px;
          font-weight: 600;
          color: var(--forest-900);
          letter-spacing: -0.01em;
          margin-top: 4px;
        }
        #water .wt-support-label {
          font-family: var(--font-body);
          font-size: 13.5px;
          line-height: 1.5;
          color: var(--slate-700);
        }
        #water .wt-support-source {
          font-family: var(--font-body);
          font-size: 11px;
          color: var(--slate-500);
          margin-top: 4px;
        }

        /* This campus's demonstration figure */
        #water .wt-project {
          margin-top: 56px;
          padding: 28px 28px 24px;
          border-radius: var(--r-md);
          background: rgba(107,114,128,.05);
          border: 1px dashed rgba(107,114,128,.3);
          box-shadow: var(--shadow-xs);
        }
        #water .wt-project-head {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        #water .wt-project-k {
          color: var(--slate-500);
          letter-spacing: .14em;
        }
        #water .wt-project-rows {
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        #water .wt-project-row {
          display: grid;
          grid-template-columns: 180px 1fr;
          gap: 18px;
          align-items: baseline;
        }
        #water .wt-project-row-k {
          color: var(--slate-500);
          letter-spacing: .14em;
        }
        #water .wt-project-row-v {
          color: var(--ink);
          font-family: var(--font-display);
          font-size: 15.5px;
          line-height: 1.5;
        }
        #water .wt-project-note {
          margin: 18px 0 0;
          color: var(--slate-500);
          font-size: 12.5px;
          line-height: 1.5;
        }

        /* How you check */
        #water .wt-check {
          margin-top: 44px;
          display: flex;
          align-items: baseline;
          gap: 14px;
          flex-wrap: wrap;
        }
        #water .wt-check-k {
          color: var(--slate-500);
          letter-spacing: .18em;
        }
        #water .wt-check-v {
          color: var(--forest-900);
          font-size: 15px;
        }

        /* Responsive */
        @media (max-width: 1024px) {
          #water .wt-row { grid-template-columns: 1fr; gap: 8px; }
          #water .wt-track { grid-column: 1 / -1; }
          #water .wt-value { text-align: left; }
          #water .wt-support-row { grid-template-columns: 1fr; }
          #water .wt-project-row { grid-template-columns: 1fr; gap: 6px; }
        }
        @media (max-width: 720px) {
          #water.wt-section { padding: 96px 0; }
          #water .wt-head { margin-bottom: 40px; }
          #water .wt-question { font-size: clamp(26px, 7.6vw, 44px); }
        }
      `}</style>
    </section>
  );
}
window.Water = Water;
