import React from 'react';
import { ExternalLink, LifeBuoy, Mail, MessageCircle, Settings, ShieldCheck } from 'lucide-react';

const supportUrl = 'https://support.invizo.io';
const supportEmail = 'support@invizo';

export default function Support() {
    const checklist = [
        'Your WordPress and WooCommerce versions',
        'Invizo Subscriptions Lite version',
        'Stripe mode: test or live',
        'A short description of what you expected to happen',
    ];

    return (
        <div className="p-6 pb-20">
            <div className="mb-6">
                <div className="inline-flex items-center gap-2 rounded-full border border-[#c3d9ed] bg-[#f0f6fc] px-3 py-1 text-xs font-semibold text-[#2271b1]">
                    <LifeBuoy className="h-4 w-4" />
                    Invizo Support
                </div>
                <h1 className="mt-3 text-3xl font-bold text-[#1d2327]">Support</h1>
                <p className="mt-2 max-w-2xl text-sm text-[#646970]">
                    Need help setting up subscriptions, checkout, payment gateways, or customer account pages?
                    Reach the Invizo team from here and include a few details so we can help faster.
                </p>
            </div>

            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <div className="overflow-hidden rounded-lg border border-[#c3c4c7] bg-white shadow-sm">
                    <div className="bg-gradient-to-r from-[#0f172a] to-[#2271b1] p-6 text-white">
                        <div className="flex items-start justify-between gap-4">
                            <div>
                                <h2 className="text-2xl font-bold text-white">Get help from Invizo</h2>
                                <p className="mt-2 text-sm text-[#eaf4ff]">
                                    Open the support center for guides, troubleshooting, and ticket support.
                                </p>
                            </div>
                            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-white/15 text-white ring-1 ring-white/25">
                                <MessageCircle className="h-6 w-6" />
                            </div>
                        </div>
                    </div>

                    <div className="space-y-4 p-6">
                        <a
                            href={supportUrl}
                            target="_blank"
                            rel="noreferrer"
                            className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-[#135e96] px-5 py-3 text-sm font-semibold !text-white transition-colors hover:bg-[#0f4f82]"
                        >
                            Visit support.invizo.io
                            <ExternalLink className="h-4 w-4" />
                        </a>

                        <a
                            href={`mailto:${supportEmail}`}
                            className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-[#c3c4c7] bg-white px-5 py-3 text-sm font-semibold text-[#1d2327] transition-colors hover:bg-[#f6f7f7]"
                        >
                            <Mail className="h-4 w-4" />
                            Email {supportEmail}
                        </a>
                    </div>
                </div>

                <div className="rounded-lg border border-[#c3c4c7] bg-white p-6 shadow-sm">
                    <div className="mb-5 flex items-start gap-3">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-green-50 text-green-700">
                            <ShieldCheck className="h-5 w-5" />
                        </div>
                        <div>
                            <h2 className="text-xl font-semibold text-[#1d2327]">Before you contact us</h2>
                            <p className="mt-1 text-sm text-[#646970]">
                                These details help us understand your setup and reproduce the issue quickly.
                            </p>
                        </div>
                    </div>

                    <ul className="space-y-3">
                        {checklist.map((item) => (
                            <li key={item} className="flex gap-3 text-sm text-[#50575e]">
                                <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-[#2271b1]" />
                                <span>{item}</span>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>

            <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
                <div className="rounded-lg border border-[#dcdcde] bg-[#fcfcfc] p-5">
                    <Settings className="mb-3 h-5 w-5 text-[#2271b1]" />
                    <h3 className="font-semibold text-[#1d2327]">Setup questions</h3>
                    <p className="mt-2 text-sm text-[#646970]">
                        Get help with standalone pages, shortcodes, WooCommerce mode, and Stripe webhooks.
                    </p>
                </div>
                <div className="rounded-lg border border-[#dcdcde] bg-[#fcfcfc] p-5">
                    <Mail className="mb-3 h-5 w-5 text-[#2271b1]" />
                    <h3 className="font-semibold text-[#1d2327]">Email support</h3>
                    <p className="mt-2 text-sm text-[#646970]">
                        Send screenshots, error messages, or site details to {supportEmail}.
                    </p>
                </div>
                <div className="rounded-lg border border-[#dcdcde] bg-[#fcfcfc] p-5">
                    <LifeBuoy className="mb-3 h-5 w-5 text-[#2271b1]" />
                    <h3 className="font-semibold text-[#1d2327]">Support center</h3>
                    <p className="mt-2 text-sm text-[#646970]">
                        Use support.invizo.io for articles, troubleshooting, and product guidance.
                    </p>
                </div>
            </div>
        </div>
    );
}
