// HowItWorks.jsx — the loop in four concrete steps, with code
const CodePanel = ({ title, lines }) => (
  <div style={{
    borderRadius: 10, overflow: 'hidden',
    border: '1px solid rgba(125,211,252,0.1)',
    background: '#060b14',
    marginTop: 'auto',
  }}>
    <div style={{
      padding: '8px 14px',
      borderBottom: '1px solid rgba(125,211,252,0.08)',
      fontFamily: 'JetBrains Mono, monospace', fontSize: 11.5,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      color: '#6b7e9a',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <span style={{ display: 'inline-flex', gap: 5 }}>
        {['#ff5f57', '#febc2e', '#28c840'].map(c => (
          <span key={c} style={{ width: 8, height: 8, borderRadius: '50%', background: c, opacity: 0.7 }} />
        ))}
      </span>
      {title}
    </div>
    <pre style={{
      margin: 0, padding: '10px 14px',
      fontFamily: 'JetBrains Mono, monospace', fontSize: 14, lineHeight: 1.6,
      color: '#c4d2e2', overflowX: 'auto', textAlign: 'left',
    }}>
      {lines.map((l, i) => (
        <div key={i} style={{ color: l.startsWith('#') || l.startsWith('//') ? '#5a7594' : l.startsWith('→') ? '#2ee89a' : '#c4d2e2' }}>{l}</div>
      ))}
    </pre>
  </div>
);

const HowItWorks = () => {
  const steps = [
    {
      n: '1',
      title: 'Serve your data, ledger on',
      body: 'One YAML file names your sources. One flag turns on the durable record.',
      code: {
        title: 'ctx.yaml',
        lines: [
          'kind: context',
          'spec:',
          '  data_sources:',
          '    - name: warehouse',
          '      type: postgres',
          '      hierarchy_level: catalog',
        ],
      },
    },
    {
      n: '2',
      title: 'The agent asks, declaring intent',
      body: 'Any SQL over any source, federated in one statement. Purpose is recorded, never executed.',
      code: {
        title: 'POST /query',
        lines: [
          '{ "sql": "SELECT plan, COUNT(*) FROM',
          '    warehouse.public.subs WHERE',
          '    cancelled_at > now() - interval \'7 days\'',
          '    GROUP BY plan",',
          '  "ai_context": {',
          '    "purpose": "weekly churn check" } }',
        ],
      },
    },
    {
      n: '3',
      title: 'Promote what recurs',
      body: 'A skill reads the ledger and writes the pipeline. YAML you can read, diff and revert.',
      code: {
        title: 'pipelines/weekly-churn.yaml',
        lines: [
          '# 4 sessions asked the same churn question',
          'kind: pipeline',
          'metadata: { name: weekly-churn }',
          'spec:',
          '  query: |',
          '    SELECT plan, COUNT(*) AS cancels ...',
          '    WHERE cancelled_at > {window}',
        ],
      },
    },
    {
      n: '4',
      title: 'The agent has a new tool',
      body: 'One definition, two bindings. Works in Claude Code, Cursor, or any HTTP host.',
      code: {
        title: 'shell + REST',
        lines: [
          '# any agent with a Bash tool',
          "skardi run weekly-churn -p window='7 days'",
          '',
          '# same pipeline, served as REST',
          'curl -X POST :8080/weekly-churn/execute',
          '→ { "plan": "pro", "cancels": 12 }',
        ],
      },
    },
  ];

  return (
    <section style={{ padding: '56px 32px', background: '#080f1b', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>How</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 54px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 20px',
            color: '#e6eef9', textWrap: 'balance',
          }}>From question to tool in four steps</h2>
        </div>

        <style>{`
          .how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
          @media (max-height: 1060px) and (min-width: 901px) { .how-grid { zoom: 0.9; } }
          @media (max-height: 899px) and (min-width: 901px) { .how-grid { zoom: 0.78; } }
          @media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }
        `}</style>
        <div className="how-grid">
          {steps.map((s) => (
            <div key={s.n} style={{
              display: 'flex', flexDirection: 'column',
              padding: '20px 22px',
              borderRadius: 16,
              border: '1px solid rgba(125,211,252,0.1)',
              background: 'rgba(14,26,46,0.5)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 34, height: 34, borderRadius: '50%',
                  background: 'linear-gradient(135deg, rgba(46,196,122,0.18), rgba(26,143,224,0.18))',
                  border: '1px solid rgba(46,232,154,0.3)',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 14, fontWeight: 600,
                  color: '#2ee89a',
                }}>{s.n}</span>
                <span style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 19, fontWeight: 600,
                  color: '#e6eef9', letterSpacing: '-0.01em',
                }}>{s.title}</span>
              </div>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6,
                color: '#8ea3c0', margin: '0 0 12px',
              }}>{s.body}</p>
              <CodePanel title={s.code.title} lines={s.code.lines} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;