// Why CTRL — differentiators + honest social proof (no fake avatars/counts).

const Comparison = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const rows = [
    ['Per-seat pricing', false, true, 'Flat rate, unlimited users'],
    ['Months to deploy', false, true, '30–60 days, guided'],
    ['AI assistance', false, true, 'Embedded in every module'],
    ['HIPAA-only focus', true, false, 'Built for § 164, not SOC 2'],
    ['Rural / CAH pricing', true, false, '15% off for qualifying orgs'],
  ];
  return (
    <div style={{
      background: '#0b1220', border: '1px solid #1e293b', borderRadius: 12,
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr',
        background: '#0a1020', borderBottom: '1px solid #1e293b',
        padding: '14px 24px', ...mono, fontSize: 10, letterSpacing: 2, color: '#64748b',
      }}>
        <div></div>
        <div style={{ textAlign: 'center' }}>LEGACY GRC</div>
        <div style={{ textAlign: 'center', color: '#7dd3fc' }}>CTRL</div>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 16,
          padding: '16px 24px', alignItems: 'center',
          borderBottom: i < rows.length - 1 ? '1px solid #111827' : 'none',
        }}>
          <div style={{ fontSize: 13.5, color: '#cbd5e1' }}>{r[0]}</div>
          <div style={{ textAlign: 'center', color: r[1] ? '#22c55e' : '#64748b', fontSize: 18 }}>
            {r[1] ? '✓' : '—'}
          </div>
          <div style={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            {r[2] && <span style={{ color: '#22c55e', fontSize: 18 }}>✓</span>}
            <span style={{ ...mono, fontSize: 11, color: '#7dd3fc', letterSpacing: 0.5 }}>{r[3]}</span>
          </div>
        </div>
      ))}
    </div>
  );
};

const WhyCTRL = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const { SectionLabel, SectionH, SectionSub } = window;
  return (
    <section style={{
      position: 'relative', background: '#030712', color: '#fff',
      padding: '96px 48px', borderTop: '1px solid #1e293b',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel n="03" label="WHY CTRL" />
        <SectionH>Built by compliance folks <span style={{ color: '#64748b' }}>who got tired of the status quo.</span></SectionH>
        <SectionSub>
          Legacy GRC platforms treat HIPAA as a checkbox in a SOC-2 suite. We treat it as the core program — with pricing and workflows that actually fit smaller healthcare orgs.
        </SectionSub>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start', marginBottom: 64 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {[
              { n: '01', h: 'HIPAA-native, not HIPAA-adjacent',
                p: 'Every module maps to 45 CFR, OCR Phase 2 protocol, and NIST CSF 2.0. No translating from generic controls.' },
              { n: '02', h: 'AI with receipts',
                p: 'CTRL Assist cites regulations and internal workspace data. If a citation isn\'t there, neither is the answer.' },
              { n: '03', h: 'Priced for the mid-market',
                p: 'Flat tiers based on organization size, not seats. Rural and CAH discounts. No enterprise-pricing games.' },
            ].map(x => (
              <div key={x.n} style={{
                background: '#0b1220', border: '1px solid #1e293b', borderRadius: 10,
                padding: '22px 24px', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16,
              }}>
                <div style={{ ...mono, fontSize: 11, color: '#7dd3fc', letterSpacing: 1.5, paddingTop: 3 }}>{x.n}</div>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 700, color: '#f1f5f9', marginBottom: 6, letterSpacing: -0.3 }}>{x.h}</div>
                  <div style={{ fontSize: 13.5, color: '#94a3b8', lineHeight: 1.6 }}>{x.p}</div>
                </div>
              </div>
            ))}
          </div>
          <Comparison />
        </div>

        {/* Honest founder quote instead of fake avatars */}
        <div style={{
          background: 'linear-gradient(135deg, #0b1220, #05080f)',
          border: '1px solid #1e293b', borderRadius: 12,
          padding: '36px 40px', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -40, right: -40, fontSize: 240,
            ...mono, color: '#1e293b', fontWeight: 800, lineHeight: 1, pointerEvents: 'none',
          }}>"</div>
          <div style={{ ...mono, fontSize: 10, letterSpacing: 2, color: '#38bdf8', marginBottom: 14 }}>
            — FROM OUR FOUNDERS
          </div>
          <div style={{
            fontSize: 22, lineHeight: 1.5, color: '#e2e8f0', fontWeight: 500,
            maxWidth: 880, letterSpacing: -0.3, marginBottom: 18,
          }}>
            "We built CTRL because we watched too many rural hospitals and specialty practices write six-figure checks to consultants for the same HIPAA program, over and over. An AI that knows the regs and your program should be the floor, not the ceiling."
          </div>
          <div style={{ fontSize: 13, color: '#94a3b8' }}>
            Aaron Maloy · Founder, CTRL Security & Compliance
          </div>
        </div>
      </div>
    </section>
  );
};

window.WhyCTRL = WhyCTRL;