import { useParams } from 'react-router-dom'
import { industries } from '@/data/industries'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'

const IndustryDetail = () => {
  const { slug } = useParams()
  const industry = industries.find(i => i.id === slug)

  if (!industry) {
    return (
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center">
          <h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
          <p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
          <a href="/industries" className="text-primary-navy hover:underline">
            Back to Industries
          </a>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-16 md:py-24">
      {/* Page Hero */}
      <section className="mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
        <p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
      </section>

      {/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
        {/* Left Column - Main Content */}
        <div className="lg:col-span-2">
          <section className="mb-12">
            <h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
            <p className="text-lg text-soft-text mb-6 leading-relaxed">
              {industry.fullDesc}
            </p>
          </section>

          <section className="mb-12">
            <h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {industry.painPoints.map((painPoint, index) => (
                <div key={index} className="flex items-start gap-3">
                  <div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <span className="text-lg text-text">{painPoint}</span>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-12">
            <h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {industry.solutions.map((solution, index) => (
                <div key={index} className="flex items-start gap-3">
                  <div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                  <span className="text-lg text-text">{solution}</span>
                </div>
              ))}
            </div>
          </section>
        </div>

        {/* Right Column - Sidebar */}
        <div className="lg:col-span-1">
          <Card className="sticky top-24">
            <CardHeader>
              <CardTitle className="text-primary-navy">Industry Insights</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-semibold text-text mb-2">Industry</h4>
                <p className="text-soft-text">{industry.name}</p>
              </div>
              <div className="pt-4 border-t border-border">
                <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
                  Request Consultation
                </a>
              </div>
              <div className="pt-2">
                <a href="/industries" className="text-primary-navy hover:underline">
                  ← Back to Industries
                </a>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

export default IndustryDetail