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">
      {/* Top bar */}
      <div className="sticky top-0 z-50" style={{ background: 'rgba(26, 28, 35, 0.95)', borderBottom: '1px solid var(--color-border-default)' }}>
        <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-accent-text">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: 'var(--color-success-dim)', 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(--color-border-default)' }} />

          {/* Feedback callout */}
          <div
            className="card-flat 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-sans text-xs 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>
    </>
  )
}