"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { solutions } from "@/lib/data"
import { cn } from "@/lib/utils"
import { 
  Network, 
  FileText, 
  Video, 
  MessageCircleQuestion, 
  Languages, 
  Volume2,
  Check,
  Star,
  Compass
} from "lucide-react"
import { handleSignupFlow } from "@/lib/cookies"

const icons = [Network, FileText, Video, MessageCircleQuestion, Languages, Volume2]

export function SolutionsSection() {
  const [signupUrl, setSignupUrl] = useState('/products')

  useEffect(() => {
    setSignupUrl(handleSignupFlow())
  }, [])

  return (
    <section id="solutions" className="pt-2 pb-8 sm:pt-4 sm:pb-10 bg-background">
      <div className="mx-auto max-w-7xl px-4 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-8 flex flex-col items-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-bold uppercase tracking-wider mb-4 border border-primary/20">
            <Compass className="h-4 w-4" />
            Our Solutions
          </div>
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4 text-balance">
            Comprehensive AI-powered tools for every need
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {solutions.map((solution, index) => {
            const Icon = icons[index]
            return (
              <div
                key={solution.title}
                className={cn(
                  "relative bg-card rounded-2xl border p-5 transition-all duration-300 hover:shadow-lg",
                  solution.popular 
                    ? "border-primary shadow-md" 
                    : "border-border hover:border-primary/30"
                )}
              >
                {solution.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="inline-flex items-center gap-1 px-3 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-full">
                      <Star className="h-3 w-3" /> Most Popular
                    </span>
                  </div>
                )}

                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
                  <Icon className="h-5 w-5 text-primary" />
                </div>

                <h3 className="text-base font-semibold text-foreground mb-1.5">{solution.title}</h3>
                <p className="text-xs text-muted-foreground mb-3 leading-relaxed">
                  {solution.description}
                </p>

                <ul className="space-y-1.5">
                  {solution.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Check className="h-3.5 w-3.5 text-primary shrink-0" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            )
          })}
        </div>

        <div className="mt-12 text-center bg-gradient-to-r from-primary/10 via-primary/5 to-accent/10 rounded-2xl p-8 sm:p-12 border border-primary/20">
          <h3 className="text-2xl sm:text-3xl font-bold text-foreground mb-4 text-balance">
            Ready to Turn Your Content into Clarity?
          </h3>
          <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
            Experience the power of AI-driven document intelligence with zero hallucination and maximum accuracy.
          </p>
          <Button asChild size="lg" className="px-8">
            <Link href={signupUrl}>Get Started Free</Link>
          </Button>
        </div>
      </div>
    </section>
  )
}