all-file-converter/src/components/SupportBanner.tsx

import { Coffee, ShoppingBag, AlertCircle, Heart } from "lucide-react";

export default function SupportBanner() {
  return (
    <section id="support" className="py-16 bg-white border-t border-b border-slate-100/80">
      <div className="max-w-4xl mx-auto px-4 md:px-8">
        <div className="p-8 rounded-[32px] bg-gradient-to-br from-[#FAF9FE] to-white border border-violet-100/50 shadow-xl shadow-slate-100/40 relative overflow-hidden">
          {/* Subtle decoration */}
          <div className="absolute -top-12 -right-12 w-48 h-48 bg-amber-500/5 rounded-full blur-2xl pointer-events-none" />
          <div className="absolute -bottom-12 -left-12 w-48 h-48 bg-violet-500/5 rounded-full blur-2xl pointer-events-none" />

          {/* Heading */}
          <div className="flex flex-col items-center text-center max-w-xl mx-auto mb-8">
            <div className="w-10 h-10 rounded-2xl bg-amber-50/80 text-amber-600 border border-amber-100 flex items-center justify-center mb-4">
              <Heart className="w-5 h-5 fill-current text-rose-500 animate-pulse" />
            </div>
            <h3 className="font-display font-medium text-xl md:text-2xl text-slate-900 tracking-tight">
              Support Our Offline Engine Development
            </h3>
            <p className="text-slate-500 text-xs md:text-sm font-light mt-2">
              We work tirelessly to keep Lumina Convert open, GDPR-compliant, and 100% free of web tracking servers. Your kind support directly finances our local codec development!
            </p>
          </div>

          {/* Two Support CTA Pillars */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl mx-auto mb-6" id="support-cta-grid">
            {/* Buy Me A Coffee Column */}
            <a
              href="https://www.buymeacoffee.com/bahaduralimunnabhai"
              target="_blank"
              rel="noopener noreferrer"
              id="support-buymeacoffee-link"
              className="group p-5 rounded-2xl bg-[#FFDD00]/10 border border-[#FFDD00]/30 hover:bg-[#FFDD00]/20 transition-all duration-300 flex items-center space-x-4 text-left cursor-pointer"
            >
              <div className="w-12 h-12 rounded-xl bg-[#FFDD00] flex items-center justify-center shadow-sm text-yellow-950">
                <Coffee className="w-6 h-6 stroke-[2]" />
              </div>
              <div>
                <h4 className="font-semibold text-sm text-slate-800 group-hover:text-amber-900 transition-colors">
                  Buy Me a Coffee
                </h4>
                <p className="text-[11px] text-slate-500 font-light mt-0.5">
                  Fuel our coding sessions with a fresh warm brew.
                </p>
              </div>
            </a>

            {/* Shop on Amazon Column */}
            <a
              href="https://amazon.com?tag=bahaduralimunnabhai-20" // Standard fallback tag model
              target="_blank"
              rel="noopener noreferrer"
              id="support-amazon-affiliate-link"
              className="group p-5 rounded-2xl bg-[#FF9900]/10 border border-[#FF9900]/30 hover:bg-[#FF9900]/20 transition-all duration-300 flex items-center space-x-4 text-left cursor-pointer"
            >
              <div className="w-12 h-12 rounded-xl bg-[#FF9900] flex items-center justify-center shadow-sm text-slate-950">
                <ShoppingBag className="w-5 h-5 text-white stroke-[2.5]" />
              </div>
              <div>
                <h4 className="font-semibold text-sm text-slate-800 group-hover:text-amber-900 transition-colors">
                  Shop on Amazon
                </h4>
                <p className="text-[11px] text-slate-500 font-light mt-0.5">
                  Update your local storage hardware through our link.
                </p>
              </div>
            </a>
          </div>

          {/* Amazon Affiliate Legal Disclosure */}
          <div className="flex items-start max-w-xl mx-auto text-left bg-slate-50/60 border border-slate-100 p-4 rounded-xl">
            <AlertCircle className="w-4 h-4 text-slate-400 mr-2.5 mt-0.5 flex-shrink-0" />
            <p className="text-[11px] text-slate-450 leading-relaxed font-mono">
              <span className="font-semibold text-slate-600">Amazon Affiliate Disclosure:</span> As an Amazon Associate, we earn from qualifying purchases. Using these tracking links helps fund Lumina Convert’s developer updates without posing any extra cost to your purchases.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}