/* Open source / trust — MIT, self-host, no lock-in. Left: the claim + honest
   MIT/Self-hosted/None facts. Right: the real install terminal. */

const OSSSection = () => {
  return (
    <Section>
      <Container wide>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 60,
          alignItems: 'start',
        }} className="oss-grid">
          {/* LEFT */}
          <div>
            <SectionLabel index={4} label="TRUST · MIT · SELF-HOSTED · NO LOCK-IN" />
            <DisplayTitle size={52}>
              Built in the <Italic>open.</Italic><br/>
              Yours to <Italic>keep.</Italic>
            </DisplayTitle>
            <p style={{
              marginTop: 20, fontSize: 16, color: 'var(--fg-2)',
              maxWidth: 480, lineHeight: 1.55, textWrap: 'pretty',
            }}>
              Fork it, read it, ship patches back upstream. AutoArchitect is MIT-licensed
              from the engine core to the last agent prompt — no telemetry, no
              hidden bits, no "enterprise tier" in the good stuff.
            </p>
            <p style={{
              marginTop: 16, fontSize: 14.5, color: 'var(--fg-3)',
              maxWidth: 480, lineHeight: 1.6, textWrap: 'pretty',
              padding: '14px 16px',
              background: 'var(--bg-1)',
              borderLeft: '2px solid var(--accent-2)',
              borderRadius: 6,
            }}>
              <a href="https://github.com/syedia/autoarchitect-code" style={{ color: 'var(--accent-2)', textDecoration: 'none', fontWeight: 600 }}>
                autoarchitect-code
              </a>{' '}
              is the Claude-Code-class agent runtime the Architect drives —
              iterate-until-solved reasoning that composes, forges, and
              verifies. Skills-based extension. Pluggable LLMs. Same MIT
              license. Same governance.
            </p>

            <div style={{
              marginTop: 28,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
              border: '1px solid var(--line-2)',
              borderRadius: 12,
              overflow: 'hidden',
            }} className="oss-stats">
              {[
                { k: 'LICENSE',       v: 'MIT',         d: 'Fork it, ship it',         c: 'var(--warn)' },
                { k: 'RUNTIME',       v: 'Self-hosted', d: 'Your infra, your keys',    c: 'var(--accent-2)' },
                { k: 'TELEMETRY',     v: 'None',        d: 'Zero phone-home',          c: 'var(--ok)' },
              ].map(({ k, v, d, c }, i) => (
                <div key={k} style={{
                  padding: '18px 20px',
                  background: 'var(--bg-1)',
                  borderLeft: i === 0 ? 'none' : '1px solid var(--line-2)',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em' }}>{k}</div>
                  <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', marginTop: 6, letterSpacing: '-0.02em' }}>{v}</div>
                  <div style={{ fontSize: 11, color: c, marginTop: 4, fontFamily: 'var(--font-mono)' }}>{d}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a href="https://github.com/syedia/autoarchitect" style={{ textDecoration: 'none' }}>
                <GhostBtn icon={<I.github size={15} />} trailing={<I.arrowUpRight size={13} />}>
                  github.com/syedia/autoarchitect
                </GhostBtn>
              </a>
              <a href="https://github.com/syedia/autoarchitect-code" style={{ textDecoration: 'none' }}>
                <GhostBtn icon={<I.github size={15} />} trailing={<I.arrowUpRight size={13} />}>
                  autoarchitect-code (NEW)
                </GhostBtn>
              </a>
              <GhostBtn icon={<I.docs size={14} />}>Read the docs</GhostBtn>
            </div>
          </div>

          {/* RIGHT: terminal + activity feed */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Terminal */}
            <div className="force-dark-panel" style={{
              background: 'var(--bg-1)',
              border: '1px solid var(--line-2)',
              borderRadius: 14,
              overflow: 'hidden',
            }}>
              <div style={{
                padding: '10px 14px',
                borderBottom: '1px solid var(--line-2)',
                background: 'var(--bg-2)',
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-3)', letterSpacing: '0.08em',
              }}>
                <div style={{ display: 'flex', gap: 5 }}>
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#ef4444' }} />
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#f5b849' }} />
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#34d399' }} />
                </div>
                <span style={{ marginLeft: 8 }}>~/autoarchitect</span>
                <span style={{ marginLeft: 'auto' }}>zsh</span>
              </div>
              <div style={{
                padding: '16px 18px',
                fontFamily: 'var(--font-mono)', fontSize: 12.5,
                lineHeight: 1.75,
              }}>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{ color: 'var(--fg-1)' }}>curl -fsSL get.autoarchitect.com | sh</span></div>
                <div style={{ color: 'var(--fg-3)' }}>✓ Docker is running</div>
                <div style={{ color: 'var(--fg-3)' }}>✓ Image pulled (ghcr.io/syedia/autoarchitect:latest)</div>
                <div style={{ color: 'var(--fg-3)' }}>✓ aa wrapper installed at ~/.autoarchitect/aa</div>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{ color: 'var(--fg-1)' }}>aa configure</span> <span style={{ color: 'var(--fg-3)' }}># pick LLM + paste API key</span></div>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{ color: 'var(--fg-1)' }}>aa start</span></div>
                <div style={{ color: 'var(--fg-3)' }}>→ Starting Architect + substrate…</div>
                <div style={{ color: 'var(--fg-3)' }}>→ Studio: <span style={{ color: 'var(--accent-2)' }}>http://localhost:18802</span></div>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{
                  display: 'inline-block', width: 7, height: 14, marginLeft: 1,
                  background: 'var(--accent)', verticalAlign: 'middle',
                  animation: 'blink 1.1s steps(2) infinite',
                }} /></div>
              </div>
            </div>

          </div>
        </div>
      </Container>
    </Section>
  );
};

window.OSSSection = OSSSection;