function SectionHead({ eyebrow, title, sub }) {
  return (
    <div className="max-w-[760px] mb-12" data-reveal>
      <div className="inline-block text-xs font-semibold text-[#0096F7] uppercase tracking-wider mb-2">
        {eyebrow}
      </div>
      <h2 className="font-sans font-normal text-3xl md:text-[44px] md:leading-[1.12] text-[#171717] tracking-tight">
        {title}
      </h2>
      {sub && <p className="mt-4 text-base md:text-lg text-[#6a6a6a] leading-relaxed">{sub}</p>}
    </div>
  );
}

function Problem() {
  const t = window.t;

  return (
    <section className="bg-white w-full py-16 md:py-24 border-t border-[#f0f0f0]">
      <div className="max-w-[1140px] mx-auto px-4 md:px-10">
        
        {/* Main Banner Headline — Hitch Style */}
        <div className="flex flex-col gap-12 py-8 rounded-[30px]" data-reveal>
          <h2 className="font-sans font-normal text-2xl md:text-[44px] md:leading-[1.2] text-[#171717] max-w-[1000px] tracking-tight">
            {t('problem.title')}: Το ellaride είναι η δομημένη υπεραστική μετακίνηση που σε πηγαίνει μεταξύ πόλεων — χωρίς άκαμπτα δρομολόγια, ουρές ή περιττά έξοδα.
          </h2>

          {/* 4 Feature Columns Strip — Hitch style */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 pt-4">
            
            {/* Feature 1 */}
            <div className="flex flex-col gap-4 border-b md:border-b-0 md:border-r border-[#e5e5e5] pb-8 md:pb-0 md:pr-6">
              <div className="inline-flex items-center gap-2 py-1 px-3 rounded-full border border-[#171717] w-fit">
                <span className="text-xs font-medium text-[#171717]">0% Προμήθεια</span>
              </div>
              <div className="text-xl md:text-lg font-medium text-[#171717] leading-snug">
                <p className="m-0">0% προμήθεια οδηγού,</p>
                <p className="m-0 text-[#6a6a6a]">100% διαφάνεια</p>
              </div>
            </div>

            {/* Feature 2 */}
            <div className="flex flex-col gap-4 border-b md:border-b-0 md:border-r border-[#e5e5e5] pb-8 md:pb-0 md:pr-6">
              <div className="inline-flex items-center gap-2 py-1 px-3 rounded-full border border-[#171717] w-fit">
                <span className="text-xs font-medium text-[#171717]">Ελληνική Ταυτότητα</span>
              </div>
              <div className="text-xl md:text-lg font-medium text-[#171717] leading-snug">
                <p className="m-0">Επαληθευμένοι χρήστες,</p>
                <p className="m-0 text-[#6a6a6a]">ασφαλής ταυτοποίηση</p>
              </div>
            </div>

            {/* Feature 3 */}
            <div className="flex flex-col gap-4 border-b md:border-b-0 md:border-r border-[#e5e5e5] pb-8 md:pb-0 md:pr-6">
              <div className="inline-flex items-center gap-2 py-1 px-3 rounded-full border border-[#171717] w-fit">
                <span className="text-xs font-medium text-[#171717]">Open Fare™</span>
              </div>
              <div className="text-xl md:text-lg font-medium text-[#171717] leading-snug">
                <p className="m-0">Μοιρασμένο κόστος,</p>
                <p className="m-0 text-[#6a6a6a]">έως −55% οικονομία</p>
              </div>
            </div>

            {/* Feature 4 */}
            <div className="flex flex-col gap-4">
              <div className="inline-flex items-center gap-2 py-1 px-3 rounded-full border border-[#171717] w-fit">
                <span className="text-xs font-medium text-[#171717]">Ασφάλεια Escrow</span>
              </div>
              <div className="text-xl md:text-lg font-medium text-[#171717] leading-snug">
                <p className="m-0">Πληρωμή μετά την άφιξη,</p>
                <p className="m-0 text-[#6a6a6a]">μηδενικό ρίσκο</p>
              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}

function HowItWorks() {
  const t = window.t;
  const steps = [
    ['01', t('how.s1t'), t('how.s1b')],
    ['02', t('how.s2t'), t('how.s2b')],
    ['03', t('how.s3t'), t('how.s3b')],
  ];

  return (
    <section id="how" 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">
        <SectionHead eyebrow={t('how.eyebrow')} title={t('how.title')} />
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
          {steps.map(([n, title, desc], i) => (
            <div 
              key={n} 
              data-reveal 
              data-reveal-delay={i * 90}
              className="bg-white border border-[#e5e5e5] rounded-[24px] p-8 flex flex-col justify-between h-full hover:border-[#0096F7]/50 transition-colors shadow-sm">
              <div>
                <span className="inline-block text-xs font-bold text-[#0096F7] bg-[#e6f4fe] px-3 py-1 rounded-full mb-6">
                  {n}
                </span>
                <h3 className="text-xl font-medium text-[#171717] mb-3">{title}</h3>
                <p className="text-sm text-[#6a6a6a] leading-relaxed">{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Trust() {
  const t = window.t;

  /* Hitch Safety Cards 3-stage visual pattern: Before / During / After */
  const stages = [
    {
      timing: 'Πριν τη διαδρομή',
      color: 'text-[#0096F7]',
      title: t('trust.c3t'),
      desc: t('trust.c3b'),
      icon: (
        <svg className="w-6 h-6 text-[#171717]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
        </svg>
      )
    },
    {
      timing: 'Κατά τη διαδρομή',
      color: 'text-[#0080d4]',
      title: t('trust.c1t'),
      desc: t('trust.c1b'),
      icon: (
        <svg className="w-6 h-6 text-[#171717]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
        </svg>
      )
    },
    {
      timing: 'Μετά την άφιξη',
      color: 'text-[#171717]',
      title: t('trust.c4t'),
      desc: t('trust.c4b'),
      icon: (
        <svg className="w-6 h-6 text-[#171717]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
      )
    }
  ];

  return (
    <section id="trust" className="bg-white w-full py-16 md:py-24">
      <div className="max-w-[1140px] mx-auto px-4 md:px-10">
        
        <div className="flex flex-col items-center gap-4 text-center mb-12" data-reveal>
          <h2 className="font-sans font-normal text-3xl md:text-[44px] text-[#171717] tracking-tight">
            {t('trust.title')}
          </h2>
          <div className="inline-flex items-center border border-[#e5e5e5] rounded-full px-4 py-1.5 bg-[#f9f9f9]">
            <span className="text-sm font-medium text-[#171717]">{t('trust.sub')}</span>
          </div>
        </div>

        {/* 3 Stage Gradient Cards — 3D Depth & Light Brand Blue Glow */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 perspective-[1000px]">
          {stages.map((st, i) => (
            <div 
              key={i} 
              data-reveal
              data-reveal-delay={i * 90}
              className="group relative bg-gradient-to-b from-white via-[#f9fafc] to-[#f0f4f9] border border-[#e5e7eb] hover:border-[#0096F7]/40 rounded-[26px] md:rounded-[32px] p-7 md:p-9 flex flex-col justify-between min-h-[280px] shadow-[0_10px_30px_-5px_rgba(0,150,247,0.12)] hover:shadow-[0_25px_50px_-10px_rgba(0,150,247,0.28)] transition-all duration-500 ease-out hover:-translate-y-3 hover:rotate-x-1 hover:scale-[1.02] cursor-pointer overflow-hidden">
              
              {/* Top Accent Pill */}
              <span className={`font-semibold text-xs uppercase tracking-wider ${st.color} bg-white/80 backdrop-blur-md px-3.5 py-1.5 rounded-full border border-[#e5e7eb] w-fit shadow-xs`}>
                {st.timing}
              </span>

              {/* Card Content */}
              <div className="flex flex-col gap-4 mt-8 relative z-10">
                <div className="w-12 h-12 rounded-2xl bg-white border border-[#e5e7eb] flex items-center justify-center shadow-sm group-hover:bg-[#0096F7] group-hover:text-white group-hover:border-[#0096F7] group-hover:scale-110 transition-all duration-300">
                  <div className="group-hover:text-white transition-colors">
                    {st.icon}
                  </div>
                </div>
                <div>
                  <h3 className="font-semibold text-xl text-[#171717] group-hover:text-[#0096F7] transition-colors">{st.title}</h3>
                  <p className="text-sm text-[#6a6a6a] mt-1.5 leading-relaxed">{st.desc}</p>
                </div>
              </div>

              {/* Bottom Light Brand Blue Glow Line on Hover */}
              <div className="absolute bottom-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#0096F7] via-[#38b6ff] to-[#0080d4] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-b-full" />
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Problem, HowItWorks, Trust });