'use client'

import React, { useState } from 'react';
import { 
  Check, 
  Clock, 
  Zap, 
  Calendar, 
  Image, 
  MessageSquare, 
  Hash, 
  TrendingUp, 
  Brain,
  Star,
  ArrowRight,
  Heart,
  Target,
  Sparkles,
  Quote,
  Video
} from 'lucide-react';

const SocialMediaPost = () => {
  const [activeFeature, setActiveFeature] = useState('ideation');

  const features = [
    {
      id: 'ideation',
      icon: Brain,
      title: 'AI Content Ideation Engine',
      description: 'Never face a blank content calendar again. Our AI analyzes trending topics in your niche, seasonal events, and your past high-performing content to generate endless post ideas that resonate with your audience.',
      highlights: [
        'Topic Cluster Generation: Get 50+ related post ideas from a single keyword',
        'Seasonal Content Calendar: Automatically generated holiday and event-specific content',
        'Competitor Content Analysis: See what&apos;s working for similar brands in your space',
        'Evergreen Content Suggestions: Identify topics with long-term relevance'
      ],
      example: {
        input: 'vegan meal prep',
        output: '25 post ideas including "5 Quick Vegan Lunches Under 400 Calories," "Meal Prep Mistakes Every Vegan Should Avoid," "Seasonal Vegan Grocery Shopping Guide," and engagement questions like "What&apos;s your favorite vegan protein source?"'
      },
      popular: true
    },
    {
      id: 'caption',
      icon: MessageSquare,
      title: 'AI Caption Generator with Brand Voice Matching',
      description: 'Captions that sound like you wrote them—because the AI learned your voice. Train our AI on your existing content, and it will generate captions that maintain your unique tone, style, and personality.',
      highlights: [
        'Multi-Tone Capability: Switch between professional, casual, witty, or inspirational tones',
        'Platform-Optimized Length: Perfect character counts for each platform&apos;s algorithm',
        'Call-to-Action Integration: Automatically include engaging CTAs that drive action',
        'Emoji Optimization: Strategic emoji placement that increases engagement by 24%'
      ],
      example: {
        before: '"Check out our new product"',
        after: '"Guess what just landed! ✨ Our team has been working tirelessly to bring you something truly special. The wait is over - our [Product Name] is here to revolutionize your [benefit]. Ready to be one of the first to experience it? 👇 Click the link in our bio!"'
      }
    },
    {
      id: 'hashtag',
      icon: Hash,
      title: 'Intelligent Hashtag Strategy Engine',
      description: 'Stop guessing which hashtags will work. Our AI analyzes real-time performance data to recommend high-reach, low-competition hashtags specific to your content and audience.',
      highlights: [
        'Hashtag Performance Prediction: Know which tags will perform before you post',
        'Niche-Specific Recommendations: Discover hidden gem hashtags in your industry',
        'Banished Shadowban Triggers: Avoid flagged and overused hashtags automatically',
        'Optimal Hashtag Quantity: Platform-specific recommendations (5-10 for Instagram, 1-2 for Twitter, etc.)'
      ],
      example: {
        input: 'yoga instructor posting about morning routines',
        output: 'Broad Reach: #mindfulness #wellness | Niche Specific: #yogaeveryday #morningyoga | Micro Community: #yogateacherssofinstagram #6amyogacrew'
      }
    },
    {
      id: 'image',
      icon: Image,
      title: 'AI Image & Visual Content Generator',
      description: 'Stunning visuals that match your brand—no design skills required. Integrated DALL-E technology creates custom images, graphics, and aesthetic compositions that align with your brand guidelines.',
      highlights: [
        'Brand Style Memory: Save your colors, fonts, and logo for consistent visuals',
        'Platform-Specific Dimensions: Perfectly sized for Instagram posts, stories, Pinterest pins, etc.',
        'Template Library: 500+ customizable templates for different content types',
        'Visual Trend Analysis: AI suggests styles and compositions currently performing well in your niche'
      ],
      example: {
        input: 'minimalist coffee shop aesthetic, warm tones, morning light, quote about coffee',
        output: '5 unique social media images with your brand colors and logo placement, optimized for Instagram feed and stories'
      },
      new: true
    }
  ];

  const testimonials = [
    {
      name: 'Maria Rodriguez',
      role: 'Founder of Bloom Boutique',
      content: '"I went from spending 8 hours weekly on social media to 30 minutes. PlanPost AI not only saved me time but increased our engagement by 240% in the first month."',
      icon: Heart
    },
    {
      name: 'David Chen',
      role: 'E-commerce Founder',
      content: '"I didn&apos;t realize how much mental energy social media was consuming until I started using PlanPost AI. That constant background anxiety about content is completely gone."',
      icon: Brain
    },
    {
      name: 'Sarah Johnson',
      role: 'Nutrition Coach',
      content: '"For the first time, I feel completely confident in every post I publish. I know it&apos;s optimized, timed perfectly, and likely to perform well. That confidence is priceless."',
      icon: Target
    },
    {
      name: 'Miguel Santos',
      role: 'Photographer',
      content: '"I was so burned out on social media I considered quitting. PlanPost AI removed the grind and let me rediscover why I started creating content in the first place."',
      icon: Sparkles
    },
    {
      name: 'Rachel Brown',
      role: 'Freelance Designer',
      content: '"I got 12 hours of my week back. I&apos;m using that time for client work that actually pays my bills, and my social media has never looked better. It&apos;s a win-win."',
      icon: Clock
    },
    {
      name: 'Jessica Williams',
      role: 'CEO of Bloom & Grow Digital',
      content: '"PlanPost AI transformed our agency. We went from struggling to keep up with client content to delivering exceptional results with a fraction of the effort."',
      icon: TrendingUp
    }
  ];

  const caseStudies = [
    {
      company: 'Bloom & Grow Digital Agency',
      metric: '+240%',
      metricLabel: 'Engagement',
      challenge: 'Managing social media for 12+ clients with limited team resources. Spending 4-6 hours per client weekly on content creation, leading to burnout and inconsistent results across accounts.',
      solution: 'Implemented AI content generation for all client accounts, using brand voice matching for each client&apos;s unique tone and audience.',
      results: [
        '78% Reduction in content creation time',
        '240% Average engagement increase',
        '15 Hours saved weekly',
        '5 new clients onboarded without adding staff'
      ]
    },
    {
      company: 'Mountain Top Fitness',
      metric: '+315%',
      metricLabel: 'Followers',
      challenge: 'Local gym struggling to attract new members through social media. Inconsistent posting, generic content, and no clear strategy led to stagnant growth despite having a great facility.',
      solution: 'Used AI to develop a comprehensive content strategy focused on local SEO, community building, and value-driven content that addressed specific fitness concerns of their target demographic.',
      results: [
        '315% Follower growth',
        '42 New members from social media',
        '$18,900 Additional annual revenue',
        'Consistent posting schedule achieved'
      ]
    }
  ];

  const faqs = [
    {
      question: 'How does AI content generation work?',
      answer: 'PlanPost&apos;s generator relies on state-of-the-art machine learning and natural language processing. For example, models like GPT-4 analyze vast amounts of text to learn language patterns. When you give a prompt, the AI predicts the best words and sentences to fit your request, producing coherent, relevant content instantly. Over time it adapts: the AI learns from your edits and past campaigns to make future content even better.'
    },
    {
      question: 'How is PlanPost AI different from other tools?',
      answer: 'Many AI tools focus on a single task. For instance, Jasper promotes enterprise-level content acceleration, and Ocoya specializes in social media posting and design. PlanPost AI stands out by combining these into one platform. It not only writes copy like Jasper, but also includes Canva-style design tools and one-click scheduling like Ocoya. Simplified AI is also all-in-one, but PlanPost specifically targets U.S. marketers with easy workflows and U.S.-based support.'
    },
    {
      question: 'How secure and unique is the content?',
      answer: 'PlanPost&apos;s AI creates original content in real time, based on your prompts and brand data. The output isn&apos;t copied from anywhere – it&apos;s generated anew each time. Of course, it&apos;s best practice to review and fine-tune any AI draft to ensure accuracy and the right tone. For businesses concerned about SEO and uniqueness, PlanPost includes tools to check for duplicate content and to insert keywords. Many users find that AI-generated content is a great first draft that they can polish, giving them both speed and originality.'
    },
    {
      question: 'How does the AI learn my brand voice?',
      answer: 'You can either complete our brand voice questionnaire (takes 5 minutes) or connect your existing social media accounts. Our AI analyzes your past content to understand your tone, style, frequently used words, and audience engagement patterns to generate content that sounds authentically you.'
    },
    {
      question: 'Can I edit the AI-generated content?',
      answer: 'Absolutely! Every piece of AI-generated content is fully customizable. Our platform makes it easy to tweak captions, regenerate images with different styles, rearrange your content calendar, and add your personal touch. The AI provides the foundation—you add the final magic.'
    },
    {
      question: 'What social media platforms do you support?',
      answer: 'We currently support Instagram, Facebook, Twitter, LinkedIn, Pinterest, and TikTok. Each platform gets content optimized for its specific algorithm, ideal post length, image dimensions, and engagement patterns.'
    }
  ];

  const activeFeatureData = features.find(feature => feature.id === activeFeature);

  return (
    <div className="min-h-screen" style={{ background: 'linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)' }}>
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
          <div className="text-center">
            <div className="inline-flex items-center space-x-2 bg-white/80 text-[#6a47ed] px-4 py-2 rounded-full text-sm font-medium mb-8 backdrop-blur-sm">
              <Sparkles className="w-4 h-4" />
              <span>AI-Powered Social Media Content Generation</span>
            </div>
            
            <h1 className="text-4xl md:text-6xl font-bold text-black mb-6">
              Generate a Month of
              <span className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent"> Social Media <br/> Content </span> 
              in One Click
            </h1>
            
            <p className="text-xl text-black/80 mb-8 max-w-3xl mx-auto leading-relaxed">
              Struggling with social media content? PlanPost AI&apos;s content generator creates engaging captions, ideas, and images in seconds. Save 10+ hours weekly, grow your audience, and post consistently. Start Your Free Trial!
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
              <button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-8 py-4 rounded-xl font-semibold text-lg hover:shadow-2xl transition-all duration-200 shadow-lg flex items-center space-x-2">
                <span>Start Your Free Trial</span>
                <ArrowRight className="w-5 h-5" />
              </button>
              <button className="border border-black/20 text-black px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/50 transition-all duration-200 flex items-center space-x-2 backdrop-blur-sm">
                <Video className="w-5 h-5" />
                <span>Watch Demo</span>
              </button>
            </div>

            <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
              <div className="flex items-center space-x-1">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              <span className="font-medium">4.9/5 from 2,500+ creators</span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
              <div className="bg-white/60 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-sm">
                <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-xl flex items-center justify-center mb-4">
                  <Clock className="w-6 h-6 text-[#6a47ed]" />
                </div>
                <h3 className="font-semibold text-black mb-2">Save 10+ Hours Weekly</h3>
                <p className="text-black/70 text-sm">Automate your content creation process</p>
              </div>
              <div className="bg-white/60 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-sm">
                <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-xl flex items-center justify-center mb-4">
                  <TrendingUp className="w-6 h-6 text-[#ff4ca5]" />
                </div>
                <h3 className="font-semibold text-black mb-2">Grow Your Audience</h3>
                <p className="text-black/70 text-sm">Algorithm-optimized content that performs</p>
              </div>
              <div className="bg-white/60 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-sm">
                <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-xl flex items-center justify-center mb-4">
                  <Calendar className="w-6 h-6 text-[#6a47ed]" />
                </div>
                <h3 className="font-semibold text-black mb-2">Post Consistently</h3>
                <p className="text-black/70 text-sm">Never miss a posting day again</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Problem Section */}
      <section className="py-20 bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              Does This Sound Familiar? The Social Media Content Struggle is Real
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-4">
                <Clock className="w-6 h-6 text-red-600" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">The Time Sink</h3>
              <p className="text-black/80 mb-4">
                You spend 2-3 hours brainstorming, writing, and designing a single week&apos;s worth of content. That&apos;s 10-15 hours monthly that could be spent on revenue-generating activities.
              </p>
              <div className="bg-white/60 rounded-lg p-4 border border-white/20">
                <p className="text-sm text-black/70 font-medium">
                  The average small business owner wastes 28 hours per month on social media content creation that delivers mediocre results.
                </p>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-4">
                <Zap className="w-6 h-6 text-orange-600" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">The Creative Burnout</h3>
              <p className="text-black/80 mb-4">
                Staring at a blank screen every Monday morning, wondering &quot;what should I post today?&quot; The pressure to be consistently creative leads to mental fatigue.
              </p>
              <div className="bg-white/60 rounded-lg p-4 border border-white/20">
                <p className="text-sm text-black/70 font-medium">
                  42% of marketers cite content creation as their biggest challenge
                </p>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mb-4">
                <Calendar className="w-6 h-6 text-yellow-600" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">The Inconsistency Problem</h3>
              <p className="text-black/80 mb-4">
                Your posting schedule looks like a heartbeat monitor—sporadic bursts of activity followed by weeks of silence. This inconsistency confuses algorithms and frustrates followers.
              </p>
              <div className="bg-white/60 rounded-lg p-4 border border-white/20">
                <p className="text-sm text-black/70 font-medium">
                  67% of marketers struggle with content consistency
                </p>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
                <Target className="w-6 h-6 text-blue-600" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">The Relevance Challenge</h3>
              <p className="text-black/80 mb-4">
                You&apos;re using last month&apos;s trending hashtags, missing current conversations, and posting at times when your audience isn&apos;t even active.
              </p>
              <div className="bg-white/60 rounded-lg p-4 border border-white/20">
                <p className="text-sm text-black/70 font-medium">
                  10.5 average hours spent weekly on content creation
                </p>
              </div>
            </div>
          </div>

          <div className="text-center mt-12">
            <div className="bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl p-8 border border-[#6a47ed]/20 max-w-2xl mx-auto backdrop-blur-sm">
              <h3 className="text-2xl font-bold text-black mb-4">
                What if you could eliminate these struggles and create better content in 80% less time?
              </h3>
              <button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-8 py-3 rounded-lg font-semibold hover:shadow-xl transition-all duration-200">
                Find Out How
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* AI Partner Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              Meet Your New AI Content Partner: Create, Schedule, and Grow—Automatically
            </h2>
            <p className="text-xl text-black/80 max-w-3xl mx-auto">
              PlanPost AI isn&apos;t just another social media tool—it&apos;s your AI-powered content co-pilot that understands your brand voice, knows what your audience engages with, and generates platform-optimized content that actually performs.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-xl flex items-center justify-center mb-4">
                <Zap className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">From Zero to 30 Posts in 5 Minutes</h3>
              <p className="text-black/80">
                What used to take days now happens during your coffee break. Our AI analyzes your industry, audience, and goals to generate a complete monthly content calendar with engaging captions and stunning visuals.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-xl flex items-center justify-center mb-4">
                <Image className="w-6 h-6 text-[#ff4ca5]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Content That Actually Looks Professional</h3>
              <p className="text-black/80">
                No more struggling with Canva templates or expensive designers. Our integrated AI image generator creates on-brand visuals that match your aesthetic and capture attention in crowded feeds.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-xl flex items-center justify-center mb-4">
                <TrendingUp className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Algorithm-Approved Posting Strategy</h3>
              <p className="text-black/80">
                We don&apos;t just create content—we create content that platforms love. Optimal posting times, trending hashtags, and engagement-boosting formats are built into every piece of content we generate.
              </p>
            </div>
          </div>

          <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
            <div className="flex flex-col lg:flex-row items-center justify-between gap-8">
              <div className="flex-1">
                <h3 className="text-2xl font-bold text-black mb-4">See the Magic in Action</h3>
                <p className="text-black/80 mb-4">
                  Watch how Sarah, a boutique owner, generates 30 days of Instagram content in under 4 minutes
                </p>
                <button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-xl transition-all duration-200 flex items-center space-x-2">
                  <Video className="w-5 h-5" />
                  <span>Watch Demo Video</span>
                </button>
              </div>
              <div className="flex-1 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-xl p-6 border border-[#6a47ed]/20">
                <Quote className="w-8 h-8 text-[#6a47ed] mb-4" />
                <p className="text-black/80 italic mb-4">
                  &quot;I went from spending 8 hours weekly on social media to 30 minutes. PlanPost AI not only saved me time but increased our engagement by 240% in the first month.&quot;
                </p>
                <div>
                  <p className="font-semibold text-black">Maria Rodriguez</p>
                  <p className="text-black/70 text-sm">Founder of Bloom Boutique</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              The Complete AI Content Generation Toolkit
            </h2>
            <p className="text-xl text-black/80 max-w-2xl mx-auto">
              Every feature designed to eliminate a specific content creation pain point and replace it with automated, intelligent solutions.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-12">
            {features.map((feature) => (
              <button
                key={feature.id}
                onClick={() => setActiveFeature(feature.id)}
                className={`p-6 rounded-2xl text-left transition-all duration-200 backdrop-blur-sm ${
                  activeFeature === feature.id
                    ? 'bg-white shadow-lg border border-[#6a47ed]/20'
                    : 'bg-white/50 hover:bg-white/80 border border-white/20'
                }`}
              >
                <div className="flex items-start justify-between mb-4">
                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                    activeFeature === feature.id ? 'bg-[#6a47ed]/10' : 'bg-black/5'
                  }`}>
                    <feature.icon className={`w-6 h-6 ${
                      activeFeature === feature.id ? 'text-[#6a47ed]' : 'text-black/60'
                    }`} />
                  </div>
                  {feature.popular && (
                    <span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">Most Popular</span>
                  )}
                  {feature.new && (
                    <span className="bg-[#6a47ed] text-white text-xs px-2 py-1 rounded-full">New</span>
                  )}
                </div>
                <h3 className="font-semibold text-black mb-2 text-left">{feature.title}</h3>
                <p className="text-black/70 text-sm text-left">{feature.description.split('.').slice(0, 2).join('.')}.</p>
              </button>
            ))}
          </div>

          {activeFeatureData && (
            <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 p-8">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div>
                  <h3 className="text-2xl font-bold text-black mb-4">{activeFeatureData.title}</h3>
                  <p className="text-black/80 mb-6">{activeFeatureData.description}</p>
                  
                  <div className="space-y-3">
                    {activeFeatureData.highlights.map((highlight, index) => (
                      <div key={index} className="flex items-start space-x-3">
                        <div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                          <Check className="w-4 h-4 text-[#6a47ed]" />
                        </div>
                        <span className="text-black/80">{highlight}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-xl p-6 border border-[#6a47ed]/10">
                  <h4 className="font-semibold text-black mb-4">Real-World Example</h4>
                  <div className="space-y-4">
                    <div>
                      <p className="text-sm font-medium text-black/70 mb-2">Input:</p>
                      <div className="bg-white/60 rounded-lg p-4 border border-white/20">
                        <p className="text-black/80">{activeFeatureData.example.input}</p>
                      </div>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-black/70 mb-2">Output:</p>
                      <div className="bg-white/60 rounded-lg p-4 border border-white/20">
                        <p className="text-black/80">{activeFeatureData.example.output}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              From Idea to Published in 5 Minutes: Here&apos;s How
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
            <div className="text-center">
              <div className="w-20 h-20 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-[#6a47ed]">1</span>
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Give us a Prompt</h3>
              <p className="text-black/80">
                Describe your product or service in your way. Share your industry, target audience, brand personality, and content goals. The AI learns your style from existing content or your preferences.
              </p>
            </div>

            <div className="text-center">
              <div className="w-20 h-20 bg-[#ff4ca5]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-[#ff4ca5]">2</span>
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Generate Your Content Calendar</h3>
              <p className="text-black/80">
                Input your key topics or let our AI suggest them. With one click, generate 30 days of post ideas, complete with captions, hashtag sets, and visual concepts tailored to each platform.
              </p>
            </div>

            <div className="text-center">
              <div className="w-20 h-20 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-[#6a47ed]">3</span>
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Review & Customize</h3>
              <p className="text-black/80">
                Our dashboard shows your complete content calendar. Edit any caption, regenerate images, rearrange posts, or add your personal touch. The performance predictor helps you optimize before publishing.
              </p>
            </div>

            <div className="text-center">
              <div className="w-20 h-20 bg-[#ff4ca5]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-[#ff4ca5]">4</span>
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Schedule & Publish Automatically</h3>
              <p className="text-black/80">
                With one click, schedule your entire month of content. Our AI determines optimal posting times for each platform and automatically publishes your content, freeing you to focus on engagement.
              </p>
            </div>
          </div>

          <div className="text-center mt-12">
            <div className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl p-8 text-white max-w-4xl mx-auto">
              <h3 className="text-2xl font-bold mb-4">Ready to Transform Your Content Workflow?</h3>
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <button className="bg-white text-[#6a47ed] px-8 py-3 rounded-lg font-semibold hover:bg-slate-100 transition-all duration-200 shadow-lg">
                  Start Your Free Trial
                </button>
                <div className="text-white/90">
                  <p className="text-sm">No credit card required • 14-day free trial • Setup in 5 minutes</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Peace of Mind Section */}
      <section className="py-20 bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              More Than Time Saved: The Peace of Mind You&apos;ve Been Missing
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-xl flex items-center justify-center mb-4">
                <Brain className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Mental Space Reclaimed</h3>
              <p className="text-black/80 mb-4">
                The end of content anxiety. Stop the constant mental chatter about &quot;what should I post tomorrow?&quot; Free up cognitive load for strategic thinking and business growth.
              </p>
              <div className="bg-[#6a47ed]/10 rounded-lg p-3">
                <p className="text-sm text-black/70 font-medium">
                  Our users report 72% reduction in stress related to social media management
                </p>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-xl flex items-center justify-center mb-4">
                <Target className="w-6 h-6 text-[#ff4ca5]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Confidence in Your Content</h3>
              <p className="text-black/80 mb-4">
                Post with certainty, not hope. The performance predictor and data-driven approach means every post is optimized for success.
              </p>
              <div className="bg-[#ff4ca5]/10 rounded-lg p-3">
                <p className="text-sm text-black/70 font-medium">
                  No more guessing, no more hoping something will &quot;go viral&quot;—just consistent, reliable engagement growth
                </p>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-xl flex items-center justify-center mb-4">
                <Sparkles className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">Creative Energy Restored</h3>
              <p className="text-black/80 mb-4">
                Rediscover your love for creation. By handling the repetitive, time-consuming tasks, PlanPost AI frees you to focus on big-picture strategy.
              </p>
              <div className="bg-[#6a47ed]/10 rounded-lg p-3">
                <p className="text-sm text-black/70 font-medium">
                  The burnout disappears, and your authentic creative voice emerges stronger
                </p>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
              <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-xl flex items-center justify-center mb-4">
                <Clock className="w-6 h-6 text-[#ff4ca5]" />
              </div>
              <h3 className="text-xl font-semibold text-black mb-4">The Gift of Time</h3>
              <p className="text-black/80 mb-4">
                What will you do with your extra 10 hours each week? That&apos;s 40 hours monthly—a full work week—returned to you.
              </p>
              <div className="bg-[#ff4ca5]/10 rounded-lg p-3">
                <p className="text-sm text-black/70 font-medium">
                  Spend it with family, focus on product development, or enjoy better work-life balance
                </p>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {testimonials.slice(0, 3).map((testimonial, index) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-sm">
                <div className="w-10 h-10 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-xl flex items-center justify-center mb-4">
                  <testimonial.icon className="w-5 h-5 text-[#6a47ed]" />
                </div>
                <p className="text-black/80 italic mb-4">{testimonial.content}</p>
                <div>
                  <p className="font-semibold text-black">{testimonial.name}</p>
                  <p className="text-black/70 text-sm">{testimonial.role}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Case Studies */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              Real Results: See What Happens When AI Meets Strategy
            </h2>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
            {caseStudies.map((study, index) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-sm">
                <div className="flex items-center justify-between mb-6">
                  <h3 className="text-xl font-bold text-black">{study.company}</h3>
                  <div className="text-right">
                    <div className="text-3xl font-bold text-[#6a47ed]">{study.metric}</div>
                    <div className="text-black/70 text-sm">{study.metricLabel}</div>
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div>
                    <h4 className="font-semibold text-black mb-2">The Challenge:</h4>
                    <p className="text-black/80">{study.challenge}</p>
                  </div>
                  
                  <div>
                    <h4 className="font-semibold text-black mb-2">The Solution:</h4>
                    <p className="text-black/80">{study.solution}</p>
                  </div>
                  
                  <div>
                    <h4 className="font-semibold text-black mb-2">The Results:</h4>
                    <ul className="space-y-2">
                      {study.results.map((result, i) => (
                        <li key={i} className="flex items-center space-x-3">
                          <div className="w-2 h-2 bg-[#6a47ed] rounded-full"></div>
                          <span className="text-black/80">{result}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl p-8 text-white text-center">
            <h3 className="text-2xl font-bold mb-6">Average Results Across Our User Base</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
              <div>
                <div className="text-3xl font-bold mb-2">10.5h</div>
                <p className="text-white/90">Time saved weekly</p>
              </div>
              <div>
                <div className="text-3xl font-bold mb-2">187%</div>
                <p className="text-white/90">Engagement increase</p>
              </div>
              <div>
                <div className="text-3xl font-bold mb-2">94%</div>
                <p className="text-white/90">Posting consistency</p>
              </div>
              <div>
                <div className="text-3xl font-bold mb-2">28%</div>
                <p className="text-white/90">Follower growth (monthly)</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 bg-white/50 backdrop-blur-sm">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
              Frequently Asked Questions
            </h2>
          </div>

          <div className="space-y-6">
            {faqs.map((faq, index) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-sm">
                <h3 className="text-lg font-semibold text-black mb-3">{faq.question}</h3>
                <p className="text-black/80 leading-relaxed">{faq.answer}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 bg-gradient-to-br from-[#6a47ed] to-[#ff4ca5]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            Ready to Reclaim Your Time and Transform Your Social Media?
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
              <Check className="w-8 h-8 text-white mb-3 mx-auto" />
              <p className="text-white font-semibold">Create 30 days of content in 5 minutes</p>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
              <Check className="w-8 h-8 text-white mb-3 mx-auto" />
              <p className="text-white font-semibold">Save 10+ hours every week</p>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
              <Check className="w-8 h-8 text-white mb-3 mx-auto" />
              <p className="text-white font-semibold">Increase engagement by 187% on average</p>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
              <Check className="w-8 h-8 text-white mb-3 mx-auto" />
              <p className="text-white font-semibold">Join 12,000+ creators and businesses</p>
            </div>
          </div>

          <button className="bg-white text-[#6a47ed] px-8 py-4 rounded-xl font-semibold text-lg hover:bg-slate-100 transition-all duration-200 shadow-lg hover:shadow-xl mb-4">
            Start Your 14-Day Free Trial
          </button>
          
          <p className="text-white/90 text-sm">
            No credit card required • Setup in 5 minutes • 30-day money-back guarantee
          </p>
        </div>
      </section>
    </div>
  );
};

export default SocialMediaPost;