"use client";

import { useInView } from '@/hooks/useInView';
import { useCountUp } from '@/hooks/useCountUp';
import { TrendingUp, Clock, Percent } from 'lucide-react';
import ScrollReveal from './ScrollReveal';

const ROIBanner = () => {
  const { ref, inView } = useInView();
  const months = useCountUp(14, 2000, inView);
  const percent = useCountUp(40, 2000, inView);

  return (
    <section className="py-20 lg:py-28 bg-cream" ref={ref}>
      <div className="container mx-auto px-4 lg:px-8">
        <div className="bg-foreground rounded-3xl px-6 py-16 sm:px-10 lg:px-16 lg:py-24">
          <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 items-start">
            {/* Left : accroche sticky */}
            <div className="lg:w-[40%] lg:sticky lg:top-[120px]">
              <ScrollReveal>
                <span className="inline-block border border-white/20 text-white/60 font-satoshi font-medium text-sm px-4 py-1.5 rounded-full mb-6">
                  Résultats
                </span>
                <p className="font-satoshi text-5xl sm:text-6xl lg:text-7xl font-black text-white leading-none mb-4">
                  35 000€
                </p>
                <p className="text-white/50 text-base lg:text-lg leading-relaxed mb-2">
                  économisés par an en moyenne par nos clients.
                </p>
                <h2 className="font-satoshi text-2xl lg:text-3xl font-bold text-white mt-6">
                  Et vous ?
                </h2>
              </ScrollReveal>
            </div>

            {/* Right : 3 KPI cards */}
            <div className="lg:w-[60%] flex flex-col gap-5">
              <ScrollReveal>
                <div className="bg-white/[0.06] rounded-2xl p-6 lg:p-8 border border-white/10 hover:bg-white/[0.09] transition-colors duration-500">
                  <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                    <TrendingUp className="w-5 h-5 text-white/70" />
                  </div>
                  <p className="font-satoshi text-3xl lg:text-4xl font-black text-white mb-2">15-50K€</p>
                  <p className="text-white/40 text-sm lg:text-base leading-relaxed">économies par an selon la surface</p>
                </div>
              </ScrollReveal>

              <ScrollReveal>
                <div
                  className="bg-white/[0.06] rounded-2xl p-6 lg:p-8 border border-white/10 hover:bg-white/[0.09] transition-colors duration-500"
                  
                >
                  <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                    <Clock className="w-5 h-5 text-white/70" />
                  </div>
                  <p className="font-satoshi text-3xl lg:text-4xl font-black text-white mb-2">{months} mois</p>
                  <p className="text-white/40 text-sm lg:text-base leading-relaxed">retour sur investissement</p>
                </div>
              </ScrollReveal>

              <ScrollReveal>
                <div
                  className="bg-white/[0.06] rounded-2xl p-6 lg:p-8 border border-white/10 hover:bg-white/[0.09] transition-colors duration-500"
                  
                >
                  <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                    <Percent className="w-5 h-5 text-white/70" />
                  </div>
                  <p className="font-satoshi text-3xl lg:text-4xl font-black text-white mb-2">-{percent}%</p>
                  <p className="text-white/40 text-sm lg:text-base leading-relaxed">facture climatisation</p>
                </div>
              </ScrollReveal>
            </div>
          </div>

          {/* CTA bottom */}
          <ScrollReveal>
            <div className="flex flex-col items-center mt-16 pt-12 border-t border-white/10">
              <a href="#contact" className="inline-block cta-gradient cta-shimmer text-white font-semibold px-8 py-3.5 rounded-lg hover:scale-[1.02] hover:shadow-xl transition-all">
                Calculer mon ROI
              </a>
              <p className="text-sm text-white/30 mt-3">Simulation gratuite · Primes CEE incluses</p>
            </div>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
};

export default ROIBanner;