import { useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Award, Users, Target, Handshake } from 'lucide-react';
import Reveal from '../components/ui/Reveal';

const values = [
  { icon: Award, title: 'Quality First', desc: 'Every project receives our highest standard of workmanship, backed by written warranties and rigorous inspection.' },
  { icon: Handshake, title: 'Integrity', desc: 'Transparent pricing, honest communication, and commitments we actually keep — every single time.' },
  { icon: Target, title: 'Precision', desc: 'We measure twice and cut once. Detailed planning and careful execution define every project we undertake.' },
  { icon: Users, title: 'Partnership', desc: 'We see our clients as long-term partners, not just transactions. Our referral rate speaks for itself.' },
];

const certifications = [
  { title: 'ISO 9001:2015', subtitle: 'Quality Management System', img: 'https://images.pexels.com/photos/5668882/pexels-photo-5668882.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Internationally recognized standard for quality management systems ensuring consistent delivery.' },
  { title: 'OHSAS 18001', subtitle: 'Health & Safety Management', img: 'https://images.pexels.com/photos/8961065/pexels-photo-8961065.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Occupational health and safety management certification for workplace safety standards.' },
  { title: 'ISO 14001', subtitle: 'Environmental Management', img: 'https://images.pexels.com/photos/1108572/pexels-photo-1108572.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Environmental management system certification demonstrating our commitment to sustainability.' },
  { title: 'Qatar Chamber', subtitle: 'Member & Licensed Contractor', img: 'https://images.pexels.com/photos/3760529/pexels-photo-3760529.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Registered and licensed contractor with the Qatar Chamber of Commerce.' },
];

const qualifications = [
  { title: 'Civil Engineering', subtitle: 'Degree-Qualified Team', img: 'https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Our senior staff hold degrees in civil and structural engineering from accredited institutions.' },
  { title: 'Project Management', subtitle: 'PMP Certified Managers', img: 'https://images.pexels.com/photos/416405/pexels-photo-416405.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Project managers are PMP-certified ensuring best-practice delivery methodologies.' },
  { title: 'Trade Certifications', subtitle: 'Skilled Workforce', img: 'https://images.pexels.com/photos/8961517/pexels-photo-8961517.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Electricians, plumbers, and tradespeople certified to Qatar and international standards.' },
  { title: 'Safety Training', subtitle: 'NEBOSH & IOSH Qualified', img: 'https://images.pexels.com/photos/8985454/pexels-photo-8985454.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Safety officers hold NEBOSH and IOSH qualifications for rigorous on-site safety management.' },
];

export default function About() {
  const [activeTab, setActiveTab] = useState<'certifications' | 'qualifications'>('certifications');
  const items = activeTab === 'certifications' ? certifications : qualifications;

  return (
    <div className="pt-24">
      {/* Header */}
      <section
        className="relative py-28 bg-cover bg-center"
        style={{ backgroundImage: 'url(https://images.pexels.com/photos/2219024/pexels-photo-2219024.jpeg?auto=compress&cs=tinysrgb&w=1920)' }}
      >
        <div className="absolute inset-0 bg-navy/82" />
        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
          <span className="section-label">Our Company</span>
          <h1 className="section-title-light max-w-xl">About<br /><span className="text-gold italic">Panama International</span></h1>
        </div>
      </section>

      {/* Story */}
      <section className="py-28 bg-cream-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-20 items-center">
          <Reveal direction="left">
            <span className="section-label">Our Story</span>
            <h2 className="section-title mb-5">
              10 Years Building<br /><span className="text-gold italic">Trust & Quality</span>
            </h2>
            <span className="gold-bar" />
            <p className="font-sans text-navy/65 text-sm leading-relaxed mb-4">
              Founded in 2015, Panama International began as a small operation focused on residential maintenance projects in Doha. With a strong emphasis on reliability, attention to detail, and honest workmanship, the company quickly built a reputation for delivering consistent results and earning the trust of its early clients.
            </p>
            <p className="font-sans text-navy/65 text-sm leading-relaxed mb-4">
              As demand grew, Panama International expanded its capabilities, investing in skilled teams, improving project management systems, and broadening its service offering to handle more complex residential and commercial work.
            </p>
            <p className="font-sans text-navy/65 text-sm leading-relaxed mb-10">
              Since then, Panama International has continued to grow steadily, working across a range of residential and commercial developments throughout Qatar. Today, the company is recognized for its commitment to quality craftsmanship, timely delivery, and long-term client relationships built on trust and performance.
            </p>
            <div className="grid grid-cols-3 gap-5 border-t border-sand-200 pt-8">
              {[{ v: '11+', l: 'Years' }, { v: '98%', l: 'Satisfaction' }].map((s) => (
                <div key={s.l}>
                  <p className="font-serif text-3xl text-gold">{s.v}</p>
                  <p className="font-sans text-[10px] uppercase tracking-wider text-navy/45 mt-1">{s.l}</p>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal direction="right" className="relative">
            <div className="space-y-3">
              <div className="col-span-3">
                <p className="font-sans text-[10px] uppercase tracking-widest text-navy/45 mb-2">License &amp; Registration</p>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    '/Screenshot_2026-06-10_at_1.47.25_AM.png',
                    '/Screenshot_2026-06-10_at_1.47.47_AM.png',
                    '/Screenshot_2026-06-10_at_1.48.08_AM.png',
                  ].map((src, i) => (
                    <div key={i} className="w-full aspect-square bg-sand-100 border border-sand-200 overflow-hidden">
                      <img src={src} alt={`License ${i + 1}`} className="w-full h-full object-cover" />
                    </div>
                  ))}
                </div>
              </div>
              <div className="col-span-3">
                <p className="font-sans text-[10px] uppercase tracking-widest text-navy/45 mb-2 mt-3">Certificates &amp; Qualifications</p>
                <div className="grid grid-cols-3 gap-3">
                {[
                  '/Screenshot_2026-06-10_at_1.50.11_AM.png',
                  '/Screenshot_2026-06-10_at_1.50.33_AM.png',
                  '/Screenshot_2026-06-10_at_1.51.04_AM.png',
                  '/Screenshot_2026-06-10_at_1.51.21_AM.png',
                  '/Screenshot_2026-06-10_at_1.52.16_AM.png',
                  '/Screenshot_2026-06-10_at_1.52.37_AM.png',
                  '/Screenshot_2026-06-10_at_1.52.54_AM.png',
                  '/Screenshot_2026-06-10_at_1.54.03_AM.png',
                  '/Screenshot_2026-06-10_at_1.54.24_AM.png',
                ].map((src, i) => (
                  <div key={i} className="w-full aspect-square bg-sand-100 border border-sand-200 overflow-hidden">
                    <img src={src} alt={`Photo ${i + 4}`} className="w-full h-full object-cover" />
                  </div>
                ))}
              </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Values */}
      <section className="py-28 bg-navy">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <Reveal className="text-center mb-14">
            <span className="section-label">What We Stand For</span>
            <h2 className="section-title-light">Our Values</h2>
          </Reveal>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
            {values.map((v, i) => (
              <Reveal key={v.title} delay={i * 0.1}>
                <div className="group">
                  <div className="w-11 h-11 border border-gold/30 flex items-center justify-center mb-5 group-hover:bg-gold/10 transition-colors">
                    <v.icon size={18} className="text-gold" />
                  </div>
                  <h3 className="font-serif text-xl text-white mb-3">{v.title}</h3>
                  <p className="font-sans text-sm text-white/50 leading-relaxed">{v.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <div className="mt-16 border-t border-white/10 pt-14 max-w-3xl mx-auto text-center">
            <p className="font-serif text-xl text-white/75 italic leading-relaxed">
              "We built this company on one principle: deliver quality work and earn people's trust. Everything else follows."
            </p>
            <p className="font-sans text-gold text-[10px] tracking-[0.25em] uppercase mt-5">Panama International — Founded 2015</p>
          </div>
        </div>
      </section>

      {/* Certifications & Qualifications */}
      <section className="py-28 bg-cream-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <Reveal className="text-center mb-12">
            <span className="section-label">Credentials</span>
            <h2 className="section-title">Certifications &<br /><span className="text-gold italic">Qualifications</span></h2>
          </Reveal>

          {/* Tabs */}
          <div className="flex justify-center mb-14">
            <div className="inline-flex border border-sand-200 bg-white">
              <button
                onClick={() => setActiveTab('certifications')}
                className={`px-8 py-3 font-sans text-xs tracking-[0.15em] uppercase transition-all duration-300 ${
                  activeTab === 'certifications'
                    ? 'bg-navy text-white'
                    : 'text-navy/60 hover:text-navy'
                }`}
              >
                Certifications
              </button>
              <button
                onClick={() => setActiveTab('qualifications')}
                className={`px-8 py-3 font-sans text-xs tracking-[0.15em] uppercase transition-all duration-300 ${
                  activeTab === 'qualifications'
                    ? 'bg-navy text-white'
                    : 'text-navy/60 hover:text-navy'
                }`}
              >
                Qualifications
              </button>
            </div>
          </div>

          {/* Cards Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {items.map((item, i) => (
              <Reveal key={item.title} delay={i * 0.1}>
                <div className="group bg-white border border-sand-200 overflow-hidden hover:shadow-lg transition-shadow duration-500">
                  <div className="overflow-hidden">
                    <img
                      src={item.img}
                      alt={item.title}
                      className="w-full h-44 object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                  </div>
                  <div className="p-5">
                    <p className="font-sans text-[9px] tracking-[0.2em] uppercase text-gold mb-2">{item.subtitle}</p>
                    <h3 className="font-serif text-lg text-navy mb-2">{item.title}</h3>
                    <p className="font-sans text-xs text-navy/55 leading-relaxed">{item.desc}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-navy text-center">
        <Reveal className="max-w-lg mx-auto px-6">
          <h2 className="section-title-light mb-5">Work With<br /><span className="text-gold italic">Us</span></h2>
          <Link to="/inquiries" className="btn-primary">Request a Quote <ArrowRight size={13} /></Link>
        </Reveal>
      </section>
    </div>
  );
}
