"use client";

import { useLanguage } from "@/components/language-provider";
import { Section, SectionHeading } from "@/components/ui/section";
import { PROTOCOLS } from "@/lib/content";

const ENDPOINTS = [
  "POST   /api/v1/auth/login",
  "POST   /api/v1/auth/refresh",
  "GET    /api/v1/users/me",
  "GET    /api/v1/organizations",
  "GET    /api/v1/sessions",
  "GET    /.well-known/openid-configuration",
];

const CODE = `curl -X POST https://id.example.com/api/v1/auth/login \\
  -H "Content-Type: application/json" \\
  -d '{"email":"user@acme.com","password":"••••••••"}'

# => { "access": "eyJ...", "refresh": "eyJ...", "token_type": "bearer" }`;

export function Developers() {
  const { t, lang } = useLanguage();
  return (
    <Section id="developers" className="bg-slate-50 dark:bg-ink-soft/40">
      <div className="container-x">
        <SectionHeading
          eyebrow={t.developers.eyebrow}
          title={t.developers.title}
          subtitle={t.developers.subtitle}
        />

        <div className="grid gap-6 lg:grid-cols-2">
          <div className="card">
            <h3 className="text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-300">
              {t.developers.endpointsTitle}
            </h3>
            <ul className="mt-4 space-y-2 font-mono text-sm text-slate-700 dark:text-slate-300">
              {ENDPOINTS.map((e) => (
                <li key={e} className="rounded-lg bg-slate-100 px-3 py-2 dark:bg-ink/60">
                  {e}
                </li>
              ))}
            </ul>
            <div className="mt-6 flex flex-wrap gap-2">
              {PROTOCOLS.map((p) => (
                <span
                  key={p}
                  className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
                >
                  {p}
                </span>
              ))}
            </div>
          </div>

          <div className="card">
            <h3 className="text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-300">
              {t.developers.codeTitle}
            </h3>
            <pre className="mt-4 overflow-x-auto rounded-xl bg-slate-900 p-4 text-xs leading-relaxed text-slate-100 dark:bg-ink/80 dark:text-slate-300">
              <code>{CODE}</code>
            </pre>
          </div>
        </div>
      </div>
    </Section>
  );
}