"use client";

import { Plus } from "lucide-react";
import { useState } from "react";

const FAQS: { q: string; a: string }[] = [
  {
    q: "What is a claw?",
    a: "A claw is an AI coworker — an agent with a job, a chat, and its own sandboxed computer. Your team talks to it like a teammate, and it uses tools to get work done.",
  },
  {
    q: "How do you keep agents safe?",
    a: "Every action that reaches outside the sandbox — sending an email, posting to Slack, a transaction — is intercepted and held until a human approves it, with the exact payload shown. Agent code runs in a locked-down container with no network.",
  },
  {
    q: "Can I run it on my own infrastructure?",
    a: "Yes. The same container images deploy to Kubernetes or to a single-node Docker Compose appliance you can run fully air-gapped, installed from a signed bundle that verifies offline.",
  },
  {
    q: "Which tools can claws connect to?",
    a: "Slack and email today, plus a growing app directory you connect with API keys or OAuth. Credentials are held by a separate secret broker the agent can never read.",
  },
  {
    q: "How is my data protected?",
    a: "Credentials are encrypted at rest in an isolated broker process; agent sandboxes have no egress; and in the air-gapped deployment nothing ever leaves your network.",
  },
];

/** FAQ on WorkClaw's textured field (faq-bg): white rounded rows, one open at
 *  a time, the "+" rotates 45° to an ×. First item open by default. */
export function Faq() {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <div id="faq">
      <section className="relative flex w-full justify-center overflow-hidden bg-[url('/images/marketing/faq-bg.svg')] bg-cover bg-center bg-no-repeat px-4 py-[72px] sm:px-6 sm:py-[99px]">
        <div className="relative flex w-full max-w-[804px] flex-col gap-4">
          {FAQS.map((item, i) => {
            const isOpen = open === i;
            return (
              <button
                key={item.q}
                type="button"
                aria-expanded={isOpen}
                onClick={() => setOpen(isOpen ? null : i)}
                className="flex w-full flex-col items-start rounded-[16px] bg-white p-6 text-left transition-shadow sm:p-8"
              >
                <div className="flex w-full items-center justify-between">
                  <span className="pr-4 text-[18px] leading-none font-bold tracking-[-0.46px] text-black sm:text-[23px]">
                    {item.q}
                  </span>
                  <div
                    className="shrink-0 transition-transform duration-300 ease-out"
                    style={{ transform: isOpen ? "rotate(45deg)" : "rotate(0deg)" }}
                  >
                    <Plus aria-hidden className="h-4 w-4 text-black" />
                  </div>
                </div>
                <div
                  className="w-full overflow-hidden transition-all duration-300 ease-out"
                  style={{
                    maxHeight: isOpen ? 320 : 0,
                    opacity: isOpen ? 1 : 0,
                    marginTop: isOpen ? 24 : 0,
                  }}
                >
                  <p className="text-[15px] leading-[1.6] font-normal text-[#0a0f1e]/75 sm:text-[17px]">
                    {item.a}
                  </p>
                </div>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}