"use client";

import { Reveal } from "@/components/reveal";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { BookOpen, Copy, FileJson2 } from "lucide-react";

const snippets: Record<string, string> = {
  "Node.js": `import { ChatNest } from "@chatnest/sdk";

const client = new ChatNest({ apiKey: process.env.CHATNEST_KEY });

await client.messages.send({
  to: "+15551234567",
  type: "template",
  template: "order_shipped",
  params: { name: "Ananya", trackingUrl: "https://trk.co/9F2" },
});`,
  PHP: `<?php
$client = new ChatNest\\Client(getenv('CHATNEST_KEY'));

$client->messages->send([
  'to' => '+15551234567',
  'type' => 'template',
  'template' => 'order_shipped',
  'params' => [
    'name' => 'Ananya',
    'trackingUrl' => 'https://trk.co/9F2',
  ],
]);`,
  Python: `from chatnest import Client

client = Client(api_key=os.environ["CHATNEST_KEY"])

client.messages.send(
    to="+15551234567",
    type="template",
    template="order_shipped",
    params={"name": "Ananya", "trackingUrl": "https://trk.co/9F2"},
)`,
  cURL: `curl -X POST https://api.chatnest.io/v1/messages \\
  -H "Authorization: Bearer $CHATNEST_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "to": "+15551234567",
    "type": "template",
    "template": "order_shipped",
    "params": { "name": "Ananya", "trackingUrl": "https://trk.co/9F2" }
  }'`,
};

export function DeveloperSection() {
  return (
    <section id="developers" className="section-pad relative overflow-hidden bg-ink-950">
      <div className="pointer-events-none absolute inset-0 -z-10 bg-grid opacity-40" />
      <div className="pointer-events-none absolute left-1/2 top-0 -z-10 h-96 w-96 -translate-x-1/2 rounded-full bg-whatsapp/20 blur-3xl" />

      <div className="container grid grid-cols-1 items-center gap-14 lg:grid-cols-2">
        <div>
          <Reveal>
            <span className="inline-flex items-center gap-2 rounded-full border border-whatsapp/30 bg-whatsapp/10 px-4 py-1.5 text-sm font-medium text-whatsapp-light">
              Built for developers
            </span>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-white sm:text-5xl">
              A REST API that gets out of your way
            </h2>
          </Reveal>
          <Reveal delay={0.15}>
            <p className="mt-4 text-lg text-white/50">
              Send messages, manage templates, and receive real-time events with a
              predictable API and SDKs for every major language.
            </p>
          </Reveal>
          <Reveal delay={0.2}>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button variant="primary" className="btn-glow">
                <BookOpen className="h-4 w-4" /> Read the docs
              </Button>
              <Button variant="glass" className="text-white">
                <FileJson2 className="h-4 w-4" /> View API reference
              </Button>
            </div>
          </Reveal>

          <Reveal delay={0.25}>
            <dl className="mt-10 grid grid-cols-3 gap-6 border-t border-white/10 pt-8">
              <div>
                <dt className="text-xs text-white/40">Uptime SLA</dt>
                <dd className="mt-1 text-xl font-bold text-white">99.9%</dd>
              </div>
              <div>
                <dt className="text-xs text-white/40">Avg. latency</dt>
                <dd className="mt-1 text-xl font-bold text-white">180ms</dd>
              </div>
              <div>
                <dt className="text-xs text-white/40">SDKs</dt>
                <dd className="mt-1 text-xl font-bold text-white">6+</dd>
              </div>
            </dl>
          </Reveal>
        </div>

        <Reveal direction="left">
          <div className="overflow-hidden rounded-3xl border border-white/10 bg-[#0D1526] shadow-2xl">
            <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
              <div className="flex items-center gap-1.5">
                <span className="h-2.5 w-2.5 rounded-full bg-red-400" />
                <span className="h-2.5 w-2.5 rounded-full bg-amber-400" />
                <span className="h-2.5 w-2.5 rounded-full bg-whatsapp" />
              </div>
              <button
                aria-label="Copy code"
                className="flex items-center gap-1.5 text-xs text-white/40 hover:text-white/70"
              >
                <Copy className="h-3.5 w-3.5" /> Copy
              </button>
            </div>

            <Tabs defaultValue="Node.js" className="p-4">
              <TabsList>
                {Object.keys(snippets).map((lang) => (
                  <TabsTrigger key={lang} value={lang}>
                    {lang}
                  </TabsTrigger>
                ))}
              </TabsList>
              {Object.entries(snippets).map(([lang, code]) => (
                <TabsContent key={lang} value={lang}>
                  <pre className="overflow-x-auto rounded-xl bg-black/30 p-4 text-[13px] leading-relaxed text-emerald-100/90">
                    <code>{code}</code>
                  </pre>
                </TabsContent>
              ))}
            </Tabs>
          </div>
        </Reveal>
      </div>
    </section>
  );
}