import React from 'react';
import { ArrowRight, CheckCircle2, ChevronRight, Layers } from 'lucide-react';
import { SERVICES } from '../data/services';
import { Breadcrumbs } from '../components/Breadcrumbs';

interface ServicesPageProps {
  onNavigate: (path: string) => void;
  onOpenEnquiry: (mode?: 'learner' | 'guidance' | 'corporate' | 'partnership' | 'advisory') => void;
}

export function ServicesPage({ onNavigate, onOpenEnquiry }: ServicesPageProps) {
  const breadcrumbs = [{ label: 'Services' }];

  return (
    <div className="bg-[#F6F7F2] min-h-screen">
      <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />

      {/* Header */}
      <section className="bg-white border-b border-[#E5E7DC] py-14 sm:py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="max-w-3xl space-y-4">
            <div className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#0B4035] bg-[#F3F8D3] px-3 py-1 rounded-full">
              <span>Six Connected Service Lines</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold text-[#0B4035] tracking-tight leading-tight">
              Our services and initial portfolio.
            </h1>

            <p className="text-base sm:text-lg text-stone-700 leading-relaxed">
              PANIA provides six connected service lines spanning exam-aligned certification preparation, corporate upskilling, online work readiness, technology advisory, intensive masterclasses, and career guidance.
            </p>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-16 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-3 gap-8">
          {SERVICES.map((srv) => (
            <div
              key={srv.id}
              className="bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs flex flex-col justify-between hover:shadow-md transition-shadow group"
            >
              <div className="space-y-4">
                <span className="w-9 h-9 rounded-xl bg-[#F6F7F2] text-[#0B4035] flex items-center justify-center font-bold text-xs font-mono group-hover:bg-[#0B4035] group-hover:text-[#D5E64D] transition-colors">
                  {srv.number}
                </span>

                <h2 className="font-serif font-bold text-2xl text-[#0B4035]">
                  {srv.title}
                </h2>

                <p className="text-xs sm:text-sm text-stone-700 leading-relaxed">
                  {srv.description}
                </p>

                <div className="pt-3 border-t border-stone-100 space-y-2 text-xs text-stone-600">
                  {srv.highlights.map((h, i) => (
                    <div key={i} className="flex items-start gap-2">
                      <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78] shrink-0 mt-0.5" />
                      <span>{h}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="pt-6 mt-6 border-t border-stone-100">
                <button
                  onClick={() => {
                    if (srv.actionRoute.startsWith('/contact')) {
                      onOpenEnquiry(srv.enquiryMode);
                    } else {
                      onNavigate(srv.actionRoute);
                    }
                  }}
                  className="w-full py-2.5 px-4 rounded-xl bg-[#0B4035] text-[#D5E64D] hover:bg-[#072C24] font-semibold text-xs transition-colors flex items-center justify-center gap-1.5"
                >
                  <span>{srv.actionText}</span>
                  <ArrowRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Technology Advisory Deep Dive Card */}
        <div className="mt-12 bg-[#0B4035] text-white rounded-2xl p-8 sm:p-10 border border-[#072C24]">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            <div className="lg:col-span-8 space-y-3">
              <span className="text-xs font-semibold uppercase tracking-wider text-[#D5E64D]">
                Strategic Partnership & Consulting
              </span>
              <h3 className="text-2xl sm:text-3xl font-serif font-bold text-white">
                Technology Advisory & Capability Assessment
              </h3>
              <p className="text-sm text-stone-200 leading-relaxed max-w-2xl">
                Discuss the technology capability or learning challenge your organisation needs to address. We collaborate with leadership to define the core problem, perform training needs analyses, and design an agreed scope with quantifiable outcomes.
              </p>
            </div>

            <div className="lg:col-span-4 flex flex-col gap-3">
              <button
                onClick={() => onOpenEnquiry('advisory')}
                className="w-full py-3 px-5 rounded-xl bg-[#D5E64D] text-[#0B4035] hover:bg-[#C2D33C] font-bold text-xs text-center transition-colors shadow-xs"
              >
                Discuss an advisory need
              </button>
              <button
                onClick={() => onNavigate('/organisations')}
                className="w-full py-2.5 px-5 rounded-xl bg-white/10 text-white hover:bg-white/20 font-semibold text-xs border border-white/20 text-center transition-colors"
              >
                View corporate programmes
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}