F025: Literary Landing Pages (MyStoryFlow Integration)

// apps/analyzer/src/lib/genres/genre-config.ts
import { useReferenceData } from '@mystoryflow/reference-data'
 
export interface GenreConfig {
  code: string
  name: string
  slug: string
  tagline: string
  description: string
  heroImage: string
  themeColors: {
    primary: string
    secondary: string
    accent: string
  }
  literaryTradition: string
  features: GenreFeature[]
  testimonials: GenreTestimonial[]
  faqs: GenreFAQ[]
  sampleReports: string[]
  keywords: string[]
  metaDescription: string
}
 
export interface GenreFeature {
  title: string
  description: string
  icon: string
}
 
export interface GenreTestimonial {
  author: string
  role: string
  quote: string
  bookTitle?: string
  rating: number
  image?: string
}
 
export interface GenreFAQ {
  question: string
  answer: string
}
 
export const GENRE_CONFIGS: Record<string, GenreConfig> = {
  romance: {
    code: 'romance',
    name: 'Romance',
    slug: 'romance',
    tagline: 'Perfect Your Love Story with AI-Powered Analysis',
    description: 'Get detailed feedback on character chemistry, emotional arcs, pacing, and romance tropes. Our AI understands what makes readers fall in love with your characters.',
    heroImage: '/images/genres/romance-hero.jpg',
    accentColor: '#e11d48', // rose-600
    features: [
      {
        title: 'Chemistry Analysis',
        description: 'Evaluate the romantic tension and chemistry between your characters',
        icon: '❤️'
      },
      {
        title: 'Emotional Arc Tracking',
        description: 'Ensure your emotional beats hit at the right moments',
        icon: '📊'
      },
      {
        title: 'Trope Detection',
        description: 'Identify romance tropes and how effectively you use them',
        icon: '📖'
      },
      {
        title: 'Heat Level Assessment',
        description: 'Ensure your romance matches reader expectations for your subgenre',
        icon: '🔥'
      },
      {
        title: 'Conflict Balance',
        description: 'Analyze internal vs external conflicts driving your romance',
        icon: '⚖️'
      },
      {
        title: 'HEA Satisfaction',
        description: 'Evaluate how satisfying your happily-ever-after feels',
        icon: '🎆'
      }
    ],
    testimonials: [
      {
        author: 'Sarah Mitchell',
        role: 'Bestselling Romance Author',
        quote: 'The chemistry analysis helped me understand why my beta readers weren\'t connecting with my couple. After implementing the suggestions, my next book hit the USA Today list!',
        bookTitle: 'Forever Yours',
        rating: 5,
        image: '/images/testimonials/sarah-mitchell.jpg'
      },
      {
        author: 'Jessica Chen',
        role: 'Contemporary Romance Writer',
        quote: 'I was struggling with pacing in my slow-burn romance. The AI pinpointed exactly where I was losing tension and gave me actionable fixes.',
        rating: 5
      }
    ],
    faqs: [
      {
        question: 'Does it work for all romance subgenres?',
        answer: 'Yes! Our AI is trained on contemporary, historical, paranormal, romantic suspense, and more. It adapts its analysis to your specific subgenre expectations.'
      },
      {
        question: 'How does it analyze chemistry between characters?',
        answer: 'Our AI examines dialogue patterns, physical interactions, emotional responses, and tension-building scenes to evaluate the romantic chemistry and provide specific suggestions for improvement.'
      },
      {
        question: 'Will it help with steam/heat levels?',
        answer: 'Absolutely. The AI can assess whether your heat level matches your target audience expectations and provide guidance on building tension appropriately for your subgenre.'
      }
    ],
    sampleReports: ['romance-sample-1.pdf', 'romance-sample-2.pdf'],
    keywords: ['romance manuscript analysis', 'romance writing feedback', 'romance novel editor', 'romance book analysis'],
    metaDescription: 'AI-powered romance manuscript analysis. Get detailed feedback on character chemistry, emotional arcs, and pacing. Perfect your love story today!'
  },
  
  mystery: {
    code: 'mystery',
    name: 'Mystery/Thriller',
    slug: 'mystery-thriller',
    tagline: 'Craft the Perfect Page-Turner with AI Analysis',
    description: 'Analyze plot twists, red herrings, pacing, and suspense. Our AI helps you keep readers guessing until the very last page.',
    heroImage: '/images/genres/mystery-hero.jpg',
    accentColor: '#6366f1', // indigo-500
    features: [
      {
        title: 'Plot Twist Analysis',
        description: 'Evaluate the effectiveness and timing of your reveals',
        icon: '🌀'
      },
      {
        title: 'Red Herring Detection',
        description: 'Ensure your misdirections are clever but fair',
        icon: '🐟'
      },
      {
        title: 'Clue Distribution',
        description: 'Track how you plant and reveal clues throughout',
        icon: '🔍'
      },
      {
        title: 'Suspense Pacing',
        description: 'Analyze tension levels chapter by chapter',
        icon: '⏱️'
      },
      {
        title: 'Character Motives',
        description: 'Evaluate the credibility of suspect motivations',
        icon: '🎭'
      },
      {
        title: 'Resolution Satisfaction',
        description: 'Ensure your ending delivers on the mystery promise',
        icon: '🎯'
      }
    ],
    testimonials: [
      {
        author: 'Michael Torres',
        role: 'Crime Fiction Author',
        quote: 'The clue distribution analysis was eye-opening. I realized I had clustered too many reveals in act three. The rewrite based on the AI feedback got me my first traditional publishing deal.',
        bookTitle: 'Silent Witness',
        rating: 5
      }
    ],
    faqs: [
      {
        question: 'Can it help with police procedurals?',
        answer: 'Yes! Our AI understands different mystery subgenres including cozies, police procedurals, psychological thrillers, and more.'
      },
      {
        question: 'How does it analyze plot twists?',
        answer: 'The AI examines foreshadowing, setup, timing, and reader expectations to evaluate whether your twists are both surprising and satisfying.'
      }
    ],
    sampleReports: ['mystery-sample-1.pdf'],
    keywords: ['mystery manuscript analysis', 'thriller writing feedback', 'mystery plot analysis', 'crime fiction editor'],
    metaDescription: 'AI-powered mystery & thriller manuscript analysis. Perfect your plot twists, pacing, and suspense. Create unputdownable mysteries!'
  },
  
  fantasy: {
    code: 'fantasy',
    name: 'Fantasy',
    slug: 'fantasy',
    tagline: 'Build Worlds That Enchant with AI-Powered Insights',
    description: 'Analyze world-building consistency, magic systems, character arcs, and epic scope. Create immersive fantasy that transports readers.',
    heroImage: '/images/genres/fantasy-hero.jpg',
    accentColor: '#8b5cf6', // violet-500
    features: [
      {
        title: 'World-Building Analysis',
        description: 'Ensure your fantasy world is consistent and immersive',
        icon: '🌍'
      },
      {
        title: 'Magic System Logic',
        description: 'Evaluate rules, limitations, and consistency of magic',
        icon: '✨'
      },
      {
        title: 'Character Journey',
        description: 'Track hero\'s journey and character growth arcs',
        icon: '🗺️'
      },
      {
        title: 'Pacing Balance',
        description: 'Balance action, exposition, and character moments',
        icon: '⚔️'
      },
      {
        title: 'Stakes Escalation',
        description: 'Ensure stakes grow appropriately throughout',
        icon: '📊'
      },
      {
        title: 'Series Potential',
        description: 'Identify threads for future books if applicable',
        icon: '📚'
      }
    ],
    testimonials: [
      {
        author: 'Elena Blackwood',
        role: 'Epic Fantasy Author',
        quote: 'The world-building consistency check caught several timeline issues I had missed through multiple revisions. Invaluable for complex fantasy worlds!',
        bookTitle: 'Crown of Shadows',
        rating: 5
      }
    ],
    faqs: [
      {
        question: 'Does it work for urban fantasy too?',
        answer: 'Absolutely! Our AI adapts to all fantasy subgenres including epic, urban, dark, cozy, and romantasy.'
      },
      {
        question: 'How detailed is the world-building analysis?',
        answer: 'Very detailed. We analyze geography, cultures, magic systems, politics, economics, and internal consistency across all elements.'
      }
    ],
    sampleReports: ['fantasy-sample-1.pdf'],
    keywords: ['fantasy manuscript analysis', 'fantasy writing feedback', 'world-building analysis', 'fantasy novel editor'],
    metaDescription: 'AI-powered fantasy manuscript analysis. Perfect your world-building, magic systems, and epic storytelling. Create unforgettable fantasy!'
  }
}

// apps/analyzer-app/src/app/genres/[slug]/page.tsx
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { GENRE_CONFIGS } from '@/lib/genres/genre-config'
import { GenreHero } from '@/components/landing/GenreHero'
import { GenreFeatures } from '@/components/landing/GenreFeatures'
import { GenreTestimonials } from '@/components/landing/GenreTestimonials'
import { GenreFAQ } from '@/components/landing/GenreFAQ'
import { GenreCTA } from '@/components/landing/GenreCTA'
import { GenrePricing } from '@/components/landing/GenrePricing'
 
export async function generateStaticParams() {
  return Object.values(GENRE_CONFIGS).map((genre) => ({
    slug: genre.slug,
  }))
}
 
export async function generateMetadata({ 
  params 
}: { 
  params: { slug: string } 
}): Promise<Metadata> {
  const genre = Object.values(GENRE_CONFIGS).find(g => g.slug === params.slug)
  
  if (!genre) return {}
  
  return {
    title: `${genre.name} Manuscript Analysis | Story Analyzer`,
    description: genre.metaDescription,
    keywords: genre.keywords.join(', '),
    openGraph: {
      title: genre.tagline,
      description: genre.description,
      images: [genre.heroImage],
    },
  }
}
 
export default function GenreLandingPage({ 
  params 
}: { 
  params: { slug: string } 
}) {
  const genre = Object.values(GENRE_CONFIGS).find(g => g.slug === params.slug)
  
  if (!genre) {
    notFound()
  }
 
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <GenreHero genre={genre} />
      
      {/* Features Grid */}
      <GenreFeatures features={genre.features} accentColor={genre.accentColor} />
      
      {/* Sample Report CTA */}
      <section className="py-16 bg-muted/50">
        <div className="container">
          <div className="text-center max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold mb-4">
              See a Sample {genre.name} Analysis Report
            </h2>
            <p className="text-lg text-muted-foreground mb-8">
              Download a real analysis report to see the depth of feedback 
              you'll receive for your {genre.name.toLowerCase()} manuscript.
            </p>
            <Button size="lg" variant="outline" asChild>
              <a href={`/samples/${genre.sampleReports[0]}`} download>
                Download Sample Report
                <Download className="ml-2 h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </section>
      
      {/* Testimonials */}
      <GenreTestimonials testimonials={genre.testimonials} />
      
      {/* How It Works */}
      <section className="py-16">
        <div className="container">
          <h2 className="text-3xl font-bold text-center mb-12">
            How {genre.name} Analysis Works
          </h2>
          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">1</span>
              </div>
              <h3 className="font-semibold mb-2">Upload Your Manuscript</h3>
              <p className="text-sm text-muted-foreground">
                Securely upload your {genre.name.toLowerCase()} manuscript in 
                any format (DOCX, PDF, TXT)
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">2</span>
              </div>
              <h3 className="font-semibold mb-2">AI Analyzes Your Story</h3>
              <p className="text-sm text-muted-foreground">
                Our genre-trained AI examines every aspect of your 
                {genre.name.toLowerCase()} novel
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">3</span>
              </div>
              <h3 className="font-semibold mb-2">Get Detailed Feedback</h3>
              <p className="text-sm text-muted-foreground">
                Receive your comprehensive report with actionable insights 
                in under 5 minutes
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Pricing */}
      <GenrePricing genre={genre} />
      
      {/* FAQ */}
      <GenreFAQ faqs={genre.faqs} />
      
      {/* Final CTA */}
      <GenreCTA genre={genre} />
    </div>
  )
}

// apps/analyzer-app/src/components/landing/GenreHero.tsx
'use client'
 
import { Button } from '@mystoryflow/ui'
import { ArrowRight, Star } from 'lucide-react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import type { GenreConfig } from '@/lib/genres/genre-config'
 
export function GenreHero({ genre }: { genre: GenreConfig }) {
  return (
    <section 
      className="relative min-h-[600px] flex items-center py-20"
      style={{
        background: `linear-gradient(135deg, ${genre.accentColor}20 0%, transparent 100%)`
      }}
    >
      <div className="container">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="flex">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="h-5 w-5 fill-current text-yellow-500" />
                ))}
              </div>
              <span className="text-sm text-muted-foreground">
                Trusted by 1,000+ {genre.name} authors
              </span>
            </div>
            
            <h1 className="text-5xl lg:text-6xl font-bold mb-6">
              {genre.tagline}
            </h1>
            
            <p className="text-xl text-muted-foreground mb-8">
              {genre.description}
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4">
              <Button size="lg" asChild>
                <Link href="/sign-up">
                  Analyze Your {genre.name} Novel
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <Link href="#features">
                  See What We Analyze
                </Link>
              </Button>
            </div>
            
            <div className="flex items-center gap-6 mt-8 text-sm">
              <div>
                <span className="font-semibold">5 min</span>
                <span className="text-muted-foreground"> analysis time</span>
              </div>
              <div>
                <span className="font-semibold">200+</span>
                <span className="text-muted-foreground"> checkpoints</span>
              </div>
              <div>
                <span className="font-semibold">20+</span>
                <span className="text-muted-foreground"> page report</span>
              </div>
            </div>
          </motion.div>
          
          {/* Hero Image */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative"
          >
            <img
              src={genre.heroImage}
              alt={`${genre.name} manuscript analysis`}
              className="rounded-lg shadow-2xl"
            />
            <div className="absolute -bottom-6 -left-6 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
                  <span className="text-2xl">✓</span>
                </div>
                <div>
                  <p className="font-semibold">Genre-Specific Analysis</p>
                  <p className="text-sm text-muted-foreground">
                    Trained on {genre.name} bestsellers
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

// apps/analyzer-app/src/components/landing/GenreFeatures.tsx
'use client'
 
import { Card } from '@mystoryflow/ui'
import { motion } from 'framer-motion'
import type { GenreFeature } from '@/lib/genres/genre-config'
 
export function GenreFeatures({ 
  features, 
  accentColor 
}: { 
  features: GenreFeature[]
  accentColor: string 
}) {
  return (
    <section id="features" className="py-20">
      <div className="container">
        <div className="text-center mb-12">
          <h2 className="text-3xl lg:text-4xl font-bold mb-4">
            Everything We Analyze in Your Manuscript
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Our AI examines your story from every angle, providing insights 
            that would take human editors weeks to compile.
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <Card className="p-6 h-full hover:shadow-lg transition-shadow">
                <div 
                  className="text-4xl mb-4 w-16 h-16 rounded-lg flex items-center justify-center"
                  style={{ backgroundColor: `${accentColor}20` }}
                >
                  {feature.icon}
                </div>
                <h3 className="text-xl font-semibold mb-2">
                  {feature.title}
                </h3>
                <p className="text-muted-foreground">
                  {feature.description}
                </p>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}

// apps/analyzer-app/src/components/landing/GenreCTA.tsx
'use client'
 
import { useState } from 'react'
import { Button, Input } from '@mystoryflow/ui'
import { ArrowRight } from 'lucide-react'
import { useRouter } from 'next/navigation'
import type { GenreConfig } from '@/lib/genres/genre-config'
 
export function GenreCTA({ genre }: { genre: GenreConfig }) {
  const [email, setEmail] = useState('')
  const router = useRouter()
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    // Track conversion
    await fetch('/api/analytics/track', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        event: 'genre_cta_submit',
        properties: {
          genre: genre.code,
          email,
          source: 'landing_page_bottom'
        }
      })
    })
    
    // Redirect to sign-up with pre-filled email
    router.push(`/sign-up?email=${encodeURIComponent(email)}&genre=${genre.code}`)
  }
  
  return (
    <section 
      className="py-20"
      style={{
        background: `linear-gradient(135deg, ${genre.accentColor}10 0%, transparent 100%)`
      }}
    >
      <div className="container">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-4">
            Ready to Perfect Your {genre.name} Manuscript?
          </h2>
          <p className="text-xl text-muted-foreground mb-8">
            Join thousands of authors who've improved their stories with our 
            AI-powered analysis. Get started in less than 2 minutes.
          </p>
          
          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
            <Input
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1"
              required
            />
            <Button type="submit" size="lg">
              Start Free Analysis
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </form>
          
          <p className="text-sm text-muted-foreground mt-4">
            No credit card required • 3 free analyses per month
          </p>
          
          <div className="flex items-center justify-center gap-8 mt-12">
            <div>
              <p className="text-3xl font-bold" style={{ color: genre.accentColor }}>
                98%
              </p>
              <p className="text-sm text-muted-foreground">
                satisfaction rate
              </p>
            </div>
            <div className="h-12 w-px bg-border" />
            <div>
              <p className="text-3xl font-bold" style={{ color: genre.accentColor }}>
                50K+
              </p>
              <p className="text-sm text-muted-foreground">
                manuscripts analyzed
              </p>
            </div>
            <div className="h-12 w-px bg-border" />
            <div>
              <p className="text-3xl font-bold" style={{ color: genre.accentColor }}>
                4.9★
              </p>
              <p className="text-sm text-muted-foreground">
                average rating
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

// apps/analyzer-app/src/hooks/useABTest.ts
import { useEffect, useState } from 'react'
import { createClient } from '@mystoryflow/database/client'
 
export function useABTest(testName: string, variants: string[]) {
  const [variant, setVariant] = useState<string>(variants[0])
  const [loading, setLoading] = useState(true)
  const supabase = getSupabaseBrowserClient()
  
  useEffect(() => {
    const assignVariant = async () => {
      // Check if user already has a variant
      const stored = localStorage.getItem(`ab-test-${testName}`)
      
      if (stored && variants.includes(stored)) {
        setVariant(stored)
        setLoading(false)
        return
      }
      
      // Assign random variant
      const newVariant = variants[Math.floor(Math.random() * variants.length)]
      localStorage.setItem(`ab-test-${testName}`, newVariant)
      setVariant(newVariant)
      
      // Track assignment
      await fetch('/api/analytics/track', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          event: 'ab_test_assigned',
          properties: {
            test_name: testName,
            variant: newVariant
          }
        })
      })
      
      setLoading(false)
    }
    
    assignVariant()
  }, [testName, variants])
  
  const trackConversion = async (conversionType: string) => {
    await fetch('/api/analytics/track', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        event: 'ab_test_conversion',
        properties: {
          test_name: testName,
          variant,
          conversion_type: conversionType
        }
      })
    })
  }
  
  return { variant, loading, trackConversion }
}