import { Clock, Tools } from "lucide-react"

export default function Component() {
  return (
    <div className="min-h-screen flex flex-col bg-[#0a0e17]">
      <header className="bg-[#0a0e17] border-b border-[#0ca579] p-4">
        <div className="container mx-auto flex justify-center items-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="240"
            height="188"
            viewBox="84.60126403808594 58.07960418701172 170.79748718261717 133.84079162597655"
            className="w-48 h-auto"
          >
            <g fill="#0ca579">
              <g transform="translate(130.99999994039536, 59.75408935546875)">
                <svg width="78" height="89.44133565727915">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.30999755859375 74.88999938964844">
                    <g>
                      <path fill="#0ca579" d="M0 49.83l22.62 13.62V32.54L0 49.83z"></path>
                      <path fill="#00ea90" d="M34.85 0v29.75L0 49.83V19.62L34.85 0z"></path>
                      <path fill="#c1c1c1" d="M65.31 25.07L42.7 11.45v30.9l22.61-17.28z"></path>
                      <path fill="#6b6b6b" d="M30.46 74.89V45.15l34.85-20.08v30.21L30.46 74.89z"></path>
                    </g>
                  </svg>
                </svg>
              </g>
            </g>
          </svg>
        </div>
      </header>
      <main className="flex-grow flex items-center justify-center px-4">
        <div className="text-center">
          <h1 className="text-[#0ca579] text-4xl font-bold mb-4">Wartungsarbeiten</h1>
          <p className="text-white text-xl mb-8">Wir arbeiten gerade an Ihrer Website. Bald sind wir fertig!</p>
          <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8 mb-8">
            <div className="flex items-center text-white">
              <Clock className="w-6 h-6 mr-2 text-[#0ca579]" />
              <span>Geschätzte Fertigstellung: 24-48 Stunden</span>
            </div>
            <div className="flex items-center text-white">
              <Tools className="w-6 h-6 mr-2 text-[#0ca579]" />
              <span>Status: In Arbeit</span>
            </div>
          </div>
          <p className="text-gray-400">
            Vielen Dank für Ihre Geduld. Bei Fragen kontaktieren Sie uns bitte unter{" "}
            <a href="mailto:clickcandit@gmail.com" className="text-[#0ca579] hover:underline">
              clickcandit@gmail.com
            </a>
          </p>
        </div>
      </main>
      <footer className="bg-[#0a0e17] border-t border-[#0ca579] p-4">
        <div className="container mx-auto text-center text-gray-400">
          <p>&copy; {new Date().getFullYear()} ClickCandit. Alle Rechte vorbehalten.</p>
        </div>
      </footer>
    </div>
  )
}