import React from 'react';
import { Metadata } from 'next';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema, newsArticleSchema } from '@/lib/schema';
import { ChevronRight, ExternalLink, Newspaper, Award, Calendar } from 'lucide-react';

export const metadata: Metadata = {
    title: 'Press & News | QR Master',
    description: 'Latest news, press releases, and updates from QR Master. Stay informed about new features, company announcements, and industry insights.',
    keywords: ['qr master press', 'qr code generator news', 'company updates', 'press releases'],
    openGraph: {
        title: 'Press & News | QR Master',
        description: 'Latest news, press releases, and updates from QR Master.',
        url: 'https://www.qrmaster.net/press',
        type: 'website',
    }
};

export default function PressPage() {
    const pressReleases = [
        {
            id: "global-launch-2026",
            title: "qrmaster.net Launches Free, Professional QR Code Generator for Global Users",
            date: "February 05, 2026",
            excerpt: "qrmaster.net unveils a new intuitive platform allowing businesses and individuals to create customized, high-resolution QR codes instantly. The tool removes technical barriers and subscription costs, simplifying digital connectivity for everyone.",
            bullets: [
                "Advanced customization options (colors, shapes, logos)",
                "No hidden fees or mandatory subscriptions",
                "High-resolution vector downloads (SVG, EPS, PDF)",
                "Privacy-focused with no data selling"
            ],
            link: "https://www.1888pressrelease.com/qrmaster-net-launches-free-professional-qr-code-generator-f-pr-762219.html",
            source: "1888PressRelease"
        },
        {
            id: "tools-launch-2026",
            title: "QR Master Launches Free QR Code and Barcode Tools With Tracking, UTMs, and Business-Ready Templates for 2026",
            date: "February 04, 2026",
            excerpt: "QR Master announces the launch of its comprehensive suite of free QR code and barcode generation tools, featuring advanced tracking capabilities, UTM builder integration, and professional business-ready templates.",
            bullets: [
                "Free QR code and barcode generation tools for all users",
                "Built-in tracking and analytics capabilities",
                "UTM builder for seamless marketing campaign integration",
                "Business-ready templates for professional use"
            ],
            link: "https://www.pr.com/press-release/959199",
            source: "PR.com"
        },
        {
            id: "launch-2026",
            title: "qrmaster.net Launches Free, Professional QR Code Generator for Global Users",
            date: "January 27, 2026",
            excerpt: "Duesseldorf-based startup unveils qrmaster.net, a comprehensive, free online QR code generator designed to serve as the ultimate bridge between the physical and digital worlds.",
            bullets: [
                "Advanced tracking capabilities with UTM builder for GA4 integration",
                "100% Free professional templates and design customization",
                "Privacy-focused architecture with no data selling",
                "Dynamic QR codes that can be edited after printing"
            ],
            link: "https://www.prlog.org/13123883-qrmasternet-launches-free-professional-qr-code-generator-for-global-users.html",
            source: "PRLog"
        }
    ];

    return (
        <>
            <SeoJsonLd data={[
                organizationSchema(),
                websiteSchema(),
                ...pressReleases.map(pr => newsArticleSchema({
                    headline: pr.title,
                    datePublished: new Date(pr.date).toISOString(),
                    description: pr.excerpt,
                    url: pr.link,
                }))
            ]} />

            <div className="bg-white min-h-screen">
                {/* Hero Section */}
                <section className="relative overflow-hidden bg-gradient-to-br from-gray-900 to-gray-800 text-white py-20 sm:py-24">
                    <div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10"></div>
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
                        <div className="max-w-3xl">
                            <h1 className="text-4xl sm:text-5xl font-bold mb-6 tracking-tight">
                                Newsroom
                            </h1>
                            <p className="text-xl text-gray-300 max-w-2xl leading-relaxed">
                                Latest updates, press releases, and announcements from the QR Master team.
                            </p>
                        </div>
                    </div>
                </section>

                {/* Press Releases List */}
                <section className="py-16 sm:py-24">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
                        <div className="flex items-center gap-3 mb-12">
                            <Newspaper className="w-6 h-6 text-blue-600" />
                            <h2 className="text-2xl font-bold text-gray-900">Latest Releases</h2>
                        </div>

                        <div className="space-y-12">
                            {pressReleases.map((pr) => (
                                <div key={pr.id} className="group relative bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden">
                                    <div className="absolute top-0 left-0 w-1 h-full bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity"></div>

                                    <div className="p-8 sm:p-10">
                                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
                                            <div className="flex items-center gap-2 text-sm text-gray-500 font-medium">
                                                <Calendar className="w-4 h-4" />
                                                {pr.date}
                                            </div>
                                            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
                                                Press Release
                                            </span>
                                        </div>

                                        <h3 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 group-hover:text-blue-600 transition-colors">
                                            <a href={pr.link} target="_blank" rel="noopener noreferrer" className="focus:outline-none">
                                                <span className="absolute inset-0" aria-hidden="true"></span>
                                                {pr.title}
                                            </a>
                                        </h3>

                                        <p className="text-gray-600 text-lg mb-8 leading-relaxed">
                                            {pr.excerpt}
                                        </p>

                                        {/* Key Facts Summary Block */}
                                        <div className="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-8">
                                            <h4 className="text-sm font-semibold text-blue-900 uppercase tracking-wider mb-4 flex items-center gap-2">
                                                <Award className="w-4 h-4" />
                                                Key Facts
                                            </h4>
                                            <ul className="space-y-2 text-sm text-blue-800">
                                                <li><strong>Company:</strong> QR Master</li>
                                                <li><strong>Date:</strong> {pr.date}</li>
                                                <li><strong>Product:</strong> Free QR Code & Barcode Generator</li>
                                                <li><strong>Key Features:</strong> UTM tracking, vector export, analytics, dynamic QR codes</li>
                                            </ul>
                                        </div>

                                        <div className="bg-gray-50 rounded-xl p-6 mb-8">
                                            <h4 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Highlights</h4>
                                            <ul className="grid sm:grid-cols-2 gap-4">
                                                {pr.bullets.map((bullet, idx) => (
                                                    <li key={idx} className="flex items-start gap-2 text-gray-700">
                                                        <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0"></span>
                                                        <span>{bullet}</span>
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>

                                        <div className="flex items-center justify-between mt-auto">
                                            <div className="flex items-center gap-2 text-sm text-gray-500">
                                                <span>Source:</span>
                                                <span className="font-semibold text-gray-900">{pr.source}</span>
                                            </div>
                                            <div className="flex items-center gap-1 text-blue-600 font-semibold group-hover:gap-2 transition-all">
                                                Read full release <ExternalLink className="w-4 h-4" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Media Kit CTA (Future proofing) */}
                <section className="bg-gray-50 py-16 border-t border-gray-100">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl text-center">
                        <h2 className="text-2xl font-bold text-gray-900 mb-4">Media Inquiries</h2>
                        <p className="text-gray-600 mb-8 max-w-xl mx-auto">
                            For press inquiries, assets, or interview requests from our leadership team.
                        </p>
                        <a href="mailto:support@qrmaster.net">
                            <Button variant="outline" size="lg">
                                Contact Press Team
                            </Button>
                        </a>
                    </div>
                </section>
            </div>
        </>
    );
}