import React from 'react';
import { useTranslation } from 'react-i18next';
import PricingTable from '../../components/marketing/PricingTable';
import FAQAccordion from '../../components/marketing/FAQAccordion';
import CTASection from '../../components/marketing/CTASection';

const PricingPage: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div className="bg-gray-50 dark:bg-gray-900 min-h-screen">
      {/* Header */}
      <div className="pt-24 pb-12 text-center px-4 sm:px-6 lg:px-8">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Simple, Transparent Pricing
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          Start for free, upgrade as you grow. No hidden fees.
        </p>
      </div>

      {/* Pricing Table */}
      <div className="pb-20">
        <PricingTable />
      </div>

      {/* FAQ Section */}
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
          Frequently Asked Questions
        </h2>
        <FAQAccordion items={[
          {
            question: "Do I need to know Python to use SmoothSchedule?",
            answer: "Not at all! You can use our pre-built plugins from the marketplace for common tasks like email reminders and reports. Python is only needed if you want to write custom scripts."
          },
          {
            question: "What happens if I exceed my plan's limits?",
            answer: "We'll notify you when you're close to your limit. If you exceed it, we'll give you a grace period to upgrade. We won't cut off your service immediately."
          },
          {
            question: "Can I use my own domain name?",
            answer: "Yes! On the Pro and Business plans, you can connect your own custom domain (e.g., booking.yourcompany.com) for a fully branded experience."
          },
          {
            question: "Is my data safe?",
            answer: "Absolutely. We use dedicated secure vaults (Postgres schemas) to physically isolate your data from other customers. It's the gold standard for multi-tenant security."
          }
        ]} />
      </div>

      {/* CTA */}
      <CTASection />
    </div>
  );
};

export default PricingPage;
