// Foundry Familiars — Hearth Control User Manual
// A comprehensive, book-style reference for every feature in Ghost Control

import { Metadata } from 'next';
import Link from 'next/link';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { UserManualContent } from './user-manual-content';
import { BRAND, VOCAB } from '@/lib/white-label/constants';
import {
  Book, ArrowLeft, LogIn, FileText,
} from 'lucide-react';

export const metadata: Metadata = {
  title: `User Manual | ${BRAND.companyName}`,
  description: `The complete Hearth Control User Manual for ${BRAND.companyName}. Ten in-depth chapters covering login, configuration, agents, reports, finance, inventory, POS, CRM, The Hearth, autonomy, compliance, and administration.`,
};

export default function UserManualPage() {
  return (
    <div className="min-h-screen bg-brand-bg">
      <Header />
      <main className="pt-24 pb-16">
        <div className="max-w-5xl mx-auto px-4 sm:px-6">
          {/* Breadcrumb */}
          <Link
            href="/docs"
            className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-brand mb-8 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Documentation Hub
          </Link>

          {/* Hero */}
          <div className="text-center mb-14">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
              <Book className="w-4 h-4 text-brand" />
              <span className="text-sm text-gray-300">Ghost Control — Complete Reference</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              User <span className="gradient-text">Manual</span>
            </h1>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto mb-6">
              The definitive, chapter-by-chapter guide to everything inside Ghost Control.
              Whether you&apos;re logging in for the first time or configuring advanced autonomy
              rules, this manual walks you through every screen, every button, and every
              workflow the platform offers.
            </p>
            <div className="flex flex-wrap items-center justify-center gap-4 text-sm">
              <Link
                href="/ghost-control"
                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-deep/20 border border-brand-deep/30 rounded-lg text-brand hover:bg-brand-deep/30 transition-colors"
              >
                <LogIn className="w-4 h-4" />
                Open Ghost Control
              </Link>
              <Link
                href="/docs"
                className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-gray-300 hover:bg-white/10 transition-colors"
              >
                <FileText className="w-4 h-4" />
                All Documentation
              </Link>
            </div>
          </div>

          {/* Table of Contents */}
          <div className="bg-slate-800/80 border border-slate-700 rounded-2xl p-8 mb-12">
            <h2 className="text-xl font-bold text-white mb-4">Table of Contents</h2>
            <p className="text-gray-400 text-sm mb-6">
              Click any chapter to jump directly to it, or scroll through the manual top-to-bottom
              like a traditional reference book. Each chapter includes step-by-step instructions,
              field-level explanations, and tips for getting the most out of every feature.
            </p>
            <div className="grid md:grid-cols-2 gap-x-8 gap-y-2">
              {[
                { num: 1, title: 'Getting Started', anchor: 'ch1' },
                { num: 2, title: 'Configuration Center', anchor: 'ch2' },
                { num: 3, title: 'Agents & Chat', anchor: 'ch3' },
                { num: 4, title: 'Reports & Intelligence', anchor: 'ch4' },
                { num: 5, title: 'Finance Operations', anchor: 'ch5' },
                { num: 6, title: 'Inventory & Supply Chain', anchor: 'ch6' },
                { num: 7, title: 'Point of Sale (POS)', anchor: 'ch7' },
                { num: 8, title: 'CRM & Sales Pipeline', anchor: 'ch8' },
                { num: 9, title: 'The Hearth & Code Generation', anchor: 'ch9' },
                { num: 10, title: 'Autonomy, Compliance & Administration', anchor: 'ch10' },
              ].map((ch) => (
                <a
                  key={ch.anchor}
                  href={`#${ch.anchor}`}
                  className="flex items-center gap-3 py-2 text-gray-300 hover:text-brand transition-colors group"
                >
                  <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-deep/20 text-brand flex items-center justify-center font-bold text-xs group-hover:bg-brand-deep/40 transition-colors">
                    {ch.num}
                  </span>
                  <span className="group-hover:underline">{ch.title}</span>
                </a>
              ))}
            </div>
          </div>

          {/* Chapter content — client component for accordions */}
          <UserManualContent />

          {/* Footer CTA */}
          <div className="mt-16 text-center">
            <div className="bg-gradient-to-r from-brand-deep/10 via-brand-secondary-deep/10 to-brand-deep/10 border border-brand-deep/20 rounded-2xl p-8">
              <h3 className="text-2xl font-bold text-white mb-3">Ready to get started?</h3>
              <p className="text-gray-400 mb-6 max-w-2xl mx-auto">
                The best way to learn Ghost Control is to use it. Log in, toggle a few modules,
                chat with an agent, and run your first report. Everything you&apos;ve read here
                is waiting for you inside the dashboard.
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Link
                  href="/ghost-control"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-deep to-brand-secondary text-white rounded-xl font-semibold hover:opacity-90 transition-opacity"
                >
                  <LogIn className="w-5 h-5" />
                  Launch Ghost Control
                </Link>
                <Link
                  href="/docs"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-white/5 border border-white/10 text-gray-300 rounded-xl font-semibold hover:bg-white/10 transition-colors"
                >
                  <Book className="w-5 h-5" />
                  Back to Docs
                </Link>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}
