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

export const metadata: Metadata = {
  title: 'Sign the Petition',
  description:
    'Add your name to the Plymouth Metro petition. Thousands of residents are calling for a modern rapid transit network — be part of the movement.',
}

const schemaOrg = {
  '@context': 'https://schema.org',
  '@type': 'GovernmentService',
  name: 'Plymouth Metro Petition',
  description: 'Sign the petition for a Plymouth Metro rapid transit network.',
  url: 'https://plymouthmetro.co.uk/support',
  provider: {
    '@type': 'Organization',
    name: 'Plymouth Metro Campaign',
    url: 'https://plymouthmetro.co.uk',
  },
}

export default function SupportPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaOrg) }}
      />

      <section className="bg-hero-gradient text-white py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="badge bg-white/15 text-white mb-4">Sign the Petition</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              Add your name to Plymouth Metro
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Every signature shows decision-makers that Plymouth residents want rapid transit
              investment. Sign now and help us reach our target.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 bg-metro-light">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">

            {/* Why sign */}
            <div>
              <h2 className="text-2xl font-bold text-metro-navy mb-5">
                Why your signature matters
              </h2>

              <div className="space-y-4 mb-8">
                {[
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-5 h-5" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                      </svg>
                    ),
                    title: 'Demonstrates public demand',
                    body: 'Funding bodies and decision-makers look for evidence of community support before committing to major transport projects.',
                  },
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-5 h-5" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                      </svg>
                    ),
                    title: 'Strengthens the political case',
                    body: 'Elected representatives are more likely to champion Plymouth Metro when they can show widespread constituent support.',
                  },
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-5 h-5" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
                      </svg>
                    ),
                    title: 'Grows the movement',
                    body: 'Each signer can share with friends and family, multiplying the reach of the campaign across Plymouth and beyond.',
                  },
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-5 h-5" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                      </svg>
                    ),
                    title: 'Safe and secure',
                    body: 'Your data is held securely under GDPR. We will never share or sell your details. You can unsubscribe from updates at any time.',
                  },
                ].map(item => (
                  <div key={item.title} className="flex gap-4">
                    <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-metro-light flex items-center justify-center text-metro-sky">
                      {item.icon}
                    </div>
                    <div>
                      <p className="font-semibold text-metro-navy text-sm">{item.title}</p>
                      <p className="text-sm text-metro-muted mt-0.5 leading-relaxed">{item.body}</p>
                    </div>
                  </div>
                ))}
              </div>

              {/* Social share */}
              <div className="bg-white rounded-2xl p-5 border border-metro-border">
                <p className="text-sm font-semibold text-metro-navy mb-3">
                  Already signed? Help spread the word:
                </p>
                <SocialShare
                  compact
                  title="Sign the Plymouth Metro Petition"
                  text="I've signed the Plymouth Metro petition for a modern rapid transit network. Add your name!"
                  url="https://plymouthmetro.co.uk/support"
                />
              </div>
            </div>

            {/* Form */}
            <div className="bg-white rounded-2xl border border-metro-border shadow-lg p-6 sm:p-8">
              <div className="mb-6">
                <h2 className="text-2xl font-bold text-metro-navy mb-1">Sign the petition</h2>
                <p className="text-metro-muted text-sm">
                  Takes less than 60 seconds. All fields marked{' '}
                  <span className="text-red-500" aria-hidden="true">*</span> are required.
                </p>
              </div>
              <LeadCaptureForm />
            </div>

          </div>
        </div>
      </section>
    </>
  )
}