/* Developers page sections — hero, code samples, features, resources */

function DevelopersHero() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 48, position: 'relative', overflow: 'hidden' }}>
      <div className="m-container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div className="m-reveal">
          <div className="m-eyebrow" style={{ marginBottom: 18 }}>Developers</div>
          <h1 style={{
            font: '500 clamp(48px, 5.4vw, 72px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0,
          }}>
            Move money in<br />
            <span style={{ color: 'var(--m-fg-2)' }}>200 lines.</span>
          </h1>
          <p style={{
            font: '400 18px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 540,
          }}>
            One REST API for vIBANs, FX, stablecoins, and 38 corridors. Idempotency keys,
            signed webhooks, sandbox parity. Production-ready in under an hour.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="get-keys/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn m-btn-primary" style={{ padding: '14px 22px' }}>Get API keys</button>
            </a>
            <a href="#docs" style={{ textDecoration: 'none' }}>
              <button className="m-btn" style={{
                padding: '14px 22px', background: 'transparent',
                border: '1px solid var(--m-border)', color: 'var(--m-fg)',
              }}>Read the docs</button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 24, marginTop: 36, flexWrap: 'wrap', font: '500 12.5px/1 var(--font-sans)', color: 'var(--m-fg-3)' }}>
            <span>⚡ 47ms p99 latency</span>
            <span>·</span>
            <span>99.997% uptime</span>
            <span>·</span>
            <span>Sandbox free</span>
          </div>
        </div>

        <CodeSample />
      </div>
    </section>
  );
}

function CodeSample() {
  const samples = {
    node: `import KwiikPay from '@kwiikpay/sdk';

const kp = new KwiikPay(process.env.KWIIKPAY_KEY);

// Create a payout — any currency, any rail
const payout = await kp.payouts.create({
  amount:    50000,        // £500.00
  currency:  'GBP',
  recipient: 'rec_8f2a01...',
  rail:      'auto',       // we pick the cheapest
  reference: 'INV-2026-04-12',
});

console.log(payout.status);  // 'settling'`,
    curl: `curl https://api.kwiikpay.com/v1/payouts \\
  -H "Authorization: Bearer $KWIIKPAY_KEY" \\
  -H "Idempotency-Key: \$(uuidgen)" \\
  -d amount=50000 \\
  -d currency=GBP \\
  -d recipient=rec_8f2a01... \\
  -d rail=auto \\
  -d reference="INV-2026-04-12"`,
    python: `from kwiikpay import KwiikPay
kp = KwiikPay(api_key=os.environ['KWIIKPAY_KEY'])

# Create a payout — any currency, any rail
payout = kp.payouts.create(
    amount=50000,        # £500.00
    currency='GBP',
    recipient='rec_8f2a01...',
    rail='auto',         # we pick the cheapest
    reference='INV-2026-04-12',
)

print(payout.status)  # 'settling'`,
  };

  const [lang, setLang] = React.useState('node');

  return (
    <div style={{
      background: 'var(--m-fg)', borderRadius: 18, padding: 4,
      boxShadow: '0 40px 80px -20px rgba(20,15,49,0.32), 0 8px 24px rgba(20,15,49,0.12)',
    }}>
      {/* Window chrome with tabs */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '12px 14px 0',
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FF5F57' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FEBC2E' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28CA42' }} />
      </div>
      <div style={{ display: 'flex', gap: 2, padding: '8px 14px 0' }}>
        {[
          { id: 'node', label: 'Node' },
          { id: 'curl', label: 'cURL' },
          { id: 'python', label: 'Python' },
        ].map((l) => (
          <button key={l.id} onClick={() => setLang(l.id)} style={{
            border: 'none', background: 'transparent',
            padding: '7px 12px',
            font: '500 11.5px/1 IBM Plex Mono, monospace',
            color: lang === l.id ? '#fff' : 'rgba(255,255,255,0.45)',
            borderBottom: lang === l.id ? '2px solid #fff' : '2px solid transparent',
            cursor: 'pointer',
            marginBottom: -1,
          }}>{l.label}</button>
        ))}
      </div>
      <pre style={{
        margin: 0, padding: '20px 22px',
        background: 'var(--m-fg)', color: '#E6E2D6',
        font: '500 12.5px/1.65 IBM Plex Mono, ui-monospace, monospace',
        overflow: 'auto', borderTop: '1px solid rgba(255,255,255,0.10)',
      }}>{samples[lang]}</pre>
    </div>
  );
}

function APIFeatures() {
  const features = [
    { tag: 'REST', title: 'Plain HTTP', body: 'Verb-based REST, predictable URLs, JSON in / JSON out. If you can curl, you can integrate.' },
    { tag: 'Webhooks', title: 'Signed webhook events', body: 'Every state change emits a webhook signed with HMAC-SHA256. Retries with exponential backoff.' },
    { tag: 'SDKs', title: 'Five official SDKs', body: 'Node, Python, Ruby, Go, PHP. Auto-generated from the OpenAPI spec, fully typed.' },
    { tag: 'Sandbox', title: 'Free sandbox forever', body: 'Test cards, fake corridors, simulated rejections. Parity with production behaviour and latency.' },
    { tag: 'Idempotency', title: 'Idempotency on every mutation', body: 'Pass an Idempotency-Key header. Retry safely; we return the original response.' },
    { tag: 'OpenAPI', title: 'OpenAPI 3.1 spec', body: 'Versioned, machine-readable. Generate clients for any language we don\'t officially support.' },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="m-eyebrow" style={{ marginBottom: 14 }}>What you get</div>
          <h2 style={{
            font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
            letterSpacing: '-0.025em', margin: 0,
          }}>
            Built like the APIs you wish all banks had.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {features.map((f) => (
            <article key={f.title} style={{
              background: 'var(--m-card-bg, transparent)',
              border: '1px solid var(--m-border)',
              borderRadius: 20, padding: 24,
              transition: 'transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard)',
            }}
            onMouseOver={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--m-fg-3)'; }}
            onMouseOut={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--m-border)'; }}>
              <div style={{
                font: '600 11px/1 IBM Plex Mono, monospace', letterSpacing: '0.06em', textTransform: 'uppercase',
                color: 'var(--m-fg-3)', marginBottom: 16,
              }}>{f.tag}</div>
              <h3 style={{ font: '500 20px/1.25 var(--font-sans)', letterSpacing: '-0.015em', margin: '0 0 10px' }}>{f.title}</h3>
              <p style={{ font: '400 14px/1.55 var(--font-sans)', color: 'var(--m-fg-2)', margin: 0 }}>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function APIEndpoints() {
  const endpoints = [
    { method: 'POST',   path: '/v1/payouts',        desc: 'Send funds to a recipient on any rail' },
    { method: 'POST',   path: '/v1/vibans',         desc: 'Issue a multi-currency virtual IBAN' },
    { method: 'POST',   path: '/v1/conversions',    desc: 'Convert between fiat or stablecoin' },
    { method: 'POST',   path: '/v1/quotes',         desc: 'Get a 30-second locked FX quote' },
    { method: 'POST',   path: '/v1/recipients',     desc: 'Create or update a payment recipient' },
    { method: 'POST',   path: '/v1/otc/rfq',        desc: 'Request a quote from the OTC desk' },
    { method: 'GET',    path: '/v1/balances',       desc: 'Read all wallet balances' },
    { method: 'GET',    path: '/v1/corridors',      desc: 'List active corridors and live rates' },
    { method: 'GET',    path: '/v1/events',         desc: 'Replayable event stream' },
  ];
  const methodColor = (m) => ({
    POST:   { bg: 'rgba(33,138,91,0.10)',  fg: '#1F8A5B' },
    GET:    { bg: 'rgba(43,108,176,0.10)', fg: '#2B6CB0' },
    DELETE: { bg: 'rgba(194,66,65,0.10)',  fg: '#C24241' },
    PATCH:  { bg: 'rgba(176,125,0,0.10)',  fg: '#B07D00' },
  }[m] || { bg: '#eee', fg: '#000' });

  return (
    <section id="docs" className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{ marginBottom: 32, maxWidth: 720 }}>
          <div className="m-eyebrow" style={{ marginBottom: 14 }}>API surface</div>
          <h2 style={{
            font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
            letterSpacing: '-0.025em', margin: 0,
          }}>
            Nine endpoints. Everything we do.
          </h2>
        </div>

        <div style={{
          border: '1px solid var(--m-border)',
          borderRadius: 16, overflow: 'hidden',
        }}>
          {endpoints.map((e, i) => {
            const c = methodColor(e.method);
            return (
              <div key={e.path} style={{
                display: 'grid', gridTemplateColumns: '90px 1fr 2fr', gap: 24,
                padding: '16px 20px', alignItems: 'center',
                borderTop: i === 0 ? 'none' : '1px solid var(--m-border)',
                transition: 'background var(--dur-base) var(--ease-standard)',
                cursor: 'pointer',
              }}
              onMouseOver={(e) => e.currentTarget.style.background = 'color-mix(in oklab, var(--m-fg) 3%, transparent)'}
              onMouseOut={(e) => e.currentTarget.style.background = 'transparent'}>
                <span style={{
                  fontSize: 11, fontWeight: 700, padding: '4px 8px',
                  background: c.bg, color: c.fg,
                  borderRadius: 6, textAlign: 'center', letterSpacing: '0.04em',
                  fontFamily: 'IBM Plex Mono, monospace',
                }}>{e.method}</span>
                <span style={{
                  fontFamily: 'IBM Plex Mono, monospace',
                  fontSize: 14, fontWeight: 500, color: 'var(--m-fg)',
                }}>{e.path}</span>
                <span style={{ fontSize: 13, color: 'var(--m-fg-2)' }}>{e.desc}</span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function DevResources() {
  const res = [
    { title: 'API reference', body: 'Every endpoint, every parameter, every error. Live request/response examples.', cta: 'Open reference →' },
    { title: 'Quickstart guides', body: 'Hello-world to production in under an hour. 12 step-by-step tutorials.', cta: 'See guides →' },
    { title: 'OpenAPI spec', body: 'Versioned spec. Pin to a version; we never break it.', cta: 'View spec →' },
    { title: 'Status page', body: 'Per-corridor uptime, latency, and incident history.', cta: 'status.kwiikpay.com →' },
    { title: 'Changelog', body: 'Every API and SDK change, dated. Subscribe via RSS.', cta: 'Read changelog →' },
    { title: 'Discord', body: 'Talk to engineers. Office hours every Thursday.', cta: 'Join us →' },
  ];
  return (
    <section className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{ marginBottom: 32, maxWidth: 720 }}>
          <div className="m-eyebrow" style={{ marginBottom: 14 }}>Resources</div>
          <h2 style={{
            font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
            letterSpacing: '-0.025em', margin: 0,
          }}>
            Built like the developer tools you actually like using.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {res.map((r) => (
            <article key={r.title} style={{
              background: 'var(--m-card-bg, transparent)',
              border: '1px solid var(--m-border)',
              borderRadius: 20, padding: 24,
              cursor: 'pointer',
              transition: 'all var(--dur-base) var(--ease-standard)',
            }}
            onMouseOver={(e) => { e.currentTarget.style.borderColor = 'var(--m-fg)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseOut={(e) => { e.currentTarget.style.borderColor = 'var(--m-border)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              <h3 style={{ font: '500 18px/1.25 var(--font-sans)', letterSpacing: '-0.012em', margin: '0 0 10px' }}>{r.title}</h3>
              <p style={{ font: '400 13.5px/1.55 var(--font-sans)', color: 'var(--m-fg-2)', margin: '0 0 14px' }}>{r.body}</p>
              <span style={{ font: '500 13px/1 var(--font-sans)', color: 'var(--m-fg)' }}>{r.cta}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.DevelopersHero = DevelopersHero;
window.APIFeatures = APIFeatures;
window.APIEndpoints = APIEndpoints;
window.DevResources = DevResources;