import { useState } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Gift, Check, ArrowRight, MessageCircle, Send, ChevronDown } from 'lucide-react';
import SEO from '../components/SEO';
import SectionTitle from '../components/SectionTitle';
import { useApp } from '../context/AppContext';
import { pageKeywords } from '../data/keywords';
import { OrganizationSchema, HowToSchema } from '../components/schemas';

export default function FreeTools() {
  const { t } = useApp();
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const faqs = [
    {
      q: 'How do I actually get the free tools?',
      a: 'Super simple — click the "Get Free Access" button on any tool card, follow the Instagram verification steps, and we send you the login credentials on WhatsApp within 10 minutes. No tricks, no credit card required.',
    },
    {
      q: 'Are these genuine accounts or shared logins?',
      a: 'Every free account we give out is genuine and on its own email. We do not share one login across multiple people. You get your own access, same as our paid customers.',
    },
    {
      q: 'How long does the free access last?',
      a: "Free Kanva Pro accounts typically last 3-6 months depending on the education license cycle. When it's about to expire, we usually renew it or offer you a paid lifetime option at a crazy discount.",
    },
  ];

  return (
    <>
      <SEO
        title="Free Kanva Pro & Premium Digital Tools | Free Education Access | MFA Tools Net"
        description="Get Free Kanva Pro, Free Kanva Pro & premium digital tools with Free Education Access. No credit card needed. For Students & Creators. Kanva Pro Education Access."
        keywords={pageKeywords.freeTools}
      />
      <OrganizationSchema />
      <HowToSchema
        name="How to Get Free Premium Tools from MFA Tools Net"
        description="Follow these 3 simple steps to get free premium digital tools through MFA Tools Net's Free Tools Program."
        steps={[
          { name: "Create an Account", text: "Register on MFA Tools Net and verify your email address." },
          { name: "Share & Earn Credits", text: "Share your unique referral link and earn credits for every signup." },
          { name: "Redeem for Free Tools", text: "Use your earned credits to unlock premium tools at no cost." },
        ]}
        totalTime="PT5M"
      />

      {/* Hero */}
      <section className="pt-28 pb-16 lg:pt-32 lg:pb-20">
        <div className="container-main text-center max-w-3xl">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="w-16 h-16 bg-accent-yellow/15 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <Gift size={32} className="text-accent-yellow" />
            </div>
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight mb-4">
              Get Free Tools
            </h1>
            <p className="text-text-secondary text-lg max-w-xl mx-auto mb-8">
              We give away genuine premium accounts to students and creators who need them. No credit card. No payment. Just follow us and verify — we'll handle the rest.
            </p>
            <div className="flex flex-wrap justify-center gap-3">
              <a
                href="https://www.instagram.com/mfatools/"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-instagram/10 border border-instagram/30 text-white font-semibold px-6 py-3 rounded-xl hover:bg-instagram/20 transition-colors"
              >
                <Gift size={18} className="text-instagram" /> Follow on Instagram
              </a>
              <a
                href="https://t.me/mfatools"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-telegram/10 border border-telegram/30 text-white font-semibold px-6 py-3 rounded-xl hover:bg-telegram/20 transition-colors"
              >
                <Send size={18} className="text-telegram" /> Join Telegram
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* How It Works */}
      <section className="pb-16 lg:pb-20">
        <div className="container-main max-w-3xl">
          <SectionTitle
            label="HOW IT WORKS"
            title="3 Simple Steps to Free Access"
            subtitle="We made it as easy as possible. No surveys, no downloads, no nonsense."
            centered
          />
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10">
            {[
              { step: '1', title: 'Click Get Access', desc: 'Hit the button below for the tool you want. It takes you straight to our WhatsApp with a pre-filled message.' },
              { step: '2', title: 'Follow & Verify', desc: "Follow our Instagram page and send us a quick screenshot. Takes 30 seconds. We verify you're a real person." },
              { step: '3', title: 'Get Credentials', desc: 'We create a genuine account and send you the login details on WhatsApp. Usually within 5-10 minutes.' },
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.15 }}
                className="bg-bg-secondary border border-bg-border rounded-2xl p-6 text-center"
              >
                <div className="w-12 h-12 rounded-full bg-accent-yellow/10 flex items-center justify-center mx-auto mb-4">
                  <span className="text-accent-yellow font-bold text-lg">{item.step}</span>
                </div>
                <h3 className="text-white font-semibold mb-2">{item.title}</h3>
                <p className="text-text-secondary text-sm">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* BIG SECTION: Buy Kanva Pro Lifetime */}
      <section className="py-16 lg:py-20 bg-gradient-to-br from-[#7C3AED]/20 via-bg-secondary to-[#A855F7]/10">
        <div className="container-main max-w-3xl text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <span className="text-accent-lime text-sm font-medium uppercase tracking-wider">Most Popular Upgrade</span>
            <h2 className="text-3xl lg:text-4xl font-bold text-white mt-2 mb-4">
              Buy Kanva Pro Lifetime — <span className="gradient-text">DM For Pricing</span>
            </h2>
            <p className="text-text-secondary mb-6 leading-relaxed max-w-xl mx-auto">
              Look, the free accounts are great, but sometimes you want something permanent. Get Kanva Pro for life on your own email. No monthly fees. No renewal stress. Pay once, design forever. Contact us for the best price.
            </p>
            <ul className="space-y-2 mb-8 max-w-md mx-auto text-left">
              {['Your own private Kanva Pro account', 'Works on your personal email', 'Lifetime access — no expiration', 'All 600K+ templates + AI tools', 'Background remover, brand kit, everything'].map((item, i) => (
                <li key={i} className="flex items-center gap-3 text-text-secondary text-sm">
                  <Check size={16} className="text-accent-lime shrink-0" /> {item}
                </li>
              ))}
            </ul>
            <div className="flex flex-wrap justify-center gap-3">
              <a href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20want%20to%20buy%20Kanva%20Pro%20Lifetime%20for%20%246.%20Please%20guide%20me." target="_blank" rel="noopener noreferrer" className="bg-whatsapp text-white font-semibold px-6 py-3 rounded-xl hover:bg-green-600 transition flex items-center gap-2">
                <MessageCircle size={18} /> Get Kanva Pro — DM For Pricing
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Available Free Tools */}
      <section className="py-16 lg:py-20">
        <div className="container-main">
          <SectionTitle
            label="AVAILABLE FREE TOOLS"
            title="Free Kanva Pro Accounts"
            subtitle="Genuine education accounts. Your own email. No payment needed."
            centered
          />
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-10 max-w-4xl mx-auto">
            {[
              { title: 'Kanva Pro — Free', desc: 'Full Kanva Pro access on your own email. All templates, AI tools, brand kit, and 1TB storage included.', img: '/product-kanva-pro.jpg' },
              { title: 'Kanva Pro — Free', desc: 'Another free education slot available. Same full features. Limited spots per week.', img: '/product-kanva-pro.jpg' },
              { title: 'Kanva Pro — Free', desc: 'Get started with professional design tools at zero cost. Perfect for students and beginners.', img: '/product-kanva-pro.jpg' },
            ].map((tool, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="bg-bg-secondary border border-bg-border rounded-2xl overflow-hidden hover:border-accent-yellow/30 transition-all"
              >
                <img src={tool.img} alt={tool.title} className="w-full aspect-video object-cover" />
                <div className="p-5">
                  <h3 className="text-white font-semibold mb-2">{tool.title}</h3>
                  <p className="text-text-secondary text-sm mb-4">{tool.desc}</p>
                  <a
                    href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20want%20to%20get%20a%20free%20Kanva%20Pro%20account.%20Please%20guide%20me."
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block w-full text-center bg-bg-tertiary border border-bg-border text-white text-sm font-semibold py-2.5 rounded-xl hover:border-accent-yellow hover:text-accent-yellow transition-colors"
                  >
                    Get Free Access
                  </a>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Buy Kanva Admin Panel */}
      <section className="py-16 lg:py-20 bg-bg-secondary">
        <div className="container-main max-w-3xl text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4">
              Buy Kanva Admin Panel
            </h2>
            <p className="text-text-secondary mb-6 leading-relaxed max-w-xl mx-auto">
              Running an agency or want to resell Kanva access? Get your own admin panel and manage up to 500 members. Full control, full privacy, lifetime ownership.
            </p>
            <div className="flex flex-wrap justify-center gap-3">
              <a href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20want%20to%20buy%20Kanva%20Admin%20Panel.%20Please%20guide%20me." target="_blank" rel="noopener noreferrer" className="bg-whatsapp text-white font-semibold px-6 py-3 rounded-xl hover:bg-green-600 transition flex items-center gap-2">
                <MessageCircle size={18} /> Buy Admin Panel
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Why Free Tools? */}
      <section className="py-16 lg:py-20">
        <div className="container-main max-w-3xl">
          <div className="text-center mb-10">
            <h2 className="text-2xl sm:text-3xl font-bold text-white mb-3">Why Free Tools?</h2>
            <p className="text-text-secondary text-sm max-w-xl mx-auto">
              Honestly, we started as broke students ourselves. We know what it's like to need great tools but not have the budget. Giving away free accounts is our way of paying it forward. When you grow and can afford it, we hope you'll come back for our paid options. That's the deal.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[
              { title: 'Genuine Accounts', desc: 'Not shared logins. Not cracked software. Real education licenses.' },
              { title: 'No Payment Required', desc: 'Seriously. No credit card, no hidden fees, no subscriptions.' },
              { title: 'Fast Delivery', desc: 'Most free accounts are delivered within 5-10 minutes after verification.' },
            ].map((item, i) => (
              <div key={i} className="bg-bg-secondary border border-bg-border rounded-2xl p-5 text-center">
                <h3 className="text-white font-semibold text-sm mb-1">{item.title}</h3>
                <p className="text-text-secondary text-xs">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 lg:py-20 bg-bg-secondary">
        <div className="container-main max-w-[800px]">
          <SectionTitle label="FAQ" title="Questions About Free Tools" subtitle="Everything you need to know before claiming a free account." centered />
          <div className="mt-10 space-y-3">
            {faqs.map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.05 }}
                className="border border-bg-border rounded-xl overflow-hidden hover:border-[#3A3A3A] transition-colors"
              >
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full flex items-center justify-between px-5 py-4 text-left"
                >
                  <span className="text-white text-sm font-medium pr-4">{item.q}</span>
                  <ChevronDown size={18} className={`text-text-tertiary shrink-0 transition-transform ${openFaq === i ? 'rotate-180' : ''}`} />
                </button>
                {openFaq === i && (
                  <div className="px-5 pb-4">
                    <p className="text-text-secondary text-sm leading-relaxed">{item.a}</p>
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 lg:py-20">
        <div className="container-main text-center">
          <h2 className="text-2xl font-bold text-white mb-4">Ready to get started?</h2>
          <p className="text-text-secondary mb-6 max-w-lg mx-auto">
            Pick a free tool above, hit the button, and message us on WhatsApp. We'll take care of everything from there.
          </p>
          <div className="flex flex-wrap justify-center gap-3">
            <a
              href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20want%20to%20get%20a%20free%20Kanva%20Pro%20account.%20Please%20guide%20me."
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 bg-whatsapp text-white font-semibold px-8 py-3.5 rounded-full hover:bg-green-600 transition-colors"
            >
              <MessageCircle size={18} /> Get Free Access on WhatsApp
            </a>
            <Link
              to="/shop"
              className="inline-flex items-center gap-2 bg-accent-yellow text-bg-primary font-semibold px-8 py-3.5 rounded-full hover:bg-accent-yellow-dark transition-colors"
            >
              {t('shopNow')} <ArrowRight size={18} />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}