import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { useState } from 'react';
import ComparisonTable from './components/ComparisonTable';
import FaqSection from './components/FaqSection';
import MultiYearStrip from './components/MultiYearStrip';
import type { DbPlan } from './components/plan-data';
import PlanCards from './components/PlanCards';
import PricingCta from './components/PricingCta';
import PricingHero from './components/PricingHero';

interface Props {
    plans: DbPlan[];
}

export default function Pricing({ plans }: Props) {
    const [yearly, setYearly] = useState(false);

    // Yearly savings vs 12 monthly payments, from the first paid plan.
    const paidPlan = plans.find(
        (p) => p.price_monthly > 0 && p.price_yearly > 0,
    );
    const yearlyDiscount = paidPlan
        ? Math.round(
              (1 - paidPlan.price_yearly / (paidPlan.price_monthly * 12)) * 100,
          )
        : 0;

    return (
        <PlatformLayout>
            <Seo
                title="Pricing"
                description="Simple, transparent pricing for MFIs of every size. Monthly or yearly plans with no hidden fees, from startup to scale."
            />

            <PricingHero
                yearly={yearly}
                onToggle={setYearly}
                yearlyDiscount={yearlyDiscount}
            />
            <PlanCards plans={plans} yearly={yearly} />
            <MultiYearStrip />
            <ComparisonTable plans={plans} />
            <FaqSection />
            <PricingCta />
        </PlatformLayout>
    );
}