function PersonaCard({ num, title, body, stat, statLabel, photo, delay }) {
  return (
    <div 
      data-reveal 
      data-reveal-delay={delay}
      className="bg-white border border-[#e5e5e5] rounded-[24px] overflow-hidden flex flex-col justify-between h-full transition-all hover:border-[#0096F7] shadow-sm">
      
      <div className="relative h-[200px] overflow-hidden bg-[#f3f3f3]">
        {photo ? (
          <img src={photo} alt={title} className="w-full h-full object-cover" />
        ) : (
          <div className="w-full h-full bg-[#f3f3f3] flex items-center justify-center text-xs text-[#a3a3a3]">
            Photo placeholder
          </div>
        )}
        <span className="absolute top-3 left-3 bg-[#171717]/80 backdrop-blur-md text-white text-xs font-bold px-2.5 py-1 rounded-md tracking-wider">
          {num}
        </span>
      </div>

      <div className="p-6 flex flex-col flex-1 justify-between gap-4">
        <div>
          {stat ? (
            <div className="flex items-baseline gap-2 mb-2">
              <span className="text-3xl font-bold text-[#0096F7]">{stat}</span>
              <span className="text-xs font-semibold text-[#0080d4] uppercase tracking-wide">{statLabel}</span>
            </div>
          ) : null}
          <h3 className="text-xl font-medium text-[#171717] mb-2">{title}</h3>
          <p className="text-sm text-[#6a6a6a] leading-relaxed">{body}</p>
        </div>
      </div>
    </div>
  );
}

function WhoItsFor() {
  const t = window.t;
  const lang = window.__LANG__ || 'el';
  
  const personas = [
    { 
      num: '01', 
      title: t('who.p1t'), 
      body: t('who.p1b'), 
      stat: t('who.p1s'), 
      statLabel: t('who.p1l'), 
      photo: 'commuters.jpg',
      delay: 0
    },
    { 
      num: '02', 
      title: t('who.p2t'), 
      body: t('who.p2b'), 
      stat: t('who.p2s'), 
      statLabel: t('who.p2l'), 
      photo: 'young_professionals.jpg',
      delay: 90
    },
    { 
      num: '03', 
      title: t('who.p3t'), 
      body: t('who.p3b'), 
      stat: t('who.p3s'), 
      statLabel: t('who.p3l'), 
      photo: 'pet_travelers.jpg',
      delay: 180
    },
  ];

  const headerTitle = t('who.title') || t('who.h2') || 'Φτιαγμένο για το πώς ταξιδεύουμε στην Ελλάδα!';
  const headerLead = t('who.sub') || t('who.lead') || 'Το ellaride λύνει ανάγκες μετακίνησης που τα σταθερά δρομολόγια και το ακριβό αυτοκίνητο δεν λύνουν.';

  return (
    <section id="who" className="bg-[#f9f9f9] w-full py-16 md:py-24 border-t border-b border-[#e5e5e5]">
      <div className="max-w-[1140px] mx-auto px-4 md:px-10">
        
        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" data-reveal>
          <div className="max-w-[560px]">
            <span className="text-xs font-semibold text-[#0096F7] uppercase tracking-wider block mb-2">
              {t('who.eyebrow') || 'ΓΙΑ ΠΟΙΟΥΣ'}
            </span>
            <h2 className="text-3xl md:text-5xl font-semibold text-[#171717] tracking-tight leading-tight">
              {headerTitle}
            </h2>
          </div>
          <p className="text-base text-[#6a6a6a] max-w-[420px] border-l-2 border-[#0096F7] pl-4 py-1">
            {lang === 'el' ? (
              <span>Το <span className="font-bold text-[#0096F7]">ella</span><span className="font-bold text-[#171717]">ride</span> λύνει ανάγκες μετακίνησης που τα σταθερά δρομολόγια και το ακριβό αυτοκίνητο δεν λύνουν.</span>
            ) : (
              <span><span className="font-bold text-[#0096F7]">ella</span><span className="font-bold text-[#171717]">ride</span> serves real mobility needs that rigid schedules and high taxi fares don’t cover.</span>
            )}
          </p>
        </div>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
          {personas.map((p) => (
            <PersonaCard key={p.num} {...p} />
          ))}
        </div>

      </div>
    </section>
  );
}

window.WhoItsFor = WhoItsFor;