SkateSpots/src/pages/FAQPage.tsx

/**
 * 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 { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { HelpCircle, MessageCircle, MapPin, Zap, Shield, Package } from 'lucide-react';
import { useTranslation } from '@/contexts/language';

// Quick FAQ chips — prime the conversation
const FAQ_CHIPS = [
  { label: 'settingsUi.faq.chip1Label', q: 'settingsUi.faq.chip1Q' },
  { label: 'settingsUi.faq.chip2Label', q: 'settingsUi.faq.chip2Q' },
  { label: 'settingsUi.faq.chip3Label', q: 'settingsUi.faq.chip3Q' },
  { label: 'settingsUi.faq.chip4Label', q: 'settingsUi.faq.chip4Q' },
  { label: 'settingsUi.faq.chip5Label', q: 'settingsUi.faq.chip5Q' },
  { label: 'settingsUi.faq.chip6Label', q: 'settingsUi.faq.chip6Q' },
  { label: 'settingsUi.faq.chip7Label', q: 'settingsUi.faq.chip7Q' },
  { label: 'settingsUi.faq.chip8Label', q: 'settingsUi.faq.chip8Q' },
  { label: 'settingsUi.faq.chip9Label', q: 'settingsUi.faq.chip9Q' },
  { label: 'settingsUi.faq.chip10Label', q: 'settingsUi.faq.chip10Q' },
];

const QUICK_FACTS = [
  { icon: MapPin, color: '#ff0040', label: 'settingsUi.faq.fact1Label', value: 'settingsUi.faq.fact1Value' },
  { icon: Zap, color: '#f97316', label: 'settingsUi.faq.fact2Label', value: 'settingsUi.faq.fact2Value' },
  { icon: Shield, color: '#22c55e', label: 'settingsUi.faq.fact3Label', value: 'settingsUi.faq.fact3Value' },
  { icon: Package, color: '#a855f7', label: 'settingsUi.faq.fact4Label', value: 'settingsUi.faq.fact4Value' },
];

/**
 * Static answers. The page leans on The Sasquatch, but if the guide fails to
 * mount (or events are missed) the FAQ must still answer the basics itself.
 */
const STATIC_FAQ = [
  {
    q: 'settingsUi.faq.s1Q',
    a: 'settingsUi.faq.s1A',
  },
  {
    q: 'settingsUi.faq.s2Q',
    a: 'settingsUi.faq.s2A',
  },
  {
    q: 'settingsUi.faq.s3Q',
    a: 'settingsUi.faq.s3A',
  },
  {
    q: 'settingsUi.faq.s4Q',
    a: 'settingsUi.faq.s4A',
  },
  {
    q: 'settingsUi.faq.s5Q',
    a: 'settingsUi.faq.s5A',
  },
  {
    q: 'settingsUi.faq.s6Q',
    a: 'settingsUi.faq.s6A',
  },
];

export default function FAQPage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('settingsUi.faq.seoTitle'),
    description: t('settingsUi.faq.seoDescription'),
  });

  // 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: t('settingsUi.faq.greeting'),
      },
    });
    window.dispatchEvent(event);
  }, [t]);

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

  return (
    <>
      <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">{t('settingsUi.faq.gotQuestions')}</span>
          </h1>
          <p className="text-base sm:text-xl text-gray-400 max-w-lg mx-auto leading-relaxed">
            {t('settingsUi.faq.heroDesc')}
          </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">{t('settingsUi.faq.askTitle')}</h2>
            <p className="text-gray-400 mb-5">
              {t('settingsUi.faq.askDesc')}
            </p>
            <Button
              onClick={() => askSasquatch(t('settingsUi.faq.askQuestion'))}
              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>
              {t('settingsUi.faq.openSasquatch')}
            </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" />
            {t('settingsUi.faq.commonQuestions')}
          </h3>
          <div className="flex flex-wrap gap-2">
            {FAQ_CHIPS.map((chip) => (
              <button
                key={chip.label}
                onClick={() => askSasquatch(t(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"
              >
                {t(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">{t(label)}</p>
                  <p className="text-sm font-bold text-white truncate">{t(value)}</p>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Static answers — work even if the guide doesn't open */}
        <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" />
            {t('settingsUi.faq.quickAnswers')}
          </h3>
          <div className="space-y-2">
            {STATIC_FAQ.map(({ q, a }) => (
              <details key={q} className="group rounded-xl border border-white/10 bg-black/60 p-4">
                <summary className="cursor-pointer list-none text-sm font-bold text-white transition-colors group-open:text-[#ccff00]">
                  {t(q)}
                </summary>
                <p className="mt-2 text-sm leading-relaxed text-gray-400">{t(a)}</p>
              </details>
            ))}
          </div>
        </div>

        {/* Hint */}
        <p className="text-center text-xs text-gray-600">
          {t('settingsUi.faq.footerHint')}
        </p>
      </div>
    </>
  );
}