// Sustainability / LEED
const Sustainability = () => (
  <section style={{ background: 'var(--bone-100)', padding: 'var(--sp-10) 0' }}>
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--page-pad-x)' }}>
      <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'end', marginBottom: 96, paddingBottom: 32, borderBottom: '1px solid rgba(10,22,40,0.15)' }}>
        <div className="eyebrow">── (08) · Sustainability</div>
        <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
          Coastal buildings<br />that <em style={{ fontStyle: 'italic', color: 'var(--brass-500)' }}>survive the climate</em><br />they're built in.
        </h2>
      </div>

      <div className="sust-grid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 96, alignItems: 'start' }}>
        <div className="reveal">
          <p style={{ fontSize: 'var(--fs-xl)', lineHeight: 1.5, color: 'var(--navy-900)', marginBottom: 40, maxWidth: '40ch' }}>
            Salt air, storm exposure, rising insurance costs, and ESG-reporting requirements have converged on one brief: build hospitality that lasts and measurably lowers operating carbon.
          </p>
          <p style={{ fontSize: 'var(--fs-base)', lineHeight: 1.6, color: 'var(--ink-700)', marginBottom: 32, maxWidth: '56ch' }}>
            Our LEED-accredited staff guides projects from Silver through Platinum. We specify materials that meet salt-spray and embodied-carbon criteria simultaneously — the specification most coastal hospitality owners have had to trade between, historically.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid rgba(10,22,40,0.15)', marginTop: 40 }}>
            {[
              ['Silver +', '11 certified'],
              ['Gold +', '7 certified'],
              ['Platinum', '2 certified'],
              ['In review', '4 projects'],
            ].map(([k, v], i) => (
              <div key={k} style={{ padding: 24, borderRight: i % 2 === 0 ? '1px solid rgba(10,22,40,0.15)' : 'none', borderBottom: i < 2 ? '1px solid rgba(10,22,40,0.15)' : 'none' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-500)', marginBottom: 8 }}>{k}</div>
                <div style={{ fontSize: 'var(--fs-xl)', fontFamily: 'var(--font-display)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal" style={{ '--reveal-delay': '100ms' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {[
              { k: 'Embodied carbon', v: '22% avg. reduction versus baseline across last 8 new-builds', meta: 'EC3 · LCA-verified' },
              { k: 'Operational energy', v: 'On-site renewables integrated on 4 resort projects since 2022', meta: 'Solar-ready envelopes standard' },
              { k: 'Coastal materials', v: 'Salt-spray rated cladding, FRP doors, 316L fasteners spec-default', meta: 'ASTM B117 pass required' },
              { k: 'Water stewardship', v: 'Cisterns, greywater reuse, and native landscape spec on every Florida project', meta: 'FDEP + SFWMD liaison' },
            ].map(item => (
              <div key={item.k} style={{ padding: '24px 0', borderTop: '1px solid rgba(10,22,40,0.12)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--brass-600)', marginBottom: 8 }}>{item.k}</div>
                <div style={{ fontSize: 'var(--fs-lg)', letterSpacing: '-0.01em', marginBottom: 6 }}>{item.v}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{item.meta}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Sustainability = Sustainability;