"use client";

import React, { useState } from "react";
import {
  Check,
  Clock,
  TrendingUp,
  Target,
  ArrowRight,
  Star,
  Quote,
  Sparkle,
  Rocket,
  Search,
  Globe,
  FileText,
  Building,
  ShoppingCart,
  Heart,
  LucideProps,
} from "lucide-react";
import Link from "next/link";

// TypeScript Interfaces
interface Feature {
  id: string;
  icon: React.ForwardRefExoticComponent<
    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
  >;
  title: string;
  description: string;
  highlights: string[];
  examples?: {
    input?: string;
    output?: string;
    metrics?: string[];
  };
  gradient: string;
  popular?: boolean;
}

interface ProblemItem {
  icon: React.ForwardRefExoticComponent<
    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
  >;
  title: string;
  description: string;
  stat: string;
  color: string;
}

interface StatItem {
  number: string;
  label: string;
}

interface Industry {
  icon: React.ForwardRefExoticComponent<
    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
  >;
  name: string;
  description: string;
  useCases: string[];
  results: string;
}

interface FAQ {
  question: string;
  answer: string;
}

const SEOWriter: React.FC = () => {
  const [activeFeature, setActiveFeature] =
    useState<string>("seo-optimization");
  const [hoveredCard, setHoveredCard] = useState<string | null>(null);

  const features: Feature[] = [
    {
      id: "seo-optimization",
      icon: Search,
      title: "Advanced SEO Optimization Engine",
      description:
        "Create content that search engines love and readers engage with. Our AI analyzes top-ranking content to understand what works in your niche.",
      highlights: [
        "Keyword Research & Integration: Automatic identification and placement of primary and secondary keywords",
        "Competitor Content Analysis: Learn from what&apos;s working for competitors in your space",
        "Content Structure Optimization: Perfect heading hierarchy, paragraph length, and readability scoring",
        "Meta Tag Generation: SEO-optimized titles and descriptions that improve click-through rates",
        "Internal Linking Suggestions: Smart recommendations for interlinking your content",
      ],
      examples: {
        metrics: [
          "Keyword Density: Optimal 1-2% maintained throughout",
          "Readability Score: Grade 8-10 for maximum accessibility",
          "Content Length: 1500-2500 words based on topic competitiveness",
          "Meta Optimization: Click-worthy titles under 60 characters",
        ],
      },
      gradient: "from-purple-500 to-pink-500",
      popular: true,
    },
    {
      id: "geo-targeting",
      icon: Globe,
      title: "Intelligent GEO Targeting System",
      description:
        "Create locally-relevant content that resonates with specific audiences and locations. Perfect for local businesses, multi-location brands, and geo-specific services.",
      highlights: [
        "Local Keyword Integration: Automatic inclusion of city, neighborhood, and regional terms",
        "Cultural Context Understanding: Adapt content tone and references for local audiences",
        "Multi-Location Content Scaling: Create variations for different locations with one click",
        "Local Business References: Include relevant local landmarks, events, and context",
        "Service Area Optimization: Target specific service areas with precision",
      ],
      examples: {
        input:
          "Pizza restaurant menu highlights + Locations: Chicago, New York, Miami",
        output:
          "Three uniquely optimized articles featuring local favorites, neighborhood references, and region-specific menu highlights for each location.",
      },
      gradient: "from-blue-500 to-cyan-500",
    },
    {
      id: "performance-predictor",
      icon: TrendingUp,
      title: "Content Performance Predictor",
      description:
        "Know how your content will perform before you publish. Our AI analyzes thousands of data points to predict traffic potential and suggest improvements.",
      highlights: [
        "Traffic Potential Scoring: 1-100 rating of estimated search traffic potential",
        "Ranking Difficulty Analysis: Understand competition level for target keywords",
        "Engagement Optimization: Suggestions to improve time-on-page and reduce bounce rates",
        "Conversion Optimization: Tips to increase lead generation and sales from content",
        "A/B Testing Generation: Create multiple versions to test what resonates best",
      ],
      examples: {
        metrics: [
          "+83% Organic Traffic Increase",
          "+45% Time on Page",
          "-32% Bounce Rate Reduction",
        ],
      },
      gradient: "from-green-500 to-emerald-500",
    },
  ];

  const problemItems: ProblemItem[] = [
    {
      icon: Clock,
      title: "Time-Consuming Research",
      description:
        "Spending hours on keyword research, competitor analysis, and SEO optimization for every article? The average content marketer wastes 6-8 hours weekly just on research and planning.",
      stat: "6-8 hours weekly wasted",
      color: "purple",
    },
    {
      icon: Target,
      title: "Ineffective Local Targeting",
      description:
        "Creating generic content that fails to resonate with local audiences? Missing out on local search traffic because your content isn&apos;t geo-optimized for specific markets.",
      stat: "Missed local search traffic",
      color: "blue",
    },
    {
      icon: TrendingUp,
      title: "Poor SEO Performance",
      description:
        "Publishing articles that never rank or drive meaningful traffic? 65% of content never gets more than 10 monthly visits from organic search.",
      stat: "65% of content gets minimal traffic",
      color: "orange",
    },
    {
      icon: FileText,
      title: "Inconsistent Quality",
      description:
        "Struggling to maintain consistent quality and brand voice across multiple writers and locations? Inconsistency confuses audiences and damages brand authority.",
      stat: "Brand consistency challenges",
      color: "red",
    },
  ];

  const stats: StatItem[] = [
    { number: "65%", label: "of content gets minimal search traffic" },
    { number: "8.2", label: "average hours spent per article" },
    { number: "46%", label: "of marketers struggle with local content" },
  ];

  const industries: Industry[] = [
    {
      icon: Building,
      name: "Agencies & Marketing Teams",
      description:
        "Scale content production for multiple clients with consistent quality and localized optimization.",
      useCases: [
        "Client content scaling",
        "Local SEO campaigns",
        "Multi-location content",
        "Performance reporting",
      ],
      results: "Results: 5x more content delivered, 75% time savings",
    },
    {
      icon: ShoppingCart,
      name: "E-commerce & Local Retail",
      description:
        "Create product content, local store pages, and service area articles that drive foot traffic and online sales.",
      useCases: [
        "Local store content",
        "Product category pages",
        "Service area blogs",
        "Location-specific offers",
      ],
      results: "Results: 3.2x ROAS, 45% more local traffic",
    },
    {
      icon: Heart,
      name: "Healthcare & Services",
      description:
        "Generate locally-optimized content for medical practices, service areas, and patient education.",
      useCases: [
        "Local practice pages",
        "Service area content",
        "Patient education",
        "Provider bios",
      ],
      results:
        "Results: 68% more appointment requests, 52% local search increase",
    },
    {
      icon: Globe,
      name: "Hospitality & Travel",
      description:
        "Create destination content, local attraction guides, and hotel-specific SEO content.",
      useCases: [
        "Destination guides",
        "Local attraction content",
        "Hotel location pages",
        "Travel tips by location",
      ],
      results: "Results: 4.1x more direct bookings, 87% local traffic growth",
    },
  ];

  const faqs: FAQ[] = [
    {
      question: "How does the SEO optimization actually work?",
      answer:
        "Our AI analyzes top-ranking content for your target keywords to understand optimal content structure, keyword placement, and topic coverage. It then creates content that matches or exceeds these patterns while maintaining natural readability and engagement.",
    },
    {
      question: "Can I really create content for multiple locations at once?",
      answer:
        "Yes! Our multi-location content scaling allows you to create a master article template, then automatically generate localized variations for different cities, regions, or service areas. Each variation includes location-specific keywords, references, and context while maintaining your core message.",
    },
    {
      question: "How accurate are the performance predictions?",
      answer:
        "Our performance predictor has an 82% accuracy rate for estimating traffic potential. It analyzes factors like keyword difficulty, content quality, competitor strength, and historical performance data to provide reliable predictions and optimization suggestions.",
    },
    {
      question: "Can I maintain my brand voice with AI-generated content?",
      answer:
        "Absolutely. You can train our AI on your existing content to learn and replicate your brand voice, tone, and style preferences. We also offer custom brand voice training for enterprise clients to ensure complete consistency across all generated content.",
    },
    {
      question: "What about content originality and plagiarism?",
      answer:
        "All content generated by PlanPost AI is 100% original and passes plagiarism checks. Our AI creates unique content based on your inputs and research, rather than copying or rewording existing content. We also include built-in plagiarism checking before publication.",
    },
    {
      question: "How quickly will I see SEO results?",
      answer:
        "Most clients see noticeable improvements within 4-8 weeks, with full optimization benefits typically realized within 3-6 months. The timeline depends on factors like website authority, competition level, and content publishing frequency. We provide monthly performance reports to track your progress.",
    },
  ];

  const getColorClass = (color: string): string => {
    switch (color) {
      case "purple":
        return "purple";
      case "blue":
        return "blue";
      case "orange":
        return "orange";
      case "red":
        return "red";
      default:
        return "purple";
    }
  };

  return (
    <div
      className="min-h-screen"
      style={{
        background: "linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)",
      }}
    >
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-10 left-10 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
          <div className="absolute top-40 right-10 w-96 h-96 bg-green-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-75"></div>
        </div>

        <div className="relative 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-6 py-3 rounded-full text-sm font-semibold mb-8 backdrop-blur-sm border border-white/40 shadow-lg">
              <Sparkle className="w-4 h-4" />
              <span>AI SEO Content Writer</span>
            </div>

            <h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
              AI SEO Content Writer:
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Create Optimized Articles That Rank Higher
              </span>
            </h1>

            <p className="text-xl md:text-2xl text-black/80 mb-8 max-w-4xl mx-auto leading-relaxed">
              Generate SEO-optimized, locally-targeted articles that drive
              traffic and conversions. Save 10+ hours weekly while creating
              content that outperforms competitors in search results.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
              <Link href={"https://dashboard.planpostai.com/seo"}>
                <button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
                  <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                  <Rocket className="w-6 h-6 relative z-10" />
                  <span className="relative z-10">Start Your Free Trial</span>
                  <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
                </button>
              </Link>
            </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,800+ content teams
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Problem Section */}
      <section className="py-20 bg-white/30 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-4xl md:text-5xl font-bold text-black mb-6">
              The Content Creation Struggle is
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Real and Costly
              </span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            {problemItems.map((item: ProblemItem, index: number) => (
              <div
                key={index}
                className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105"
              >
                <div
                  className={`w-14 h-14 bg-${getColorClass(
                    item.color
                  )}-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
                >
                  <item.icon
                    className={`w-7 h-7 text-${getColorClass(item.color)}-600`}
                  />
                </div>
                <h3 className="text-xl font-bold text-black mb-4">
                  {item.title}
                </h3>
                <p className="text-black/80 mb-4 leading-relaxed">
                  {item.description}
                </p>
                <div className="bg-black/5 rounded-xl p-3 border border-black/10">
                  <p className="text-sm font-semibold text-black/70">
                    {item.stat}
                  </p>
                </div>
              </div>
            ))}
          </div>

          {/* Stats */}
          <div className="grid md:grid-cols-3 gap-8 text-center mb-12">
            {stats.map((stat: StatItem, index: number) => (
              <div
                key={index}
                className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100"
              >
                <div className="text-3xl font-bold text-purple-600 mb-2">
                  {stat.number}
                </div>
                <div className="text-gray-600 text-sm">{stat.label}</div>
              </div>
            ))}
          </div>

          <div className="text-center">
            <div className="bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-3xl p-8 border border-[#6a47ed]/20 max-w-2xl mx-auto backdrop-blur-sm">
              <h3 className="text-2xl md:text-3xl font-bold text-black mb-4">
                What if you could create SEO-optimized, locally-targeted content
                in minutes instead of hours?
              </h3>
            </div>
          </div>
        </div>
      </section>

      {/* AI Solution 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-4xl md:text-5xl font-bold text-black mb-6">
              AI-Powered Content Creation
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Built for Search Success
              </span>
            </h2>
            <p className="text-xl text-black/80 max-w-3xl mx-auto">
              PlanPost AI combines advanced SEO intelligence with local market
              understanding to create content that ranks higher, drives targeted
              traffic, and converts readers into customers.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 mb-12">
            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
                <Search className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">
                SEO Intelligence Built-In
              </h3>
              <p className="text-black/80">
                Automatic keyword research, competitor analysis, and SEO
                optimization in every article. No more guessing what will rank.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-2xl flex items-center justify-center mb-4">
                <Globe className="w-6 h-6 text-[#ff4ca5]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">
                Geo-Targeting Automation
              </h3>
              <p className="text-black/80">
                Create locally-optimized content for multiple locations
                simultaneously. Perfect for multi-location businesses and local
                SEO.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
                <TrendingUp className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">
                Performance Predictions
              </h3>
              <p className="text-black/80">
                AI predicts content performance before you publish, suggesting
                optimizations to maximize traffic and engagement.
              </p>
            </div>
          </div>

          {/* Comparison Section */}
          <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
            <h3 className="text-2xl font-bold text-black mb-6 text-center">
              See the Difference: Generic vs. SEO+GEO Optimized
            </h3>
            <div className="grid md:grid-cols-2 gap-8">
              <div className="bg-red-50 rounded-2xl p-6 border border-red-200">
                <h4 className="font-bold text-red-800 mb-4 text-center">
                  Generic AI Content
                </h4>
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-red-700">
                    <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    <span>Basic information only</span>
                  </div>
                  <div className="flex items-center gap-2 text-red-700">
                    <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    <span>No local targeting</span>
                  </div>
                  <div className="flex items-center gap-2 text-red-700">
                    <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    <span>Poor SEO structure</span>
                  </div>
                  <div className="flex items-center gap-2 text-red-700">
                    <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    <span>Low search potential</span>
                  </div>
                </div>
              </div>
              <div className="bg-green-50 rounded-2xl p-6 border border-green-200">
                <h4 className="font-bold text-green-800 mb-4 text-center">
                  PlanPost AI Content
                </h4>
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-green-700">
                    <Check className="w-4 h-4" />
                    <span>Keyword-optimized structure</span>
                  </div>
                  <div className="flex items-center gap-2 text-green-700">
                    <Check className="w-4 h-4" />
                    <span>Local references and targeting</span>
                  </div>
                  <div className="flex items-center gap-2 text-green-700">
                    <Check className="w-4 h-4" />
                    <span>SEO meta tags and descriptions</span>
                  </div>
                  <div className="flex items-center gap-2 text-green-700">
                    <Check className="w-4 h-4" />
                    <span>High ranking potential</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Testimonial */}
          <div className="mt-8 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl 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;We went from spending 20 hours weekly on content creation to
              3 hours. Our SEO traffic increased by 187% in the first quarter,
              and we&apos;re now ranking for local keywords we never thought
              possible.&quot;
            </p>
            <div>
              <p className="font-semibold text-black">Marketing Director</p>
              <p className="text-black/70 text-sm">
                Multi-Location Retail Chain
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white/30 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-4xl md:text-5xl font-bold text-black mb-6">
              Everything You Need for
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Content That Dominates Search
              </span>
            </h2>
          </div>

          {/* Feature Navigation */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
            {features.map((feature: Feature) => (
              <button
                key={feature.id}
                onClick={() => setActiveFeature(feature.id)}
                onMouseEnter={() => setHoveredCard(feature.id)}
                onMouseLeave={() => setHoveredCard(null)}
                className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
                  activeFeature === feature.id
                    ? "bg-white shadow-xl border-[#6a47ed] transform scale-105"
                    : hoveredCard === feature.id
                    ? "bg-white/80 shadow-lg border-white/40 transform scale-102"
                    : "bg-white/50 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 bg-gradient-to-r ${feature.gradient}`}
                  >
                    <feature.icon className="w-6 h-6 text-white" />
                  </div>
                  {feature.popular && (
                    <span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">
                      Most Popular
                    </span>
                  )}
                </div>
                <h3 className="font-bold text-black mb-2 text-left">
                  {feature.title}
                </h3>
                <p className="text-black/70 text-sm text-left leading-relaxed">
                  {feature.description.split(".").slice(0, 2).join(".")}.
                </p>
              </button>
            ))}
          </div>

          {/* Active Feature Detail */}
          {features.map((feature: Feature) => (
            <div
              key={feature.id}
              className={`bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/20 p-8 transition-all duration-500 ${
                activeFeature === feature.id ? "block animate-fadeIn" : "hidden"
              }`}
            >
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
                <div>
                  <div className="flex items-center space-x-4 mb-6">
                    <div
                      className={`w-14 h-14 rounded-2xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}
                    >
                      <feature.icon className="w-7 h-7 text-white" />
                    </div>
                    <div>
                      <h3 className="text-3xl font-bold text-black">
                        {feature.title}
                      </h3>
                      <p className="text-black/70">{feature.description}</p>
                    </div>
                  </div>

                  <div className="space-y-4">
                    {feature.highlights.map(
                      (highlight: string, index: number) => (
                        <div
                          key={index}
                          className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30"
                        >
                          <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 leading-relaxed">
                            {highlight}
                          </span>
                        </div>
                      )
                    )}
                  </div>
                </div>

                <div className="space-y-6">
                  {feature.examples?.input && feature.examples.output && (
                    <div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
                      <h4 className="font-bold text-black mb-4 text-lg">
                        Multi-Location Restaurant Example
                      </h4>
                      <div className="space-y-4">
                        <div>
                          <div className="flex items-center space-x-2 mb-2">
                            <div className="w-3 h-3 bg-[#6a47ed] rounded-full"></div>
                            <p className="text-sm font-semibold text-black/70">
                              Input
                            </p>
                          </div>
                          <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                            <p className="text-black/80 font-medium">
                              {feature.examples.input}
                            </p>
                          </div>
                        </div>
                        <div>
                          <div className="flex items-center space-x-2 mb-2">
                            <div className="w-3 h-3 bg-[#ff4ca5] rounded-full"></div>
                            <p className="text-sm font-semibold text-black/70">
                              Output
                            </p>
                          </div>
                          <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                            <p className="text-black/80 font-medium">
                              {feature.examples.output}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}

                  {feature.examples?.metrics && (
                    <div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
                      <h4 className="font-bold text-black mb-4 text-lg">
                        {feature.id === "performance-predictor"
                          ? "Typical Performance Improvements"
                          : "SEO Optimization in Action"}
                      </h4>
                      <div className="space-y-3">
                        {feature.examples.metrics.map(
                          (metric: string, index: number) => (
                            <div
                              key={index}
                              className="flex items-center gap-3 text-black/80"
                            >
                              <Check className="w-4 h-4 text-green-500" />
                              <span>{metric}</span>
                            </div>
                          )
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Industries 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-4xl md:text-5xl font-bold text-black mb-6">
              Trusted by Content Teams
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Across Industries
              </span>
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {industries.map((industry: Industry, index: number) => (
              <div
                key={index}
                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300"
              >
                <div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
                  <industry.icon className="w-7 h-7 text-purple-600" />
                </div>
                <h3 className="text-2xl font-bold text-black mb-4">
                  {industry.name}
                </h3>
                <p className="text-black/80 mb-6 leading-relaxed">
                  {industry.description}
                </p>

                <div className="space-y-2 mb-6">
                  {industry.useCases.map((useCase: string, idx: number) => (
                    <div
                      key={idx}
                      className="flex items-center gap-2 text-sm text-black/70"
                    >
                      <Check className="w-4 h-4 text-green-500" />
                      {useCase}
                    </div>
                  ))}
                </div>

                <div className="bg-purple-50 p-4 rounded-2xl border border-purple-200">
                  <p className="text-purple-700 text-sm font-semibold">
                    {industry.results}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Setup Process */}
      <section className="py-20 bg-white/30 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-4xl md:text-5xl font-bold text-black mb-6">
              From Idea to Published in Minutes,
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Not Hours
              </span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
            {[
              {
                step: 1,
                title: "Define Your Content Goals",
                description:
                  "Input your topic, target audience, and locations. Set SEO targets and content objectives.",
                content: "[Content goal setting interface]",
              },
              {
                step: 2,
                title: "AI Research & Optimization",
                description:
                  "Our AI analyzes competitors, identifies keyword opportunities, and researches local context.",
                content: "[AI research dashboard]",
              },
              {
                step: 3,
                title: "Generate & Customize",
                description:
                  "Review the AI-generated content, make edits, and optimize further based on performance predictions.",
                content: "[Content editor interface]",
              },
              {
                step: 4,
                title: "Publish & Track Performance",
                description:
                  "Publish directly to your platforms and monitor real-time performance with our analytics dashboard.",
                content: "[Publishing and analytics interface]",
              },
            ].map((item, index) => (
              <div key={index} className="text-center">
                <div className="w-20 h-20 bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
                  {item.step}
                </div>
                <h3 className="text-xl font-bold text-black mb-4">
                  {item.title}
                </h3>
                <p className="text-black/80 mb-4 leading-relaxed">
                  {item.description}
                </p>
                <div className="bg-white/60 rounded-xl h-32 flex items-center justify-center border border-white/30">
                  <span className="text-black/50 text-sm">{item.content}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12">
            <button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-12 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105">
              <Link href={"https://dashboard.planpostai.com/seo"}>
                Start Your Free Trial →
              </Link>
            </button>
            <p className="text-black/70 text-sm mt-4">
              No credit card required • Setup in 5 minutes • Create your first
              article today
            </p>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section
        className="py-20"
        style={{
          background: "linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)",
        }}
      >
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Frequently Asked
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Questions
              </span>
            </h2>
          </div>

          <div className="space-y-6">
            {faqs.map((faq: FAQ, index: number) => (
              <div
                key={index}
                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg"
              >
                <h3 className="text-lg font-bold 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] relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-0 left-0 w-32 h-32 bg-white rounded-full"></div>
          <div className="absolute top-0 right-0 w-48 h-48 bg-white rounded-full"></div>
        </div>

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
            Stop Creating Content That Gets
            <span className="block">Lost in Search Results</span>
          </h2>

          <p className="text-xl text-white/90 mb-8">
            Join 2,800+ content teams creating SEO-optimized, locally-targeted
            articles that actually rank
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {[
              {
                title: "Proven SEO Results",
                desc: "Create content optimized to rank higher and drive more organic traffic",
              },
              {
                title: "Local Audience Targeting",
                desc: "Reach the right customers in specific locations with geo-optimized content",
              },
              {
                title: "Massive Time Savings",
                desc: "Reduce content creation time by 80% while improving quality",
              },
            ].map((item, index) => (
              <div
                key={index}
                className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"
              >
                <h3 className="text-lg font-bold text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-white/80 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-8">
            {[
              "Create SEO-optimized articles in minutes",
              "Target multiple locations simultaneously",
              "Improve search rankings and organic traffic",
              "Scale content production without sacrificing quality",
              "Publish directly to your platforms",
            ].map((benefit: string, index: number) => (
              <div key={index} className="flex items-center gap-3 text-white">
                <Check className="w-5 h-5 text-green-300" />
                <span>{benefit}</span>
              </div>
            ))}
          </div>

          <button className="bg-white text-[#6a47ed] px-12 py-5 rounded-2xl font-semibold text-lg hover:bg-slate-100 transition-all duration-300 shadow-2xl hover:shadow-3xl hover:scale-105 mb-4">
            <Link href={"https://dashboard.planpostai.com/seo"}>
              Start Your 14-Day Free Trial →
            </Link>
          </button>

          <p className="text-white/80 text-sm">
            No credit card required • Create your first article today • 30-day
            money-back guarantee
          </p>
        </div>
      </section>
    </div>
  );
};

export default SEOWriter;