'use client';

import { useState } from 'react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import HeroSection from '@/components/HeroSection';
import SearchSection, { ScrapeResult } from '@/components/SearchSection';
import SearchResults from '@/components/SearchResults';
import DemoSection from '@/components/DemoSection';
import StatisticsSection from '@/components/StatisticsSection';
import PricingSection from '@/components/PricingSection';
import SupportedServicesSection from '@/components/SupportedServicesSection';
import HeroBlob from '@/components/HeroBlob';
import { useAuthStore } from '@/store/authStore';
import { useTranslations } from 'next-intl';

const FAQ_KEYS = [
  'notReturning',
  'differentPrice',
  'multiCountry',
  'platformsSupported',
  'changePlan',
  'stuckSearch',
] as const;

const FEATURE_KEYS = [
  'compareCountries',
  'allPlatforms',
  'desktopVsMobile',
  'realPrices',
  'searchHistory',
  'private',
] as const;

const FEATURE_ICONS: Record<string, string> = {
  compareCountries: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 004 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064',
  allPlatforms: 'M4 6h16M4 10h16M4 14h16M4 18h16',
  desktopVsMobile: 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z',
  realPrices: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
  searchHistory: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
  private: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
};

export default function Home() {
  const [results, setResults] = useState<ScrapeResult[]>([]);
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const { isAuthenticated, hasHydrated } = useAuthStore();
  const th = useTranslations('pages.home');
  const thero = useTranslations('hero');

  if (!hasHydrated) return null;

  /* ── Logged-in home ───────────────────────────────────────────── */
  if (isAuthenticated) {
    return (
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-1 pt-[57px]">

          {/* Compact hero: heading + description only, no animation, no CTAs */}
          <div className="max-w-6xl mx-auto px-4 sm:px-6 pt-8 md:pt-20 pb-2">
            <h1 className="text-3xl font-bold text-gray-900 leading-tight mb-3">
              {thero('headingPrefix')}{' '}
              <span className="gradient-text">{thero('headingSpan')}</span>
            </h1>
            <p className="text-gray-500 text-base leading-relaxed max-w-2xl">
              {thero.rich('loggedInSubheading', {
                highlight: () => (
                  <span className="text-brand-purple font-medium">{thero('loggedInSubheadingHighlight')}</span>
                ),
              })}
            </p>
          </div>

          {/* Search — primary section */}
          <SearchSection onResults={setResults} results={results} compact />
          <SearchResults results={results} />

          {/* Why CahooTravel */}
          <section className="py-16 bg-gray-50 border-t border-gray-100">
            <div className="max-w-6xl mx-auto px-4 sm:px-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">{th('whyCahooHeading')}</h2>
              <p className="text-gray-500 text-sm mb-10 max-w-xl">
                {th('whyCahooSubheading')}
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {FEATURE_KEYS.map(key => (
                  <div key={key} className="bg-white rounded-2xl border border-gray-100 p-6 flex flex-col gap-3">
                    <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
                      <svg className="w-5 h-5 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                        <path strokeLinecap="round" strokeLinejoin="round" d={FEATURE_ICONS[key]} />
                      </svg>
                    </div>
                    <h3 className="text-sm font-semibold text-gray-900">{th(`features.${key}.title` as Parameters<typeof th>[0])}</h3>
                    <p className="text-sm text-gray-500 leading-relaxed">
                      {th(`features.${key}.body` as Parameters<typeof th>[0])}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* FAQ */}
          <section className="py-16 bg-white border-t border-gray-100">
            <div className="max-w-3xl mx-auto px-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">{th('faqHeading')}</h2>
              <p className="text-gray-500 text-sm mb-8">
                {th.rich('faqSupport', {
                  link: () => (
                    <a href="/support" className="text-brand-purple hover:underline">{th('faqSupportLink')}</a>
                  ),
                })}
              </p>
              <div className="flex flex-col divide-y divide-gray-100">
                {FAQ_KEYS.map((key, i) => (
                  <div key={key} className="py-4">
                    <button
                      onClick={() => setOpenFaq(openFaq === i ? null : i)}
                      className="w-full flex items-center justify-between gap-4 text-left group"
                    >
                      <span className="text-sm font-medium text-gray-900 group-hover:text-brand-purple transition-colors">
                        {th(`faqs.${key}.q` as Parameters<typeof th>[0])}
                      </span>
                      <svg
                        className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${openFaq === i ? 'rotate-180' : ''}`}
                        fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                      </svg>
                    </button>
                    {openFaq === i && (
                      <p className="mt-3 text-sm text-gray-500 leading-relaxed pr-4 sm:pr-8">
                        {th(`faqs.${key}.a` as Parameters<typeof th>[0])}
                      </p>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </section>

        </main>
        <Footer />
      </div>
    );
  }

  /* ── Public home (unchanged) ──────────────────────────────────── */
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1 pt-[57px]">
        <div className="relative overflow-hidden lg:min-h-[calc(100vh-57px)] lg:flex lg:flex-col">
          <div className="absolute inset-y-0 right-0 w-2/3 hidden md:block pointer-events-none flex items-center">
            <HeroBlob />
          </div>
          <HeroSection />
          <SearchSection onResults={setResults} results={results} />
        </div>
        <SearchResults results={results} />
        <DemoSection />
        <StatisticsSection />
        <PricingSection />
        <SupportedServicesSection />
      </main>
      <Footer />
    </div>
  );
}