import React from 'react'
import { useSearchParams, Link } from 'react-router-dom'
import SEOHead from '../components/SEOHead'

export default function Confirmation() {
  const [searchParams] = useSearchParams()
  const status = searchParams.get('status')
  
  const isSuccess = status === 'success'

  return (
    <>
      <SEOHead 
        title={isSuccess ? "Vielen Dank" : "Ein Fehler ist aufgetreten"} 
        description={isSuccess ? "Ihre Nachricht wurde erfolgreich gesendet." : "Es gab ein Problem beim Senden Ihrer Nachricht."}
      />
      <main style={{ paddingTop: '120px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>
          {isSuccess ? (
            <>
              <div style={{ width: '80px', height: '80px', borderRadius: '50%', background: 'rgba(34, 197, 94, 0.1)', color: '#22c55e', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
                <svg width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h1 style={{ fontSize: '3rem', marginBottom: '16px' }}><span className="text-gradient">Vielen Dank!</span></h1>
              <p style={{ color: 'var(--text-secondary)', fontSize: '1.2rem', marginBottom: '32px' }}>
                Ihre Nachricht wurde erfolgreich gesendet. Ich werde mich so schnell wie möglich bei Ihnen melden.
              </p>
            </>
          ) : (
            <>
              <div style={{ width: '80px', height: '80px', borderRadius: '50%', background: 'rgba(239, 68, 68, 0.1)', color: '#ef4444', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
                <svg width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              <h1 style={{ fontSize: '3rem', marginBottom: '16px' }}><span className="text-gradient">Ein Fehler ist aufgetreten</span></h1>
              <p style={{ color: 'var(--text-secondary)', fontSize: '1.2rem', marginBottom: '32px' }}>
                Leider gab es ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es später noch einmal oder kontaktieren Sie mich direkt per E-Mail.
              </p>
            </>
          )}
          <Link to="/" className="primary-button">Zurück zur Startseite</Link>
        </div>
      </main>
    </>
  )
}