import React, { useState, useMemo, useEffect } from 'react';
import { 
  CheckCircle2, 
  XCircle,
  RefreshCw, 
  Sun, 
  Moon, 
  Undo2, 
  Type, 
  Square, 
  Star 
} from 'lucide-react';

const Confetti = () => {
  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden">
      {[...Array(12)].map((_, i) => (
        <div
          key={i}
          className="absolute left-1/2 top-1/2 w-4 h-4 rounded-full animate-ping"
          style={{
            backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6'][i % 4],
            transform: `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px)`,
            animation: `confetti-burst 0.8s ease-out forwards`,
            animationDelay: `${Math.random() * 0.2}s`
          }}
        />
      ))}
      <style>{`
        @keyframes confetti-burst {
          0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
          100% { transform: translate(calc(-50% + ${Math.random() * 200 - 100}px), calc(-50% + ${Math.random() * 200 - 100}px)) scale(1.5); opacity: 0; }
        }
      `}</style>
    </div>
  );
};

const App = () => {
  const [bgColor, setBgColor] = useState('#ffffff');
  const [textColor, setTextColor] = useState('#184563');
  const [history, setHistory] = useState([]);
  const [showCelebration, setShowCelebration] = useState(false);

  const hexToRgb = (hex) => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return [r, g, b];
  };

  const getLuminance = (r, g, b) => {
    const a = [r, g, b].map(v => {
      v /= 255;
      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
  };

  const getContrast = (hex1, hex2) => {
    const rgb1 = hexToRgb(hex1);
    const rgb2 = hexToRgb(hex2);
    const l1 = getLuminance(...rgb1);
    const l2 = getLuminance(...rgb2);
    const brightest = Math.max(l1, l2);
    const darkest = Math.min(l1, l2);
    return (brightest + 0.05) / (darkest + 0.05);
  };

  const contrastRatio = useMemo(() => getContrast(bgColor, textColor), [bgColor, textColor]);
  
  // WCAG Compliance Logic
  const compliance = useMemo(() => ({
    normal: {
      aa: contrastRatio >= 4.5,
      aaa: contrastRatio >= 7.0
    },
    large: {
      aa: contrastRatio >= 3.0,
      aaa: contrastRatio >= 4.5
    }
  }), [contrastRatio]);

  const isAccessible = compliance.normal.aa;

  useEffect(() => {
    if (isAccessible) {
      setShowCelebration(true);
      const timer = setTimeout(() => setShowCelebration(false), 1000);
      return () => clearTimeout(timer);
    }
  }, [isAccessible]);

  const updateColors = (newBg, newText) => {
    if (newBg.toLowerCase() === bgColor.toLowerCase() && newText.toLowerCase() === textColor.toLowerCase()) return;
    setHistory(prev => [{ bg: bgColor, text: textColor }, ...prev].slice(0, 20));
    setBgColor(newBg);
    setTextColor(newText);
  };

  const handleUndo = () => {
    if (history.length === 0) return;
    const previous = history[0];
    setBgColor(previous.bg);
    setTextColor(previous.text);
    setHistory(prev => prev.slice(1));
  };

  const hexToHsl = (hex) => {
    let [r, g, b] = hexToRgb(hex);
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;
    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }
    return [h * 360, s * 100, l * 100];
  };

  const hslToHex = (h, s, l) => {
    l /= 100;
    const a = s * Math.min(l, 1 - l) / 100;
    const f = n => {
      const k = (n + h / 30) % 12;
      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
      return Math.round(255 * color).toString(16).padStart(2, '0');
    };
    return `#${f(0)}${f(8)}${f(4)}`;
  };

  const allAlternatives = useMemo(() => {
    const generateFor = (baseColor, targetToChange, fixedColor) => {
      const [h, s, l] = hexToHsl(baseColor);
      const lighter = [];
      const darker = [];

      for (let i = 0; i <= 100; i += 1) {
        const testHex = hslToHex(h, s, i);
        const ratio = targetToChange === 'text' 
          ? getContrast(fixedColor, testHex) 
          : getContrast(testHex, fixedColor);

        if (ratio >= 4.5) {
          if (i > l) lighter.push({ hex: testHex, ratio, l: i });
          if (i < l) darker.push({ hex: testHex, ratio, l: i });
        }
      }

      const pickFive = (arr, reverse = false) => {
        if (arr.length === 0) return [];
        const sorted = arr.sort((a, b) => reverse ? b.l - a.l : a.l - b.l);
        const result = [];
        const step = Math.max(1, Math.floor(sorted.length / 5));
        for (let j = 0; j < sorted.length && result.length < 5; j += step) {
          result.push(sorted[j]);
        }
        return result;
      };

      return {
        lighter: pickFive(lighter),
        darker: pickFive(darker, true)
      };
    };

    return {
      text: generateFor(textColor, 'text', bgColor),
      bg: generateFor(bgColor, 'bg', textColor)
    };
  }, [bgColor, textColor]);

  const ComplianceBadge = ({ label, passed }) => (
    <div className="flex items-center gap-2">
      {passed ? (
        <CheckCircle2 className="w-5 h-5 text-emerald-500 fill-emerald-50" />
      ) : (
        <XCircle className="w-5 h-5 text-rose-300" />
      )}
      <span className={`font-bold ${passed ? 'text-slate-800' : 'text-slate-400'}`}>
        {label}
      </span>
    </div>
  );

  const ColorSection = ({ title, icon: IconComp, alts, type }) => (
    <div className="space-y-10 p-10 bg-slate-50/50 rounded-[3rem] border border-slate-100 shadow-sm transition-all hover:shadow-md">
      <div className="flex items-center gap-5">
        <div className="p-4 bg-white shadow-sm rounded-[1.5rem] text-indigo-600">
          <IconComp className="w-8 h-8" />
        </div>
        <h3 className="text-xl font-black text-slate-700 uppercase tracking-[0.2em]">{title}</h3>
      </div>

      <div className="grid gap-10">
        <div className="space-y-5">
          <div className="flex items-center gap-3 text-sm font-bold text-slate-400 uppercase tracking-widest ml-2">
            <Sun className="w-5 h-5" /> Heller
          </div>
          <div className="grid grid-cols-5 gap-5">
            {alts.lighter.map((alt, i) => (
              <button 
                key={i}
                onClick={() => type === 'text' ? updateColors(bgColor, alt.hex) : updateColors(alt.hex, textColor)}
                className="group relative flex flex-col items-center gap-3"
              >
                <div 
                  className="w-full aspect-square rounded-[1.5rem] shadow-sm group-hover:shadow-xl transition-all group-hover:scale-110 group-hover:-translate-y-2 border border-white"
                  style={{ backgroundColor: alt.hex }}
                />
                <div className="absolute -top-2 -right-2 bg-white shadow-xl border border-slate-100 text-xs font-black px-3 py-1.5 rounded-xl text-slate-600 opacity-0 group-hover:opacity-100 transition-opacity z-10">
                  {alt.ratio.toFixed(1)}:1
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="space-y-5">
          <div className="flex items-center gap-3 text-sm font-bold text-slate-400 uppercase tracking-widest ml-2">
            <Moon className="w-5 h-5" /> Dunkler
          </div>
          <div className="grid grid-cols-5 gap-5">
            {alts.darker.map((alt, i) => (
              <button 
                key={i}
                onClick={() => type === 'text' ? updateColors(bgColor, alt.hex) : updateColors(alt.hex, textColor)}
                className="group relative flex flex-col items-center gap-3"
              >
                <div 
                  className="w-full aspect-square rounded-[1.5rem] shadow-sm group-hover:shadow-xl transition-all group-hover:scale-110 group-hover:-translate-y-2 border border-white"
                  style={{ backgroundColor: alt.hex }}
                />
                <div className="absolute -top-2 -right-2 bg-white shadow-xl border border-slate-100 text-xs font-black px-3 py-1.5 rounded-xl text-slate-600 opacity-0 group-hover:opacity-100 transition-opacity z-10">
                  {alt.ratio.toFixed(1)}:1
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 p-8 md:p-16 font-sans">
      <div className="max-w-7xl mx-auto bg-white rounded-[4rem] shadow-2xl overflow-hidden border border-slate-200">
        
        <div className="p-12 border-b border-slate-100 bg-white">
          <div className="flex items-center justify-between mb-4">
            <h1 className="text-4xl font-black text-slate-900 tracking-tight flex items-center gap-4">
              <RefreshCw className="w-10 h-10 text-indigo-600" />
              Der Kontrast-Prüfer Pro
            </h1>
            <div className="flex items-center gap-4">
              {compliance.normal.aaa && <Star className="w-6 h-6 text-amber-400 fill-amber-400 animate-pulse" />}
              <span className="text-base font-bold px-6 py-2 bg-indigo-50 text-indigo-600 rounded-full uppercase tracking-[0.2em]">
                WCAG 2.1 Standard
              </span>
            </div>
          </div>
          <p className="text-slate-500 text-2xl font-medium">Die Barrierefreiheit prüfen und die passenden Farbalternativen finden</p>
        </div>

        <div className="p-12">
          <div className="grid md:grid-cols-2 gap-12 mb-16">
            <div className="space-y-5">
              <label className="text-base font-bold text-slate-400 uppercase tracking-[0.2em] ml-2 flex items-center gap-3">
                <Square className="w-5 h-5" /> Der Hintergrund
              </label>
              <div className="group flex items-center gap-5 p-3 bg-slate-50 border-2 border-slate-100 rounded-[2.5rem] focus-within:border-indigo-500 focus-within:bg-white transition-all shadow-sm">
                <input 
                  type="color" 
                  value={bgColor} 
                  onChange={(e) => updateColors(e.target.value, textColor)}
                  className="w-20 h-20 rounded-[1.5rem] cursor-pointer border-none bg-transparent shadow-inner"
                />
                <input 
                  type="text" 
                  value={bgColor} 
                  onChange={(e) => updateColors(e.target.value, textColor)}
                  className="flex-1 bg-transparent border-none focus:ring-0 font-mono text-3xl font-bold uppercase text-slate-700"
                />
              </div>
            </div>
            
            <div className="space-y-5">
              <label className="text-base font-bold text-slate-400 uppercase tracking-[0.2em] ml-2 flex items-center gap-3">
                <Type className="w-5 h-5" /> Die Textfarbe
              </label>
              <div className="group flex items-center gap-5 p-3 bg-slate-50 border-2 border-slate-100 rounded-[2.5rem] focus-within:border-indigo-500 focus-within:bg-white transition-all shadow-sm">
                <input 
                  type="color" 
                  value={textColor} 
                  onChange={(e) => updateColors(bgColor, e.target.value)}
                  className="w-20 h-20 rounded-[1.5rem] cursor-pointer border-none bg-transparent shadow-inner"
                />
                <input 
                  type="text" 
                  value={textColor} 
                  onChange={(e) => updateColors(bgColor, e.target.value)}
                  className="flex-1 bg-transparent border-none focus:ring-0 font-mono text-3xl font-bold uppercase text-slate-700"
                />
              </div>
            </div>
          </div>

          <div 
            className="relative overflow-hidden rounded-[4rem] mb-12 min-h-[450px] flex flex-col items-center justify-center text-center p-20 transition-all duration-500 shadow-inner border border-slate-100 group/preview"
            style={{ backgroundColor: bgColor }}
          >
            <div className="relative z-10 transition-transform duration-500 group-hover/preview:scale-105">
              <h2 className="text-7xl md:text-9xl font-black mb-10 tracking-tighter" style={{ color: textColor }}>Beispieltext</h2>
              <p className="text-3xl md:text-4xl opacity-90 max-w-3xl mx-auto leading-relaxed font-medium" style={{ color: textColor }}>
                Dieser Bereich zeigt sofort, ob die gewählten Farben zusammen harmonieren
              </p>
            </div>
            
            <div className="absolute bottom-12 right-12 flex items-center gap-4 px-10 py-6 rounded-[2.5rem] font-black text-4xl backdrop-blur-2xl bg-black/10 border border-white/20 shadow-2xl">
              {contrastRatio.toFixed(2)} : 1
            </div>
          </div>

          <div className="space-y-16">
            {/* Detailed Compliance Section */}
            <div className="bg-slate-50 rounded-[3rem] p-10 border border-slate-100 shadow-sm relative overflow-hidden">
              {showCelebration && <Confetti />}
              <div className="grid md:grid-cols-3 gap-8 items-center">
                <div className="space-y-1 border-r border-slate-200 pr-8">
                  <span className="text-sm font-black text-slate-400 uppercase tracking-widest">Das Kontrastverhältnis</span>
                  <div className="text-5xl font-black text-slate-800 tracking-tighter">{contrastRatio.toFixed(2)} : 1</div>
                </div>
                
                <div className="md:col-span-2 space-y-6">
                  <span className="text-sm font-black text-slate-400 uppercase tracking-widest block">WCAG-Konformität</span>
                  <div className="flex flex-wrap gap-x-12 gap-y-6">
                    <div className="space-y-3">
                      <div className="text-lg font-black text-slate-700">Normaler Text</div>
                      <div className="flex gap-6">
                        <ComplianceBadge label="AA" passed={compliance.normal.aa} />
                        <ComplianceBadge label="AAA" passed={compliance.normal.aaa} />
                      </div>
                    </div>
                    <div className="space-y-3">
                      <div className="text-lg font-black text-slate-700">Großer Text</div>
                      <div className="flex gap-6">
                        <ComplianceBadge label="AA" passed={compliance.large.aa} />
                        <ComplianceBadge label="AAA" passed={compliance.large.aaa} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {!isAccessible && (
              <div className="grid lg:grid-cols-2 gap-12 animate-in fade-in slide-in-from-bottom-12 duration-700">
                <ColorSection 
                  title="Text-Alternativen" 
                  icon={Type} 
                  alts={allAlternatives.text} 
                  type="text" 
                />
                <ColorSection 
                  title="Hintergrund-Alternativen" 
                  icon={Square} 
                  alts={allAlternatives.bg} 
                  type="bg" 
                />
              </div>
            )}
          </div>
        </div>

        <div className="bg-slate-100 p-12 flex flex-col sm:flex-row items-center justify-between gap-10 border-t border-slate-200">
          <div className="flex items-center gap-10 text-sm font-black text-slate-400 uppercase tracking-[0.4em]">
            <div className="flex items-center gap-4">
              <div className="w-4 h-4 bg-emerald-400 rounded-full shadow-sm"></div>
              <span>AA Standard</span>
            </div>
            <div className="flex items-center gap-4">
              <div className="w-4 h-4 bg-indigo-400 rounded-full shadow-sm"></div>
              <span>AAA Standard</span>
            </div>
          </div>
          <div className="flex items-center gap-6">
            <button 
              disabled={history.length === 0}
              className={`flex items-center gap-4 px-12 py-5 rounded-[2rem] font-bold transition-all text-xl active:scale-95 shadow-sm ${
                history.length === 0 
                ? 'bg-slate-200 text-slate-400 cursor-not-allowed opacity-50' 
                : 'bg-white text-slate-700 border border-slate-200 hover:bg-white hover:shadow-md'
              }`}
              onClick={handleUndo}
            >
              <Undo2 className="w-6 h-6" />
              Rückgängig
            </button>
            <button 
              className="flex items-center gap-4 px-12 py-5 bg-slate-900 hover:bg-slate-800 text-white rounded-[2rem] font-bold transition-all text-xl active:scale-95 shadow-2xl"
              onClick={() => updateColors('#ffffff', '#184563')}
            >
              Auf den Standard setzen
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="https://digital-workshop.at/sitemaps_xsl.xsl"?>
<sitemapindex xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://digital-workshop.at/post-sitemap1.xml</loc>
<lastmod>2026-03-25T13:28:32+01:00</lastmod>
</sitemap>
<sitemap>
<loc>https://digital-workshop.at/page-sitemap1.xml</loc>
<lastmod>2026-03-25T20:00:10+01:00</lastmod>
</sitemap>
<sitemap>
<loc>https://digital-workshop.at/portfolio-sitemap1.xml</loc>
<lastmod>2026-03-20T11:25:32+01:00</lastmod>
</sitemap>
<sitemap>
<loc>https://digital-workshop.at/category-sitemap1.xml</loc>
</sitemap>
<sitemap>
<loc>https://digital-workshop.at/news.xml</loc>
<lastmod>2026-03-25T13:28:32+00:00</lastmod>
</sitemap>
</sitemapindex>