import React from 'react';
import { Helmet } from 'react-helmet-async';
import { NewsletterForm } from '@/components/NewsletterForm';

export default function Subscribe() {
    return (
        <div className="min-h-[70vh] flex flex-col items-center justify-center py-20 px-4 bg-gray-50/50">
            <Helmet>
                <title>Subscribe | WooNooW</title>
            </Helmet>

            <div className="max-w-md w-full bg-white p-8 md:p-10 rounded-2xl shadow-sm border border-gray-100 text-center space-y-6">
                <div className="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                </div>

                <h1 className="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">
                    Subscribe to our Newsletter
                </h1>
                <p className="text-gray-600 leading-relaxed">
                    Get the latest updates, articles, and exclusive offers straight to your inbox. No spam, ever.
                </p>

                <div className="pt-4 mt-8 text-left">
                    <NewsletterForm
                        gdprRequired={true}
                        consentText="I agree to receive marketing emails and understand I can unsubscribe at any time."
                    />
                </div>

                <p className="text-xs text-gray-400 mt-6 pt-6 border-t border-gray-100">
                    By subscribing, you agree to our Terms of Service and Privacy Policy.
                </p>
            </div>
        </div>
    );
}