'use client';

import { useState } from 'react';
import Link from 'next/link';

interface Faq {
  question: string;
  answer: React.ReactNode;
}

const faqs: Faq[] = [
  {
    question: 'Is DashCaddy really free?',
    answer: (
      <>
        Yes. The core platform — Docker deployment, Caddy + DNS + TLS automation, the full 77-app template catalog,
        AI Intent Router, MCP Server, Security Center, monitoring, backups, REST API, plugin system, and 31-language
        i18n — is free forever. Premium adds a focused set of advanced features (SSO, Recipes, Docker Swarm,
        Multi-Host Fleet) available as a fixed-duration license. The license runs for the duration you buy
        and then expires; you re-purchase manually to renew.
      </>
    ),
  },
  {
    question: 'Where does my data live?',
    answer: (
      <>
        On your own hardware. DashCaddy runs on a Linux host you control — a desktop, a NUC, a Raspberry Pi 5, or a VPS.
        No cloud dependency, no telemetry, no phoning home. Your services, your credentials, your DNS records, your SSL
        keys — all live on your network. A license validation ping is the only outbound call, and you can run unlicensed
        without it.
      </>
    ),
  },
  {
    question: 'What if I already have Docker containers running?',
    answer: (
      <>
        Use <strong>Service Discovery</strong>. DashCaddy scans the Docker socket, lists every running container, and
        lets you adopt any of them with one click. It adds the Caddy reverse-proxy route, DNS record, and TLS
        certificate — without touching the running container. Your existing data, volumes, and network config stay
        exactly as they are.
      </>
    ),
  },
  {
    question: 'Do I need a public domain?',
    answer: (
      <>
        No. You can use a custom TLD (<code>dashcaddy.home</code>, <code>dashcaddy.lan</code>) on your home network,
        or a direct IP for a quick test. Custom TLDs need DashCA&rsquo;s internal CA root certificate installed on
        each device that connects — the setup wizard walks you through that. A real domain is the easiest path: it
        auto-issues trusted Let&rsquo;s Encrypt certificates and you skip the CA install step.
      </>
    ),
  },
  {
    question: 'Can my AI assistant actually control DashCaddy?',
    answer: (
      <>
        Yes, two ways. The <strong>AI Intent Router</strong> understands plain-English commands like &ldquo;deploy
        Plex&rdquo; or &ldquo;check SSL status.&rdquo; The <strong>MCP Server</strong> exposes DashCaddy as a tool
        endpoint for Claude, GPT, and any MCP-compatible AI assistant — your assistant can list services, deploy
        templates, manage DNS, and rebuild the catalog, all through the standardized Model Context Protocol.
      </>
    ),
  },
  {
    question: 'What happens to my services if I uninstall DashCaddy?',
    answer: (
      <>
        By default, the uninstall stops the DashCaddy container but leaves your Docker containers and volumes
        untouched. If you want a clean removal, the uninstaller has a <code>--purge</code> flag that also deletes
        the DashCaddy config and data directories. Either way, your services keep running until you stop them.
      </>
    ),
  },
  {
    question: 'How does Premium compare to other paid dashboards?',
    answer: (
      <>
        Premium is a fixed-duration license. $99 covers a full year (365 days) of SSO, Recipes, Docker Swarm, and
        Fleet Management on one machine. The license expires at the end of its term and you purchase a new one
        to renew. There&rsquo;s no per-user fee and no per-app fee. The free tier already covers everything a single
        host needs, so Premium only makes sense if you specifically want SSO across deployed apps,
        multi-container stacks, or to orchestrate a fleet.
      </>
    ),
  },
  {
    question: 'Is DashCaddy open source?',
    answer: (
      <>
        DashCaddy is proprietary software, but it&rsquo;s built on a fully open-source stack — Caddy, Docker, Node.js,
        Express, Technitium DNS, Tailscale. The AI Intent Router, MCP Server, plugin system, and Security Center are
        all built on open standards. You get vendor-friendly source-available documentation, and your data never
        leaves your hardware.
      </>
    ),
  },
];

export default function FaqSection() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12 text-center">
          <span className="inline-flex items-center rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
            FAQ
          </span>
          <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold text-surface-50">
            Questions, <span className="text-brand-400">answered</span>
          </h2>
          <p className="mt-4 text-lg text-surface-400">
            The most common things people ask before installing DashCaddy.
          </p>
        </div>

        <div className="space-y-3">
          {faqs.map((faq, idx) => (
            <div
              key={idx}
              className={`rounded-xl border transition-all overflow-hidden ${
                open === idx
                  ? 'border-brand-500/40 bg-surface-900/70 shadow-lg shadow-brand-500/5'
                  : 'border-surface-700/50 bg-surface-900/40 hover:border-surface-700'
              }`}
            >
              <button
                onClick={() => setOpen(open === idx ? null : idx)}
                className="w-full px-6 py-4 flex items-center justify-between text-left gap-4"
              >
                <h3 className="text-base sm:text-lg font-semibold text-surface-50">
                  {faq.question}
                </h3>
                <svg
                  className={`w-5 h-5 flex-shrink-0 text-brand-400 transition-transform ${
                    open === idx ? 'rotate-180' : ''
                  }`}
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth={2}
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
              </button>
              {open === idx && (
                <div className="border-t border-surface-700/50 bg-surface-950/40 px-6 py-5">
                  <p className="text-surface-300 leading-relaxed">{faq.answer}</p>
                </div>
              )}
            </div>
          ))}
        </div>

        <div className="mt-10 text-center text-surface-400 text-sm">
          Have a question that&rsquo;s not here?{' '}
          <Link href="/docs" className="text-brand-400 hover:text-brand-300 underline">
            Read the docs
          </Link>{' '}
          or{' '}
          <a href="mailto:support@dashcaddy.net" className="text-brand-400 hover:text-brand-300 underline">
            email support
          </a>
          .
        </div>
      </div>
    </section>
  );
}
