e-tib.com/components/blocks/GrowthChart.tsx

'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';

export function GrowthChart() {
  const t = useTranslations('GrowthChart');
  
  const data = [
    { year: '2016', offener: 5000, hdd: 1200, kabel: 16064 },
    { year: '2017', offener: 33401, hdd: 8363, kabel: 84675 },
    { year: '2018', offener: 30773, hdd: 10225, kabel: 108127 },
    { year: '2019', offener: 32445, hdd: 8505, kabel: 87468 },
    { year: '2020', offener: 31305, hdd: 9050, kabel: 93556 },
    { year: '2021', offener: 38756, hdd: 10957, kabel: 110127 },
    { year: '2022', offener: 41445, hdd: 9505, kabel: 102468 },
    { year: '2023', offener: 17908, hdd: 29436, kabel: 76727 },
    { year: '2024', offener: 30801, hdd: 28680, kabel: 131964 },
    { year: '2025', offener: 38166, hdd: 44655, kabel: 163470 },
  ];

  const maxVal = 163470; // Highest value for scaling

  return (
    <div className="w-full bg-white rounded-3xl p-6 md:p-12 shadow-sm border border-neutral-100 my-8 md:my-16">
      <div className="mb-10">
        <h3 className="text-2xl md:text-3xl font-heading font-extrabold text-neutral-dark mb-2">{t('title')}</h3>
        <p className="text-neutral-500 font-medium">{t('subtitle')}</p>
      </div>

      <div className="space-y-8">
        {data.map((item, index) => {
          const kabelWidth = (item.kabel / maxVal) * 100;
          const offenerWidth = (item.offener / maxVal) * 100;
          const hddWidth = (item.hdd / 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">
                    {t('kabel')}: {new Intl.NumberFormat('de-DE').format(item.kabel)}m
                  </div>
                </div>

                {/* Offener Tiefbau Bar */}
                <div className="flex items-center gap-4">
                  <div className="flex-1 bg-neutral-100 rounded-full h-5 overflow-hidden relative">
                    <motion.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${offenerWidth}%` }}
                      viewport={{ once: true, margin: "-50px" }}
                      transition={{ duration: 1.5, delay: 0.15 + 0.1 * index, ease: "easeOut" }}
                      className="absolute top-0 left-0 h-full bg-neutral-300 rounded-full"
                    />
                  </div>
                  <div className="w-24 text-right text-xs font-bold text-neutral-500 uppercase">
                    {t('offener')}: {new Intl.NumberFormat('de-DE').format(item.offener)}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">
                    {t('hdd')}: {new Intl.NumberFormat('de-DE').format(item.hdd)}m
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      
      <div className="mt-8 flex flex-wrap 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">{t('kabel')}</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-neutral-300" />
          <span className="text-xs font-bold text-neutral-500 uppercase">{t('offener')}</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">{t('hdd')}</span>
        </div>
      </div>
    </div>
  );
}