'use client'
import React from 'react'
import type { Page, Media } from '../../payload-types'
import Image from 'next/image'
import { ArrowLink } from '../../components/ArrowLink'

type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>

export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, ctaUrl, image }) => {
  const processMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
  const imageUrl = processMedia?.url || 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80';
  const imageAlt = processMedia?.alt || 'Proces współpracy';

  return (
    <section id="jak-to-dziala" className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
      <div className="container-premium">
        <div className="max-w-3xl mb-16 md:mb-24">
          <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
            {title}
          </h2>
          {subtitle && (
            <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
              {subtitle}
            </p>
          )}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
          <div className="flex flex-col gap-16">
            {steps?.map((step: NonNullable<Props['steps']>[0], index: number) => {
              const stepNumber = String(index + 1).padStart(2, '0')

              return (
                <div
                  key={step.id || index}
                  className="relative flex flex-col sm:flex-row gap-6 group"
                >
                  <div className="font-heading text-6xl md:text-7xl font-black text-foreground/5 tracking-tighter leading-none sm:-mt-2 group-hover:text-accent/10 transition-colors shrink-0">
                    {stepNumber}
                  </div>
                  <div className="relative z-10 pt-2 border-t-2 border-transparent group-hover:border-accent transition-colors flex-1">
                    <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-4">
                      {step.title}
                    </h3>
                    <p className="text-foreground/75 text-lg font-light leading-relaxed">
                      {step.description}
                    </p>
                  </div>
                </div>
              )
            })}
            
            {ctaText && (
              <div className="mt-4">
                <ArrowLink href={ctaUrl || '#'}>
                  {ctaText}
                </ArrowLink>
              </div>
            )}
          </div>
          
          <div className="relative aspect-[4/5] w-full bg-card rounded-none overflow-hidden">
            <Image 
              src={imageUrl}
              alt={imageAlt}
              fill
              sizes="(max-width: 1024px) 100vw, 50vw"
              className="object-cover w-full h-full grayscale hover:grayscale-0 transition-all duration-700"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent mix-blend-multiply pointer-events-none" />
          </div>
        </div>
      </div>
    </section>
  )
}