'use client';

import React from 'react';
import { motion } from 'framer-motion';

export function GrowthChart() {
  const data = [
    { year: '2023', hdd: 29436, kabel: 76727 },
    { year: '2024', hdd: 28680, kabel: 131964 },
    { year: '2025', hdd: 44655, kabel: 163470 },
  ];

  const maxVal = 163470; // Highest value for scaling

  return (
    <div className="w-full bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-neutral-100 my-16">
      <div className="mb-10">
        <h3 className="text-3xl font-heading font-extrabold text-neutral-dark mb-2">Bewiesene Leistungsfähigkeit</h3>
        <p className="text-neutral-500 font-medium">Unsere verlässliche Baukapazität der letzten drei Jahre (in Metern)</p>
      </div>

      <div className="space-y-8">
        {data.map((item, index) => {
          const hddWidth = (item.hdd / maxVal) * 100;
          const kabelWidth = (item.kabel / maxVal) * 100;

          return (
            <div key={item.year} className="relative">
              <div className="text-sm font-extrabold text-neutral-dark mb-2 w-16">{item.year}</div>
              <div className="space-y-2">
                {/* Kabelverlegung Bar */}
                <div className="flex items-center gap-4">
                  <div className="flex-1 bg-neutral-100 rounded-full h-6 overflow-hidden relative">
                    <motion.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${kabelWidth}%` }}
                      viewport={{ once: true, margin: "-50px" }}
                      transition={{ duration: 1.5, delay: 0.1 * index, ease: "easeOut" }}
                      className="absolute top-0 left-0 h-full bg-primary rounded-full"
                    />
                  </div>
                  <div className="w-24 text-right text-xs font-bold text-neutral-500 uppercase">
                    Kabel: {new Intl.NumberFormat('de-DE').format(item.kabel)}m
                  </div>
                </div>

                {/* HDD Bar */}
                <div className="flex items-center gap-4">
                  <div className="flex-1 bg-neutral-100 rounded-full h-4 overflow-hidden relative">
                    <motion.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${hddWidth}%` }}
                      viewport={{ once: true, margin: "-50px" }}
                      transition={{ duration: 1.5, delay: 0.2 + 0.1 * index, ease: "easeOut" }}
                      className="absolute top-0 left-0 h-full bg-neutral-dark rounded-full"
                    />
                  </div>
                  <div className="w-24 text-right text-xs font-bold text-neutral-500 uppercase">
                    HDD: {new Intl.NumberFormat('de-DE').format(item.hdd)}m
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      
      <div className="mt-8 flex gap-6 border-t border-neutral-100 pt-6">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-primary" />
          <span className="text-xs font-bold text-neutral-500 uppercase">Kabelverlegung</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-neutral-dark" />
          <span className="text-xs font-bold text-neutral-500 uppercase">HDD Spülbohrung</span>
        </div>
      </div>
    </div>
  );
}