"use client"

import { useEffect, useState } from 'react'
import { motion } from 'framer-motion'

export default function Wartungsseite() {
  const [fortschritt, setFortschritt] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setFortschritt((alterFortschritt) => {
        const neuerFortschritt = Math.min(alterFortschritt + 1, 100)
        if (neuerFortschritt === 100) {
          clearInterval(timer)
        }
        return neuerFortschritt
      })
    }, 1000)

    return () => clearInterval(timer)
  }, [])

  return (
    <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4 text-gray-300">
      <div className="text-center">
        <div className="mb-8">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 340 250"
            className="w-64 h-48 mx-auto"
          >
            <g transform="translate(86.27574151754379,60.37628936767578)">
              <g transform="translate(44.72425842285156,0)">
                <g>
                  <rect fill="#0ca579" fillOpacity="0" strokeWidth="2" x="0" y="0" width="78" height="89.44133565727915" />
                  <svg x="0" y="0" width="78" height="89.44133565727915">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.30999755859375 74.88999938964844">
                      <g>
                        <g>
                          <path fill="#0ca579" d="M0 49.83l22.62 13.62V32.54L0 49.83z"/>
                          <path fill="#00ea90" d="M34.85 0v29.75L0 49.83V19.62L34.85 0z"/>
                          <path fill="#c1c1c1" d="M65.31 25.07L42.7 11.45v30.9l22.61-17.28z"/>
                          <path fill="#6b6b6b" d="M30.46 74.89V45.15l34.85-20.08v30.21L30.46 74.89z"/>
                        </g>
                      </g>
                    </svg>
                  </svg>
                </g>
              </g>
              <g transform="translate(0,96.44133758544922)">
                <g className="tp-name iconsvg-namesvg">
                  <g transform="scale(1)">
                    <path d="M11.27-6.15C10.6-4.9 9.32-4.37 8.18-4.37 6.79-4.37 5.57-5.18 5.76-6.46L6.71-13.25C6.9-14.58 8.32-15.36 9.74-15.39 10.91-15.39 12.08-14.92 12.52-13.8L16.81-15.44C15.72-18.95 12.94-19.98 10.52-19.98 6.57-19.98 2.34-17.7 1.73-13.25L0.78-6.46C0.17-1.98 3.73 0.28 7.6 0.28 10.07 0.28 12.91-0.7 15.33-4.15ZM16.5 0L29.53 0 30.19-4.93 22.18-4.93 24.27-19.7 19.26-19.7ZM39.18-19.7L34.2-19.7 31.45 0 36.43 0ZM50.45-6.15C49.78-4.9 48.5-4.37 47.36-4.37 45.97-4.37 44.75-5.18 44.94-6.46L45.89-13.25C46.08-14.58 47.5-15.36 48.92-15.39 50.09-15.39 51.26-14.92 51.7-13.8L55.99-15.44C54.9-18.95 52.12-19.98 49.7-19.98 45.75-19.98 41.52-17.7 40.91-13.25L39.96-6.46C39.35-1.98 42.91 0.28 46.78 0.28 49.26 0.28 52.09-0.7 54.51-4.15ZM62.42-12.41L63.45-19.7 58.44-19.7 55.68 0 60.69 0 61.64-6.82 61.83-7.04 65.95 0 72.21 0 65.84-10.02 75-19.7 68.79-19.7ZM83.15-6.15C82.48-4.9 81.2-4.37 80.06-4.37 78.67-4.37 77.44-5.18 77.64-6.46L78.59-13.25C78.78-14.58 80.2-15.36 81.62-15.39 82.79-15.39 83.96-14.92 84.4-13.8L88.69-15.44C87.6-18.95 84.82-19.98 82.4-19.98 78.45-19.98 74.22-17.7 73.6-13.25L72.66-6.46C72.05-1.98 75.61 0.28 79.48 0.28 81.95 0.28 84.79-0.7 87.21-4.15ZM100.79-19.7L96.26-19.7 86.63 0 91.97 0 93.72-3.95 98.98-3.95 99.73 0 105.08 0ZM95.48-8.38L97.65-14.14 97.84-14.14 98.43-8.38ZM106.36 0L111.34 0 112.42-7.88 112.37-11.69 112.48-11.72 113.65-7.76 117.02 0 122.05 0 124.81-19.7 119.85-19.7 118.6-10.77 118.66-7.37 118.55-7.35 117.43-11.3 113.84-19.7 109.11-19.7ZM127.92-19.7L125.17 0 132.54 0C136.5 0 140.45-1.95 141.09-6.48L142.03-13.11C142.67-17.7 139.25-19.7 135.3-19.7ZM130.82-4.68L132.29-15.05 134.83-15.05C136.19-15.05 137.16-14.19 137.02-13.11L136.08-6.48C135.94-5.43 134.71-4.68 133.35-4.68ZM150.58-19.7L145.6-19.7 142.84 0 147.82 0ZM167.5-15.17L168.16-19.73 152.5-19.73 151.83-15.17 157.14-15.17 155.06 0 160.09 0 162.18-15.17Z" transform="translate(-0.71148282289505, 19.979999542236328)" fill="#ffffff"/>
                  </g>
                </g>
              </g>
            </g>
          </svg>
        </div>
        
        <h2 className="text-2xl font-bold mb-4 text-white">Wir aktualisieren unsere Website</h2>
        <p className="text-lg text-gray-400 mb-8 max-w-md mx-auto">
          Wir arbeiten daran, Ihnen ein verbessertes Erlebnis zu bieten. 
          Unser Team bereitet Ihre Website mit neuen Funktionen vor.
        </p>
        
        <div className="w-64 h-2 bg-gray-700 rounded-full overflow-hidden mb-8 mx-auto">
          <motion.div
            className="h-full bg-green-500"
            style={{ width: `${fortschritt}%` }}
            transition={{ duration: 0.5 }}
          />
        </div>
        
        <p className="text-lg text-green-400 font-semibold mb-8">
          Ihre Website wird in 24 Stunden wieder verfügbar sein.
        </p>
      </div>
      
      <footer className="mt-8 text-center text-sm text-gray-500">
        <p>© 2024 ClickCandit. Alle Rechte vorbehalten.</p>
        <p className="mt-2">Für dringende Angelegenheiten: <a href="mailto:support@clickcandit.com" className="text-green-400 hover:underline">support@clickcandit.com</a></p>
      </footer>
    </div>
  )
}