"use client";

import { motion } from "framer-motion";

const METERS = [
  { label: "Ağır Yük Transferi", value: 85 },
  { label: "Mobil Vinç Operasyonları", value: 95 },
];

export function LoadMeterSection() {
  return (
    <section className="py-24 md:py-32 px-6 md:px-12 bg-surface flex flex-col items-center">
      <div className="w-full max-w-5xl">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-16 md:mb-24"
        >
          <span className="font-label text-xs uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Operasyonel Güç</span>
          <h3 className="font-headline text-3xl md:text-5xl font-bold uppercase tracking-tight text-white text-balance leading-none">Projeleriniz İçin Optimum Güç Hesabı</h3>
        </motion.div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
          {METERS.map((m, idx) => (
            <div key={m.label} className="flex flex-col">
              <div className="flex justify-between font-label text-[10px] md:text-xs uppercase tracking-[0.2em] mb-6 font-bold">
                <span className="text-white/60">{m.label}</span>
                <span className="text-primary">{m.value}% Verimlilik</span>
              </div>
              <div className="h-4 md:h-6 w-full bg-surface-container-highest relative overflow-hidden">
                <motion.div 
                  initial={{ width: 0 }}
                  whileInView={{ width: `${m.value}%` }}
                  transition={{ duration: 1.5, delay: idx * 0.3, ease: "circOut" }}
                  viewport={{ once: true }}
                  className="h-full bg-primary relative"
                >
                    <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_75%,transparent_75%,transparent)] bg-[length:20px_20px]"></div>
                </motion.div>
              </div>
              <p className="mt-4 text-xs text-on-surface-variant font-body leading-relaxed max-w-xs uppercase tracking-tighter">Sektör standartlarının üzerinde performans ve güvenlik marjı.</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}