import { useEffect } from "react";
import { updateSEO } from "../utils/seo";
import { Heart, Coffee, ShoppingBag, Globe, Share2, HelpCircle } from "lucide-react";

export default function Support() {
  useEffect(() => {
    updateSEO({
      title: "Support Our Platform & Affiliate Program | Lumina Convert",
      description: "Support Lumina Convert developers. 100% free offline file processing has real development and maintenance costs. Explore affiliate links or buy us a coffee.",
      keywords: "support Lumina convert, buy me a coffee bahaduralimunnabhai, amazon affiliate search portal, offline tools developer helper",
    });
  }, []);

  return (
    <section className="py-12 bg-gradient-to-b from-[#FBFBFD] to-[#FAF9FE] min-h-screen">
      <div className="max-w-4xl mx-auto px-4 md:px-8 mt-12 pb-24 text-left">
        {/* Badge */}
        <div className="mb-6 flex justify-center lg:justify-start">
          <div className="inline-flex items-center space-x-2 bg-amber-50 border border-amber-100 px-3.5 py-1.5 rounded-full">
            <Heart className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
            <span className="text-xs font-bold font-mono text-amber-700 uppercase tracking-widest">
              Lumina Generosity Fund
            </span>
          </div>
        </div>

        {/* Title */}
        <h1 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 tracking-tight leading-tight mb-5 text-center lg:text-left">
          Support the Future of{" "}
          <span className="bg-gradient-to-r from-amber-500 to-rose-500 bg-clip-text text-transparent font-extrabold">
            Secure Software
          </span>
        </h1>
        <p className="text-slate-600 text-base md:text-lg font-light max-w-3xl mb-12 text-center lg:text-left">
          Lumina Convert remains 100% free with absolutely no hidden locked upgrades, subscription limits, or advertisements. If this tool saves you time, consider helping us cover local device dev licenses, server storage, and support channels.
        </p>

        {/* Support Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
          {/* Card 1: BMC */}
          <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-md shadow-slate-100/10 flex flex-col justify-between text-left">
            <div>
              <div className="w-12 h-12 rounded-2xl bg-amber-50 text-amber-500 border border-amber-100 flex items-center justify-center shadow-sm mb-6">
                <Coffee className="w-5 h-5" />
              </div>
              <h3 className="font-display font-bold text-lg md:text-xl text-slate-900 tracking-tight mb-2">Buy Me a Coffee</h3>
              <p className="text-slate-500 text-xs md:text-sm font-light leading-relaxed mb-6">
                Direct tips help maintain and compile our server builds. Send direct coffee currency tokens via Buy Me a Coffee.
              </p>
            </div>
            <a
              href="https://www.buymeacoffee.com/bahaduralimunnabhai"
              target="_blank"
              rel="noopener noreferrer"
              className="w-full py-3 rounded-xl bg-amber-500 hover:bg-amber-600 transition text-white text-xs font-semibold text-center block"
            >
              Support via Buy Me a Coffee
            </a>
          </div>

          {/* Card 2: Amazon / Shop */}
          <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-md shadow-slate-100/10 flex flex-col justify-between text-left">
            <div>
              <div className="w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 border border-indigo-100 flex items-center justify-center shadow-sm mb-6">
                <ShoppingBag className="w-5 h-5" />
              </div>
              <h3 className="font-display font-bold text-lg md:text-xl text-slate-900 tracking-tight mb-2">Amazon Shopping Portal</h3>
              <p className="text-slate-500 text-xs md:text-sm font-light leading-relaxed mb-6">
                Shop on Amazon using our verified affiliate gateway at no additional cost to you. We earn a small, helpful commission on your orders.
              </p>
            </div>
            <a
              href="https://amzn.to/3Zg7ZcQ"
              target="_blank"
              rel="noopener noreferrer"
              className="w-full py-3 rounded-xl bg-violet-600 hover:bg-violet-700 transition text-white text-xs font-semibold text-center block"
            >
              Shop via Affiliate Link
            </a>
          </div>
        </div>

        {/* Affiliate Disclosure Compliance Box */}
        <div className="p-6 bg-slate-50 rounded-2xl border border-slate-205 text-slate-500 text-xs font-light leading-relaxed relative overflow-hidden">
          <div className="flex items-center gap-2 mb-2 font-semibold text-slate-700">
            <HelpCircle className="w-4 h-4 text-slate-400" />
            <span>Affiliate Disclosure & Transparency</span>
          </div>
          <p>
            Lumina Convert, in full conformity with regulatory fair-use frameworks and consumer integrity acts, declares that we participate in the Amazon Services LLC Associates Program. Clicking on our affiliate links contributes a small percentage of your normal shopping basket cost to our direct developer resources without modifying any prices on your products.
          </p>
        </div>
      </div>
    </section>
  );
}