import type { Metadata } from 'next'
import Link from 'next/link'
import SocialShare from '@/components/SocialShare'

export const metadata: Metadata = {
  title: 'Thank You for Signing!',
  description: 'You have signed the Plymouth Metro petition. Help us reach more people by sharing the campaign.',
  robots: { index: false, follow: false },
}

export default function ThankYouPage() {
  return (
    <>
      <section className="min-h-[70vh] flex items-center bg-metro-light py-16">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
          <div className="bg-white rounded-3xl border border-metro-border shadow-xl p-8 sm:p-12 text-center">

            {/* Success icon */}
            <div className="w-20 h-20 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}
                   className="w-10 h-10 text-green-600" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </div>

            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-green-100
                            text-green-700 text-sm font-semibold mb-4">
              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
              Signature confirmed
            </div>

            <h1 className="text-3xl sm:text-4xl font-black text-metro-navy mb-4">
              Thank you for supporting Plymouth Metro!
            </h1>

            <p className="text-metro-muted text-lg leading-relaxed mb-6 max-w-xl mx-auto">
              Your name has been added to the Plymouth Metro petition. Together we're building the
              public mandate needed to make rapid transit in Plymouth a reality.
            </p>

            {/* Progress indicator */}
            <div className="bg-metro-light rounded-2xl p-6 mb-8 text-left">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-semibold text-metro-navy">Petition progress</span>
                <span className="text-sm font-bold text-metro-sky">10,000+ / 25,000 goal</span>
              </div>
              <div className="w-full h-3 bg-metro-border rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-metro-sky to-metro-teal rounded-full"
                  style={{ width: '40%' }}
                  role="progressbar"
                  aria-valuenow={40}
                  aria-valuemin={0}
                  aria-valuemax={100}
                  aria-label="40% of petition goal reached"
                />
              </div>
              <p className="text-xs text-metro-muted mt-2">
                Help us reach 25,000 signatures by sharing with friends and family.
              </p>
            </div>

            {/* Share block */}
            <div className="border border-metro-border rounded-2xl p-6 mb-8 text-left">
              <h2 className="text-lg font-bold text-metro-navy mb-2">
                Now share the campaign — it's how we grow
              </h2>
              <p className="text-sm text-metro-muted mb-4">
                Every share reaches new potential supporters. Help us spread the word across
                Plymouth and beyond.
              </p>
              <SocialShare
                title="I signed the Plymouth Metro Petition — will you?"
                text="I've just signed the Plymouth Metro petition for a modern rapid transit network. Add your name!"
                url="https://plymouthmetro.co.uk/support"
              />
            </div>

            {/* What happens next */}
            <div className="text-left bg-metro-light rounded-2xl p-6 mb-8">
              <h2 className="text-base font-bold text-metro-navy mb-3">What happens next?</h2>
              <div className="space-y-3">
                {[
                  'Your signature is now recorded securely in our petition database.',
                  "If you opted in, you'll receive campaign updates by email — including news of any major milestones or announcements.",
                  'The petition will be presented to Plymouth City Council, our local MPs, and the Department for Transport as evidence of public demand.',
                  'You can unsubscribe from emails at any time using the link in any message we send you.',
                ].map((step, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <span className="flex-shrink-0 w-5 h-5 rounded-full bg-metro-sky text-white
                                     text-xs font-bold flex items-center justify-center mt-0.5">
                      {i + 1}
                    </span>
                    <p className="text-sm text-metro-muted leading-relaxed">{step}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* Navigation */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/" className="btn-secondary px-8 py-3">
                Back to Home
              </Link>
              <Link href="/map" className="btn-primary px-8 py-3" style={{color:"#ffffff"}}>
                Explore the Route Map
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}