import { Link } from 'react-router-dom'
import { ArrowLeft, Building2 } from 'lucide-react'

export function Imprint() {
  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      {/* Header */}
      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <Link 
            to="/" 
            className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-100 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            <span className="text-sm font-medium">Back to Home</span>
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-8 md:p-12">
          {/* Title */}
          <div className="flex items-center gap-3 mb-8">
            <div className="w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
              <Building2 className="w-6 h-6 text-primary-600 dark:text-primary-400" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Impressum</h1>
              <p className="text-slate-500 dark:text-slate-400 mt-1">Legal Information</p>
            </div>
          </div>

          {/* Content - Placeholder for webklar.com content */}
          <div className="prose prose-slate max-w-none dark:prose-invert">
            <p className="text-slate-600 dark:text-slate-400 mb-6">
              <strong>Note:</strong> This imprint is managed by webklar.com. Please refer to their imprint for detailed information.
            </p>

            <div className="bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-6 mb-8">
              <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-4">Information according to § 5 TMG</h2>
              
              <div className="space-y-6 text-slate-700 dark:text-slate-300">
                <div>
                  <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Operator</h3>
                  <p className="mb-2">MailFlow is operated by:</p>
                  <p className="mb-4">
                    <strong>webklar.com</strong><br />
                    Kenso Grimm, Justin Klein
                  </p>
                  <p className="text-sm text-slate-600 dark:text-slate-400 mb-4">
                    For complete contact details and legal information, please visit:{' '}
                    <a 
                      href="https://webklar.com/impressum" 
                      target="_blank" 
                      rel="noopener noreferrer" 
                      className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                    >
                      webklar.com/impressum
                    </a>
                  </p>
                </div>

                <div className="pt-6 border-t border-slate-200 dark:border-slate-700">
                  <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Contact</h3>
                  <div className="space-y-2">
                    <p>
                      <strong>Email:</strong>{' '}
                      <a 
                        href="mailto:support@webklar.com" 
                        className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                      >
                        support@webklar.com
                      </a>
                    </p>
                    <p>
                      <strong>Phone:</strong>{' '}
                      <a 
                        href="tel:+4917623726355" 
                        className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                      >
                        +49 176 23726355
                      </a>
                      {' / '}
                      <a 
                        href="tel:+491704969375" 
                        className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                      >
                        +49 170 4969375
                      </a>
                    </p>
                    <p className="mt-4 text-sm text-slate-600 dark:text-slate-400">
                      For questions regarding MailFlow specifically:{' '}
                      <a 
                        href="mailto:support@mailflow.com" 
                        className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                      >
                        support@mailflow.com
                      </a>
                    </p>
                  </div>
                </div>

                <div className="pt-6 border-t border-slate-200 dark:border-slate-700">
                  <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Responsible for Content</h3>
                  <p>
                    The content of this website is the responsibility of webklar.com. 
                    For detailed information, please refer to the official imprint at{' '}
                    <a 
                      href="https://webklar.com/impressum" 
                      target="_blank" 
                      rel="noopener noreferrer" 
                      className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                    >
                      webklar.com/impressum
                    </a>
                  </p>
                </div>

                <div className="pt-6 border-t border-slate-200 dark:border-slate-700">
                  <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Liability for Links</h3>
                  <p>
                    Our website contains links to external websites. We have no influence on the content of these websites. 
                    Therefore, we cannot assume any liability for these external contents.
                  </p>
                </div>

                <div className="pt-6 border-t border-slate-200 dark:border-slate-700">
                  <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Copyright</h3>
                  <p>
                    The content and works on this website are subject to German copyright law. 
                    Reproduction, processing, distribution, and any form of commercialization require the written consent of the respective author or creator.
                  </p>
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700">
                <p className="text-sm text-slate-500 dark:text-slate-400">
                  <strong>Important:</strong> This is a simplified version. For the complete and legally binding imprint, please visit{' '}
                  <a 
                    href="https://webklar.com/impressum" 
                    target="_blank" 
                    rel="noopener noreferrer" 
                    className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 underline"
                  >
                    webklar.com/impressum
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
