// Water — plain-English rebuild, all on cream.
//
// Replaces the prior cream→dark→"0" reveal. The "0 liters/kWh" framing
// was technically defensible but reads as marketing-cute to anyone who
// knows data centers use *some* water for makeup, cleaning, and humidity.
// The new section answers the resident's real question with a defensible
// industry contrast: about 5% of the water a conventional cooling-tower
// design would use. Numbers are honest, and the campus
// is pinned in the low-water tier rather than claimed as zero.
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();
  }, []);

  // Industry-typical figures for an annual draw at a 720-acre campus.
  // The rank order matches published data center water
  // usage ranges (cooling-tower vs. hybrid vs. air-cooled).
  const REF_MAX = 360;   // M gallons / year — chart scale anchor
  const rows = [
    { k: 'high', label: 'Typical cooling-tower design', sub: 'Conventional water-cooled campus', value: 360 },
    { k: 'pin',  label: 'This campus',                  sub: 'Air-cooled. Water for cleaning, makeup, employee facilities — not the cooling loop.', value: 18, pinned: true },
    { k: 'low',  label: 'Lowest comparable design',     sub: 'Best-in-class air-cooled, theoretical minimum',  value: 10 },
  ];

  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="dot" /> Water</div></Reveal>
            <Reveal delay={2}>
              <h2 className="h2 wt-h2">
                About{' '}
                <span className="civic-emphasis">5% of the water</span>
                {' '}a typical campus would use.
              </h2>
            </Reveal>
            <Reveal delay={3}>
              <p className="wt-standfirst">
                Air-cooled by design. Water plays a small role — for cleaning, makeup, and employee facilities — not the cooling loop.
              </p>
            </Reveal>
          </div>
          <Reveal delay={3}>
            <p className="wt-deck">
              In Sample County, the aquifer is the well behind the house. Cattle. The family table. It&rsquo;s not abstract. So water use was a design constraint from the start, not an afterthought.
            </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">
              From Sample County listening sessions
            </p>
          </div>
        </Reveal>

        {/* Bar chart — two-tier contrast, this campus pinned, lowest comparable as the honest floor */}
        <div className="wt-chart-wrap">
          <Reveal>
            <div className="wt-chart-head">
              <span className="tag-mono wt-chart-eyebrow">Water use, gallons per year</span>
              <span className="wt-chart-context">A 720-acre campus, by cooling design.</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>
                    {r.pinned && <span className="wt-tag tag-mono">Project</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}M gal/yr</div>
                </div>
              );
            })}
          </Reveal>
        </div>

        {/* Named guide — less absolutist than the prior version */}
        <Reveal>
          <div className="wt-guide">
            <blockquote className="wt-guide-quote">
              An air-cooled campus this size uses about a twentieth of the water a cooling-tower design would. Most of what people picture when they hear &ldquo;data center water use&rdquo; goes away with the cooling tower.
            </blockquote>
            <p className="wt-guide-attr">
              <span className="wt-dash">&mdash;</span> Watershed consultant, Sample County
            </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>

        {/* Before / after — concrete and honest */}
        <Reveal>
          <div className="wt-prevpost">
            <div className="wt-prevpost-row">
              <span className="tag-mono wt-prevpost-k">Before this site</span>
              <span className="wt-prevpost-v">~15 million gallons a year. Cattle and irrigation.</span>
            </div>
            <div className="wt-prevpost-row">
              <span className="tag-mono wt-prevpost-k">After</span>
              <span className="wt-prevpost-v">~18 million gallons a year. Cleaning, makeup, and employee facilities — not the cooling loop.</span>
            </div>
          </div>
        </Reveal>

      </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);
        }
        #water .wt-sep { margin: 0 8px; }
        #water .wt-dim { opacity: .75; }

        /* Chart */
        #water .wt-chart-wrap {
          padding-top: 8px;
        }
        #water .wt-chart-head {
          display: flex;
          align-items: baseline;
          gap: 18px;
          flex-wrap: wrap;
          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 130px;
          gap: 18px;
          align-items: center;
          padding: 10px 0;
        }
        #water .wt-row-pin {
          background: linear-gradient(90deg, rgba(219,231,244,.64), rgba(219,231,244,0) 80%);
          border-radius: 4px;
          padding: 16px 14px;
          margin: 4px -14px;
        }
        #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-row-pin .wt-label-name { color: var(--forest-900); }
        #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-tag {
          margin-top: 6px;
          align-self: flex-start;
          padding: 2px 9px;
          border-radius: 999px;
          background: var(--forest-700);
          color: var(--cream-50);
          font-size: 9.5px;
          letter-spacing: .16em;
        }

        #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-pin {
          background: var(--cream-200);
          border: 1px solid var(--forest-700);
          box-shadow: inset 0 0 0 1px rgba(11,58,109,.1);
        }
        #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-row-pin .wt-value {
          color: var(--forest-800);
          font-weight: 500;
        }
        #water .wt-chart-source {
          margin-top: 18px;
          color: var(--slate-500);
          font-size: 11px;
          line-height: 1.5;
        }

        /* Guide */
        #water .wt-guide {
          margin-top: 64px;
          padding-left: clamp(20px, 2.4vw, 36px);
          border-left: 2px solid var(--forest-700);
          max-width: 880px;
        }
        #water .wt-guide-quote {
          margin: 0;
          font-family: var(--font-serif);
          font-style: normal;
          font-weight: 600;
          font-size: clamp(20px, 2vw, 26px);
          line-height: 1.42;
          letter-spacing: 0;
          color: var(--ink);
        }
        #water .wt-guide-attr {
          margin: 18px 0 0;
          font-family: var(--font-body);
          font-size: 13px;
          color: var(--slate-500);
        }
        #water .wt-dash { margin-right: 6px; color: var(--slate-500); }

        /* How you check */
        #water .wt-check {
          margin-top: 56px;
          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;
        }

        /* Before / after */
        #water .wt-prevpost {
          margin-top: 40px;
          padding-top: 24px;
          border-top: 1px solid rgba(20,32,27,.12);
          display: flex;
          flex-direction: column;
          gap: 14px;
          max-width: 880px;
        }
        #water .wt-prevpost-row {
          display: grid;
          grid-template-columns: 180px 1fr;
          gap: 18px;
          align-items: baseline;
        }
        #water .wt-prevpost-k {
          color: var(--slate-500);
          letter-spacing: .14em;
        }
        #water .wt-prevpost-v {
          color: var(--ink);
          font-family: var(--font-display);
          font-size: 15.5px;
          line-height: 1.5;
        }

        /* 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-prevpost-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;