/**
 * FAQPage — now powered by The Sasquatch 🦧
 * Instead of a static wall of text, we surface the AI guide
 * with FAQ context pre-loaded so users can ask anything.
 */

import { useEffect } from 'react';
import { useSeoMeta } from '@unhead/react';
import { Layout } from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { HelpCircle, MessageCircle, MapPin, Zap, Shield, Package } from 'lucide-react';

// Quick FAQ chips — prime the conversation
const FAQ_CHIPS = [
  { label: 'What is SkateSpots?', q: 'What is SkateSpots and how does it work?' },
  { label: 'How do I add a spot?', q: 'How do I add a skate spot to the map?' },
  { label: 'What are zaps?', q: 'What are zaps?' },
  { label: 'Is it free?', q: 'Is SkateSpots free to use?' },
  { label: 'What is My Stash?', q: 'What is My Stash?' },
  { label: 'How do I login?', q: 'How do I log in or create an account?' },
  { label: 'What is Nostr?', q: 'What is Nostr?' },
  { label: 'Privacy & Data', q: 'What data is public and what data is private on SkateSpots?' },
  { label: 'How to sell gear?', q: 'How do I sell gear on SkateSpots?' },
  { label: 'What is The Lab?', q: 'What is The Lab?' },
];

const QUICK_FACTS = [
  { icon: MapPin, color: '#ff0040', label: 'Skate spots worldwide', value: 'Discover & add' },
  { icon: Zap, color: '#f97316', label: 'Bitcoin Lightning zaps', value: '100% free' },
  { icon: Shield, color: '#22c55e', label: 'Decentralized on Nostr', value: 'You own your data' },
  { icon: Package, color: '#a855f7', label: 'Private gear inventory', value: 'Encrypted Stash' },
];

export default function FAQPage() {
  useSeoMeta({
    title: 'FAQ - SkateSpots',
    description: 'Ask The Sasquatch anything about SkateSpots.',
  });

  // Open Sasquatch with FAQ context when this page loads
  useEffect(() => {
    // Dispatch a custom event that SasquatchGuide listens for
    const event = new CustomEvent('sasquatch:open', {
      detail: {
        context: 'faq',
        greeting: "Hey! I'm The Sasquatch 🦧 — ask me anything about SkateSpots. Spots, events, gear, wallets, privacy, Nostr — I've got you. What do you want to know?",
      },
    });
    window.dispatchEvent(event);
  }, []);

  const askSasquatch = (question: string) => {
    const event = new CustomEvent('sasquatch:ask', { detail: { question } });
    window.dispatchEvent(event);
  };

  return (
    <Layout>
      <div className="container px-3 xs:px-4 py-6 sm:py-10 max-w-3xl mx-auto">

        {/* Hero */}
        <div className="text-center mb-7">
          <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#ff0040] via-[#ff6600] to-[#ccff00] mb-4 shadow-2xl shadow-[#ff0040]/40">
            <span className="text-3xl sm:text-4xl">🦧</span>
          </div>
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-black uppercase mb-2 tracking-tight">
            <span className="text-white">Got Questions?</span>
          </h1>
          <p className="text-base sm:text-xl text-gray-400 max-w-lg mx-auto leading-relaxed">
            Ask The Sasquatch — he knows everything about SkateSpots, Nostr, Bitcoin, and skateboarding.
          </p>
        </div>

        {/* CTA Card */}
        <Card className="bg-gradient-to-br from-[#ff0040]/15 to-[#ccff00]/10 border-2 border-[#ff0040]/40 mb-8 shadow-xl shadow-[#ff0040]/10">
          <CardContent className="p-6 text-center">
            <MessageCircle className="h-10 w-10 text-[#ff0040] mx-auto mb-3" />
            <h2 className="text-2xl font-black text-white mb-2 uppercase">Ask The Sasquatch</h2>
            <p className="text-gray-400 mb-5">
              The Sasquatch is open in the bottom-left corner of your screen — just click it and type your question.
              He has live access to spots, events, coaches, and weather.
            </p>
            <Button
              onClick={() => askSasquatch('What can you help me with on SkateSpots?')}
              className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white font-bold px-8 py-3 rounded-full shadow-lg shadow-[#ff0040]/30 text-base gap-2"
            >
              <span className="text-lg">🦧</span>
              Open The Sasquatch
            </Button>
          </CardContent>
        </Card>

        {/* Quick question chips */}
        <div className="mb-10">
          <h3 className="text-sm font-bold uppercase tracking-widest text-gray-500 mb-4 flex items-center gap-2">
            <HelpCircle className="h-4 w-4" />
            Common questions — tap to ask
          </h3>
          <div className="flex flex-wrap gap-2">
            {FAQ_CHIPS.map((chip) => (
              <button
                key={chip.label}
                onClick={() => askSasquatch(chip.q)}
                className="px-4 py-2 rounded-full bg-white/5 border border-white/10 hover:border-[#ff0040]/50 hover:bg-[#ff0040]/10 text-sm text-gray-300 hover:text-white transition-all font-medium active:scale-95"
              >
                {chip.label}
              </button>
            ))}
          </div>
        </div>

        {/* Quick facts grid */}
        <div className="grid grid-cols-2 gap-3 mb-10">
          {QUICK_FACTS.map(({ icon: Icon, color, label, value }) => (
            <Card
              key={label}
              className="bg-black/60 border border-white/10 hover:border-white/20 transition-all"
            >
              <CardContent className="p-4 flex items-center gap-3">
                <div
                  className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
                  style={{ backgroundColor: color + '22', border: `1px solid ${color}44` }}
                >
                  <Icon className="h-5 w-5" style={{ color }} />
                </div>
                <div className="min-w-0">
                  <p className="text-xs text-gray-500 truncate">{label}</p>
                  <p className="text-sm font-bold text-white truncate">{value}</p>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Hint */}
        <p className="text-center text-xs text-gray-600">
          The Sasquatch uses live Nostr data from the SkateSpots relay + AI to answer your questions. 🛹
        </p>
      </div>
    </Layout>
  );
}