import React from "react";
import { Button } from "@/components/ui/button";
import { Share2, Info } from "lucide-react";

export default function MobileOptimizedHeader({ 
  totalFonts,
  onQuickShare 
}) {
  return (
    <header className="text-center mb-6 sm:mb-8" style={{ pointerEvents: "none" }}>
      {/* Main Title */}
      <div className="mb-4">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-2 tracking-tight">
          <span className="bg-gradient-to-r from-yellow-300 via-pink-300 to-purple-300 bg-clip-text text-transparent">
            FancyText
          </span>
          <span className="text-2xl sm:text-3xl ml-2">🔥</span>
        </h1>
        <p className="text-white/90 text-base sm:text-lg font-medium mb-1">
          Make Your Bio Go Viral 🔥
        </p>
        <p className="text-white/70 text-sm">
          {totalFonts}+ unique fonts • Copy & Paste ready
        </p>
      </div>

      {/* Controls Row */}
      <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mb-4">
        {/* Quick Share */}
        <Button
          onClick={onQuickShare}
          variant="outline"
          size="sm"
          className="bg-white/10 border-white/20 text-white hover:bg-white/20 backdrop-blur-sm"
          style={{ pointerEvents: "auto" }}
        >
          <Share2 className="w-4 h-4 mr-1" />
          Share App
        </Button>

        {/* Info Badge */}
        <div className="flex items-center gap-1 bg-green-500/20 backdrop-blur-sm rounded-full px-3 py-1">
          <Info className="w-3 h-3 text-green-300" />
          <span className="text-green-200 text-xs font-medium">Free & Fast</span>
        </div>
      </div>

      {/* Feature Pills */}
      <div className="flex flex-wrap items-center justify-center gap-2 text-xs">
        {["📱 Mobile Optimized", "⚡ Instant Copy", "🎨 30+ Styles", "🔄 Always Updated"].map((feature, index) => (
          <span 
            key={index}
            className="bg-white/10 backdrop-blur-sm text-white/80 px-2 py-1 rounded-full"
          >
            {feature}
          </span>
        ))}
      </div>
    </header>
  );
}