import { BrandLogo } from '@/components/common/BrandLogo'
import { PageMeta } from '@/components/common/PageMeta'

export default function SurveyThankYouPage() {
  return (
    <>
    <PageMeta title="Thank You" description="Thank you for your feedback on ResolutionFlow" />
    <div className="min-h-screen bg-background text-foreground">
      {/* Atmosphere orbs */}
      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
        <div
          className="absolute"
          style={{ top: '-200px', left: '-100px', width: '600px', height: '600px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.03) 40%, transparent 70%)', filter: 'blur(80px)' }}
        />
        <div
          className="absolute"
          style={{ bottom: '-150px', right: '-100px', width: '500px', height: '500px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0.02) 40%, transparent 70%)', filter: 'blur(80px)' }}
        />
      </div>

      {/* Top bar */}
      <div className="sticky top-0 z-50" style={{ backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
        <div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-5 py-3.5">
          <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline">
            <BrandLogo size="sm" />
            <span>Resolution<span className="text-gradient-brand">Flow</span></span>
          </a>
        </div>
      </div>

      <div className="relative z-10 mx-auto max-w-[680px] px-5">
        <div className="text-center pt-[120px] animate-fade-in-up">
          {/* Success icon */}
          <div className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ background: 'rgba(52, 211, 153, 0.1)', border: '1px solid rgba(52, 211, 153, 0.15)' }}>
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="oklch(0.76 0.15 163)" strokeWidth="2">
              <path d="M20 6L9 17l-5-5"/>
            </svg>
          </div>

          <h1 className="font-heading text-[clamp(24px,4vw,32px)] font-extrabold leading-tight mb-3">
            Thank You!
          </h1>
          <p className="text-[15px] text-muted-foreground max-w-[460px] mx-auto leading-relaxed mb-3">
            Your response has been recorded. Your expertise will directly shape how FlowPilot thinks about troubleshooting.
          </p>
          <p className="text-sm text-muted-foreground/70 max-w-[400px] mx-auto leading-relaxed mb-10">
            You can safely close this browser window now.
          </p>

          {/* Divider */}
          <div className="mx-auto w-12 h-px mb-10" style={{ background: 'var(--glass-border)' }} />

          {/* Feedback callout */}
          <div
            className="glass-card-static p-6 text-center max-w-[480px] mx-auto"
          >
            <div className="flex items-center justify-center gap-2 mb-3">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              </svg>
              <span className="font-label text-[0.625rem] uppercase tracking-widest text-primary font-semibold">
                Have Feedback?
              </span>
            </div>
            <p className="text-sm text-muted-foreground leading-relaxed">
              If you have any feedback unrelated to the survey, we'd love to hear from you at{' '}
              <a
                href="mailto:feedback@resolutionflow.com"
                className="text-primary hover:underline font-medium"
              >
                feedback@resolutionflow.com
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
    </>
  )
}