// Environment — 4-beat compression.
//
// Question → Three numbers → Thesis → Check. Was cream (2026-05-13 rebuild
// retired an all-dark forest-950 band that read as "another site" against
// an otherwise all-white canon). 2026-08-03 design pass reintroduces dark —
// deliberately different this time: it's the ONE full-bleed dark editorial
// moment in a page that now alternates white/warm/ink tones on purpose, not
// an orphaned dark section in an all-light site. Numbers are honest and
// tied to commitments you can read in the site plan; on ink-navy they get
// the type-scale drama the brief asks for (bigger, wheat-lit, tighter
// leading) since this is the one section built to carry it.
function Environment() {
  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: .2 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const openSpace = useCountUp(10, { when: inView });
  const setback = useCountUp(150, { when: inView, duration: 1800 });

  return (
    <section id="environment" ref={ref} className="env-section">
      {/* Divider ornament — the one visible band-transition marker on the
          page: white Water above gives way to the ink-navy editorial band. */}
      <Textures.DividerTopo className="divider-topo env-topdivider" />

      {/* Signature texture — faint topo contour behind the big numbers.
          Opacity kept low enough that it never competes with the numerals. */}
      <div className="env-texture" aria-hidden>
        <Textures.Topo width={520} height={520} color="var(--wheat-500)" opacity={0.08} />
      </div>

      <div className="container-x">

        {/* Header */}
        <Reveal delay={1}>
          <div className="eyebrow on-ink env-eyebrow"><span className="kicker-num">04</span><span className="dot" /> Environment</div>
        </Reveal>

        {/* Resident question — calm-trust scale, attributed */}
        <Reveal delay={2}>
          <blockquote className="env-question">
            &ldquo;What about the deer? The night sky? The tree line?&rdquo;
          </blockquote>
        </Reveal>
        <Reveal delay={3}>
          <p className="env-question-attr">
            From neighbor conversations
          </p>
        </Reveal>

        {/* Three numbers — defensible, sourced as mock */}
        <Reveal delay={1}>
          <div className="env-numbers">
            <div className="env-col">
              <div className="font-display num env-stat">
                <span>{openSpace.toFixed(0)}</span>
                <span className="env-stat-unit">%+</span>
              </div>
              <div className="tag-mono env-stat-label">Open space, kept undeveloped</div>
              <div className="env-stat-note">Site plan commitment.</div>
            </div>
            <div className="env-col env-col-mid">
              <div className="font-display num env-stat">
                <span>{setback.toFixed(0)}</span>
                <span className="env-stat-unit env-stat-unit-sm">ft</span>
              </div>
              <div className="tag-mono env-stat-label">Setback at every property line</div>
              <div className="env-stat-note">Buffer for neighbors and wildlife.</div>
            </div>
            <div className="env-col">
              <div className="font-display num env-stat">
                <span>0</span>
              </div>
              <div className="tag-mono env-stat-label">Lights aimed up</div>
              <div className="env-stat-note">Dark-sky lighting standard.</div>
            </div>
          </div>
        </Reveal>

        {/* Thesis */}
        <Reveal delay={2}>
          <p className="font-display env-thesis">
            Construction stays inside the site.{' '}
            <span className="civic-emphasis">The edges stay as they were.</span>
          </p>
        </Reveal>

        {/* How you check */}
        <Reveal delay={3}>
          <div className="env-check">
            <div className="tag-mono env-check-k">How you check</div>
            <div className="font-display env-check-v">
              County engineer. Annual review. On file.
            </div>
          </div>
        </Reveal>

      </div>

      <style>{`
        /* Ink-navy editorial band (2026-08-03) — the one full-bleed dark
           moment on the page. Everything below is a direct color-and-
           border retune of the previous light-mode rules; structure and
           copy are untouched. */
        #environment.env-section {
          padding: 148px 0 152px;
          background: var(--ink-navy);
          border-top: 1px solid var(--on-ink-line);
          color: var(--on-ink-body);
          overflow: clip;
        }
        #environment .env-topdivider {
          position: absolute;
          top: -1px; left: 0; right: 0;
          color: var(--wheat-600);
        }
        #environment .env-texture {
          position: absolute;
          right: -60px; top: 50%; transform: translateY(-50%);
          pointer-events: none;
        }
        #environment .env-eyebrow {
          margin-bottom: 40px;
          position: relative;
        }

        /* Question — bigger, tighter leading (type-scale drama). */
        #environment .env-question {
          margin: 0;
          max-width: 1080px;
          font-family: var(--font-display);
          font-style: normal;
          font-weight: 700;
          font-size: clamp(32px, 4.6vw, 58px);
          line-height: 1.02;
          letter-spacing: -0.01em;
          color: var(--on-ink-heading);
          text-wrap: balance;
          position: relative;
        }
        #environment .env-question-attr {
          margin: 18px 0 0;
          font-family: var(--font-body);
          font-size: 13px;
          color: var(--on-ink-muted);
        }
        /* Numbers panel — oversized numerals in wheat, the section's one
           deliberate moment of typographic drama. */
        #environment .env-numbers {
          margin-top: 88px;
          padding: 48px 0;
          border-top: 1px solid var(--on-ink-line);
          border-bottom: 1px solid var(--on-ink-line);
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
        }
        #environment .env-col {
          padding-right: 32px;
        }
        #environment .env-col-mid {
          padding: 0 32px;
          border-left: 1px solid var(--on-ink-line);
          border-right: 1px solid var(--on-ink-line);
        }
        #environment .env-stat {
          font-size: clamp(64px, 8.6vw, 128px);
          font-weight: 500;
          line-height: .88;
          letter-spacing: -0.03em;
          color: var(--wheat-400);
          display: flex;
          align-items: baseline;
        }
        #environment .env-stat-unit {
          font-size: .42em;
          color: var(--wheat-600);
          margin-left: 4px;
        }
        #environment .env-stat-unit-sm {
          font-size: .38em;
          margin-left: 6px;
          letter-spacing: 0;
        }
        #environment .env-stat-label {
          color: var(--on-ink-muted);
          margin-top: 14px;
        }
        #environment .env-stat-note {
          margin-top: 6px;
          font-family: var(--font-body);
          font-style: normal;
          font-weight: 500;
          font-size: 13px;
          color: var(--on-ink-body);
          line-height: 1.4;
        }

        /* Thesis */
        #environment .env-thesis {
          margin: 64px 0 0;
          max-width: 980px;
          font-size: clamp(26px, 3.2vw, 44px);
          line-height: 1.14;
          letter-spacing: -0.016em;
          font-weight: 500;
          color: var(--on-ink-heading);
          text-wrap: balance;
          position: relative;
        }
        #environment .civic-emphasis { color: var(--wheat-400); }

        /* How you check */
        #environment .env-check {
          margin-top: 72px;
          padding-top: 32px;
          border-top: 1px solid var(--on-ink-line);
          display: grid;
          grid-template-columns: 180px 1fr;
          gap: 40px;
          align-items: baseline;
          position: relative;
        }
        #environment .env-check-k {
          color: var(--on-ink-muted);
          letter-spacing: .18em;
        }
        #environment .env-check-v {
          font-size: clamp(20px, 2vw, 26px);
          line-height: 1.3;
          color: var(--on-ink-heading);
          font-weight: 500;
          letter-spacing: -0.014em;
        }

        /* Source line */
        #environment .env-source {
          margin-top: 22px;
          color: var(--on-ink-muted);
          font-size: 11px;
          line-height: 1.5;
        }

        /* Responsive */
        @media (max-width: 960px) {
          #environment.env-section { padding: 100px 0 108px; }
          #environment .env-question { font-size: clamp(28px, 7vw, 48px); }
          #environment .env-numbers {
            grid-template-columns: 1fr;
            gap: 0;
            padding: 28px 0;
            margin-top: 64px;
          }
          #environment .env-col,
          #environment .env-col-mid {
            padding: 22px 0;
            border-left: none;
            border-right: none;
            border-bottom: 1px solid var(--on-ink-line);
          }
          #environment .env-numbers .env-col:last-child { border-bottom: none; }
          #environment .env-stat { font-size: clamp(48px, 16vw, 84px); }
          #environment .env-thesis { margin-top: 48px; }
          #environment .env-check {
            grid-template-columns: 1fr;
            gap: 12px;
            margin-top: 56px;
            padding-top: 24px;
          }
          #environment .env-texture { display: none; }
        }
      `}</style>
    </section>
  );
}
window.Environment = Environment;
