// Regulations — commitments list, all on cream.
//
// 10 concrete, plain-English commitments in a 2-column grid. Replaces the
// prior forest-950 dark band. Headline tuned to calm-trust ("binding rules,
// not promises") and audit beat added at the bottom.
function Regulations() {
  const items = [
    '150 ft setback at every property line.',
    '60 dBA noise cap at the property line, day and night.',
    'Buildings stay under 45 ft, below the tree line.',
    'Dark-sky lighting — no upward-aimed fixtures.',
    'No truck traffic on residential streets between 10 PM and 6 AM.',
    'Independent noise study before and after construction.',
    'Quarterly water-use reports filed with the county.',
    'Annual environmental review by the county engineer.',
    '100% renewable electricity contract by year three.',
    'Cash bond for future site cleanup, posted at construction start.',
  ];

  const Check = () => (
    <svg
      width="18"
      height="18"
      viewBox="0 0 20 20"
      fill="none"
      aria-hidden
      style={{ flex: '0 0 18px', marginTop: 2 }}
    >
      <circle cx="10" cy="10" r="9" stroke="var(--forest-700)" strokeWidth="1.2" fill="none" opacity=".25" />
      <path
        d="M5.5 10.2 L8.5 13 L14.5 6.8"
        stroke="var(--forest-700)"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </svg>
  );

  return (
    <section id="regulations" className="reg-section">
      <div className="container-x">

        {/* Header */}
        <div className="reg-head">
          <div style={{ maxWidth: 720 }}>
            <Reveal delay={1}>
              <div className="eyebrow"><span className="dot" /> Rules and commitments</div>
            </Reveal>
            <Reveal delay={2}>
              <h2 className="h2 reg-h2">
                The site lives under{' '}
                <span className="civic-emphasis">binding rules,</span>
                {' '}not promises.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={3}>
            <p className="reg-standfirst">
              The campus is bound by setbacks, hours, and reporting cadence — visible commitments rather than asserted intent.
            </p>
          </Reveal>
        </div>

        {/* Commitments grid */}
        <div className="reg-grid">
          {items.map((text, i) => (
            <Reveal
              key={i}
              delay={(i % 4) + 1}
              className="reg-row"
            >
              <Check />
              <span className="reg-text">{text}</span>
            </Reveal>
          ))}
        </div>

        {/* How you check */}
        <Reveal>
          <div className="reg-check">
            <span className="tag-mono reg-check-k">How you check</span>
            <span className="reg-check-v font-display">
              Site plan and ordinance language filed with the county. Public record.
            </span>
          </div>
        </Reveal>

      </div>

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

        /* Commitments grid */
        #regulations .reg-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          column-gap: 56px;
          row-gap: 4px;
          padding-top: 28px;
          border-top: 1px solid rgba(20,32,27,.18);
        }
        #regulations .reg-row {
          display: flex;
          gap: 14px;
          align-items: flex-start;
          padding: 14px 0;
          border-bottom: 1px dashed rgba(20,32,27,.12);
        }
        #regulations .reg-text {
          color: var(--ink);
          font-family: var(--font-display);
          font-size: 15px;
          line-height: 1.5;
          font-weight: 400;
          letter-spacing: -0.005em;
        }

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

        /* Responsive */
        @media (max-width: 720px) {
          #regulations.reg-section { padding: 96px 0; }
          #regulations .reg-grid { grid-template-columns: 1fr; column-gap: 0; }
          #regulations .reg-head { margin-bottom: 36px; }
        }
      `}</style>
    </section>
  );
}
window.Regulations = Regulations;