/* Feature grid — four pillars in an architect-blueprint card style */

const FEATURES = [
  {
    icon: 'shield',
    title: 'Enterprise-first security',
    kicker: 'SOC 2 · RBAC · VPC',
    desc: 'Audit logs, policy engine, role-based access, signed artifacts, and secrets vault — all inside your perimeter.',
    stats: [
      ['AUDIT EVENTS', '∞'],
      ['POLICIES', '24'],
      ['SECRETS VAULT', 'HashiCorp'],
    ],
  },
  {
    icon: 'cpu',
    title: 'Bring your own LLM',
    kicker: 'OpenAI · Anthropic · Bedrock · Local',
    desc: 'Plug any provider or run fully local with Ollama/vLLM. Route agents to the right model by task, cost, and latency.',
    providers: [
      { n: 'Claude', c: '#d97757' },
      { n: 'GPT-5',  c: '#34d399' },
      { n: 'Gemini', c: '#60a5fa' },
      { n: 'Bedrock',c: '#fbbf24' },
      { n: 'Llama',  c: '#a78bfa' },
      { n: 'Local',  c: '#94a3b8' },
    ],
  },
  {
    icon: 'server',
    title: 'Self-hosted, on-premise',
    kicker: 'Docker · Kubernetes · Nomad',
    desc: 'Single binary or full Helm chart. Runs in your cloud, on your metal, or offline. Zero data egress.',
    terminal: [
      '$ docker compose up -d',
      `→ architect=ready · tools=${window.SITE_STATS.toolPaletteCount} · db=sqlite · ready in 3.2s`,
      '$ curl http://localhost:18802/api/status',
      '{"ok":true,"engine":"healthy"}',
    ],
  },
  {
    icon: 'branch',
    title: '100% open source',
    kicker: 'MIT · Forkable · No vendor lock-in',
    desc: 'Every agent, every prompt, every plan is visible. You own every line of generated code — edit in Monaco, export to a Vite+React project, or commit straight to GitHub.',
    stats: [
      ['LICENSE', 'MIT'],
      ['LANGUAGES', 'TS + Py'],
      ['REPOS', '7'],
    ],
  },
];

const FeaturesSection = () => {
  return (
    <section style={{ paddingTop: 120, paddingBottom: 60, position: 'relative' }}>
      <Container wide>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <SectionLabel index={2} label="THE PLATFORM" />
          <DisplayTitle size={54}>
            Built for teams <br/> that don't <Italic style={{ color: 'var(--accent-2)' }}>outsource</Italic> trust.
          </DisplayTitle>
          <p style={{ marginTop: 18, fontSize: 16, color: 'var(--fg-2)', maxWidth: 560, lineHeight: 1.55 }}>
            AutoArchitect runs inside your walls, on your models, on your schedule.
            Every decision the agents make is inspectable, replayable, and yours.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 20,
        }} className="feature-grid">
          {FEATURES.map((f, i) => <FeatureCard key={i} index={i + 1} {...f} />)}
        </div>
      </Container>
    </section>
  );
};

const FeatureCard = ({ icon, title, kicker, desc, stats, providers, terminal, index }) => {
  const Icn = I[icon];
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: hover ? 'var(--bg-2)' : 'var(--bg-1)',
        border: `1px solid ${hover ? 'var(--line-3)' : 'var(--line-2)'}`,
        borderRadius: 16,
        padding: 28,
        display: 'flex', flexDirection: 'column', gap: 18,
        minHeight: 320,
        overflow: 'hidden',
        transition: 'border-color 200ms, transform 200ms',
      }}>
      {/* Corner index */}
      <div style={{
        position: 'absolute', top: 20, right: 20,
        fontFamily: 'var(--font-mono)', fontSize: 10.5,
        color: 'var(--fg-4)', letterSpacing: '0.14em',
      }}>
        0{index} / 04
      </div>

      <div style={{
        width: 42, height: 42, borderRadius: 10,
        background: 'var(--bg-3)',
        border: '1px solid var(--line-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--accent-2)',
      }}>
        <Icn size={19} stroke={1.8} />
      </div>

      <div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10.5,
          color: 'var(--fg-3)', letterSpacing: '0.14em',
          textTransform: 'uppercase', marginBottom: 6,
        }}>{kicker}</div>
        <div style={{
          fontSize: 22, fontWeight: 600,
          letterSpacing: '-0.02em',
          color: 'var(--fg-1)',
          lineHeight: 1.15,
        }}>{title}</div>
        <p style={{
          marginTop: 10, fontSize: 14,
          color: 'var(--fg-2)', lineHeight: 1.55,
          textWrap: 'pretty',
        }}>{desc}</p>
      </div>

      {/* Visual payload area */}
      <div style={{ marginTop: 'auto' }}>
        {stats && (
          <div style={{
            display: 'grid', gridTemplateColumns: `repeat(${stats.length}, 1fr)`,
            gap: 0,
            borderTop: '1px dashed var(--line-2)',
            paddingTop: 14,
          }}>
            {stats.map(([k, v], i) => (
              <div key={i} style={{
                paddingLeft: i === 0 ? 0 : 14,
                borderLeft: i === 0 ? 'none' : '1px solid var(--line-1)',
              }}>
                <div style={{ fontSize: 9.5, color: 'var(--fg-4)', fontFamily: 'var(--font-mono)', letterSpacing: '0.14em' }}>{k}</div>
                <div style={{ fontSize: 20, color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontWeight: 500, letterSpacing: '-0.02em', marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
        )}

        {providers && (
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 6,
            borderTop: '1px dashed var(--line-2)', paddingTop: 14,
          }}>
            {providers.map((p) => (
              <div key={p.n} style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '4px 9px 4px 6px',
                borderRadius: 6,
                background: 'var(--bg-3)',
                border: '1px solid var(--line-2)',
                fontSize: 11.5, color: 'var(--fg-1)',
                fontFamily: 'var(--font-mono)',
              }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: p.c }} />
                {p.n}
              </div>
            ))}
          </div>
        )}

        {terminal && (
          <div style={{
            borderTop: '1px dashed var(--line-2)',
            paddingTop: 14,
            fontFamily: 'var(--font-mono)',
            fontSize: 11.5,
            lineHeight: 1.6,
          }}>
            {terminal.map((l, i) => (
              <div key={i} style={{
                color: l.startsWith('$') ? 'var(--fg-1)' : l.startsWith('→') ? 'var(--accent-2)' : 'var(--ok)',
              }}>{l}</div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

window.FeaturesSection = FeaturesSection;