// PillarsSection. 02 · The Pillars.
// Restyled to Concept C (Numbered Editorial List): full-width hairline-ruled
// rows, NO boxes. Oversized Cormorant numeral in the left margin, pillar name
// (Cormorant) + description (DM Sans) in the center column, and a right rail
// (mono label over a gold hairline over a short Cormorant-italic proof value).
// Rules thicken slightly down the list. Mostly gold + ink; zero coral.
// Self-contained: inline styles + a scoped <style> block. Reuses window
// globals SectionLabel and Headline. Honors prefers-reduced-motion.

const PillarsSection = () => {
  const PILLARS = [
    {
      n: '01',
      name: 'Operator-built',
      body: 'We’ve closed $5.5 billion in workforce housing deals. We’ve sat in the IC meetings. We don’t have to learn the work of your mission-driven business.',
      railLabel: 'Proof',
      railValue: '$5.5B in deals',
    },
    {
      n: '02',
      name: 'Outcome-priced and ROI-anchored',
      body: 'Every system we ship is tied to a measurable return. We underwrite the ROI case the same way you underwrite a deal: base, expected, and upside. Fixed scope, no SaaS seats, no hourly billing. We ship against the number.',
      railLabel: 'Proof',
      railValue: 'base / expected / upside',
    },
    {
      n: '03',
      name: 'AI-native and risk-mitigated',
      body: 'We rebuild your systems around what AI can do today, inside your existing tools, data, and controls. No off-the-shelf retrofit. We ship in stages, not all at once. Each stage has a clear success metric defined up front. If a stage doesn’t work, we roll it back before the next one starts.',
      railLabel: 'Proof',
      railValue: 'rolled back if it fails',
    },
    {
      n: '04',
      name: 'Speed to value',
      body: 'We ship the first production system in four to eight weeks. Each cycle ships before the next one starts. Every engagement traces back to money saved, housing units delivered, and return on investment.',
      railLabel: 'Proof',
      railValue: '4 to 8 weeks',
    },
  ];

  return (
    <section id="pillars" className="section">
      <div className="container">
        <SectionLabel number="02">The Pillars</SectionLabel>
        <Headline as="h2" size="d2">
          Four commitments. <em style={{ color: 'var(--fg-accent)', fontWeight: 500 }}>Every</em> engagement.
        </Headline>
        <p className="lead" style={{ marginTop: 32, marginBottom: 56 }}>
          These four themes appear in every major communication and every active engagement. The proof is what makes them more than marketing.
        </p>

        <div className="pillars-list">
          {PILLARS.map((p, i) => (
            <div key={p.n} className={`pillar-row pillar-row--w${i + 1}`}>
              <div className="pillar-row__num" aria-hidden>{p.n}</div>
              <div className="pillar-row__main">
                <h3 className="pillar-row__name">{p.name}</h3>
                <p className="pillar-row__body">{p.body}</p>
              </div>
              <div className="pillar-row__rail">
                <span className="pillar-row__rail-label">{p.railLabel}</span>
                <span className="pillar-row__rail-rule" aria-hidden />
                <span className="pillar-row__rail-value">{p.railValue}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .pillars-list {
          border-top: 1px solid var(--border-soft);
        }
        .pillar-row {
          display: grid;
          grid-template-columns: 132px 1fr 240px;
          gap: 40px;
          align-items: start;
          padding: 40px 0;
          border-bottom: 1px solid var(--border-soft);
        }
        /* Hairlines thicken slightly down the list (gold, no boxes). */
        .pillar-row--w1 { border-top: 1px solid rgba(201,168,76,0.20); }
        .pillar-row--w2 { border-top: 1px solid rgba(201,168,76,0.32); }
        .pillar-row--w3 { border-top: 1px solid rgba(201,168,76,0.46); }
        .pillar-row--w4 { border-top: 1px solid var(--rule-gold); }

        .pillar-row__num {
          font-family: var(--font-display);
          font-weight: 400;
          font-size: clamp(56px, 6vw, 88px);
          line-height: 0.9;
          letter-spacing: -0.02em;
          color: var(--fg-accent);
          opacity: 0.85;
        }

        .pillar-row__name {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(24px, 2.4vw, 30px);
          line-height: 1.12;
          color: var(--fg-1);
          margin: 0 0 14px;
        }
        .pillar-row__body {
          font-family: var(--font-body);
          font-size: 15.5px;
          line-height: 1.62;
          color: var(--fg-1);
          opacity: 0.84;
          margin: 0;
          max-width: 56ch;
        }

        .pillar-row__rail {
          display: flex;
          flex-direction: column;
          text-align: right;
          align-items: flex-end;
        }
        .pillar-row__rail-label {
          font-family: var(--font-mono);
          font-size: 10px;
          font-weight: 500;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: var(--fg-2);
        }
        .pillar-row__rail-rule {
          display: block;
          width: 100%;
          max-width: 180px;
          height: 1px;
          background: var(--rule-gold);
          margin: 12px 0;
        }
        .pillar-row__rail-value {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 500;
          font-size: 19px;
          line-height: 1.25;
          color: var(--fg-1);
        }

        @media (max-width: 880px) {
          .pillar-row {
            grid-template-columns: 1fr;
            gap: 16px;
            padding: 32px 0;
          }
          .pillar-row__num { font-size: 56px; }
          .pillar-row__rail {
            text-align: left;
            align-items: flex-start;
          }
          .pillar-row__rail-rule { max-width: 140px; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { PillarsSection });