// components/InfoSection.jsx
import React from "react";
import { motion } from "framer-motion";
import { Card } from "@/components/ui/card";
import {
  Copy,
  Smartphone,
  Zap,
  Heart,
  Instagram,
  Music,
  MessageCircle,
  Sparkles
} from "lucide-react";

export default function InfoSection({ currentText = "Hello Instagram!" }) {
  const features = [
    {
      icon: <Copy className="w-5 h-5 text-blue-500" />,
      title: "Instant Copy",
      description: "One-tap copying to clipboard. No complicated steps."
    },
    {
      icon: <Smartphone className="w-5 h-5 text-green-500" />,
      title: "Mobile First",
      description: "Optimized for phones. Works perfectly on all devices."
    },
    {
      icon: <Zap className="w-5 h-5 text-yellow-500" />,
      title: "Lightning Fast",
      description: "Instant preview as you type. No loading times."
    },
    {
      icon: <Heart className="w-5 h-5 text-red-500" />,
      title: "Completely Free",
      description: "All 30+ fonts are free forever. No hidden costs."
    }
  ];

  const platforms = [
    {
      icon: <Instagram className="w-6 h-6 text-pink-500" />,
      name: "Instagram",
      description: "Stories, Bio, Posts"
    },
    {
      icon: <Music className="w-6 h-6 text-black" />,
      name: "TikTok",
      description: "Comments, Bio, Videos"
    },
    {
      icon: <MessageCircle className="w-6 h-6 text-green-500" />,
      name: "WhatsApp",
      description: "Status, Messages"
    },
    {
      icon: <Sparkles className="w-6 h-6 text-purple-500" />,
      name: "Everywhere",
      description: "Any social platform"
    }
  ];

  return (
    <motion.section
      initial={{ opacity: 0, y: 40 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.5 }}
      className="mb-12 space-y-20"
    >


      <div id="about">
        <h2 className="text-3xl font-bold text-black mb-4">
          📱 Vorschau in Social Media
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         <Card className="p-6 bg-white border border-gray-200 rounded-xl shadow-sm flex flex-col justify-between">
  <div>
    <h3 className="text-black font-semibold mb-1">Instagram Bio</h3>
    <div className="text-sm text-black-600 mb-2">
      <span className="font-semibold text-black">@your_username</span><br />
      ✨ Content Creator | 📍 Berlin<br />
      🖋️ fancytextstuff.com
    </div>
  </div>
  <div className="bg-white rounded-xl p-4 text-black shadow-sm flex-1 flex items-center justify-center">
    <p className="text-2xl font-bold">{currentText}</p>
  </div>
</Card>


          <Card className="p-6 bg-white border border-gray-200 rounded-xl shadow-sm flex flex-col justify-between">
  <div>
    <h3 className="text-black font-semibold mb-1">TikTok Comment</h3>
    <div className="text-sm text-black-600 mb-2">
      <span className="font-semibold text-black">@your_username</span><br />
      ✨ Content Creator | 📍 Berlin  <br />
      🖋️ fancytextstuff.com
    </div>
  </div>
  <div className="bg-white rounded-xl p-4 text-black shadow-sm flex-1 flex items-center justify-center">
    <p className="text-2xl font-bold">{currentText}</p>
  </div>
</Card>

        </div>
      </div>

      <div className="h-8" />

      <Card className="bg-white/95 backdrop-blur-sm p-6 sm:p-8 border-0 shadow-xl">
        <h2 className="text-2xl sm:text-3xl font-bold text-gray-800 text-center mb-6">
          How FancyText Works
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {features.map((feat, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 * idx }}
              className="text-center"
            >
              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                {feat.icon}
              </div>
              <h3 className="font-semibold text-gray-800 mb-2">{feat.title}</h3>
              <p className="text-gray-600 text-sm">{feat.description}</p>
            </motion.div>
          ))}
        </div>

        <div className="bg-gradient-to-r from-pink-50 to-purple-50 rounded-xl p-6">
          <h3 className="font-bold text-gray-800 mb-4 text-center">3 Simple Steps:</h3>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[
              { step: "1", text: "Type your text above", emoji: "⌨️" },
              { step: "2", text: "Pick a font style you like", emoji: "🎨" },
              { step: "3", text: "Tap to copy & paste anywhere", emoji: "📋" },
            ].map((item, idx) => (
              <div key={idx} className="text-center">
                <div className="text-2xl mb-2">{item.emoji}</div>
                <div className="bg-white rounded-lg p-3">
                  <div className="w-6 h-6 bg-pink-500 text-white rounded-full flex items-center justify-center text-sm font-bold mx-auto mb-2">
                    {item.step}
                  </div>
                  <p className="text-gray-700 text-sm font-medium">{item.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Card>

      <div className="h-8" />

      <Card className="bg-white/95 backdrop-blur-sm p-6 sm:p-8 border-0 shadow-xl">
        <h2 className="text-2xl sm:text-3xl font-bold text-gray-800 text-center mb-6">
          Works Everywhere
        </h2>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
          {platforms.map((plat, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.1 * idx }}
              className="bg-white rounded-xl p-4 text-center shadow-md hover:shadow-lg transition-all duration-200 hover:scale-105"
            >
              <div className="mb-3 flex justify-center">{plat.icon}</div>
              <h3 className="font-semibold text-gray-800 mb-1">{plat.name}</h3>
              <p className="text-gray-600 text-xs">{plat.description}</p>
            </motion.div>
          ))}
        </div>
        <div className="text-center">
          <p className="text-gray-600 text-sm">
            <strong>Universal compatibility:</strong> Our fonts work on Instagram, TikTok, WhatsApp, Twitter,
            Facebook, Discord, and any platform that supports Unicode text.
          </p>
        </div>
      </Card>

      <div className="h-8" />

      <Card className="bg-white/95 backdrop-blur-sm p-6 sm:p-8 border-0 shadow-xl">
        <h2 className="text-2xl sm:text-3xl font-bold text-gray-800 text-center mb-6">
          Frequently Asked Questions
        </h2>
        <div className="space-y-4">
          {[
            {
              q: "Are these fonts really free?",
              a: "Yes! All 30+ fonts are completely free to use. No registration, no payments, no limits."
            },
            {
              q: "Will these fonts work on my phone?",
              a: "Absolutely! Our fonts are Unicode-based and work on all devices – iPhone, Android, tablets, and computers."
            },
            {
              q: "Can I use these for commercial purposes?",
              a: "Yes, you can use our generated text for personal and commercial social media posts, stories, and bios."
            },
            {
              q: "Why do I need FancyFonts?",
              a: "Fancy fonts help your posts stand out, increase engagement, and make your social media presence more memorable."
            }
          ].map((faq, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 * idx }}
              className="bg-gray-50 rounded-lg p-4"
            >
              <h3 className="font-semibold text-gray-800 mb-2">Q: {faq.q}</h3>
              <p className="text-gray-600 text-sm">A: {faq.a}</p>
            </motion.div>
          ))}
        </div>
      </Card>

      <div className="h-8" />

      <div
  id="privacy"
  className="bg-gray-900 text-white border border-white rounded-xl shadow-lg max-w-3xl mx-auto px-6 py-8 mb-[20px]"
>
  <h2 className="text-2xl font-bold mb-4 text-center">Privacy Policy</h2>
  <div className="space-y-4 text-sm leading-relaxed">
    <p>
      Protecting your data is important to us.
    </p>
    <p>
      This website uses Google AdSense to display advertisements. Google may use cookies or similar technologies to tailor ads to your interests. In doing so, data like your IP address may be processed and potentially transferred to servers outside the EU. This only happens with your consent via the cookie banner (Art. 6 (1) a GDPR in conjunction with § 25 TTDSG). You can change or withdraw your consent at any time.
    </p>
    <p>
      <strong>No data collection with font features</strong><br />
      All font generation and formatting runs entirely in your browser. We do not store personal data or use cookies for this purpose.
    </p>
    <p>
      <strong>Anonymous usage statistics</strong><br />
      To improve our service, we may collect anonymous statistics – without storing IP addresses or other personal information.
    </p>
    <p>
      <strong>SSL encryption</strong><br />
      Our website uses SSL encryption to ensure your data is securely transmitted.
    </p>
    <p>
      <strong>Contact</strong><br />
      For any questions about privacy:<br />
      📧 <a
        href="mailto:support@yourdomain.com"
        className="text-blue-400 underline"
      >
        support@yourdomain.com
      </a>
    </p>
  </div>
</div>

<div className="text-center mt-8 text-sm text-gray-400">
  © 2025 FancyTextStuff
</div>

    </motion.section>
  );
}