const ROUTES = [
  { id: 'ath-thes', el: 'Αθήνα → Θεσσαλονίκη', en: 'Athens → Thessaloniki',
    km: 503, solo: 92, ktel: 40.50, seat: 22.00,
    from: 'ATH', to: 'THE', fuel: 68, tolls: 24 }
];

function useTween(value, dur = 700) {
  const [d, setD] = React.useState(value);
  const from = React.useRef(value);
  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setD(value); from.current = value; return; }
    const start = from.current, t0 = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setD(start + (value - start) * e);
      if (p < 1) raf = requestAnimationFrame(tick); else from.current = value;
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, dur]);
  return d;
}

function LeafMeter({ trees }) {
  const pct = Math.min(1, trees / 60);
  const LEAF = "M32 4 C20 16 12 27 12 38 C12 50 21 60 32 60 C43 60 52 50 52 38 C52 27 44 16 32 4 Z";
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" className="flex-shrink-0">
      <defs>
        <clipPath id="leafClipV6"><path d={LEAF} /></clipPath>
      </defs>
      <path d={LEAF} fill="#e5f7f0" />
      <g clipPath="url(#leafClipV6)">
        <rect x="0" y={64 - pct * 64} width="64" height={pct * 64} fill="#00A86B" className="transition-all duration-700" />
      </g>
      <path d={LEAF} fill="none" stroke="#00A86B" strokeWidth="2.5" strokeLinejoin="round" />
      <g stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" opacity="0.9">
        <path d="M32 10 L32 56" />
        <path d="M32 24 L23 19" />
        <path d="M32 24 L41 19" />
        <path d="M32 36 L21 30" />
        <path d="M32 36 L43 30" />
      </g>
    </svg>
  );
}

function Calculator() {
  const { Select } = window.ellarideDesignSystem_c64d4a || {};
  const { RealMap } = window;
  const t = window.t;
  const lang = window.__LANG__ || 'el';
  const [routeId, setRouteId] = React.useState('ath-thes');
  const [seats, setSeats] = React.useState(3);

  const r = ROUTES.find(x => x.id === routeId) || ROUTES[0];
  const options = ROUTES.map(x => ({ value: x.id, label: x[lang] || x.el }));

  const recovery = Math.min(r.solo, r.seat * seats);
  const recoveryPct = Math.round((recovery / r.solo) * 100);
  const passSaving = r.ktel - r.seat;
  const savingPct = Math.round((passSaving / r.ktel) * 100);
  const co2Per500 = seats === 1 ? 30.6 : (seats === 2 ? 40.8 : 45.9);
  const co2Kg = +((r.km / 500) * co2Per500).toFixed(1);
  const trees = Math.max(1, Math.round(co2Kg / 0.06));

  const tRecovery = useTween(recovery);
  const tSaving = useTween(passSaving);
  const tCo2 = useTween(co2Kg);

  return (
    <section id="calc" 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">
        
        {/* Section Header */}
        <div className="max-w-[620px] mb-12" data-reveal>
          <span className="text-xs font-semibold text-[#0096F7] uppercase tracking-wider block mb-2">
            {t('calc.eyebrow')}
          </span>
          <h2 className="font-sans font-normal text-3xl md:text-[44px] md:leading-[1.12] text-[#171717] tracking-tight">
            {t('calc.title')}
          </h2>
          <p className="mt-3 text-base md:text-lg text-[#6a6a6a]">
            {t('calc.sub')}
          </p>
        </div>

        {/* Calculator Controls + Outputs Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start" data-reveal>
          
          {/* Left Column (Inputs & Map) */}
          <div className="lg:col-span-7 flex flex-col gap-6">
            <div className="bg-white border border-[#e5e5e5] rounded-[24px] p-6 shadow-sm flex flex-col sm:flex-row gap-6">
              
              {/* Route Select */}
              <div className="flex-1">
                <label className="block text-xs font-semibold text-[#171717] mb-2">
                  {t('calc.routeLabel')}
                </label>
                <select 
                  value={routeId} 
                  onChange={(e) => setRouteId(e.target.value)}
                  className="w-full h-11 px-3 bg-[#f9f9f9] border border-[#e5e5e5] rounded-xl text-sm font-medium text-[#171717] outline-none focus:border-[#0096F7]">
                  {options.map(opt => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
              </div>

              {/* Seats Slider */}
              <div className="flex-1">
                <div className="flex justify-between items-baseline mb-2">
                  <span className="text-xs font-semibold text-[#171717]">{t('calc.seatsLabel')}</span>
                  <span className="text-lg font-bold text-[#0096F7]">{seats}</span>
                </div>
                <input 
                  type="range" 
                  min="1" 
                  max="3" 
                  step="1" 
                  value={seats} 
                  onChange={(e) => setSeats(+e.target.value)}
                  className="w-full accent-[#0096F7]" 
                />
                <div className="flex justify-between text-xs text-[#a3a3a3] mt-1">
                  <span>1</span><span>2</span><span>3</span>
                </div>
              </div>

            </div>

            {/* Map */}
            {RealMap && <RealMap routeId={routeId} from={r.from} to={r.to} km={r.km} />}
          </div>

          {/* Right Column (Outputs Cards - Clean Light Theme) */}
          <div className="lg:col-span-5 flex flex-col gap-5">
            
            {/* Driver Recovery Output */}
            <div className="bg-white border border-[#e5e5e5] rounded-[24px] p-6 shadow-sm">
              <span className="text-xs font-semibold text-[#6a6a6a] uppercase tracking-wider block mb-1">
                {t('calc.driverRecovers')}
              </span>
              <div className="flex items-baseline gap-3 mt-1">
                <span className="text-4xl md:text-5xl font-bold text-[#0096F7]">
                  €{tRecovery.toFixed(2)}
                </span>
                <span className="text-sm font-medium text-[#171717]">
                  ≈ {recoveryPct}% {t('calc.ofFuelToll')}
                </span>
              </div>
              <div className="mt-4 h-2 rounded-full bg-[#f0f0f0] overflow-hidden">
                <div 
                  className="h-full bg-[#0096F7] rounded-full transition-all duration-700" 
                  style={{ width: `${recoveryPct}%` }}
                />
              </div>
            </div>

            {/* Passenger Savings Output */}
            <div className="bg-white border border-[#e5e5e5] rounded-[24px] p-6 shadow-sm">
              <span className="text-xs font-semibold text-[#0080d4] uppercase tracking-wider block mb-1">
                {t('calc.passengerSavings')}
              </span>
              <div className="flex items-baseline gap-3 mt-1">
                <span className="text-4xl md:text-5xl font-bold text-[#171717]">
                  €{tSaving.toFixed(2)}
                </span>
                <span className="text-sm font-semibold text-[#0080d4]">
                  {t('calc.vsBusTrain')} −{savingPct}%
                </span>
              </div>
              <div className="mt-2 text-xs text-[#6a6a6a]">
                €{r.seat.toFixed(2)} {t('calc.perSeatWith')} · €{r.ktel.toFixed(2)} {t('calc.avgBusFare')}
              </div>
            </div>

            {/* CO2 Savings Meter */}
            <div className="bg-gradient-to-r from-[#e5f7f0]/60 to-white border border-[#b9ebd8] rounded-[24px] p-6 shadow-sm flex flex-col gap-4">
              <div className="flex items-center gap-5">
                <LeafMeter trees={trees} />
                <div>
                  <span className="text-xs font-semibold text-[#00A86B] uppercase tracking-wider block">
                    {t('calc.co2Title')}
                  </span>
                  <div className="flex items-baseline gap-2 mt-0.5">
                    <span className="text-3xl font-bold text-[#171717]">{tCo2.toFixed(1)}</span>
                    <span className="text-sm font-semibold text-[#00A86B]">kg CO₂</span>
                  </div>
                  <div className="text-xs text-[#6a6a6a] mt-1">
                    ≈ {trees} {t('calc.co2Eq')}
                  </div>
                </div>
              </div>

              {/* CO2 Metric Breakdown Table (Οδηγείς, εξοικονομείς CO₂) */}
              <div className="pt-3 border-t border-[#b9ebd8]/50">
                <div className="text-[11px] font-bold text-[#00A86B] uppercase tracking-wider mb-2">
                  {lang === 'el' ? 'Οδηγείς, εξοικονομείς CO₂ (500 km)' : 'Driving saves CO₂ (500 km)'}
                </div>
                <div className="grid grid-cols-3 gap-2 text-center">
                  <div className={`p-2 rounded-xl border transition-all ${seats === 1 ? 'bg-[#00A86B] text-white border-[#00A86B] shadow-sm' : 'bg-white text-[#171717] border-[#e5e5e5]'}`}>
                    <div className={`text-[10px] font-medium ${seats === 1 ? 'text-white/80' : 'text-[#6a6a6a]'}`}>1 {lang === 'el' ? 'επιβάτης' : 'passenger'}</div>
                    <div className="text-xs font-bold mt-0.5">30.6 kg</div>
                  </div>
                  <div className={`p-2 rounded-xl border transition-all ${seats === 2 ? 'bg-[#00A86B] text-white border-[#00A86B] shadow-sm' : 'bg-white text-[#171717] border-[#e5e5e5]'}`}>
                    <div className={`text-[10px] font-medium ${seats === 2 ? 'text-white/80' : 'text-[#6a6a6a]'}`}>2 {lang === 'el' ? 'επιβάτες' : 'passengers'}</div>
                    <div className="text-xs font-bold mt-0.5">40.8 kg</div>
                  </div>
                  <div className={`p-2 rounded-xl border transition-all ${seats === 3 ? 'bg-[#00A86B] text-white border-[#00A86B] shadow-sm' : 'bg-white text-[#171717] border-[#e5e5e5]'}`}>
                    <div className={`text-[10px] font-medium ${seats === 3 ? 'text-white/80' : 'text-[#6a6a6a]'}`}>3 {lang === 'el' ? 'επιβάτες' : 'passengers'}</div>
                    <div className="text-xs font-bold mt-0.5">45.9 kg</div>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </section>
  );
}

window.Calculator = Calculator;