import { industries } from '@/data/industries'
import { Link } from 'react-router-dom'

const Industries = () => {
  return (
    <>
      {/* Page Hero */}
      <section className="bg-background py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div>
            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
            <p className="text-xl text-soft-text max-w-3xl">
              Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
            </p>
          </div>
        </div>
      </section>

      {/* Industries Grid */}
      <section className="bg-background py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
            {industries.map((industry) => (
              <div key={industry.id} className="group cursor-pointer">
                <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
                  <div className="p-6">
                    <div className="flex items-center gap-4 mb-4">
                      <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
                        <svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                      </div>
                      <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
                        {industry.name}
                      </h3>
                    </div>
                    <p className="text-soft-text mb-4">{industry.shortDesc}</p>
                    
                    <div className="mb-4">
                      <h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
                      <div className="space-y-2">
                        {industry.painPoints.slice(0, 2).map((painPoint, index) => (
                          <div key={index} className="flex items-start gap-2 text-sm text-soft-text">
                            <div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
                              <svg className="h-2 w-2" 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>{painPoint}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                    
                    <Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
                      Learn more
                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
              We work with businesses across all industries. Contact us to discuss your specific needs.
            </p>
            <Link
              to="/contact"
              className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
            >
              Request Consultation
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}

export default Industries