function Hero() {
  const t = window.t;
  const lang = window.__LANG__ || 'el';
  const [from, setFrom] = React.useState('Αθήνα');
  const [to, setTo] = React.useState('Θεσσαλονίκη');
  const [swapped, setSwapped] = React.useState(false);

  const swapCities = () => {
    setSwapped(s => !s);
    const temp = from;
    setFrom(to);
    setTo(temp);
  };

  const quickRoutes = lang === 'el' ? [
    ['Αθήνα', 'Θεσσαλονίκη']
  ] : [
    ['Athens', 'Thessaloniki']
  ];

  return (
    <section className="relative bg-gradient-to-b from-[#F8FAFC] via-white to-white w-full pt-24 md:pt-32 pb-16 overflow-hidden font-sans">
      {/* Ambient background glow */}
      <div className="absolute top-10 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-gradient-to-tr from-[#0096F7]/10 via-[#0096F7]/5 to-transparent rounded-full blur-3xl pointer-events-none" />

      <div className="relative z-10 max-w-[1240px] mx-auto px-4 md:px-8">
        
        {/* Top Badge Pill */}
        <div className="flex justify-center md:justify-start mb-6">
          <div className="inline-flex items-center gap-2.5 rounded-full px-4 py-2 bg-white/90 backdrop-blur-md border border-[#e2e8f0] shadow-xs transition-transform hover:-translate-y-0.5">
            <span className="w-2.5 h-2.5 rounded-full bg-[#0096F7] animate-pulse"></span>
            <span className="text-xs md:text-sm font-semibold text-[#171717] tracking-tight">{t('hero.badge')}</span>
          </div>
        </div>

        {/* Hero Grid Container */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
          
          {/* Left Column: Search & Action Card */}
          <div className="lg:col-span-6 flex flex-col justify-between bg-white/95 backdrop-blur-xl border border-[#e2e8f0] rounded-[28px] md:rounded-[36px] p-6 md:p-10 shadow-[0_10px_40px_rgba(10,22,40,0.06)]">
            <div className="flex flex-col gap-6">
              <div>
                <h1 className="font-sans font-extrabold text-3xl sm:text-4xl md:text-[46px] md:leading-[1.12] text-[#0A1628] tracking-tight">
                  <span className="block">{t('hero.h1a')}</span>
                  <span className="text-[#0096F7] block">{t('hero.h1b')}</span>
                </h1>
                <p className="font-sans text-base md:text-[17px] text-[#475569] mt-4 leading-relaxed max-w-[520px]">
                  {t('hero.sub')}
                </p>
              </div>

              {/* Route Search Widget */}
              <div className="w-full mt-1">
                <div className="flex flex-col gap-3">
                  
                  {/* From / To Inputs Box */}
                  <div className="relative rounded-[22px] border border-[#cbd5e1] bg-white overflow-hidden shadow-sm transition-all focus-within:border-[#0096F7] focus-within:ring-2 focus-within:ring-[#0096F7]/20">
                    <div className="flex flex-col divide-y divide-[#f1f5f9]">
                      
                      {/* From Input */}
                      <div className="h-[58px] flex items-center px-4 bg-white hover:bg-[#f8fafc] transition-colors">
                        <span className="w-3 h-3 rounded-full bg-[#0096F7] mr-3 shrink-0 ring-4 ring-[#e6f4fe]" />
                        <input 
                          type="text" 
                          value={from} 
                          onChange={(e) => setFrom(e.target.value)}
                          placeholder="Αφετηρία (πόλη)" 
                          className="w-full bg-transparent outline-none text-base text-[#0A1628] placeholder:text-[#94a3b8] font-semibold"
                        />
                      </div>

                      {/* To Input */}
                      <div className="h-[58px] flex items-center px-4 bg-white hover:bg-[#f8fafc] transition-colors">
                        <span className="w-3 h-3 rounded-full bg-[#0A1628] mr-3 shrink-0 ring-4 ring-[#f1f5f9]" />
                        <input 
                          type="text" 
                          value={to} 
                          onChange={(e) => setTo(e.target.value)}
                          placeholder="Προορισμός (πόλη)" 
                          className="w-full bg-transparent outline-none text-base text-[#0A1628] placeholder:text-[#94a3b8] font-semibold"
                        />
                      </div>

                    </div>

                    {/* Swap Button */}
                    <button 
                      type="button" 
                      onClick={swapCities}
                      title="Αντιστροφή" 
                      className={`absolute right-4 top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border border-[#cbd5e1] bg-white text-[#0A1628] shadow-sm transition-all duration-300 active:scale-95 hover:bg-[#f8fafc] hover:border-[#0096F7] hover:text-[#0096F7] ${swapped ? 'rotate-180' : 'rotate-0'}`}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M7 16V4M7 4L3 8M7 4l4 4M17 8v12M17 20l4-4M17 20l-4-4" strokeLinecap="round" strokeLinejoin="round"></path>
                      </svg>
                    </button>
                  </div>

                  {/* Quick Route Pills */}
                  <div className="flex items-center gap-1.5 overflow-x-auto pt-1 pb-1 scrollbar-none">
                    <span className="text-xs font-semibold text-[#94a3b8] uppercase tracking-wider shrink-0 mr-1">
                      {lang === 'el' ? 'Δημοφιλή:' : 'Popular:'}
                    </span>
                    {quickRoutes.map(([f, tCity], idx) => (
                      <button key={idx} type="button"
                        onClick={() => { setFrom(f); setTo(tCity); }}
                        className="text-xs font-semibold text-[#0096F7] bg-[#e6f4fe] hover:bg-[#0096F7] hover:text-white px-3 py-1.5 rounded-full transition-all shrink-0">
                        {f} → {tCity}
                      </button>
                    ))}
                  </div>

                  {/* Store Badges (Replaces Pill Buttons per request) */}
                  <div className="flex items-center gap-3 mt-3">
                    <a href="#download" className="inline-flex items-center gap-2.5 bg-black text-white px-5 py-3 rounded-2xl transition-transform hover:scale-[1.02] no-underline shadow-sm">
                      <svg className="w-5 h-5 fill-current text-white shrink-0" viewBox="0 0 24 24">
                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.31c.62-.76 1.05-1.82.93-2.88-.9.04-2.02.6-2.66 1.35-.57.66-1.07 1.73-.93 2.76 1.01.08 2.04-.47 2.66-1.23z"/>
                      </svg>
                      <div className="flex flex-col text-left">
                        <span className="text-[9px] uppercase tracking-wider text-gray-400 font-medium">Download on the</span>
                        <span className="text-xs font-bold leading-tight text-white">App Store</span>
                      </div>
                    </a>

                    <a href="#download" className="inline-flex items-center gap-2.5 bg-black text-white px-5 py-3 rounded-2xl transition-transform hover:scale-[1.02] no-underline shadow-sm">
                      <svg className="w-5 h-5 fill-current text-white shrink-0" viewBox="0 0 24 24">
                        <path d="M3 20.5v-17c0-.55.45-1 1-1h.21l9.64 9.64L4.21 21.78H4c-.55 0-1-.45-1-1zm12.14-7.64l2.43-2.43-12.07-6.97 9.64 9.4zm0 2.28l-9.64 9.4 12.07-6.97-2.43-2.43zm2.98-1.14l2.7-1.56c.64-.37.64-1.34 0-1.71l-2.7-1.56-2.57 2.41 2.57 2.42z"/>
                      </svg>
                      <div className="flex flex-col text-left">
                        <span className="text-[9px] uppercase tracking-wider text-gray-400 font-medium">{lang === 'el' ? 'ΑΠΟΚΤΗΣΤΕ ΤΟ ΣΤΟ' : 'GET IT ON'}</span>
                        <span className="text-xs font-semibold leading-tight text-white">Google Play</span>
                      </div>
                    </a>
                  </div>

                </div>
              </div>

              {/* Trust Points */}
              <div className="flex items-center gap-6 text-xs font-semibold text-[#475569] pt-4 mt-4 border-t border-[#f1f5f9]">
                <span className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-[#0096F7]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7"></path></svg>
                  {t('hero.t1')}
                </span>
                <span className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-[#0096F7]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" 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>
                  {t('hero.t2')}
                </span>
              </div>
            </div>

          </div>

          {/* Right Column: Hero Visual Container with Floating Live Route Card */}
          <div className="lg:col-span-6 relative min-h-[420px] lg:min-h-[560px] rounded-[28px] md:rounded-[36px] overflow-hidden border border-[#e2e8f0] shadow-xl group">
            
            {/* Background Image */}
            <img 
              src="students as roadtrip.jpg" 
              alt="ellaride Intercity Roadtrip" 
              className="absolute inset-0 w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-105"
            />

            {/* Gradient Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-[#0A1628]/80 via-transparent to-transparent pointer-events-none" />

            

          </div>

        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;