// Noise comparison sub-block — anchors the 55 dBA setback claim against
// everyday reference points. Lives at the bottom of the Day/Night section
// (paired with the "quiet at night" theme). Not a nav entry.
function NoiseComparison() {
  // Ordered quiet → loud. The data center row is rendered with a special
  // "pinned" treatment: pale navy fill, navy border, "Project" tag.
  const REF_MAX = 90; // dBA — width scale anchor (Lawn mower)
  const PIN = 55;     // dBA — data center setback

  const rows = [
    { label: 'Whisper',                    sub: 'human voice, soft',     value: 30 },
    { label: 'Library',                    sub: 'ambient interior',      value: 40 },
    { label: 'Refrigerator',               sub: 'hum at 1 m',            value: 50 },
    { label: 'Data Center',                sub: 'at 150 ft setback',     value: PIN, pinned: true },
    { label: 'Conversation',               sub: 'two people, normal',    value: 60 },
    { label: 'Highway traffic',            sub: 'at 50 ft',              value: 75 },
    { label: 'Lawn mower',                 sub: 'at 5 m',                value: 90 },
  ];

  return (
    <div className="noise-block">
      <div className="container-x">
        <div className="noise-head">
          <Reveal delay={1}>
            <div className="eyebrow"><span className="dot" /> Sound at the property line</div>
          </Reveal>
          <Reveal delay={2}>
            <h2 className="h2 noise-h2">
              Quieter than a normal conversation{' '}
              <span className="civic-emphasis">at the property line.</span>
            </h2>
          </Reveal>
          <Reveal delay={3}>
            <p className="noise-standfirst">
              Sound levels measured at the property line; subject to ordinance review.
            </p>
          </Reveal>
        </div>

        <Reveal as="div" className="noise-chart" delay={2}>
          {rows.map((r, i) => {
            const pct = Math.min((r.value / REF_MAX) * 100, 100);
            const kind = r.pinned ? 'pin' : (r.value < PIN ? 'quiet' : 'loud');
            return (
              <div key={r.label} className={`noise-row noise-row-${kind}`}>
                <div className="noise-label">
                  <span className="noise-label-name">{r.label}</span>
                  <span className="noise-label-sub">{r.sub}</span>
                  {r.pinned && <span className="noise-tag tag-mono">Project</span>}
                </div>
                <div className="noise-track">
                  <div
                    className={`noise-fill noise-fill-${kind}`}
                    style={{ '--w': `${pct}%`, animationDelay: `${0.08 * i}s` }}
                  />
                </div>
                <div className="noise-value tag-mono">{r.value} dBA</div>
              </div>
            );
          })}
        </Reveal>

      </div>

      <style>{`
        .noise-block {
          background: var(--paper);
          color: var(--ink);
          padding: 100px 0 110px;
          margin-top: 80px;
          border-top: 1px solid rgba(20,32,27,.12);
        }
        .noise-head {
          max-width: 760px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          margin-bottom: 48px;
        }
        .noise-h2 { margin: 6px 0 0; }
        .noise-standfirst {
          color: var(--slate-700);
          font-size: 18px;
          line-height: 1.45;
          margin: 6px 0 0;
          max-width: 580px;
        }

        .noise-chart {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 28px 0;
          border-top: 1px solid rgba(20,32,27,.16);
          border-bottom: 1px solid rgba(20,32,27,.16);
        }

        .noise-row {
          display: grid;
          grid-template-columns: 160px 1fr 80px;
          gap: 16px;
          align-items: center;
          padding: 10px 0;
        }
        .noise-row-pin {
          background: linear-gradient(90deg, rgba(219,231,244,.56), rgba(219,231,244,0) 80%);
          border-radius: 4px;
          padding: 14px 12px;
          margin: 4px -12px;
        }

        .noise-label {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }
        .noise-label-name {
          font-family: var(--font-display);
          font-size: 15px;
          font-weight: 500;
          color: var(--ink);
          letter-spacing: -0.005em;
        }
        .noise-label-sub {
          font-family: var(--font-body);
          font-style: normal;
          font-weight: 500;
          font-size: 13px;
          color: var(--slate-500);
          line-height: 1.25;
        }
        .noise-tag {
          margin-top: 4px;
          align-self: flex-start;
          padding: 2px 8px;
          border-radius: 999px;
          background: var(--forest-700);
          color: var(--cream-50);
          font-size: 9.5px;
          letter-spacing: .16em;
        }

        .noise-track {
          position: relative;
          height: 12px;
          background: rgba(20,32,27,.06);
          border-radius: 999px;
          overflow: hidden;
        }
        .noise-fill {
          height: 100%;
          width: 0;
          border-radius: inherit;
          animation: noise-fill .9s cubic-bezier(.2,.8,.25,1) both;
        }
        .noise-fill-quiet {
          background: linear-gradient(90deg, var(--forest-500), var(--forest-600));
        }
        .noise-fill-loud {
          background: linear-gradient(90deg, #6b7280, #374151);
        }
        .noise-fill-pin {
          background: var(--cream-200);
          border: 1px solid var(--forest-700);
          box-shadow: inset 0 0 0 1px rgba(11,58,109,.1);
          height: 100%;
        }

        @keyframes noise-fill {
          from { width: 0; }
          to { width: var(--w); }
        }
        /* Hold bars at 0 until the chart reveals into view, then play. */
        .reveal:not(.in) .noise-fill { animation-play-state: paused; }

        .noise-value {
          color: var(--slate-700);
          text-align: right;
          font-size: 12px;
          letter-spacing: .04em;
        }
        .noise-row-pin .noise-value {
          color: var(--forest-800);
          font-weight: 500;
        }
        .noise-row-pin .noise-label-name {
          color: var(--forest-900);
        }

        .noise-source {
          margin-top: 18px;
          color: var(--slate-500);
          font-size: 11px;
          line-height: 1.5;
        }

        /* Mobile: collapse to label-on-row-1, bar-on-row-2, value-aligned-right. */
        @media (max-width: 600px) {
          .noise-row {
            grid-template-columns: 1fr auto;
            row-gap: 6px;
            column-gap: 12px;
            padding: 12px 0;
          }
          .noise-track {
            grid-column: 1 / -1;
            order: 3;
          }
          .noise-value {
            text-align: right;
            order: 2;
            align-self: start;
          }
          .noise-label { order: 1; }
          .noise-row-pin { padding: 14px 12px; }
        }
        @media (max-width: 420px) {
          .noise-block { padding: 80px 0 90px; margin-top: 60px; }
          .noise-label-name { font-size: 14px; }
          .noise-label-sub { font-size: 12px; }
        }
      `}</style>
    </div>
  );
}
window.NoiseComparison = NoiseComparison;